From cc49eeacbd2a07a21ba883c92bf49d06c07d0d1c Mon Sep 17 00:00:00 2001 From: Rebeka Dekany <50901361+rebekadekany@users.noreply.github.com> Date: Wed, 24 Sep 2025 18:24:59 +0200 Subject: [PATCH] Update Storybook controls for shared component stories and add Figma links for preview (#28634) * Rename ui to shared * Delete unused Switch component * Update stories with Figma links * Update Tag story naming for clarity * Update Toggle button story naming for clarity * Move shared components to the shared folder * Remove file as part of TS migration * Migrate jsx to tsx * Remove file as part of TS migration * Migrate jsx to tsx * Include necessary controls only * Auto SF GitOrigin-RevId: d2458eeffa7a6b67ce522c3ccb6b4f71e5e76d62 --- .../frontend/js/shared/components/switch.tsx | 27 ---- .../frontend/stories/input-switch.stories.tsx | 26 --- .../stories/{ui => shared}/badge.stories.tsx | 0 .../stories/{ui => shared}/button.stories.tsx | 13 +- .../{ui => shared}/dropdown-menu.stories.tsx | 14 +- .../{ => shared}/feedback-badge.stories.tsx | 2 +- .../form/form-check.stories.tsx | 28 ++-- .../form/form-input.stories.tsx | 36 +++++ .../form/form-radio.stories.tsx | 30 ++-- .../form/form-select.stories.tsx | 30 ++++ .../form/form-textarea.stories.tsx | 30 ++++ .../{ui => shared}/icon-button.stories.tsx | 4 + .../stories/shared/input-switch.stories.tsx | 37 +++++ .../{ => shared}/labeled-divider.stories.tsx | 0 .../shared/loading-spinner.stories.tsx | 55 +++++++ .../stories/{ => shared}/menu-bar.stories.tsx | 0 .../{modals => shared}/modal.stories.tsx | 10 +- .../{ => shared}/notification.stories.tsx | 56 ++++++- .../{ => shared}/pagination.stories.jsx | 8 +- .../{ => shared}/radio-chip.stories.tsx | 14 +- .../stories/{ui => shared}/row.stories.tsx | 0 .../stories/{ => shared}/select.stories.tsx | 15 +- .../{ui => shared}/split-button.stories.tsx | 4 + .../shared/split-test-badge.stories.tsx | 151 ++++++++++++++++++ .../start-free-trial-button.stories.tsx | 86 ++++++++++ .../stories/{ui => shared}/tag.stories.tsx | 18 ++- .../toggle-button.stories.tsx} | 6 +- .../{ui => shared}/tooltip.stories.tsx | 4 + .../{ => shared}/upgrade-prompt.stories.tsx | 0 .../stories/split-test-badge.stories.jsx | 137 ---------------- .../start-free-trial-button.stories.jsx | 33 ---- 31 files changed, 583 insertions(+), 291 deletions(-) delete mode 100644 services/web/frontend/js/shared/components/switch.tsx delete mode 100644 services/web/frontend/stories/input-switch.stories.tsx rename services/web/frontend/stories/{ui => shared}/badge.stories.tsx (100%) rename services/web/frontend/stories/{ui => shared}/button.stories.tsx (80%) rename services/web/frontend/stories/{ui => shared}/dropdown-menu.stories.tsx (97%) rename services/web/frontend/stories/{ => shared}/feedback-badge.stories.tsx (92%) rename services/web/frontend/stories/{ui => shared}/form/form-check.stories.tsx (61%) rename services/web/frontend/stories/{ui => shared}/form/form-input.stories.tsx (87%) rename services/web/frontend/stories/{ui => shared}/form/form-radio.stories.tsx (57%) rename services/web/frontend/stories/{ui => shared}/form/form-select.stories.tsx (88%) rename services/web/frontend/stories/{ui => shared}/form/form-textarea.stories.tsx (87%) rename services/web/frontend/stories/{ui => shared}/icon-button.stories.tsx (79%) create mode 100644 services/web/frontend/stories/shared/input-switch.stories.tsx rename services/web/frontend/stories/{ => shared}/labeled-divider.stories.tsx (100%) create mode 100644 services/web/frontend/stories/shared/loading-spinner.stories.tsx rename services/web/frontend/stories/{ => shared}/menu-bar.stories.tsx (100%) rename services/web/frontend/stories/{modals => shared}/modal.stories.tsx (93%) rename services/web/frontend/stories/{ => shared}/notification.stories.tsx (83%) rename services/web/frontend/stories/{ => shared}/pagination.stories.jsx (71%) rename services/web/frontend/stories/{ => shared}/radio-chip.stories.tsx (63%) rename services/web/frontend/stories/{ui => shared}/row.stories.tsx (100%) rename services/web/frontend/stories/{ => shared}/select.stories.tsx (83%) rename services/web/frontend/stories/{ui => shared}/split-button.stories.tsx (88%) create mode 100644 services/web/frontend/stories/shared/split-test-badge.stories.tsx create mode 100644 services/web/frontend/stories/shared/start-free-trial-button.stories.tsx rename services/web/frontend/stories/{ui => shared}/tag.stories.tsx (65%) rename services/web/frontend/stories/{switcher.stories.tsx => shared/toggle-button.stories.tsx} (86%) rename services/web/frontend/stories/{ui => shared}/tooltip.stories.tsx (81%) rename services/web/frontend/stories/{ => shared}/upgrade-prompt.stories.tsx (100%) delete mode 100644 services/web/frontend/stories/split-test-badge.stories.jsx delete mode 100644 services/web/frontend/stories/start-free-trial-button.stories.jsx diff --git a/services/web/frontend/js/shared/components/switch.tsx b/services/web/frontend/js/shared/components/switch.tsx deleted file mode 100644 index 44157b8143..0000000000 --- a/services/web/frontend/js/shared/components/switch.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import classNames from 'classnames' - -type SwitchProps = { - onChange: () => void - checked: boolean - disabled?: boolean -} - -function Switch({ onChange, checked, disabled = false }: SwitchProps) { - return ( - // eslint-disable-next-line jsx-a11y/label-has-associated-control - - ) -} - -export default Switch diff --git a/services/web/frontend/stories/input-switch.stories.tsx b/services/web/frontend/stories/input-switch.stories.tsx deleted file mode 100644 index 88e5cd37be..0000000000 --- a/services/web/frontend/stories/input-switch.stories.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import OLFormSwitch from '@/shared/components/ol/ol-form-switch' -import { disableControlsOf } from './utils/arg-types' - -export const Unchecked = () => { - return {}} checked={false} /> -} - -export const UncheckedDisabled = () => { - return {}} checked={false} disabled /> -} - -export const Checked = () => { - return {}} checked /> -} - -export const CheckedDisabled = () => { - return {}} checked disabled /> -} - -export default { - title: 'Shared / Components / Input Switch', - component: OLFormSwitch, - argTypes: { - ...disableControlsOf('inputRef'), - }, -} diff --git a/services/web/frontend/stories/ui/badge.stories.tsx b/services/web/frontend/stories/shared/badge.stories.tsx similarity index 100% rename from services/web/frontend/stories/ui/badge.stories.tsx rename to services/web/frontend/stories/shared/badge.stories.tsx diff --git a/services/web/frontend/stories/ui/button.stories.tsx b/services/web/frontend/stories/shared/button.stories.tsx similarity index 80% rename from services/web/frontend/stories/ui/button.stories.tsx rename to services/web/frontend/stories/shared/button.stories.tsx index ff4fdf0343..894124e015 100644 --- a/services/web/frontend/stories/ui/button.stories.tsx +++ b/services/web/frontend/stories/shared/button.stories.tsx @@ -24,7 +24,7 @@ const meta: Meta = { title: 'Shared / Components / Button', component: OLButton, args: { - children: 'A Button', + children: 'Button', disabled: false, isLoading: false, }, @@ -47,9 +47,14 @@ const meta: Meta = { ], }, }, - parameters: figmaDesignUrl( - 'https://www.figma.com/design/V7Ogph1Ocs4ux2A4WMNAh7/Overleaf---Components?node-id=3458-22412&m=dev' - ), + parameters: { + controls: { + include: ['children', 'disabled', 'isLoading', 'size', 'variant'], + }, + ...figmaDesignUrl( + 'https://www.figma.com/design/V7Ogph1Ocs4ux2A4WMNAh7/Overleaf---Components?node-id=3458-22412&m=dev' + ), + }, } export default meta diff --git a/services/web/frontend/stories/ui/dropdown-menu.stories.tsx b/services/web/frontend/stories/shared/dropdown-menu.stories.tsx similarity index 97% rename from services/web/frontend/stories/ui/dropdown-menu.stories.tsx rename to services/web/frontend/stories/shared/dropdown-menu.stories.tsx index 1b6e2ae405..9ada5e2b37 100644 --- a/services/web/frontend/stories/ui/dropdown-menu.stories.tsx +++ b/services/web/frontend/stories/shared/dropdown-menu.stories.tsx @@ -221,14 +221,12 @@ export const TrailingIcon = () => { const meta: Meta = { title: 'Shared / Components / DropdownMenu', component: DropdownMenu, - argTypes: { - disabled: { - control: 'boolean', - }, - show: { - table: { - disable: true, - }, + args: { + disabled: false, + }, + parameters: { + controls: { + include: ['disabled'], }, }, } diff --git a/services/web/frontend/stories/feedback-badge.stories.tsx b/services/web/frontend/stories/shared/feedback-badge.stories.tsx similarity index 92% rename from services/web/frontend/stories/feedback-badge.stories.tsx rename to services/web/frontend/stories/shared/feedback-badge.stories.tsx index 560adaf1a8..aa78e1c3be 100644 --- a/services/web/frontend/stories/feedback-badge.stories.tsx +++ b/services/web/frontend/stories/shared/feedback-badge.stories.tsx @@ -1,4 +1,4 @@ -import { ScopeDecorator } from './decorators/scope' +import { ScopeDecorator } from '../decorators/scope' import { FeedbackBadge } from '@/shared/components/feedback-badge' export const WithDefaultText = () => { diff --git a/services/web/frontend/stories/ui/form/form-check.stories.tsx b/services/web/frontend/stories/shared/form/form-check.stories.tsx similarity index 61% rename from services/web/frontend/stories/ui/form/form-check.stories.tsx rename to services/web/frontend/stories/shared/form/form-check.stories.tsx index cfe1de227c..c22a95036e 100644 --- a/services/web/frontend/stories/ui/form/form-check.stories.tsx +++ b/services/web/frontend/stories/shared/form/form-check.stories.tsx @@ -1,25 +1,14 @@ import { useRef, useLayoutEffect } from 'react' import { Form } from 'react-bootstrap' import type { Meta, StoryObj } from '@storybook/react' +import { figmaDesignUrl } from '../../../../.storybook/utils/figma-design-url' const meta: Meta<(typeof Form)['Check']> = { title: 'Shared / Components / Form', component: Form.Check, - argTypes: { - id: { - table: { - disable: true, - }, - }, - label: { - table: { - disable: true, - }, - }, - defaultChecked: { - table: { - disable: true, - }, + parameters: { + controls: { + include: ['disabled'], }, }, } @@ -33,6 +22,9 @@ export const Checkbox: Story = { label: 'Label', disabled: false, }, + parameters: figmaDesignUrl( + 'https://www.figma.com/design/V7Ogph1Ocs4ux2A4WMNAh7/Overleaf---Components?node-id=3494-247203&m=dev' + ), } export const CheckboxChecked: Story = { @@ -42,6 +34,9 @@ export const CheckboxChecked: Story = { disabled: false, defaultChecked: true, }, + parameters: figmaDesignUrl( + 'https://www.figma.com/design/V7Ogph1Ocs4ux2A4WMNAh7/Overleaf---Components?node-id=3495-249055&m=dev' + ), } export const CheckboxIndeterminate = (args: Story['args']) => { @@ -60,3 +55,6 @@ CheckboxIndeterminate.args = { label: 'Label', disabled: false, } +CheckboxIndeterminate.parameters = figmaDesignUrl( + 'https://www.figma.com/design/V7Ogph1Ocs4ux2A4WMNAh7/Overleaf---Components?node-id=3495-249055&m=dev' +) diff --git a/services/web/frontend/stories/ui/form/form-input.stories.tsx b/services/web/frontend/stories/shared/form/form-input.stories.tsx similarity index 87% rename from services/web/frontend/stories/ui/form/form-input.stories.tsx rename to services/web/frontend/stories/shared/form/form-input.stories.tsx index 33facf81ac..f5ffdddade 100644 --- a/services/web/frontend/stories/ui/form/form-input.stories.tsx +++ b/services/web/frontend/stories/shared/form/form-input.stories.tsx @@ -5,10 +5,16 @@ import FormText from '@/shared/components/form/form-text' import FormControl from '@/shared/components/form/form-control' import MaterialIcon from '@/shared/components/material-icon' import FormFeedback from '@/shared/components/form/form-feedback' +import { figmaDesignUrl } from '../../../../.storybook/utils/figma-design-url' const meta: Meta> = { title: 'Shared / Components / Form / Input', component: FormControl, + parameters: { + controls: { + include: ['disabled'], + }, + }, } export default meta @@ -42,6 +48,9 @@ export const Default: Story = { Default.args = { disabled: false, } +Default.parameters = figmaDesignUrl( + 'https://www.figma.com/design/V7Ogph1Ocs4ux2A4WMNAh7/Overleaf---Components?node-id=3489-152419&m=dev' +) export const Info: Story = { render: args => { @@ -81,7 +90,13 @@ export const Info: Story = { ) }, + args: { + disabled: false, + }, } +Info.parameters = figmaDesignUrl( + 'https://www.figma.com/design/V7Ogph1Ocs4ux2A4WMNAh7/Overleaf---Components?node-id=3489-152426&m=dev' +) export const Error: Story = { render: args => { @@ -107,7 +122,13 @@ export const Error: Story = { ) }, + args: { + disabled: false, + }, } +Error.parameters = figmaDesignUrl( + 'https://www.figma.com/design/V7Ogph1Ocs4ux2A4WMNAh7/Overleaf---Components?node-id=3489-166648&m=dev' +) export const Warning: Story = { render: args => { @@ -133,7 +154,13 @@ export const Warning: Story = { ) }, + args: { + disabled: false, + }, } +Warning.parameters = figmaDesignUrl( + 'https://www.figma.com/design/V7Ogph1Ocs4ux2A4WMNAh7/Overleaf---Components?node-id=3489-166648&m=dev' +) export const Success: Story = { render: args => { @@ -159,7 +186,13 @@ export const Success: Story = { ) }, + args: { + disabled: false, + }, } +Success.parameters = figmaDesignUrl( + 'https://www.figma.com/design/V7Ogph1Ocs4ux2A4WMNAh7/Overleaf---Components?node-id=3489-166648&m=dev' +) export const WithIcons: Story = { render: args => { @@ -252,4 +285,7 @@ export const WithIcons: Story = { ) }, + args: { + disabled: false, + }, } diff --git a/services/web/frontend/stories/ui/form/form-radio.stories.tsx b/services/web/frontend/stories/shared/form/form-radio.stories.tsx similarity index 57% rename from services/web/frontend/stories/ui/form/form-radio.stories.tsx rename to services/web/frontend/stories/shared/form/form-radio.stories.tsx index 99ce0cb40d..83d17325f2 100644 --- a/services/web/frontend/stories/ui/form/form-radio.stories.tsx +++ b/services/web/frontend/stories/shared/form/form-radio.stories.tsx @@ -1,29 +1,13 @@ import { Form } from 'react-bootstrap' import type { Meta, StoryObj } from '@storybook/react' +import { figmaDesignUrl } from '../../../../.storybook/utils/figma-design-url' const meta: Meta<(typeof Form)['Check']> = { title: 'Shared / Components / Form', component: Form.Check, - argTypes: { - id: { - table: { - disable: true, - }, - }, - label: { - table: { - disable: true, - }, - }, - type: { - table: { - disable: true, - }, - }, - defaultChecked: { - table: { - disable: true, - }, + parameters: { + controls: { + include: ['disabled'], }, }, } @@ -38,6 +22,9 @@ export const Radio: Story = { label: 'Label', disabled: false, }, + parameters: figmaDesignUrl( + 'https://www.figma.com/design/V7Ogph1Ocs4ux2A4WMNAh7/Overleaf---Components?node-id=3495-259211&m=dev' + ), } export const RadioChecked: Story = { @@ -48,4 +35,7 @@ export const RadioChecked: Story = { disabled: false, defaultChecked: true, }, + parameters: figmaDesignUrl( + 'https://www.figma.com/design/V7Ogph1Ocs4ux2A4WMNAh7/Overleaf---Components?node-id=3495-259218&m=dev' + ), } diff --git a/services/web/frontend/stories/ui/form/form-select.stories.tsx b/services/web/frontend/stories/shared/form/form-select.stories.tsx similarity index 88% rename from services/web/frontend/stories/ui/form/form-select.stories.tsx rename to services/web/frontend/stories/shared/form/form-select.stories.tsx index 5d1fa1734c..89d6908063 100644 --- a/services/web/frontend/stories/ui/form/form-select.stories.tsx +++ b/services/web/frontend/stories/shared/form/form-select.stories.tsx @@ -2,10 +2,16 @@ import { Form, FormSelectProps } from 'react-bootstrap' import type { Meta, StoryObj } from '@storybook/react' import FormGroup from '@/shared/components/form/form-group' import FormText from '@/shared/components/form/form-text' +import { figmaDesignUrl } from '../../../../.storybook/utils/figma-design-url' const meta: Meta = { title: 'Shared / Components / Form / Select', component: Form.Select, + parameters: { + controls: { + include: ['disabled'], + }, + }, } export default meta @@ -54,6 +60,9 @@ export const Default: Story = { Default.args = { disabled: false, } +Default.parameters = figmaDesignUrl( + 'https://www.figma.com/design/V7Ogph1Ocs4ux2A4WMNAh7/Overleaf---Components?node-id=3489-199797&m=dev' +) export const Info: Story = { render: args => { @@ -94,6 +103,9 @@ export const Info: Story = { ) }, + args: { + disabled: false, + }, } export const Error: Story = { @@ -135,7 +147,13 @@ export const Error: Story = { ) }, + args: { + disabled: false, + }, } +Error.parameters = figmaDesignUrl( + 'https://www.figma.com/design/V7Ogph1Ocs4ux2A4WMNAh7/Overleaf---Components?node-id=3489-200123&m=dev' +) export const Warning: Story = { render: args => { @@ -176,7 +194,13 @@ export const Warning: Story = { ) }, + args: { + disabled: false, + }, } +Warning.parameters = figmaDesignUrl( + 'https://www.figma.com/design/V7Ogph1Ocs4ux2A4WMNAh7/Overleaf---Components?node-id=3489-199800&m=dev' +) export const Success: Story = { render: args => { @@ -217,4 +241,10 @@ export const Success: Story = { ) }, + args: { + disabled: false, + }, } +Success.parameters = figmaDesignUrl( + 'https://www.figma.com/design/V7Ogph1Ocs4ux2A4WMNAh7/Overleaf---Components?node-id=3489-199800&m=dev' +) diff --git a/services/web/frontend/stories/ui/form/form-textarea.stories.tsx b/services/web/frontend/stories/shared/form/form-textarea.stories.tsx similarity index 87% rename from services/web/frontend/stories/ui/form/form-textarea.stories.tsx rename to services/web/frontend/stories/shared/form/form-textarea.stories.tsx index 73a1f8d80d..f60142bdc0 100644 --- a/services/web/frontend/stories/ui/form/form-textarea.stories.tsx +++ b/services/web/frontend/stories/shared/form/form-textarea.stories.tsx @@ -3,10 +3,16 @@ import type { Meta, StoryObj } from '@storybook/react' import FormGroup from '@/shared/components/form/form-group' import FormText from '@/shared/components/form/form-text' import FormControl from '@/shared/components/form/form-control' +import { figmaDesignUrl } from '../../../../.storybook/utils/figma-design-url' const meta: Meta> = { title: 'Shared / Components / Form / Textarea', component: FormControl, + parameters: { + controls: { + include: ['disabled'], + }, + }, } export default meta @@ -50,6 +56,9 @@ export const Default: Story = { Default.args = { disabled: false, } +Default.parameters = figmaDesignUrl( + 'https://www.figma.com/design/V7Ogph1Ocs4ux2A4WMNAh7/Overleaf---Components?node-id=3489-176397&m=dev' +) export const Info: Story = { render: args => { @@ -92,6 +101,9 @@ export const Info: Story = { ) }, + args: { + disabled: false, + }, } export const Error: Story = { @@ -138,7 +150,13 @@ export const Error: Story = { ) }, + args: { + disabled: false, + }, } +Error.parameters = figmaDesignUrl( + 'https://www.figma.com/design/V7Ogph1Ocs4ux2A4WMNAh7/Overleaf---Components?node-id=3489-176403&m=dev' +) export const Warning: Story = { render: args => { @@ -181,7 +199,13 @@ export const Warning: Story = { ) }, + args: { + disabled: false, + }, } +Warning.parameters = figmaDesignUrl( + 'https://www.figma.com/design/V7Ogph1Ocs4ux2A4WMNAh7/Overleaf---Components?node-id=3489-176403&m=dev' +) export const Success: Story = { render: args => { @@ -224,4 +248,10 @@ export const Success: Story = { ) }, + args: { + disabled: false, + }, } +Success.parameters = figmaDesignUrl( + 'https://www.figma.com/design/V7Ogph1Ocs4ux2A4WMNAh7/Overleaf---Components?node-id=3489-176403&m=dev' +) diff --git a/services/web/frontend/stories/ui/icon-button.stories.tsx b/services/web/frontend/stories/shared/icon-button.stories.tsx similarity index 79% rename from services/web/frontend/stories/ui/icon-button.stories.tsx rename to services/web/frontend/stories/shared/icon-button.stories.tsx index 0124c6ad89..8ffae05dd7 100644 --- a/services/web/frontend/stories/ui/icon-button.stories.tsx +++ b/services/web/frontend/stories/shared/icon-button.stories.tsx @@ -1,6 +1,7 @@ import IconButton from '@/shared/components/button/icon-button' import type { Meta } from '@storybook/react' import { useTranslation } from 'react-i18next' +import { figmaDesignUrl } from '../../../.storybook/utils/figma-design-url' type Args = React.ComponentProps @@ -35,6 +36,9 @@ const meta: Meta = { ], }, }, + parameters: figmaDesignUrl( + 'https://www.figma.com/design/V7Ogph1Ocs4ux2A4WMNAh7/Overleaf---Components?node-id=3460-168934&m=dev' + ), } export default meta diff --git a/services/web/frontend/stories/shared/input-switch.stories.tsx b/services/web/frontend/stories/shared/input-switch.stories.tsx new file mode 100644 index 0000000000..b23826f75f --- /dev/null +++ b/services/web/frontend/stories/shared/input-switch.stories.tsx @@ -0,0 +1,37 @@ +import OLFormSwitch from '@/shared/components/ol/ol-form-switch' +import { figmaDesignUrl } from '../../../.storybook/utils/figma-design-url' + +type Args = React.ComponentProps + +export const Unchecked = (args: Args) => { + return {}} checked={false} {...args} /> +} + +export const UncheckedDisabled = (args: Args) => { + return {}} checked={false} disabled {...args} /> +} + +export const Checked = (args: Args) => { + return {}} checked {...args} /> +} + +export const CheckedDisabled = (args: Args) => { + return {}} checked disabled {...args} /> +} + +export default { + title: 'Shared / Components / Input Switch', + component: OLFormSwitch, + args: { + checked: false, + disabled: false, + }, + parameters: { + controls: { + include: ['checked', 'disabled'], + }, + ...figmaDesignUrl( + 'https://www.figma.com/design/V7Ogph1Ocs4ux2A4WMNAh7/Overleaf---Components?node-id=3489-139487&m=dev' + ), + }, +} diff --git a/services/web/frontend/stories/labeled-divider.stories.tsx b/services/web/frontend/stories/shared/labeled-divider.stories.tsx similarity index 100% rename from services/web/frontend/stories/labeled-divider.stories.tsx rename to services/web/frontend/stories/shared/labeled-divider.stories.tsx diff --git a/services/web/frontend/stories/shared/loading-spinner.stories.tsx b/services/web/frontend/stories/shared/loading-spinner.stories.tsx new file mode 100644 index 0000000000..50b4f7aef7 --- /dev/null +++ b/services/web/frontend/stories/shared/loading-spinner.stories.tsx @@ -0,0 +1,55 @@ +import type { Meta, StoryObj } from '@storybook/react' +import LoadingSpinner, { + FullSizeLoadingSpinner, +} from '@/shared/components/loading-spinner' + +type Story = StoryObj + +export const Default: Story = { + args: { + loadingText: 'Loading content...', + }, +} + +export const WithDelay: Story = { + args: { + delay: 500, + loadingText: 'This will appear after a 500ms delay...', + }, +} + +export const FullSize: StoryObj = { + render: args => , + args: { + loadingText: 'Loading entire section...', + size: 'sm', + }, +} + +const meta: Meta = { + title: 'Shared / Components / Loading Spinner', + component: LoadingSpinner, + parameters: { + layout: 'centered', + controls: { + include: ['loadingText', 'delay', 'size'], + }, + }, + argTypes: { + delay: { + control: 'select', + options: [0, 500], + }, + size: { + control: 'radio', + options: ['lg', 'sm'], + }, + }, + args: { + size: 'sm', + delay: 0, + }, + render: args => , +} + +export default meta diff --git a/services/web/frontend/stories/menu-bar.stories.tsx b/services/web/frontend/stories/shared/menu-bar.stories.tsx similarity index 100% rename from services/web/frontend/stories/menu-bar.stories.tsx rename to services/web/frontend/stories/shared/menu-bar.stories.tsx diff --git a/services/web/frontend/stories/modals/modal.stories.tsx b/services/web/frontend/stories/shared/modal.stories.tsx similarity index 93% rename from services/web/frontend/stories/modals/modal.stories.tsx rename to services/web/frontend/stories/shared/modal.stories.tsx index b31e9acc1b..27dc41e0c5 100644 --- a/services/web/frontend/stories/modals/modal.stories.tsx +++ b/services/web/frontend/stories/shared/modal.stories.tsx @@ -1,5 +1,5 @@ import type { Meta, StoryObj } from '@storybook/react' -import { figmaDesignUrl } from './../../../.storybook/utils/figma-design-url' +import { figmaDesignUrl } from '../../../.storybook/utils/figma-design-url' import OLModal, { OLModalHeader, OLModalBody, @@ -81,14 +81,16 @@ export const Danger: Story = { const meta: Meta = { title: 'Shared / Components / Modal', component: OLModal, + parameters: { + controls: { + include: ['size', 'title'], + }, + }, argTypes: { size: { control: 'radio', options: ['lg', 'md', 'sm'], }, - title: { control: 'text' }, - children: { control: false }, - footer: { control: false }, }, args: { show: true, diff --git a/services/web/frontend/stories/notification.stories.tsx b/services/web/frontend/stories/shared/notification.stories.tsx similarity index 83% rename from services/web/frontend/stories/notification.stories.tsx rename to services/web/frontend/stories/shared/notification.stories.tsx index ab712c2f03..459f0f5138 100644 --- a/services/web/frontend/stories/notification.stories.tsx +++ b/services/web/frontend/stories/shared/notification.stories.tsx @@ -1,25 +1,38 @@ import fetchMock from 'fetch-mock' -import Notification from '../js/shared/components/notification' -import { postJSON } from '../js/infrastructure/fetch-json' -import useAsync from '../js/shared/hooks/use-async' +import Notification from '../../js/shared/components/notification' +import { postJSON } from '../../js/infrastructure/fetch-json' +import useAsync from '../../js/shared/hooks/use-async' +import { figmaDesignUrl } from '../../../.storybook/utils/figma-design-url' type Args = React.ComponentProps export const NotificationInfo = (args: Args) => { return } +NotificationInfo.parameters = figmaDesignUrl( + 'https://www.figma.com/design/V7Ogph1Ocs4ux2A4WMNAh7/Overleaf---Components?node-id=3488-103958&m=dev' +) export const NotificationSuccess = (args: Args) => { return } +NotificationSuccess.parameters = figmaDesignUrl( + 'https://www.figma.com/design/V7Ogph1Ocs4ux2A4WMNAh7/Overleaf---Components?node-id=3489-110077&m=dev' +) export const NotificationWarning = (args: Args) => { return } +NotificationWarning.parameters = figmaDesignUrl( + 'https://www.figma.com/design/V7Ogph1Ocs4ux2A4WMNAh7/Overleaf---Components?node-id=3489-112036&m=dev' +) export const NotificationError = (args: Args) => { return } +NotificationError.parameters = figmaDesignUrl( + 'https://www.figma.com/design/V7Ogph1Ocs4ux2A4WMNAh7/Overleaf---Components?node-id=3489-112059&m=dev' +) export const NotificationOffer = (args: Args) => { return @@ -43,18 +56,30 @@ export const NotificationWithActionBelowContent = (args: Args) => { /> ) } +NotificationWithActionBelowContent.parameters = figmaDesignUrl( + 'https://www.figma.com/design/V7Ogph1Ocs4ux2A4WMNAh7/Overleaf---Components?node-id=3489-118816&m=dev' +) export const NotificationWithTitle = (args: Args) => { return } +NotificationWithTitle.parameters = figmaDesignUrl( + 'https://www.figma.com/design/V7Ogph1Ocs4ux2A4WMNAh7/Overleaf---Components?node-id=3489-115045&m=dev' +) export const NotificationWithAction = (args: Args) => { return } +NotificationWithAction.parameters = figmaDesignUrl( + 'https://www.figma.com/design/V7Ogph1Ocs4ux2A4WMNAh7/Overleaf---Components?node-id=3489-117190&m=dev' +) export const NotificationDismissible = (args: Args) => { return } +NotificationDismissible.parameters = figmaDesignUrl( + 'https://www.figma.com/design/V7Ogph1Ocs4ux2A4WMNAh7/Overleaf---Components?node-id=3489-116677&m=dev' +) export const APlainNotification = (args: Args) => { return @@ -383,5 +408,30 @@ export default { ), action: , isDismissible: true, + title: undefined, + }, + argTypes: { + content: { + control: 'text', + }, + action: { + control: 'text', + }, + title: { + control: 'text', + }, + }, + parameters: { + controls: { + include: [ + 'content', + 'title', + 'action', + 'ariaLive', + 'type', + 'isDismissible', + 'isActionBelowContent', + ], + }, }, } diff --git a/services/web/frontend/stories/pagination.stories.jsx b/services/web/frontend/stories/shared/pagination.stories.jsx similarity index 71% rename from services/web/frontend/stories/pagination.stories.jsx rename to services/web/frontend/stories/shared/pagination.stories.jsx index 67d32738c8..75b365fa24 100644 --- a/services/web/frontend/stories/pagination.stories.jsx +++ b/services/web/frontend/stories/shared/pagination.stories.jsx @@ -1,4 +1,4 @@ -import Pagination from '../js/shared/components/pagination' +import Pagination from '../../js/shared/components/pagination' export const Interactive = args => { return @@ -14,6 +14,10 @@ export default { }, argTypes: { currentPage: { control: { type: 'number', min: 1, max: 10, step: 1 } }, - totalPages: { control: { disable: true } }, + }, + parameters: { + controls: { + include: ['currentPage'], + }, }, } diff --git a/services/web/frontend/stories/radio-chip.stories.tsx b/services/web/frontend/stories/shared/radio-chip.stories.tsx similarity index 63% rename from services/web/frontend/stories/radio-chip.stories.tsx rename to services/web/frontend/stories/shared/radio-chip.stories.tsx index f1d118f980..a782363faf 100644 --- a/services/web/frontend/stories/radio-chip.stories.tsx +++ b/services/web/frontend/stories/shared/radio-chip.stories.tsx @@ -1,4 +1,4 @@ -import RadioChip from '../js/shared/components/radio-chip' +import RadioChip from '../../js/shared/components/radio-chip' type Args = React.ComponentProps @@ -19,5 +19,17 @@ export default { component: RadioChip, args: { label: 'Option', + checked: false, + disabled: false, + }, + argTypes: { + label: { + control: 'text', + }, + }, + parameters: { + controls: { + include: ['label', 'checked', 'disabled', 'name', 'value'], + }, }, } diff --git a/services/web/frontend/stories/ui/row.stories.tsx b/services/web/frontend/stories/shared/row.stories.tsx similarity index 100% rename from services/web/frontend/stories/ui/row.stories.tsx rename to services/web/frontend/stories/shared/row.stories.tsx diff --git a/services/web/frontend/stories/select.stories.tsx b/services/web/frontend/stories/shared/select.stories.tsx similarity index 83% rename from services/web/frontend/stories/select.stories.tsx rename to services/web/frontend/stories/shared/select.stories.tsx index ed4162fee1..f31a99aa11 100644 --- a/services/web/frontend/stories/select.stories.tsx +++ b/services/web/frontend/stories/shared/select.stories.tsx @@ -1,4 +1,4 @@ -import { Select } from '../js/shared/components/select' +import { Select } from '../../js/shared/components/select' const items = [1, 2, 3, 4].map(index => ({ key: index, @@ -12,7 +12,6 @@ export const Base = () => { items={items} itemToString={x => String(x?.value)} itemToKey={x => String(x.key)} - defaultText="Choose an item" /> ) } @@ -24,7 +23,6 @@ export const WithSubtitles = () => { itemToString={x => String(x?.value)} itemToKey={x => String(x.key)} itemToSubtitle={x => x?.group ?? ''} - defaultText="Choose an item" /> ) } @@ -36,7 +34,6 @@ export const WithSelectedIcon = () => { itemToString={x => String(x?.value)} itemToKey={x => String(x.key)} itemToSubtitle={x => x?.group ?? ''} - defaultText="Choose an item" selectedIcon /> ) @@ -50,7 +47,6 @@ export const WithDisabledItem = () => { itemToKey={x => String(x.key)} itemToDisabled={x => x?.key === 1} itemToSubtitle={x => x?.group ?? ''} - defaultText="Choose an item" /> ) } @@ -58,4 +54,13 @@ export const WithDisabledItem = () => { export default { title: 'Shared / Components / Select', component: Select, + parameters: { + controls: { + include: ['disabled', 'defaultText'], + }, + }, + args: { + disabled: false, + defaultText: 'Choose an item', + }, } diff --git a/services/web/frontend/stories/ui/split-button.stories.tsx b/services/web/frontend/stories/shared/split-button.stories.tsx similarity index 88% rename from services/web/frontend/stories/ui/split-button.stories.tsx rename to services/web/frontend/stories/shared/split-button.stories.tsx index 101b152715..ae9bec9b47 100644 --- a/services/web/frontend/stories/ui/split-button.stories.tsx +++ b/services/web/frontend/stories/shared/split-button.stories.tsx @@ -10,6 +10,7 @@ import { } from '@/shared/components/dropdown/dropdown-menu' import Button from '@/shared/components/button/button' import { ButtonGroup } from 'react-bootstrap' +import { figmaDesignUrl } from '../../../.storybook/utils/figma-design-url' export const Sizes = () => { const { t } = useTranslation() @@ -54,6 +55,9 @@ const meta: Meta = { args: { align: { sm: 'start' }, }, + parameters: figmaDesignUrl( + 'https://www.figma.com/design/V7Ogph1Ocs4ux2A4WMNAh7/Overleaf---Components?node-id=3460-194077&m=dev' + ), } export default meta diff --git a/services/web/frontend/stories/shared/split-test-badge.stories.tsx b/services/web/frontend/stories/shared/split-test-badge.stories.tsx new file mode 100644 index 0000000000..d52a5c6dff --- /dev/null +++ b/services/web/frontend/stories/shared/split-test-badge.stories.tsx @@ -0,0 +1,151 @@ +import type { Meta, StoryObj } from '@storybook/react' +import SplitTestBadge from '../../js/shared/components/split-test-badge' +import { SplitTestContext } from '../../js/shared/context/split-test-context' + +type Story = StoryObj + +const splitTestContextValue = { + splitTestVariants: {} as Record, + splitTestInfo: {} as Record, +} + +export const Alpha: Story = { + render: args => { + splitTestContextValue.splitTestVariants = { + 'storybook-test': 'active', + } + splitTestContextValue.splitTestInfo = { + 'storybook-test': { + phase: 'alpha', + badgeInfo: { + url: '/alpha/participate', + tooltipText: 'This is an alpha feature', + }, + }, + } + + return + }, +} + +export const AlphaNotDisplayed: Story = { + render: args => { + splitTestContextValue.splitTestVariants = { + 'storybook-test': 'default', + } + splitTestContextValue.splitTestInfo = { + 'storybook-test': { + phase: 'alpha', + badgeInfo: { + url: '/alpha/participate', + tooltipText: 'This is an alpha feature', + }, + }, + } + + return + }, +} + +export const Beta: Story = { + render: args => { + splitTestContextValue.splitTestVariants = { + 'storybook-test': 'active', + } + splitTestContextValue.splitTestInfo = { + 'storybook-test': { + phase: 'beta', + badgeInfo: { + url: '/beta/participate', + tooltipText: 'This is a beta feature', + }, + }, + } + + return + }, +} + +export const BetaNotDisplayed: Story = { + render: args => { + splitTestContextValue.splitTestVariants = { + 'storybook-test': 'default', + } + splitTestContextValue.splitTestInfo = { + 'storybook-test': { + phase: 'beta', + badgeInfo: { + url: '/beta/participate', + tooltipText: 'This is a beta feature', + }, + }, + } + + return + }, +} + +export const Release: Story = { + render: args => { + splitTestContextValue.splitTestVariants = { + 'storybook-test': 'active', + } + splitTestContextValue.splitTestInfo = { + 'storybook-test': { + phase: 'release', + badgeInfo: { + url: '/feedback/form', + tooltipText: 'This is a new feature', + }, + }, + } + + return + }, +} + +export const ReleaseNotDisplayed: Story = { + render: args => { + splitTestContextValue.splitTestVariants = { + 'storybook-test': 'default', + } + splitTestContextValue.splitTestInfo = { + 'storybook-test': { + phase: 'release', + badgeInfo: { + url: '/feedback/form', + tooltipText: 'This is a new feature', + }, + }, + } + + return + }, +} + +const meta: Meta = { + title: 'Shared / Components / Split Test Badge', + component: SplitTestBadge, + parameters: { + controls: { + include: ['splitTestName', 'tooltip'], + }, + }, + argTypes: { + splitTestName: { control: 'text' }, + tooltip: { control: 'text' }, + }, + args: { + splitTestName: 'storybook-test', + displayOnVariants: ['active'], + }, + decorators: [ + Story => ( + + + + ), + ], +} + +export default meta diff --git a/services/web/frontend/stories/shared/start-free-trial-button.stories.tsx b/services/web/frontend/stories/shared/start-free-trial-button.stories.tsx new file mode 100644 index 0000000000..7819b53c4d --- /dev/null +++ b/services/web/frontend/stories/shared/start-free-trial-button.stories.tsx @@ -0,0 +1,86 @@ +import type { Meta, StoryObj } from '@storybook/react' +import StartFreeTrialButton from '../../js/shared/components/start-free-trial-button' +import type { ButtonProps } from '../../js/shared/components/types/button-props' + +type Args = React.ComponentProps & { + size?: ButtonProps['size'] +} + +type Story = StoryObj + +export const Default: Story = { + render: args => { + const { size, ...startFreeTrialProps } = args + return ( + + ) + }, +} + +export const CustomText: Story = { + render: args => { + const { size, ...startFreeTrialProps } = args + return ( + + Some Custom Text! + + ) + }, +} + +export const ButtonStyle: Story = { + render: args => { + const { size: _size, ...startFreeTrialProps } = args + return ( + + ) + }, +} + +const meta: Meta = { + title: 'Shared / Components / Start Free Trial Button', + component: StartFreeTrialButton, + parameters: { + controls: { + include: ['source', 'variant', 'children', 'size'], + }, + }, + argTypes: { + source: { control: 'text' }, + buttonProps: { control: false }, + children: { control: 'text' }, + size: { + control: 'radio', + options: ['lg', 'md', 'sm'], + }, + variant: { + control: 'radio', + options: [ + 'primary', + 'secondary', + 'ghost', + 'danger', + 'danger-ghost', + 'premium', + 'premium-secondary', + 'link', + ], + }, + handleClick: { control: false }, + segmentation: { control: false }, + extraSearchParams: { control: false }, + }, + args: { + source: 'storybook', + variant: 'secondary', + size: undefined, + }, +} + +export default meta diff --git a/services/web/frontend/stories/ui/tag.stories.tsx b/services/web/frontend/stories/shared/tag.stories.tsx similarity index 65% rename from services/web/frontend/stories/ui/tag.stories.tsx rename to services/web/frontend/stories/shared/tag.stories.tsx index 100f03a583..fdf053abab 100644 --- a/services/web/frontend/stories/ui/tag.stories.tsx +++ b/services/web/frontend/stories/shared/tag.stories.tsx @@ -1,6 +1,7 @@ import OLTagIcon from '@/shared/components/ol/ol-tag-icon' import Tag from '@/shared/components/tag' import type { Meta, StoryObj } from '@storybook/react' +import { figmaDesignUrl } from '../../../.storybook/utils/figma-design-url' const meta: Meta = { title: 'Shared / Components / Tag', @@ -30,19 +31,25 @@ export default meta type Story = StoryObj -export const TagDefault: Story = { +export const Default: Story = { render: args => { return }, } +Default.parameters = figmaDesignUrl( + 'https://www.figma.com/design/V7Ogph1Ocs4ux2A4WMNAh7/Overleaf---Components?node-id=3460-244790&m=dev' +) -export const TagPrepend: Story = { +export const Prepend: Story = { render: args => { return } {...args} /> }, } +Prepend.parameters = figmaDesignUrl( + 'https://www.figma.com/design/V7Ogph1Ocs4ux2A4WMNAh7/Overleaf---Components?node-id=3460-245386&m=dev' +) -export const TagWithCloseButton: Story = { +export const Removable: Story = { render: args => { return ( { return ( { +export const Default = () => { return ( { export default { title: 'Shared / Components / Toggle Button Group', component: OLToggleButtonGroup, + parameters: figmaDesignUrl( + 'https://www.figma.com/design/V7Ogph1Ocs4ux2A4WMNAh7/Overleaf---Components?node-id=3460-191910&m=dev' + ), } diff --git a/services/web/frontend/stories/ui/tooltip.stories.tsx b/services/web/frontend/stories/shared/tooltip.stories.tsx similarity index 81% rename from services/web/frontend/stories/ui/tooltip.stories.tsx rename to services/web/frontend/stories/shared/tooltip.stories.tsx index 7458fbce2b..3bc6190d7f 100644 --- a/services/web/frontend/stories/ui/tooltip.stories.tsx +++ b/services/web/frontend/stories/shared/tooltip.stories.tsx @@ -1,6 +1,7 @@ import OLButton from '@/shared/components/ol/ol-button' import OLTooltip from '@/shared/components/ol/ol-tooltip' import { Meta } from '@storybook/react' +import { figmaDesignUrl } from '../../../.storybook/utils/figma-design-url' export const Tooltips = () => { const placements = ['top', 'right', 'bottom', 'left'] as const @@ -33,6 +34,9 @@ export const Tooltips = () => { const meta: Meta = { title: 'Shared / Components / Tooltip', component: OLTooltip, + parameters: figmaDesignUrl( + 'https://www.figma.com/design/V7Ogph1Ocs4ux2A4WMNAh7/Overleaf---Components?node-id=3460-237285&m=dev' + ), } export default meta diff --git a/services/web/frontend/stories/upgrade-prompt.stories.tsx b/services/web/frontend/stories/shared/upgrade-prompt.stories.tsx similarity index 100% rename from services/web/frontend/stories/upgrade-prompt.stories.tsx rename to services/web/frontend/stories/shared/upgrade-prompt.stories.tsx diff --git a/services/web/frontend/stories/split-test-badge.stories.jsx b/services/web/frontend/stories/split-test-badge.stories.jsx deleted file mode 100644 index 331263e0cb..0000000000 --- a/services/web/frontend/stories/split-test-badge.stories.jsx +++ /dev/null @@ -1,137 +0,0 @@ -import SplitTestBadge from '../js/shared/components/split-test-badge' -import { ScopeDecorator } from './decorators/scope' -import { SplitTestContext } from '../js/shared/context/split-test-context' - -const splitTestContextValue = { - splitTestVariants: { - 'storybook-test': 'active', - }, - splitTestInfo: { - 'storybook-test': { - phase: 'alpha', - badgeInfo: { - url: '/alpha/participate', - tooltipText: 'This is an alpha feature', - }, - }, - }, -} - -export const Alpha = args => { - splitTestContextValue.splitTestVariants = { - 'storybook-test': 'active', - } - splitTestContextValue.splitTestInfo = { - 'storybook-test': { - phase: 'alpha', - badgeInfo: { - url: '/alpha/participate', - tooltipText: 'This is an alpha feature', - }, - }, - } - - return -} - -export const AlphaNotDisplayed = args => { - splitTestContextValue.splitTestVariants = { - 'storybook-test': 'default', - } - splitTestContextValue.splitTestInfo = { - 'storybook-test': { - phase: 'alpha', - badgeInfo: { - url: '/alpha/participate', - tooltipText: 'This is an alpha feature', - }, - }, - } - - return -} - -export const Beta = args => { - splitTestContextValue.splitTestVariants = { - 'storybook-test': 'active', - } - splitTestContextValue.splitTestInfo = { - 'storybook-test': { - phase: 'beta', - badgeInfo: { - url: '/beta/participate', - tooltipText: 'This is a beta feature', - }, - }, - } - - return -} - -export const BetaNotDisplayed = args => { - splitTestContextValue.splitTestVariants = { - 'storybook-test': 'default', - } - splitTestContextValue.splitTestInfo = { - 'storybook-test': { - phase: 'beta', - badgeInfo: { - url: '/beta/participate', - tooltipText: 'This is a beta feature', - }, - }, - } - - return -} - -export const Release = args => { - splitTestContextValue.splitTestVariants = { - 'storybook-test': 'active', - } - splitTestContextValue.splitTestInfo = { - 'storybook-test': { - phase: 'release', - badgeInfo: { - url: '/feedback/form', - tooltipText: 'This is a new feature', - }, - }, - } - - return -} - -export const ReleaseNotDisplayed = args => { - splitTestContextValue.splitTestVariants = { - 'storybook-test': 'default', - } - splitTestContextValue.splitTestInfo = { - 'storybook-test': { - phase: 'release', - badgeInfo: { - url: '/feedback/form', - tooltipText: 'This is a new feature', - }, - }, - } - - return -} - -export default { - title: 'Shared / Components / Split Test Badge', - component: SplitTestBadge, - args: { - splitTestName: 'storybook-test', - displayOnVariants: ['active'], - }, - decorators: [ - Story => ( - - - - ), - ScopeDecorator, - ], -} diff --git a/services/web/frontend/stories/start-free-trial-button.stories.jsx b/services/web/frontend/stories/start-free-trial-button.stories.jsx deleted file mode 100644 index 6da53dc4cd..0000000000 --- a/services/web/frontend/stories/start-free-trial-button.stories.jsx +++ /dev/null @@ -1,33 +0,0 @@ -import StartFreeTrialButton from '../js/shared/components/start-free-trial-button' -import { ScopeDecorator } from './decorators/scope' - -export const Default = args => { - return -} - -export const CustomText = args => { - return ( - Some Custom Text! - ) -} - -export const ButtonStyle = args => { - return ( - - ) -} - -export default { - title: 'Shared / Components / Start Free Trial Button', - component: StartFreeTrialButton, - args: { - source: 'storybook', - }, - decorators: [ScopeDecorator], -}