From 115e09c626b21eebad7a072a2794bcd9d115c801 Mon Sep 17 00:00:00 2001 From: Amanda Brown Date: Tue, 10 Oct 2023 12:12:04 -0400 Subject: [PATCH] Docs/add Dialog stories (#3751) * reorganize files into respective folders * revise stories to be default and features * Opted the components into storybook tests * checkpoint: updated tests * chore: clean up lint errors * chore: hopeful test and lint fix * fix duplicate story label * chore: formatting * maybe fix duplicate dialog issue again --- .../ConfirmationDialog.features.stories.tsx} | 49 +----- .../ConfirmationDialog.stories.tsx | 46 ++++++ .../ConfirmationDialog.test.tsx | 4 +- .../ConfirmationDialog.tsx | 0 .../ConfirmationDialog.test.tsx.snap | 0 src/DataTable/ErrorDialog.tsx | 2 +- src/Dialog.stories.tsx | 145 ++++++++++++++++++ .../Dialog.features.stories.tsx} | 41 +---- src/Dialog/Dialog.stories.tsx | 145 ++++++++++++++++++ src/{__tests__ => Dialog}/Dialog.test.tsx | 2 + src/Dialog/Dialog.tsx | 2 + .../Dialog.types.test.tsx} | 4 +- .../__snapshots__/Dialog.test.tsx.snap | 0 src/TreeView/TreeView.tsx | 2 +- src/__tests__/storybook.test.tsx | 2 + src/index.ts | 6 +- 16 files changed, 362 insertions(+), 88 deletions(-) rename src/{stories/ConfirmationDialog.stories.tsx => ConfirmationDialog/ConfirmationDialog.features.stories.tsx} (58%) create mode 100644 src/ConfirmationDialog/ConfirmationDialog.stories.tsx rename src/{__tests__ => ConfirmationDialog}/ConfirmationDialog.test.tsx (97%) rename src/{Dialog => ConfirmationDialog}/ConfirmationDialog.tsx (100%) rename src/{__tests__ => ConfirmationDialog}/__snapshots__/ConfirmationDialog.test.tsx.snap (100%) create mode 100644 src/Dialog.stories.tsx rename src/{stories/Dialog.stories.tsx => Dialog/Dialog.features.stories.tsx} (87%) create mode 100644 src/Dialog/Dialog.stories.tsx rename src/{__tests__ => Dialog}/Dialog.test.tsx (99%) rename src/{__tests__/Dialog2.types.test.tsx => Dialog/Dialog.types.test.tsx} (83%) rename src/{__tests__ => Dialog}/__snapshots__/Dialog.test.tsx.snap (100%) diff --git a/src/stories/ConfirmationDialog.stories.tsx b/src/ConfirmationDialog/ConfirmationDialog.features.stories.tsx similarity index 58% rename from src/stories/ConfirmationDialog.stories.tsx rename to src/ConfirmationDialog/ConfirmationDialog.features.stories.tsx index 6f5668a4b32..b8f4fe78d0f 100644 --- a/src/stories/ConfirmationDialog.stories.tsx +++ b/src/ConfirmationDialog/ConfirmationDialog.features.stories.tsx @@ -1,52 +1,15 @@ -import React, {useState, useRef, useCallback} from 'react' -import {Meta} from '@storybook/react' -import {BaseStyles, Box, ThemeProvider, useTheme} from '..' +import React, {useState, useCallback} from 'react' +import {ComponentMeta} from '@storybook/react' +import {Box, useTheme} from '..' import {Button} from '../Button' import {ActionMenu} from '../ActionMenu' import {ActionList} from '../ActionList' -import {ConfirmationDialog, useConfirm} from '../Dialog/ConfirmationDialog' +import {ConfirmationDialog, useConfirm} from './ConfirmationDialog' export default { - title: 'Components/ConfirmationDialog', + title: 'Components/ConfirmationDialog/Features', component: ConfirmationDialog, - decorators: [ - Story => { - // Since portal roots are registered globally, we need this line so that each storybook - // story works in isolation. - return ( - - - - - - ) - }, - ], -} as Meta - -export const BasicConfirmationDialog = () => { - const [isOpen, setIsOpen] = useState(false) - const buttonRef = useRef(null) - const onDialogClose = useCallback(() => setIsOpen(false), []) - return ( - <> - - {isOpen && ( - - Deleting the universe could have disastrous effects, including but not limited to destroying all life on - Earth. - - )} - - ) -} +} as ComponentMeta export const ShorthandHook = () => { const confirm = useConfirm() diff --git a/src/ConfirmationDialog/ConfirmationDialog.stories.tsx b/src/ConfirmationDialog/ConfirmationDialog.stories.tsx new file mode 100644 index 00000000000..bdc6580e4fa --- /dev/null +++ b/src/ConfirmationDialog/ConfirmationDialog.stories.tsx @@ -0,0 +1,46 @@ +import React, {useCallback, useRef, useState} from 'react' +import {Meta} from '@storybook/react' +import {BaseStyles, Button, ThemeProvider} from '..' +import {ConfirmationDialog} from './ConfirmationDialog' + +export default { + title: 'Components/ConfirmationDialog', + component: ConfirmationDialog, + decorators: [ + Story => { + // Since portal roots are registered globally, we need this line so that each storybook + // story works in isolation. + return ( + + + + + + ) + }, + ], +} as Meta + +export const Default = () => { + const [isOpen, setIsOpen] = useState(false) + const buttonRef = useRef(null) + const onDialogClose = useCallback(() => setIsOpen(false), []) + return ( + <> + + {isOpen && ( + + Deleting the universe could have disastrous effects, including but not limited to destroying all life on + Earth. + + )} + + ) +} diff --git a/src/__tests__/ConfirmationDialog.test.tsx b/src/ConfirmationDialog/ConfirmationDialog.test.tsx similarity index 97% rename from src/__tests__/ConfirmationDialog.test.tsx rename to src/ConfirmationDialog/ConfirmationDialog.test.tsx index 32e604d21a6..057d109576c 100644 --- a/src/__tests__/ConfirmationDialog.test.tsx +++ b/src/ConfirmationDialog/ConfirmationDialog.test.tsx @@ -6,7 +6,7 @@ import {ActionMenu} from '../deprecated/ActionMenu' import BaseStyles from '../BaseStyles' import Box from '../Box' import Button from '../deprecated/Button/Button' -import {ConfirmationDialog, useConfirm} from '../Dialog/ConfirmationDialog' +import {ConfirmationDialog, useConfirm} from './ConfirmationDialog' import theme from '../theme' import {ThemeProvider} from '../ThemeProvider' import {SSRProvider} from '../utils/ssr' @@ -80,7 +80,7 @@ describe('ConfirmationDialog', () => { options: {skipAs: true, skipSx: true}, }) - checkExports('Dialog/ConfirmationDialog', { + checkExports('ConfirmationDialog/ConfirmationDialog', { default: undefined, useConfirm, ConfirmationDialog, diff --git a/src/Dialog/ConfirmationDialog.tsx b/src/ConfirmationDialog/ConfirmationDialog.tsx similarity index 100% rename from src/Dialog/ConfirmationDialog.tsx rename to src/ConfirmationDialog/ConfirmationDialog.tsx diff --git a/src/__tests__/__snapshots__/ConfirmationDialog.test.tsx.snap b/src/ConfirmationDialog/__snapshots__/ConfirmationDialog.test.tsx.snap similarity index 100% rename from src/__tests__/__snapshots__/ConfirmationDialog.test.tsx.snap rename to src/ConfirmationDialog/__snapshots__/ConfirmationDialog.test.tsx.snap diff --git a/src/DataTable/ErrorDialog.tsx b/src/DataTable/ErrorDialog.tsx index 2ff534249b4..5a379fea87f 100644 --- a/src/DataTable/ErrorDialog.tsx +++ b/src/DataTable/ErrorDialog.tsx @@ -1,5 +1,5 @@ import React from 'react' -import {ConfirmationDialog} from '../Dialog/ConfirmationDialog' +import {ConfirmationDialog} from '../ConfirmationDialog/ConfirmationDialog' export type TableErrorDialogProps = React.PropsWithChildren<{ /** diff --git a/src/Dialog.stories.tsx b/src/Dialog.stories.tsx new file mode 100644 index 00000000000..d085e9271fb --- /dev/null +++ b/src/Dialog.stories.tsx @@ -0,0 +1,145 @@ +import React, {useState, useRef, useCallback} from 'react' +import {Meta} from '@storybook/react' + +import {BaseStyles, ThemeProvider} from '.' +import {Button} from './Button' +import {Dialog, DialogWidth, DialogHeight} from './Dialog/Dialog' + +/* Dialog Version 1? */ + +export default { + title: 'Components/DialogV1', + component: Dialog, + decorators: [ + Story => { + // Since portal roots are registered globally, we need this line so that each storybook + // story works in isolation. + return ( + + + + + + ) + }, + ], + args: { + width: 'xlarge', + height: 'auto', + subtitle: true, + }, + argTypes: { + width: { + control: { + type: 'radio', + }, + options: ['small', 'medium', 'large', 'xlarge'], + }, + height: { + control: { + type: 'radio', + }, + options: ['small', 'large', 'auto'], + }, + subtitle: { + name: 'show subtitle', + control: { + type: 'boolean', + }, + }, + title: {table: {disable: true}}, + + renderHeader: {table: {disable: true}}, + renderBody: {table: {disable: true}}, + renderFooter: {table: {disable: true}}, + onClose: {table: {disable: true}}, + role: {table: {disable: true}}, + ref: {table: {disable: true}}, + key: {table: {disable: true}}, + footerButtons: {table: {disable: true}}, + }, +} as Meta + +const lipsum = ( +
+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sollicitudin mauris maximus elit sagittis, nec + lobortis ligula elementum. Nam iaculis, urna nec lobortis posuere, eros urna venenatis eros, vel accumsan turpis + nunc vitae enim. Maecenas et lorem lectus. Vivamus iaculis tortor eget ante placerat, nec posuere nisl tincidunt. + Cras condimentum ante in accumsan ultricies. Morbi quis porta est, sit amet congue augue. Lorem ipsum dolor sit + amet, consectetur adipiscing elit. Ut consequat nunc id quam tempus, id tincidunt neque venenatis. Mauris + fringilla tempor est, vitae fermentum enim elementum vitae. Nullam eleifend odio ut porta efficitur. Phasellus + luctus tempus posuere. +

+ +

+ Curabitur scelerisque bibendum faucibus. Duis rhoncus nunc est, at pharetra eros tristique a. Nam sodales turpis + lectus, quis faucibus felis fermentum in. Curabitur vel velit vel eros laoreet pharetra. Aenean in facilisis + sapien, eu porttitor ex. Donec ultrices ac arcu ut lobortis. Pellentesque vitae rutrum orci. Etiam pretium et enim + sit amet scelerisque. Nulla sed odio nec lorem dapibus condimentum at sagittis quam. Sed in ornare ex, sed luctus + sem. Mauris a est tellus. +

+ +

+ Sed fringilla est ac urna aliquet, eget condimentum felis vulputate. Sed sagittis eros non mauris sodales + molestie. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nullam ante leo, + condimentum sed lectus non, rutrum octopodes urna. Mauris neque ante, interdum molestie tellus pharetra, eleifend + dapibus justo. Sed at diam ligula. Donec dapibus ipsum quis elit euismod, sed suscipit eros euismod. Aliquam + pretium felis quis risus luctus fringilla. Ut purus lacus, mattis a turpis eget, sollicitudin pellentesque neque. +

+ +

+ Nunc sodales quis ante quis porttitor. Vestibulum ornare lacinia ante. Donec a nisi nec arcu aliquam pretium in + nec nunc. Donec fringilla erat vitae viverra feugiat. Sed non odio vel ipsum porttitor maximus. Donec id eleifend + lectus. Proin varius felis sit amet neque eleifend, vitae porttitor ligula commodo. +

+ +

+ Vivamus felis quam, porttitor a justo sit amet, placerat ultricies nisl. Suspendisse potenti. Maecenas non + consequat lorem, eu porta ante. Pellentesque elementum diam sapien, nec ultrices risus convallis eget. Nam + pharetra dolor at dictum tempor. Quisque ut est a ligula hendrerit sodales. Curabitur ornare a nulla in laoreet. + Maecenas semper mi egestas, dignissim nisi et, elementum neque. +

+
+) +interface DialogStoryProps { + width: DialogWidth + height: DialogHeight + subtitle: boolean +} +export const Default = ({width, height, subtitle}: DialogStoryProps) => { + const [isOpen, setIsOpen] = useState(false) + const [secondOpen, setSecondOpen] = useState(false) + const buttonRef = useRef(null) + const onDialogClose = useCallback(() => setIsOpen(false), []) + const onSecondDialogClose = useCallback(() => setSecondOpen(false), []) + const openSecondDialog = useCallback(() => setSecondOpen(true), []) + return ( + <> + + {isOpen && ( + + {lipsum} + {secondOpen && ( + + Hello world + + )} + + )} + + ) +} diff --git a/src/stories/Dialog.stories.tsx b/src/Dialog/Dialog.features.stories.tsx similarity index 87% rename from src/stories/Dialog.stories.tsx rename to src/Dialog/Dialog.features.stories.tsx index 95cabc04649..33331260526 100644 --- a/src/stories/Dialog.stories.tsx +++ b/src/Dialog/Dialog.features.stories.tsx @@ -3,10 +3,12 @@ import {Meta} from '@storybook/react' import {BaseStyles, ThemeProvider, Box, TextInput} from '..' import {Button} from '../Button' -import {Dialog, DialogProps, DialogWidth, DialogHeight} from '../Dialog/Dialog' +import {Dialog, DialogProps, DialogWidth, DialogHeight} from './Dialog' + +/* Dialog Version 2 */ export default { - title: 'Components/Dialog', + title: 'Components/Dialog/Features', component: Dialog, decorators: [ Story => { @@ -105,41 +107,6 @@ interface DialogStoryProps { height: DialogHeight subtitle: boolean } -export const BasicDialog = ({width, height, subtitle}: DialogStoryProps) => { - const [isOpen, setIsOpen] = useState(false) - const [secondOpen, setSecondOpen] = useState(false) - const buttonRef = useRef(null) - const onDialogClose = useCallback(() => setIsOpen(false), []) - const onSecondDialogClose = useCallback(() => setSecondOpen(false), []) - const openSecondDialog = useCallback(() => setSecondOpen(true), []) - return ( - <> - - {isOpen && ( - - {lipsum} - {secondOpen && ( - - Hello world - - )} - - )} - - ) -} function CustomHeader({ title, diff --git a/src/Dialog/Dialog.stories.tsx b/src/Dialog/Dialog.stories.tsx new file mode 100644 index 00000000000..87d4cc7e60e --- /dev/null +++ b/src/Dialog/Dialog.stories.tsx @@ -0,0 +1,145 @@ +import React, {useState, useRef, useCallback} from 'react' +import {Meta} from '@storybook/react' + +import {BaseStyles, ThemeProvider} from '..' +import {Button} from '../Button' +import {Dialog, DialogWidth, DialogHeight} from './Dialog' + +/* Dialog Version 2 */ + +export default { + title: 'Components/Dialog', + component: Dialog, + decorators: [ + Story => { + // Since portal roots are registered globally, we need this line so that each storybook + // story works in isolation. + return ( + + + + + + ) + }, + ], + args: { + width: 'xlarge', + height: 'auto', + subtitle: true, + }, + argTypes: { + width: { + control: { + type: 'radio', + }, + options: ['small', 'medium', 'large', 'xlarge'], + }, + height: { + control: { + type: 'radio', + }, + options: ['small', 'large', 'auto'], + }, + subtitle: { + name: 'show subtitle', + control: { + type: 'boolean', + }, + }, + title: {table: {disable: true}}, + + renderHeader: {table: {disable: true}}, + renderBody: {table: {disable: true}}, + renderFooter: {table: {disable: true}}, + onClose: {table: {disable: true}}, + role: {table: {disable: true}}, + ref: {table: {disable: true}}, + key: {table: {disable: true}}, + footerButtons: {table: {disable: true}}, + }, +} as Meta + +const lipsum = ( +
+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sollicitudin mauris maximus elit sagittis, nec + lobortis ligula elementum. Nam iaculis, urna nec lobortis posuere, eros urna venenatis eros, vel accumsan turpis + nunc vitae enim. Maecenas et lorem lectus. Vivamus iaculis tortor eget ante placerat, nec posuere nisl tincidunt. + Cras condimentum ante in accumsan ultricies. Morbi quis porta est, sit amet congue augue. Lorem ipsum dolor sit + amet, consectetur adipiscing elit. Ut consequat nunc id quam tempus, id tincidunt neque venenatis. Mauris + fringilla tempor est, vitae fermentum enim elementum vitae. Nullam eleifend odio ut porta efficitur. Phasellus + luctus tempus posuere. +

+ +

+ Curabitur scelerisque bibendum faucibus. Duis rhoncus nunc est, at pharetra eros tristique a. Nam sodales turpis + lectus, quis faucibus felis fermentum in. Curabitur vel velit vel eros laoreet pharetra. Aenean in facilisis + sapien, eu porttitor ex. Donec ultrices ac arcu ut lobortis. Pellentesque vitae rutrum orci. Etiam pretium et enim + sit amet scelerisque. Nulla sed odio nec lorem dapibus condimentum at sagittis quam. Sed in ornare ex, sed luctus + sem. Mauris a est tellus. +

+ +

+ Sed fringilla est ac urna aliquet, eget condimentum felis vulputate. Sed sagittis eros non mauris sodales + molestie. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nullam ante leo, + condimentum sed lectus non, rutrum octopodes urna. Mauris neque ante, interdum molestie tellus pharetra, eleifend + dapibus justo. Sed at diam ligula. Donec dapibus ipsum quis elit euismod, sed suscipit eros euismod. Aliquam + pretium felis quis risus luctus fringilla. Ut purus lacus, mattis a turpis eget, sollicitudin pellentesque neque. +

+ +

+ Nunc sodales quis ante quis porttitor. Vestibulum ornare lacinia ante. Donec a nisi nec arcu aliquam pretium in + nec nunc. Donec fringilla erat vitae viverra feugiat. Sed non odio vel ipsum porttitor maximus. Donec id eleifend + lectus. Proin varius felis sit amet neque eleifend, vitae porttitor ligula commodo. +

+ +

+ Vivamus felis quam, porttitor a justo sit amet, placerat ultricies nisl. Suspendisse potenti. Maecenas non + consequat lorem, eu porta ante. Pellentesque elementum diam sapien, nec ultrices risus convallis eget. Nam + pharetra dolor at dictum tempor. Quisque ut est a ligula hendrerit sodales. Curabitur ornare a nulla in laoreet. + Maecenas semper mi egestas, dignissim nisi et, elementum neque. +

+
+) +interface DialogStoryProps { + width: DialogWidth + height: DialogHeight + subtitle: boolean +} +export const Default = ({width, height, subtitle}: DialogStoryProps) => { + const [isOpen, setIsOpen] = useState(false) + const [secondOpen, setSecondOpen] = useState(false) + const buttonRef = useRef(null) + const onDialogClose = useCallback(() => setIsOpen(false), []) + const onSecondDialogClose = useCallback(() => setSecondOpen(false), []) + const openSecondDialog = useCallback(() => setSecondOpen(true), []) + return ( + <> + + {isOpen && ( + + {lipsum} + {secondOpen && ( + + Hello world + + )} + + )} + + ) +} diff --git a/src/__tests__/Dialog.test.tsx b/src/Dialog/Dialog.test.tsx similarity index 99% rename from src/__tests__/Dialog.test.tsx rename to src/Dialog/Dialog.test.tsx index 3dcfd6d0d57..1d636d591cf 100644 --- a/src/__tests__/Dialog.test.tsx +++ b/src/Dialog/Dialog.test.tsx @@ -6,6 +6,8 @@ import {axe, toHaveNoViolations} from 'jest-axe' import {behavesAsComponent, checkExports} from '../utils/testing' expect.extend(toHaveNoViolations) +/* Dialog Version 2 */ + const comp = ( null} aria-labelledby="header"> Title diff --git a/src/Dialog/Dialog.tsx b/src/Dialog/Dialog.tsx index 10a34974cab..9352ade0402 100644 --- a/src/Dialog/Dialog.tsx +++ b/src/Dialog/Dialog.tsx @@ -14,6 +14,8 @@ import Portal from '../Portal' import {useRefObjectAsForwardedRef} from '../hooks/useRefObjectAsForwardedRef' import {useId} from '../hooks/useId' +/* Dialog Version 2 */ + const ANIMATION_DURATION = '200ms' /** diff --git a/src/__tests__/Dialog2.types.test.tsx b/src/Dialog/Dialog.types.test.tsx similarity index 83% rename from src/__tests__/Dialog2.types.test.tsx rename to src/Dialog/Dialog.types.test.tsx index a5774427458..cae96936386 100644 --- a/src/__tests__/Dialog2.types.test.tsx +++ b/src/Dialog/Dialog.types.test.tsx @@ -1,5 +1,7 @@ import React from 'react' -import {Dialog} from '../Dialog/Dialog' +import {Dialog} from './Dialog' + +/* Dialog Version 2? */ export function shouldAcceptCallWithNoProps() { return null} /> diff --git a/src/__tests__/__snapshots__/Dialog.test.tsx.snap b/src/Dialog/__snapshots__/Dialog.test.tsx.snap similarity index 100% rename from src/__tests__/__snapshots__/Dialog.test.tsx.snap rename to src/Dialog/__snapshots__/Dialog.test.tsx.snap diff --git a/src/TreeView/TreeView.tsx b/src/TreeView/TreeView.tsx index 49cd7295166..d7c19b819a7 100644 --- a/src/TreeView/TreeView.tsx +++ b/src/TreeView/TreeView.tsx @@ -7,7 +7,7 @@ import { import clsx from 'clsx' import React, {useCallback, useEffect} from 'react' import styled, {keyframes} from 'styled-components' -import {ConfirmationDialog} from '../Dialog/ConfirmationDialog' +import {ConfirmationDialog} from '../ConfirmationDialog/ConfirmationDialog' import Spinner from '../Spinner' import Text from '../Text' import VisuallyHidden from '../_VisuallyHidden' diff --git a/src/__tests__/storybook.test.tsx b/src/__tests__/storybook.test.tsx index eaf9ee5f257..66d73f1ad8d 100644 --- a/src/__tests__/storybook.test.tsx +++ b/src/__tests__/storybook.test.tsx @@ -20,9 +20,11 @@ const allowlist = [ 'Button', 'Checkbox', 'CheckboxGroup', + 'ConfirmationDialog', 'CounterLabel', 'DataTable', 'Details', + 'Dialog', 'Flash', 'Header', 'Heading', diff --git a/src/index.ts b/src/index.ts index b3249bcded1..4f722d0486f 100644 --- a/src/index.ts +++ b/src/index.ts @@ -34,7 +34,7 @@ export type {TouchOrMouseEvent} from './hooks/useOnOutsideClick' export {useOpenAndCloseFocus} from './hooks/useOpenAndCloseFocus' export {useOnEscapePress} from './hooks/useOnEscapePress' export {useOverlay} from './hooks/useOverlay' -export {useConfirm} from './Dialog/ConfirmationDialog' +export {useConfirm} from './ConfirmationDialog/ConfirmationDialog' export {useFocusTrap} from './hooks/useFocusTrap' export type {FocusTrapHookSettings} from './hooks/useFocusTrap' export {useFocusZone} from './hooks/useFocusZone' @@ -88,8 +88,8 @@ export {default as Details} from './Details' export type {DetailsProps} from './Details' export {default as Dialog} from './Dialog' export type {DialogProps, DialogHeaderProps} from './Dialog' -export type {ConfirmationDialogProps} from './Dialog/ConfirmationDialog' -export {ConfirmationDialog} from './Dialog/ConfirmationDialog' +export type {ConfirmationDialogProps} from './ConfirmationDialog/ConfirmationDialog' +export {ConfirmationDialog} from './ConfirmationDialog/ConfirmationDialog' export {default as FilteredSearch} from './FilteredSearch' export type {FilteredSearchProps} from './FilteredSearch' export {default as FilterList} from './FilterList'