Merge pull request #46 from discretize/storybook-8-webpack

chore: upgrade to storybook@8

.eslintrc.cjs

@@ -29,7 +29,7 @@ module.exports = {
     },
   },
   plugins: ['react', '@typescript-eslint'],
-  ignorePatterns: ['.storybook', 'dist'],
+  ignorePatterns: ['.storybook', 'dist', 'storybook-static'],
   rules: {
     'lines-between-class-members': 'off',
     // Re-enable i++, iterators and continue

.prettierignore

@@ -5,4 +5,5 @@ pnpm-workspace.yaml
 /gw2-ui/src/gw2api/typeguards/out/
 /gw2-ui/src/gw2api/typeguards/failures/
 /gw2apicache/
-/remark-mdx-gw2ui/mapping/*.json
+/remark-mdx-gw2ui/mapping/*.json
+**/storybook-static

gw2-ui/.storybook/main.js

@@ -1,9 +1,23 @@
+import { dirname, join } from 'node:path';
+
 module.exports = {
   stories: ['../src/**/*.stories.tsx'],
   addons: [
-    '@storybook/addon-actions',
-    '@storybook/addon-essentials',
-    'storybook-css-modules-preset',
+    getAbsolutePath('@storybook/addon-actions'),
+    getAbsolutePath('@storybook/addon-essentials'),
+    getAbsolutePath('storybook-css-modules-preset'),
+    '@storybook/addon-webpack5-compiler-babel',
   ],
-  framework: '@storybook/react',
+  framework: {
+    name: getAbsolutePath('@storybook/react-webpack5'),
+    options: {},
+  },
+  docs: {},
+  typescript: {
+    reactDocgen: 'react-docgen-typescript',
+  },
 };
+
+function getAbsolutePath(value) {
+  return dirname(require.resolve(join(value, 'package.json')));
+}

gw2-ui/.storybook/preview.js

@@ -10,3 +10,5 @@ export const parameters = {
     },
   },
 };
+
+// export const tags = ['autodocs'];

gw2-ui/babel.config.json

@@ -0,0 +1,9 @@
+{
+  "sourceType": "unambiguous",
+  "presets": [
+    ["@babel/preset-env", { "targets": "defaults" }],
+    "@babel/preset-typescript",
+    ["@babel/preset-react", { "runtime": "automatic" }]
+  ],
+  "plugins": []
+}

gw2-ui/package.json

@@ -29,9 +29,9 @@
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
   "scripts": {
-    "dev": "export NODE_OPTIONS=--openssl-legacy-provider && pnpm storybook",
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook",
+    "dev": "pnpm storybook",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
     "build": "node ../build.mjs",
     "api-typecheck": "node ./api_typecheck.mjs",
     "generate-from-api": "node --experimental-fetch ./generate_from_api.mjs",

gw2-ui/src/components/Attribute/Attribute.stories.tsx

@@ -1,20 +1,24 @@
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn, StoryObj } from '@storybook/react';
 import React from 'react';
 import Attribute from './Attribute';
 
-export default {
+const meta: Meta<typeof Attribute> = {
   title: 'Components/Attribute',
   component: Attribute,
   argTypes: {
     className: { control: false },
   },
-} as ComponentMeta<typeof Attribute>;
+};
+export default meta;
 
-const Template: ComponentStory<typeof Attribute> = (args) => {
+const Template: StoryFn<typeof Attribute> = (args) => {
   return <Attribute {...args} />;
 };
 
-export const BoonDuration = Template.bind({});
-BoonDuration.args = {
-  name: 'Boon Duration',
+export const BoonDuration: StoryObj<typeof Attribute> = {
+  render: Template,
+
+  args: {
+    name: 'Boon Duration',
+  },
 };

gw2-ui/src/components/Augmentation/Augmentation.stories.tsx

@@ -1,20 +1,24 @@
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn, StoryObj } from '@storybook/react';
 import React from 'react';
 import Augmentation from './Augmentation';
 
-export default {
+const meta: Meta<typeof Augmentation> = {
   title: 'Components/Augmentation',
   component: Augmentation,
   argTypes: {
     className: { control: false },
   },
-} as ComponentMeta<typeof Augmentation>;
+};
+export default meta;
 
-const Template: ComponentStory<typeof Augmentation> = (args) => {
+const Template: StoryFn<typeof Augmentation> = (args) => {
   return <Augmentation {...args} />;
 };
 
-export const God = Template.bind({});
-God.args = {
-  name: 'Mist Attunement 4',
+export const God: StoryObj<typeof Augmentation> = {
+  render: Template,
+
+  args: {
+    name: 'Mist Attunement 4',
+  },
 };

gw2-ui/src/components/Aura/Auras.stories.tsx

@@ -1,20 +1,24 @@
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn, StoryObj } from '@storybook/react';
 import React from 'react';
 import Aura from './Aura';
 
-export default {
+const meta: Meta<typeof Aura> = {
   title: 'Components/Aura',
   component: Aura,
   argTypes: {
     className: { control: false },
   },
-} as ComponentMeta<typeof Aura>;
+};
+export default meta;
 
-const Template: ComponentStory<typeof Aura> = (args) => {
+const Template: StoryFn<typeof Aura> = (args) => {
   return <Aura {...args} />;
 };
 
-export const Simple = Template.bind({});
-Simple.args = {
-  name: 'Light',
+export const Simple: StoryObj<typeof Aura> = {
+  render: Template,
+
+  args: {
+    name: 'Light',
+  },
 };

gw2-ui/src/components/Boon/Boon.stories.tsx

@@ -1,20 +1,24 @@
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn, StoryObj } from '@storybook/react';
 import React from 'react';
 import Boon from './Boon';
 
-export default {
+const meta: Meta<typeof Boon> = {
   title: 'Components/Boon',
   component: Boon,
   argTypes: {
     className: { control: false },
   },
-} as ComponentMeta<typeof Boon>;
+};
+export default meta;
 
-const Template: ComponentStory<typeof Boon> = (args) => {
+const Template: StoryFn<typeof Boon> = (args) => {
   return <Boon {...args} />;
 };
 
-export const BoonMight = Template.bind({});
-BoonMight.args = {
-  name: 'Might',
+export const BoonMight: StoryObj<typeof Boon> = {
+  render: Template,
+
+  args: {
+    name: 'Might',
+  },
 };

gw2-ui/src/components/Coin/Coin.stories.tsx

@@ -1,20 +1,24 @@
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn, StoryObj } from '@storybook/react';
 import React from 'react';
 import Coin from './Coin';
 
-export default {
+const meta: Meta<typeof Coin> = {
   title: 'Components/Coin',
   component: Coin,
   argTypes: {
     className: { control: false },
   },
-} as ComponentMeta<typeof Coin>;
+};
+export default meta;
 
-const Template: ComponentStory<typeof Coin> = (args) => {
+const Template: StoryFn<typeof Coin> = (args) => {
   return <Coin {...args} />;
 };
 
-export const CoinMight = Template.bind({});
-CoinMight.args = {
-  value: 1234123,
+export const CoinMight: StoryObj<typeof Coin> = {
+  render: Template,
+
+  args: {
+    value: 1234123,
+  },
 };

gw2-ui/src/components/CommonEffect/CommonEffect.stories.tsx

@@ -1,23 +1,27 @@
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn, StoryObj } from '@storybook/react';
 import React from 'react';
 import { APILanguageProvider } from '../../i18n';
 import CommonEffect from './CommonEffect';
 
-export default {
+const meta: Meta<typeof CommonEffect> = {
   title: 'Components/CommonEffect',
   component: CommonEffect,
   argTypes: {
     className: { control: false },
   },
-} as ComponentMeta<typeof CommonEffect>;
+};
+export default meta;
 
-const Template: ComponentStory<typeof CommonEffect> = (args) => {
+const Template: StoryFn<typeof CommonEffect> = (args) => {
   return <CommonEffect {...args} />;
 };
 
-export const Simple = Template.bind({});
-Simple.args = {
-  name: 'Agony',
+export const Simple: StoryObj<typeof CommonEffect> = {
+  render: Template,
+
+  args: {
+    name: 'Agony',
+  },
 };
 
 export function Translated() {

gw2-ui/src/components/Condition/Condition.stories.tsx

@@ -1,20 +1,24 @@
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn, StoryObj } from '@storybook/react';
 import React from 'react';
 import Condition from './Condition';
 
-export default {
+const meta: Meta<typeof Condition> = {
   title: 'Components/Condition',
   component: Condition,
   argTypes: {
     className: { control: false },
   },
-} as ComponentMeta<typeof Condition>;
+};
+export default meta;
 
-const Template: ComponentStory<typeof Condition> = (args) => {
+const Template: StoryFn<typeof Condition> = (args) => {
   return <Condition {...args} />;
 };
 
-export const Bleed = Template.bind({});
-Bleed.args = {
-  name: 'Bleeding',
+export const Bleed: StoryObj<typeof Condition> = {
+  render: Template,
+
+  args: {
+    name: 'Bleeding',
+  },
 };

gw2-ui/src/components/ConsumableEffect/ConsumableEffect.stories.tsx

@@ -1,20 +1,24 @@
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn, StoryObj } from '@storybook/react';
 import React from 'react';
 import ConsumableEffect from './ConsumableEffect';
 
-export default {
+const meta: Meta<typeof ConsumableEffect> = {
   title: 'Components/ConsumableEffect',
   component: ConsumableEffect,
   argTypes: {
     className: { control: false },
   },
-} as ComponentMeta<typeof ConsumableEffect>;
+};
+export default meta;
 
-const Template: ComponentStory<typeof ConsumableEffect> = (args) => {
+const Template: StoryFn<typeof ConsumableEffect> = (args) => {
   return <ConsumableEffect {...args} />;
 };
 
-export const Simple = Template.bind({});
-Simple.args = {
-  name: 'Enhancement',
+export const Simple: StoryObj<typeof ConsumableEffect> = {
+  render: Template,
+
+  args: {
+    name: 'Enhancement',
+  },
 };

gw2-ui/src/components/ControlEffect/ControlEffect.stories.tsx

@@ -1,23 +1,27 @@
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn, StoryObj } from '@storybook/react';
 import React from 'react';
 import ControlEffect from './ControlEffect';
 import { APILanguageProvider } from '../../i18n';
 
-export default {
+const meta: Meta<typeof ControlEffect> = {
   title: 'Components/ControlEffect',
   component: ControlEffect,
   argTypes: {
     className: { control: false },
   },
-} as ComponentMeta<typeof ControlEffect>;
+};
+export default meta;
 
-const Template: ComponentStory<typeof ControlEffect> = (args) => {
+const Template: StoryFn<typeof ControlEffect> = (args) => {
   return <ControlEffect {...args} />;
 };
 
-export const Daze = Template.bind({});
-Daze.args = {
-  name: 'Daze',
+export const Daze: StoryObj<typeof ControlEffect> = {
+  render: Template,
+
+  args: {
+    name: 'Daze',
+  },
 };
 
 export function Translated() {