From 0ec2a58a344d8ee58d5e24ef986499645159ecba Mon Sep 17 00:00:00 2001 From: Jon McClure Date: Wed, 26 Apr 2023 15:07:27 +0100 Subject: [PATCH 1/8] initial migrations to 7 --- .storybook/{Theme.js => Theme.ts} | 2 +- .storybook/main.cjs | 43 - .storybook/main.ts | 35 + .storybook/{manager.js => manager.ts} | 3 +- .storybook/preview.scss | 44 +- .storybook/{preview.js => preview.ts} | 2 +- bin/buildPackage/process/svelte.js | 4 +- .../YourComponent.stories.svelte | 10 +- bin/preprocess/{index.cjs => index.js} | 15 +- package-lock.json | 44296 ---------------- package.json | 91 +- src/components/Article/Article.stories.svelte | 16 +- .../BeforeAfter/BeforeAfter.stories.svelte | 6 +- src/components/Block/Block.stories.svelte | 7 +- .../BodyText/BodyText.stories.svelte | 12 +- .../DatawrapperChart.stories.svelte | 10 +- .../DocumentCloud.stories.svelte | 10 +- .../EmbedPreviewerLink.stories.svelte | 24 +- .../FeaturePhoto/FeaturePhoto.stories.svelte | 30 +- src/components/Framer/Framer.stories.svelte | 20 +- .../GraphicBlock/GraphicBlock.stories.svelte | 43 +- .../Headline/Headline.stories.svelte | 12 +- src/components/Hero/Hero.stories.svelte | 23 +- .../NoteText/NoteText.stories.svelte | 22 +- .../PaddingReset/PaddingReset.stories.svelte | 12 +- .../PhotoCarousel.stories.svelte | 11 +- .../PhotoPack/PhotoPack.stories.svelte | 6 +- .../PymChild/PymChild.stories.svelte | 20 +- .../ReferralBlock.stories.svelte | 12 +- .../ReutersGraphicsLogo.stories.svelte | 13 +- .../ReutersLogo/ReutersLogo.stories.svelte | 16 +- src/components/SEO/SEO.stories.svelte | 12 +- .../Scroller/Scroller.stories.svelte | 6 +- src/components/Sharer/Sharer.stories.svelte | 20 +- .../SimpleTimeline.stories.svelte | 10 +- .../SiteFooter/SiteFooter.stories.svelte | 14 +- .../SiteHeader/SiteHeader.stories.svelte | 6 +- .../SiteHeadline/SiteHeadline.stories.svelte | 12 +- src/components/Spinner/Spinner.stories.svelte | 15 +- src/components/Table/Table.stories.svelte | 8 +- src/components/Theme/Theme.stories.svelte | 6 +- .../ToolsHeader/ToolsHeader.stories.svelte | 12 +- src/components/Video/Video.stories.svelte | 12 +- src/components/Visible/Visible.stories.svelte | 12 +- src/docs/guides/graphics-kit.stories.mdx | 4 +- svelte.config.js | 14 + tsconfig.json | 18 +- vite.config.ts | 13 +- yarn.lock | 10454 ++-- 49 files changed, 3659 insertions(+), 51859 deletions(-) rename .storybook/{Theme.js => Theme.ts} (85%) delete mode 100644 .storybook/main.cjs create mode 100644 .storybook/main.ts rename .storybook/{manager.js => manager.ts} (88%) rename .storybook/{preview.js => preview.ts} (97%) rename bin/preprocess/{index.cjs => index.js} (58%) delete mode 100644 package-lock.json create mode 100644 svelte.config.js 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,31 +39,35 @@ div.sbdocs-content { } } -p.sbdocs-p, ul.sbdocs-ul, li.sbdocs-li { - font-size: 18px; - line-height: 29px; +.sbdocs { @include font-display; - .highlight { - background-color: rgb(254, 254, 160); - padding: 0 4px; - } - .bold { - font-weight: bold; + h1 { + @include font-display; } -} -a.sbdocs-a { - @include font-display; - color: $tr-muted-blue; - text-decoration: none; - &:hover { - text-decoration: underline; + 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; + } } -} -.sbdocs { - @include font-display; + a { + @include font-display; + color: $tr-muted-blue; + text-decoration: none; + &:hover { + text-decoration: underline; + } + } &:not(.sbdocs-preview) { code { @@ -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 @@ }; - +