From d3d9925c52b96ac9cd98d1edf3d340548533060a Mon Sep 17 00:00:00 2001 From: Hugo ATTAL <4563971+hugoattal@users.noreply.github.com> Date: Tue, 26 Nov 2024 17:21:13 +0100 Subject: [PATCH 01/27] Upgrade dependencies --- .stackblitz/codeflow.json | 1 - docs/.vitepress/config.js | 62 - docs/guide/config.md | 3 +- docs/guide/getting-started.md | 1 - docs/guide/vue2/app-setup.md | 134 - docs/guide/vue2/controls.md | 323 - docs/guide/vue2/docs.md | 160 - docs/guide/vue2/events.md | 23 - docs/guide/vue2/getting-started.md | 93 - docs/guide/vue2/hierarchy.md | 121 - docs/guide/vue2/stories.md | 115 - docs/guide/vue2/wrapper.md | 63 - docs/package.json | 2 +- examples/nuxt3/package.json | 10 +- examples/svelte4/package.json | 12 +- examples/sveltekit/package.json | 22 +- examples/vue2/histoire.config.ts | 8 - examples/vue2/package.json | 20 - examples/vue2/postcss.config.js | 3 - examples/vue2/src/BaseButton.story.vue | 129 - examples/vue2/src/BaseButton.vue | 75 - examples/vue2/src/CodeGen.story.vue | 252 - examples/vue2/src/ModalWithSlots.vue | 13 - examples/vue2/src/SharedControls.story.vue | 64 - examples/vue2/src/SlotWithProps.vue | 15 - examples/vue2/src/StateSetup.story.vue | 74 - examples/vue2/vite.config.ts | 8 - examples/vue3-percy/package.json | 6 +- examples/vue3-screenshot/package.json | 6 +- examples/vue3-themed/package.json | 6 +- examples/vue3-vuetify/package.json | 12 +- examples/vue3/package.json | 20 +- examples/vue3/src/histoire.css | 2 +- package.json | 31 +- packages/histoire-app/package.json | 36 +- packages/histoire-app/src/app/style/main.pcss | 2 +- .../histoire-app/src/app/style/sandbox.css | 2 +- packages/histoire-app/src/bundle-main.js | 4 +- .../histoire-controls-stories/package.json | 6 +- packages/histoire-controls/package.json | 44 +- packages/histoire-plugin-nuxt/package.json | 18 +- packages/histoire-plugin-percy/package.json | 14 +- packages/histoire-plugin-percy/src/index.ts | 10 +- .../histoire-plugin-screenshot/package.json | 12 +- packages/histoire-plugin-svelte/package.json | 24 +- .../src/commands/generate-story.client.ts | 4 +- packages/histoire-plugin-vue/package.json | 18 +- .../histoire-plugin-vue/src/client/codegen.ts | 9 +- .../src/commands/generate-story.client.ts | 4 +- packages/histoire-plugin-vue2/package.json | 59 - .../src/client/app/MountStory.ts | 143 - .../src/client/app/RenderStory.ts | 286 - .../src/client/app/RouterLinkStub.ts | 35 - .../src/client/app/Story.ts | 129 - .../src/client/app/Variant.ts | 90 - .../src/client/app/global-components.ts | 142 - .../src/client/app/index.ts | 2 - .../src/client/app/util.ts | 135 - .../histoire-plugin-vue2/src/client/client.ts | 2 - .../src/client/codegen.ts | 392 - .../histoire-plugin-vue2/src/client/server.ts | 1 - .../src/client/server/Story.ts | 132 - .../src/client/server/Variant.ts | 56 - .../src/client/server/run.ts | 70 - packages/histoire-plugin-vue2/src/index.ts | 41 - packages/histoire-plugin-vue2/tsconfig.json | 40 - packages/histoire-plugin-vue2/vite.config.ts | 71 - packages/histoire-shared/package.json | 16 +- packages/histoire-vendors/package.json | 32 +- packages/histoire-vendors/rollup.config.mjs | 12 +- packages/histoire/package.json | 60 +- packages/histoire/src/node/commands/dev.ts | 3 +- packages/histoire/src/node/config.ts | 27 +- packages/histoire/src/node/markdown.ts | 22 +- packages/histoire/src/node/stories.ts | 10 +- pnpm-lock.yaml | 14104 ++++++++-------- 76 files changed, 6886 insertions(+), 11322 deletions(-) delete mode 100644 docs/guide/vue2/app-setup.md delete mode 100644 docs/guide/vue2/controls.md delete mode 100644 docs/guide/vue2/docs.md delete mode 100644 docs/guide/vue2/events.md delete mode 100644 docs/guide/vue2/getting-started.md delete mode 100644 docs/guide/vue2/hierarchy.md delete mode 100644 docs/guide/vue2/stories.md delete mode 100644 docs/guide/vue2/wrapper.md delete mode 100644 examples/vue2/histoire.config.ts delete mode 100644 examples/vue2/package.json delete mode 100644 examples/vue2/postcss.config.js delete mode 100644 examples/vue2/src/BaseButton.story.vue delete mode 100644 examples/vue2/src/BaseButton.vue delete mode 100644 examples/vue2/src/CodeGen.story.vue delete mode 100644 examples/vue2/src/ModalWithSlots.vue delete mode 100644 examples/vue2/src/SharedControls.story.vue delete mode 100644 examples/vue2/src/SlotWithProps.vue delete mode 100644 examples/vue2/src/StateSetup.story.vue delete mode 100644 examples/vue2/vite.config.ts delete mode 100644 packages/histoire-plugin-vue2/package.json delete mode 100644 packages/histoire-plugin-vue2/src/client/app/MountStory.ts delete mode 100644 packages/histoire-plugin-vue2/src/client/app/RenderStory.ts delete mode 100644 packages/histoire-plugin-vue2/src/client/app/RouterLinkStub.ts delete mode 100644 packages/histoire-plugin-vue2/src/client/app/Story.ts delete mode 100644 packages/histoire-plugin-vue2/src/client/app/Variant.ts delete mode 100644 packages/histoire-plugin-vue2/src/client/app/global-components.ts delete mode 100644 packages/histoire-plugin-vue2/src/client/app/index.ts delete mode 100644 packages/histoire-plugin-vue2/src/client/app/util.ts delete mode 100644 packages/histoire-plugin-vue2/src/client/client.ts delete mode 100644 packages/histoire-plugin-vue2/src/client/codegen.ts delete mode 100644 packages/histoire-plugin-vue2/src/client/server.ts delete mode 100644 packages/histoire-plugin-vue2/src/client/server/Story.ts delete mode 100644 packages/histoire-plugin-vue2/src/client/server/Variant.ts delete mode 100644 packages/histoire-plugin-vue2/src/client/server/run.ts delete mode 100644 packages/histoire-plugin-vue2/src/index.ts delete mode 100644 packages/histoire-plugin-vue2/tsconfig.json delete mode 100644 packages/histoire-plugin-vue2/vite.config.ts diff --git a/.stackblitz/codeflow.json b/.stackblitz/codeflow.json index 7e7ff5a1..fcc5fab6 100644 --- a/.stackblitz/codeflow.json +++ b/.stackblitz/codeflow.json @@ -3,7 +3,6 @@ "overrides": { "histoire": "./packages/histoire", "@histoire/plugin-vue": "./packages/historie-plugin-vue", - "@histoire/plugin-vue2": "./packages/historie-plugin-vue2", "@histoire/plugin-svelte": "./packages/historie-plugin-svelte", "@histoire/plugin-nuxt": "./packages/historie-plugin-nuxt", "@histoire/plugin-percy": "./packages/historie-plugin-percy", diff --git a/docs/.vitepress/config.js b/docs/.vitepress/config.js index c9c8b22e..b3d0b5be 100644 --- a/docs/.vitepress/config.js +++ b/docs/.vitepress/config.js @@ -41,10 +41,6 @@ module.exports = { text: 'Vue 3', link: '/guide/vue3/getting-started', }, - { - text: 'Vue 2.7', - link: '/guide/vue2/getting-started', - }, { text: 'Svelte 3', link: '/guide/svelte3/getting-started', @@ -212,64 +208,6 @@ module.exports = { ], }, ], - '/guide/vue2/': [ - { - text: 'Guide - Vue 2', - collapsible: true, - items: [ - { - text: 'Getting Started', - link: '/guide/vue2/getting-started', - }, - { - text: 'Stories', - link: '/guide/vue2/stories', - }, - { - text: 'State & Controls', - link: '/guide/vue2/controls', - }, - { - text: 'Events', - link: '/guide/vue2/events', - }, - { - text: 'App setup', - link: '/guide/vue2/app-setup', - }, - { - text: 'Wrapper', - link: '/guide/vue2/wrapper', - }, - { - text: 'Documentation', - link: '/guide/vue2/docs', - }, - { - text: 'Hierarchy', - link: '/guide/vue2/hierarchy', - }, - ], - }, - { - text: 'Learn more', - collapsible: true, - items: [ - { - text: 'About Histoire ⮌', - link: '/guide/', - }, - { - text: 'Configuration ⮌', - link: '/guide/config', - }, - { - text: 'Plugins ⮌', - link: '/guide/plugins/official', - }, - ], - }, - ], '/guide/svelte3/': [ { text: 'Guide - Svelte 3', diff --git a/docs/guide/config.md b/docs/guide/config.md index 74cc9f95..8b15a0bc 100644 --- a/docs/guide/config.md +++ b/docs/guide/config.md @@ -142,11 +142,10 @@ You can also tell Histoire to configure the sandbox application using the corres | Framework | Setup function | | --------- | -------------- | | Vue 3 | `setupVue3` | -| Vue 2 | `setupVue2` | ### Vue setup -Inside your setup file, you can export a `setupVue3` (or `setupVue2` for Vue 2) function that will be called by Histoire allowing you to configure the Vue 3 sandbox application. Histoire provides an optional `defineSetupVue3` helper to have better types in your IDE : +Inside your setup file, you can export a `setupVue3` function that will be called by Histoire allowing you to configure the Vue 3 sandbox application. Histoire provides an optional `defineSetupVue3` helper to have better types in your IDE : ```ts // src/histoire.setup.ts diff --git a/docs/guide/getting-started.md b/docs/guide/getting-started.md index 461ccda8..0ced1650 100644 --- a/docs/guide/getting-started.md +++ b/docs/guide/getting-started.md @@ -53,7 +53,6 @@ Histoire is an Open-Source project supported by our sponsors - thank you! | Framework | Version | Support* | Auto-CodeGen* | Auto-Docs* | | --------- | -------- | ------- | ------------ | ---- | | [Vue →](./vue3/getting-started.md) | `3.2+` | ✅ | ✅ | 🏗️ | -| [Vue →](./vue2/getting-started.md) | `2.7+` | ✅ | ✅ | 🏗️ | | [Svelte →](./svelte3/getting-started.md) | `3+` | ✅ | - | 🏗️ | | Solid | - | - | - | - | | Angular | - | - | - | - | diff --git a/docs/guide/vue2/app-setup.md b/docs/guide/vue2/app-setup.md deleted file mode 100644 index 558554b8..00000000 --- a/docs/guide/vue2/app-setup.md +++ /dev/null @@ -1,134 +0,0 @@ -# App setup - -## Global setup - -You can define a setup function globally in your setup file defined by the `setupFile` option in the global configuration ([learn more](../config.md#global-js-and-css)). - -For Vue 2, it must be called `setupVue2`. Histoire provides an optional `defineSetupVue2` helper to have better types in your IDE: - -```ts -import { defineSetupVue2 } from '@histoire/plugin-vue2' -import Vue from 'vue' -import Vuei18n from 'vue-i18n' -import { store } from './store' -import { router } from './router' - -export const setupVue2 = defineSetupVue2(({ story, variant }) => { - // Vue plugin - Vue.use(Vuei18n) - - // Global component - Vue.component('GlobalComponent', MyGlobalComponent) - - // App options - return { - store, // Vuex Store - router, // Vue Router - provide: { - key: 'meow', - }, - } -}) -``` - -::: tip -You can also import global CSS files or JS files in this setup file. -::: - -## Local setup - -Inside each story, you can define a `setupApp` prop that will be called by Histoire allowing you to configure the sandbox application as well. It will **not** override the global setup function, but will be called after it. It works the same way with the same parameters. - -```vue{17} - - - -``` - -You can put the prop on the `` component too, so that `` will have a default value for it. Redefining the prop on a `` will **override** the function though. - -## Examples - -### Vue Router - -```vue{5-11,18} - - - -``` - -### Vuex - -```vue{5-10,17} - - - -``` diff --git a/docs/guide/vue2/controls.md b/docs/guide/vue2/controls.md deleted file mode 100644 index 8c9ce47a..00000000 --- a/docs/guide/vue2/controls.md +++ /dev/null @@ -1,323 +0,0 @@ -# State & Controls - -Controls give you the ability to interact with your components arguments. - -## Defining a state - -The first step is to define the state that will be shared to your story. Histoire will automatically synchronize the `data` or reactive data returned in your `setup`. Then you can proceed using your state as usual. - -Example with Option API: - -```vue{10-17} - - - -``` - -Example with Composition API: - -```vue{18-22} - - - -``` - -Example with Composition API (Script Setup): - -```vue - - - -``` - -It can also be useful to declare some data that isn't going to be reactive, for example some fixture data or configuration: - -```vue{10-15} - - - -``` - -## Controls panel - -To create the control panel, Histoire provides a `controls` slot. You are free to render any element or components inside the slot. - -```vue{18-21} - - - -``` - -You can also share the same default controls for all variants by putting the slot directly under the `` component: - -```vue{3-6} - -``` - -A variant can then override the slot if needed. - -## Builtin controls - -To build a control panel a bit more easily, Histoire provides builtin controls with design that fits the rest of the UI. - -```vue{19-20} - - - -``` - -Check out all the available controls in their book: [controls.histoire.dev](https://controls.histoire.dev/). - -## Init state - -As an alternative to the above, you can pass an `initState` prop to the Story or Variant, which should be a function returning a state object. It's useful to have different states for variants in the same story and to be a bit more explicit at the expense of being more verbose. - -You can then use the `state` slot props on the `` slots to access the state. - -Example: - -```vue{24,26,40,60,62,66} - - - -``` diff --git a/docs/guide/vue2/docs.md b/docs/guide/vue2/docs.md deleted file mode 100644 index 2008d824..00000000 --- a/docs/guide/vue2/docs.md +++ /dev/null @@ -1,160 +0,0 @@ -# Documentation - -## Markdown - -### Custom block - -Histoire lets you write markdown documentation for your stories using Vue custom blocks. Add a `docs` tag in your story file: - -```vue{5-9} - - - -# My documentation - -Checkout this [cool video](https://www.youtube.com/watch?v=dQw4w9WgXcQ)! - -``` - -### Sibling markdown - -To add documentation to a story, you can also create a file with the same name next to it, with the `.md` extension. - -For example, if your story is `BaseButton.story.vue`, create a `BaseButton.story.md` file. - -Sibling markdown files are higher priority than custom blocks. - -### Standalone page - -If you create a markdown file ending with `.story.md` that isn't related to a sibling story file, it will automatically create a virtual story that renders the markdown as a page. - -You can add a frontmatter to the markdown to customize the virtual story with the following properties: - -- `id` ([reference](../../reference/vue3/story.md#id)) -- `title` ([reference](../../reference/vue3/story.md#title)) -- `icon` ([reference](../../reference/vue3/story.md#icon)) -- `iconColor` ([reference](../../reference/vue3/story.md#iconcolor)) -- `group` ([reference](../../reference/vue3/story.md#group)) - -Example `Introduction.story.md` file: - -```md ---- -group: 'top' -icon: 'carbon:bookmark' ---- - -# Welcome - -This is a demo book using Vue 2. - ---- - -Learn more about Histoire [here](https://histoire.dev/). -``` - -### Links - -You can link to other stories using a relative path to the story file: - -```md -- [Go to Story](./BaseButton.story.vue) -- [Go to CodeGen > Slots](./CodeGen.story.vue?variantId=slots) -- [Go to Markdown file](./MarkdownFile.story.md) -``` - -## Source code - -By default, Histoire will attempt to generate a copyable source code from the story, dynamically from the current state. - -Currently automatic source code generation is only supported for: - -- Vue 3 - -To document a copyable source code manually you can use either the `source` prop or the `source` slot. - -```vue{31,55-74} - - - -``` - -:::tip -You should use a `