feat: Initialise addon structure

.github/workflows/release.yml

@@ -0,0 +1,28 @@
+name: Release
+
+on: [push]
+
+jobs:
+  release:
+    runs-on: ubuntu-latest
+    if: "!contains(github.event.head_commit.message, 'ci skip') && !contains(github.event.head_commit.message, 'skip ci')"
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Prepare repository
+        run: git fetch --unshallow --tags
+
+      - name: Use Node.js 22.x
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22.x
+
+      - name: Install dependencies
+        run: pnpm install --ignore-scripts
+
+      - name: Create Release
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+        run: |
+          pnpm release

.gitignore

@@ -0,0 +1,10 @@
+dist/
+\*.tgz
+node_modules/
+storybook-static/
+build-storybook.log
+.DS_Store
+.env
+.idea
+.vscode
+.eslintcache

.husky/commit-msg

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+node_modules/.bin/commitlint --edit ${1}

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+pnpm lint-staged

.lintstagedrc.js

@@ -0,0 +1,4 @@
+export default {
+  '*.{js,jsx,ts,tsx}': ['pnpm lint:fix', 'pnpm format:fix'],
+  '*.{json,md,scss,css,html,yml}': ['pnpm format:fix'],
+}

.prettierignore

@@ -0,0 +1,23 @@
+# This file is generated.
+.github/dependabot.yml
+
+# We do want to lint other dotfiles.
+!.\*
+
+.gitignore
+.eslintignore
+.prettierignore
+
+/scripts
+
+pnpm-lock.yaml
+dist/
+\*.tgz
+coverage/
+node_modules/
+storybook-static/
+build-storybook.log
+.DS_Store
+.env
+.idea
+.vscode

.prettierrc.js

@@ -0,0 +1,5 @@
+export default {
+  semi: false,
+  singleQuote: true,
+  trailingComma: 'all',
+}

.storybook/local-preset.js

@@ -0,0 +1,12 @@
+function previewAnnotations(entry = []) {
+  return [...entry, require.resolve('../dist/preview.js')]
+}
+
+function managerEntries(entry = []) {
+  return [...entry, require.resolve('../dist/manager.js')]
+}
+
+module.exports = {
+  managerEntries,
+  previewAnnotations,
+}

.storybook/main.ts

@@ -0,0 +1,21 @@
+import type { StorybookConfig } from '@storybook/react-vite'
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+    './local-preset.js',
+  ],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
+  },
+  docs: {
+    autodocs: 'tag',
+  },
+}
+
+export default config

.storybook/preview-head.html

@@ -0,0 +1,3 @@
+<script>
+  window.global = window
+</script>

.storybook/preview.ts

@@ -0,0 +1,17 @@
+import type { Preview } from '@storybook/react'
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+  },
+  initialGlobals: {
+    background: { value: 'light' },
+  },
+}
+
+export default preview

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Storybook contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,76 @@
+# Storybook Addon Vue support for MDX
+
+Use Vue components inside MDX files, as if they were React components.
+
+## Limitations
+
+This addon is in its early stages, the following limitations apply:
+
+- Only works with Vue 3 and Storybook 8 (for Storybook 7, use v0.1.5)
+- Components must be locally imported into MDX files
+- Provide/Inject has not been tested yet but should work
+- **Customisation APIs may change in the future**
+
+There is also a known bug when running Storybook locally. Sometimes, the first page load of a MDX page with Vue components can crash because Storybook does not properly execute the code defined in `beforeVueAppMount`. This is probably due to how Storybook parses and runs the preview file, but the bug does not occur at all in production builds. You can work around this bug by refreshing the browser tab once, and it will successfully run on the second load.
+
+## Installation
+
+```sh
+yarn add -D storybook-addon-vue-mdx
+```
+
+In your `.storybook/main.js` file, add the following:
+
+```js
+export default {
+  addons: ['storybook-addon-vue-mdx'],
+}
+```
+
+## Usage
+
+In a `Sample.mdx` file, import the component you need, and use it using Vue JSX syntax:
+
+```mdx
+import MyComponent from 'path-to-components/MyComponent.vue'
+
+<MyComponent>bla bla</MyComponent>
+```
+
+The Vue JSX syntax is [documented by Vue](https://vuejs.org/guide/extras/render-function.html#jsx-tsx). Pay particular attention to [the syntax for passing slots](https://vuejs.org/guide/extras/render-function.html#passing-slots).
+
+## Customising the Vue app context
+
+This addon uses [veaury](https://github.com/devilwjp/veaury) to render Vue components in a React JSX context. In particular, the addon calls `applyPureVueInReact`. You may pass options to this function by defining `globals` in your `.storybook/preview.js` file, like so:
+
+```js
+const globals = {
+  vueMdx: {
+    beforeVueAppMount(app) {
+      app.use(myCustomPlugin)
+    },
+  },
+}
+
+export default {
+  globals,
+}
+```
+
+You may also directly import and use Veaury's `applyVueInReact` as per Veaury's [own documentation](https://github.com/devilwjp/veaury).
+
+## Development scripts
+
+- `yarn start` runs babel in watch mode and starts Storybook
+- `yarn build` builds and packages the addon code
+- `yarn pack:local` makes a local tarball to be used as a NPM dependency elsewhere
+
+## Bug reports
+
+Before reporting a bug, please thoroughly check Veaury's documentation and list of issues for matching issues.
+
+To report a bug, please use GitHub issues on this repository, making sure to include a working Minimal Working Example. For instance, you could use [storybook.new](https://new-storybook.netlify.app/) to bootstrap a reproduction environment.
+
+### Migrating to a later Storybook version
+
+If you want to migrate the addon to support the latest version of Storyboook, you can check out the [addon migration guide](https://storybook.js.org/docs/addons/addon-migration-guide).

commitlint.config.js

@@ -0,0 +1,11 @@
+export default {
+  extends: ['@commitlint/config-conventional'],
+  rules: {
+    'subject-case': [2, 'always', ['sentence-case']],
+    'type-enum': [
+      2,
+      'always',
+      ['feat', 'fix', 'docs', 'refactor', 'style', 'test', 'revert', 'chore'],
+    ],
+  },
+}

eslint.config.js

@@ -0,0 +1,46 @@
+import js from '@eslint/js'
+import prettierRecommended from 'eslint-plugin-prettier/recommended'
+import reactPlugin from 'eslint-plugin-react'
+import tseslint from 'typescript-eslint'
+import globals from 'globals'
+
+export default [
+  {
+    ignores: [
+      '.github/dependabot.yml',
+      '!.*',
+      'dist/',
+      'scripts/',
+      '*.tgz',
+      'coverage/',
+      'node_modules/',
+      'storybook-static/',
+      'build-storybook.log',
+      '.DS_Store',
+      '.env',
+      '.idea',
+      '.vscode',
+    ],
+  },
+  js.configs.recommended,
+  reactPlugin.configs.flat.recommended,
+  {
+    settings: {
+      react: {
+        version: 'detect',
+      },
+    },
+  },
+  ...tseslint.configs.recommended,
+  {
+    files: ['preset.js', '.storybook/local-preset.js'],
+    languageOptions: {
+      sourceType: 'commonjs',
+      globals: globals.node,
+    },
+    rules: {
+      '@typescript-eslint/no-require-imports': 'off',
+    },
+  },
+  prettierRecommended,
+]

manager.js

@@ -0,0 +1 @@
+export * from './dist/manager'