From 997dfd5abd07e0f679431574621b44da6b1933e4 Mon Sep 17 00:00:00 2001 From: Aycan Ogut Date: Sun, 2 Jan 2022 16:07:21 +0300 Subject: [PATCH 001/125] update height --- src/styles/global.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/global.css b/src/styles/global.css index 61dca6b..9501472 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -27,7 +27,7 @@ } * { - height: 400px; + height: 40%; } body { From 2ae12614a1d3823984c01a2810501dae51ae9a0a Mon Sep 17 00:00:00 2001 From: Aycan Ogut Date: Sun, 2 Jan 2022 19:28:15 +0300 Subject: [PATCH 002/125] add images --- public/assets/icons/back.svg | 12 ++++++++++++ public/assets/icons/history.svg | 2 ++ 2 files changed, 14 insertions(+) create mode 100644 public/assets/icons/back.svg create mode 100644 public/assets/icons/history.svg diff --git a/public/assets/icons/back.svg b/public/assets/icons/back.svg new file mode 100644 index 0000000..062004c --- /dev/null +++ b/public/assets/icons/back.svg @@ -0,0 +1,12 @@ + + + \ No newline at end of file diff --git a/public/assets/icons/history.svg b/public/assets/icons/history.svg new file mode 100644 index 0000000..7ac646b --- /dev/null +++ b/public/assets/icons/history.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file From ee217dbb8928cfee20d1b96c75495fd396fb602a Mon Sep 17 00:00:00 2001 From: Aycan Ogut Date: Sun, 2 Jan 2022 19:32:08 +0300 Subject: [PATCH 003/125] create components --- src/components/Icon/Icon.module.css | 3 +++ src/components/Icon/Icon.stories.tsx | 10 ++++++++++ src/components/Icon/index.tsx | 18 ++++++++++++++++++ src/components/Input/Input.modules.css | 3 +++ src/components/Input/Input.stories.tsx | 10 ++++++++++ src/components/Input/index.tsx | 13 +++++++++++++ src/components/Screen/Screen.module.css | 3 +++ src/components/Screen/Screen.stories.tsx | 10 ++++++++++ src/components/Screen/index.tsx | 8 ++++++++ 9 files changed, 78 insertions(+) create mode 100644 src/components/Icon/Icon.module.css create mode 100644 src/components/Icon/Icon.stories.tsx create mode 100644 src/components/Icon/index.tsx create mode 100644 src/components/Input/Input.modules.css create mode 100644 src/components/Input/Input.stories.tsx create mode 100644 src/components/Input/index.tsx create mode 100644 src/components/Screen/Screen.module.css create mode 100644 src/components/Screen/Screen.stories.tsx create mode 100644 src/components/Screen/index.tsx diff --git a/src/components/Icon/Icon.module.css b/src/components/Icon/Icon.module.css new file mode 100644 index 0000000..f70e803 --- /dev/null +++ b/src/components/Icon/Icon.module.css @@ -0,0 +1,3 @@ +.Icon { + /* */ +} diff --git a/src/components/Icon/Icon.stories.tsx b/src/components/Icon/Icon.stories.tsx new file mode 100644 index 0000000..23ca097 --- /dev/null +++ b/src/components/Icon/Icon.stories.tsx @@ -0,0 +1,10 @@ +import React from 'react'; +import Input from '../Input'; +import '../../styles/global.css'; + +export default { + title: 'Input', + component: Input +}; + +export const InputStory = () => ; diff --git a/src/components/Icon/index.tsx b/src/components/Icon/index.tsx new file mode 100644 index 0000000..f132a94 --- /dev/null +++ b/src/components/Icon/index.tsx @@ -0,0 +1,18 @@ +import React from 'react'; +import styles from './Wrapper.module.css'; + +// types +export interface Props extends React.HTMLAttributes { + source: string; + alt: string; +} + +const Icon = ({ source, alt }: Props) => { + return ( +
+ {alt} +
+ ); +}; + +export default Icon; diff --git a/src/components/Input/Input.modules.css b/src/components/Input/Input.modules.css new file mode 100644 index 0000000..715124d --- /dev/null +++ b/src/components/Input/Input.modules.css @@ -0,0 +1,3 @@ +.Input { + /* */ +} diff --git a/src/components/Input/Input.stories.tsx b/src/components/Input/Input.stories.tsx new file mode 100644 index 0000000..bf683d8 --- /dev/null +++ b/src/components/Input/Input.stories.tsx @@ -0,0 +1,10 @@ +import React from 'react'; +import Input from '../Input'; +import '../../styles/global.css'; + +export default { + title: 'Input', + component: Input +}; + +export const InputStory = () => 21; diff --git a/src/components/Input/index.tsx b/src/components/Input/index.tsx new file mode 100644 index 0000000..6071a8c --- /dev/null +++ b/src/components/Input/index.tsx @@ -0,0 +1,13 @@ +import React from 'react'; +import styles from './Wrapper.module.css'; + +// types +export interface Props extends React.HTMLAttributes { + children: string; +} + +const Input = ({ children }: Props) => { + return
{children}
; +}; + +export default Input; diff --git a/src/components/Screen/Screen.module.css b/src/components/Screen/Screen.module.css new file mode 100644 index 0000000..bfa82b5 --- /dev/null +++ b/src/components/Screen/Screen.module.css @@ -0,0 +1,3 @@ +.Screen { + /* */ +} diff --git a/src/components/Screen/Screen.stories.tsx b/src/components/Screen/Screen.stories.tsx new file mode 100644 index 0000000..9a283b3 --- /dev/null +++ b/src/components/Screen/Screen.stories.tsx @@ -0,0 +1,10 @@ +import React from 'react'; +import Screen from '../Screen'; +import '../../styles/global.css'; + +export default { + title: 'Screen', + component: Screen +}; + +export const ScreenStory = () => ; diff --git a/src/components/Screen/index.tsx b/src/components/Screen/index.tsx new file mode 100644 index 0000000..efeca77 --- /dev/null +++ b/src/components/Screen/index.tsx @@ -0,0 +1,8 @@ +import React from 'react'; +import styles from './Wrapper.module.css'; + +const Screen = () => { + return
21
; +}; + +export default Screen; From fd999396771a7df266d2a1c419efe7bc5f95c5cb Mon Sep 17 00:00:00 2001 From: Aycan Ogut Date: Mon, 3 Jan 2022 20:53:04 +0300 Subject: [PATCH 004/125] add data.json --- src/data.json | 12 ++++++++++++ 1 file changed, 12 insertions(+) create mode 100644 src/data.json diff --git a/src/data.json b/src/data.json new file mode 100644 index 0000000..4799c26 --- /dev/null +++ b/src/data.json @@ -0,0 +1,12 @@ +{ + "icons": [ + { + "name": "back", + "src": "/assets/icons/back.svg" + }, + { + "name": "history", + "src": "/assets/icons/history.svg" + } + ] +} From e2572af6b846ce8698439f0b41de0e5f50e72958 Mon Sep 17 00:00:00 2001 From: Aycan Ogut Date: Mon, 3 Jan 2022 21:52:55 +0300 Subject: [PATCH 005/125] update svg icon --- public/assets/icons/history.svg | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/public/assets/icons/history.svg b/public/assets/icons/history.svg index 7ac646b..6af46f4 100644 --- a/public/assets/icons/history.svg +++ b/public/assets/icons/history.svg @@ -1,2 +1 @@ - - \ No newline at end of file + \ No newline at end of file From ea12656107ee5e26695b97f5cdd7ee56367cc766 Mon Sep 17 00:00:00 2001 From: Aycan Ogut Date: Mon, 3 Jan 2022 21:53:05 +0300 Subject: [PATCH 006/125] update json imports --- tsconfig.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tsconfig.json b/tsconfig.json index 19932c5..4761925 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -34,7 +34,7 @@ // "typeRoots": [], /* Specify multiple folders that act like `./node_modules/@types`. */ // "types": [], /* Specify type package names to be included without being referenced in a source file. */ // "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */ - // "resolveJsonModule": true, /* Enable importing .json files */ + "resolveJsonModule": true /* Enable importing .json files */, // "noResolve": true, /* Disallow `import`s, `require`s or ``s from expanding the number of files TypeScript should add to a project. */ /* JavaScript Support */ From 25c1ce37477ebdf5627902fd4d59f25640a8f16e Mon Sep 17 00:00:00 2001 From: Aycan Ogut Date: Mon, 3 Jan 2022 21:53:16 +0300 Subject: [PATCH 007/125] update object structure --- src/data.json | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/data.json b/src/data.json index 4799c26..fa929b7 100644 --- a/src/data.json +++ b/src/data.json @@ -1,12 +1,12 @@ { - "icons": [ - { - "name": "back", - "src": "/assets/icons/back.svg" + "icons": { + "back": { + "src": "/assets/icons/back.svg", + "alt": "back icon" }, - { - "name": "history", - "src": "/assets/icons/history.svg" + "history": { + "src": "/assets/icons/history.svg", + "alt": "history icon" } - ] + } } From 6aba565ef83c8f028c239ac15bd77474ded39254 Mon Sep 17 00:00:00 2001 From: Aycan Ogut Date: Mon, 3 Jan 2022 21:53:27 +0300 Subject: [PATCH 008/125] add dummy children --- src/components/Icon/Icon.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Icon/Icon.stories.tsx b/src/components/Icon/Icon.stories.tsx index 23ca097..a8172fe 100644 --- a/src/components/Icon/Icon.stories.tsx +++ b/src/components/Icon/Icon.stories.tsx @@ -7,4 +7,4 @@ export default { component: Input }; -export const InputStory = () => ; +export const InputStory = () => ; From a1f59c258285e12cbc84e8000bcb2934da881b98 Mon Sep 17 00:00:00 2001 From: Aycan Ogut Date: Mon, 3 Jan 2022 22:11:29 +0300 Subject: [PATCH 009/125] update children --- src/components/Icon/Icon.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Icon/Icon.stories.tsx b/src/components/Icon/Icon.stories.tsx index a8172fe..81c7c4f 100644 --- a/src/components/Icon/Icon.stories.tsx +++ b/src/components/Icon/Icon.stories.tsx @@ -7,4 +7,4 @@ export default { component: Input }; -export const InputStory = () => ; +export const InputStory = () => ; From 886ded4a05337805b4f5d7f978bf15a8bcc64bb9 Mon Sep 17 00:00:00 2001 From: Aycan Ogut Date: Mon, 3 Jan 2022 22:12:39 +0300 Subject: [PATCH 010/125] add height and max-width --- src/styles/global.css | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/styles/global.css b/src/styles/global.css index 9501472..21ce3dc 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -26,8 +26,8 @@ box-sizing: border-box; } -* { - height: 40%; +html { + height: 100%; } body { @@ -38,3 +38,7 @@ body { font-family: var(--font-family); font-size: var(--font-size); } + +img { + max-width: 100%; +} From d2b13a93cf4c8b82df6ac8511df0692f679fba7d Mon Sep 17 00:00:00 2001 From: Aycan Ogut Date: Mon, 3 Jan 2022 22:12:56 +0300 Subject: [PATCH 011/125] update css module --- src/components/Icon/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Icon/index.tsx b/src/components/Icon/index.tsx index f132a94..01a710e 100644 --- a/src/components/Icon/index.tsx +++ b/src/components/Icon/index.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import styles from './Wrapper.module.css'; +import styles from './Icon.module.css'; // types export interface Props extends React.HTMLAttributes { From d369e8b6fe0adf0c7bdc1a444897fe023507d4af Mon Sep 17 00:00:00 2001 From: Aycan Ogut Date: Mon, 3 Jan 2022 22:13:20 +0300 Subject: [PATCH 012/125] add styles --- src/components/Input/Input.module.css | 7 +++++++ src/components/Input/Input.modules.css | 3 --- src/components/Screen/Screen.module.css | 10 +++++++++- src/components/Wrapper/Wrapper.module.css | 3 ++- 4 files changed, 18 insertions(+), 5 deletions(-) create mode 100644 src/components/Input/Input.module.css delete mode 100644 src/components/Input/Input.modules.css diff --git a/src/components/Input/Input.module.css b/src/components/Input/Input.module.css new file mode 100644 index 0000000..8b9a418 --- /dev/null +++ b/src/components/Input/Input.module.css @@ -0,0 +1,7 @@ +.Input { + display: block; + margin: 0.2rem 0 0.2rem auto; + font-size: calc(var(--font-size) * 2); + font-weight: 700; + color: var(--color-text-primary); +} diff --git a/src/components/Input/Input.modules.css b/src/components/Input/Input.modules.css deleted file mode 100644 index 715124d..0000000 --- a/src/components/Input/Input.modules.css +++ /dev/null @@ -1,3 +0,0 @@ -.Input { - /* */ -} diff --git a/src/components/Screen/Screen.module.css b/src/components/Screen/Screen.module.css index bfa82b5..123d3cc 100644 --- a/src/components/Screen/Screen.module.css +++ b/src/components/Screen/Screen.module.css @@ -1,3 +1,11 @@ .Screen { - /* */ + display: flex; + flex-direction: column; + width: 100%; + padding: 1rem; +} + +.Topper { + display: flex; + justify-content: flex-start; } diff --git a/src/components/Wrapper/Wrapper.module.css b/src/components/Wrapper/Wrapper.module.css index 99fd244..3a74b29 100644 --- a/src/components/Wrapper/Wrapper.module.css +++ b/src/components/Wrapper/Wrapper.module.css @@ -1,8 +1,9 @@ .Wrapper { display: flex; + flex-direction: column; align-items: center; width: 350px; - height: 370px; + /* height: 370px; */ padding: 0 4px 4px 4px; background: var(--color-input); border: 1px solid var(--color-border); From a01c36251aab2bb6d18ffc144a229f179677427c Mon Sep 17 00:00:00 2001 From: Aycan Ogut Date: Mon, 3 Jan 2022 22:13:28 +0300 Subject: [PATCH 013/125] add screen --- src/components/Wrapper/index.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/Wrapper/index.tsx b/src/components/Wrapper/index.tsx index 5c5d8fa..ad9ec15 100644 --- a/src/components/Wrapper/index.tsx +++ b/src/components/Wrapper/index.tsx @@ -1,10 +1,12 @@ import React from 'react'; import styles from './Wrapper.module.css'; +import Screen from '../Screen'; import Buttons from '../Buttons'; const Wrapper = () => { return (
+
); From c3c60724ab36dc49ed3862a921c25df6445ca9df Mon Sep 17 00:00:00 2001 From: Aycan Ogut Date: Mon, 3 Jan 2022 22:13:39 +0300 Subject: [PATCH 014/125] add imports and elements --- src/components/Screen/index.tsx | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/src/components/Screen/index.tsx b/src/components/Screen/index.tsx index efeca77..fe4c9a9 100644 --- a/src/components/Screen/index.tsx +++ b/src/components/Screen/index.tsx @@ -1,8 +1,18 @@ import React from 'react'; -import styles from './Wrapper.module.css'; +import styles from './Screen.module.css'; +import data from '../../data.json'; +import Input from '../Input'; +import Icon from '../Icon'; const Screen = () => { - return
21
; + return ( +
+
+ +
+ {21} +
+ ); }; export default Screen; From f5fc5cf1e3ca9dc87f532082f4dcca687e16d416 Mon Sep 17 00:00:00 2001 From: Aycan Ogut Date: Mon, 3 Jan 2022 22:13:46 +0300 Subject: [PATCH 015/125] update children --- src/components/Input/Input.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Input/Input.stories.tsx b/src/components/Input/Input.stories.tsx index bf683d8..3d861b7 100644 --- a/src/components/Input/Input.stories.tsx +++ b/src/components/Input/Input.stories.tsx @@ -7,4 +7,4 @@ export default { component: Input }; -export const InputStory = () => 21; +export const InputStory = () => {21}; From 83a91dbb4ada9e7e1d8480560da65000959bd065 Mon Sep 17 00:00:00 2001 From: Aycan Ogut Date: Mon, 3 Jan 2022 22:14:05 +0300 Subject: [PATCH 016/125] update type and children --- src/components/Input/index.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/components/Input/index.tsx b/src/components/Input/index.tsx index 6071a8c..acc926c 100644 --- a/src/components/Input/index.tsx +++ b/src/components/Input/index.tsx @@ -1,13 +1,14 @@ import React from 'react'; -import styles from './Wrapper.module.css'; +import styles from './Input.module.css'; // types export interface Props extends React.HTMLAttributes { - children: string; + children: number; } const Input = ({ children }: Props) => { - return
{children}
; + const [inputValue, setInputValue] = React.useState(21); + return
{inputValue}
; }; export default Input; From 399e4c8d75143c97aa3f68e847d45629fe6a5729 Mon Sep 17 00:00:00 2001 From: Aycan Ogut Date: Mon, 3 Jan 2022 22:16:22 +0300 Subject: [PATCH 017/125] update spacing --- src/components/Screen/Screen.module.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Screen/Screen.module.css b/src/components/Screen/Screen.module.css index 123d3cc..53ca3b4 100644 --- a/src/components/Screen/Screen.module.css +++ b/src/components/Screen/Screen.module.css @@ -2,7 +2,7 @@ display: flex; flex-direction: column; width: 100%; - padding: 1rem; + padding: 0.8rem; } .Topper { From 432fc29e754787818e9b9719e878ef64b79f449d Mon Sep 17 00:00:00 2001 From: Aycan Ogut Date: Mon, 3 Jan 2022 23:00:36 +0300 Subject: [PATCH 018/125] add icon --- public/assets/icons/garbage.svg | 1 + 1 file changed, 1 insertion(+) create mode 100644 public/assets/icons/garbage.svg diff --git a/public/assets/icons/garbage.svg b/public/assets/icons/garbage.svg new file mode 100644 index 0000000..50ea44e --- /dev/null +++ b/public/assets/icons/garbage.svg @@ -0,0 +1 @@ + From 4597e26bc97127cac132da28fcd1b057e8a9148e Mon Sep 17 00:00:00 2001 From: Aycan Ogut Date: Mon, 3 Jan 2022 23:00:43 +0300 Subject: [PATCH 019/125] add garbage icon data --- src/data.json | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/data.json b/src/data.json index fa929b7..7b6ceb7 100644 --- a/src/data.json +++ b/src/data.json @@ -7,6 +7,10 @@ "history": { "src": "/assets/icons/history.svg", "alt": "history icon" + }, + "garbage": { + "src": "/assets/icons/garbage.svg", + "alt": "garbage icon" } } } From eceb02292895c11a6c1f27f3bf36ecc884912d5d Mon Sep 17 00:00:00 2001 From: Aycan Ogut Date: Mon, 3 Jan 2022 23:01:24 +0300 Subject: [PATCH 020/125] create component --- src/components/Footer/Footer.module.css | 3 +++ src/components/Footer/Footer.stories.tsx | 0 src/components/Footer/index.tsx | 14 ++++++++++++++ src/components/History/History.module.css | 4 ++++ src/components/History/History.stories.tsx | 0 src/components/History/index.tsx | 14 ++++++++++++++ src/components/HistoryItem/HistoryItem.module.css | 3 +++ src/components/HistoryItem/HistoryItem.stories.tsx | 0 src/components/HistoryItem/index.tsx | 14 ++++++++++++++ 9 files changed, 52 insertions(+) create mode 100644 src/components/Footer/Footer.module.css create mode 100644 src/components/Footer/Footer.stories.tsx create mode 100644 src/components/Footer/index.tsx create mode 100644 src/components/History/History.module.css create mode 100644 src/components/History/History.stories.tsx create mode 100644 src/components/History/index.tsx create mode 100644 src/components/HistoryItem/HistoryItem.module.css create mode 100644 src/components/HistoryItem/HistoryItem.stories.tsx create mode 100644 src/components/HistoryItem/index.tsx diff --git a/src/components/Footer/Footer.module.css b/src/components/Footer/Footer.module.css new file mode 100644 index 0000000..c644d3e --- /dev/null +++ b/src/components/Footer/Footer.module.css @@ -0,0 +1,3 @@ +.Footer { + margin: 0 0 0 auto; +} diff --git a/src/components/Footer/Footer.stories.tsx b/src/components/Footer/Footer.stories.tsx new file mode 100644 index 0000000..e69de29 diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx new file mode 100644 index 0000000..1f3b278 --- /dev/null +++ b/src/components/Footer/index.tsx @@ -0,0 +1,14 @@ +import React from 'react'; +import styles from './Footer.module.css'; +import data from '../../data.json'; +import Icon from '../Icon'; + +const Footer = () => { + return ( +
+ +
+ ); +}; + +export default Footer; diff --git a/src/components/History/History.module.css b/src/components/History/History.module.css new file mode 100644 index 0000000..b098c4f --- /dev/null +++ b/src/components/History/History.module.css @@ -0,0 +1,4 @@ +.History { + display: flex; + width: 100%; +} diff --git a/src/components/History/History.stories.tsx b/src/components/History/History.stories.tsx new file mode 100644 index 0000000..e69de29 diff --git a/src/components/History/index.tsx b/src/components/History/index.tsx new file mode 100644 index 0000000..204812e --- /dev/null +++ b/src/components/History/index.tsx @@ -0,0 +1,14 @@ +import React from 'react'; +import styles from './History.module.css'; + +import Footer from '../Footer'; + +const History = () => { + return ( +
+
+
+ ); +}; + +export default History; diff --git a/src/components/HistoryItem/HistoryItem.module.css b/src/components/HistoryItem/HistoryItem.module.css new file mode 100644 index 0000000..c2f7e27 --- /dev/null +++ b/src/components/HistoryItem/HistoryItem.module.css @@ -0,0 +1,3 @@ +.HistoryItem { + /* */ +} diff --git a/src/components/HistoryItem/HistoryItem.stories.tsx b/src/components/HistoryItem/HistoryItem.stories.tsx new file mode 100644 index 0000000..e69de29 diff --git a/src/components/HistoryItem/index.tsx b/src/components/HistoryItem/index.tsx new file mode 100644 index 0000000..223a1d6 --- /dev/null +++ b/src/components/HistoryItem/index.tsx @@ -0,0 +1,14 @@ +import React from 'react'; +import styles from './HistoryItem.module.css'; + +const HistoryItem = () => { + return ( +
+
1
+
+
+
2
+
+ ); +}; + +export default HistoryItem; From 127a1fc4d2f90f842d02ab9dcaf48925405af2c5 Mon Sep 17 00:00:00 2001 From: Aycan Ogut Date: Mon, 3 Jan 2022 23:01:37 +0300 Subject: [PATCH 021/125] update classname --- src/components/Screen/Screen.module.css | 3 +-- src/components/Screen/index.tsx | 2 +- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/src/components/Screen/Screen.module.css b/src/components/Screen/Screen.module.css index 53ca3b4..1065d06 100644 --- a/src/components/Screen/Screen.module.css +++ b/src/components/Screen/Screen.module.css @@ -2,10 +2,9 @@ display: flex; flex-direction: column; width: 100%; - padding: 0.8rem; } -.Topper { +.Header { display: flex; justify-content: flex-start; } diff --git a/src/components/Screen/index.tsx b/src/components/Screen/index.tsx index fe4c9a9..f2b8084 100644 --- a/src/components/Screen/index.tsx +++ b/src/components/Screen/index.tsx @@ -7,7 +7,7 @@ import Icon from '../Icon'; const Screen = () => { return (
-
+
{21} From d0a7c2e3b223c1c5618034cbfe8e69a44681a074 Mon Sep 17 00:00:00 2001 From: Aycan Ogut Date: Mon, 3 Jan 2022 23:01:46 +0300 Subject: [PATCH 022/125] add history component --- src/components/Wrapper/index.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/Wrapper/index.tsx b/src/components/Wrapper/index.tsx index ad9ec15..d949805 100644 --- a/src/components/Wrapper/index.tsx +++ b/src/components/Wrapper/index.tsx @@ -2,12 +2,14 @@ import React from 'react'; import styles from './Wrapper.module.css'; import Screen from '../Screen'; import Buttons from '../Buttons'; +import History from '../History'; const Wrapper = () => { return (
- + {/* */} +
); }; From 5e3b9fe5b9ed4a8f5ef4dec0ce013fbd8b03bedc Mon Sep 17 00:00:00 2001 From: Aycan Ogut Date: Mon, 3 Jan 2022 23:01:51 +0300 Subject: [PATCH 023/125] update spacing --- src/components/Wrapper/Wrapper.module.css | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/Wrapper/Wrapper.module.css b/src/components/Wrapper/Wrapper.module.css index 3a74b29..fa23a3b 100644 --- a/src/components/Wrapper/Wrapper.module.css +++ b/src/components/Wrapper/Wrapper.module.css @@ -3,8 +3,7 @@ flex-direction: column; align-items: center; width: 350px; - /* height: 370px; */ - padding: 0 4px 4px 4px; + padding: 0.6rem; background: var(--color-input); border: 1px solid var(--color-border); border: 14px solid var(--color-outer-border); From 4b119fd67a69fcc2c2e980989dea124c671ff89b Mon Sep 17 00:00:00 2001 From: Aycan Ogut Date: Tue, 4 Jan 2022 18:04:27 +0300 Subject: [PATCH 024/125] update alingment and spacing --- src/components/History/History.module.css | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/components/History/History.module.css b/src/components/History/History.module.css index b098c4f..e037329 100644 --- a/src/components/History/History.module.css +++ b/src/components/History/History.module.css @@ -1,4 +1,7 @@ .History { display: flex; + flex-direction: column; width: 100%; + height: 100%; + padding: 0.2rem 0; } From cc7a11babd3623389a3548dc1caa4fc95ad98951 Mon Sep 17 00:00:00 2001 From: Aycan Ogut Date: Tue, 4 Jan 2022 18:04:50 +0300 Subject: [PATCH 025/125] add styles --- .../HistoryItem/HistoryItem.module.css | 20 ++++++++++++++++++- 1 file changed, 19 insertions(+), 1 deletion(-) diff --git a/src/components/HistoryItem/HistoryItem.module.css b/src/components/HistoryItem/HistoryItem.module.css index c2f7e27..cec03cf 100644 --- a/src/components/HistoryItem/HistoryItem.module.css +++ b/src/components/HistoryItem/HistoryItem.module.css @@ -1,3 +1,21 @@ .HistoryItem { - /* */ + display: flex; + flex-direction: column; + margin: 0 0 0 auto; + padding: 0.78rem 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; } From 0570eabc44cd57c7529c85909b5ef80de99b9af1 Mon Sep 17 00:00:00 2001 From: Aycan Ogut Date: Tue, 4 Jan 2022 18:05:07 +0300 Subject: [PATCH 026/125] update spacing --- src/components/Input/Input.module.css | 2 +- src/components/Wrapper/Wrapper.module.css | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Input/Input.module.css b/src/components/Input/Input.module.css index 8b9a418..5b2bde2 100644 --- a/src/components/Input/Input.module.css +++ b/src/components/Input/Input.module.css @@ -1,6 +1,6 @@ .Input { display: block; - margin: 0.2rem 0 0.2rem auto; + margin: 1rem 0 1rem auto; font-size: calc(var(--font-size) * 2); font-weight: 700; color: var(--color-text-primary); diff --git a/src/components/Wrapper/Wrapper.module.css b/src/components/Wrapper/Wrapper.module.css index fa23a3b..8555a0f 100644 --- a/src/components/Wrapper/Wrapper.module.css +++ b/src/components/Wrapper/Wrapper.module.css @@ -3,7 +3,7 @@ flex-direction: column; align-items: center; width: 350px; - padding: 0.6rem; + padding: 0.8rem 0.6rem 0.2rem 0.6rem; background: var(--color-input); border: 1px solid var(--color-border); border: 14px solid var(--color-outer-border); From d99564b0d3c04562f64d853a2dbefd97573e1bef Mon Sep 17 00:00:00 2001 From: Aycan Ogut Date: Tue, 4 Jan 2022 18:05:18 +0300 Subject: [PATCH 027/125] add dummy nodes --- src/components/History/index.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/components/History/index.tsx b/src/components/History/index.tsx index 204812e..91f9f07 100644 --- a/src/components/History/index.tsx +++ b/src/components/History/index.tsx @@ -1,11 +1,16 @@ import React from 'react'; import styles from './History.module.css'; +import HistoryItem from '../HistoryItem'; import Footer from '../Footer'; const History = () => { return (
+ + + +
); From bb94ba08acea19499062d4ad08c364545fb92fb0 Mon Sep 17 00:00:00 2001 From: Aycan Ogut Date: Tue, 4 Jan 2022 18:05:34 +0300 Subject: [PATCH 028/125] add types and dom nodes --- src/components/HistoryItem/index.tsx | 19 +++++++++++++++---- 1 file changed, 15 insertions(+), 4 deletions(-) diff --git a/src/components/HistoryItem/index.tsx b/src/components/HistoryItem/index.tsx index 223a1d6..909920a 100644 --- a/src/components/HistoryItem/index.tsx +++ b/src/components/HistoryItem/index.tsx @@ -1,12 +1,23 @@ import React from 'react'; import styles from './HistoryItem.module.css'; -const HistoryItem = () => { +export interface Props { + firstArgument: number; + operator: string; + secondArgument: number; + result: number; +} + +const HistoryItem = ({ firstArgument, operator, secondArgument, result }: Props) => { return (
-
1
-
+
-
2
+
+ {firstArgument} + {operator} + {secondArgument} + = +
+
{result}
); }; From 31b762ae818d189b97006b265340d43d2fef5fa1 Mon Sep 17 00:00:00 2001 From: Aycan Ogut Date: Tue, 4 Jan 2022 21:36:32 +0300 Subject: [PATCH 029/125] update spacing --- src/components/Input/Input.module.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Input/Input.module.css b/src/components/Input/Input.module.css index 5b2bde2..3dbb61d 100644 --- a/src/components/Input/Input.module.css +++ b/src/components/Input/Input.module.css @@ -1,6 +1,6 @@ .Input { display: block; - margin: 1rem 0 1rem auto; + margin: 0.95rem 0 0.95rem auto; font-size: calc(var(--font-size) * 2); font-weight: 700; color: var(--color-text-primary); From 7ee5f8cc3ac30b96fd7ba471d44967ee50bc0f07 Mon Sep 17 00:00:00 2001 From: Aycan Ogut Date: Tue, 4 Jan 2022 21:37:14 +0300 Subject: [PATCH 030/125] create component --- src/components/Calculator/Calculator.module.css | 0 src/components/Calculator/Calculator.stories.tsx | 0 src/components/Calculator/index.tsx | 15 +++++++++++++++ 3 files changed, 15 insertions(+) create mode 100644 src/components/Calculator/Calculator.module.css create mode 100644 src/components/Calculator/Calculator.stories.tsx create mode 100644 src/components/Calculator/index.tsx diff --git a/src/components/Calculator/Calculator.module.css b/src/components/Calculator/Calculator.module.css new file mode 100644 index 0000000..e69de29 diff --git a/src/components/Calculator/Calculator.stories.tsx b/src/components/Calculator/Calculator.stories.tsx new file mode 100644 index 0000000..e69de29 diff --git a/src/components/Calculator/index.tsx b/src/components/Calculator/index.tsx new file mode 100644 index 0000000..522c7bf --- /dev/null +++ b/src/components/Calculator/index.tsx @@ -0,0 +1,15 @@ +import React from 'react'; +import styles from './Calculator.module.css'; +import Screen from '../Screen'; +import Buttons from '../Buttons'; + +const Calculator = () => { + return ( + <> + + + + ); +}; + +export default Calculator; From dfaebced2c39cbba2528c169f29e7ecd85add088 Mon Sep 17 00:00:00 2001 From: Aycan Ogut Date: Tue, 4 Jan 2022 21:37:27 +0300 Subject: [PATCH 031/125] add calculator --- src/components/Wrapper/index.tsx | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/src/components/Wrapper/index.tsx b/src/components/Wrapper/index.tsx index d949805..bb9b4c4 100644 --- a/src/components/Wrapper/index.tsx +++ b/src/components/Wrapper/index.tsx @@ -1,15 +1,14 @@ import React from 'react'; import styles from './Wrapper.module.css'; -import Screen from '../Screen'; -import Buttons from '../Buttons'; + +import Calculator from '../Calculator'; import History from '../History'; const Wrapper = () => { return (
- - {/* */} - + + {/* */}
); }; From 443207d3cf142309a78d1e784205262966a4837b Mon Sep 17 00:00:00 2001 From: Aycan Ogut Date: Tue, 4 Jan 2022 21:57:23 +0300 Subject: [PATCH 032/125] add header layout styling --- src/components/History/History.module.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/components/History/History.module.css b/src/components/History/History.module.css index e037329..96fb370 100644 --- a/src/components/History/History.module.css +++ b/src/components/History/History.module.css @@ -5,3 +5,8 @@ height: 100%; padding: 0.2rem 0; } + +.Header { + display: flex; + flex-direction: column; +} From 107db5cf97df31a86b8828514887cca030e8065f Mon Sep 17 00:00:00 2001 From: Aycan Ogut Date: Tue, 4 Jan 2022 21:57:33 +0300 Subject: [PATCH 033/125] add back icon --- src/components/History/index.tsx | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/src/components/History/index.tsx b/src/components/History/index.tsx index 91f9f07..ece9c3a 100644 --- a/src/components/History/index.tsx +++ b/src/components/History/index.tsx @@ -1,16 +1,22 @@ import React from 'react'; + +import data from '../../data.json'; + import styles from './History.module.css'; +import Icon from '../Icon'; import HistoryItem from '../HistoryItem'; import Footer from '../Footer'; const History = () => { return (
- - - - + +
+ + + +
); From a4e801541fbfcaaa037a415f16f17942b941f016 Mon Sep 17 00:00:00 2001 From: Aycan Ogut Date: Tue, 4 Jan 2022 21:57:43 +0300 Subject: [PATCH 034/125] update children --- src/components/Icon/Icon.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Icon/Icon.stories.tsx b/src/components/Icon/Icon.stories.tsx index 81c7c4f..53a8970 100644 --- a/src/components/Icon/Icon.stories.tsx +++ b/src/components/Icon/Icon.stories.tsx @@ -7,4 +7,4 @@ export default { component: Input }; -export const InputStory = () => ; +export const InputStory = () => {0}; From 8a2b911cd482d88525ee9b6e99d264df3e55fe53 Mon Sep 17 00:00:00 2001 From: Aycan Ogut Date: Tue, 4 Jan 2022 21:58:14 +0300 Subject: [PATCH 035/125] add wrapper for story --- src/components/Screen/Screen.module.css | 6 ++++++ src/components/Screen/Screen.stories.tsx | 7 ++++++- 2 files changed, 12 insertions(+), 1 deletion(-) diff --git a/src/components/Screen/Screen.module.css b/src/components/Screen/Screen.module.css index 1065d06..6bcade8 100644 --- a/src/components/Screen/Screen.module.css +++ b/src/components/Screen/Screen.module.css @@ -8,3 +8,9 @@ display: flex; justify-content: flex-start; } + +.StoryWrapper { + max-width: 350px; + border: 1px solid white; + padding: 0.6rem; +} diff --git a/src/components/Screen/Screen.stories.tsx b/src/components/Screen/Screen.stories.tsx index 9a283b3..c8b6827 100644 --- a/src/components/Screen/Screen.stories.tsx +++ b/src/components/Screen/Screen.stories.tsx @@ -1,10 +1,15 @@ import React from 'react'; import Screen from '../Screen'; import '../../styles/global.css'; +import styles from './Screen.module.css'; export default { title: 'Screen', component: Screen }; -export const ScreenStory = () => ; +export const ScreenStory = () => ( +
+ +
+); From 5d9e2da7a86836cedd1c59adbadab318431c2f19 Mon Sep 17 00:00:00 2001 From: Aycan Ogut Date: Tue, 4 Jan 2022 22:14:22 +0300 Subject: [PATCH 036/125] add spacing and alignment --- src/components/Footer/Footer.module.css | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/components/Footer/Footer.module.css b/src/components/Footer/Footer.module.css index c644d3e..3ae5a9d 100644 --- a/src/components/Footer/Footer.module.css +++ b/src/components/Footer/Footer.module.css @@ -1,3 +1,6 @@ .Footer { - margin: 0 0 0 auto; + display: flex; + align-items: flex-end; + height: 100%; + margin: 0 0 0.2rem auto; } From 699e02437355a176865fb2e6b31605179ea97388 Mon Sep 17 00:00:00 2001 From: Aycan Ogut Date: Tue, 4 Jan 2022 22:15:04 +0300 Subject: [PATCH 037/125] add alignment, remoe spacing --- src/components/History/History.module.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/History/History.module.css b/src/components/History/History.module.css index 96fb370..56814f1 100644 --- a/src/components/History/History.module.css +++ b/src/components/History/History.module.css @@ -1,12 +1,12 @@ .History { display: flex; flex-direction: column; + justify-content: space-around; width: 100%; height: 100%; - padding: 0.2rem 0; } -.Header { +.Histories { display: flex; flex-direction: column; } From 71f34ab3115ff45ede4dbc0d5e4970f47e00f5b9 Mon Sep 17 00:00:00 2001 From: Aycan Ogut Date: Tue, 4 Jan 2022 22:15:13 +0300 Subject: [PATCH 038/125] update classname --- src/components/History/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/History/index.tsx b/src/components/History/index.tsx index ece9c3a..403dcad 100644 --- a/src/components/History/index.tsx +++ b/src/components/History/index.tsx @@ -12,7 +12,7 @@ const History = () => { return (
-
+
From 1159e4a1c53eb35da16edfbbc3733919949e5ea1 Mon Sep 17 00:00:00 2001 From: Aycan Ogut Date: Tue, 4 Jan 2022 22:15:23 +0300 Subject: [PATCH 039/125] update spacing --- src/components/HistoryItem/HistoryItem.module.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/HistoryItem/HistoryItem.module.css b/src/components/HistoryItem/HistoryItem.module.css index cec03cf..f4e652a 100644 --- a/src/components/HistoryItem/HistoryItem.module.css +++ b/src/components/HistoryItem/HistoryItem.module.css @@ -2,7 +2,7 @@ display: flex; flex-direction: column; margin: 0 0 0 auto; - padding: 0.78rem 0.4rem; + padding: 0.4rem; } .Operation { From ea5a888cd5e7b9faf702e4ccecef82d601a05eb7 Mon Sep 17 00:00:00 2001 From: Aycan Ogut Date: Tue, 4 Jan 2022 22:15:34 +0300 Subject: [PATCH 040/125] add fixed height --- src/components/Wrapper/Wrapper.module.css | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/Wrapper/Wrapper.module.css b/src/components/Wrapper/Wrapper.module.css index 8555a0f..817f4bd 100644 --- a/src/components/Wrapper/Wrapper.module.css +++ b/src/components/Wrapper/Wrapper.module.css @@ -3,6 +3,7 @@ flex-direction: column; align-items: center; width: 350px; + height: 370px; padding: 0.8rem 0.6rem 0.2rem 0.6rem; background: var(--color-input); border: 1px solid var(--color-border); From 04e6eae8f81019f3f6d7f8d2afe6ea6f84f8a609 Mon Sep 17 00:00:00 2001 From: Aycan Ogut Date: Tue, 4 Jan 2022 22:54:47 +0300 Subject: [PATCH 041/125] create stories --- .../Calculator/Calculator.stories.tsx | 16 ++++++++++++++++ src/components/Footer/Footer.stories.tsx | 12 ++++++++++++ src/components/History/History.stories.tsx | 16 ++++++++++++++++ .../HistoryItem/HistoryItem.stories.tsx | 16 ++++++++++++++++ src/components/Icon/Icon.stories.tsx | 17 +++++++++++++---- 5 files changed, 73 insertions(+), 4 deletions(-) diff --git a/src/components/Calculator/Calculator.stories.tsx b/src/components/Calculator/Calculator.stories.tsx index e69de29..eee4ca6 100644 --- a/src/components/Calculator/Calculator.stories.tsx +++ b/src/components/Calculator/Calculator.stories.tsx @@ -0,0 +1,16 @@ +import React from 'react'; + +import Calculator from '../Calculator'; +import '../../styles/global.css'; +import styles from './Calculator.module.css'; + +export default { + title: 'Calculator', + component: Calculator +}; + +export const CalculatorStory = () => ( +
+ +
+); diff --git a/src/components/Footer/Footer.stories.tsx b/src/components/Footer/Footer.stories.tsx index e69de29..d2b753e 100644 --- a/src/components/Footer/Footer.stories.tsx +++ b/src/components/Footer/Footer.stories.tsx @@ -0,0 +1,12 @@ +import React from 'react'; + +import Footer from '../Footer'; +import '../../styles/global.css'; +import styles from './Footer.module.css'; + +export default { + title: 'Footer', + component: Footer +}; + +export const FooterStory = () =>