diff --git a/.storybook/Theme.js b/.storybook/Theme.ts similarity index 85% rename from .storybook/Theme.js rename to .storybook/Theme.ts index 80bc2ed7..3166f809 100644 --- a/.storybook/Theme.js +++ b/.storybook/Theme.ts @@ -1,4 +1,4 @@ -import { create } from '@storybook/theming'; +import { create } from '@storybook/theming/create'; export default create({ base: 'light', diff --git a/.storybook/main.cjs b/.storybook/main.cjs deleted file mode 100644 index 4fc3918e..00000000 --- a/.storybook/main.cjs +++ /dev/null @@ -1,43 +0,0 @@ -const { mergeConfig } = require('vite'); -const preprocess = require('../bin/preprocess/index.cjs'); - -module.exports = { - "stories": [ - "../src/**/*.stories.mdx", - "../src/**/*.stories.svelte" - ], - "addons": [ - "@storybook/addon-links", - "@storybook/addon-essentials", - "@storybook/addon-interactions", - ], - "framework": "@storybook/svelte", - "core": { - "builder": "@storybook/builder-vite" - }, - "features": { - "storyStoreV7": false, - "previewMdx2": false, // Until this is fixed: https://github.com/storybookjs/storybook/issues/18556 - }, - typescript: { - check: false, - }, - async viteFinal(config, { configType }) { - return mergeConfig(config, { - base: configType === 'PRODUCTION' ? 'https://reuters-graphics.github.io/graphics-components/' : '/', - css: { - preprocessorOptions: { scss: preprocess.scss }, - }, - resolve: { - alias: { - '@reuters-graphics/graphics-components': './src', - '$lib': './src', - '$docs': './src/docs', - }, - }, - }); - }, - svelteOptions: { - preprocess: preprocess.sveltePreprocess, - }, -} \ No newline at end of file diff --git a/.storybook/main.ts b/.storybook/main.ts new file mode 100644 index 00000000..89e749b1 --- /dev/null +++ b/.storybook/main.ts @@ -0,0 +1,35 @@ +import type { StorybookConfig } from '@storybook/svelte-vite'; +import { mergeConfig } from 'vite'; +import { scss } from '../bin/preprocess/index.js'; + +const config: StorybookConfig = { + "stories": ["../src/**/*.stories.mdx", "../src/**/*.stories.svelte"], + "addons": ["@storybook/addon-links", "@storybook/addon-essentials", "@storybook/addon-interactions", "@storybook/addon-mdx-gfm", '@storybook/addon-svelte-csf'], + "framework": '@storybook/svelte-vite', + typescript: { + check: false + }, + async viteFinal(config, { + configType + }) { + return mergeConfig(config, { + base: configType === 'PRODUCTION' ? 'https://reuters-graphics.github.io/graphics-components/' : '/', + css: { + preprocessorOptions: { + scss + } + }, + resolve: { + alias: { + '@reuters-graphics/graphics-components': './src', + '$lib': './src', + '$docs': './src/docs' + } + }, + }); + }, + docs: { + autodocs: true + } +}; +export default config; \ No newline at end of file diff --git a/.storybook/manager.js b/.storybook/manager.ts similarity index 88% rename from .storybook/manager.js rename to .storybook/manager.ts index ea8af2b1..d2b95f04 100644 --- a/.storybook/manager.js +++ b/.storybook/manager.ts @@ -1,4 +1,4 @@ -import { addons } from '@storybook/addons'; +import { addons } from '@storybook/manager-api'; import theme from './Theme'; addons.setConfig({ @@ -8,7 +8,6 @@ addons.setConfig({ panelPosition: 'bottom', enableShortcuts: true, showToolbar: true, - theme: undefined, selectedPanel: undefined, initialActive: 'sidebar', sidebar: { diff --git a/.storybook/preview.scss b/.storybook/preview.scss index 996c4442..64be7cb8 100644 --- a/.storybook/preview.scss +++ b/.storybook/preview.scss @@ -39,32 +39,36 @@ div.sbdocs-content { } } -p.sbdocs-p, ul.sbdocs-ul, li.sbdocs-li { - font-size: 18px; - line-height: 29px; - @include font-display; - - .highlight { - background-color: rgb(254, 254, 160); - padding: 0 4px; - } - .bold { - font-weight: bold; - } -} - -a.sbdocs-a { - @include font-display; - color: $tr-muted-blue; - text-decoration: none; - &:hover { - text-decoration: underline; - } -} - .sbdocs { @include font-display; + h1 { + @include font-display; + } + + p, ul, li { + font-size: 18px; + line-height: 29px; + @include font-display; + + .highlight { + background-color: rgb(254, 254, 160); + padding: 0 4px; + } + .bold { + font-weight: bold; + } + } + + a { + @include font-display; + color: $tr-muted-blue; + text-decoration: none; + &:hover { + text-decoration: underline; + } + } + &:not(.sbdocs-preview) { code { font-size: 90%; @@ -88,8 +92,6 @@ a.sbdocs-a { } } - - div.reset-article { width: calc(100% + 30px); margin-left: -15px; diff --git a/.storybook/preview.js b/.storybook/preview.ts similarity index 97% rename from .storybook/preview.js rename to .storybook/preview.ts index b9d4325a..a4bd0911 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.ts @@ -67,4 +67,4 @@ export const parameters = { } }; -export const decorators = [() => ({ Component: Wrapper })]; +export const decorators = [() => Wrapper]; diff --git a/bin/buildPackage/process/svelte.js b/bin/buildPackage/process/svelte.js index abb508d2..ceab6e59 100644 --- a/bin/buildPackage/process/svelte.js +++ b/bin/buildPackage/process/svelte.js @@ -2,8 +2,8 @@ import { DIST, LIB } from './../locations.js'; import fs from 'fs-extra'; import path from 'path'; -import preprocess from '../../preprocess/index.cjs'; import { preprocess as svelte } from 'svelte/compiler'; +import { sveltePreprocess } from '../../preprocess/index.js'; const stripLangTags = (source) => source @@ -13,7 +13,7 @@ const stripLangTags = (source) => export default async (file) => { const filename = path.join(LIB, file); let source = fs.readFileSync(filename, 'utf8'); - source = (await svelte(source, preprocess.sveltePreprocess, { filename })).code + source = (await svelte(source, sveltePreprocess, { filename })).code const writePath = path.join(DIST, file); fs.ensureDirSync(path.dirname(writePath)); fs.writeFileSync(writePath, stripLangTags(source)); diff --git a/bin/newComponent/template/YourComponent/YourComponent.stories.svelte b/bin/newComponent/template/YourComponent/YourComponent.stories.svelte index b44d792a..cc6e1f29 100644 --- a/bin/newComponent/template/YourComponent/YourComponent.stories.svelte +++ b/bin/newComponent/template/YourComponent/YourComponent.stories.svelte @@ -13,9 +13,7 @@ // @ts-ignore import SharkImg from './stories/shark.jpg'; - const meta = { - title: 'Components/YourComponent', - component: YourComponent, + const metaProps = { ...withComponentDocs(componentDocs), // https://storybook.js.org/docs/svelte/essentials/controls argTypes: { @@ -27,7 +25,11 @@ }; - +