Development

package.json

@@ -5,6 +5,7 @@
  "dependencies": {
  "react": "^17.0.2",
  "react-dom": "^17.0.2",
+ "react-icomoon": "^2.4.2",
  "react-scripts": "5.0.0",
  "typescript": "^4.5.4",
  "web-vitals": "^2.1.0"
@@ -73,5 +74,8 @@
  "eslint-plugin-storybook": "^0.5.5",
  "prettier": "^2.5.1",
  "webpack": "^5.65.0"
+ },
+ "resolutions": {
+ "mini-css-extract-plugin": "~2.4.5"
  }
 }

src/components/Button/Button.stories.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
+
 import Button from '../Button';
+
 import '../../styles/global.css';
 
 export default {

src/components/Button/index.tsx

@@ -1,8 +1,8 @@
 import React, { HTMLAttributes, ReactNode } from 'react';
 import cx from 'classnames';
+
 import styles from './Button.module.css';
 
-// types
 export interface Props extends HTMLAttributes<HTMLButtonElement> {
  children: ReactNode;
  variant: 'number' | 'operator' | 'equal';

src/components/Buttons/Buttons.module.css

@@ -3,7 +3,9 @@
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
  gap: 3px;
- width: 312px;
- height: 230px;
  margin: auto 0 0 0;
 }
+
+.ButtonsStory {
+ width: 200px;
+}

src/components/Buttons/Buttons.stories.tsx

@@ -1,10 +1,17 @@
 import React from 'react';
+
 import Buttons from '../Buttons';
+
+import styles from './Buttons.module.css';
 import '../../styles/global.css';
 
 export default {
  title: 'Buttons',
  component: Buttons
 };
 
-export const ButtonGrid = () => <Buttons />;
+export const ButtonStory = () => (
+ <div className={styles.ButtonsStory}>
+ <Buttons />
+ </div>
+);

src/components/Buttons/index.tsx

@@ -1,7 +1,9 @@
 import React from 'react';
-import styles from './Buttons.module.css';
+
 import Button from '../Button';
 
+import styles from './Buttons.module.css';
+
 const Buttons = () => {
  return (
  <section className={styles.Buttons}>

src/components/Calculator/Calculator.module.css

@@ -0,0 +1,8 @@
+.Calculator {
+ display: flex;
+ flex-direction: column;
+}
+
+.CalculatorStory {
+ width: 310px;
+}

src/components/Calculator/Calculator.stories.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import Calculator from '../Calculator';
+
+import styles from './Calculator.module.css';
+import '../../styles/global.css';
+
+export default {
+ title: 'Calculator',
+ component: Calculator
+};
+
+export const CalculatorStory = () => (
+ <div className={styles.CalculatorStory}>
+ <Calculator />
+ </div>
+);

src/components/Calculator/index.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import Screen from '../Screen';
+import Buttons from '../Buttons';
+
+import styles from './Calculator.module.css';
+
+const Calculator = () => {
+ return (
+ <div className={styles.Calculator}>
+ <Screen />
+ <Buttons />
+ </div>
+ );
+};
+
+export default Calculator;

src/components/Header/Header.module.css

@@ -0,0 +1,4 @@
+.Header {
+ display: block;
+ margin: 0 auto 0 0;
+}

src/components/Header/index.tsx

@@ -0,0 +1,30 @@
+import React, { MouseEventHandler } from 'react';
+
+import { LayoutTypes } from '../../constant';
+
+import Icon from '../Icon';
+
+import styles from './Header.module.css';
+
+export interface Props {
+ view: string;
+ setView: Function;
+}
+
+const Header = ({ view, setView }: Props) => {
+ const handleClick: MouseEventHandler = () => {
+ view === LayoutTypes.Calculator
+ ? setView(LayoutTypes.History)
+ : setView(LayoutTypes.Calculator);
+ };
+
+ const currentIcon = view === LayoutTypes.Calculator ? 'history' : 'back';
+
+ return (
+ <header className={styles.Header}>
+ <Icon icon={currentIcon} onClick={handleClick} />
+ </header>
+ );
+};
+
+export default Header;

src/components/History/History.module.css

@@ -0,0 +1,19 @@
+.History {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-around;
+ width: 100%;
+ height: 100%;
+}
+
+.Histories {
+ display: flex;
+ flex-direction: column;
+}
+
+.HistoryWrapper {
+ width: 320px;
+ height: 320px;
+ padding: 0.6rem;
+ border: 1px solid #fff;
+}

src/components/History/History.stories.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import History from '../History';
+
+import '../../styles/global.css';
+import styles from './History.module.css';
+
+export default {
+ title: 'History',
+ component: History
+};
+
+export const HistoryStory = () => (
+ <div className={styles.HistoryWrapper}>
+ <History />
+ </div>
+);

src/components/History/index.tsx

@@ -0,0 +1,25 @@
+import React, { useState } from 'react';
+
+import HistoryItem from '../HistoryItem';
+import HistoryFooter from '../HistoryFooter';
+
+import styles from './History.module.css';
+
+const History = () => {
+ const [history, setHistory] = useState([
+ { first: 1, operator: '+', second: 3, result: 2 } // hard coded dummy data
+ ]);
+
+ return (
+ <section className={styles.History}>
+ <div className={styles.Histories}>
+ {history.map((item, index) => (
+ <HistoryItem key={index} {...item} />
+ ))}
+ </div>
+ <HistoryFooter setHistory={setHistory} />
+ </section>
+ );
+};
+
+export default History;

src/components/HistoryFooter/HistoryFooter.module.css

@@ -0,0 +1,6 @@
+.HistoryFooter {
+ display: flex;
+ align-items: flex-end;
+ height: 100%;
+ margin: 0 0 0.2rem auto;
+}

src/components/HistoryFooter/HistoryFooter.stories.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import HistoryFooter, { Props } from '../HistoryFooter';
+
+import '../../styles/global.css';
+
+export default {
+ title: 'Footer',
+ component: HistoryFooter
+};
+
+export const HistoryFooterStory = (args: JSX.IntrinsicAttributes & Props) => (
+ <HistoryFooter {...args} />
+);

src/components/HistoryFooter/index.tsx

@@ -0,0 +1,22 @@
+import React, { MouseEventHandler } from 'react';
+import Icon from '../Icon';
+
+import styles from './HistoryFooter.module.css';
+
+export interface Props {
+ setHistory: Function;
+}
+
+const HistoryFooter = ({ setHistory }: Props) => {
+ const clearHistory: MouseEventHandler = () => {
+ setHistory([]);
+ };
+
+ return (
+ <footer className={styles.HistoryFooter}>
+ <Icon icon="garbage" onClick={clearHistory} />
+ </footer>
+ );
+};
+
+export default HistoryFooter;

src/components/HistoryItem/HistoryItem.module.css

@@ -0,0 +1,25 @@
+.HistoryItem {
+ display: flex;
+ flex-direction: column;
+ margin: 0 0 0 auto;
+ padding: 0 0.4rem 0.8rem 0.4rem;
+}
+
+.Operation {
+ color: var(--color-text-secondary);
+}
+
+.Operation span {
+ padding: 0.4rem;
+}
+
+.Result {
+ margin: 0.5rem 0 0 auto;
+ color: var(--color-text-primary);
+ font-size: calc(var(--font-size) * 2.5);
+ font-weight: 700;
+}
+
+.HistoryItemWrapper {
+ width: 120px;
+}

src/components/HistoryItem/HistoryItem.stories.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import HistoryItem from '../HistoryItem';
+
+import '../../styles/global.css';
+import styles from './HistoryItem.module.css';
+
+export default {
+ title: 'HistoryItem',
+ component: HistoryItem
+};
+
+export const HistoryItemStory = () => (
+ <div className={styles.HistoryItemWrapper}>
+ <HistoryItem first={21} operator="+" second={42} result={63} />
+ </div>
+);

src/components/HistoryItem/index.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+
+import styles from './HistoryItem.module.css';
+
+export interface Props {
+ first: number;
+ operator: string;
+ second: number;
+ result: number;
+}
+
+const HistoryItem = ({ first, operator, second, result }: Props) => {
+ return (
+ <div className={styles.HistoryItem}>
+ <div className={styles.Operation}>
+ <span>{first}</span>
+ <span>{operator}</span>
+ <span>{second}</span>
+ <span>=</span>
+ </div>
+ <div className={styles.Result}>{result}</div>
+ </div>
+ );
+};
+
+export default HistoryItem;

src/components/Icon/Icon.module.css

@@ -0,0 +1,6 @@
+.Icon {
+ width: 28px;
+ height: 28px;
+ cursor: pointer;
+ color: var(--color-text-primary);
+}

src/components/Icon/Icon.stories.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import Icon from '../Icon';
+
+import '../../styles/global.css';
+
+export default {
+ title: 'Icon',
+ component: Icon
+};
+
+export const BackIcon = () => <Icon icon="back" />;
+
+export const HistoryIcon = () => <Icon icon="history" />;
+
+export const RemoveIcon = () => <Icon icon="garbage" />;

src/components/Icon/index.tsx

@@ -0,0 +1,17 @@
+import React, { MouseEventHandler } from 'react';
+import IcoMoon from 'react-icomoon';
+
+const iconSet = require('./selection.json');
+
+import styles from './Icon.module.css';
+
+export interface Props {
+ icon: string;
+ onClick?: MouseEventHandler<Element>;
+}
+
+const Icon = (props: Props) => {
+ return <IcoMoon iconSet={iconSet} className={styles.Icon} {...props} />;
+};
+
+export default Icon;