From 24181a4ad7cac02d1909b55ddd2720d6ec504d33 Mon Sep 17 00:00:00 2001 From: Martin Hochel Date: Mon, 23 Aug 2021 14:19:14 +0200 Subject: [PATCH] chore(react-examples): get rid of unnecessary sb setup after react-components was migrated to new dx --- .../.storybook/fluentuiTheme.js | 37 ------- .../.storybook/manager-head.html | 101 ------------------ packages/react-examples/.storybook/manager.js | 2 - .../.storybook/preview-loader.js | 17 +-- packages/react-examples/.storybook/preview.js | 69 ++---------- packages/react-examples/public/Fluent.svg | 4 - .../react-examples/public/favicon-192.ico | Bin 9326 -> 0 bytes .../react-examples/public/favicon-192.png | Bin 1034 -> 0 bytes packages/react-examples/public/favicon.ico | Bin 17174 -> 0 bytes packages/react-examples/public/favicon.png | Bin 17174 -> 0 bytes .../react-examples/public/fluentvnext.svg | 8 -- 11 files changed, 8 insertions(+), 230 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/public/Fluent.svg delete mode 100644 packages/react-examples/public/favicon-192.ico delete mode 100644 packages/react-examples/public/favicon-192.png delete mode 100644 packages/react-examples/public/favicon.ico delete mode 100644 packages/react-examples/public/favicon.png 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 index f0548d476625c1..5044c88991160f 100644 --- a/packages/react-examples/.storybook/manager.js +++ b/packages/react-examples/.storybook/manager.js @@ -1,8 +1,6 @@ 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..85a79fd643abe0 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()].sort((s1, s2) => (s1.default.title > s2.default.title ? 1 : -1)); + 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/favicon-192.ico b/packages/react-examples/public/favicon-192.ico deleted file mode 100644 index 4e65ec2b4cd1912f5a23338c1553e44e2a2b9fd9..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 9326 zcmeI21y~eY6vuyr2&gD2HWq^2U5MS?VjvcFccUnFcL$=Vh#gpnjo96Rii)DHisHVR zWx-utaCY~-=l8w0_xtX5=iW2_bMJ|nd+wP5BTT4V8KE`D#Q{nJPEPTCe{=8<#?qyW z?{`Z9X4$|+xJQ66R;VIQQG|PJQpHzcP$Vddk&zL`#>SYKm|$vZN{SRIFf%hFWy+M8 zo10@{VS%NkC8<)SB6aH2q)C$oD=RC~rcEo%n+|JhYiw+6u(h?t&dv^ddwU!l97vx& zJ&ul!WXO<#j2SbMDN`mgXU5sDTqO0i}RH{@-&}(Jf+}x;Ar3&uu z?o_Q>m1@QTRbeHt`qK*NR&Y1F6@ zjT<+nNs}ftZQ7J(&6?4?d2?E{XhF-CEos%N6|GyhrcIkRv~Am#cJ12X;o(91_U-A= zp#vQ|cBE6MPI!8H(z$bIyu7^V(xnSsyLP2pw{CRr-klyjdf@HtP0yY^>D8+jy?ghj zPoF;Y?c0}r{rb_re}4uH7{I`R0~s`E5Q7H~X2_5s3>`X@VZ(+oeE4uij2OYlks}#3 zY80bKk7mr6F^nBMmT}|8F@F4bCQO*X#EBE}@$q5Oq)AMkJQ-hKU#3i%!qll#@$>Uz z+O%m*pFW)#GiESz=1gYIn#Jtdvzaqz4s++uW!}7b%%4A>1q&9iaN$B0En39l#fw?8 zWC=@`E@j!WWh`I5oE0lpuyW-}R;^ma>eZ`Rvt|uz*REyVx^=8yzn%>nHn4HyM*RK# z*|cdB0RaJQ-n^MDTec7w7|7PGTiLd48{4;UCnzY09Xoaq930HfojcjJYZtqB?`F@Q zJ?!1Pmwo&8v48)54jeeZ!Gi}mbm$NvAt4+-e3&Cgj&StoQH~uu#_{9F2@MV9#EBDx zg@tkQqVJr#W-x3}?@t<=nY*oIih_@bGXhT)03)LeZq>({S*`}U2vxH!Il|BhTP7ptNC zcQp|GSs&SCKF(pft903h^Vnd$TkS8|eiT_ZZI40S=rOekQxx8eMi*Yh}s|fex@`|$V$>$A~ z;dPSymEpVI^rZ4O3C9CFKh5X51UkkpL7HNeM7nUUa*z1+4i&nPFzEG5!axgp^8A0Z zKATyZJs@HJ-_doIU+ws$L4Kuw2)m_FG|=U8g@1`ujq-~c7yMH=5NfuM!Xh$12Zto= ztF+j^9+!&({mCN6DZ=M#MXZt-rwBQEL!4rWQw(v6Ax`;SoT9#)taQAhe36RH4Oh6Q z(k~$#g&wK&h5v1gUaR-94)`%3{*MEhuO*CV>f5M%2o>q7ePKQ|ytp1!esa0Lm6d-2 L_vBjp0*}aI1_o{+5N5n|x9$%E12eOyi(^Q|t+#j1W-2=hus#qoTEkbp z!6-oNoJ%|F@r^egM94H1UpSZ};KY9ao5_R2n|>%oZxfug(e2gCb+f|x_j5UXVgG9K z*L}HerRo<376*O@1_D&UzrV}XvmAohRsk<$}Xg6zrY+T?6hBveK$JzyMV9((LGB!U|vsrNa&s@7r z{Y|wHa3ikcnyC{MAL{{B=jR=NK zv+pZ&eQi)Y`(B_m>cE9(=KW5p3l{wBT^zuAV~T0LIajFg5-x|z&(UrRB?7Mhk#%wv z@nXDs_Wrt08dDhO)k~Vx@2-paFD>|?BGLBWL`Ln){}{JSFiiL(Fq=uBe(^Mh6YXdC z7-o4zFeXg4lx8Tf%4KrU%iv+Sp_*#Suy@6JmIvEIUokM6ZOdX%+$MIK(b25jn=x_Q zb#BH&K8r4fiG4G;7&h|#WMf_=yP1!*#rlOD8%M>}1P+BKsr`%%^UHf5e_;K=rh7#G zQS8M3y=wpXXC{l7%#;>mef4sSzsQy)F7A%EwO(jsWDCl&=B{77c!Bb=Q%d$vZj1gj z%zkA5!tYBsZ<%Y|&E)VW*K=PmKGAiNOZv7y@Dsn}&yc1XqvLjS)#5Kq(APXE{`Jjm zttZmaPole@%-;Rx_Uk9?GEdxnp0wAzIlkrz``stuyf^f#W2#L5do;Xke*M9n!D8Ef z1||-L1{C7MUxuIOKeMntv7aC!GU2~VXoSN%<-|h9ndi5-vZdHg5tp7I*!rSjb07!5 zg*YqIftT#TnheVqIWWEGXX0L9&SlduPs4z*&#jTWK!q!%VSV5N<`Q*}mWDDB4aWAs z2P`r!jiMX=Ykgp{TYP}0qMyn1fiBm6@%j~vx8L6X|AgVY5JN1}0&j*A&IUck3#tse zSRAG^ynqSrWtx`U<`EhyEDp>gswJ)wB`Jv|saDBFsX&Us$iUE2*T7WQz&OOv$jZdT p$^^(Zu`)2=sQ5M&MMG|WN@iLmZVi>HewsiH44$rjF6*2UngB`rjmrQ4 diff --git a/packages/react-examples/public/favicon.ico b/packages/react-examples/public/favicon.ico deleted file mode 100644 index bfe873eb228f98720fe0ed18c638daa13906958f..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 17174 zcmeHOJ#Q015PgP|sUltJ%A8D-(o!TUkc{NQ1+uPjPZg!4M<`cP($XUeDk>yUiu?k8 z10_|E2qK~~GdH`@9=;55lyHgjMj7wN?OyiY%vw?RV_+}{(X$}` zkiRp}d#2#VM9RE@(KQaI zUnaWs7TXteX8N); ON)^VQz<8Ga>-ryC<7BY_ diff --git a/packages/react-examples/public/favicon.png b/packages/react-examples/public/favicon.png deleted file mode 100644 index bfe873eb228f98720fe0ed18c638daa13906958f..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 17174 zcmeHOJ#Q015PgP|sUltJ%A8D-(o!TUkc{NQ1+uPjPZg!4M<`cP($XUeDk>yUiu?k8 z10_|E2qK~~GdH`@9=;55lyHgjMj7wN?OyiY%vw?RV_+}{(X$}` zkiRp}d#2#VM9RE@(KQaI zUnaWs7TXteX8N); ON)^VQz<8Ga>-ryC<7BY_ 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 @@ - - - - - - - -