feat: [sc-37860] Add storybook support for svelte components

package.json

@@ -23,16 +23,29 @@
     "quarto": "quarto render ./quarto/ --fail-if-warnings",
     "g:eslint": "cd $INIT_CWD && eslint",
     "g:parcel": "cd $INIT_CWD && parcel",
-    "storybook": "yarn workspace @tiledb-inc/viz-react storybook",
+    "g:storybook": "cd $INIT_CWD && storybook",
+    "storybook": "yarn workspace @tiledb-inc/viz-components storybook",
     "lint": "yarn workspace @tiledb-inc/viz-core lint && yarn workspace @tiledb-inc/viz-react lint",
     "lint:fix": "yarn workspace @tiledb-inc/viz-core lint:fix"
   },
   "devDependencies": {
     "@babel/core": "^7.18.13",
-    "@parcel/optimizer-data-url": "2.9.3",
-    "@parcel/packager-ts": "2.9.3",
-    "@parcel/transformer-inline-string": "2.9.3",
-    "@parcel/transformer-typescript-types": "2.9.3",
+    "@parcel/optimizer-data-url": "2.10.3",
+    "@parcel/packager-ts": "2.10.3",
+    "@parcel/transformer-inline-string": "2.10.3",
+    "@parcel/transformer-typescript-types": "2.10.3",
+    "@storybook/addon-actions": "^7.6.3",
+    "@storybook/addon-docs": "^7.6.3",
+    "@storybook/addon-essentials": "^7.6.3",
+    "@storybook/addon-interactions": "^7.6.3",
+    "@storybook/addon-links": "^7.6.3",
+    "@storybook/blocks": "^7.6.3",
+    "@storybook/react": "^7.6.3",
+    "@storybook/react-webpack5": "^7.6.3",
+    "@storybook/svelte": "^7.6.3",
+    "@storybook/svelte-vite": "^7.6.3",
+    "@storybook/test": "^7.6.3",
+    "@storybook/testing-library": "^0.0.13",
     "@types/jest": "^29.0.0",
     "@types/node": "^18.11.18",
     "@typescript-eslint/eslint-plugin": "^5.33.1",
@@ -42,13 +55,14 @@
     "eslint-plugin-prettier": "^4.2.1",
     "jest": "^28.1.3",
     "jest-environment-jsdom": "^29.0.1",
-    "parcel": "2.9.3",
+    "parcel": "2.10.3",
     "prettier": "^2.7.1",
     "sass": "^1.64.1",
+    "storybook": "^7.6.3",
     "ts-node": "^10.9.1",
     "typedoc": "^0.23.24",
     "typedoc-plugin-markdown": "^3.14.0",
-    "typescript": "4.7.4",
+    "typescript": "4.9.3",
     "vite-plugin-dts": "^3.3.1"
   },
   "dependenciesMeta": {

packages/components/.storybook/main.ts

@@ -0,0 +1,27 @@
+import type { StorybookConfig } from '@storybook/svelte-vite';
+
+import { join, dirname } from 'path';
+
+/**
+ * This function is used to resolve the absolute path of a package.
+ * It is needed in projects that use Yarn PnP or are set up within a monorepo.
+ */
+function getAbsolutePath(value: string): any {
+  return dirname(require.resolve(join(value, 'package.json')));
+}
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx|svelte)'],
+  addons: [
+    getAbsolutePath('@storybook/addon-links'),
+    getAbsolutePath('@storybook/addon-essentials'),
+    getAbsolutePath('@storybook/addon-interactions')
+  ],
+  framework: {
+    name: getAbsolutePath('@storybook/svelte-vite'),
+    options: {}
+  },
+  docs: {
+    autodocs: 'tag'
+  }
+};
+export default config;

packages/components/.storybook/preview.ts

@@ -0,0 +1,15 @@
+import type { Preview } from '@storybook/svelte';
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i
+      }
+    }
+  }
+};
+
+export default preview;

packages/components/package.json

@@ -12,12 +12,16 @@
   "scripts": {
     "build": "vite build",
     "build:types": "yarn g:tsc --declaration --allowJs false --emitDeclarationOnly",
-    "check": "svelte-check --tsconfig ./tsconfig.json"
+    "check": "svelte-check --tsconfig ./tsconfig.json",
+    "storybook": "yarn g:storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "^2.4.3",
     "@tsconfig/svelte": "^5.0.0",
     "esbuild": "^0.18.13",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "svelte": "^4.1.2",
     "svelte-check": "^3.4.6",
     "svelte-preprocess": "^5.0.4",

packages/components/src/stories/DoubleRangeSlider.stories.ts

@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import DoubleRangeSlider from '../DoubleRangeSlider.component.svelte';
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+const meta = {
+  title: 'DoubleRangeSlider',
+  component: DoubleRangeSlider
+} satisfies Meta<DoubleRangeSlider>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Primary: Story = {
+  args: {
+    label: 'Double range label',
+    min: 5,
+    id: 'unique-id',
+    max: 100
+  }
+};

packages/react/.babelrc.json

@@ -0,0 +1,18 @@
+{
+  "sourceType": "unambiguous",
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "chrome": 100,
+          "safari": 15,
+          "firefox": 91
+        }
+      }
+    ],
+    "@babel/preset-typescript",
+    "@babel/preset-react"
+  ],
+  "plugins": []
+}

packages/react/.storybook/main.js

@@ -1,23 +1,19 @@
-const NodePolyfillPlugin = require("node-polyfill-webpack-plugin");
+const NodePolyfillPlugin = require('node-polyfill-webpack-plugin');
 
 module.exports = {
-  core: {
-    builder: 'webpack5',
-  },
-  "stories": [
-    "../src/**/*.stories.mdx",
-    "../src/**/*.stories.@(js|jsx|ts|tsx)",
-    "../src/**/*.stories.tsx"
-  ],
-  "addons": [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@storybook/addon-interactions"
+  stories: [
+    '../src/**/*.stories.mdx',
+    '../src/**/*.stories.@(js|jsx|ts|tsx)',
+    '../src/**/*.stories.tsx'
   ],
-  "framework": "@storybook/react",
-  webpackFinal: (config) => {
-    config.plugins.push(new NodePolyfillPlugin())
+  addons: [],
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {}
+  },
+  webpackFinal: config => {
+    config.plugins.push(new NodePolyfillPlugin());
 
-    return config
+    return config;
   }
-}
+};

packages/react/package.json

@@ -32,7 +32,7 @@
   "packageManager": "yarn@3.2.3",
   "scripts": {
     "build": "yarn g:parcel build",
-    "storybook": "yarn start-storybook -p 6006 --loglevel verbose",
+    "storybook": "yarn g:storybook dev -p 6006",
     "build-storybook": "build-storybook",
     "lint": "yarn g:eslint './src/**/*.{ts,tsx}'",
     "lint:fix": "yarn g:eslint './src/**/*.{ts,tsx}' --fix"
@@ -44,16 +44,10 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
+    "@babel/preset-env": "^7.23.5",
+    "@babel/preset-react": "^7.23.3",
+    "@babel/preset-typescript": "^7.23.3",
     "@mdx-js/react": "^1.6.22",
-    "@storybook/addon-actions": "^6.5.12",
-    "@storybook/addon-docs": "^6.5.12",
-    "@storybook/addon-essentials": "^6.5.12",
-    "@storybook/addon-interactions": "^6.5.12",
-    "@storybook/addon-links": "^6.5.12",
-    "@storybook/builder-webpack5": "^6.5.12",
-    "@storybook/manager-webpack5": "^6.5.12",
-    "@storybook/react": "^6.5.12",
-    "@storybook/testing-library": "^0.0.13",
     "@types/node": "^18.11.18",
     "@types/react": "^18.0.17",
     "node-polyfill-webpack-plugin": "^2.0.1",