From 6f77131839a7e7eb638553377f5df6cc88316740 Mon Sep 17 00:00:00 2001 From: Nathan Vasse Date: Fri, 19 May 2023 17:09:20 +0200 Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F(react)=20migration=20preview?= =?UTF-8?q?.js=20to=20preview.ts?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Storybook 7 allows to simply use typing inside preview.ts configuration file. --- packages/react/.storybook/preview.js | 32 ------------------- packages/react/.storybook/preview.ts | 46 ++++++++++++++++++++++++++++ 2 files changed, 46 insertions(+), 32 deletions(-) delete mode 100644 packages/react/.storybook/preview.js create mode 100644 packages/react/.storybook/preview.ts diff --git a/packages/react/.storybook/preview.js b/packages/react/.storybook/preview.js deleted file mode 100644 index 284bdf9..0000000 --- a/packages/react/.storybook/preview.js +++ /dev/null @@ -1,32 +0,0 @@ -import '../src/index.scss' -import '../src/fonts.scss' -import '../src/icons.scss' - -export const parameters = { - actions: { argTypesRegex: "^on[A-Z].*" }, - controls: { - matchers: { - color: /(background|color)$/i, - date: /Date$/, - }, - }, - options: { - storySort: (a, b) => { - const roots = ['Getting Started', 'Components']; - const gettingStartedOrder = ['Installation', 'Colors', 'Spacings', 'Typography']; - - const aParts = a.title.split('/'); - const bParts = b.title.split('/'); - if (aParts[0] !== bParts[0]) { - return roots.indexOf(aParts[0]) - roots.indexOf(bParts[0]); - } - if (aParts[1] !== bParts[1]) { - if (aParts[0] === 'Getting Started') { - return gettingStartedOrder.indexOf(aParts[1]) - gettingStartedOrder.indexOf(bParts[1]); - } - return aParts[1].localeCompare(bParts[1]); - } - return 0; - } - } -} \ No newline at end of file diff --git a/packages/react/.storybook/preview.ts b/packages/react/.storybook/preview.ts new file mode 100644 index 0000000..b49e69d --- /dev/null +++ b/packages/react/.storybook/preview.ts @@ -0,0 +1,46 @@ +import "../src/index.scss"; +import "../src/fonts.scss"; +import "../src/icons.scss"; +import { Preview } from "@storybook/react"; + +const preview: Preview = { + parameters: { + actions: { argTypesRegex: "^on[A-Z].*" }, + controls: { + matchers: { + color: /(background|color)$/i, + date: /Date$/, + }, + }, + options: { + storySort: (a, b) => { + const roots = ["Getting Started", "Components"]; + const gettingStartedOrder = [ + "Installation", + "Customization", + "Colors", + "Spacings", + "Typography", + ]; + + const aParts = a.title.split("/"); + const bParts = b.title.split("/"); + if (aParts[0] !== bParts[0]) { + return roots.indexOf(aParts[0]) - roots.indexOf(bParts[0]); + } + if (aParts[1] !== bParts[1]) { + if (aParts[0] === "Getting Started") { + return ( + gettingStartedOrder.indexOf(aParts[1]) - + gettingStartedOrder.indexOf(bParts[1]) + ); + } + return aParts[1].localeCompare(bParts[1]); + } + return 0; + }, + }, + }, +}; + +export default preview;