diff --git a/.github/workflows/test-nuxt3.yml b/.github/workflows/test-nuxt3.yml index fbe6485b..29665f89 100644 --- a/.github/workflows/test-nuxt3.yml +++ b/.github/workflows/test-nuxt3.yml @@ -61,7 +61,7 @@ jobs: working-directory: ${{env.dir}} run: pnpm run ci - - uses: actions/upload-artifact@v2 + - uses: actions/upload-artifact@v4 if: failure() with: name: cypress-screenshots diff --git a/.github/workflows/test-svelte4.yml b/.github/workflows/test-svelte4.yml index f1ca053c..50a72eb1 100644 --- a/.github/workflows/test-svelte4.yml +++ b/.github/workflows/test-svelte4.yml @@ -61,7 +61,7 @@ jobs: working-directory: ${{env.dir}} run: pnpm run ci - - uses: actions/upload-artifact@v2 + - uses: actions/upload-artifact@v4 if: failure() with: name: cypress-screenshots diff --git a/.github/workflows/test-vue3.yml b/.github/workflows/test-vue3.yml index f0ade03e..68442521 100644 --- a/.github/workflows/test-vue3.yml +++ b/.github/workflows/test-vue3.yml @@ -126,7 +126,7 @@ jobs: TOTAL_RUNNERS: 5 THIS_RUNNER: ${{ matrix.containers }} - - uses: actions/upload-artifact@v2 + - uses: actions/upload-artifact@v4 if: failure() with: name: cypress-screenshots 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 `