From 547fc87a816587296549240d892208de0035b66f Mon Sep 17 00:00:00 2001 From: Paulo Amorim Date: Mon, 20 Jan 2025 18:37:50 -0300 Subject: [PATCH 1/3] Implement theme and Story for Modal --- jsapp/js/components/common/modal.stories.tsx | 83 ++++++++++++++++++++ jsapp/js/theme/kobo/Modal.module.css | 15 ++++ jsapp/js/theme/kobo/Modal.tsx | 19 +++++ jsapp/js/theme/kobo/index.ts | 2 + 4 files changed, 119 insertions(+) create mode 100644 jsapp/js/components/common/modal.stories.tsx create mode 100644 jsapp/js/theme/kobo/Modal.module.css create mode 100644 jsapp/js/theme/kobo/Modal.tsx diff --git a/jsapp/js/components/common/modal.stories.tsx b/jsapp/js/components/common/modal.stories.tsx new file mode 100644 index 0000000000..bafbac673f --- /dev/null +++ b/jsapp/js/components/common/modal.stories.tsx @@ -0,0 +1,83 @@ +import type {ModalProps} from '@mantine/core'; +import {Button, Center, Modal, Stack, Text} from '@mantine/core'; +import type {Meta, StoryObj} from '@storybook/react'; +import {useArgs} from '@storybook/preview-api'; +import {Group} from '@mantine/core'; + +/** + * Mantine [Modal](https://mantine.dev/core/modal/) component stories. + */ +const meta: Meta = { + title: 'Common/Modal', + component: Modal, + render: ({...args}: ModalProps) => { + const [{opened}, updateArgs] = useArgs(); + + return ( +
+ + updateArgs({opened: !opened})}> + + + Example modal content. Press esc, click outside or close button to + close. + + + + + + + +
+ ); + }, + argTypes: { + opened: { + description: 'Modal opened state', + type: 'boolean', + }, + size: { + description: 'Modal size', + type: 'string', + control: { + type: 'select', + }, + options: ['auto', 'xs', 'sm', 'md', 'lg', 'xl', '50%', '75%', '100%'], + }, + fullScreen: { + description: 'Modal fullscreen state', + type: 'boolean', + }, + centered: { + description: 'Center modal content', + type: 'boolean', + }, + withCloseButton: { + description: 'Render close button', + type: 'boolean', + }, + title: { + description: 'Modal title', + type: 'string', + }, + }, + args: { + opened: false, + closeOnClickOutside: true, + withCloseButton: true, + title: 'Modal title', + centered: false, + size: 'md', + fullScreen: false, + }, +}; + +type Story = StoryObj; + +export const Basic: Story = { + args: {}, +}; + +export default meta; diff --git a/jsapp/js/theme/kobo/Modal.module.css b/jsapp/js/theme/kobo/Modal.module.css new file mode 100644 index 0000000000..78c69ff10e --- /dev/null +++ b/jsapp/js/theme/kobo/Modal.module.css @@ -0,0 +1,15 @@ +.close { + color: var(--mantine-color-gray-4); + background-color: transparent; + + &:hover { + color: var(--mantine-color-gray-2); + background-color: transparent; + } +} + +.title { + font-size: var(--mantine-font-size-xl); + font-weight: var(--mantine-heading-font-weight); + color: var(--mantine-color-gray-0); +} diff --git a/jsapp/js/theme/kobo/Modal.tsx b/jsapp/js/theme/kobo/Modal.tsx new file mode 100644 index 0000000000..b6d0f305ef --- /dev/null +++ b/jsapp/js/theme/kobo/Modal.tsx @@ -0,0 +1,19 @@ +import {Modal} from '@mantine/core'; +import Icon from 'jsapp/js/components/common/icon'; +import classes from './Modal.module.css'; + +export const ModalThemeKobo = Modal.extend({ + defaultProps: { + closeButtonProps: { + icon: , + }, + overlayProps: { + backgroundOpacity: 0.5, + color: 'var(--mantine-color-blue-9)', + blur: 2, + zIndex: 3000, + }, + zIndex: 4000, + }, + classNames: classes, +}); diff --git a/jsapp/js/theme/kobo/index.ts b/jsapp/js/theme/kobo/index.ts index e897baaf68..90092ea3f8 100644 --- a/jsapp/js/theme/kobo/index.ts +++ b/jsapp/js/theme/kobo/index.ts @@ -7,6 +7,7 @@ import {MenuThemeKobo} from './Menu'; import {AlertThemeKobo} from './Alert'; import {SelectThemeKobo} from './Select'; import {LoaderThemeKobo} from './Loader'; +import {ModalThemeKobo} from './Modal'; export const themeKobo = createTheme({ primaryColor: 'blue', @@ -110,5 +111,6 @@ export const themeKobo = createTheme({ Table: TableThemeKobo, Select: SelectThemeKobo, Loader: LoaderThemeKobo, + Modal: ModalThemeKobo, }, }); From 5beb5dbac426f8c457e1076d4121bed04f8c95c7 Mon Sep 17 00:00:00 2001 From: Paulo Amorim Date: Tue, 21 Jan 2025 15:40:20 -0300 Subject: [PATCH 2/3] Fix linting error on story --- jsapp/js/components/common/modal.stories.tsx | 50 ++++++++++---------- 1 file changed, 25 insertions(+), 25 deletions(-) diff --git a/jsapp/js/components/common/modal.stories.tsx b/jsapp/js/components/common/modal.stories.tsx index bafbac673f..4b78c8c5e4 100644 --- a/jsapp/js/components/common/modal.stories.tsx +++ b/jsapp/js/components/common/modal.stories.tsx @@ -1,8 +1,30 @@ import type {ModalProps} from '@mantine/core'; -import {Button, Center, Modal, Stack, Text} from '@mantine/core'; +import {Button, Center, Modal, Stack, Text, Group} from '@mantine/core'; import type {Meta, StoryObj} from '@storybook/react'; import {useArgs} from '@storybook/preview-api'; -import {Group} from '@mantine/core'; +import {useDisclosure} from '@mantine/hooks'; + +const RenderModal = ({...args}: ModalProps) => { + const [{opened}, updateArgs] = useArgs(); + + return ( +
+ + updateArgs({opened: !opened})}> + + + Example modal content. Press esc, click outside or close button to + close. + + + + + + + +
+ ); +}; /** * Mantine [Modal](https://mantine.dev/core/modal/) component stories. @@ -10,29 +32,7 @@ import {Group} from '@mantine/core'; const meta: Meta = { title: 'Common/Modal', component: Modal, - render: ({...args}: ModalProps) => { - const [{opened}, updateArgs] = useArgs(); - - return ( -
- - updateArgs({opened: !opened})}> - - - Example modal content. Press esc, click outside or close button to - close. - - - - - - - -
- ); - }, + render: RenderModal, argTypes: { opened: { description: 'Modal opened state', From 27e8429cd4835a2f3d0dab92f5781c42e08e157d Mon Sep 17 00:00:00 2001 From: Paulo Amorim Date: Tue, 21 Jan 2025 15:53:40 -0300 Subject: [PATCH 3/3] Remove blur --- jsapp/js/theme/kobo/Modal.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/jsapp/js/theme/kobo/Modal.tsx b/jsapp/js/theme/kobo/Modal.tsx index b6d0f305ef..73d31ccf51 100644 --- a/jsapp/js/theme/kobo/Modal.tsx +++ b/jsapp/js/theme/kobo/Modal.tsx @@ -10,7 +10,6 @@ export const ModalThemeKobo = Modal.extend({ overlayProps: { backgroundOpacity: 0.5, color: 'var(--mantine-color-blue-9)', - blur: 2, zIndex: 3000, }, zIndex: 4000,