diff --git a/packages/react-examples/.storybook/fluentuiTheme.js b/packages/react-examples/.storybook/fluentuiTheme.js
deleted file mode 100644
index 1ed776dc9078c6..00000000000000
--- a/packages/react-examples/.storybook/fluentuiTheme.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import { create } from '@storybook/theming';
-import logo from '../public/Fluent.svg';
-
-// Theming and branding the storybook to fluent. Taken from https://storybook.js.org/docs/react/configure/theming
-export default create({
- base: 'light',
-
- // Storybook-specific color palette
- colorPrimary: 'rgba(255, 255, 255, .4)',
- colorSecondary: '#0078d4',
-
- // UI
- appBg: '#ffffff',
- appContentBg: '#ffffff',
- appBorderColor: '#e0e0e0', // use msft gray
- appBorderRadius: 4,
-
- // Fonts
- fontBase:
- '"Segoe UI", "Segoe UI Web (West European)", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;',
- fontCode: 'monospace',
-
- // Text colors
- textColor: '#11100f',
- textInverseColor: '#0078d4', // use msft primary blue default
-
- // Toolbar default and active colors
- barSelectedColor: '#0078d4', // use msft primary blue default
-
- // Form colors
- inputBorderRadius: 4,
-
- // Use the fluent branding for the upper left image
- brandTitle: 'Fluent UI React vNext Components',
- brandUrl: 'https://github.com/microsoft/fluentui',
- brandImage: logo,
-});
diff --git a/packages/react-examples/.storybook/manager-head.html b/packages/react-examples/.storybook/manager-head.html
deleted file mode 100644
index 07b747e378f568..00000000000000
--- a/packages/react-examples/.storybook/manager-head.html
+++ /dev/null
@@ -1,101 +0,0 @@
-
-
-
-
-
-
-
diff --git a/packages/react-examples/.storybook/manager.js b/packages/react-examples/.storybook/manager.js
deleted file mode 100644
index f0548d476625c1..00000000000000
--- a/packages/react-examples/.storybook/manager.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import { addons } from '@storybook/addons';
-import fluentuiTheme from './fluentuiTheme';
-
-addons.setConfig({
- showPanel: true,
- panelPosition: 'right',
- theme: fluentuiTheme, // override the default Storybook theme with a custom fluent theme
-});
diff --git a/packages/react-examples/.storybook/preview-loader.js b/packages/react-examples/.storybook/preview-loader.js
index 8884879589d54c..46dce8665c563e 100644
--- a/packages/react-examples/.storybook/preview-loader.js
+++ b/packages/react-examples/.storybook/preview-loader.js
@@ -23,7 +23,7 @@ export default function loader(source) {
source = source.replace(/PACKAGE_NAME/g, packageName);
- if (packageName === 'react' || packageName === 'react-components') {
+ if (packageName === 'react') {
// Compare the list of direct deps of suite packages with the list of packages with examples
// to see which extra packages' examples should be used (note: all names here are unscoped).
const packagesWithExamples = fs.readdirSync(path.resolve(__dirname, '../src')).filter(p => !/\.tsx?$/.test(p));
@@ -32,21 +32,6 @@ export default function loader(source) {
const reactDeps = Object.keys(reactPackageJson.dependencies).map(d => d.split('/')[1] || d);
const reactDepsWithExamples = packagesWithExamples.filter(p => reactDeps.includes(p));
- // @TODO
- // - this is a temporary solution until all converged packages use new storybook configuration
- // - after new config is in place remove this whole IF
- //
- // NOTE:
- // - if we run storybook for react-components we wanna include all possible package collocated stories
- // based on react-components package.json
- if (packageName === 'react-components') {
- const _convergedDependencies = reactDeps.filter(dependencyName => {
- return dependencyName.startsWith('react-');
- });
-
- reactDepsWithExamples.push(..._convergedDependencies);
- }
-
source = source.replace(/REACT_DEPS/g, [...new Set(reactDepsWithExamples)].join('|'));
}
diff --git a/packages/react-examples/.storybook/preview.js b/packages/react-examples/.storybook/preview.js
index 3747d98ca4a472..99aa15dcde0c3b 100644
--- a/packages/react-examples/.storybook/preview.js
+++ b/packages/react-examples/.storybook/preview.js
@@ -3,22 +3,13 @@ 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 { withFluentProvider, withKeytipLayer, withStrictMode } from '@fluentui/storybook';
+import { withKeytipLayer, withStrictMode } from '@fluentui/storybook';
/**
* "PACKAGE_NAME" placeholder is being replaced by webpack loader - @link {./preview.loader}
* @type {string}
*/
const packageNamePlaceholder = 'PACKAGE_NAME';
-const storyOrder = [
- 'Concepts/Introduction',
- 'Concepts/Developer/Quick Start',
- 'Concepts/Developer/Styling Components',
- 'Concepts',
- 'Theme',
- 'Components',
- 'Migrations/Flex/Overview',
-];
addDecorator(withPerformance);
addCustomDecorators();
@@ -31,13 +22,7 @@ addParameters({
configure(loadStories, module);
-export const parameters = {
- options: {
- storySort: {
- order: storyOrder,
- },
- },
-};
+export const parameters = {};
// ================================
// Helpers
@@ -57,38 +42,16 @@ function addCustomDecorators() {
*/
const customDecorators = new Set();
- if (['react-cards', 'react-checkbox', 'react-tabs'].includes(packageNamePlaceholder)) {
+ if (['react-cards', 'react-tabs'].includes(packageNamePlaceholder)) {
initializeIcons();
customDecorators.add(withStrictMode);
}
- if (['react-button', 'react-components', 'react-tooltip', 'react-checkbox'].includes(packageNamePlaceholder)) {
- customDecorators.add(withFluentProvider).add(withStrictMode);
- }
-
- // add decorators to all stories except vNext react-components suite
- // - this is needed so we don't creep v8 dependencies to vNext deps
- // - `withKeytipLayer` is v8 dependency - including it to vNext suite was causing CI errors - `Cannot read property 'disableGlobalClassNames' of undefined `
- if (packageNamePlaceholder !== 'react-components') {
- customDecorators.add(withKeytipLayer);
- }
+ customDecorators.add(withKeytipLayer);
customDecorators.forEach(decorator => addDecorator(decorator));
}
-/**
- *
- * @param {string} storyName
- */
-function getStoryOrder(storyName) {
- for (let i = 0; i < storyOrder.length; i++) {
- if (storyName.startsWith(storyOrder[i])) {
- return i;
- }
- }
- return storyOrder.length;
-}
-
/**
* @typedef {{
* default: { title: string };
@@ -110,7 +73,7 @@ function loadStories() {
require.context('../src/PACKAGE_NAME', true, /\.(Example|stories)\.tsx$/),
];
- if (packageNamePlaceholder === 'react' || packageNamePlaceholder === 'react-components') {
+ if (packageNamePlaceholder === 'react') {
// For suite package storybooks, also show the examples of re-exported component packages.
// preview-loader will replace REACT_ DEPS with the actual list.
contexts.push(
@@ -118,14 +81,6 @@ function loadStories() {
);
}
- // @TODO
- // - this is a temporary solution until all converged packages use new storybook configuration
- // - after new config is in place remove this whole IF
- if (packageNamePlaceholder === 'react-components') {
- // include package collocated stories within react-components
- contexts.push(require.context('../../', true, /(REACT_DEPS)\/src\/[\w./]+\.(Example|stories)\.(tsx|mdx)$/));
- }
-
for (const req of contexts) {
req.keys().forEach(key => {
generateStoriesFromExamples(key, stories, req);
@@ -133,18 +88,8 @@ function loadStories() {
}
// convert stories Set to array
- const sorted = [...stories.values()].sort((s1, s2) => {
- const order1 = getStoryOrder(s1.default.title);
- const order2 = getStoryOrder(s2.default.title);
- if (order1 < order2) {
- // the lowest order goes first
- return -1;
- }
- if (order1 > order2) {
- return 1;
- }
- return s1.default.title > s2.default.title ? 1 : -1;
- });
+ const sorted = [...stories.values()];
+
return sorted;
}
diff --git a/packages/react-examples/public/Fluent.svg b/packages/react-examples/public/Fluent.svg
deleted file mode 100644
index ff84463589af93..00000000000000
--- a/packages/react-examples/public/Fluent.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-
diff --git a/packages/react-examples/public/fluentvnext.svg b/packages/react-examples/public/fluentvnext.svg
deleted file mode 100644
index 553e0df88fce53..00000000000000
--- a/packages/react-examples/public/fluentvnext.svg
+++ /dev/null
@@ -1,8 +0,0 @@
-