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"

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 @@
+.Footer {
+  display: flex;
+  align-items: flex-end;
+  height: 100%;
+  margin: 0 0 0.2rem auto;
+}

src/components/HistoryFooter/HistoryFooter.stories.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+import HistoryFooter, { Props } from '../HistoryFooter';
+
+import '../../styles/global.css';
+
+export default {
+  title: 'Footer',
+  component: HistoryFooter
+};
+
+export const FooterStory = (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.Footer}>
+      <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;