From dbfeb20ed2da2f0b05ceea221e4785dd95ea8633 Mon Sep 17 00:00:00 2001 From: Sergiy Date: Mon, 19 Aug 2024 11:24:38 +0300 Subject: [PATCH 01/18] OV-6: + colors for loader --- frontend/src/framework/theme/styles/colors.styles.ts | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/frontend/src/framework/theme/styles/colors.styles.ts b/frontend/src/framework/theme/styles/colors.styles.ts index 75c91a9c5..0429cb141 100644 --- a/frontend/src/framework/theme/styles/colors.styles.ts +++ b/frontend/src/framework/theme/styles/colors.styles.ts @@ -1,7 +1,15 @@ const colors = { + white: '#ffffff', brand: { 900: '#1a365d', 200: '#b3e0ff', + secondary: { + 300: '#ff6e1c', + }, + }, + shadow: { + 200: 'rgba(0, 0, 0, 0.2)', + 700: 'rgba(0, 0, 0, 0.7)', }, text: { default: '#36454f', From 6f85559618ca6b315a56bc83c205c4bb51744552 Mon Sep 17 00:00:00 2001 From: Sergiy Date: Mon, 19 Aug 2024 11:33:29 +0300 Subject: [PATCH 02/18] OV-6: + loader component --- .../common/components/loader/loader.tsx | 17 +++++++ .../components/loader/styles.module.css | 47 +++++++++++++++++++ 2 files changed, 64 insertions(+) create mode 100644 frontend/src/bundles/common/components/loader/loader.tsx create mode 100644 frontend/src/bundles/common/components/loader/styles.module.css diff --git a/frontend/src/bundles/common/components/loader/loader.tsx b/frontend/src/bundles/common/components/loader/loader.tsx new file mode 100644 index 000000000..7a13c7ba5 --- /dev/null +++ b/frontend/src/bundles/common/components/loader/loader.tsx @@ -0,0 +1,17 @@ +import styles from './styles.module.css'; + +const Loader = (): JSX.Element => { + return ( +
+
+
+
LOGO
+
+
+
+

Loading...

+
+ ); +}; + +export { Loader }; diff --git a/frontend/src/bundles/common/components/loader/styles.module.css b/frontend/src/bundles/common/components/loader/styles.module.css new file mode 100644 index 000000000..151587b98 --- /dev/null +++ b/frontend/src/bundles/common/components/loader/styles.module.css @@ -0,0 +1,47 @@ +.loader-container { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.loader { + position: relative; + width: 100px; + height: 100px; +} + +.logo-wrapper { + display: flex; + justify-content: center; + align-items: center; + width: 100px; + height: 100px; + color: var(--chakra-colors-text-default); + background-color: var(--chakra-colors-white); + border-radius: 50%; +} + +.spinner-overlay { + position: absolute; + inset: 0; + border: 5px solid var(--chakra-colors-shadow-200); + border-top: 5px solid var(--chakra-colors-brand-secondary-300); + border-radius: 50%; + animation: spin 1s linear infinite; +} + +.loader-text { + padding-top: 20px; + font-size: 18px; +} + +@keyframes spin { + 0% { + transform: rotate(0deg); + } + + 100% { + transform: rotate(360deg); + } +} From 0d9234a14eee77fd2de94ef7a78056e94c98c13d Mon Sep 17 00:00:00 2001 From: Sergiy Date: Mon, 19 Aug 2024 11:34:31 +0300 Subject: [PATCH 03/18] OV-6: + loaderOverlay component --- .../components/loader-overlay/loader-overlay.tsx | 12 ++++++++++++ .../components/loader-overlay/styles.module.css | 11 +++++++++++ 2 files changed, 23 insertions(+) create mode 100644 frontend/src/bundles/common/components/loader-overlay/loader-overlay.tsx create mode 100644 frontend/src/bundles/common/components/loader-overlay/styles.module.css diff --git a/frontend/src/bundles/common/components/loader-overlay/loader-overlay.tsx b/frontend/src/bundles/common/components/loader-overlay/loader-overlay.tsx new file mode 100644 index 000000000..e292d0afc --- /dev/null +++ b/frontend/src/bundles/common/components/loader-overlay/loader-overlay.tsx @@ -0,0 +1,12 @@ +import { Loader } from '../components.js'; +import styles from './styles.module.css'; + +const LoaderOverlay = (): JSX.Element => { + return ( +
+ +
+ ); +}; + +export { LoaderOverlay }; diff --git a/frontend/src/bundles/common/components/loader-overlay/styles.module.css b/frontend/src/bundles/common/components/loader-overlay/styles.module.css new file mode 100644 index 000000000..4fa539d9d --- /dev/null +++ b/frontend/src/bundles/common/components/loader-overlay/styles.module.css @@ -0,0 +1,11 @@ +.container { + position: absolute; + display: flex; + justify-content: center; + align-items: center; + width: 100%; + height: 100%; + color: var(--chakra-colors-white); + text-align: center; + background: var(--chakra-colors-shadow-700); +} From 9c55dfd6730d8c8bffda52e4db672575d9343192 Mon Sep 17 00:00:00 2001 From: Sergiy Date: Mon, 19 Aug 2024 11:42:12 +0300 Subject: [PATCH 04/18] OV-6: + component exports --- frontend/src/bundles/common/components/components.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/frontend/src/bundles/common/components/components.ts b/frontend/src/bundles/common/components/components.ts index ce95bfe64..6bf7bee06 100644 --- a/frontend/src/bundles/common/components/components.ts +++ b/frontend/src/bundles/common/components/components.ts @@ -1,6 +1,8 @@ export { Button } from './button/button.js'; export { Input } from './input/input.js'; export { Link } from './link/link.js'; +export { Loader } from './loader/loader.js'; +export { LoaderOverlay } from './loader-overlay/loader-overlay.js'; export { RouterProvider } from './router-provider/router-provider.js'; export { Box, From 763efd63572b03987fce0e77a78dd18fc896807b Mon Sep 17 00:00:00 2001 From: nikita-remeslov Date: Mon, 19 Aug 2024 11:05:04 +0200 Subject: [PATCH 05/18] production: * codestyle --- .github/ISSUE_TEMPLATE/bug-report.yml | 2 +- .github/ISSUE_TEMPLATE/feature.yml | 38 +++++++++---------- .ls-lint.yml | 2 +- .../framework/config/base-config.package.ts | 4 +- .../config/types/environment-schema.type.ts | 2 +- .../http-api/types/http-api-options.type.ts | 2 +- 6 files changed, 24 insertions(+), 26 deletions(-) diff --git a/.github/ISSUE_TEMPLATE/bug-report.yml b/.github/ISSUE_TEMPLATE/bug-report.yml index c4efbf503..d14de0c2e 100644 --- a/.github/ISSUE_TEMPLATE/bug-report.yml +++ b/.github/ISSUE_TEMPLATE/bug-report.yml @@ -2,7 +2,7 @@ name: Bug Report description: Report a bug title: 'BUG:' labels: ['BUG'] -projects: "BinaryStudioAcademy/30" +projects: 'BinaryStudioAcademy/30' body: - type: markdown attributes: diff --git a/.github/ISSUE_TEMPLATE/feature.yml b/.github/ISSUE_TEMPLATE/feature.yml index c793c4684..a628b3881 100644 --- a/.github/ISSUE_TEMPLATE/feature.yml +++ b/.github/ISSUE_TEMPLATE/feature.yml @@ -1,22 +1,22 @@ name: Feature description: Abstract feature description -title: "FEAT:" -projects: "BinaryStudioAcademy/30" +title: 'FEAT:' +projects: 'BinaryStudioAcademy/30' body: - - type: textarea - id: what-feature - attributes: - label: What feature? - placeholder: Add descriptions - validations: - required: true - - type: textarea - id: screenshots - attributes: - label: Add screenshots - placeholder: Add screenshots, mockups, etc. - - type: textarea - id: acceptance-criteria - attributes: - label: Acceptance criteria - placeholder: Add acceptance criteria. + - type: textarea + id: what-feature + attributes: + label: What feature? + placeholder: Add descriptions + validations: + required: true + - type: textarea + id: screenshots + attributes: + label: Add screenshots + placeholder: Add screenshots, mockups, etc. + - type: textarea + id: acceptance-criteria + attributes: + label: Acceptance criteria + placeholder: Add acceptance criteria. diff --git a/.ls-lint.yml b/.ls-lint.yml index 486067041..292cee3b8 100644 --- a/.ls-lint.yml +++ b/.ls-lint.yml @@ -16,7 +16,7 @@ ls: .ts: snake_case ignore: - - .git + - .github - node_modules - build - shared/build diff --git a/frontend/src/framework/config/base-config.package.ts b/frontend/src/framework/config/base-config.package.ts index 2b2a35e0e..1224b76c5 100644 --- a/frontend/src/framework/config/base-config.package.ts +++ b/frontend/src/framework/config/base-config.package.ts @@ -10,9 +10,7 @@ class BaseConfig implements Config { private get envSchema(): EnvironmentSchema { return { APP: { - ENVIRONMENT: import.meta.env[ - 'VITE_APP_NODE_ENV' - ], + ENVIRONMENT: import.meta.env['VITE_APP_NODE_ENV'], }, API: { ORIGIN_URL: import.meta.env[ diff --git a/frontend/src/framework/config/types/environment-schema.type.ts b/frontend/src/framework/config/types/environment-schema.type.ts index 47109076d..6f8f4df7c 100644 --- a/frontend/src/framework/config/types/environment-schema.type.ts +++ b/frontend/src/framework/config/types/environment-schema.type.ts @@ -1,5 +1,5 @@ import { type AppEnvironment } from '~/bundles/common/enums/enums.js'; -import { type ValueOf } from '~/bundles/common/types/types.js'; +import { type ValueOf } from '~/bundles/common/types/types.js'; type EnvironmentSchema = { APP: { diff --git a/frontend/src/framework/http-api/types/http-api-options.type.ts b/frontend/src/framework/http-api/types/http-api-options.type.ts index 88cda053c..ba7f07184 100644 --- a/frontend/src/framework/http-api/types/http-api-options.type.ts +++ b/frontend/src/framework/http-api/types/http-api-options.type.ts @@ -1,5 +1,5 @@ import { type ContentType } from '~/bundles/common/enums/enums.js'; -import { type ValueOf } from '~/bundles/common/types/types.js'; +import { type ValueOf } from '~/bundles/common/types/types.js'; import { type HttpOptions } from '~/framework/http/http.js'; type HttpApiOptions = Omit & { From d3ebf0b248215de77136b9ca3d1ae314aa21405a Mon Sep 17 00:00:00 2001 From: Sergiy Date: Mon, 19 Aug 2024 14:18:10 +0300 Subject: [PATCH 06/18] OV-6: * loader component --- .../common/components/loader/loader.tsx | 38 ++++++++++++++----- 1 file changed, 28 insertions(+), 10 deletions(-) diff --git a/frontend/src/bundles/common/components/loader/loader.tsx b/frontend/src/bundles/common/components/loader/loader.tsx index 7a13c7ba5..c5cf0c671 100644 --- a/frontend/src/bundles/common/components/loader/loader.tsx +++ b/frontend/src/bundles/common/components/loader/loader.tsx @@ -1,16 +1,34 @@ -import styles from './styles.module.css'; +import { Box, Circle, Flex, keyframes, Text } from '@chakra-ui/react'; + +const spin = keyframes` + 0% { transform: rotate(0deg);} + 100% { transform: rotate(360deg)} +`; const Loader = (): JSX.Element => { return ( -
-
-
-
LOGO
-
-
-
-

Loading...

-
+ + + + LOGO + + + + + Loading... + + ); }; From d506d2bde5d645039259fb7779e5d0829037aba1 Mon Sep 17 00:00:00 2001 From: Sergiy Date: Mon, 19 Aug 2024 14:18:59 +0300 Subject: [PATCH 07/18] OV-6: * loaderOverlay component --- .../components/loader-overlay/loader-overlay.tsx | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/frontend/src/bundles/common/components/loader-overlay/loader-overlay.tsx b/frontend/src/bundles/common/components/loader-overlay/loader-overlay.tsx index e292d0afc..1e2e0dbb2 100644 --- a/frontend/src/bundles/common/components/loader-overlay/loader-overlay.tsx +++ b/frontend/src/bundles/common/components/loader-overlay/loader-overlay.tsx @@ -1,11 +1,20 @@ +import { Flex } from '@chakra-ui/react'; + import { Loader } from '../components.js'; -import styles from './styles.module.css'; const LoaderOverlay = (): JSX.Element => { return ( -
+ -
+ ); }; From 4e60691d8e2e9d385550349ddeadd6454cc7a894 Mon Sep 17 00:00:00 2001 From: Sergiy Date: Mon, 19 Aug 2024 14:20:45 +0300 Subject: [PATCH 08/18] OV-6: - css files --- .../loader-overlay/styles.module.css | 11 ----- .../components/loader/styles.module.css | 47 ------------------- 2 files changed, 58 deletions(-) delete mode 100644 frontend/src/bundles/common/components/loader-overlay/styles.module.css delete mode 100644 frontend/src/bundles/common/components/loader/styles.module.css diff --git a/frontend/src/bundles/common/components/loader-overlay/styles.module.css b/frontend/src/bundles/common/components/loader-overlay/styles.module.css deleted file mode 100644 index 4fa539d9d..000000000 --- a/frontend/src/bundles/common/components/loader-overlay/styles.module.css +++ /dev/null @@ -1,11 +0,0 @@ -.container { - position: absolute; - display: flex; - justify-content: center; - align-items: center; - width: 100%; - height: 100%; - color: var(--chakra-colors-white); - text-align: center; - background: var(--chakra-colors-shadow-700); -} diff --git a/frontend/src/bundles/common/components/loader/styles.module.css b/frontend/src/bundles/common/components/loader/styles.module.css deleted file mode 100644 index 151587b98..000000000 --- a/frontend/src/bundles/common/components/loader/styles.module.css +++ /dev/null @@ -1,47 +0,0 @@ -.loader-container { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; -} - -.loader { - position: relative; - width: 100px; - height: 100px; -} - -.logo-wrapper { - display: flex; - justify-content: center; - align-items: center; - width: 100px; - height: 100px; - color: var(--chakra-colors-text-default); - background-color: var(--chakra-colors-white); - border-radius: 50%; -} - -.spinner-overlay { - position: absolute; - inset: 0; - border: 5px solid var(--chakra-colors-shadow-200); - border-top: 5px solid var(--chakra-colors-brand-secondary-300); - border-radius: 50%; - animation: spin 1s linear infinite; -} - -.loader-text { - padding-top: 20px; - font-size: 18px; -} - -@keyframes spin { - 0% { - transform: rotate(0deg); - } - - 100% { - transform: rotate(360deg); - } -} From c9b1687c185ffd580f98987867d57eb9e64a112b Mon Sep 17 00:00:00 2001 From: Sergiy Date: Mon, 19 Aug 2024 14:38:33 +0300 Subject: [PATCH 09/18] OV-6: + animation constant --- .../common/components/loader/libs/constants/constants.ts | 1 + .../loader/libs/constants/spin-animation.constant.ts | 8 ++++++++ 2 files changed, 9 insertions(+) create mode 100644 frontend/src/bundles/common/components/loader/libs/constants/constants.ts create mode 100644 frontend/src/bundles/common/components/loader/libs/constants/spin-animation.constant.ts diff --git a/frontend/src/bundles/common/components/loader/libs/constants/constants.ts b/frontend/src/bundles/common/components/loader/libs/constants/constants.ts new file mode 100644 index 000000000..e530775ac --- /dev/null +++ b/frontend/src/bundles/common/components/loader/libs/constants/constants.ts @@ -0,0 +1 @@ +export { spin } from './spin-animation.constant.js'; diff --git a/frontend/src/bundles/common/components/loader/libs/constants/spin-animation.constant.ts b/frontend/src/bundles/common/components/loader/libs/constants/spin-animation.constant.ts new file mode 100644 index 000000000..dd122fc85 --- /dev/null +++ b/frontend/src/bundles/common/components/loader/libs/constants/spin-animation.constant.ts @@ -0,0 +1,8 @@ +import { keyframes } from '@chakra-ui/react'; + +const spin = keyframes` + 0% { transform: rotate(0deg);} + 100% { transform: rotate(360deg)} +`; + +export { spin }; From 467f748fea897e13af37e5ec288bf01e6d1794c4 Mon Sep 17 00:00:00 2001 From: Sergiy Date: Mon, 19 Aug 2024 14:39:26 +0300 Subject: [PATCH 10/18] OV-6: * loader --- frontend/src/bundles/common/components/loader/loader.tsx | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/frontend/src/bundles/common/components/loader/loader.tsx b/frontend/src/bundles/common/components/loader/loader.tsx index c5cf0c671..2f2355e58 100644 --- a/frontend/src/bundles/common/components/loader/loader.tsx +++ b/frontend/src/bundles/common/components/loader/loader.tsx @@ -1,9 +1,6 @@ -import { Box, Circle, Flex, keyframes, Text } from '@chakra-ui/react'; +import { Box, Circle, Flex, Text } from '@chakra-ui/react'; -const spin = keyframes` - 0% { transform: rotate(0deg);} - 100% { transform: rotate(360deg)} -`; +import { spin } from './libs/constants/constants.js'; const Loader = (): JSX.Element => { return ( From 7f08fad1400d0a006cfc2e491359dede1da1fab8 Mon Sep 17 00:00:00 2001 From: Sergiy Date: Mon, 19 Aug 2024 16:02:11 +0300 Subject: [PATCH 11/18] OV-6: * exports --- frontend/src/bundles/common/components/components.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/frontend/src/bundles/common/components/components.ts b/frontend/src/bundles/common/components/components.ts index 6bf7bee06..d2d0d1986 100644 --- a/frontend/src/bundles/common/components/components.ts +++ b/frontend/src/bundles/common/components/components.ts @@ -1,7 +1,6 @@ export { Button } from './button/button.js'; export { Input } from './input/input.js'; export { Link } from './link/link.js'; -export { Loader } from './loader/loader.js'; export { LoaderOverlay } from './loader-overlay/loader-overlay.js'; export { RouterProvider } from './router-provider/router-provider.js'; export { From 46fc2999a04facccbe66acec9d6d2db91a2e93d4 Mon Sep 17 00:00:00 2001 From: Sergiy Date: Mon, 19 Aug 2024 16:03:43 +0300 Subject: [PATCH 12/18] OV-6: + add transition --- .../loader-overlay/loader-overlay.tsx | 28 ++++++++++--------- 1 file changed, 15 insertions(+), 13 deletions(-) diff --git a/frontend/src/bundles/common/components/loader-overlay/loader-overlay.tsx b/frontend/src/bundles/common/components/loader-overlay/loader-overlay.tsx index 1e2e0dbb2..c6a085991 100644 --- a/frontend/src/bundles/common/components/loader-overlay/loader-overlay.tsx +++ b/frontend/src/bundles/common/components/loader-overlay/loader-overlay.tsx @@ -1,20 +1,22 @@ -import { Flex } from '@chakra-ui/react'; +import { Fade, Flex } from '@chakra-ui/react'; -import { Loader } from '../components.js'; +import { Loader } from '../loader/loader.js'; const LoaderOverlay = (): JSX.Element => { return ( - - - + + + + + ); }; From f9cda0afbd908a46f8a3207fec48e526d6b44bbe Mon Sep 17 00:00:00 2001 From: Sergiy Date: Mon, 19 Aug 2024 16:54:07 +0300 Subject: [PATCH 13/18] OV-6: * constant name --- .../common/components/loader/libs/constants/constants.ts | 2 +- .../loader/libs/constants/spin-animation.constant.ts | 4 ++-- frontend/src/bundles/common/components/loader/loader.tsx | 4 ++-- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/frontend/src/bundles/common/components/loader/libs/constants/constants.ts b/frontend/src/bundles/common/components/loader/libs/constants/constants.ts index e530775ac..f02cfb0a2 100644 --- a/frontend/src/bundles/common/components/loader/libs/constants/constants.ts +++ b/frontend/src/bundles/common/components/loader/libs/constants/constants.ts @@ -1 +1 @@ -export { spin } from './spin-animation.constant.js'; +export { SPIN_ANIMATION } from './spin-animation.constant.js'; diff --git a/frontend/src/bundles/common/components/loader/libs/constants/spin-animation.constant.ts b/frontend/src/bundles/common/components/loader/libs/constants/spin-animation.constant.ts index dd122fc85..163609b40 100644 --- a/frontend/src/bundles/common/components/loader/libs/constants/spin-animation.constant.ts +++ b/frontend/src/bundles/common/components/loader/libs/constants/spin-animation.constant.ts @@ -1,8 +1,8 @@ import { keyframes } from '@chakra-ui/react'; -const spin = keyframes` +const SPIN_ANIMATION = keyframes` 0% { transform: rotate(0deg);} 100% { transform: rotate(360deg)} `; -export { spin }; +export { SPIN_ANIMATION }; diff --git a/frontend/src/bundles/common/components/loader/loader.tsx b/frontend/src/bundles/common/components/loader/loader.tsx index 2f2355e58..abc763d3d 100644 --- a/frontend/src/bundles/common/components/loader/loader.tsx +++ b/frontend/src/bundles/common/components/loader/loader.tsx @@ -1,6 +1,6 @@ import { Box, Circle, Flex, Text } from '@chakra-ui/react'; -import { spin } from './libs/constants/constants.js'; +import { SPIN_ANIMATION } from './libs/constants/constants.js'; const Loader = (): JSX.Element => { return ( @@ -19,7 +19,7 @@ const Loader = (): JSX.Element => { borderWidth="5px" borderColor="shadow.200" borderTopColor="brand.secondary.300" - animation={`${spin} 1s linear infinite`} + animation={`${SPIN_ANIMATION} 1s linear infinite`} > From 4e10c8222bc219fc0ed22c7790933ab9af5dd95c Mon Sep 17 00:00:00 2001 From: Sergiy Date: Mon, 19 Aug 2024 16:54:58 +0300 Subject: [PATCH 14/18] OV-6: * exports --- frontend/src/bundles/common/components/components.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/frontend/src/bundles/common/components/components.ts b/frontend/src/bundles/common/components/components.ts index d2d0d1986..6bf7bee06 100644 --- a/frontend/src/bundles/common/components/components.ts +++ b/frontend/src/bundles/common/components/components.ts @@ -1,6 +1,7 @@ export { Button } from './button/button.js'; export { Input } from './input/input.js'; export { Link } from './link/link.js'; +export { Loader } from './loader/loader.js'; export { LoaderOverlay } from './loader-overlay/loader-overlay.js'; export { RouterProvider } from './router-provider/router-provider.js'; export { From 580d235f7ed2f53e9041ce8bfdd0d8df065166ab Mon Sep 17 00:00:00 2001 From: Sergiy Date: Mon, 19 Aug 2024 16:55:56 +0300 Subject: [PATCH 15/18] OV-6: * loaderOverlay component --- .../common/components/loader-overlay/loader-overlay.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/frontend/src/bundles/common/components/loader-overlay/loader-overlay.tsx b/frontend/src/bundles/common/components/loader-overlay/loader-overlay.tsx index c6a085991..018ca7a06 100644 --- a/frontend/src/bundles/common/components/loader-overlay/loader-overlay.tsx +++ b/frontend/src/bundles/common/components/loader-overlay/loader-overlay.tsx @@ -2,9 +2,13 @@ import { Fade, Flex } from '@chakra-ui/react'; import { Loader } from '../loader/loader.js'; -const LoaderOverlay = (): JSX.Element => { +type Properties = { + isOpen: boolean; +}; + +const LoaderOverlay = ({ isOpen }: Properties): JSX.Element => { return ( - + Date: Mon, 19 Aug 2024 17:12:06 +0300 Subject: [PATCH 16/18] OV-6: * loaderOverlay component --- frontend/src/bundles/common/components/components.ts | 2 +- .../loader-overlay.tsx => overlay/overlay.tsx} | 9 ++++----- 2 files changed, 5 insertions(+), 6 deletions(-) rename frontend/src/bundles/common/components/{loader-overlay/loader-overlay.tsx => overlay/overlay.tsx} (73%) diff --git a/frontend/src/bundles/common/components/components.ts b/frontend/src/bundles/common/components/components.ts index 6bf7bee06..c453d5f1a 100644 --- a/frontend/src/bundles/common/components/components.ts +++ b/frontend/src/bundles/common/components/components.ts @@ -2,7 +2,7 @@ export { Button } from './button/button.js'; export { Input } from './input/input.js'; export { Link } from './link/link.js'; export { Loader } from './loader/loader.js'; -export { LoaderOverlay } from './loader-overlay/loader-overlay.js'; +export { Overlay } from './overlay/overlay.js'; export { RouterProvider } from './router-provider/router-provider.js'; export { Box, diff --git a/frontend/src/bundles/common/components/loader-overlay/loader-overlay.tsx b/frontend/src/bundles/common/components/overlay/overlay.tsx similarity index 73% rename from frontend/src/bundles/common/components/loader-overlay/loader-overlay.tsx rename to frontend/src/bundles/common/components/overlay/overlay.tsx index 018ca7a06..f1fc4e5ee 100644 --- a/frontend/src/bundles/common/components/loader-overlay/loader-overlay.tsx +++ b/frontend/src/bundles/common/components/overlay/overlay.tsx @@ -1,12 +1,11 @@ import { Fade, Flex } from '@chakra-ui/react'; -import { Loader } from '../loader/loader.js'; - type Properties = { isOpen: boolean; + children: React.ReactNode; }; -const LoaderOverlay = ({ isOpen }: Properties): JSX.Element => { +const Overlay = ({ isOpen, children }: Properties): JSX.Element => { return ( { justifyContent="center" alignItems="center" > - + {children} ); }; -export { LoaderOverlay }; +export { Overlay }; From 41c89b7344f45f5f197694d2b8b58146ef7fa359 Mon Sep 17 00:00:00 2001 From: Sergiy Date: Tue, 20 Aug 2024 11:59:05 +0300 Subject: [PATCH 17/18] OV-6: * Loader component --- frontend/src/bundles/common/components/loader/loader.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/bundles/common/components/loader/loader.tsx b/frontend/src/bundles/common/components/loader/loader.tsx index abc763d3d..b741ded76 100644 --- a/frontend/src/bundles/common/components/loader/loader.tsx +++ b/frontend/src/bundles/common/components/loader/loader.tsx @@ -20,7 +20,7 @@ const Loader = (): JSX.Element => { borderColor="shadow.200" borderTopColor="brand.secondary.300" animation={`${SPIN_ANIMATION} 1s linear infinite`} - > + /> Loading... From dbdd52bc383fe7269ebc550adf4810b23c5fa4ef Mon Sep 17 00:00:00 2001 From: Oleksandra Nedashkivska Date: Tue, 20 Aug 2024 13:08:40 +0300 Subject: [PATCH 18/18] OV-12: + user card --- .../common/components/button/button.tsx | 2 +- .../bundles/common/components/components.ts | 3 + .../bundles/users/components/components.ts | 1 + .../users/components/user-card/user-card.tsx | 32 ++++++++ .../framework/theme/styles/colors.styles.ts | 13 ++++ .../theme/styles/components.styles.ts | 76 ++++++++++++++++++- 6 files changed, 125 insertions(+), 2 deletions(-) create mode 100644 frontend/src/bundles/users/components/components.ts create mode 100644 frontend/src/bundles/users/components/user-card/user-card.tsx diff --git a/frontend/src/bundles/common/components/button/button.tsx b/frontend/src/bundles/common/components/button/button.tsx index 522f29508..fa9006438 100644 --- a/frontend/src/bundles/common/components/button/button.tsx +++ b/frontend/src/bundles/common/components/button/button.tsx @@ -6,7 +6,7 @@ type Properties = { }; const Button: React.FC = ({ type = 'button', label }) => ( - + {label} ); diff --git a/frontend/src/bundles/common/components/components.ts b/frontend/src/bundles/common/components/components.ts index c453d5f1a..71c774689 100644 --- a/frontend/src/bundles/common/components/components.ts +++ b/frontend/src/bundles/common/components/components.ts @@ -6,8 +6,11 @@ export { Overlay } from './overlay/overlay.js'; export { RouterProvider } from './router-provider/router-provider.js'; export { Box, + Circle, ChakraProvider as ComponentsProvider, + Flex, Heading, + Text, VStack, } from '@chakra-ui/react'; export { FormikProvider as FormProvider } from 'formik'; diff --git a/frontend/src/bundles/users/components/components.ts b/frontend/src/bundles/users/components/components.ts new file mode 100644 index 000000000..dcbd2c9a1 --- /dev/null +++ b/frontend/src/bundles/users/components/components.ts @@ -0,0 +1 @@ +export { UserCard } from './user-card/user-card.js'; diff --git a/frontend/src/bundles/users/components/user-card/user-card.tsx b/frontend/src/bundles/users/components/user-card/user-card.tsx new file mode 100644 index 000000000..1d340aa6c --- /dev/null +++ b/frontend/src/bundles/users/components/user-card/user-card.tsx @@ -0,0 +1,32 @@ +import { + Button, + Circle, + Flex, + Text, + VStack, +} from '~/bundles/common/components/components.js'; + +const UserCard: React.FC = () => ( + + + {/* TODO: replace Circle and Text content with dynamic values */} + + FN + + Firstname Lastname + +