From 1e212a4981855c3d716ee38627bbf0bd86d2d637 Mon Sep 17 00:00:00 2001 From: Dmytro Kirpa Date: Thu, 25 Jul 2024 13:17:18 +0200 Subject: [PATCH] chore(react-examples): replace storybook deprecated api with static stories (#32074) --- packages/react-examples/.storybook/main.js | 26 ++- .../.storybook/preview-loader.js | 23 --- packages/react-examples/.storybook/preview.js | 117 +----------- .../stories/Themes/Themes.stories.tsx | 4 + .../CalendarInlineMultidayDayView.stories.tsx | 4 + .../components/ContextMenu.stories.tsx | 4 + ...etailsListCustomColumnsExample.stories.tsx | 4 + .../stories/components/Pivots.stories.tsx | 4 + .../components/ProgressIndicator.stories.tsx | 4 + .../stories/components/SpinButton.stories.tsx | 4 + .../components/TeachingBubble.stories.tsx | 4 + .../components/actionButton.stories.tsx | 4 + .../components/activityitem.stories.tsx | 4 + .../activityitempersonas.stories.tsx | 4 + .../components/buttonToggle.stories.tsx | 4 + .../stories/components/callout.stories.tsx | 4 + .../choiceGroupWithImagesandIcons.stories.tsx | 4 + .../components/choicegroup.stories.tsx | 4 + .../components/colorpicker.stories.tsx | 4 + .../stories/components/comboBox.stories.tsx | 4 + .../stories/components/commandBar.stories.tsx | 4 + .../components/commandBarButton.stories.tsx | 4 + .../components/contextualMenu.stories.tsx | 10 +- .../components/dateBoundary.stories.tsx | 4 + .../stories/components/defaultDatePicker.tsx | 4 + .../components/detailsList.stories.tsx | 4 + .../stories/components/dropdown.stories.tsx | 4 + .../stories/components/iconButton.stories.tsx | 4 + .../components/iconTooltip.stories.tsx | 4 + .../stories/components/messageBar.stories.tsx | 4 + .../stories/components/slider.stories.tsx | 4 + .../stories/components/spinner.stories.tsx | 4 + .../components/splitButton.stories.tsx | 3 + .../stories/components/tags.stories.tsx | 4 + .../stories/components/toggle.stories.tsx | 4 + .../stories/components/tooltip.stories.tsx | 4 + .../src/react-cards/Card/index.stories.tsx | 15 ++ .../AreaChart/index.stories.tsx | 19 ++ .../DonutChart/index.stories.tsx | 18 ++ .../GaugeChart/index.stories.tsx | 12 ++ .../GroupedVerticalBarChart/index.stories.tsx | 18 ++ .../HeatMapChart/index.stories.tsx | 12 ++ .../HorizontalBarChart/index.stories.tsx | 21 +++ .../index.stories.tsx | 15 ++ .../react-charting/Legends/index.stories.tsx | 21 +++ .../LineChart/index.stories.tsx | 30 +++ .../MultiStackedBarChart/index.stories.tsx | 15 ++ .../react-charting/PieChart/index.stories.tsx | 12 ++ .../SankeyChart/index.stories.tsx | 15 ++ .../SparklineChart/index.stories.tsx | 9 + .../StackedBarChart/index.stories.tsx | 33 ++++ .../TreeChart/index.stories.tsx | 24 +++ .../VerticalBarChart/index.stories.tsx | 27 +++ .../VerticalStackedBarChart/index.stories.tsx | 24 +++ .../Chiclet/index.stories.tsx | 24 +++ .../CollapsibleSection/index.stories.tsx | 24 +++ .../FileTypeIcon/index.stories.tsx | 9 + .../index.stories.tsx | 15 ++ .../FolderCover/index.stories.tsx | 9 + .../LayoutGroup/index.stories.tsx | 9 + .../MicroFeedback/index.stories.tsx | 15 ++ .../Pagination/index.stories.tsx | 18 ++ .../Persona/index.stories.tsx | 12 ++ .../PersonaCoin/index.stories.tsx | 12 ++ .../SelectedPeopleList/index.stories.tsx | 27 +++ .../Sidebar/index.stories.tsx | 12 ++ .../Signals/index.stories.tsx | 12 ++ .../Slider/index.stories.tsx | 12 ++ .../Theming/index.stories.tsx | 12 ++ .../react-experiments/Tile/index.stories.tsx | 15 ++ .../TilesList/index.stories.tsx | 17 ++ .../UnifiedPeoplePicker/index.stories.tsx | 15 ++ .../VirtualizedList/index.stories.tsx | 12 ++ .../react-focus/FocusZone/index.stories.tsx | 13 ++ .../src/react/ActivityItem/index.stories.tsx | 9 + .../src/react/Announced/index.stories.tsx | 11 ++ .../src/react/Breadcrumb/index.stories.tsx | 9 + .../src/react/Button/index.stories.tsx | 27 +++ .../src/react/Calendar/index.stories.tsx | 29 +++ .../src/react/Callout/index.stories.tsx | 13 ++ .../src/react/Checkbox/index.stories.tsx | 9 + .../src/react/ChoiceGroup/index.stories.tsx | 15 ++ .../src/react/Coachmark/index.stories.tsx | 5 + .../src/react/ColorPicker/index.stories.tsx | 5 + .../src/react/ComboBox/index.stories.tsx | 23 +++ .../src/react/CommandBar/index.stories.tsx | 13 ++ .../react/ContextualMenu/index.stories.tsx | 37 ++++ .../src/react/DatePicker/index.stories.tsx | 19 ++ .../src/react/DetailsList/index.stories.tsx | 69 +++++++ .../src/react/Dialog/index.stories.tsx | 13 ++ .../src/react/Divider/index.stories.tsx | 7 + .../src/react/DocumentCard/index.stories.tsx | 13 ++ .../src/react/Dropdown/index.stories.tsx | 19 ++ .../ExtendedPeoplePicker/index.stories.tsx | 11 ++ .../react/ExtendedPicker/index.stories.tsx | 11 ++ .../src/react/Facepile/index.stories.tsx | 9 + .../FloatingPeoplePicker/index.stories.tsx | 7 + .../src/react/FocusTrapZone/index.stories.tsx | 15 ++ .../src/react/GroupedList/index.stories.tsx | 15 ++ .../src/react/HoverCard/index.stories.tsx | 13 ++ .../src/react/Icon/index.stories.tsx | 13 ++ .../src/react/Image/index.stories.tsx | 19 ++ .../src/react/Keytip/index.stories.tsx | 13 ++ .../src/react/Label/index.stories.tsx | 5 + .../src/react/Layer/index.stories.tsx | 11 ++ .../src/react/Link/index.stories.tsx | 5 + .../src/react/List/index.stories.tsx | 11 ++ .../react/MarqueeSelection/index.stories.tsx | 5 + .../src/react/MessageBar/index.stories.tsx | 7 + .../src/react/Modal/index.stories.tsx | 7 + .../src/react/Nav/index.stories.tsx | 15 ++ .../src/react/OverflowSet/index.stories.tsx | 11 ++ .../src/react/Overlay/index.stories.tsx | 7 + .../src/react/Panel/index.stories.tsx | 25 +++ .../src/react/PeoplePicker/index.stories.tsx | 17 ++ .../src/react/Persona/index.stories.tsx | 21 +++ .../src/react/Pickers/index.stories.tsx | 11 ++ .../src/react/Pivot/index.stories.tsx | 25 +++ .../src/react/Popup/index.stories.tsx | 7 + .../react/ProgressIndicator/index.stories.tsx | 7 + .../src/react/Rating/index.stories.tsx | 7 + .../src/react/ResizeGroup/index.stories.tsx | 9 + .../react/ScrollablePane/index.stories.tsx | 7 + .../src/react/SearchBox/index.stories.tsx | 13 ++ .../SelectedPeopleList/index.stories.tsx | 7 + .../src/react/Selection/index.stories.tsx | 5 + .../src/react/Separator/index.stories.tsx | 9 + .../src/react/ShadowDOM/index.stories.tsx | 171 ++++++++++++++++++ .../src/react/Shimmer/index.stories.tsx | 13 ++ .../src/react/Slider/index.stories.tsx | 9 + .../src/react/SpinButton/index.stories.tsx | 15 ++ .../src/react/Spinner/index.stories.tsx | 7 + .../src/react/Stack/index.stories.tsx | 47 +++++ .../react/SwatchColorPicker/index.stories.tsx | 5 + .../react/TeachingBubble/index.stories.tsx | 19 ++ .../src/react/Text/index.stories.tsx | 11 ++ .../src/react/TextField/index.stories.tsx | 21 +++ ...Provider.stories.tsx => index.stories.tsx} | 2 +- .../src/react/TimePicker/index.stories.tsx | 13 ++ .../src/react/Toggle/index.stories.tsx | 7 + .../src/react/Tooltip/index.stories.tsx | 15 ++ .../react/WeeklyDayPicker/index.stories.tsx | 15 ++ 142 files changed, 1882 insertions(+), 150 deletions(-) delete mode 100644 packages/react-examples/.storybook/preview-loader.js create mode 100644 packages/react-examples/src/react-cards/Card/index.stories.tsx create mode 100644 packages/react-examples/src/react-charting/AreaChart/index.stories.tsx create mode 100644 packages/react-examples/src/react-charting/DonutChart/index.stories.tsx create mode 100644 packages/react-examples/src/react-charting/GaugeChart/index.stories.tsx create mode 100644 packages/react-examples/src/react-charting/GroupedVerticalBarChart/index.stories.tsx create mode 100644 packages/react-examples/src/react-charting/HeatMapChart/index.stories.tsx create mode 100644 packages/react-examples/src/react-charting/HorizontalBarChart/index.stories.tsx create mode 100644 packages/react-examples/src/react-charting/HorizontalBarChartWithAxis/index.stories.tsx create mode 100644 packages/react-examples/src/react-charting/Legends/index.stories.tsx create mode 100644 packages/react-examples/src/react-charting/LineChart/index.stories.tsx create mode 100644 packages/react-examples/src/react-charting/MultiStackedBarChart/index.stories.tsx create mode 100644 packages/react-examples/src/react-charting/PieChart/index.stories.tsx create mode 100644 packages/react-examples/src/react-charting/SankeyChart/index.stories.tsx create mode 100644 packages/react-examples/src/react-charting/SparklineChart/index.stories.tsx create mode 100644 packages/react-examples/src/react-charting/StackedBarChart/index.stories.tsx create mode 100644 packages/react-examples/src/react-charting/TreeChart/index.stories.tsx create mode 100644 packages/react-examples/src/react-charting/VerticalBarChart/index.stories.tsx create mode 100644 packages/react-examples/src/react-charting/VerticalStackedBarChart/index.stories.tsx create mode 100644 packages/react-examples/src/react-experiments/Chiclet/index.stories.tsx create mode 100644 packages/react-examples/src/react-experiments/CollapsibleSection/index.stories.tsx create mode 100644 packages/react-examples/src/react-experiments/FileTypeIcon/index.stories.tsx create mode 100644 packages/react-examples/src/react-experiments/FloatingPeopleSuggestions/index.stories.tsx create mode 100644 packages/react-examples/src/react-experiments/FolderCover/index.stories.tsx create mode 100644 packages/react-examples/src/react-experiments/LayoutGroup/index.stories.tsx create mode 100644 packages/react-examples/src/react-experiments/MicroFeedback/index.stories.tsx create mode 100644 packages/react-examples/src/react-experiments/Pagination/index.stories.tsx create mode 100644 packages/react-examples/src/react-experiments/Persona/index.stories.tsx create mode 100644 packages/react-examples/src/react-experiments/PersonaCoin/index.stories.tsx create mode 100644 packages/react-examples/src/react-experiments/SelectedPeopleList/index.stories.tsx create mode 100644 packages/react-examples/src/react-experiments/Sidebar/index.stories.tsx create mode 100644 packages/react-examples/src/react-experiments/Signals/index.stories.tsx create mode 100644 packages/react-examples/src/react-experiments/Slider/index.stories.tsx create mode 100644 packages/react-examples/src/react-experiments/Theming/index.stories.tsx create mode 100644 packages/react-examples/src/react-experiments/Tile/index.stories.tsx create mode 100644 packages/react-examples/src/react-experiments/TilesList/index.stories.tsx create mode 100644 packages/react-examples/src/react-experiments/UnifiedPeoplePicker/index.stories.tsx create mode 100644 packages/react-examples/src/react-experiments/VirtualizedList/index.stories.tsx create mode 100644 packages/react-examples/src/react-focus/FocusZone/index.stories.tsx create mode 100644 packages/react-examples/src/react/ActivityItem/index.stories.tsx create mode 100644 packages/react-examples/src/react/Announced/index.stories.tsx create mode 100644 packages/react-examples/src/react/Breadcrumb/index.stories.tsx create mode 100644 packages/react-examples/src/react/Button/index.stories.tsx create mode 100644 packages/react-examples/src/react/Calendar/index.stories.tsx create mode 100644 packages/react-examples/src/react/Callout/index.stories.tsx create mode 100644 packages/react-examples/src/react/Checkbox/index.stories.tsx create mode 100644 packages/react-examples/src/react/ChoiceGroup/index.stories.tsx create mode 100644 packages/react-examples/src/react/Coachmark/index.stories.tsx create mode 100644 packages/react-examples/src/react/ColorPicker/index.stories.tsx create mode 100644 packages/react-examples/src/react/ComboBox/index.stories.tsx create mode 100644 packages/react-examples/src/react/CommandBar/index.stories.tsx create mode 100644 packages/react-examples/src/react/ContextualMenu/index.stories.tsx create mode 100644 packages/react-examples/src/react/DatePicker/index.stories.tsx create mode 100644 packages/react-examples/src/react/DetailsList/index.stories.tsx create mode 100644 packages/react-examples/src/react/Dialog/index.stories.tsx create mode 100644 packages/react-examples/src/react/Divider/index.stories.tsx create mode 100644 packages/react-examples/src/react/DocumentCard/index.stories.tsx create mode 100644 packages/react-examples/src/react/Dropdown/index.stories.tsx create mode 100644 packages/react-examples/src/react/ExtendedPeoplePicker/index.stories.tsx create mode 100644 packages/react-examples/src/react/ExtendedPicker/index.stories.tsx create mode 100644 packages/react-examples/src/react/Facepile/index.stories.tsx create mode 100644 packages/react-examples/src/react/FloatingPeoplePicker/index.stories.tsx create mode 100644 packages/react-examples/src/react/FocusTrapZone/index.stories.tsx create mode 100644 packages/react-examples/src/react/GroupedList/index.stories.tsx create mode 100644 packages/react-examples/src/react/HoverCard/index.stories.tsx create mode 100644 packages/react-examples/src/react/Icon/index.stories.tsx create mode 100644 packages/react-examples/src/react/Image/index.stories.tsx create mode 100644 packages/react-examples/src/react/Keytip/index.stories.tsx create mode 100644 packages/react-examples/src/react/Label/index.stories.tsx create mode 100644 packages/react-examples/src/react/Layer/index.stories.tsx create mode 100644 packages/react-examples/src/react/Link/index.stories.tsx create mode 100644 packages/react-examples/src/react/List/index.stories.tsx create mode 100644 packages/react-examples/src/react/MarqueeSelection/index.stories.tsx create mode 100644 packages/react-examples/src/react/MessageBar/index.stories.tsx create mode 100644 packages/react-examples/src/react/Modal/index.stories.tsx create mode 100644 packages/react-examples/src/react/Nav/index.stories.tsx create mode 100644 packages/react-examples/src/react/OverflowSet/index.stories.tsx create mode 100644 packages/react-examples/src/react/Overlay/index.stories.tsx create mode 100644 packages/react-examples/src/react/Panel/index.stories.tsx create mode 100644 packages/react-examples/src/react/PeoplePicker/index.stories.tsx create mode 100644 packages/react-examples/src/react/Persona/index.stories.tsx create mode 100644 packages/react-examples/src/react/Pickers/index.stories.tsx create mode 100644 packages/react-examples/src/react/Pivot/index.stories.tsx create mode 100644 packages/react-examples/src/react/Popup/index.stories.tsx create mode 100644 packages/react-examples/src/react/ProgressIndicator/index.stories.tsx create mode 100644 packages/react-examples/src/react/Rating/index.stories.tsx create mode 100644 packages/react-examples/src/react/ResizeGroup/index.stories.tsx create mode 100644 packages/react-examples/src/react/ScrollablePane/index.stories.tsx create mode 100644 packages/react-examples/src/react/SearchBox/index.stories.tsx create mode 100644 packages/react-examples/src/react/SelectedPeopleList/index.stories.tsx create mode 100644 packages/react-examples/src/react/Selection/index.stories.tsx create mode 100644 packages/react-examples/src/react/Separator/index.stories.tsx create mode 100644 packages/react-examples/src/react/ShadowDOM/index.stories.tsx create mode 100644 packages/react-examples/src/react/Shimmer/index.stories.tsx create mode 100644 packages/react-examples/src/react/Slider/index.stories.tsx create mode 100644 packages/react-examples/src/react/SpinButton/index.stories.tsx create mode 100644 packages/react-examples/src/react/Spinner/index.stories.tsx create mode 100644 packages/react-examples/src/react/Stack/index.stories.tsx create mode 100644 packages/react-examples/src/react/SwatchColorPicker/index.stories.tsx create mode 100644 packages/react-examples/src/react/TeachingBubble/index.stories.tsx create mode 100644 packages/react-examples/src/react/Text/index.stories.tsx create mode 100644 packages/react-examples/src/react/TextField/index.stories.tsx rename packages/react-examples/src/react/ThemeProvider/{ThemeProvider.stories.tsx => index.stories.tsx} (97%) create mode 100644 packages/react-examples/src/react/TimePicker/index.stories.tsx create mode 100644 packages/react-examples/src/react/Toggle/index.stories.tsx create mode 100644 packages/react-examples/src/react/Tooltip/index.stories.tsx create mode 100644 packages/react-examples/src/react/WeeklyDayPicker/index.stories.tsx diff --git a/packages/react-examples/.storybook/main.js b/packages/react-examples/.storybook/main.js index 2e5bce84eb0b60..a7cb243f28ab1f 100644 --- a/packages/react-examples/.storybook/main.js +++ b/packages/react-examples/.storybook/main.js @@ -1,9 +1,11 @@ import { createStorybookWebpackConfig } from '@fluentui/scripts-webpack'; +import * as fs from 'fs'; import * as path from 'path'; import { merge } from 'webpack-merge'; /** @type {Partial} */ const config = { + stories: getStories(), addons: [ '@storybook/addon-a11y', '@storybook/addon-essentials', @@ -22,15 +24,6 @@ const config = { const customConfig = createStorybookWebpackConfig(config); return merge(customConfig, { - module: { - rules: [ - { - // Special loader that only includes stories from the current package - test: /\.storybook[/\\]preview.js/, - loader: path.resolve(__dirname, 'preview-loader.js'), - }, - ], - }, resolve: { fallback: { crypto: require.resolve('crypto-browserify'), @@ -48,4 +41,19 @@ const config = { }, }; +function getStories() { + const packageName = path.basename(process.cwd()); + + if (!fs.existsSync(path.resolve(__dirname, '../src', packageName))) { + throw new Error(`Package ${packageName} does not have examples!`); + } + + // For @fluentui/react's storybook, also include examples from @fluentui/react-focus + if (packageName === 'react') { + return ['../src/react/**/*.stories.tsx', '../src/react-focus/**/*.stories.tsx']; + } + + return [`../src/${packageName}/**/*.stories.tsx`]; +} + export default config; diff --git a/packages/react-examples/.storybook/preview-loader.js b/packages/react-examples/.storybook/preview-loader.js deleted file mode 100644 index f757469a865a52..00000000000000 --- a/packages/react-examples/.storybook/preview-loader.js +++ /dev/null @@ -1,23 +0,0 @@ -import * as fs from 'fs-extra'; -import * as path from 'path'; - -/** - * Webpack loader that replaces the PACKAGE_NAME token in preview.js with the actual current - * package name (or errors if the package doesn't have examples). - * - * @see https://webpack.js.org/api/loaders/ - * @this {import('webpack').LoaderContext<{}>} - * @param {string} source - */ -export default function loader(source) { - // invalidate cache when process.cwd() changes - this.addDependency(process.cwd()); - - const packageName = path.basename(process.cwd()); - if (!fs.existsSync(path.resolve(__dirname, '../src', packageName))) { - this.callback(new Error(`Package ${packageName} does not have examples!`)); - return; - } - - return source.replace(/PACKAGE_NAME/g, packageName); -} diff --git a/packages/react-examples/.storybook/preview.js b/packages/react-examples/.storybook/preview.js index 022cc8c5b47fea..0e2f712ab0f055 100644 --- a/packages/react-examples/.storybook/preview.js +++ b/packages/react-examples/.storybook/preview.js @@ -1,125 +1,14 @@ -import * as React from 'react'; import { initializeIcons } from '@fluentui/font-icons-mdl2'; -import { configure, addParameters, addDecorator } from '@storybook/react'; import 'cypress-storybook/react'; import { withPerformance } from 'storybook-addon-performance'; import { withKeytipLayer, withStrictMode } from '@fluentui/storybook'; initializeIcons(); -// This API is deprecated (in favor of `export const decorators = []`) but the new way appears not -// to work when using the legacy configure() API -addDecorator(withPerformance); -addDecorator(withStrictMode); -addDecorator(withKeytipLayer); +export const decorators = [withPerformance, withStrictMode, withKeytipLayer]; -// This API is deprecated (in favor of `export const parameters = {}`) but same issue as above -addParameters({ +export const parameters = { a11y: /** @type {import('@storybook/addon-a11y').A11yParameters} */ ({ manual: true, }), -}); - -// This API is deprecated and will no longer work in storybook 7 or with storyStoreV7. -// https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-configure -// The selective loading functionality currently implemented by preview-loader can be more easily -// handled by just settings `stories: [/*glob*/]` in main.js, but it's unclear if a replacement is -// available for transforming files before loading as stories. -configure(loadStories, module); - -// ========================================================== -// Helpers for loading examples in component story format -// ========================================================== - -/** - * @typedef {{ - * default: { title: string }; - * [storyName: string]: React.FunctionComponent | { title: string }; - * }} StoryGroup - Group of stories for a particular component (follows component story format) - * - * @typedef {{ - * [exportName: string]: React.ComponentType; - * }} ExampleModule - A loaded `*.Example.tsx` or `*.stories.tsx` file, exporting an example component - */ - -/** - * Read the `*.Example.tsx` and/or `*.stories.tsx` files for the current package `start-storybook` - * is running in and generate a list of stories in component story format. - */ -function loadStories() { - /** @type {Map} */ - const stories = new Map(); - - /** @type {__WebpackModuleApi.RequireContext[]} */ - const contexts = [ - // This will be updated by preview-loader with the actual current package name - require.context('../src/PACKAGE_NAME', true, /\.(Example|stories)\.tsx$/), - ]; - - // This will be replaced with the actual package name by the custom webpack loader ./preview-loader.js - // (note: for some reason the replacement doesn't work if the const is outside the function) - const packageNamePlaceholder = /** @type {string} */ ('PACKAGE_NAME'); - - if (packageNamePlaceholder === 'react') { - // For @fluentui/react's storybook, also include examples from @fluentui/react-focus - contexts.push(require.context('../src/react-focus', true, /\.(Example|stories)\.tsx$/)); - } - - for (const req of contexts) { - req.keys().forEach(key => { - generateStoriesForExampleFile(key, stories, req); - }); - } - - // convert stories Set to array - const sorted = [...stories.values()].sort((s1, s2) => (s1.default.title > s2.default.title ? 1 : -1)); - - return sorted; -} - -/** - * Generate stories (usually one story) for a `*.Example.tsx` or `*.stories.tsx` file - * @param {string} key - key for the module in require.context (the relative path to the module - * from the root path passed to require.context) - * @param {Map} stories - mapping from component path (`Components/`) to stories - * @param {__WebpackModuleApi.RequireContext} req - */ -function generateStoriesForExampleFile(key, stories, req) { - // The key will be like this: - // ./ComponentName/ComponentName.Something.Example.tsx - // group 1: component name - const pathParts = key.match(/\/(\w+)\/[\w.]+$/); - if (!pathParts) { - console.error(`Invalid path found in storybook require.context: "${key}"`); - return; - } - - const componentName = pathParts[1]; - const componentPath = `Components/${componentName}`; - - if (!stories.has(componentPath)) { - stories.set(componentPath, { - // A default "export" with a title is required by component story format - default: { - title: componentPath, - }, - }); - } - - const storyGroup = /** @type {StoryGroup} */ (stories.get(componentPath)); - const exampleModule = /** @type {(key: string) => ExampleModule} */ (req)(key); - - for (const [exportName, ExampleComponent] of Object.entries(exampleModule)) { - const storyName = exportName.replace(componentName, '').replace(/Example$/, ''); - - if (typeof ExampleComponent === 'function') { - if (ExampleComponent.prototype.render) { - // class component -- make a wrapper function component - storyGroup[storyName] = () => React.createElement(ExampleComponent); - } else { - // function component - storyGroup[storyName] = /** @type {React.FunctionComponent} */ (ExampleComponent); - } - } - } -} +}; diff --git a/packages/react-examples/src/azure-themes/stories/Themes/Themes.stories.tsx b/packages/react-examples/src/azure-themes/stories/Themes/Themes.stories.tsx index eae72175b6a4b9..83fadb2a116a04 100644 --- a/packages/react-examples/src/azure-themes/stories/Themes/Themes.stories.tsx +++ b/packages/react-examples/src/azure-themes/stories/Themes/Themes.stories.tsx @@ -39,6 +39,10 @@ import { SpinnerBasicExample } from '../components/spinner.stories'; import { DetailsListCustomColumnsExample } from '../components/DetailsListCustomColumnsExample.stories'; import { ChoiceGroupImageExample } from '../components/choiceGroupWithImagesandIcons.stories'; +export default { + title: 'Components/Themes', +}; + const Example = () => ( diff --git a/packages/react-examples/src/azure-themes/stories/components/CalendarInlineMultidayDayView.stories.tsx b/packages/react-examples/src/azure-themes/stories/components/CalendarInlineMultidayDayView.stories.tsx index d071334f781cdf..8532b75c0c3b45 100644 --- a/packages/react-examples/src/azure-themes/stories/components/CalendarInlineMultidayDayView.stories.tsx +++ b/packages/react-examples/src/azure-themes/stories/components/CalendarInlineMultidayDayView.stories.tsx @@ -1,6 +1,10 @@ import * as React from 'react'; import { Calendar, Dropdown, IDropdownOption, mergeStyleSets, defaultCalendarStrings } from '@fluentui/react'; +export default { + title: 'Components/CalendarInlineMultidayDayView', +}; + const styles = mergeStyleSets({ wrapper: { height: 360 }, dropdown: { width: 230 }, diff --git a/packages/react-examples/src/azure-themes/stories/components/ContextMenu.stories.tsx b/packages/react-examples/src/azure-themes/stories/components/ContextMenu.stories.tsx index 4f55992dbeb61b..dc55e7df3f57a7 100644 --- a/packages/react-examples/src/azure-themes/stories/components/ContextMenu.stories.tsx +++ b/packages/react-examples/src/azure-themes/stories/components/ContextMenu.stories.tsx @@ -2,6 +2,10 @@ import * as React from 'react'; import { ContextualMenuItemType, IContextualMenuProps, IContextualMenuItem } from '@fluentui/react/lib/ContextualMenu'; import { DefaultButton } from '@fluentui/react/lib/Button'; +export default { + title: 'Components/ContextualMenu', +}; + export const ContextualMenuDefaultExample: React.FunctionComponent = () => { return ; }; diff --git a/packages/react-examples/src/azure-themes/stories/components/DetailsListCustomColumnsExample.stories.tsx b/packages/react-examples/src/azure-themes/stories/components/DetailsListCustomColumnsExample.stories.tsx index 7dc75860b7a86e..12b20e595b7d25 100644 --- a/packages/react-examples/src/azure-themes/stories/components/DetailsListCustomColumnsExample.stories.tsx +++ b/packages/react-examples/src/azure-themes/stories/components/DetailsListCustomColumnsExample.stories.tsx @@ -3,6 +3,10 @@ import { createListItems, IExampleItem } from '@fluentui/example-data'; import { Link } from '@fluentui/react/lib/Link'; import { DetailsList, buildColumns, IColumn } from '@fluentui/react/lib/DetailsList'; +export default { + title: 'Components/DetailsList', +}; + export interface IDetailsListCustomColumnsExampleState { sortedItems: IExampleItem[]; columns: IColumn[]; diff --git a/packages/react-examples/src/azure-themes/stories/components/Pivots.stories.tsx b/packages/react-examples/src/azure-themes/stories/components/Pivots.stories.tsx index ea3ee0deff069f..8233100c23a743 100644 --- a/packages/react-examples/src/azure-themes/stories/components/Pivots.stories.tsx +++ b/packages/react-examples/src/azure-themes/stories/components/Pivots.stories.tsx @@ -3,6 +3,10 @@ import { Label, ILabelStyles } from '@fluentui/react/lib/Label'; import { Pivot, PivotItem } from '@fluentui/react/lib/Pivot'; import { IStyleSet } from '@fluentui/react/lib/Styling'; +export default { + title: 'Components/Pivot', +}; + const labelStyles: Partial> = { root: { marginTop: 10 }, }; diff --git a/packages/react-examples/src/azure-themes/stories/components/ProgressIndicator.stories.tsx b/packages/react-examples/src/azure-themes/stories/components/ProgressIndicator.stories.tsx index 2a596313f8dc02..c9a37319c7477a 100644 --- a/packages/react-examples/src/azure-themes/stories/components/ProgressIndicator.stories.tsx +++ b/packages/react-examples/src/azure-themes/stories/components/ProgressIndicator.stories.tsx @@ -1,6 +1,10 @@ import * as React from 'react'; import { ProgressIndicator } from '@fluentui/react/lib/ProgressIndicator'; +export default { + title: 'Components/ProgressIndicator', +}; + const intervalDelay = 100; const intervalIncrement = 0.01; diff --git a/packages/react-examples/src/azure-themes/stories/components/SpinButton.stories.tsx b/packages/react-examples/src/azure-themes/stories/components/SpinButton.stories.tsx index 702482814a9847..d5b03ddf37bded 100644 --- a/packages/react-examples/src/azure-themes/stories/components/SpinButton.stories.tsx +++ b/packages/react-examples/src/azure-themes/stories/components/SpinButton.stories.tsx @@ -2,6 +2,10 @@ import * as React from 'react'; import { SpinButton, ISpinButtonStyles, Position, IIconProps } from '@fluentui/react'; import { Stack, IStackTokens } from '@fluentui/react/lib/Stack'; +export default { + title: 'Components/SpinButton', +}; + const stackTokens: IStackTokens = { childrenGap: 20 }; // By default the field grows to fit available width. Constrain the width instead. const styles: Partial = { spinButtonWrapper: { width: 75 } }; diff --git a/packages/react-examples/src/azure-themes/stories/components/TeachingBubble.stories.tsx b/packages/react-examples/src/azure-themes/stories/components/TeachingBubble.stories.tsx index d3cdf016143039..04b0f711b159be 100644 --- a/packages/react-examples/src/azure-themes/stories/components/TeachingBubble.stories.tsx +++ b/packages/react-examples/src/azure-themes/stories/components/TeachingBubble.stories.tsx @@ -3,6 +3,10 @@ import { DefaultButton, IButtonProps } from '@fluentui/react/lib/Button'; import { TeachingBubble } from '@fluentui/react/lib/TeachingBubble'; import { useBoolean } from '@fluentui/react-hooks'; +export default { + title: 'Components/TeachingBubble', +}; + const examplePrimaryButtonProps: IButtonProps = { children: 'Try it out', }; diff --git a/packages/react-examples/src/azure-themes/stories/components/actionButton.stories.tsx b/packages/react-examples/src/azure-themes/stories/components/actionButton.stories.tsx index d74e9bdbdf02ce..74116c8df17de9 100644 --- a/packages/react-examples/src/azure-themes/stories/components/actionButton.stories.tsx +++ b/packages/react-examples/src/azure-themes/stories/components/actionButton.stories.tsx @@ -2,6 +2,10 @@ import * as React from 'react'; import { IIconProps } from '@fluentui/react'; import { ActionButton } from '@fluentui/react/lib/Button'; +export default { + title: 'Components/ActionButton', +}; + export interface IButtonExampleProps { // These are set based on the toggles shown above the examples (not needed in real code) disabled?: boolean; diff --git a/packages/react-examples/src/azure-themes/stories/components/activityitem.stories.tsx b/packages/react-examples/src/azure-themes/stories/components/activityitem.stories.tsx index af22af417304a8..0bb51a70b03154 100644 --- a/packages/react-examples/src/azure-themes/stories/components/activityitem.stories.tsx +++ b/packages/react-examples/src/azure-themes/stories/components/activityitem.stories.tsx @@ -1,6 +1,10 @@ import * as React from 'react'; import { ActivityItem, Icon, Link, mergeStyleSets } from '@fluentui/react'; +export default { + title: 'Components/ActivityItem', +}; + const classNames = mergeStyleSets({ exampleRoot: { marginTop: '20px', diff --git a/packages/react-examples/src/azure-themes/stories/components/activityitempersonas.stories.tsx b/packages/react-examples/src/azure-themes/stories/components/activityitempersonas.stories.tsx index 6d3bf0f6b330de..08b087a8d6499b 100644 --- a/packages/react-examples/src/azure-themes/stories/components/activityitempersonas.stories.tsx +++ b/packages/react-examples/src/azure-themes/stories/components/activityitempersonas.stories.tsx @@ -2,6 +2,10 @@ import * as React from 'react'; import { ActivityItem, IActivityItemProps, Link, mergeStyleSets } from '@fluentui/react'; import { TestImages } from '@fluentui/example-data'; +export default { + title: 'Components/ActivityItemPersona', +}; + const classNames = mergeStyleSets({ exampleRoot: { marginTop: '20px', diff --git a/packages/react-examples/src/azure-themes/stories/components/buttonToggle.stories.tsx b/packages/react-examples/src/azure-themes/stories/components/buttonToggle.stories.tsx index 309a2cca86766e..431a7173881399 100644 --- a/packages/react-examples/src/azure-themes/stories/components/buttonToggle.stories.tsx +++ b/packages/react-examples/src/azure-themes/stories/components/buttonToggle.stories.tsx @@ -2,6 +2,10 @@ import * as React from 'react'; import { IIconProps } from '@fluentui/react'; import { DefaultButton } from '@fluentui/react/lib/Button'; +export default { + title: 'Components/ButtonToggle', +}; + export interface IButtonExampleProps { // These are set based on the toggles shown above the examples (not needed in real code) disabled?: boolean; diff --git a/packages/react-examples/src/azure-themes/stories/components/callout.stories.tsx b/packages/react-examples/src/azure-themes/stories/components/callout.stories.tsx index 7aa3b327bd13e5..6e51c0e3cff200 100644 --- a/packages/react-examples/src/azure-themes/stories/components/callout.stories.tsx +++ b/packages/react-examples/src/azure-themes/stories/components/callout.stories.tsx @@ -10,6 +10,10 @@ import { getId, } from '@fluentui/react'; +export default { + title: 'Components/Callout', +}; + export interface ICalloutBasicExampleState { isCalloutVisible?: boolean; } diff --git a/packages/react-examples/src/azure-themes/stories/components/choiceGroupWithImagesandIcons.stories.tsx b/packages/react-examples/src/azure-themes/stories/components/choiceGroupWithImagesandIcons.stories.tsx index c539bd9fc592a0..6cefc564a4fef1 100644 --- a/packages/react-examples/src/azure-themes/stories/components/choiceGroupWithImagesandIcons.stories.tsx +++ b/packages/react-examples/src/azure-themes/stories/components/choiceGroupWithImagesandIcons.stories.tsx @@ -2,6 +2,10 @@ import * as React from 'react'; import { ChoiceGroup, IChoiceGroupOption } from '@fluentui/react/lib/ChoiceGroup'; import { TestImages } from '@fluentui/example-data'; +export default { + title: 'Components/ChoiceGroup', +}; + const options: IChoiceGroupOption[] = [ { key: 'bar', diff --git a/packages/react-examples/src/azure-themes/stories/components/choicegroup.stories.tsx b/packages/react-examples/src/azure-themes/stories/components/choicegroup.stories.tsx index 5232e20b239401..432991bc18e9d8 100644 --- a/packages/react-examples/src/azure-themes/stories/components/choicegroup.stories.tsx +++ b/packages/react-examples/src/azure-themes/stories/components/choicegroup.stories.tsx @@ -1,6 +1,10 @@ import * as React from 'react'; import { ChoiceGroup, IChoiceGroupOption } from '@fluentui/react/lib/ChoiceGroup'; +export default { + title: 'Components/ChoiceGroup', +}; + const options: IChoiceGroupOption[] = [ { key: 'A', text: 'Option A' }, { key: 'B', text: 'Option B' }, diff --git a/packages/react-examples/src/azure-themes/stories/components/colorpicker.stories.tsx b/packages/react-examples/src/azure-themes/stories/components/colorpicker.stories.tsx index 2bc74531268b47..a61777bde3db72 100644 --- a/packages/react-examples/src/azure-themes/stories/components/colorpicker.stories.tsx +++ b/packages/react-examples/src/azure-themes/stories/components/colorpicker.stories.tsx @@ -2,6 +2,10 @@ import * as React from 'react'; import { ColorPicker, Toggle, getColorFromString, IColor, IColorPickerStyles, updateA } from '@fluentui/react'; import { mergeStyleSets } from '@fluentui/react/lib/Styling'; +export default { + title: 'Components/ColorPicker', +}; + const classNames = mergeStyleSets({ wrapper: { display: 'flex' }, column2: { marginLeft: 10 }, diff --git a/packages/react-examples/src/azure-themes/stories/components/comboBox.stories.tsx b/packages/react-examples/src/azure-themes/stories/components/comboBox.stories.tsx index 76de4a54609c05..024e5e79b14bae 100644 --- a/packages/react-examples/src/azure-themes/stories/components/comboBox.stories.tsx +++ b/packages/react-examples/src/azure-themes/stories/components/comboBox.stories.tsx @@ -10,6 +10,10 @@ import { } from '@fluentui/react'; import { PrimaryButton } from '@fluentui/react/lib/Button'; +export default { + title: 'Components/ComboBox', +}; + const INITIAL_OPTIONS: IComboBoxOption[] = [ { key: 'Header1', text: 'First heading', itemType: SelectableOptionMenuItemType.Header }, { key: 'A', text: 'Option A' }, diff --git a/packages/react-examples/src/azure-themes/stories/components/commandBar.stories.tsx b/packages/react-examples/src/azure-themes/stories/components/commandBar.stories.tsx index 6383b502e81718..0cbe831dc63a36 100644 --- a/packages/react-examples/src/azure-themes/stories/components/commandBar.stories.tsx +++ b/packages/react-examples/src/azure-themes/stories/components/commandBar.stories.tsx @@ -2,6 +2,10 @@ import * as React from 'react'; import { CommandBar, ICommandBarItemProps } from '@fluentui/react/lib/CommandBar'; import { IButtonProps } from '@fluentui/react/lib/Button'; +export default { + title: 'Components/CommandBar', +}; + const overflowProps: IButtonProps = { ariaLabel: 'More commands' }; export const CommandBarBasicExample: React.FunctionComponent = () => { diff --git a/packages/react-examples/src/azure-themes/stories/components/commandBarButton.stories.tsx b/packages/react-examples/src/azure-themes/stories/components/commandBarButton.stories.tsx index e44fe2a7ef78dc..2d16935d23f5c0 100644 --- a/packages/react-examples/src/azure-themes/stories/components/commandBarButton.stories.tsx +++ b/packages/react-examples/src/azure-themes/stories/components/commandBarButton.stories.tsx @@ -2,6 +2,10 @@ import * as React from 'react'; import { CommandBar, ICommandBarItemProps } from '@fluentui/react/lib/CommandBar'; import { IButtonProps } from '@fluentui/react/lib/Button'; +export default { + title: 'Components/CommandBar', +}; + const overflowButtonProps: IButtonProps = { ariaLabel: 'More commands' }; export const CommandBarSplitDisabledExample: React.FunctionComponent = () => { diff --git a/packages/react-examples/src/azure-themes/stories/components/contextualMenu.stories.tsx b/packages/react-examples/src/azure-themes/stories/components/contextualMenu.stories.tsx index 3ebb99845097c7..1a282900ee74d6 100644 --- a/packages/react-examples/src/azure-themes/stories/components/contextualMenu.stories.tsx +++ b/packages/react-examples/src/azure-themes/stories/components/contextualMenu.stories.tsx @@ -2,6 +2,10 @@ import * as React from 'react'; import { ContextualMenu, IContextualMenuProps, IIconProps } from '@fluentui/react'; import { DefaultButton, PrimaryButton } from '@fluentui/react/lib/Button'; +export default { + title: 'Components/ContextualMenu', +}; + export interface IButtonExampleProps { // These are set based on the toggles shown above the examples (not needed in real code) disabled?: boolean; @@ -37,7 +41,7 @@ export const ButtonContextualMenuExample: React.FunctionComponent diff --git a/packages/react-examples/src/azure-themes/stories/components/dateBoundary.stories.tsx b/packages/react-examples/src/azure-themes/stories/components/dateBoundary.stories.tsx index f9de0614d0b07b..f96c6526a39d59 100644 --- a/packages/react-examples/src/azure-themes/stories/components/dateBoundary.stories.tsx +++ b/packages/react-examples/src/azure-themes/stories/components/dateBoundary.stories.tsx @@ -3,6 +3,10 @@ import { DatePicker, IDatePickerStrings, defaultDatePickerStrings } from '@fluen import { addMonths, addYears } from '@fluentui/date-time-utilities'; import { mergeStyleSets } from '@fluentui/react/lib/Styling'; +export default { + title: 'Components/DatePicker', +}; + const today: Date = new Date(Date.now()); const minDate: Date = addMonths(today, -1); const maxDate: Date = addYears(today, 1); diff --git a/packages/react-examples/src/azure-themes/stories/components/defaultDatePicker.tsx b/packages/react-examples/src/azure-themes/stories/components/defaultDatePicker.tsx index d771d7685676b0..d86fa9adf50ede 100644 --- a/packages/react-examples/src/azure-themes/stories/components/defaultDatePicker.tsx +++ b/packages/react-examples/src/azure-themes/stories/components/defaultDatePicker.tsx @@ -1,6 +1,10 @@ import * as React from 'react'; import { DatePicker, mergeStyles, defaultDatePickerStrings } from '@fluentui/react'; +export default { + title: 'Components/DatePicker', +}; + const rootClass = mergeStyles({ minWidth: 170, selectors: { '> *': { marginBottom: 15 } } }); export const DatePickerBasicExample: React.FunctionComponent = () => { diff --git a/packages/react-examples/src/azure-themes/stories/components/detailsList.stories.tsx b/packages/react-examples/src/azure-themes/stories/components/detailsList.stories.tsx index 2cbc5d66ccf281..6fa41dc38ebf3d 100644 --- a/packages/react-examples/src/azure-themes/stories/components/detailsList.stories.tsx +++ b/packages/react-examples/src/azure-themes/stories/components/detailsList.stories.tsx @@ -6,6 +6,10 @@ import { MarqueeSelection } from '@fluentui/react/lib/MarqueeSelection'; import { mergeStyles } from '@fluentui/react/lib/Styling'; import { ThemeProvider } from '@fluentui/react'; +export default { + title: 'Components/DetailsList', +}; + const exampleChildClass = mergeStyles({ display: 'block', marginBottom: '10px', diff --git a/packages/react-examples/src/azure-themes/stories/components/dropdown.stories.tsx b/packages/react-examples/src/azure-themes/stories/components/dropdown.stories.tsx index 13145bb65cb61d..5839ddd144961b 100644 --- a/packages/react-examples/src/azure-themes/stories/components/dropdown.stories.tsx +++ b/packages/react-examples/src/azure-themes/stories/components/dropdown.stories.tsx @@ -2,6 +2,10 @@ import * as React from 'react'; import { IStackTokens, Stack } from '@fluentui/react/lib/Stack'; import { Dropdown, DropdownMenuItemType, IDropdownStyles, IDropdownOption } from '@fluentui/react/lib/Dropdown'; +export default { + title: 'Components/Dropdown', +}; + const dropdownStyles: Partial = { dropdown: { width: 300 }, }; diff --git a/packages/react-examples/src/azure-themes/stories/components/iconButton.stories.tsx b/packages/react-examples/src/azure-themes/stories/components/iconButton.stories.tsx index b0ba36e2b514f7..a465ac958a9324 100644 --- a/packages/react-examples/src/azure-themes/stories/components/iconButton.stories.tsx +++ b/packages/react-examples/src/azure-themes/stories/components/iconButton.stories.tsx @@ -2,6 +2,10 @@ import * as React from 'react'; import { IIconProps, IContextualMenuProps, Stack, Link } from '@fluentui/react'; import { IconButton } from '@fluentui/react/lib/Button'; +export default { + title: 'Components/IconButton', +}; + export interface IButtonExampleProps { // These are set based on the toggles shown above the examples (not needed in real code) disabled?: boolean; diff --git a/packages/react-examples/src/azure-themes/stories/components/iconTooltip.stories.tsx b/packages/react-examples/src/azure-themes/stories/components/iconTooltip.stories.tsx index 85cb27a90eb46e..fd42e29f02ce3a 100644 --- a/packages/react-examples/src/azure-themes/stories/components/iconTooltip.stories.tsx +++ b/packages/react-examples/src/azure-themes/stories/components/iconTooltip.stories.tsx @@ -4,6 +4,10 @@ import { TooltipHost, ITooltipHostStyles } from '@fluentui/react/lib/Tooltip'; import { IconButton } from '@fluentui/react/lib/Button'; import { useId } from '@fluentui/react-hooks'; +export default { + title: 'Components/IconTooltip', +}; + export interface IButtonExampleProps { // These are set based on the toggles shown above the examples (not needed in real code) disabled?: boolean; diff --git a/packages/react-examples/src/azure-themes/stories/components/messageBar.stories.tsx b/packages/react-examples/src/azure-themes/stories/components/messageBar.stories.tsx index c082dd0eac3361..966c665c29f8a6 100644 --- a/packages/react-examples/src/azure-themes/stories/components/messageBar.stories.tsx +++ b/packages/react-examples/src/azure-themes/stories/components/messageBar.stories.tsx @@ -2,6 +2,10 @@ import * as React from 'react'; import { Link, Stack, StackItem, MessageBar, MessageBarType, ChoiceGroup, IStackProps } from '@fluentui/react'; import { DefaultButton, MessageBarButton, PrimaryButton } from '@fluentui/react/lib/Button'; +export default { + title: 'Components/MessageBar', +}; + interface IExampleProps { resetChoice?: () => void; } diff --git a/packages/react-examples/src/azure-themes/stories/components/slider.stories.tsx b/packages/react-examples/src/azure-themes/stories/components/slider.stories.tsx index f63e29eda5091d..c98f81ffb62486 100644 --- a/packages/react-examples/src/azure-themes/stories/components/slider.stories.tsx +++ b/packages/react-examples/src/azure-themes/stories/components/slider.stories.tsx @@ -1,6 +1,10 @@ import * as React from 'react'; import { Slider, IStackTokens, Stack, IStackStyles } from '@fluentui/react'; +export default { + title: 'Components/Slider', +}; + const stackStyles: Partial = { root: { maxWidth: 1000 } }; const stackTokens: IStackTokens = { childrenGap: 20 }; const sliderAriaValueText = (value: number) => `${value} percent`; diff --git a/packages/react-examples/src/azure-themes/stories/components/spinner.stories.tsx b/packages/react-examples/src/azure-themes/stories/components/spinner.stories.tsx index e52a6803f41d34..d829aef530c3fc 100644 --- a/packages/react-examples/src/azure-themes/stories/components/spinner.stories.tsx +++ b/packages/react-examples/src/azure-themes/stories/components/spinner.stories.tsx @@ -3,6 +3,10 @@ import { Spinner, SpinnerSize } from '@fluentui/react/lib/Spinner'; import { Label } from '@fluentui/react/lib/Label'; import { IStackProps, Stack } from '@fluentui/react/lib/Stack'; +export default { + title: 'Components/Spinner', +}; + export const SpinnerBasicExample: React.FunctionComponent = () => { // This is just for laying out the label and spinner (spinners don't have to be inside a Stack) const rowProps: IStackProps = { horizontal: true, verticalAlign: 'center' }; diff --git a/packages/react-examples/src/azure-themes/stories/components/splitButton.stories.tsx b/packages/react-examples/src/azure-themes/stories/components/splitButton.stories.tsx index 93d15f9b38035e..c969b6b4a97517 100644 --- a/packages/react-examples/src/azure-themes/stories/components/splitButton.stories.tsx +++ b/packages/react-examples/src/azure-themes/stories/components/splitButton.stories.tsx @@ -2,6 +2,9 @@ import * as React from 'react'; import { IContextualMenuProps, Stack } from '@fluentui/react'; // IStackTokens import { DefaultButton } from '@fluentui/react/lib/Button'; +export default { + title: 'Components/SplitButton', +}; export interface IButtonExampleProps { // These are set based on the toggles shown above the examples (not needed in real code) disabled?: boolean; diff --git a/packages/react-examples/src/azure-themes/stories/components/tags.stories.tsx b/packages/react-examples/src/azure-themes/stories/components/tags.stories.tsx index 0e75fcd3739e92..403e3bbdf40e3c 100644 --- a/packages/react-examples/src/azure-themes/stories/components/tags.stories.tsx +++ b/packages/react-examples/src/azure-themes/stories/components/tags.stories.tsx @@ -4,6 +4,10 @@ import { TagPicker, IBasePicker, ITag } from '@fluentui/react/lib/Pickers'; import { Checkbox, ICheckboxStyles } from '@fluentui/react/lib/Checkbox'; import { mergeStyles } from '@fluentui/react/lib/Styling'; +export default { + title: 'Components/TagPicker', +}; + const rootClass = mergeStyles({ maxWidth: 500, }); diff --git a/packages/react-examples/src/azure-themes/stories/components/toggle.stories.tsx b/packages/react-examples/src/azure-themes/stories/components/toggle.stories.tsx index 346d85e59c27ef..3cea278ab5e129 100644 --- a/packages/react-examples/src/azure-themes/stories/components/toggle.stories.tsx +++ b/packages/react-examples/src/azure-themes/stories/components/toggle.stories.tsx @@ -2,6 +2,10 @@ import * as React from 'react'; import { Toggle } from '@fluentui/react/lib/Toggle'; import { Stack, IStackTokens } from '@fluentui/react/lib/Stack'; +export default { + title: 'Components/Toggle', +}; + const stackTokens: IStackTokens = { childrenGap: 10 }; export const ToggleBasicExample: React.FunctionComponent = () => { diff --git a/packages/react-examples/src/azure-themes/stories/components/tooltip.stories.tsx b/packages/react-examples/src/azure-themes/stories/components/tooltip.stories.tsx index 0949256f96c4b3..f53e650abb18a3 100644 --- a/packages/react-examples/src/azure-themes/stories/components/tooltip.stories.tsx +++ b/packages/react-examples/src/azure-themes/stories/components/tooltip.stories.tsx @@ -3,6 +3,10 @@ import { DefaultButton } from '@fluentui/react/lib/Button'; import { TooltipHost, ITooltipHostStyles } from '@fluentui/react/lib/Tooltip'; import { useId } from '@fluentui/react-hooks'; +export default { + title: 'Components/Tooltip', +}; + const calloutProps = { gapSpace: 0 }; // The TooltipHost root uses display: inline by default. // If that's causing sizing issues or tooltip positioning issues, try overriding to inline-block. diff --git a/packages/react-examples/src/react-cards/Card/index.stories.tsx b/packages/react-examples/src/react-cards/Card/index.stories.tsx new file mode 100644 index 00000000000000..e58942fb1e9156 --- /dev/null +++ b/packages/react-examples/src/react-cards/Card/index.stories.tsx @@ -0,0 +1,15 @@ +import * as React from 'react'; + +import { CardConfigureExample } from './Card.Configure.Example'; +import { CardHorizontalExample } from './Card.Horizontal.Example'; +import { CardVerticalExample } from './Card.Vertical.Example'; + +export const Configure = () => ; + +export const Horizontal = () => ; + +export const Vertical = () => ; + +export default { + title: 'Components/Card', +}; diff --git a/packages/react-examples/src/react-charting/AreaChart/index.stories.tsx b/packages/react-examples/src/react-charting/AreaChart/index.stories.tsx new file mode 100644 index 00000000000000..618bad7d842e6a --- /dev/null +++ b/packages/react-examples/src/react-charting/AreaChart/index.stories.tsx @@ -0,0 +1,19 @@ +import * as React from 'react'; + +import { AreaChartBasicExample } from './AreaChart.Basic.Example'; +import { AreaChartCustomAccessibilityExample } from './AreaChart.CustomAccessibility.Example'; +import { AreaChartDataChangeExample } from './AreaChart.DataChange.Example'; +import { AreaChartLargeDataExample } from './AreaChart.LargeData.Example'; +import { AreaChartMultipleExample } from './AreaChart.Multiple.Example'; +import { AreaChartStyledExample } from './AreaChart.Styled.Example'; + +export const Basic = () => ; +export const CustomAccessibility = () => ; +export const DataChange = () => ; +export const LargeData = () => ; +export const Multiple = () => ; +export const Styled = () => ; + +export default { + title: 'Components/AreaChart', +}; diff --git a/packages/react-examples/src/react-charting/DonutChart/index.stories.tsx b/packages/react-examples/src/react-charting/DonutChart/index.stories.tsx new file mode 100644 index 00000000000000..94732d49f5959b --- /dev/null +++ b/packages/react-examples/src/react-charting/DonutChart/index.stories.tsx @@ -0,0 +1,18 @@ +import * as React from 'react'; + +import { DonutChartBasicExample } from './DonutChart.Basic.Example'; +import { DonutChartCustomAccessibilityExample } from './DonutChart.CustomAccessibility.Example'; +import { DonutChartCustomCalloutExample } from './DonutChart.CustomCallout.Example'; +import { DonutChartDynamicExample } from './DonutChart.Dynamic.Example'; + +export const Basic = () => ; + +export const CustomAccessibility = () => ; + +export const CustomCallout = () => ; + +export const Dynamic = () => ; + +export default { + title: 'Components/DonutChart', +}; diff --git a/packages/react-examples/src/react-charting/GaugeChart/index.stories.tsx b/packages/react-examples/src/react-charting/GaugeChart/index.stories.tsx new file mode 100644 index 00000000000000..0b69cfb9866a19 --- /dev/null +++ b/packages/react-examples/src/react-charting/GaugeChart/index.stories.tsx @@ -0,0 +1,12 @@ +import * as React from 'react'; + +import { GaugeChartBasicExample } from './GaugeChart.Basic.Example'; +import { GaugeChartSingleSegmentExample } from './GaugeChart.SingleSegment.Example'; + +export const Basic = () => ; + +export const SingleSegment = () => ; + +export default { + title: 'Components/GaugeChart', +}; diff --git a/packages/react-examples/src/react-charting/GroupedVerticalBarChart/index.stories.tsx b/packages/react-examples/src/react-charting/GroupedVerticalBarChart/index.stories.tsx new file mode 100644 index 00000000000000..176c69c3d945f3 --- /dev/null +++ b/packages/react-examples/src/react-charting/GroupedVerticalBarChart/index.stories.tsx @@ -0,0 +1,18 @@ +import * as React from 'react'; + +import { GroupedVerticalBarChartBasicExample } from './GroupedVerticalBarChart.Basic.Example'; +import { GroupedVerticalBarChartCustomAccessibilityExample } from './GroupedVerticalBarChart.CustomAccessibility.Example'; +import { GroupedVerticalBarChartStyledExample } from './GroupedVerticalBarChart.Styled.Example'; +import { GroupedVerticalBarChartTruncatedExample } from './GroupedVerticalBarChart.Truncated.Example'; + +export const Basic = () => ; + +export const CustomAccessibility = () => ; + +export const Styled = () => ; + +export const Truncated = () => ; + +export default { + title: 'Components/GroupedVerticalBarChart', +}; diff --git a/packages/react-examples/src/react-charting/HeatMapChart/index.stories.tsx b/packages/react-examples/src/react-charting/HeatMapChart/index.stories.tsx new file mode 100644 index 00000000000000..600d8189bd4e6a --- /dev/null +++ b/packages/react-examples/src/react-charting/HeatMapChart/index.stories.tsx @@ -0,0 +1,12 @@ +import * as React from 'react'; + +import { HeatMapChartBasicExample } from './HeatMapChartBasic.Example'; +import { HeatMapChartCustomAccessibilityExample } from './HeatMapChartBasic.CustomAccessibility.Example'; + +export const Basic = () => ; + +export const CustomAccessibility = () => ; + +export default { + title: 'Components/HeatMapChart', +}; diff --git a/packages/react-examples/src/react-charting/HorizontalBarChart/index.stories.tsx b/packages/react-examples/src/react-charting/HorizontalBarChart/index.stories.tsx new file mode 100644 index 00000000000000..2f1818191f11d0 --- /dev/null +++ b/packages/react-examples/src/react-charting/HorizontalBarChart/index.stories.tsx @@ -0,0 +1,21 @@ +import * as React from 'react'; + +import { HorizontalBarChartBasicExample } from './HorizontalBarChart.Basic.Example'; +import { HorizontalBarChartBenchmarkExample } from './HorizontalBarChart.Benchmark.Example'; +import { HorizontalBarChartCustomAccessibilityExample } from './HorizontalBarChart.CustomAccessibility.Example'; +import { HorizontalBarChartCustomCalloutExample } from './HorizontalBarChart.CustomCallout.Example'; +import { HorizontalBarChartVariantExample } from './HorizontalBarChart.Variant.Example'; + +export const Basic = () => ; + +export const Benchmark = () => ; + +export const CustomAccessibility = () => ; + +export const CustomCallout = () => ; + +export const Variant = () => ; + +export default { + title: 'Components/HorizontalBarChart', +}; diff --git a/packages/react-examples/src/react-charting/HorizontalBarChartWithAxis/index.stories.tsx b/packages/react-examples/src/react-charting/HorizontalBarChartWithAxis/index.stories.tsx new file mode 100644 index 00000000000000..9819dbae4d6ef9 --- /dev/null +++ b/packages/react-examples/src/react-charting/HorizontalBarChartWithAxis/index.stories.tsx @@ -0,0 +1,15 @@ +import * as React from 'react'; + +import { HorizontalBarChartWithAxisTooltipExample } from './HorizontalBarChartWithAxis.AxisTooltip.Example'; +import { HorizontalBarChartWithAxisBasicExample } from './HorizontalBarChartWithAxis.Basic.Example'; +import { HorizontalBarChartWithAxisStringAxisTooltipExample } from './HorizontalBarChartWithAxis.StringAxisTooltip.Example'; + +export const Basic = () => ; + +export const AxisTooltip = () => ; + +export const StringAxisTooltip = () => ; + +export default { + title: 'Components/HorizontalBarChartWithAxis', +}; diff --git a/packages/react-examples/src/react-charting/Legends/index.stories.tsx b/packages/react-examples/src/react-charting/Legends/index.stories.tsx new file mode 100644 index 00000000000000..d8d3d731b3b3ca --- /dev/null +++ b/packages/react-examples/src/react-charting/Legends/index.stories.tsx @@ -0,0 +1,21 @@ +import * as React from 'react'; + +import { LegendBasicExample } from './Legends.Basic.Example'; +import { LegendsOnChangeExample } from './Legends.OnChange.Example'; +import { LegendOverflowExample } from './Legends.Overflow.Example'; +import { LegendStyledExample } from './Legends.Styled.Example'; +import { LegendWrapLinesExample } from './Legends.WrapLines.Example'; + +export const Basic = () => ; + +export const OnChange = () => ; + +export const Overflow = () => ; + +export const Styled = () => ; + +export const WrapLines = () => ; + +export default { + title: 'Components/Legends', +}; diff --git a/packages/react-examples/src/react-charting/LineChart/index.stories.tsx b/packages/react-examples/src/react-charting/LineChart/index.stories.tsx new file mode 100644 index 00000000000000..da3527f653375e --- /dev/null +++ b/packages/react-examples/src/react-charting/LineChart/index.stories.tsx @@ -0,0 +1,30 @@ +import * as React from 'react'; + +import { LineChartBasicExample } from './LineChart.Basic.Example'; +import { LineChartCustomAccessibilityExample } from './LineChart.CustomAccessibility.Example'; +import { LineChartCustomLocaleDateAxisExample } from './LineChart.CustomLocaleDateAxis.Example'; +import { LineChartEventsExample } from './LineChart.Events.Example'; +import { LineChartGapsExample } from './LineChart.Gaps.Example'; +import { LineChartLargeDataExample } from './LineChart.LargeData.Example'; +import { LineChartMultipleExample } from './LineChart.Multiple.Example'; +import { LineChartStyledExample } from './LineChart.Styled.Example'; + +export const Basic = () => ; + +export const CustomAccessibility = () => ; + +export const CustomLocaleDateAxis = () => ; + +export const Events = () => ; + +export const Gaps = () => ; + +export const LargeData = () => ; + +export const Multiple = () => ; + +export const Styled = () => ; + +export default { + title: 'Components/LineChart', +}; diff --git a/packages/react-examples/src/react-charting/MultiStackedBarChart/index.stories.tsx b/packages/react-examples/src/react-charting/MultiStackedBarChart/index.stories.tsx new file mode 100644 index 00000000000000..b56123aee6483b --- /dev/null +++ b/packages/react-examples/src/react-charting/MultiStackedBarChart/index.stories.tsx @@ -0,0 +1,15 @@ +import * as React from 'react'; + +import { MultiStackedBarChartBasicExample } from './MultiStackedBarChart.Example'; +import { MultiStackedBarChartVariantExample } from './MultiStackedBarChart.Variant.Example'; +import { MultiStackedBarChartWithPlaceholderExample } from './MultiStackedBarChartWithPlaceHolder.Example'; + +export const Basic = () => ; + +export const Variant = () => ; + +export const WithPlaceHolder = () => ; + +export default { + title: 'Components/MultiStackedBarChart', +}; diff --git a/packages/react-examples/src/react-charting/PieChart/index.stories.tsx b/packages/react-examples/src/react-charting/PieChart/index.stories.tsx new file mode 100644 index 00000000000000..1908891e5c6630 --- /dev/null +++ b/packages/react-examples/src/react-charting/PieChart/index.stories.tsx @@ -0,0 +1,12 @@ +import * as React from 'react'; + +import { PieChartBasicExample } from './PieChart.Basic.Example'; +import { PieChartDynamicExample } from './PieChart.Dynamic.Example'; + +export const Basic = () => ; + +export const Dynamic = () => ; + +export default { + title: 'Components/PieChart', +}; diff --git a/packages/react-examples/src/react-charting/SankeyChart/index.stories.tsx b/packages/react-examples/src/react-charting/SankeyChart/index.stories.tsx new file mode 100644 index 00000000000000..2d2f11d82c2e2b --- /dev/null +++ b/packages/react-examples/src/react-charting/SankeyChart/index.stories.tsx @@ -0,0 +1,15 @@ +import * as React from 'react'; + +import { SankeyChartBasicExample } from './SankeyChart.Basic.Example'; +import { SankeyChartInboxExample } from './SankeyChart.Inbox.Example'; +import { SankeyChartRebalanceExample } from './SankeyChart.Rebalance.Example'; + +export const Basic = () => ; + +export const Inbox = () => ; + +export const Rebalance = () => ; + +export default { + title: 'Components/SankeyChart', +}; diff --git a/packages/react-examples/src/react-charting/SparklineChart/index.stories.tsx b/packages/react-examples/src/react-charting/SparklineChart/index.stories.tsx new file mode 100644 index 00000000000000..c91ef3af7ec05b --- /dev/null +++ b/packages/react-examples/src/react-charting/SparklineChart/index.stories.tsx @@ -0,0 +1,9 @@ +import * as React from 'react'; + +import { SparklineChartBasicExample } from './SparklineChart.Basic.Example'; + +export const Basic = () => ; + +export default { + title: 'Components/SparklineChart', +}; diff --git a/packages/react-examples/src/react-charting/StackedBarChart/index.stories.tsx b/packages/react-examples/src/react-charting/StackedBarChart/index.stories.tsx new file mode 100644 index 00000000000000..8a10638c0668b5 --- /dev/null +++ b/packages/react-examples/src/react-charting/StackedBarChart/index.stories.tsx @@ -0,0 +1,33 @@ +import * as React from 'react'; + +import { MultiStackedBarChartCustomAccessibilityExample } from './MultiStackedBarChart.CustomAccessibility.Example'; +import { MultiStackedBarChartExample } from './MultiStackedBarChart.Example'; +import { MultiStackedBarChartWithPlaceholderExample } from './MultiStackedBarChartWithPlaceHolder.Example'; +import { StackedBarChartBaseBarExample } from './StackedBarChart.BaseBar.Example'; +import { StackedBarChartBasicExample } from './StackedBarChart.Basic.Example'; +import { StackedBarChartBenchmarkExample } from './StackedBarChart.Benchmark.Example'; +import { StackedBarChartCustomAccessibilityExample } from './StackedBarChart.CustomAccessibility.Example'; +import { StackedBarChartDynamicExample } from './StackedBarChart.Dynamic.Example'; +import { StackedBarChartMultipleExample } from './StackedBarChart.Multiple.Example'; + +export const MultiStackedBarChartCustomAccessibility = () => ; + +export const MultiStackedBarChart = () => ; + +export const MultiStackedBarChartWithPlaceholder = () => ; + +export const BaseBar = () => ; + +export const Basic = () => ; + +export const Benchmark = () => ; + +export const CustomAccessibility = () => ; + +export const Dynamic = () => ; + +export const Multiple = () => ; + +export default { + title: 'Components/StackedBarChart', +}; diff --git a/packages/react-examples/src/react-charting/TreeChart/index.stories.tsx b/packages/react-examples/src/react-charting/TreeChart/index.stories.tsx new file mode 100644 index 00000000000000..bec37302444806 --- /dev/null +++ b/packages/react-examples/src/react-charting/TreeChart/index.stories.tsx @@ -0,0 +1,24 @@ +import * as React from 'react'; + +import { TreeChartThreeLayerExample } from './TreeChart.ThreeLayer.Example'; +import { TreeChartThreeLayerCompactExample } from './TreeChart.ThreeLayerCompact.Example'; +import { TreeChartThreeLayerCompactDocSiteExample } from './TreeChart.ThreeLayerCompactDocSite.Example'; +import { TreeChartThreeLayerDocSiteExample } from './TreeChart.ThreeLayerDocSite.Example'; +import { TreeChartThreeLayerLongExample } from './TreeChart.ThreeLayerLong.Example'; +import { TreeChartTwoLayerExample } from './TreeChart.TwoLayer.Example'; + +export const ThreeLayer = () => ; + +export const ThreeLayerCompact = () => ; + +export const ThreeLayerCompactDocSite = () => ; + +export const ThreeLayerDocSite = () => ; + +export const ThreeLayerLong = () => ; + +export const TwoLayer = () => ; + +export default { + title: 'Components/TreeChart', +}; diff --git a/packages/react-examples/src/react-charting/VerticalBarChart/index.stories.tsx b/packages/react-examples/src/react-charting/VerticalBarChart/index.stories.tsx new file mode 100644 index 00000000000000..58c8330bcdf1c3 --- /dev/null +++ b/packages/react-examples/src/react-charting/VerticalBarChart/index.stories.tsx @@ -0,0 +1,27 @@ +import * as React from 'react'; + +import { VerticalBarChartTooltipExample } from './VerticalBarChart.AxisTooltip.Example'; +import { VerticalBarChartBasicExample } from './VerticalBarChart.Basic.Example'; +import { VerticalBarChartCustomAccessibilityExample } from './VerticalBarChart.CustomAccessibility.Example'; +import { VerticalBarChartDateAxisExample } from './VerticalBarChart.DateAxis.Example'; +import { VerticalBarChartDynamicExample } from './VerticalBarChart.Dynamic.Example'; +import { VerticalBarChartRotatedLabelExample } from './VerticalBarChart.RotateLabels.Example'; +import { VerticalBarChartStyledExample } from './VerticalBarChart.Styled.Example'; + +export const Basic = () => ; + +export const CustomAccessibility = () => ; + +export const DateAxis = () => ; + +export const Dynamic = () => ; + +export const Styled = () => ; + +export const RotatedLabel = () => ; + +export const Tooltip = () => ; + +export default { + title: 'Components/VerticalBarChart', +}; diff --git a/packages/react-examples/src/react-charting/VerticalStackedBarChart/index.stories.tsx b/packages/react-examples/src/react-charting/VerticalStackedBarChart/index.stories.tsx new file mode 100644 index 00000000000000..6027f9efd35231 --- /dev/null +++ b/packages/react-examples/src/react-charting/VerticalStackedBarChart/index.stories.tsx @@ -0,0 +1,24 @@ +import * as React from 'react'; + +import { VerticalStackedBarChartTooltipExample } from './VerticalStackedBarChart.AxisTooltip.Example'; +import { VerticalStackedBarChartBasicExample } from './VerticalStackedBarChart.Basic.Example'; +import { VerticalStackedBarChartCalloutExample } from './VerticalStackedBarChart.Callout.Example'; +import { VerticalStackedBarChartCustomAccessibilityExample } from './VerticalStackedBarChart.CustomAccessibility.Example'; +import { VerticalStackedBarChartDateAxisExample } from './VerticalStackedBarChart.DateAxis.Example'; +import { VerticalStackedBarChartStyledExample } from './VerticalStackedBarChart.Styled.Example'; + +export const Basic = () => ; + +export const Callout = () => ; + +export const CustomAccessibility = () => ; + +export const DateAxis = () => ; + +export const Styled = () => ; + +export const Tooltip = () => ; + +export default { + title: 'Components/VerticalStackedBarChart', +}; diff --git a/packages/react-examples/src/react-experiments/Chiclet/index.stories.tsx b/packages/react-examples/src/react-experiments/Chiclet/index.stories.tsx new file mode 100644 index 00000000000000..b499e11a342389 --- /dev/null +++ b/packages/react-examples/src/react-experiments/Chiclet/index.stories.tsx @@ -0,0 +1,24 @@ +import * as React from 'react'; + +import { ChicletBasicExample } from './Chiclet.Basic.Example'; +import { ChicletBreadcrumbExample } from './Chiclet.Breadcrumb.Example'; +import { ChicletFooterExample } from './Chiclet.Footer.Example'; +import { ChicletPreviewExample } from './Chiclet.Preview.Example'; +import { ChicletXsmallExample } from './Chiclet.Xsmall.Example'; +import { ChicletXsmallFooterExample } from './Chiclet.Xsmall.Footer.Example'; + +export const Basic = () => ; + +export const Breadcrumb = () => ; + +export const Footer = () => ; + +export const Preview = () => ; + +export const Xsmall = () => ; + +export const XsmallFooter = () => ; + +export default { + title: 'Components/Chiclet', +}; diff --git a/packages/react-examples/src/react-experiments/CollapsibleSection/index.stories.tsx b/packages/react-examples/src/react-experiments/CollapsibleSection/index.stories.tsx new file mode 100644 index 00000000000000..3c4b9bce1db7f3 --- /dev/null +++ b/packages/react-examples/src/react-experiments/CollapsibleSection/index.stories.tsx @@ -0,0 +1,24 @@ +import * as React from 'react'; + +import { CollapsibleSectionAccordionExample } from './CollapsibleSection.Accordion.Example'; +import { CollapsibleSectionBasicExample } from './CollapsibleSection.Basic.Example'; +import { CollapsibleSectionControlledExample } from './CollapsibleSection.Controlled.Example'; +import { CollapsibleSectionRecursiveExample } from './CollapsibleSection.Recursive.Example'; +import { CollapsibleSectionSlotsExample } from './CollapsibleSection.Slots.Example'; +import { CollapsibleSectionStyledExample } from './CollapsibleSection.Styled.Example'; + +export const Accordion = () => ; + +export const Basic = () => ; + +export const Controlled = () => ; + +export const Recursive = () => ; + +export const Slots = () => ; + +export const Styled = () => ; + +export default { + title: 'Components/CollapsibleSection', +}; diff --git a/packages/react-examples/src/react-experiments/FileTypeIcon/index.stories.tsx b/packages/react-examples/src/react-experiments/FileTypeIcon/index.stories.tsx new file mode 100644 index 00000000000000..4bb76233fae783 --- /dev/null +++ b/packages/react-examples/src/react-experiments/FileTypeIcon/index.stories.tsx @@ -0,0 +1,9 @@ +import * as React from 'react'; + +import { FileTypeIconBasicExample } from './FileTypeIcon.Basic.Example'; + +export const Basic = () => ; + +export default { + title: 'Components/FileTypeIcon', +}; diff --git a/packages/react-examples/src/react-experiments/FloatingPeopleSuggestions/index.stories.tsx b/packages/react-examples/src/react-experiments/FloatingPeopleSuggestions/index.stories.tsx new file mode 100644 index 00000000000000..93d1737a6a680e --- /dev/null +++ b/packages/react-examples/src/react-experiments/FloatingPeopleSuggestions/index.stories.tsx @@ -0,0 +1,15 @@ +import * as React from 'react'; + +import { FloatingPeopleSuggestionsCustomRenderExample } from './FloatingPeopleSuggestions.CustomRender.Example'; +import { FloatingPeopleSuggestionsExample } from './FloatingPeopleSuggestions.Example'; +import { FloatingPeopleSuggestionsHeaderFooterExample } from './FloatingPeopleSuggestions.HeaderFooter.Example'; + +export const FloatingPeopleSuggestionsCustomRender = () => ; + +export const FloatingPeopleSuggestions = () => ; + +export const FloatingPeopleSuggestionsHeaderFooter = () => ; + +export default { + title: 'Components/FloatingSuggestions', +}; diff --git a/packages/react-examples/src/react-experiments/FolderCover/index.stories.tsx b/packages/react-examples/src/react-experiments/FolderCover/index.stories.tsx new file mode 100644 index 00000000000000..bea4df30c62124 --- /dev/null +++ b/packages/react-examples/src/react-experiments/FolderCover/index.stories.tsx @@ -0,0 +1,9 @@ +import * as React from 'react'; + +import { FolderCoverBasicExample } from './FolderCover.Basic.Example'; + +export const Basic = () => ; + +export default { + title: 'Components/FolderCover', +}; diff --git a/packages/react-examples/src/react-experiments/LayoutGroup/index.stories.tsx b/packages/react-examples/src/react-experiments/LayoutGroup/index.stories.tsx new file mode 100644 index 00000000000000..171f1904f0acd8 --- /dev/null +++ b/packages/react-examples/src/react-experiments/LayoutGroup/index.stories.tsx @@ -0,0 +1,9 @@ +import * as React from 'react'; + +import { LayoutGroupBasicExample } from './LayoutGroup.Basic.Example'; + +export const Basic = () => ; + +export default { + title: 'Components/LayoutGroup', +}; diff --git a/packages/react-examples/src/react-experiments/MicroFeedback/index.stories.tsx b/packages/react-examples/src/react-experiments/MicroFeedback/index.stories.tsx new file mode 100644 index 00000000000000..63b8bac3a0019f --- /dev/null +++ b/packages/react-examples/src/react-experiments/MicroFeedback/index.stories.tsx @@ -0,0 +1,15 @@ +import * as React from 'react'; + +import { MicroFeedbackExample } from './MicroFeedback.Example'; +import { MicroFeedbackCalloutExample } from './MicroFeedbackCallout.Example'; +import { MicroFeedbackStackExample } from './MicroFeedbackStack.Example'; + +export const Basic = () => ; + +export const Callout = () => ; + +export const Stack = () => ; + +export default { + title: 'Components/MicroFeedback', +}; diff --git a/packages/react-examples/src/react-experiments/Pagination/index.stories.tsx b/packages/react-examples/src/react-experiments/Pagination/index.stories.tsx new file mode 100644 index 00000000000000..f9d94a845096ed --- /dev/null +++ b/packages/react-examples/src/react-experiments/Pagination/index.stories.tsx @@ -0,0 +1,18 @@ +import * as React from 'react'; + +import { PaginationButtonsBasicExample } from './Pagination.Buttons.Basic.Example'; +import { PaginationButtonsCustomizationExample } from './Pagination.Buttons.Customization.Example'; +import { PaginationButtonsCustomizationRoundExample } from './Pagination.Buttons.Customization.Round.Example'; +import { PaginationComboBoxExample } from './Pagination.ComboBox.Example'; + +export const ButtonsBasic = () => ; + +export const ButtonsCustomization = () => ; + +export const ButtonsCustomizationRound = () => ; + +export const ComboBox = () => ; + +export default { + title: 'Components/Pagination', +}; diff --git a/packages/react-examples/src/react-experiments/Persona/index.stories.tsx b/packages/react-examples/src/react-experiments/Persona/index.stories.tsx new file mode 100644 index 00000000000000..a47ed9adcd56ba --- /dev/null +++ b/packages/react-examples/src/react-experiments/Persona/index.stories.tsx @@ -0,0 +1,12 @@ +import * as React from 'react'; + +import { PersonaExample } from './Persona.Example'; +import { VerticalPersonaExample } from './VerticalPersona.Example'; + +export const Basic = () => ; + +export const Vertical = () => ; + +export default { + title: 'Components/Persona', +}; diff --git a/packages/react-examples/src/react-experiments/PersonaCoin/index.stories.tsx b/packages/react-examples/src/react-experiments/PersonaCoin/index.stories.tsx new file mode 100644 index 00000000000000..886cfc086c13c5 --- /dev/null +++ b/packages/react-examples/src/react-experiments/PersonaCoin/index.stories.tsx @@ -0,0 +1,12 @@ +import * as React from 'react'; + +import { PersonaCoinExample } from './PersonaCoin.Example'; +import { PersonaCoinSizeAndColorExample } from './PersonaCoinSizeAndColor.Example'; + +export const Basic = () => ; + +export const SizeAndColor = () => ; + +export default { + title: 'Components/PersonaCoin', +}; diff --git a/packages/react-examples/src/react-experiments/SelectedPeopleList/index.stories.tsx b/packages/react-examples/src/react-experiments/SelectedPeopleList/index.stories.tsx new file mode 100644 index 00000000000000..072324dd51ba5a --- /dev/null +++ b/packages/react-examples/src/react-experiments/SelectedPeopleList/index.stories.tsx @@ -0,0 +1,27 @@ +import * as React from 'react'; + +import { SelectedPeopleListBasicDragDropExample } from './SelectedPeopleList.Basic.DragDrop.Example'; +import { SelectedPeopleListBasicExample } from './SelectedPeopleList.Basic.Example'; +import { SelectedPeopleListDragDropBetweenWellsExample } from './SelectedPeopleList.DragDropBetweenWells.Example'; +import { SelectedPeopleListWithContextMenuExample } from './SelectedPeopleList.WithContextMenu.Example'; +import { SelectedPeopleListWithEditExample } from './SelectedPeopleList.WithEdit.Example'; +import { SelectedPeopleListWithEditInContextMenuExample } from './SelectedPeopleList.WithEditInContextMenu.Example'; +import { SelectedPeopleListWithGroupExpandExample } from './SelectedPeopleList.WithGroupExpand.Example'; + +export const BasicDragDrop = () => ; + +export const Basic = () => ; + +export const DragDropBetweenWells = () => ; + +export const WithContextMenu = () => ; + +export const WithEdit = () => ; + +export const WithEditInContextMenu = () => ; + +export const WithGroupExpand = () => ; + +export default { + title: 'Components/SelectedPeopleList', +}; diff --git a/packages/react-examples/src/react-experiments/Sidebar/index.stories.tsx b/packages/react-examples/src/react-experiments/Sidebar/index.stories.tsx new file mode 100644 index 00000000000000..374f9b52e004f0 --- /dev/null +++ b/packages/react-examples/src/react-experiments/Sidebar/index.stories.tsx @@ -0,0 +1,12 @@ +import * as React from 'react'; + +import { SidebarBasicExample } from './Sidebar.Basic.Example'; +import { SidebarCollapsibleExample } from './Sidebar.Collapsed.Example'; + +export const Basic = () => ; + +export const Collapsible = () => ; + +export default { + title: 'Components/Sidebar', +}; diff --git a/packages/react-examples/src/react-experiments/Signals/index.stories.tsx b/packages/react-examples/src/react-experiments/Signals/index.stories.tsx new file mode 100644 index 00000000000000..58365c59bbfa76 --- /dev/null +++ b/packages/react-examples/src/react-experiments/Signals/index.stories.tsx @@ -0,0 +1,12 @@ +import * as React from 'react'; + +import { SignalFieldBasicExample } from './SignalField.Basic.Example'; +import { SignalsBasicExample } from './Signals.Basic.Example'; + +export const SignalFieldBasic = () => ; + +export const Basic = () => ; + +export default { + title: 'Components/Signals', +}; diff --git a/packages/react-examples/src/react-experiments/Slider/index.stories.tsx b/packages/react-examples/src/react-experiments/Slider/index.stories.tsx new file mode 100644 index 00000000000000..4f2d4b632af28b --- /dev/null +++ b/packages/react-examples/src/react-experiments/Slider/index.stories.tsx @@ -0,0 +1,12 @@ +import * as React from 'react'; + +import { SliderExample } from './Slider.Example'; +import { SliderVerticalExample } from './Slider.Vertical.Example'; + +export const Basic = () => ; + +export const Vertical = () => ; + +export default { + title: 'Components/Slider', +}; diff --git a/packages/react-examples/src/react-experiments/Theming/index.stories.tsx b/packages/react-examples/src/react-experiments/Theming/index.stories.tsx new file mode 100644 index 00000000000000..99e16e8a8ccf9f --- /dev/null +++ b/packages/react-examples/src/react-experiments/Theming/index.stories.tsx @@ -0,0 +1,12 @@ +import * as React from 'react'; + +import { ThemingSchemesCustomExample } from './Theming.Schemes.Custom.Example'; +import { ThemingSchemesVariantExample } from './Theming.Schemes.Variant.Example'; + +export const SchemesCustom = () => ; + +export const SchemesVariant = () => ; + +export default { + title: 'Components/Theming', +}; diff --git a/packages/react-examples/src/react-experiments/Tile/index.stories.tsx b/packages/react-examples/src/react-experiments/Tile/index.stories.tsx new file mode 100644 index 00000000000000..23094560e58dfe --- /dev/null +++ b/packages/react-examples/src/react-experiments/Tile/index.stories.tsx @@ -0,0 +1,15 @@ +import * as React from 'react'; + +import { TileDocumentExample } from './Tile.Document.Example'; +import { TileFolderExample } from './Tile.Folder.Example'; +import { TileMediaExample } from './Tile.Media.Example'; + +export const Document = () => ; + +export const Folder = () => ; + +export const Media = () => ; + +export default { + title: 'Components/Tile', +}; diff --git a/packages/react-examples/src/react-experiments/TilesList/index.stories.tsx b/packages/react-examples/src/react-experiments/TilesList/index.stories.tsx new file mode 100644 index 00000000000000..6362afbaef12f6 --- /dev/null +++ b/packages/react-examples/src/react-experiments/TilesList/index.stories.tsx @@ -0,0 +1,17 @@ +import * as React from 'react'; + +import { TilesListBasicExample } from './TilesList.Basic.Example'; +import { TilesListDocumentExample } from './TilesList.Document.Example'; +import { TilesListMediaExample } from './TilesList.Media.Example'; + +export const Basic = () => ; + +export const DocumentSmall = () => ; + +export const DocumentLarge = () => ; + +export const Media = () => ; + +export default { + title: 'Components/TilesList', +}; diff --git a/packages/react-examples/src/react-experiments/UnifiedPeoplePicker/index.stories.tsx b/packages/react-examples/src/react-experiments/UnifiedPeoplePicker/index.stories.tsx new file mode 100644 index 00000000000000..3a8346e7ac91bf --- /dev/null +++ b/packages/react-examples/src/react-experiments/UnifiedPeoplePicker/index.stories.tsx @@ -0,0 +1,15 @@ +import * as React from 'react'; + +import { DoubleUnifiedPeoplePickerExample } from './DoubleUnifiedPeoplePicker.Example'; +import { UnifiedPeoplePickerExample } from './UnifiedPeoplePicker.Example'; +import { UnifiedPeoplePickerWithEditExample } from './UnifiedPeoplePicker.WithEdit.Example'; + +export const Double = () => ; + +export const Basic = () => ; + +export const WithEdit = () => ; + +export default { + title: 'Components/UnifiedPeoplePicker', +}; diff --git a/packages/react-examples/src/react-experiments/VirtualizedList/index.stories.tsx b/packages/react-examples/src/react-experiments/VirtualizedList/index.stories.tsx new file mode 100644 index 00000000000000..ad5bb71c38c322 --- /dev/null +++ b/packages/react-examples/src/react-experiments/VirtualizedList/index.stories.tsx @@ -0,0 +1,12 @@ +import * as React from 'react'; + +import { VirtualizedListBasicExample } from './VirtualizedList.Basic.Example'; +import { VirtualizedListBasicExample2 } from './VirtualizedList.Basic2.Example'; + +export const Basic = () => ; + +export const Basic2 = () => ; + +export default { + title: 'Components/VirtualizedList', +}; diff --git a/packages/react-examples/src/react-focus/FocusZone/index.stories.tsx b/packages/react-examples/src/react-focus/FocusZone/index.stories.tsx new file mode 100644 index 00000000000000..1cc203682ffa17 --- /dev/null +++ b/packages/react-examples/src/react-focus/FocusZone/index.stories.tsx @@ -0,0 +1,13 @@ +export { FocusZoneDisabledExample as Disabled } from './FocusZone.Disabled.Example'; + +export { FocusZoneHorizontalMenuExample as HorizontalMenu } from './FocusZone.HorizontalMenu.Example'; + +export { FocusZoneListExample as List } from './FocusZone.List.Example'; + +export { FocusZonePhotosExample as Photos } from './FocusZone.Photos.Example'; + +export { FocusZoneTabbableExample as Tabbable } from './FocusZone.Tabbable.Example'; + +export default { + title: 'Components/FocusZone', +}; diff --git a/packages/react-examples/src/react/ActivityItem/index.stories.tsx b/packages/react-examples/src/react/ActivityItem/index.stories.tsx new file mode 100644 index 00000000000000..24bae7f98fe7d1 --- /dev/null +++ b/packages/react-examples/src/react/ActivityItem/index.stories.tsx @@ -0,0 +1,9 @@ +export { ActivityItemBasicExample as Basic } from './ActivityItem.Basic.Example'; + +export { ActivityItemCompactExample as Compact } from './ActivityItem.Compact.Example'; + +export { ActivityItemPersonaExample as Persona } from './ActivityItem.Persona.Example'; + +export default { + title: 'Components/ActivityItem', +}; diff --git a/packages/react-examples/src/react/Announced/index.stories.tsx b/packages/react-examples/src/react/Announced/index.stories.tsx new file mode 100644 index 00000000000000..86429f3d762c11 --- /dev/null +++ b/packages/react-examples/src/react/Announced/index.stories.tsx @@ -0,0 +1,11 @@ +export { AnnouncedBulkOperationsExample as BulkOperations } from './Announced.BulkOperations.Example'; + +export { AnnouncedLazyLoadingExample as LazyLoading } from './Announced.LazyLoading.Example'; + +export { AnnouncedQuickActionsExample as QuickActions } from './Announced.QuickActions.Example'; + +export { AnnouncedSearchResultsExample as SearchResults } from './Announced.SearchResults.Example'; + +export default { + title: 'Components/Announced', +}; diff --git a/packages/react-examples/src/react/Breadcrumb/index.stories.tsx b/packages/react-examples/src/react/Breadcrumb/index.stories.tsx new file mode 100644 index 00000000000000..ec1221e0b123da --- /dev/null +++ b/packages/react-examples/src/react/Breadcrumb/index.stories.tsx @@ -0,0 +1,9 @@ +export { BreadcrumbBasicExample as Basic } from './Breadcrumb.Basic.Example'; + +export { BreadcrumbCollapsingExample as Collapsing } from './Breadcrumb.Collapsing.Example'; + +export { BreadcrumbStaticExample as Static } from './Breadcrumb.Static.Example'; + +export default { + title: 'Components/Breadcrumb', +}; diff --git a/packages/react-examples/src/react/Button/index.stories.tsx b/packages/react-examples/src/react/Button/index.stories.tsx new file mode 100644 index 00000000000000..c65c4d554aa2b6 --- /dev/null +++ b/packages/react-examples/src/react/Button/index.stories.tsx @@ -0,0 +1,27 @@ +export { ButtonActionExample as Action } from './Button.Action.Example'; + +export { ButtonAnchorExample as Anchor } from './Button.Anchor.Example'; + +export { ButtonCommandExample as Command } from './Button.Command.Example'; + +export { ButtonCommandBarExample as CommandBar } from './Button.CommandBar.Example'; + +export { ButtonCompoundExample as Compound } from './Button.Compound.Example'; + +export { ButtonContextualMenuExample as ContextualMenu } from './Button.ContextualMenu.Example'; + +export { ButtonSplitCustomExample as CustomSplit } from './Button.CustomSplit.Example'; + +export { ButtonDefaultExample as Default } from './Button.Default.Example'; + +export { ButtonIconExample as Icon } from './Button.Icon.Example'; + +export { ButtonIconWithTooltipExample as IconWithTooltip } from './Button.IconWithTooltip.Example'; + +export { ButtonSplitExample as Split } from './Button.Split.Example'; + +export { ButtonToggleExample as Toggle } from './Button.Toggle.Example'; + +export default { + title: 'Components/Button', +}; diff --git a/packages/react-examples/src/react/Calendar/index.stories.tsx b/packages/react-examples/src/react/Calendar/index.stories.tsx new file mode 100644 index 00000000000000..000a1348d75de0 --- /dev/null +++ b/packages/react-examples/src/react/Calendar/index.stories.tsx @@ -0,0 +1,29 @@ +export { CalendarButtonExample as Button } from './Calendar.Button.Example'; + +export { CalendarInlineContiguousWorkWeekDaysExample as InlineContiguousWorkWeekDays } from './Calendar.Inline.ContiguousWorkWeekDays.Example'; + +export { CalendarInlineCustomDayCellRefExample as InlineCustomDayCellRef } from './Calendar.Inline.CustomDayCellRef.Example'; + +export { CalendarInlineDateBoundariesExample as InlineDateBoundaries } from './Calendar.Inline.DateBoundaries.Example'; + +export { CalendarInlineExample as Inline } from './Calendar.Inline.Example'; + +export { CalendarInlineMarkedDaysExample as InlineMarkedDays } from './Calendar.Inline.MarkedDays.Example'; + +export { CalendarInlineMonthOnlyExample as InlineMonthOnly } from './Calendar.Inline.MonthOnly.Example'; + +export { CalendarInlineMonthSelectionExample as InlineMonthSelection } from './Calendar.Inline.MonthSelection.Example'; + +export { CalendarInlineMultidayDayViewExample as InlineMultidayDayView } from './Calendar.Inline.MultidayDayView.Example'; + +export { CalendarInlineNonContiguousWorkWeekDaysExample as InlineNonContiguousWorkWeekDays } from './Calendar.Inline.NonContiguousWorkWeekDays.Example'; + +export { CalendarInlineOverlaidMonthExample as InlineOverlaidMonthPicker } from './Calendar.Inline.OverlaidMonthPicker.Example'; + +export { CalendarInlineWeekNumbersExample as InlineWeekNumbers } from './Calendar.Inline.WeekNumbers.Example'; + +export { CalendarInlineWeekSelectionExample as InlineWeekSelection } from './Calendar.Inline.WeekSelection.Example'; + +export default { + title: 'Components/Calendar', +}; diff --git a/packages/react-examples/src/react/Callout/index.stories.tsx b/packages/react-examples/src/react/Callout/index.stories.tsx new file mode 100644 index 00000000000000..117ba79e4fdf87 --- /dev/null +++ b/packages/react-examples/src/react/Callout/index.stories.tsx @@ -0,0 +1,13 @@ +export { CalloutBasicExample as Basic } from './Callout.Basic.Example'; + +export { CalloutCoverExample as Cover } from './Callout.Cover.Example'; + +export { CalloutDirectionalExample as Directional } from './Callout.Directional.Example'; + +export { CalloutFocusTrapExample as FocusTrap } from './Callout.FocusTrap.Example'; + +export { StatusCalloutExample as Status } from './Callout.Status.Example'; + +export default { + title: 'Components/Callout', +}; diff --git a/packages/react-examples/src/react/Checkbox/index.stories.tsx b/packages/react-examples/src/react/Checkbox/index.stories.tsx new file mode 100644 index 00000000000000..940a1fa928570a --- /dev/null +++ b/packages/react-examples/src/react/Checkbox/index.stories.tsx @@ -0,0 +1,9 @@ +export { CheckboxBasicExample as Basic } from './Checkbox.Basic.Example'; + +export { CheckboxIndeterminateExample as Indeterminate } from './Checkbox.Indeterminate.Example'; + +export { CheckboxOtherExample as Other } from './Checkbox.Other.Example'; + +export default { + title: 'Components/Checkbox', +}; diff --git a/packages/react-examples/src/react/ChoiceGroup/index.stories.tsx b/packages/react-examples/src/react/ChoiceGroup/index.stories.tsx new file mode 100644 index 00000000000000..7d7da3cd583895 --- /dev/null +++ b/packages/react-examples/src/react/ChoiceGroup/index.stories.tsx @@ -0,0 +1,15 @@ +export { ChoiceGroupBasicExample as Basic } from './ChoiceGroup.Basic.Example'; + +export { ChoiceGroupControlledExample as Controlled } from './ChoiceGroup.Controlled.Example'; + +export { ChoiceGroupCustomExample as Custom } from './ChoiceGroup.Custom.Example'; + +export { ChoiceGroupIconExample as Icon } from './ChoiceGroup.Icon.Example'; + +export { ChoiceGroupImageExample as Image } from './ChoiceGroup.Image.Example'; + +export { ChoiceGroupLabelExample as Label } from './ChoiceGroup.Label.Example'; + +export default { + title: 'Components/ChoiceGroup', +}; diff --git a/packages/react-examples/src/react/Coachmark/index.stories.tsx b/packages/react-examples/src/react/Coachmark/index.stories.tsx new file mode 100644 index 00000000000000..3589886535be82 --- /dev/null +++ b/packages/react-examples/src/react/Coachmark/index.stories.tsx @@ -0,0 +1,5 @@ +export { CoachmarkBasicExample as Basic } from './Coachmark.Basic.Example'; + +export default { + title: 'Components/Coachmark', +}; diff --git a/packages/react-examples/src/react/ColorPicker/index.stories.tsx b/packages/react-examples/src/react/ColorPicker/index.stories.tsx new file mode 100644 index 00000000000000..e4662f88c55a1e --- /dev/null +++ b/packages/react-examples/src/react/ColorPicker/index.stories.tsx @@ -0,0 +1,5 @@ +export { ColorPickerBasicExample as Basic } from './ColorPicker.Basic.Example'; + +export default { + title: 'Components/ColorPicker', +}; diff --git a/packages/react-examples/src/react/ComboBox/index.stories.tsx b/packages/react-examples/src/react/ComboBox/index.stories.tsx new file mode 100644 index 00000000000000..0f474cc8fae5ff --- /dev/null +++ b/packages/react-examples/src/react/ComboBox/index.stories.tsx @@ -0,0 +1,23 @@ +export { ComboBoxBasicExample as Basic } from './ComboBox.Basic.Example'; + +export { ComboBoxControlledExample as Controlled } from './ComboBox.Controlled.Example'; + +export { ComboBoxControlledMultiExample as ControlledMulti } from './ComboBox.ControlledMulti.Example'; + +export { ComboBoxCustomStyledExample as CustomStyled } from './ComboBox.CustomStyled.Example'; + +export { ComboBoxErrorHandlingExample as ErrorHandling } from './ComboBox.ErrorHandling.Example'; + +export { ComboBoxFreeInputExample as FreeInput } from './ComboBox.FreeInput.Example'; + +export { ComboBoxInlineExample as Inline } from './ComboBox.Inline.Example'; + +export { ComboBoxSelectAllExample as SelectAll } from './ComboBox.SelectAll.Example'; + +export { ComboBoxTogglesExample as Toggles } from './ComboBox.Toggles.Example'; + +export { ComboBoxVirtualizedExample as Virtualized } from './ComboBox.Virtualized.Example'; + +export default { + title: 'Components/ComboBox', +}; diff --git a/packages/react-examples/src/react/CommandBar/index.stories.tsx b/packages/react-examples/src/react/CommandBar/index.stories.tsx new file mode 100644 index 00000000000000..80423e083efc11 --- /dev/null +++ b/packages/react-examples/src/react/CommandBar/index.stories.tsx @@ -0,0 +1,13 @@ +export { CommandBarBasicExample as Basic } from './CommandBar.Basic.Example'; + +export { CommandBarButtonAsExample as ButtonAs } from './CommandBar.ButtonAs.Example'; + +export { IndividualCommandBarButtonAsExampleWrapper as CommandBarButtonAs } from './CommandBar.CommandBarButtonAs.Example'; + +export { CommandBarLazyExample as Lazy } from './CommandBar.Lazy.Example'; + +export { CommandBarSplitDisabledExample as SplitDisabled } from './CommandBar.SplitDisabled.Example'; + +export default { + title: 'Components/CommandBar', +}; diff --git a/packages/react-examples/src/react/ContextualMenu/index.stories.tsx b/packages/react-examples/src/react/ContextualMenu/index.stories.tsx new file mode 100644 index 00000000000000..9af9a492123b5c --- /dev/null +++ b/packages/react-examples/src/react/ContextualMenu/index.stories.tsx @@ -0,0 +1,37 @@ +export { ContextualMenuBasicExample as Basic } from './ContextualMenu.Basic.Example'; + +export { ContextualMenuCheckmarksExample as Checkmarks } from './ContextualMenu.Checkmarks.Example'; + +export { ContextualMenuCustomizationExample as Customization } from './ContextualMenu.Customization.Example'; + +export { ContextualMenuCustomizationWithNoWrapExample as CustomizationWithNoWrap } from './ContextualMenu.CustomizationWithNoWrap.Example'; + +export { ContextualMenuWithCustomMenuItemExample as CustomMenuItem } from './ContextualMenu.CustomMenuItem.Example'; + +export { ContextualMenuWithCustomMenuListExample as CustomMenuList } from './ContextualMenu.CustomMenuList.Example'; + +export { ContextualMenuDefaultExample as Default } from './ContextualMenu.Default.Example'; + +export { ContextualMenuDirectionalExample as Directional } from './ContextualMenu.Directional.Example'; + +export { ContextualMenuHeaderExample as Header } from './ContextualMenu.Header.Example'; + +export { ContextualMenuIconCustomLayoutExample as IconCustomLayout } from './ContextualMenu.Icon.CustomLayout.Example'; + +export { ContextualMenuIconExample as Icon } from './ContextualMenu.Icon.Example'; + +export { ContextualMenuIconSecondaryTextExample as IconSecondaryText } from './ContextualMenu.Icon.SecondaryText.Example'; + +export { ContextualMenuPersistedExample as Persisted } from './ContextualMenu.Persisted.Example'; + +export { ContextualMenuScreenReaderExample as ScreenReader } from './ContextualMenu.ScreenReader.Example'; + +export { ContextualMenuWithScrollBarExample as ScrollBar } from './ContextualMenu.ScrollBar.Example'; + +export { ContextualMenuSectionExample as Section } from './ContextualMenu.Section.Example'; + +export { ContextualMenuSubmenuExample as Submenu } from './ContextualMenu.Submenu.Example'; + +export default { + title: 'Components/ContextualMenu', +}; diff --git a/packages/react-examples/src/react/DatePicker/index.stories.tsx b/packages/react-examples/src/react/DatePicker/index.stories.tsx new file mode 100644 index 00000000000000..763a88fd962fe9 --- /dev/null +++ b/packages/react-examples/src/react/DatePicker/index.stories.tsx @@ -0,0 +1,19 @@ +export { DatePickerBasicExample as Basic } from './DatePicker.Basic.Example'; + +export { DatePickerBoundedExample as Bounded } from './DatePicker.Bounded.Example'; + +export { DatePickerDisabledExample as Disabled } from './DatePicker.Disabled.Example'; + +export { DatePickerExternalControlsExample as ExternalControls } from './DatePicker.ExternalControls.Example'; + +export { DatePickerFormatExample as Format } from './DatePicker.Format.Example'; + +export { DatePickerInputExample as Input } from './DatePicker.Input.Example'; + +export { DatePickerRequiredExample as Required } from './DatePicker.Required.Example'; + +export { DatePickerWeekNumbersExample as WeekNumbers } from './DatePicker.WeekNumbers.Example'; + +export default { + title: 'Components/DatePicker', +}; diff --git a/packages/react-examples/src/react/DetailsList/index.stories.tsx b/packages/react-examples/src/react/DetailsList/index.stories.tsx new file mode 100644 index 00000000000000..64e9040e0d9831 --- /dev/null +++ b/packages/react-examples/src/react/DetailsList/index.stories.tsx @@ -0,0 +1,69 @@ +import * as React from 'react'; + +import { DetailsListAdvancedExample } from './DetailsList.Advanced.Example'; +import { DetailsListAnimationExample } from './DetailsList.Animation.Example'; +import { DetailsListBasicExample } from './DetailsList.Basic.Example'; +import { DetailsListColumnResizeExample } from './DetailsList.ColumnResize.Example'; +import { DetailsListCompactExample } from './DetailsList.Compact.Example'; +import { DetailsListCustomColumnsExample } from './DetailsList.CustomColumns.Example'; +import { DetailsListCustomFooterExample } from './DetailsList.CustomFooter.Example'; +import { DetailsListCustomGroupHeadersExample } from './DetailsList.CustomGroupHeaders.Example'; +import { DetailsListCustomRowsExample } from './DetailsList.CustomRows.Example'; +import { DetailsListDocumentsExample } from './DetailsList.Documents.Example'; +import { DetailsListDragDropExample } from './DetailsList.DragDrop.Example'; +import { DetailsListGroupedExample } from './DetailsList.Grouped.Example'; +import { DetailsListGroupedLargeExample } from './DetailsList.Grouped.Large.Example'; +import { DetailsListGroupedV2Example } from './DetailsList.GroupedV2.Example'; +import { DetailsListGroupedV2LargeExample } from './DetailsList.GroupedV2.Large.Example'; +import { DetailsListGroupedV2ScrollToIndexExample } from './DetailsList.GroupedV2.ScrollToIndex.Example'; +import { DetailsListKeyboardAccessibleResizeAndReorderExample } from './DetailsList.KeyboardAccessibleResizeAndReorder.Example'; +import { DetailsListKeyboardOverridesExample } from './DetailsList.KeyboardOverrides.Example'; +import { DetailsListNavigatingFocusExample } from './DetailsList.NavigatingFocus.Example'; +import { DetailsListOnRenderExample } from './DetailsList.OnRender.Example'; +import { DetailsListProportionalColumnsExample } from './DetailsList.ProportionalColumns.Example'; + +export const Advanced = () => ; + +export const Animation = () => ; + +export const Basic = () => ; + +export const ColumnResize = () => ; + +export const Compact = () => ; + +export const CustomColumns = () => ; + +export const CustomFooter = () => ; + +export const CustomGroupHeaders = () => ; + +export const CustomRows = () => ; + +export const Documents = () => ; + +export const DragDrop = () => ; + +export const Grouped = () => ; + +export const GroupedLarge = () => ; + +export const GroupedV2 = () => ; + +export const GroupedV2Large = () => ; + +export const GroupedV2ScrollToIndex = () => ; + +export const KeyboardAccessibleResizeAndReorder = () => ; + +export const KeyboardOverrides = () => ; + +export const NavigatingFocus = () => ; + +export const OnRender = () => ; + +export const ProportionalColumns = () => ; + +export default { + title: 'Components/DetailsList', +}; diff --git a/packages/react-examples/src/react/Dialog/index.stories.tsx b/packages/react-examples/src/react/Dialog/index.stories.tsx new file mode 100644 index 00000000000000..cb963353e9b9d6 --- /dev/null +++ b/packages/react-examples/src/react/Dialog/index.stories.tsx @@ -0,0 +1,13 @@ +export { DialogBasicExample as Basic } from './Dialog.Basic.Example'; + +export { DialogBlockingExample as Blocking } from './Dialog.Blocking.Example'; + +export { DialogLargeHeaderExample as LargeHeader } from './Dialog.LargeHeader.Example'; + +export { DialogModelessExample as Modeless } from './Dialog.Modeless.Example'; + +export { DialogTopOffsetFixedExample as TopOffsetFixed } from './Dialog.TopOffsetFixed.Example'; + +export default { + title: 'Components/Dialog', +}; diff --git a/packages/react-examples/src/react/Divider/index.stories.tsx b/packages/react-examples/src/react/Divider/index.stories.tsx new file mode 100644 index 00000000000000..d6f7984ba2b63c --- /dev/null +++ b/packages/react-examples/src/react/Divider/index.stories.tsx @@ -0,0 +1,7 @@ +export { VerticalDividerBasicExample as Basic } from './VerticalDivider.Basic.Example'; + +export { VerticalDividerCustomExample as Custom } from './VerticalDivider.Custom.Example'; + +export default { + title: 'Components/Divider', +}; diff --git a/packages/react-examples/src/react/DocumentCard/index.stories.tsx b/packages/react-examples/src/react/DocumentCard/index.stories.tsx new file mode 100644 index 00000000000000..50ad4ee43636f4 --- /dev/null +++ b/packages/react-examples/src/react/DocumentCard/index.stories.tsx @@ -0,0 +1,13 @@ +export { DocumentCardBasicExample as Basic } from './DocumentCard.Basic.Example'; + +export { DocumentCardCompactExample as Compact } from './DocumentCard.Compact.Example'; + +export { DocumentCardCompleteExample as Complete } from './DocumentCard.Complete.Example'; + +export { DocumentCardConversationExample as Conversation } from './DocumentCard.Conversation.Example'; + +export { DocumentCardImageExample as Image } from './DocumentCard.Image.Example'; + +export default { + title: 'Components/DocumentCard', +}; diff --git a/packages/react-examples/src/react/Dropdown/index.stories.tsx b/packages/react-examples/src/react/Dropdown/index.stories.tsx new file mode 100644 index 00000000000000..e42f0c05b7cf6b --- /dev/null +++ b/packages/react-examples/src/react/Dropdown/index.stories.tsx @@ -0,0 +1,19 @@ +export { DropdownBasicExample as Basic } from './Dropdown.Basic.Example'; + +export { DropdownControlledExample as Controlled } from './Dropdown.Controlled.Example'; + +export { DropdownControlledMultiExample as ControlledMulti } from './Dropdown.ControlledMulti.Example'; + +export { DropdownCustomExample as Custom } from './Dropdown.Custom.Example'; + +export { DropdownErrorExample as Error } from './Dropdown.Error.Example'; + +export { DropdownRequiredExample as Required } from './Dropdown.Required.Example'; + +export { DropdownSelectStyleExample as SelectStyle } from './Dropdown.SelectStyle.Example'; + +export { DropdownWrappingExample as Wrapping } from './Dropdown.Wrapping.Example'; + +export default { + title: 'Components/Dropdown', +}; diff --git a/packages/react-examples/src/react/ExtendedPeoplePicker/index.stories.tsx b/packages/react-examples/src/react/ExtendedPeoplePicker/index.stories.tsx new file mode 100644 index 00000000000000..0194938dc890bc --- /dev/null +++ b/packages/react-examples/src/react/ExtendedPeoplePicker/index.stories.tsx @@ -0,0 +1,11 @@ +import * as React from 'react'; + +export { ExtendedPeoplePickerBasicExample as Basic } from './ExtendedPeoplePicker.Basic.Example'; + +import { ExtendedPeoplePickerControlledExample } from './ExtendedPeoplePicker.Controlled.Example'; + +export const Controlled = () => ; + +export default { + title: 'Components/ExtendedPeoplePicker', +}; diff --git a/packages/react-examples/src/react/ExtendedPicker/index.stories.tsx b/packages/react-examples/src/react/ExtendedPicker/index.stories.tsx new file mode 100644 index 00000000000000..58919d363eaaaa --- /dev/null +++ b/packages/react-examples/src/react/ExtendedPicker/index.stories.tsx @@ -0,0 +1,11 @@ +import * as React from 'react'; + +export { ExtendedPeoplePickerBasicExample as Basic } from './ExtendedPeoplePicker.Basic.Example'; + +import { ExtendedPeoplePickerControlledExample } from './ExtendedPeoplePicker.Controlled.Example'; + +export const Controlled = () => ; + +export default { + title: 'Components/ExtendedPicker', +}; diff --git a/packages/react-examples/src/react/Facepile/index.stories.tsx b/packages/react-examples/src/react/Facepile/index.stories.tsx new file mode 100644 index 00000000000000..39fca9eebca089 --- /dev/null +++ b/packages/react-examples/src/react/Facepile/index.stories.tsx @@ -0,0 +1,9 @@ +export { FacepileAddFaceExample as AddFace } from './Facepile.AddFace.Example'; + +export { FacepileBasicExample as Basic } from './Facepile.Basic.Example'; + +export { FacepileOverflowExample as Overflow } from './Facepile.Overflow.Example'; + +export default { + title: 'Components/Facepile', +}; diff --git a/packages/react-examples/src/react/FloatingPeoplePicker/index.stories.tsx b/packages/react-examples/src/react/FloatingPeoplePicker/index.stories.tsx new file mode 100644 index 00000000000000..b6e8d159a30a84 --- /dev/null +++ b/packages/react-examples/src/react/FloatingPeoplePicker/index.stories.tsx @@ -0,0 +1,7 @@ +export { FloatingPeoplePickerTypesExample as Basic } from './FloatingPeoplePicker.Basic.Example'; + +export { FloatingPeoplePickerTypesSelectableFooterExample as SelectableFooter } from './FloatingPeoplePicker.SelectableFooter.Example'; + +export default { + title: 'Components/FloatingPeoplePicker', +}; diff --git a/packages/react-examples/src/react/FocusTrapZone/index.stories.tsx b/packages/react-examples/src/react/FocusTrapZone/index.stories.tsx new file mode 100644 index 00000000000000..d90ae98c7a52ae --- /dev/null +++ b/packages/react-examples/src/react/FocusTrapZone/index.stories.tsx @@ -0,0 +1,15 @@ +export { FocusTrapZoneBoxClickExample as BoxClick } from './FocusTrapZone.Box.Click.Example'; + +export { FocusTrapZoneBoxExample as Box } from './FocusTrapZone.Box.Example'; + +export { FocusTrapZoneBoxCustomElementExample as BoxFocusOnCustomElement } from './FocusTrapZone.Box.FocusOnCustomElement.Example'; + +export { FocusTrapZoneDialogInPanelExample as DialogInPanel } from './FocusTrapZone.DialogInPanel.Example'; + +export { FocusTrapZoneFocusZoneExample as FocusZone } from './FocusTrapZone.FocusZone.Example'; + +export { FocusTrapZoneNestedExample as Nested } from './FocusTrapZone.Nested.Example'; + +export default { + title: 'Components/FocusTrapZone', +}; diff --git a/packages/react-examples/src/react/GroupedList/index.stories.tsx b/packages/react-examples/src/react/GroupedList/index.stories.tsx new file mode 100644 index 00000000000000..553cc3025cf63a --- /dev/null +++ b/packages/react-examples/src/react/GroupedList/index.stories.tsx @@ -0,0 +1,15 @@ +export { GroupedListBasicExample as Basic } from './GroupedList.Basic.Example'; + +export { GroupedListCustomExample as Custom } from './GroupedList.Custom.Example'; + +export { GroupedListCustomCheckboxExample as CustomCheckbox } from './GroupedList.CustomCheckbox.Example'; + +export { GroupedListV2BasicExample as V2Basic } from './GroupedListV2.Basic.Example'; + +export { GroupedListV2CustomExample as V2Custom } from './GroupedListV2.Custom.Example'; + +export { GroupedListV2CustomCheckboxExample as V2CustomCheckbox } from './GroupedListV2.CustomCheckbox.Example'; + +export default { + title: 'Components/GroupedList', +}; diff --git a/packages/react-examples/src/react/HoverCard/index.stories.tsx b/packages/react-examples/src/react/HoverCard/index.stories.tsx new file mode 100644 index 00000000000000..d0c4be86b3d33d --- /dev/null +++ b/packages/react-examples/src/react/HoverCard/index.stories.tsx @@ -0,0 +1,13 @@ +export { HoverCardBasicExample as Basic } from './HoverCard.Basic.Example'; + +export { HoverCardEventListenerTargetExample as EventListenerTarget } from './HoverCard.EventListenerTarget.Example'; + +export { HoverCardInstantDismissExample as InstantDismiss } from './HoverCard.InstantDismiss.Example'; + +export { HoverCardPlainCardExample as PlainCard } from './HoverCard.PlainCard.Example'; + +export { HoverCardTargetExample as Target } from './HoverCard.Target.Example'; + +export default { + title: 'Components/HoverCard', +}; diff --git a/packages/react-examples/src/react/Icon/index.stories.tsx b/packages/react-examples/src/react/Icon/index.stories.tsx new file mode 100644 index 00000000000000..857c0362961f39 --- /dev/null +++ b/packages/react-examples/src/react/Icon/index.stories.tsx @@ -0,0 +1,13 @@ +export { IconBasicExample as Basic } from './Icon.Basic.Example'; + +export { IconColorExample as Color } from './Icon.Color.Example'; + +export { IconImageSheetExample as ImageSheet } from './Icon.ImageSheet.Example'; + +export { IconSvgExample as Svg } from './Icon.Svg.Example'; + +export { IconSvgFactoryExample as SvgFactory } from './Icon.SvgFactory.Example'; + +export default { + title: 'Components/Icon', +}; diff --git a/packages/react-examples/src/react/Image/index.stories.tsx b/packages/react-examples/src/react/Image/index.stories.tsx new file mode 100644 index 00000000000000..ee366b27cf8c5d --- /dev/null +++ b/packages/react-examples/src/react/Image/index.stories.tsx @@ -0,0 +1,19 @@ +export { ImageCenterExample as Center } from './Image.Center.Example'; + +export { ImageCenterContainExample as CenterContain } from './Image.CenterContain.Example'; + +export { ImageCenterCoverExample as CenterCover } from './Image.CenterCover.Example'; + +export { ImageContainExample as Contain } from './Image.Contain.Example'; + +export { ImageCoverExample as Cover } from './Image.Cover.Example'; + +export { ImageDefaultExample as Default } from './Image.Default.Example'; + +export { ImageMaximizeFrameExample as MaximizeFrame } from './Image.MaximizeFrame.Example'; + +export { ImageNoneExample as None } from './Image.None.Example'; + +export default { + title: 'Components/Image', +}; diff --git a/packages/react-examples/src/react/Keytip/index.stories.tsx b/packages/react-examples/src/react/Keytip/index.stories.tsx new file mode 100644 index 00000000000000..66bf33e318da2e --- /dev/null +++ b/packages/react-examples/src/react/Keytip/index.stories.tsx @@ -0,0 +1,13 @@ +export { KeytipsBasicExample as Basic } from './Keytips.Basic.Example'; + +export { KeytipsButtonExample as Button } from './Keytips.Button.Example'; + +export { KeytipsCommandBarExample as CommandBar } from './Keytips.CommandBar.Example'; + +export { KeytipsDynamicExample as Dynamic } from './Keytips.Dynamic.Example'; + +export { KeytipsOverflowExample as Overflow } from './Keytips.Overflow.Example'; + +export default { + title: 'Components/Keytips', +}; diff --git a/packages/react-examples/src/react/Label/index.stories.tsx b/packages/react-examples/src/react/Label/index.stories.tsx new file mode 100644 index 00000000000000..db0d0034a9a9a8 --- /dev/null +++ b/packages/react-examples/src/react/Label/index.stories.tsx @@ -0,0 +1,5 @@ +export { LabelBasicExample as Basic } from './Label.Basic.Example'; + +export default { + title: 'Components/Label', +}; diff --git a/packages/react-examples/src/react/Layer/index.stories.tsx b/packages/react-examples/src/react/Layer/index.stories.tsx new file mode 100644 index 00000000000000..42d0169b53ba8f --- /dev/null +++ b/packages/react-examples/src/react/Layer/index.stories.tsx @@ -0,0 +1,11 @@ +export { LayerBasicExample as Basic } from './Layer.Basic.Example'; + +export { LayerCustomizedExample as Customized } from './Layer.Customized.Example'; + +export { LayerHostedExample as Hosted } from './Layer.Hosted.Example'; + +export { LayerNestedLayersExample as NestedLayers } from './Layer.NestedLayers.Example'; + +export default { + title: 'Components/Layer', +}; diff --git a/packages/react-examples/src/react/Link/index.stories.tsx b/packages/react-examples/src/react/Link/index.stories.tsx new file mode 100644 index 00000000000000..3b16e30caea735 --- /dev/null +++ b/packages/react-examples/src/react/Link/index.stories.tsx @@ -0,0 +1,5 @@ +export { LinkBasicExample as Basic } from './Link.Basic.Example'; + +export default { + title: 'Components/Link', +}; diff --git a/packages/react-examples/src/react/List/index.stories.tsx b/packages/react-examples/src/react/List/index.stories.tsx new file mode 100644 index 00000000000000..99ac10f4ccbb0e --- /dev/null +++ b/packages/react-examples/src/react/List/index.stories.tsx @@ -0,0 +1,11 @@ +export { ListBasicExample as Basic } from './List.Basic.Example'; + +export { ListGhostingExample as Ghosting } from './List.Ghosting.Example'; + +export { ListGridExample as Grid } from './List.Grid.Example'; + +export { ListScrollingExample as Scrolling } from './List.Scrolling.Example'; + +export default { + title: 'Components/List', +}; diff --git a/packages/react-examples/src/react/MarqueeSelection/index.stories.tsx b/packages/react-examples/src/react/MarqueeSelection/index.stories.tsx new file mode 100644 index 00000000000000..6a8375dea2b414 --- /dev/null +++ b/packages/react-examples/src/react/MarqueeSelection/index.stories.tsx @@ -0,0 +1,5 @@ +export { MarqueeSelectionBasicExample as Basic } from './MarqueeSelection.Basic.Example'; + +export default { + title: 'Components/MarqueeSelection', +}; diff --git a/packages/react-examples/src/react/MessageBar/index.stories.tsx b/packages/react-examples/src/react/MessageBar/index.stories.tsx new file mode 100644 index 00000000000000..e245e97d80279b --- /dev/null +++ b/packages/react-examples/src/react/MessageBar/index.stories.tsx @@ -0,0 +1,7 @@ +export { MessageBarBasicExample as Basic } from './MessageBar.Basic.Example'; + +export { MessageBarNoDelayExample as NoDelay } from './MessageBar.NoDelay.Example'; + +export default { + title: 'Components/MessageBar', +}; diff --git a/packages/react-examples/src/react/Modal/index.stories.tsx b/packages/react-examples/src/react/Modal/index.stories.tsx new file mode 100644 index 00000000000000..73e23c467abeac --- /dev/null +++ b/packages/react-examples/src/react/Modal/index.stories.tsx @@ -0,0 +1,7 @@ +export { ModalBasicExample as Basic } from './Modal.Basic.Example'; + +export { ModalModelessExample as Modeless } from './Modal.Modeless.Example'; + +export default { + title: 'Components/Modal', +}; diff --git a/packages/react-examples/src/react/Nav/index.stories.tsx b/packages/react-examples/src/react/Nav/index.stories.tsx new file mode 100644 index 00000000000000..05c67e7b9ac14a --- /dev/null +++ b/packages/react-examples/src/react/Nav/index.stories.tsx @@ -0,0 +1,15 @@ +export { NavBasicExample as Basic } from './Nav.Basic.Example'; + +export { NavCustomGroupHeadersExample as CustomGroupHeaders } from './Nav.CustomGroupHeaders.Example'; + +export { NavFabricDemoAppExample as FabricDemoApp } from './Nav.FabricDemoApp.Example'; + +export { NavFocusZoneExample as FocusZone } from './Nav.FocusZone.Example'; + +export { NavNestedExample as Nested } from './Nav.Nested.Example'; + +export { NavWrappedExample as Wrapped } from './Nav.Wrapped.Example'; + +export default { + title: 'Components/Nav', +}; diff --git a/packages/react-examples/src/react/OverflowSet/index.stories.tsx b/packages/react-examples/src/react/OverflowSet/index.stories.tsx new file mode 100644 index 00000000000000..70fe9c7533a531 --- /dev/null +++ b/packages/react-examples/src/react/OverflowSet/index.stories.tsx @@ -0,0 +1,11 @@ +export { OverflowSetBasicExample as Basic } from './OverflowSet.Basic.Example'; + +export { OverflowSetBasicReversedExample as BasicReversed } from './OverflowSet.BasicReversed.Example'; + +export { OverflowSetCustomExample as Custom } from './OverflowSet.Custom.Example'; + +export { OverflowSetVerticalExample as Vertical } from './OverflowSet.Vertical.Example'; + +export default { + title: 'Components/OverflowSet', +}; diff --git a/packages/react-examples/src/react/Overlay/index.stories.tsx b/packages/react-examples/src/react/Overlay/index.stories.tsx new file mode 100644 index 00000000000000..d6b8c92a7d52af --- /dev/null +++ b/packages/react-examples/src/react/Overlay/index.stories.tsx @@ -0,0 +1,7 @@ +export { OverlayDarkExample as Dark } from './Overlay.Dark.Example'; + +export { OverlayLightExample as Light } from './Overlay.Light.Example'; + +export default { + title: 'Components/Overlay', +}; diff --git a/packages/react-examples/src/react/Panel/index.stories.tsx b/packages/react-examples/src/react/Panel/index.stories.tsx new file mode 100644 index 00000000000000..4b4519467963fe --- /dev/null +++ b/packages/react-examples/src/react/Panel/index.stories.tsx @@ -0,0 +1,25 @@ +export { PanelBasicExample as Basic } from './Panel.Basic.Example'; + +export { PanelConfirmDismissExample as ConfirmDismiss } from './Panel.ConfirmDismiss.Example'; + +export { PanelControlledExample as Controlled } from './Panel.Controlled.Example'; + +export { PanelFooterExample as Footer } from './Panel.Footer.Example'; + +export { PanelHandleDismissTargetExample as HandleDismissTarget } from './Panel.HandleDismissTarget.Example'; + +export { PanelHiddenOnDismissExample as HiddenOnDismiss } from './Panel.HiddenOnDismiss.Example'; + +export { PanelLightDismissExample as LightDismiss } from './Panel.LightDismiss.Example'; + +export { PanelLightDismissCustomExample as LightDismissCustom } from './Panel.LightDismissCustom.Example'; + +export { PanelNavigationExample as Navigation } from './Panel.Navigation.Example'; + +export { PanelNonModalExample as NonModal } from './Panel.NonModal.Example'; + +export { PanelSizesExample as Sizes } from './Panel.Sizes.Example'; + +export default { + title: 'Components/Panel', +}; diff --git a/packages/react-examples/src/react/PeoplePicker/index.stories.tsx b/packages/react-examples/src/react/PeoplePicker/index.stories.tsx new file mode 100644 index 00000000000000..7e9954e94176ca --- /dev/null +++ b/packages/react-examples/src/react/PeoplePicker/index.stories.tsx @@ -0,0 +1,17 @@ +export { PeoplePickerCompactExample as Compact } from './PeoplePicker.Compact.Example'; + +export { PeoplePickerControlledExample as Controlled } from './PeoplePicker.Controlled.Example'; + +export { PeoplePickerLimitedSearchExample as LimitedSearch } from './PeoplePicker.LimitedSearch.Example'; + +export { PeoplePickerListExample as List } from './PeoplePicker.List.Example'; + +export { PeoplePickerNormalExample as Normal } from './PeoplePicker.Normal.Example'; + +export { PeoplePickerPreselectedItemsExample as PreselectedItems } from './PeoplePicker.PreselectedItems.Example'; + +export { PeoplePickerProcessSelectionExample as ProcessSelection } from './PeoplePicker.ProcessSelection.Example'; + +export default { + title: 'Components/PeoplePicker', +}; diff --git a/packages/react-examples/src/react/Persona/index.stories.tsx b/packages/react-examples/src/react/Persona/index.stories.tsx new file mode 100644 index 00000000000000..745661ba32b9a7 --- /dev/null +++ b/packages/react-examples/src/react/Persona/index.stories.tsx @@ -0,0 +1,21 @@ +export { PersonaAlternateExample as Alternate } from './Persona.Alternate.Example'; + +export { PersonaBasicExample as Basic } from './Persona.Basic.Example'; + +export { PersonaColorsExample as Colors } from './Persona.Colors.Example'; + +export { PersonaCustomCoinRenderExample as CustomCoinRender } from './Persona.CustomCoinRender.Example'; + +export { PersonaCustomRenderExample as CustomRender } from './Persona.CustomRender.Example'; + +export { PersonaInitialsExample as Initials } from './Persona.Initials.Example'; + +export { PersonaPresenceExample as Presence } from './Persona.Presence.Example'; + +export { PersonaPresenceColorExample as PresenceColor } from './Persona.PresenceColor.Example'; + +export { UnknownPersonaExample as UnknownPersona } from './Persona.UnknownPersona.Example'; + +export default { + title: 'Components/Persona', +}; diff --git a/packages/react-examples/src/react/Pickers/index.stories.tsx b/packages/react-examples/src/react/Pickers/index.stories.tsx new file mode 100644 index 00000000000000..1de4c8427506c7 --- /dev/null +++ b/packages/react-examples/src/react/Pickers/index.stories.tsx @@ -0,0 +1,11 @@ +export { PickerCustomResultExample as PickerCustomResult } from './Picker.CustomResult.Example'; + +export { TagPickerBasicExample as TagPickerBasic } from './TagPicker.Basic.Example'; + +export { TagPickerCustomRemoveIconExample as TagPickerCustomRemoveIcon } from './TagPicker.CustomRemoveIcon.Example'; + +export { TagPickerInlineExample as TagPickerInline } from './TagPicker.Inline.Example'; + +export default { + title: 'Components/Pickers', +}; diff --git a/packages/react-examples/src/react/Pivot/index.stories.tsx b/packages/react-examples/src/react/Pivot/index.stories.tsx new file mode 100644 index 00000000000000..30f650ac23a902 --- /dev/null +++ b/packages/react-examples/src/react/Pivot/index.stories.tsx @@ -0,0 +1,25 @@ +export { PivotRenderActiveOnlyExample as AlwaysRender } from './Pivot.AlwaysRender.Example'; + +export { PivotBasicExample as Basic } from './Pivot.Basic.Example'; + +export { PivotIconCountExample as IconCount } from './Pivot.IconCount.Example'; + +export { PivotLargeExample as Large } from './Pivot.Large.Example'; + +export { PivotOnChangeExample as OnChange } from './Pivot.OnChange.Example'; + +export { PivotOverflowMenuExample as OverflowMenu } from './Pivot.OverflowMenu.Example'; + +export { PivotOverrideExample as Override } from './Pivot.Override.Example'; + +export { PivotRemoveExample as Remove } from './Pivot.Remove.Example'; + +export { PivotSeparateExample as Separate } from './Pivot.Separate.Example'; + +export { PivotTabsExample as Tabs } from './Pivot.Tabs.Example'; + +export { PivotTabsLargeExample as TabsLarge } from './Pivot.TabsLarge.Example'; + +export default { + title: 'Components/Pivot', +}; diff --git a/packages/react-examples/src/react/Popup/index.stories.tsx b/packages/react-examples/src/react/Popup/index.stories.tsx new file mode 100644 index 00000000000000..16bd7b83c87e97 --- /dev/null +++ b/packages/react-examples/src/react/Popup/index.stories.tsx @@ -0,0 +1,7 @@ +export { PopupBasicExample as Basic } from './Popup.Basic.Example'; + +export { PopupModalExample as Modal } from './Popup.Modal.Example'; + +export default { + title: 'Components/Popup', +}; diff --git a/packages/react-examples/src/react/ProgressIndicator/index.stories.tsx b/packages/react-examples/src/react/ProgressIndicator/index.stories.tsx new file mode 100644 index 00000000000000..27681118bb74a4 --- /dev/null +++ b/packages/react-examples/src/react/ProgressIndicator/index.stories.tsx @@ -0,0 +1,7 @@ +export { ProgressIndicatorBasicExample as Basic } from './ProgressIndicator.Basic.Example'; + +export { ProgressIndicatorIndeterminateExample as Indeterminate } from './ProgressIndicator.Indeterminate.Example'; + +export default { + title: 'Components/ProgressIndicator', +}; diff --git a/packages/react-examples/src/react/Rating/index.stories.tsx b/packages/react-examples/src/react/Rating/index.stories.tsx new file mode 100644 index 00000000000000..8cfa4dba9fc3a9 --- /dev/null +++ b/packages/react-examples/src/react/Rating/index.stories.tsx @@ -0,0 +1,7 @@ +export { RatingBasicExample as Basic } from './Rating.Basic.Example'; + +export { RatingButtonControlledExample as ButtonControlled } from './Rating.ButtonControlled.Example'; + +export default { + title: 'Components/Rating', +}; diff --git a/packages/react-examples/src/react/ResizeGroup/index.stories.tsx b/packages/react-examples/src/react/ResizeGroup/index.stories.tsx new file mode 100644 index 00000000000000..0a6e4026ee28c8 --- /dev/null +++ b/packages/react-examples/src/react/ResizeGroup/index.stories.tsx @@ -0,0 +1,9 @@ +export { FlexBoxResizeGroupExample as FlexBox } from './ResizeGroup.FlexBox.Example'; + +export { ResizeGroupOverflowSetExample as OverflowSet } from './ResizeGroup.OverflowSet.Example'; + +export { ResizeGroupVerticalOverflowSetExample as VerticalOverflowSet } from './ResizeGroup.VerticalOverflowSet.Example'; + +export default { + title: 'Components/ResizeGroup', +}; diff --git a/packages/react-examples/src/react/ScrollablePane/index.stories.tsx b/packages/react-examples/src/react/ScrollablePane/index.stories.tsx new file mode 100644 index 00000000000000..544f62629bab2c --- /dev/null +++ b/packages/react-examples/src/react/ScrollablePane/index.stories.tsx @@ -0,0 +1,7 @@ +export { ScrollablePaneDefaultExample as Default } from './ScrollablePane.Default.Example'; + +export { ScrollablePaneDetailsListExample as DetailsList } from './ScrollablePane.DetailsList.Example'; + +export default { + title: 'Components/ScrollablePane', +}; diff --git a/packages/react-examples/src/react/SearchBox/index.stories.tsx b/packages/react-examples/src/react/SearchBox/index.stories.tsx new file mode 100644 index 00000000000000..69f106f19a2b33 --- /dev/null +++ b/packages/react-examples/src/react/SearchBox/index.stories.tsx @@ -0,0 +1,13 @@ +export { SearchBoxCustomIconExample as CustomIcon } from './SearchBox.CustomIcon.Example'; + +export { SearchBoxDisabledExample as Disabled } from './SearchBox.Disabled.Example'; + +export { SearchBoxFullSizeExample as FullSize } from './SearchBox.FullSize.Example'; + +export { SearchBoxSmallExample as Small } from './SearchBox.Small.Example'; + +export { SearchBoxUnderlinedExample as Underlined } from './SearchBox.Underlined.Example'; + +export default { + title: 'Components/SearchBox', +}; diff --git a/packages/react-examples/src/react/SelectedPeopleList/index.stories.tsx b/packages/react-examples/src/react/SelectedPeopleList/index.stories.tsx new file mode 100644 index 00000000000000..d6013714583436 --- /dev/null +++ b/packages/react-examples/src/react/SelectedPeopleList/index.stories.tsx @@ -0,0 +1,7 @@ +export { SelectedPeopleListBasicExample as Basic } from './SelectedPeopleList.Basic.Example'; + +export { SelectedPeopleListControlledExample as Controlled } from './SelectedPeopleList.Controlled.Example'; + +export default { + title: 'Components/SelectedPeopleList', +}; diff --git a/packages/react-examples/src/react/Selection/index.stories.tsx b/packages/react-examples/src/react/Selection/index.stories.tsx new file mode 100644 index 00000000000000..f932f8e1229605 --- /dev/null +++ b/packages/react-examples/src/react/Selection/index.stories.tsx @@ -0,0 +1,5 @@ +export { SelectionBasicExample as Basic } from './Selection.Basic.Example'; + +export default { + title: 'Components/Selection', +}; diff --git a/packages/react-examples/src/react/Separator/index.stories.tsx b/packages/react-examples/src/react/Separator/index.stories.tsx new file mode 100644 index 00000000000000..5626c5916c032a --- /dev/null +++ b/packages/react-examples/src/react/Separator/index.stories.tsx @@ -0,0 +1,9 @@ +export { SeparatorBasicExample as Basic } from './Separator.Basic.Example'; + +export { SeparatorIconExample as Icon } from './Separator.Icon.Example'; + +export { SeparatorThemingExample as Theming } from './Separator.Theming.Example'; + +export default { + title: 'Components/Separator', +}; diff --git a/packages/react-examples/src/react/ShadowDOM/index.stories.tsx b/packages/react-examples/src/react/ShadowDOM/index.stories.tsx new file mode 100644 index 00000000000000..a2f94e54cb171d --- /dev/null +++ b/packages/react-examples/src/react/ShadowDOM/index.stories.tsx @@ -0,0 +1,171 @@ +export { ShadowDOMActivityItemExample as ActivityItem } from './ShadowDOM.ActivityItem.Example'; + +export { ShadowDOMAnnouncedExample as Announced } from './ShadowDOM.Announced.Example'; + +export { ShadowDOMBreadcrumbExample as Breadcrumb } from './ShadowDOM.Breadcrumb.Example'; + +export { ShadowDOMButtonExample as Button } from './ShadowDOM.Button.Example'; + +export { ShadowDOMCalendarExample as Calendar } from './ShadowDOM.Calendar.Example'; + +export { ShadowDOMCheckboxExample as Checkbox } from './ShadowDOM.Checkbox.Example'; + +export { ShadowDOMChoiceGroupExample as ChoiceGroup } from './ShadowDOM.ChoiceGroup.Example'; + +export { ShadowDOMCoachmarkExample as Coachmark } from './ShadowDOM.Coachmark.Example'; + +export { ShadowDOMColorPickerExample as ColorPicker } from './ShadowDOM.ColorPicker.Example'; + +export { ShadowDOMComboBoxExample as ComboBox } from './ShadowDOM.ComboBox.Example'; + +export { ShadowDOMCommandBarExample as CommandBar } from './ShadowDOM.CommandBar.Example'; + +export { ShadowDOMContextualMenuExample as ContextualMenu } from './ShadowDOM.ContextualMenu.Example'; + +export { ShadowDOMDatePickerExample as DatePicker } from './ShadowDOM.DatePicker.Example'; + +export { ShadowDOMDetailsListExample as DetailsList } from './ShadowDOM.DetailsList.Example'; + +export { ShadowDOMDialogExample as Dialog } from './ShadowDOM.Dialog.Example'; + +export { ShadowDOMVerticalDividerExample as Divider } from './ShadowDOM.Divider.Example'; + +export { ShadowDOMDocumentCardExample as DocumentCard } from './ShadowDOM.DocumentCard.Example'; + +export { ShadowDOMDropdownExample as Dropdown } from './ShadowDOM.Dropdown.Example'; + +export { ShadowDOMExtendedPeoplePickerExample as ExtendedPeoplePicker } from './ShadowDOM.ExtendedPeoplePicker.Example'; + +export { ShadowDOMFacepileExample as Facepile } from './ShadowDOM.Facepile.Example'; + +export { ShadowDOMFloatingPeoplePickerExample as FloatingPeoplePicker } from './ShadowDOM.FloatingPeoplePicker.Example'; + +export { ShadowDOMFocusTrapZoneBoxExample as FocusTrapZoneBox } from './ShadowDOM.FocusTrapZone.Box.Example'; + +export { ShadowDOMFocusTrapZoneBoxClickExample as FocusTrapZoneBoxClick } from './ShadowDOM.FocusTrapZone.BoxClick.Example'; + +export { ShadowDOMFocusTrapZoneChildShadowDomExample as FocusTrapZoneChildShadowDom } from './ShadowDOM.FocusTrapZone.ChildShadowDom.Example'; + +export { ShadowDOMFocusTrapZoneDialogInPanelExample as FocusTrapZoneDialogInPanel } from './ShadowDOM.FocusTrapZone.DialogInPanel.Example'; + +export { ShadowDOMFocusTrapZoneBoxCustomElementExample as FocusTrapZoneFocusOnCustomElement } from './ShadowDOM.FocusTrapZone.FocusOnCustomElement.Example'; + +export { ShadowDOMFocusTrapZoneFocusZoneExample as FocusTrapZoneFocusZone } from './ShadowDOM.FocusTrapZone.FocusZone.Example'; + +export { ShadowDOMFocusTrapZoneNestedExample as FocusTrapZoneNested } from './ShadowDOM.FocusTrapZone.Nested.Example'; + +export { ShadowDOMFocusTrapZoneNestedChildShadowDomExample as FocusTrapZoneNestedChildShadowDom } from './ShadowDOM.FocusTrapZone.NestedChildShadowDom.Example'; + +export { ShadowDOMFocusZoneDisabledExample as FocusZoneDisabled } from './ShadowDOM.FocusZone.Disabled.Example'; + +export { ShadowDOMFocusZoneHorizontalMenuExample as FocusZoneHorizontalMenu } from './ShadowDOM.FocusZone.HorizontalMenu.Example'; + +export { ShadowDOMFocusZoneHorizontalMenuShadowDomExample as FocusZoneHorizontalMenuShadowDom } from './ShadowDOM.FocusZone.HorizontalMenuShadowDom.Example'; + +export { ShadowDOMFocusZoneListExample as FocusZoneList } from './ShadowDOM.FocusZone.List.Example'; + +export { ShadowDOMFocusZonePhotosExample as FocusZonePhotos } from './ShadowDOM.FocusZone.Photos.Example'; + +export { ShadowDOMFocusZoneTabbableExample as FocusZoneTabbable } from './ShadowDOM.FocusZone.Tabbable.Example'; + +export { ShadowDOMGroupedListExample as GroupedList } from './ShadowDOM.GroupedList.Example'; + +export { ShadowDOMHoverCardExample as HoverCard } from './ShadowDOM.HoverCard.Example'; + +export { ShadowDOMIconExample as Icon } from './ShadowDOM.Icon.Example'; + +export { ShadowDOMImageExample as Image } from './ShadowDOM.Image.Example'; + +export { ShadowDOMKeytipExample as Keytip } from './ShadowDOM.Keytip.Example'; + +export { ShadowDOMLabelExample as Label } from './ShadowDOM.Label.Example'; + +export { ShadowDOMLayerExample as Layer } from './ShadowDOM.Layer.Example'; + +export { ShadowDOMLinkExample as Link } from './ShadowDOM.Link.Example'; + +export { ShadowDOMListExample as List } from './ShadowDOM.List.Example'; + +export { ShadowDOMMarqueeSelectionExample as MarqueeSelection } from './ShadowDOM.MarqueeSelection.Example'; + +export { ShadowDOMMessageBarExample as MessageBar } from './ShadowDOM.MessageBar.Example'; + +export { ShadowDOMModalExample as Modal } from './ShadowDOM.Modal.Example'; + +export { ShadowDOMNavExample as Nav } from './ShadowDOM.Nav.Example'; + +export { ShadowDOMOverflowSetExample as OverflowSet } from './ShadowDOM.OverflowSet.Example'; + +export { ShadowDOMOverlayExample as Overlay } from './ShadowDOM.Overlay.Example'; + +export { ShadowDOMPanelExample as Panel } from './ShadowDOM.Panel.Example'; + +export { ShadowDOMPeoplePickerExample as PeoplePicker } from './ShadowDOM.PeoplePicker.Example'; + +export { ShadowDOMPersonaExample as Persona } from './ShadowDOM.Persona.Example'; + +export { ShadowDOMPickersExample as Pickers } from './ShadowDOM.Pickers.Example'; + +export { ShadowDOMPivotExample as Pivot } from './ShadowDOM.Pivot.Example'; + +export { ShadowDOMPopupExample as Popup } from './ShadowDOM.Popup.Example'; + +export { ShadowDOMProgressIndicatorExample as ProgressIndicator } from './ShadowDOM.ProgressIndicator.Example'; + +export { ShadowDOMRatingExample as Rating } from './ShadowDOM.Rating.Example'; + +export { ShadowDOMResizeGroupExample as ResizeGroup } from './ShadowDOM.ResizeGroup.Example'; + +export { ShadowDOMScrollablePaneExample as ScrollablePane } from './ShadowDOM.ScrollablePane.Example'; + +export { ShadowDOMSearchBoxExample as SearchBox } from './ShadowDOM.SearchBox.Example'; + +export { ShadowDOMSelectedPeopleListExample as SelectedPeopleList } from './ShadowDOM.SelectedPeopleList.Example'; + +export { ShadowDOMSelectionExample as Selection } from './ShadowDOM.Selection.Example'; + +export { ShadowDOMSeparatorExample as Separator } from './ShadowDOM.Separator.Example'; + +export { ShadowDOMShimmerExample as Shimmer } from './ShadowDOM.Shimmer.Example'; + +export { ShadowDOMSliderExample as Slider } from './ShadowDOM.Slider.Example'; + +export { ShadowDOMSpinButtonExample as SpinButton } from './ShadowDOM.SpinButton.Example'; + +export { ShadowDOMSpinnerExample as Spinner } from './ShadowDOM.Spinner.Example'; + +export { ShadowDOMStackExample as Stack } from './ShadowDOM.Stack.Example'; + +export { ShadowDOMSwatchColorPickerExample as SwatchColorPicker } from './ShadowDOM.SwatchColorPicker.Example'; + +export { ShadowDOMTeachingBubbleButtonOrderExample as TeachingBubbleButtonOrder } from './ShadowDOM.TeachingBubble.ButtonOrder.Example'; + +export { ShadowDOMTeachingBubbleCondensedExample as TeachingBubbleCondensed } from './ShadowDOM.TeachingBubble.Condensed.Example'; + +export { ShadowDOMTeachingBubbleExample as TeachingBubble } from './ShadowDOM.TeachingBubble.Example'; + +export { ShadowDOMTeachingBubbleIllustrationExample as TeachingBubbleIllustration } from './ShadowDOM.TeachingBubble.Illustration.Example'; + +export { ShadowDOMTeachingBubbleMultiStepExample as TeachingBubbleMultiStep } from './ShadowDOM.TeachingBubble.MultiStep.Example'; + +export { ShadowDOMTeachingBubbleSmallHeadlineExample as TeachingBubbleSmallHeadline } from './ShadowDOM.TeachingBubble.SmallHeadline.Example'; + +export { ShadowDOMTeachingBubbleWideExample as TeachingBubbleWide } from './ShadowDOM.TeachingBubble.Wide.Example'; + +export { ShadowDOMTeachingBubbleWideIllustrationExample as TeachingBubbleWideIllustration } from './ShadowDOM.TeachingBubble.WideIllustration.Example'; + +export { ShadowDOMTextExample as Text } from './ShadowDOM.Text.Example'; + +export { ShadowDOMTextFieldExample as TextField } from './ShadowDOM.TextField.Example'; + +export { ShadowDOMTimePickerExample as TimePicker } from './ShadowDOM.TimePicker.Example'; + +export { ShadowDOMToggleExample as Toggle } from './ShadowDOM.Toggle.Example'; + +export { ShadowDOMTooltipExample as Tooltip } from './ShadowDOM.Tooltip.Example'; + +export { ShadowDOMWeeklyDayPickerExample as WeeklyDayPicker } from './ShadowDOM.WeeklyDayPicker.Example'; + +export default { + title: 'Components/ShadowDOM', +}; diff --git a/packages/react-examples/src/react/Shimmer/index.stories.tsx b/packages/react-examples/src/react/Shimmer/index.stories.tsx new file mode 100644 index 00000000000000..2fa5839afc0553 --- /dev/null +++ b/packages/react-examples/src/react/Shimmer/index.stories.tsx @@ -0,0 +1,13 @@ +export { ShimmerApplicationExample as Application } from './Shimmer.Application.Example'; + +export { ShimmerBasicExample as Basic } from './Shimmer.Basic.Example'; + +export { ShimmerCustomElementsExample as CustomElements } from './Shimmer.CustomElements.Example'; + +export { ShimmerLoadDataExample as LoadData } from './Shimmer.LoadData.Example'; + +export { ShimmerStylingExample as Styling } from './Shimmer.Styling.Example'; + +export default { + title: 'Components/Shimmer', +}; diff --git a/packages/react-examples/src/react/Slider/index.stories.tsx b/packages/react-examples/src/react/Slider/index.stories.tsx new file mode 100644 index 00000000000000..64bbc9bb68849c --- /dev/null +++ b/packages/react-examples/src/react/Slider/index.stories.tsx @@ -0,0 +1,9 @@ +export { SliderBasicExample as Basic } from './Slider.Basic.Example'; + +export { SliderRangedExample as Ranged } from './Slider.Ranged.Example'; + +export { SliderVerticalExample as Vertical } from './Slider.Vertical.Example'; + +export default { + title: 'Components/Slider', +}; diff --git a/packages/react-examples/src/react/SpinButton/index.stories.tsx b/packages/react-examples/src/react/SpinButton/index.stories.tsx new file mode 100644 index 00000000000000..1ccc5701ed4918 --- /dev/null +++ b/packages/react-examples/src/react/SpinButton/index.stories.tsx @@ -0,0 +1,15 @@ +export { SpinButtonBasicExample as Basic } from './SpinButton.Basic.Example'; + +export { SpinButtonControlledExample as Controlled } from './SpinButton.Controlled.Example'; + +export { SpinButtonCustomStyledExample as CustomStyled } from './SpinButton.CustomStyled.Example'; + +export { SpinButtonIconExample as Icon } from './SpinButton.Icon.Example'; + +export { SpinButtonSuffixExample as Suffix } from './SpinButton.Suffix.Example'; + +export { SpinButtonTopPositionExample as TopPosition } from './SpinButton.TopPosition.Example'; + +export default { + title: 'Components/SpinButton', +}; diff --git a/packages/react-examples/src/react/Spinner/index.stories.tsx b/packages/react-examples/src/react/Spinner/index.stories.tsx new file mode 100644 index 00000000000000..b1e862824f0e6f --- /dev/null +++ b/packages/react-examples/src/react/Spinner/index.stories.tsx @@ -0,0 +1,7 @@ +export { SpinnerBasicExample as Basic } from './Spinner.Basic.Example'; + +export { SpinnerLabeledExample as Labeled } from './Spinner.Labeled.Example'; + +export default { + title: 'Components/Spinner', +}; diff --git a/packages/react-examples/src/react/Stack/index.stories.tsx b/packages/react-examples/src/react/Stack/index.stories.tsx new file mode 100644 index 00000000000000..a652dacb81c3df --- /dev/null +++ b/packages/react-examples/src/react/Stack/index.stories.tsx @@ -0,0 +1,47 @@ +export { HorizontalStackBasicExample as HorizontalBasic } from './Stack.Horizontal.Basic.Example'; + +export { HorizontalStackConfigureExample as HorizontalConfigure } from './Stack.Horizontal.Configure.Example'; + +export { HorizontalStackGrowExample as HorizontalGrow } from './Stack.Horizontal.Grow.Example'; + +export { HorizontalStackHorizontalAlignExample as HorizontalHorizontalAlign } from './Stack.Horizontal.HorizontalAlign.Example'; + +export { HorizontalStackReversedExample as HorizontalReversed } from './Stack.Horizontal.Reversed.Example'; + +export { HorizontalStackShrinkExample as HorizontalShrink } from './Stack.Horizontal.Shrink.Example'; + +export { HorizontalStackSpacingExample as HorizontalSpacing } from './Stack.Horizontal.Spacing.Example'; + +export { HorizontalStackVerticalAlignExample as HorizontalVerticalAlign } from './Stack.Horizontal.VerticalAlign.Example'; + +export { HorizontalStackWrapExample as HorizontalWrap } from './Stack.Horizontal.Wrap.Example'; + +export { HorizontalStackWrapAdvancedExample as HorizontalWrapAdvanced } from './Stack.Horizontal.WrapAdvanced.Example'; + +export { HorizontalStackWrapNestedExample as HorizontalWrapNested } from './Stack.Horizontal.WrapNested.Example'; + +export { VerticalStackBasicExample as VerticalBasic } from './Stack.Vertical.Basic.Example'; + +export { VerticalStackConfigureExample as VerticalConfigure } from './Stack.Vertical.Configure.Example'; + +export { VerticalStackGrowExample as VerticalGrow } from './Stack.Vertical.Grow.Example'; + +export { VerticalStackHorizontalAlignExample as VerticalHorizontalAlign } from './Stack.Vertical.HorizontalAlign.Example'; + +export { VerticalStackReversedExample as VerticalReversed } from './Stack.Vertical.Reversed.Example'; + +export { VerticalStackShrinkExample as VerticalShrink } from './Stack.Vertical.Shrink.Example'; + +export { VerticalStackSpacingExample as VerticalSpacing } from './Stack.Vertical.Spacing.Example'; + +export { VerticalStackVerticalAlignExample as VerticalVerticalAlign } from './Stack.Vertical.VerticalAlign.Example'; + +export { VerticalStackWrapExample as VerticalWrap } from './Stack.Vertical.Wrap.Example'; + +export { VerticalStackWrapAdvancedExample as VerticalWrapAdvanced } from './Stack.Vertical.WrapAdvanced.Example'; + +export { VerticalStackWrapNestedExample as VerticalWrapNested } from './Stack.Vertical.WrapNested.Example'; + +export default { + title: 'Components/Stack', +}; diff --git a/packages/react-examples/src/react/SwatchColorPicker/index.stories.tsx b/packages/react-examples/src/react/SwatchColorPicker/index.stories.tsx new file mode 100644 index 00000000000000..bccb09ce97bf72 --- /dev/null +++ b/packages/react-examples/src/react/SwatchColorPicker/index.stories.tsx @@ -0,0 +1,5 @@ +export { SwatchColorPickerBasicExample as Basic } from './SwatchColorPicker.Basic.Example'; + +export default { + title: 'Components/SwatchColorPicker', +}; diff --git a/packages/react-examples/src/react/TeachingBubble/index.stories.tsx b/packages/react-examples/src/react/TeachingBubble/index.stories.tsx new file mode 100644 index 00000000000000..1834422d33c599 --- /dev/null +++ b/packages/react-examples/src/react/TeachingBubble/index.stories.tsx @@ -0,0 +1,19 @@ +export { TeachingBubbleBasicExample as Basic } from './TeachingBubble.Basic.Example'; + +export { TeachingBubbleButtonOrderExample as ButtonOrder } from './TeachingBubble.ButtonOrder.Example'; + +export { TeachingBubbleCondensedExample as Condensed } from './TeachingBubble.Condensed.Example'; + +export { TeachingBubbleIllustrationExample as Illustration } from './TeachingBubble.Illustration.Example'; + +export { TeachingBubbleMultiStepExample as MultiStep } from './TeachingBubble.MultiStep.Example'; + +export { TeachingBubbleSmallHeadlineExample as SmallHeadline } from './TeachingBubble.SmallHeadline.Example'; + +export { TeachingBubbleWideExample as Wide } from './TeachingBubble.Wide.Example'; + +export { TeachingBubbleWideIllustrationExample as WideIllustration } from './TeachingBubble.WideIllustration.Example'; + +export default { + title: 'Components/TeachingBubble', +}; diff --git a/packages/react-examples/src/react/Text/index.stories.tsx b/packages/react-examples/src/react/Text/index.stories.tsx new file mode 100644 index 00000000000000..6fe81d80e3dba7 --- /dev/null +++ b/packages/react-examples/src/react/Text/index.stories.tsx @@ -0,0 +1,11 @@ +export { TextBlockExample as Block } from './Text.Block.Example'; + +export { TextRampExample as Ramp } from './Text.Ramp.Example'; + +export { TextRampExample as Weights } from './Text.Weights.Example'; + +export { TextWrapExample as Wrap } from './Text.Wrap.Example'; + +export default { + title: 'Components/Text', +}; diff --git a/packages/react-examples/src/react/TextField/index.stories.tsx b/packages/react-examples/src/react/TextField/index.stories.tsx new file mode 100644 index 00000000000000..cc994a6b69d5c6 --- /dev/null +++ b/packages/react-examples/src/react/TextField/index.stories.tsx @@ -0,0 +1,21 @@ +export { TextFieldBasicExample as Basic } from './TextField.Basic.Example'; + +export { TextFieldBorderlessExample as Borderless } from './TextField.Borderless.Example'; + +export { TextFieldControlledExample as Controlled } from './TextField.Controlled.Example'; + +export { TextFieldCustomRenderExample as CustomRender } from './TextField.CustomRender.Example'; + +export { TextFieldErrorMessageExample as ErrorMessage } from './TextField.ErrorMessage.Example'; + +export { TextFieldMaskedExample as Masked } from './TextField.Masked.Example'; + +export { TextFieldMultilineExample as Multiline } from './TextField.Multiline.Example'; + +export { TextFieldPrefixAndSuffixExample as PrefixAndSuffix } from './TextField.PrefixAndSuffix.Example'; + +export { TextFieldStyledExample as Styled } from './TextField.Styled.Example'; + +export default { + title: 'Components/TextField', +}; diff --git a/packages/react-examples/src/react/ThemeProvider/ThemeProvider.stories.tsx b/packages/react-examples/src/react/ThemeProvider/index.stories.tsx similarity index 97% rename from packages/react-examples/src/react/ThemeProvider/ThemeProvider.stories.tsx rename to packages/react-examples/src/react/ThemeProvider/index.stories.tsx index 9bce01ed56f2c2..7aca45b7d1db61 100644 --- a/packages/react-examples/src/react/ThemeProvider/ThemeProvider.stories.tsx +++ b/packages/react-examples/src/react/ThemeProvider/index.stories.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { useTheme, PartialTheme, Theme, ThemeContext, ThemeProvider } from '@fluentui/react/lib/Theme'; export default { - title: 'ThemeProvider', + title: 'Components/ThemeProvider', }; const lightTheme: PartialTheme = { diff --git a/packages/react-examples/src/react/TimePicker/index.stories.tsx b/packages/react-examples/src/react/TimePicker/index.stories.tsx new file mode 100644 index 00000000000000..39d79e1c3d842c --- /dev/null +++ b/packages/react-examples/src/react/TimePicker/index.stories.tsx @@ -0,0 +1,13 @@ +export { TimePickerBasicExample as Basic } from './TimePicker.Basic.Example'; + +export { TimePickerControlledExample as Controlled } from './TimePicker.Controlled.Example'; + +export { TimePickerCustomTimeStringsExample as CustomTimeStrings } from './TimePicker.CustomTimeStrings.Example'; + +export { TimePickerDateTimePickerExample as DateTimePicker } from './TimePicker.DateTimePicker.Example'; + +export { TimePickerValidationResultExample as ValidationResult } from './TimePicker.ValidationResult.Example'; + +export default { + title: 'Components/TimePicker', +}; diff --git a/packages/react-examples/src/react/Toggle/index.stories.tsx b/packages/react-examples/src/react/Toggle/index.stories.tsx new file mode 100644 index 00000000000000..b319e36e1837d6 --- /dev/null +++ b/packages/react-examples/src/react/Toggle/index.stories.tsx @@ -0,0 +1,7 @@ +export { ToggleBasicExample as Basic } from './Toggle.Basic.Example'; + +export { ToggleCustomLabelExample as CustomLabel } from './Toggle.CustomLabel.Example'; + +export default { + title: 'Components/Toggle', +}; diff --git a/packages/react-examples/src/react/Tooltip/index.stories.tsx b/packages/react-examples/src/react/Tooltip/index.stories.tsx new file mode 100644 index 00000000000000..61581a04c59d5c --- /dev/null +++ b/packages/react-examples/src/react/Tooltip/index.stories.tsx @@ -0,0 +1,15 @@ +export { TooltipAbsolutePositionExample as AbsolutePosition } from './Tooltip.AbsolutePosition.Example'; + +export { TooltipBasicExample as Basic } from './Tooltip.Basic.Example'; + +export { TooltipCustomExample as Custom } from './Tooltip.Custom.Example'; + +export { TooltipDisplayExample as Display } from './Tooltip.Display.Example'; + +export { TooltipInteractiveExample as Interactive } from './Tooltip.Interactive.Example'; + +export { TooltipOverflowExample as Overflow } from './Tooltip.Overflow.Example'; + +export default { + title: 'Components/Tooltip', +}; diff --git a/packages/react-examples/src/react/WeeklyDayPicker/index.stories.tsx b/packages/react-examples/src/react/WeeklyDayPicker/index.stories.tsx new file mode 100644 index 00000000000000..253a12e680eda8 --- /dev/null +++ b/packages/react-examples/src/react/WeeklyDayPicker/index.stories.tsx @@ -0,0 +1,15 @@ +import * as React from 'react'; + +import { WeeklyDayPickerInlineExample } from './WeeklyDayPicker.Inline.Example'; +import { WeeklyDayPickerInlineExpandableExample } from './WeeklyDayPicker.Inline.Expandable.Example'; +import { WeeklyDayPickerInlineMarkedDaysExample } from './WeeklyDayPicker.Inline.MarkedDays.Example'; + +export const Inline = () => ; + +export const InlineExpandable = () => ; + +export const InlineMarkedDay = () => ; + +export default { + title: 'Components/WeeklyDayPicker', +};