From a2140cbe91046a12e3a647fec1ee73e0e3d2786a Mon Sep 17 00:00:00 2001 From: Abbey Hart Date: Fri, 21 Jan 2022 16:01:23 -0600 Subject: [PATCH 1/4] fix(carbon-react): update glob pattern to include missing stories --- packages/carbon-react/.storybook/main.js | 48 ++++++++++++++++++--- packages/carbon-react/.storybook/preview.js | 3 ++ packages/carbon-react/src/index.js | 4 ++ packages/react/src/index.js | 1 + 4 files changed, 49 insertions(+), 7 deletions(-) diff --git a/packages/carbon-react/.storybook/main.js b/packages/carbon-react/.storybook/main.js index 18dbf9565528..88f663c6794d 100644 --- a/packages/carbon-react/.storybook/main.js +++ b/packages/carbon-react/.storybook/main.js @@ -7,9 +7,49 @@ 'use strict'; +const fs = require('fs'); +// TODO: make sure this is a devDependency +const glob = require('fast-glob'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const path = require('path'); +const stories = glob + .sync( + [ + './Welcome/Welcome.stories.js', + '../src/**/*.stories.js', + '../src/**/*.stories.mdx', + '../../react/src/**/next/*.stories.js', + '../../react/src/**/next/*.stories.mdx', + '../../react/src/**/*-story.js', + ], + { + cwd: __dirname, + } + ) + .filter((match) => { + const filepath = path.resolve(__dirname, match); + const basename = path.basename(match, '.js'); + + if (basename.endsWith('-story')) { + const component = basename.replace(/-story$/, ''); + const storyName = path.resolve( + filepath, + '..', + 'next', + `${component}.stories.js` + ); + + if (fs.existsSync(storyName)) { + return false; + } + + return true; + } + + return true; + }); + module.exports = { addons: [ { @@ -29,13 +69,7 @@ module.exports = { core: { builder: 'webpack5', }, - stories: [ - './Welcome/Welcome.stories.js', - '../src/**/*.stories.js', - '../src/**/*.stories.mdx', - '../../react/src/**/next/*.stories.js', - '../../react/src/**/next/*.stories.mdx', - ], + stories: stories, webpack(config) { const babelLoader = config.module.rules.find((rule) => { return rule.use.some(({ loader }) => { diff --git a/packages/carbon-react/.storybook/preview.js b/packages/carbon-react/.storybook/preview.js index 6867fb6a9fcb..a0e9ec07c51f 100644 --- a/packages/carbon-react/.storybook/preview.js +++ b/packages/carbon-react/.storybook/preview.js @@ -130,6 +130,9 @@ export const parameters = { }, }, }, + options: { + method: 'alphabetical', + }, }; configureActions({ diff --git a/packages/carbon-react/src/index.js b/packages/carbon-react/src/index.js index a2d2145616c2..8d360a39cdf9 100644 --- a/packages/carbon-react/src/index.js +++ b/packages/carbon-react/src/index.js @@ -204,6 +204,10 @@ export { unstable_ProgressBar, unstable_Section as Section, unstable_Stack as Stack, + unstable_TabPanel, + unstable_TabPanels, + unstable_TabList, + unstable_IconTab, unstable_ThemeContext, unstable_Theme as Theme, unstable_Tooltip as Tooltip, diff --git a/packages/react/src/index.js b/packages/react/src/index.js index 8ad409cec51b..87fe1d4be2a3 100644 --- a/packages/react/src/index.js +++ b/packages/react/src/index.js @@ -4,6 +4,7 @@ * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. */ + export Accordion from './components/Accordion'; export AccordionItem from './components/AccordionItem'; export { AspectRatio } from './components/AspectRatio'; From 2b7c1820251f85182de9062a37bba2bde527305c Mon Sep 17 00:00:00 2001 From: Abbey Hart Date: Fri, 21 Jan 2022 17:03:02 -0600 Subject: [PATCH 2/4] fix(carbon-react): add fast glob to devDependencies --- packages/carbon-react/.storybook/main.js | 1 - packages/carbon-react/package.json | 1 + packages/react/src/index.js | 1 - 3 files changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/carbon-react/.storybook/main.js b/packages/carbon-react/.storybook/main.js index 35d4d3cb824b..9527151f6191 100644 --- a/packages/carbon-react/.storybook/main.js +++ b/packages/carbon-react/.storybook/main.js @@ -8,7 +8,6 @@ 'use strict'; const fs = require('fs'); -// TODO: make sure this is a devDependency const glob = require('fast-glob'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const path = require('path'); diff --git a/packages/carbon-react/package.json b/packages/carbon-react/package.json index 385c7d0b037b..b1de69ff6a45 100644 --- a/packages/carbon-react/package.json +++ b/packages/carbon-react/package.json @@ -77,6 +77,7 @@ "babel-preset-carbon": "^0.2.0", "browserslist-config-carbon": "^10.6.1", "css-loader": "^6.5.1", + "fast-glob": "^3.2.7", "fs-extra": "^10.0.0", "mini-css-extract-plugin": "^2.4.5", "postcss": "^8.4.5", diff --git a/packages/react/src/index.js b/packages/react/src/index.js index 87fe1d4be2a3..8ad409cec51b 100644 --- a/packages/react/src/index.js +++ b/packages/react/src/index.js @@ -4,7 +4,6 @@ * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. */ - export Accordion from './components/Accordion'; export AccordionItem from './components/AccordionItem'; export { AspectRatio } from './components/AspectRatio'; From c91b6b92ca7ea172c78346cefa4c19b64fbe46b7 Mon Sep 17 00:00:00 2001 From: Abbey Hart Date: Fri, 21 Jan 2022 17:14:26 -0600 Subject: [PATCH 3/4] chore(project): update lockfile --- yarn.lock | 1 + 1 file changed, 1 insertion(+) diff --git a/yarn.lock b/yarn.lock index f4e73d6e7dc7..5b0564682d8a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2104,6 +2104,7 @@ __metadata: carbon-components-react: ^7.51.0 carbon-icons: ^7.0.7 css-loader: ^6.5.1 + fast-glob: ^3.2.7 fs-extra: ^10.0.0 mini-css-extract-plugin: ^2.4.5 postcss: ^8.4.5 From 37d7862e0da9e0a8b2fa19dbc5424d0f8192463f Mon Sep 17 00:00:00 2001 From: Abbey Hart Date: Wed, 26 Jan 2022 15:08:14 -0600 Subject: [PATCH 4/4] fix(carbon-react): use storySort to sort the stories and add comments --- packages/carbon-react/.storybook/main.js | 5 +- packages/carbon-react/.storybook/preview.js | 70 ++++++++++++++++++++- 2 files changed, 72 insertions(+), 3 deletions(-) diff --git a/packages/carbon-react/.storybook/main.js b/packages/carbon-react/.storybook/main.js index 9527151f6191..ca348a08bfdc 100644 --- a/packages/carbon-react/.storybook/main.js +++ b/packages/carbon-react/.storybook/main.js @@ -26,6 +26,9 @@ const stories = glob cwd: __dirname, } ) + // Filters the stories by finding the paths that have a story file that ends + // in `-story.js` and checks to see if they also have a `.stories.js`, + // if so then defer to the `.stories.js` .filter((match) => { const filepath = path.resolve(__dirname, match); const basename = path.basename(match, '.js'); @@ -71,7 +74,7 @@ module.exports = { features: { previewCsfV3: true, }, - stories: stories, + stories, webpack(config) { const babelLoader = config.module.rules.find((rule) => { return rule.use.some(({ loader }) => { diff --git a/packages/carbon-react/.storybook/preview.js b/packages/carbon-react/.storybook/preview.js index a0e9ec07c51f..2ddbd2fab609 100644 --- a/packages/carbon-react/.storybook/preview.js +++ b/packages/carbon-react/.storybook/preview.js @@ -12,6 +12,7 @@ import { white, g10, g90, g100 } from '@carbon/themes'; import React from 'react'; import { breakpoints } from '@carbon/layout'; import { unstable_ThemeContext as ThemeContext } from '../src'; +import { addParameters } from '@storybook/react'; export const globalTypes = { locale: { @@ -130,10 +131,75 @@ export const parameters = { }, }, }, +}; + +addParameters({ options: { - method: 'alphabetical', + storySort: (storyA, storyB) => { + // By default, sort by the story "kind". The "kind" refers to the + // top-level title of the story, either through Component Story Format + // with the default export, or the `storiesOf('kind', module)` format + if (storyA[1].kind !== storyB[1].kind) { + return storyA[1].kind.localeCompare(storyB[1].kind); + } + + const idA = storyA[0]; + const idB = storyB[0]; + + // To story the stories, we first build up a list of matches based on + // keywords. Each keyword has a specific weight that will be used to + // determine order later on. + const UNKNOWN_KEYWORD = 3; + const keywords = new Map([ + ['welcome', 0], + ['default', 1], + ['usage', 2], + ['playground', 4], + ['development', 5], + ['deprecated', 6], + ['unstable', 7], + ]); + const matches = new Map(); + + // We use this list of keywords to determine a collection of matches. By + // default, we will look for the greatest valued matched + for (const [keyword, weight] of keywords) { + // If we already have a match for a given id that is greater than the + // specific keyword we're looking for, break early + if (matches.get(idA) > weight || matches.get(idB) > weight) { + break; + } + + // If we don't have a match already for either id, we check to see if + // the id includes the keyword and assigns the relevant weight, if so + if (idA.includes(keyword)) { + matches.set(idA, weight); + } + + if (idB.includes(keyword)) { + matches.set(idB, weight); + } + } + + // If we have matches for either id, then we will compare the ids based on + // the weight assigned to the matching keyword + if (matches.size > 0) { + const weightA = matches.get(idA) ?? UNKNOWN_KEYWORD; + const weightB = matches.get(idB) ?? UNKNOWN_KEYWORD; + // If we have the same weight for the ids, then we should compare them + // using locale compare instead of by weight + if (weightA === weightB) { + return idA.localeCompare(idB); + } + return weightA - weightB; + } + + // By default, if we have no matches we'll do a locale compare between the + // two ids + return idA.localeCompare(idB); + }, }, -}; +}); configureActions({ depth: 3,