From c47baad7e3dace0aeb663695a93af09d7c91e334 Mon Sep 17 00:00:00 2001 From: Martin Hochel Date: Thu, 19 Aug 2021 21:25:22 +0200 Subject: [PATCH] chore(react-examples): get rid of unnecesary setup after react-components was migrated to new dx --- .../.storybook/fluentuiTheme.js | 37 ------- .../.storybook/manager-head.html | 101 ------------------ packages/react-examples/.storybook/manager.js | 8 -- .../.storybook/preview-loader.js | 17 +-- packages/react-examples/.storybook/preview.js | 69 ++---------- packages/react-examples/public/Fluent.svg | 4 - .../react-examples/public/fluentvnext.svg | 8 -- 7 files changed, 8 insertions(+), 236 deletions(-) delete mode 100644 packages/react-examples/.storybook/fluentuiTheme.js delete mode 100644 packages/react-examples/.storybook/manager-head.html delete mode 100644 packages/react-examples/.storybook/manager.js delete mode 100644 packages/react-examples/public/Fluent.svg delete mode 100644 packages/react-examples/public/fluentvnext.svg 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 @@ - - - - - - - -