From 2678d3d431bcbbe16599bc4d9712157f000b2632 Mon Sep 17 00:00:00 2001 From: "Elena.Dumitrescu@totalsoft.ro" Date: Fri, 13 Dec 2024 16:54:19 +0200 Subject: [PATCH 1/4] refactor controls and storybook examples --- src/components/buttons/BackToButton/types.ts | 2 +- src/components/buttons/UploadButton/types.ts | 2 +- src/components/feedback/Toast/useToast.tsx | 1 - .../feedback/Toast/TextSizePreview.tsx | 85 +++++++++++++++++++ src/stories/feedback/Toast/Toast.stories.tsx | 30 ++++++- .../surfaces/Accordion/Accordion.stories.tsx | 1 - .../surfaces/Accordion/ActionsPreview.tsx | 1 - src/stories/surfaces/Card/Card.stories.tsx | 1 - .../CollapseCard/CollapseCard.stories.tsx | 4 +- .../CollapseCard/ControlledPreview.tsx | 3 +- .../surfaces/CollapseCard/FilledPreview.tsx | 3 +- .../surfaces/StatsCard/StatsCard.stories.tsx | 7 +- 12 files changed, 124 insertions(+), 16 deletions(-) create mode 100644 src/stories/feedback/Toast/TextSizePreview.tsx diff --git a/src/components/buttons/BackToButton/types.ts b/src/components/buttons/BackToButton/types.ts index 79a922cf..1fdd7473 100644 --- a/src/components/buttons/BackToButton/types.ts +++ b/src/components/buttons/BackToButton/types.ts @@ -4,7 +4,7 @@ import { NavigateOptions } from 'react-router' import { IconButtonProps } from '../IconButton/types' -export interface BackToButtonProps extends IconButtonProps { +export interface BackToButtonProps extends Omit { /** * Path where browser will be directed to when the button is clicked. */ diff --git a/src/components/buttons/UploadButton/types.ts b/src/components/buttons/UploadButton/types.ts index e63e2094..4913288f 100644 --- a/src/components/buttons/UploadButton/types.ts +++ b/src/components/buttons/UploadButton/types.ts @@ -4,7 +4,7 @@ import { IconButtonProps } from '../IconButton/types' import { SvgIconComponent } from '@mui/icons-material' import { F } from 'ts-toolbelt' -export interface UploadButtonProps extends IconButtonProps { +export interface UploadButtonProps extends Omit { /** * @default BackupIcon * The Icon to display. diff --git a/src/components/feedback/Toast/useToast.tsx b/src/components/feedback/Toast/useToast.tsx index a4065e36..15bd1ba4 100644 --- a/src/components/feedback/Toast/useToast.tsx +++ b/src/components/feedback/Toast/useToast.tsx @@ -25,7 +25,6 @@ const useToast = () => { [classes[variant]]: variant, [classes['default']]: true }) - const options: ToastOptionsBase = { ...restOptions, transition: getTransitionType(transitionType), diff --git a/src/stories/feedback/Toast/TextSizePreview.tsx b/src/stories/feedback/Toast/TextSizePreview.tsx new file mode 100644 index 00000000..09ad33fd --- /dev/null +++ b/src/stories/feedback/Toast/TextSizePreview.tsx @@ -0,0 +1,85 @@ +// Copyright (c) TotalSoft. +// This source code is licensed under the MIT license. + +import React from 'react' +import { Button, ToastContainer, useToast } from 'components' +import Grid from '@mui/material/Grid2' + +export const TextSizeSmallPreview = (args: any) => { + const addToast = useToast() + + return ( + + + + + + {/* + + + + + + + */} + + ) +} + +export const TextSizeMediumPreview = (args: any) => { + const addToast = useToast() + + return ( + + + + + + + ) +} + +export const TextSizeLargePreview = (args: any) => { + const addToast = useToast() + + return ( + + + + + + + ) +} + +// export default TextSizePreview diff --git a/src/stories/feedback/Toast/Toast.stories.tsx b/src/stories/feedback/Toast/Toast.stories.tsx index f7849090..4810182c 100644 --- a/src/stories/feedback/Toast/Toast.stories.tsx +++ b/src/stories/feedback/Toast/Toast.stories.tsx @@ -8,10 +8,17 @@ import VariantsPreview from './VariantsPreview' import PositionsPreview from './PositionsPreview' import TransitionsPreview from './TransitionsPreview' import ActionsPreview from './ActionsPreview' +import { TextSizeLargePreview, TextSizeMediumPreview, TextSizeSmallPreview } from './TextSizePreview' const meta: Meta = { title: 'Components/Feedback/Toast', - component: ToastContainer + component: ToastContainer, + argTypes: { + textSize: { + options: ['small', 'medium', 'large'], + control: { type: 'select' } + } + } } satisfies Meta export default meta @@ -113,7 +120,14 @@ export const Variants: Story = { } } }, - render: args => + render: args => { + return ( + <> + + + + ) + } } /** * Different positions are available for rendering toast. @@ -188,7 +202,7 @@ export const Positions: Story = { } } }, - render: args => + render: args => } /** @@ -290,3 +304,13 @@ export const Actions: Story = { }, render: args => } + +export const TextSize: Story = { + render: () => ( + <> + + + + + ) +} diff --git a/src/stories/surfaces/Accordion/Accordion.stories.tsx b/src/stories/surfaces/Accordion/Accordion.stories.tsx index 9bd1f227..1398e78e 100644 --- a/src/stories/surfaces/Accordion/Accordion.stories.tsx +++ b/src/stories/surfaces/Accordion/Accordion.stories.tsx @@ -136,7 +136,6 @@ export const Actions: Story = { options={options} value={value} onChange={handleChange} - stopEventPropagation /> diff --git a/src/stories/surfaces/Accordion/ActionsPreview.tsx b/src/stories/surfaces/Accordion/ActionsPreview.tsx index 1f14f5b2..b4681e8c 100644 --- a/src/stories/surfaces/Accordion/ActionsPreview.tsx +++ b/src/stories/surfaces/Accordion/ActionsPreview.tsx @@ -32,7 +32,6 @@ const ActionsPreview = () => { options={options} value={value} onChange={handleChange} - stopEventPropagation isClearable /> {`Selected value: ${JSON.stringify(value)}`} diff --git a/src/stories/surfaces/Card/Card.stories.tsx b/src/stories/surfaces/Card/Card.stories.tsx index 5ee0a698..8b5dcbc3 100644 --- a/src/stories/surfaces/Card/Card.stories.tsx +++ b/src/stories/surfaces/Card/Card.stories.tsx @@ -46,7 +46,6 @@ const actions = ( */ export const Card: Story = { args: { title, subheader, children, icon: People, footer, actions }, - parameters: { docs: { source: { diff --git a/src/stories/surfaces/CollapseCard/CollapseCard.stories.tsx b/src/stories/surfaces/CollapseCard/CollapseCard.stories.tsx index fbb4727a..a0d8cab4 100644 --- a/src/stories/surfaces/CollapseCard/CollapseCard.stories.tsx +++ b/src/stories/surfaces/CollapseCard/CollapseCard.stories.tsx @@ -142,7 +142,7 @@ export const Filled: Story = { } } }, - render: () => + render: args => } /** @@ -178,7 +178,7 @@ export const Controlled: Story = { } } }, - render: () => + render: args => } /** diff --git a/src/stories/surfaces/CollapseCard/ControlledPreview.tsx b/src/stories/surfaces/CollapseCard/ControlledPreview.tsx index b7ee1363..0c02d631 100644 --- a/src/stories/surfaces/CollapseCard/ControlledPreview.tsx +++ b/src/stories/surfaces/CollapseCard/ControlledPreview.tsx @@ -33,7 +33,7 @@ const uncontrolled = ` } ` -const ControlledPreview = () => { +const ControlledPreview = (args: any) => { const [expanded, setExpanded] = useState(false) const handleToggle = useCallback(() => setExpanded(current => !current), []) @@ -55,6 +55,7 @@ const ControlledPreview = () => { } + {...args} /> diff --git a/src/stories/surfaces/CollapseCard/FilledPreview.tsx b/src/stories/surfaces/CollapseCard/FilledPreview.tsx index 6c3ce7be..9c0a6e27 100644 --- a/src/stories/surfaces/CollapseCard/FilledPreview.tsx +++ b/src/stories/surfaces/CollapseCard/FilledPreview.tsx @@ -3,7 +3,7 @@ import { Button, IconButton, Typography, CollapseCard } from 'components' import QuestionMark from '@mui/icons-material/QuestionMark' import { Grid2 as Grid, TextField } from '@mui/material' -const FilledPreview = () => { +const FilledPreview = (args: any) => { return ( { } + {...args} > diff --git a/src/stories/surfaces/StatsCard/StatsCard.stories.tsx b/src/stories/surfaces/StatsCard/StatsCard.stories.tsx index 936a63cd..86d80bad 100644 --- a/src/stories/surfaces/StatsCard/StatsCard.stories.tsx +++ b/src/stories/surfaces/StatsCard/StatsCard.stories.tsx @@ -57,6 +57,7 @@ export const Default: Story = { * Stats Card component allows displaying any type of data, string, numeric, React Node, etc. */ export const VariousContents: Story = { + args: { icon, title, footer }, parameters: { controls: { hideNoControlsWarning: true }, docs: { @@ -86,11 +87,11 @@ export const VariousContents: Story = { } } }, - render: () => ( + render: args => ( <> - + From acb5f96da5a1115efbc98ed6d448f46ee0035b79 Mon Sep 17 00:00:00 2001 From: "Elena.Dumitrescu@totalsoft.ro" Date: Tue, 17 Dec 2024 14:30:57 +0200 Subject: [PATCH 2/4] changed textSize preview --- .../feedback/Toast/TextSizePreview.tsx | 82 +++---------------- src/stories/feedback/Toast/Toast.stories.tsx | 50 ++++++----- 2 files changed, 43 insertions(+), 89 deletions(-) diff --git a/src/stories/feedback/Toast/TextSizePreview.tsx b/src/stories/feedback/Toast/TextSizePreview.tsx index 09ad33fd..b6c457b5 100644 --- a/src/stories/feedback/Toast/TextSizePreview.tsx +++ b/src/stories/feedback/Toast/TextSizePreview.tsx @@ -5,81 +5,25 @@ import React from 'react' import { Button, ToastContainer, useToast } from 'components' import Grid from '@mui/material/Grid2' -export const TextSizeSmallPreview = (args: any) => { +const TextSizePreview = (args: any) => { const addToast = useToast() return ( - - - - {/* - - - - - - - */} - - ) -} - -export const TextSizeMediumPreview = (args: any) => { - const addToast = useToast() - - return ( - - - - - - - ) -} - -export const TextSizeLargePreview = (args: any) => { - const addToast = useToast() - - return ( - - - - - + ) } -// export default TextSizePreview +export default TextSizePreview diff --git a/src/stories/feedback/Toast/Toast.stories.tsx b/src/stories/feedback/Toast/Toast.stories.tsx index 4810182c..9d1b8090 100644 --- a/src/stories/feedback/Toast/Toast.stories.tsx +++ b/src/stories/feedback/Toast/Toast.stories.tsx @@ -8,17 +8,11 @@ import VariantsPreview from './VariantsPreview' import PositionsPreview from './PositionsPreview' import TransitionsPreview from './TransitionsPreview' import ActionsPreview from './ActionsPreview' -import { TextSizeLargePreview, TextSizeMediumPreview, TextSizeSmallPreview } from './TextSizePreview' +import TextSizePreview from './TextSizePreview' const meta: Meta = { title: 'Components/Feedback/Toast', component: ToastContainer, - argTypes: { - textSize: { - options: ['small', 'medium', 'large'], - control: { type: 'select' } - } - } } satisfies Meta export default meta @@ -121,12 +115,7 @@ export const Variants: Story = { } }, render: args => { - return ( - <> - - - - ) + return } } /** @@ -305,12 +294,33 @@ export const Actions: Story = { render: args => } +/** + * You can change the content font size by changing the ToastContainer textSize parameter of the application + * Available options are: + * - small + * - medium + * - large + * Default is set to 'small'. + */ export const TextSize: Story = { - render: () => ( - <> - - - - - ) + parameters: { + docs: { + source: { + code: ` + `, + format: true + } + } + }, + render: args => } From 055702ea576200d2edf995dced58dfbfb693887f Mon Sep 17 00:00:00 2001 From: "Elena.Dumitrescu@totalsoft.ro" Date: Wed, 18 Dec 2024 13:18:10 +0200 Subject: [PATCH 3/4] refactor return --- src/stories/feedback/Toast/Toast.stories.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/stories/feedback/Toast/Toast.stories.tsx b/src/stories/feedback/Toast/Toast.stories.tsx index 9d1b8090..4c0286c7 100644 --- a/src/stories/feedback/Toast/Toast.stories.tsx +++ b/src/stories/feedback/Toast/Toast.stories.tsx @@ -12,7 +12,7 @@ import TextSizePreview from './TextSizePreview' const meta: Meta = { title: 'Components/Feedback/Toast', - component: ToastContainer, + component: ToastContainer } satisfies Meta export default meta @@ -114,9 +114,7 @@ export const Variants: Story = { } } }, - render: args => { - return - } + render: args => } /** * Different positions are available for rendering toast. From de465801bbb3deaa569fccf711188cbe91b5d9f4 Mon Sep 17 00:00:00 2001 From: "Elena.Dumitrescu@totalsoft.ro" Date: Wed, 18 Dec 2024 14:54:02 +0200 Subject: [PATCH 4/4] removed autoClose from ToastContainer --- src/components/feedback/Toast/ToastContainer.tsx | 8 -------- 1 file changed, 8 deletions(-) diff --git a/src/components/feedback/Toast/ToastContainer.tsx b/src/components/feedback/Toast/ToastContainer.tsx index da5de3c8..d3417ae5 100644 --- a/src/components/feedback/Toast/ToastContainer.tsx +++ b/src/components/feedback/Toast/ToastContainer.tsx @@ -39,14 +39,6 @@ const ToastContainer: React.FC = ({ } ToastContainer.propTypes = { - /** - * Set the delay in ms to close the toast automatically. - * Use `false` to prevent the toast from closing. - * @default false - */ - // eslint-disable-next-line @typescript-eslint/ban-ts-comment - // @ts-ignore - autoClose: PropTypes.oneOf([PropTypes.number, false]), /** * Limit the number of toast displayed at the same time * @default 5