INT-3307: Update storybook to use v8 and Vite builder (#55)

* INT-3307: Update to storybook v8

* INT-3307: Add controls to storybooks

* INT-3307: Use gh-pages to deploy storybook

* INT-3307: Clean up unused storybook addons

* INT-3307: Renamed storybook config files to typescript

* INT-3307: Recreated package lock

* INT-3307: use `export const meta` instead of `Meta` storybook component

* INT-3307: Moved meta object export to a module context script

.storybook/main.ts

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

package.json

@@ -26,9 +26,9 @@
     "validate": "svelte-check",
     "lint": "eslint src/main/**/*.{ts,svelte}",
     "test": "echo 'No tests hooked up yet'",
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook",
-    "deploy-storybook": "yarn storybook-to-ghpages --source-branch=main",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "deploy-storybook": "storybook build && gh-pages -d ./storybook-static -u 'tiny-bot <[email protected]>' --nojekyll",
     "prepublishOnly": "yarn run build"
   },
   "keywords": [
@@ -50,21 +50,11 @@
     "@rollup/plugin-commonjs": "^17.0.0",
     "@rollup/plugin-node-resolve": "^11.0.0",
     "@rollup/plugin-typescript": "^8.2.5",
-    "@storybook/addon-actions": "^6.3.7",
-    "@storybook/addon-essentials": "^6.3.7",
-    "@storybook/addon-links": "^6.3.7",
-    "@storybook/addon-svelte-csf": "^1.1.0",
-    "@storybook/addons": "^6.2.9",
-    "@storybook/api": "^6.2.9",
-    "@storybook/builder-webpack5": "^6.5.16",
-    "@storybook/client-api": "^6.2.9",
-    "@storybook/client-logger": "^6.2.9",
-    "@storybook/components": "^6.2.9",
-    "@storybook/core-events": "^6.2.9",
-    "@storybook/manager-webpack5": "^6.5.16",
-    "@storybook/storybook-deployer": "^2.8.10",
-    "@storybook/svelte": "^6.3.7",
-    "@storybook/theming": "^6.2.9",
+    "@storybook/addon-essentials": "^8.1.3",
+    "@storybook/addon-svelte-csf": "^4.1.3",
+    "@storybook/svelte": "^8.1.3",
+    "@storybook/svelte-vite": "^8.1.3",
+    "@sveltejs/vite-plugin-svelte": "^3.1.1",
     "@tinymce/beehive-flow": "^0.19.0",
     "@tinymce/eslint-plugin": "^1.9.2",
     "@tsconfig/svelte": "^5.0.4",
@@ -73,20 +63,23 @@
     "babel-loader": "^8.2.2",
     "eslint": "^7.32.0",
     "eslint-plugin-svelte": "^2.34.0",
-    "react": "^17.0.0",
-    "react-dom": "^17.0.0",
+    "gh-pages": "^6.1.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "rollup": "^2.56.2",
     "rollup-plugin-css-only": "^3.1.0",
     "rollup-plugin-livereload": "^2.0.0",
     "rollup-plugin-svelte": "^7.1.5",
     "rollup-plugin-terser": "^7.0.0",
+    "storybook": "^8.1.6",
     "svelte": "^4.2.17",
     "svelte-check": "^3.8.0",
     "svelte-loader": "^3.2.0",
     "svelte-preprocess": "^5.1.4",
     "tinymce": "^7.1.1",
     "tslib": "^2.6.2",
     "typescript": "^5.4.5",
+    "vite": "^5.2.13",
     "webpack": "^5.76.2"
   },
   "resolutions": {

src/stories/Editor.stories.svelte

@@ -1,16 +1,22 @@
+<script context="module">
+  export const meta = {
+    title: 'Editor',
+    component: Editor
+  }
+</script>
+
 <script>
-  //
   import Editor from '../main/component/Editor.svelte';
-  import { Meta, Story } from '@storybook/addon-svelte-csf';
+  import { Story } from '@storybook/addon-svelte-csf';
 
   const apiKey = 'b1g4d59rwwqxx1vj7mci23rjj8ubgb46i4xsio6ieig6fkps';
   const content = `
-    <h2 style="text-align: center;">
-    TinyMCE provides a <span style="text-decoration: underline;">full-featured</span> rich text editing experience, and a featherweight download.
-  </h2>
-  <p style="text-align: center;">
-    <strong><span style="font-size: 14pt;"><span style="color: #7e8c8d; font-weight: 600;">No matter what you're building, TinyMCE has got you covered.</span></span></strong>
-  </p>`;
+<h2 style="text-align: center;">
+TinyMCE provides a <span style="text-decoration: underline;">full-featured</span> rich text editing experience, and a featherweight download.
+</h2>
+<p style="text-align: center;">
+<strong><span style="font-size: 14pt;"><span style="color: #7e8c8d; font-weight: 600;">No matter what you're building, TinyMCE has got you covered.</span></span></strong>
+</p>`.trim();
 
   let value = content;
   let disabled = true;
@@ -19,48 +25,47 @@
   const toggleDisabled = () => {
     disabled = !disabled;
   }
+  const controls = { channel: '7', conf: { plugins: 'help' } }
 </script>
 
-<Meta title="Editor" component={Editor}/>
-
-<Story name="Iframe">
-  <Editor {apiKey} value={content}/>
+<Story name="Iframe" args={{ ...controls, inline: false }} let:args>
+  <Editor {apiKey} {value} {...args}/>
 </Story>
 
-<Story name="Inline">
+<Story name="Inline" args={{ ...controls, inline: true }} let:args>
   <div style="padding-top:100px;">
-    <Editor {apiKey} inline={true} value={content} />
+    <Editor {apiKey} {value} {...args} />
   </div>
 </Story>
 
-<Story name="Value binding">
+<Story name="Value binding" args={controls} let:args>
   <div>
-    <Editor {apiKey} bind:value={value} />
+    <Editor {apiKey} bind:value {...args}/>
     <div>
       {@html value}
     </div>
   </div>
 </Story>
 
-<Story name="Input binding">
+<Story name="Input binding" args={controls} let:args>
   <div>
-    <Editor {apiKey} bind:value={value} />
-    <textarea style="width:100%;height:200px" bind:value={value}></textarea>
+    <Editor {apiKey} bind:value {...args}/>
+    <textarea style="width:100%;height:200px" bind:value></textarea>
   </div>
 </Story>
 
-<Story name="Text binding">
+<Story name="Text binding" args={controls} let:args>
   <div>
-    <Editor {apiKey} bind:value={value} bind:text={text} />
+    <Editor {apiKey} bind:value bind:text {...args}/>
     <div>{text}</div>
     <div>{@html value}</div>
     <textarea style="width:100%;height:200px" bind:value={text}></textarea>
   </div>
 </Story>
 
-<Story name="Disabling">
+<Story name="Disabling" args={controls} let:args>
   <div>
     <button on:click={toggleDisabled}>{#if disabled}Enable{:else}Disable{/if}</button>
-    <Editor {disabled} />
+    <Editor {apiKey} {disabled} {value} {...args}/>
   </div>
 </Story>

vite.config.mjs

@@ -0,0 +1,10 @@
+import { defineConfig } from 'vite';
+import { svelte } from '@sveltejs/vite-plugin-svelte';
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
+
+// As of right now, this is just used for building the storybook.
+export default defineConfig({
+  plugins: [svelte({
+    preprocess: [vitePreprocess()]
+  })]
+});