From 00c0e1ba1d143cc529fc0f65a91aa24912227861 Mon Sep 17 00:00:00 2001 From: Alison Joseph Date: Thu, 10 Nov 2022 13:34:19 -0600 Subject: [PATCH] chore(storybook): remove next folders cleanup (#12587) Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> --- .../next/ContentSwitcher-story.js | 46 --- .../components/ContentSwitcher/next/index.js | 313 ------------------ .../DataTableSkeleton-story.js | 37 --- .../{next => }/DataTableSkeleton.stories.js | 4 +- .../Theme/{next => }/Theme-story.scss | 0 .../src/components/Theme/{next => }/Theme.mdx | 0 .../Theme/{next => }/Theme.stories.js | 4 +- 7 files changed, 4 insertions(+), 400 deletions(-) delete mode 100644 packages/react/src/components/ContentSwitcher/next/ContentSwitcher-story.js delete mode 100644 packages/react/src/components/ContentSwitcher/next/index.js delete mode 100644 packages/react/src/components/DataTableSkeleton/DataTableSkeleton-story.js rename packages/react/src/components/DataTableSkeleton/{next => }/DataTableSkeleton.stories.js (89%) rename packages/react/src/components/Theme/{next => }/Theme-story.scss (100%) rename packages/react/src/components/Theme/{next => }/Theme.mdx (100%) rename packages/react/src/components/Theme/{next => }/Theme.stories.js (96%) diff --git a/packages/react/src/components/ContentSwitcher/next/ContentSwitcher-story.js b/packages/react/src/components/ContentSwitcher/next/ContentSwitcher-story.js deleted file mode 100644 index c0cf8ff5ea84..000000000000 --- a/packages/react/src/components/ContentSwitcher/next/ContentSwitcher-story.js +++ /dev/null @@ -1,46 +0,0 @@ -/** - * Copyright IBM Corp. 2016, 2018 - * - * This source code is licensed under the Apache-2.0 license found in the - * LICENSE file in the root directory of this source tree. - */ - -/* eslint-disable storybook/story-exports */ - -import React from 'react'; -import { - ContentSwitcher, - ContentTabs, - ContentTab, - ContentPanels, - ContentPanel, -} from './'; - -export default { - title: 'Experimental/unstable_ContentSwitcher', - component: ContentSwitcher, - subcomponents: { - ContentTabs, - ContentTab, - ContentPanels, - ContentPanel, - }, - includeStories: [], -}; - -export const Default = () => { - return ( - - - Tab 1 - Tab 2 - Tab 3 - - - Panel 1 - Panel 2 - Panel 3 - - - ); -}; diff --git a/packages/react/src/components/ContentSwitcher/next/index.js b/packages/react/src/components/ContentSwitcher/next/index.js deleted file mode 100644 index 4df9fe28484b..000000000000 --- a/packages/react/src/components/ContentSwitcher/next/index.js +++ /dev/null @@ -1,313 +0,0 @@ -/** - * Copyright IBM Corp. 2016, 2018 - * - * This source code is licensed under the Apache-2.0 license found in the - * LICENSE file in the root directory of this source tree. - */ - -import PropTypes from 'prop-types'; -import React from 'react'; -import cx from 'classnames'; -import { match, matches, keys } from '../../../internal/keyboard'; -import { useId } from '../../../internal/useId'; -import { useControllableState } from '../../../internal/useControllableState'; -import { usePrefix } from '../../../internal/usePrefix'; - -// Used to manage the overall state of the ContentSwitcher -const ContentSwitcherContext = React.createContext(); - -// Used to keep track of position in a tablist -const ContentTabContext = React.createContext(); - -// Used to keep track of position in a list of tab panels -const ContentPanelContext = React.createContext(); - -function ContentSwitcher({ - children, - defaultSelectedIndex = 0, - onChange, - selectedIndex: controlledSelectedIndex, -}) { - const baseId = useId('ccs'); - // The active index is used to track the element which has focus in our tablist - const [activeIndex, setActiveIndex] = React.useState(defaultSelectedIndex); - // The selected index is used for the tab/panel pairing which is "visible" - const [selectedIndex, setSelectedIndex] = useControllableState({ - value: controlledSelectedIndex, - defaultValue: defaultSelectedIndex, - onChange: (value) => { - if (onChange) { - onChange({ selectedIndex: value }); - } - }, - }); - const value = { - baseId, - activeIndex, - setActiveIndex, - selectedIndex, - setSelectedIndex, - }; - - return ( - - {children} - - ); -} - -ContentSwitcher.propTypes = { - /** - * Provide child elements to be rendered inside of the `ContentSwitcher`. - * These elements should render either `ContentTabs` or `ContentPanels` - */ - children: PropTypes.node, - - /** - * Specify which content tab should be initially selected when the component - * is first rendered - */ - defaultSelectedIndex: PropTypes.number, - - /** - * Provide an optional function which is called whenever the state of the - * `ContentSwitcher` changes - */ - onChange: PropTypes.func, - - /** - * Control which content panel is currently selected. This puts the component - * in a controlled mode and should be used along with `onChange` - */ - selectedIndex: PropTypes.number, -}; - -/** - * A `ContentPanel` corresponds to a tablist in the Tabs pattern as written in - * WAI-ARIA Authoring Practices. - * - * @see https://w3c.github.io/aria-practices/#tabpanel - */ -function ContentTabs({ - activation = 'automatic', - 'aria-label': label, - children, - className: customClassName, - size = 'md', - ...rest -}) { - const { activeIndex, selectedIndex, setSelectedIndex, setActiveIndex } = - React.useContext(ContentSwitcherContext); - const ref = React.useRef(null); - const prefix = usePrefix(); - const className = cx(customClassName, `${prefix}--content-switcher`, { - [`${prefix}--content-switcher--${size}`]: size, - }); - const count = React.Children.count(children); - const tabs = []; - - function onKeyDown(event) { - if ( - matches(event, [keys.ArrowRight, keys.ArrowLeft, keys.Home, keys.End]) - ) { - const nextIndex = getNextIndex( - event, - count, - activation === 'automatic' ? selectedIndex : activeIndex - ); - - if (activation === 'automatic') { - setSelectedIndex(nextIndex); - } else if (activation === 'manual') { - setActiveIndex(nextIndex); - } - - tabs[nextIndex].current.focus(); - } - } - - return ( - // eslint-disable-next-line jsx-a11y/interactive-supports-focus -
- {React.Children.map(children, (child, index) => { - const ref = React.createRef(); - tabs.push(ref); - return ( - - {React.cloneElement(child, { - ref, - })} - - ); - })} -
- ); -} - -ContentTabs.propTypes = { - /** - * Specify whether the content tab should be activated automatically or - * manually - */ - activation: PropTypes.oneOf(['automatic', 'manual']), - - /** - * Provide an accessible label to be read when a user interacts with this - * component - */ - 'aria-label': PropTypes.string.isRequired, - - /** - * Provide child elements to be rendered inside of `ContentTabs`. - * These elements should render a `ContentTab` - */ - children: PropTypes.node, - - /** - * Specify an optional className to be added to the container node - */ - className: PropTypes.string, - - /** - * Specify the size of the Content Switcher. Currently supports either `sm`, 'md' (default) or 'lg` as an option. - */ - size: PropTypes.oneOf(['sm', 'md', 'lg']), -}; - -/** - * Get the next index for a givne keyboard event given a count of the total - * items and the current index - * @param {Event} event - * @param {number} total - * @param {number} index - * @returns {number} - */ -function getNextIndex(event, total, index) { - if (match(event, keys.ArrowRight)) { - return (index + 1) % total; - } else if (match(event, keys.ArrowLeft)) { - return (total + index - 1) % total; - } else if (match(event, keys.Home)) { - return 0; - } else if (match(event, keys.End)) { - return total - 1; - } -} - -const ContentTab = React.forwardRef(function ContentTab( - { children, ...rest }, - ref -) { - const { selectedIndex, setSelectedIndex, baseId } = React.useContext( - ContentSwitcherContext - ); - const index = React.useContext(ContentTabContext); - const id = `${baseId}-tab-${index}`; - const panelId = `${baseId}-tabpanel-${index}`; - const prefix = usePrefix(); - const className = cx(`${prefix}--content-switcher-btn`, { - [`${prefix}--content-switcher--selected`]: selectedIndex === index, - }); - - return ( - - ); -}); - -ContentTab.propTypes = { - /** - * Provide child elements to be rendered inside of `ContentTab`. - * These elements must be noninteractive - */ - children: PropTypes.node, -}; - -/** - * Used to display all of the tab panels inside of a Content Switcher. This - * components keeps track of position in for each ContentPanel. - * - * Note: children should either be a `ContentPanel` or should render a - * `ContentPanel`. Fragments are not currently supported. - */ -function ContentPanels({ children }) { - return React.Children.map(children, (child, index) => { - return ( - - {child} - - ); - }); -} - -ContentPanels.propTypes = { - /** - * Provide child elements to be rendered inside of `ContentPanels`. - * These elements should render a `ContentPanel` - */ - children: PropTypes.node, -}; - -/** - * A `ContentPanel` corresponds to a tabpanel in the Tabs pattern as written in - * WAI-ARIA Authoring Practices. This component reads the selected - * index and base id from context in order to determine the correct `id` and - * display status of the component. - * - * @see https://w3c.github.io/aria-practices/#tabpanel - */ -const ContentPanel = React.forwardRef(function ContentPanel(props, ref) { - const { children, ...rest } = props; - const { selectedIndex, baseId } = React.useContext(ContentSwitcherContext); - const index = React.useContext(ContentPanelContext); - const id = `${baseId}-tabpanel-${index}`; - const tabId = `${baseId}-tab-${index}`; - - // TODO: tabindex should only be 0 if no interactive content in children - return ( - - ); -}); - -ContentPanel.propTypes = { - /** - * Provide child elements to be rendered inside of `ContentPanel`. - */ - children: PropTypes.node, -}; - -export { - ContentSwitcher, - ContentTabs, - ContentTab, - ContentPanels, - ContentPanel, -}; diff --git a/packages/react/src/components/DataTableSkeleton/DataTableSkeleton-story.js b/packages/react/src/components/DataTableSkeleton/DataTableSkeleton-story.js deleted file mode 100644 index cf18dfe85cb1..000000000000 --- a/packages/react/src/components/DataTableSkeleton/DataTableSkeleton-story.js +++ /dev/null @@ -1,37 +0,0 @@ -/** - * Copyright IBM Corp. 2016, 2018 - * - * This source code is licensed under the Apache-2.0 license found in the - * LICENSE file in the root directory of this source tree. - */ - -/* eslint-disable no-console */ - -import React from 'react'; -import { withKnobs, boolean } from '@storybook/addon-knobs'; -import DataTableSkeleton from '../DataTableSkeleton'; -import { headers } from '../DataTable/stories/shared'; - -const props = () => ({ - showHeaders: boolean('Show table headers', true), - zebra: boolean('Use zebra stripe (zebra)', false), - compact: boolean('Compact variant (compact)', false), - showHeader: boolean('Show the Table Header (showHeader)', true), - showToolbar: boolean('Show the Table Toolbar (showToolbar)', true), -}); - -export default { - title: 'Components/DataTable/Skeleton', - component: DataTableSkeleton, - decorators: [withKnobs], -}; - -export const Skeleton = () => { - const { showHeaders, ...rest } = props(); - return ( -
- -
-
- ); -}; diff --git a/packages/react/src/components/DataTableSkeleton/next/DataTableSkeleton.stories.js b/packages/react/src/components/DataTableSkeleton/DataTableSkeleton.stories.js similarity index 89% rename from packages/react/src/components/DataTableSkeleton/next/DataTableSkeleton.stories.js rename to packages/react/src/components/DataTableSkeleton/DataTableSkeleton.stories.js index 7af57be95419..de5ad05662a3 100644 --- a/packages/react/src/components/DataTableSkeleton/next/DataTableSkeleton.stories.js +++ b/packages/react/src/components/DataTableSkeleton/DataTableSkeleton.stories.js @@ -9,8 +9,8 @@ import React from 'react'; import { withKnobs, boolean } from '@storybook/addon-knobs'; -import DataTableSkeleton from '../DataTableSkeleton'; -import { headers } from '../../DataTable/stories/shared'; +import DataTableSkeleton from './DataTableSkeleton'; +import { headers } from '../DataTable/stories/shared'; const props = () => ({ showHeaders: boolean('Show table headers', true), diff --git a/packages/react/src/components/Theme/next/Theme-story.scss b/packages/react/src/components/Theme/Theme-story.scss similarity index 100% rename from packages/react/src/components/Theme/next/Theme-story.scss rename to packages/react/src/components/Theme/Theme-story.scss diff --git a/packages/react/src/components/Theme/next/Theme.mdx b/packages/react/src/components/Theme/Theme.mdx similarity index 100% rename from packages/react/src/components/Theme/next/Theme.mdx rename to packages/react/src/components/Theme/Theme.mdx diff --git a/packages/react/src/components/Theme/next/Theme.stories.js b/packages/react/src/components/Theme/Theme.stories.js similarity index 96% rename from packages/react/src/components/Theme/next/Theme.stories.js rename to packages/react/src/components/Theme/Theme.stories.js index b7eef1834e23..1d824b131da5 100644 --- a/packages/react/src/components/Theme/next/Theme.stories.js +++ b/packages/react/src/components/Theme/Theme.stories.js @@ -7,8 +7,8 @@ import './Theme-story.scss'; import React from 'react'; -import { GlobalTheme, Theme, useTheme } from '../../Theme'; -import { Layer } from '../../Layer'; +import { GlobalTheme, Theme, useTheme } from '../Theme'; +import { Layer } from '../Layer'; import mdx from './Theme.mdx'; export default {