Merge pull request #67 from reuters-graphics/storybook-7

Upgrade Storybook to 7.0

.storybook/Theme.js → .storybook/Theme.ts

@@ -1,4 +1,4 @@
-import { create } from '@storybook/theming';
+import { create } from '@storybook/theming/create';
 
 export default create({
   base: 'light',

.storybook/main.ts

@@ -0,0 +1,17 @@
+import type { StorybookConfig } from '@storybook/svelte-vite';
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx|svelte)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+    '@storybook/addon-svelte-csf',
+  ],
+  framework: '@storybook/svelte-vite',
+  core: { disableTelemetry: true },
+  docs: {
+    autodocs: true,
+  },
+};
+export default config;

.storybook/manager.js → .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: {

.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;

.storybook/preview.js → .storybook/preview.ts

@@ -67,4 +67,4 @@ export const parameters = {
   }
 };
 
-export const decorators = [() => ({ Component: Wrapper })];
+export const decorators = [() => Wrapper];

bin/buildPackage/index.js

@@ -9,7 +9,7 @@ import picomatch from 'picomatch';
 import processOther from './process/other.js';
 import processSvelte from './process/svelte.js';
 import processTypescript from './process/typescript.js';
-import rimraf from 'rimraf';
+import { rimraf } from 'rimraf';
 
 const require = createRequire(import.meta.url);
 

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));

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 @@
   };
 </script>
 
-<Meta {...meta} />
+<Meta
+  title='Components/YourComponent'
+  component={YourComponent}
+  {...metaProps}
+/>
 
 <Template let:args>
   <YourComponent {...args} />

bin/newComponent/template/YourComponent/stories/docs/component.md

@@ -13,7 +13,7 @@
 
 ---
 
-```svelte
+```html
 <script>
   import { YourComponent } from '@reuters-graphics/graphics-components';
 </script>

bin/preprocess/index.cjs → bin/preprocess/index.js

@@ -1,11 +1,11 @@
-const autoprefixer = require('autoprefixer');
-const preprocess = require('svelte-preprocess');
+import autoprefixer from 'autoprefixer';
+import preprocess from 'svelte-preprocess';
 
-const scss = {
+export const scss = {
   includePaths: ['src/', 'node_modules/bootstrap/scss/'],
   importer: [
     (url) => {
-      if (/^\$lib/.test(url)){ return { file: `src/${url.replace('$lib', '')}` }; }
+      if (/^\$lib/.test(url)) { return { file: `src/${url.replace('$lib', '')}` }; }
       // Redirect tilde-prefixed imports to node_modules
       if (/^~/.test(url)) { return { file: `node_modules/${url.replace('~', '')}` }; }
       return null;
@@ -14,16 +14,11 @@ const scss = {
   quietDeps: true,
 };
 
-const sveltePreprocess = preprocess({
+export const sveltePreprocess = preprocess({
   preserve: ['ld+json'],
   typescript: true,
   scss,
   postcss: {
     plugins: [autoprefixer],
   },
 });
-
-module.exports = {
-  scss,
-  sveltePreprocess
-}