-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(storybook): + Storybook v7.6.19 without MDX support
+ custom global script to call bundled storybook + example component
- Loading branch information
Showing
9 changed files
with
8,725 additions
and
767 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,28 @@ | ||
| import type { StorybookConfig } from '@storybook/vue3-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. | ||
| */ | ||
| const getAbsolutePath = (value: string): string => { | ||
| return dirname(require.resolve(join(value, 'package.json'))); | ||
| }; | ||
|
|
||
| const config: StorybookConfig = { | ||
| stories: ['../src/components/**/*.stories.ts'], | ||
| addons: [ | ||
| getAbsolutePath('@storybook/addon-links'), | ||
| getAbsolutePath('@storybook/addon-essentials'), | ||
| getAbsolutePath('@storybook/addon-interactions') | ||
| ], | ||
| framework: { | ||
| name: '@storybook/vue3-vite', | ||
| options: {} | ||
| }, | ||
| docs: { | ||
| autodocs: 'tag' | ||
| } | ||
| }; | ||
| export default config; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| import type { Preview } from '@storybook/vue3'; | ||
|
|
||
| const preview: Preview = { | ||
| parameters: { | ||
| actions: { argTypesRegex: '^on[A-Z].*' }, | ||
| controls: { | ||
| matchers: { | ||
| color: /(background|color)$/i, | ||
| date: /Date$/i | ||
| } | ||
| } | ||
| } | ||
| }; | ||
|
|
||
| export default preview; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,51 @@ | ||
| #!/usr/bin/env node | ||
| // @ts-check | ||
| (() => console.log('Inside docs!'))(); | ||
| import { dirname, resolve } from 'path'; | ||
| import { fileURLToPath } from 'url'; | ||
| import { exec } from 'child_process'; | ||
|
|
||
| import express from 'express'; | ||
| import portfinder from 'portfinder'; | ||
| // colors | ||
| const RED = '\x1b[31m'; | ||
| const BLUE = '\x1b[36m'; | ||
| const GREEN = '\x1b[32m'; | ||
| const RESET = '\x1b[0m'; | ||
| // sever | ||
| const PORT = 8080; | ||
| portfinder.setBasePort(PORT); | ||
| (() => { | ||
| const __filename = fileURLToPath(import.meta.url); | ||
| const __dirname = dirname(__filename); | ||
|
|
||
| portfinder.getPort(function (err, port) { | ||
| if (err) { | ||
| console.error(`${BLUE}[vue-ts-docs]${RED}[ERROR]${RESET}:\n${err}`); | ||
| return false; | ||
| } | ||
|
|
||
| const server = express(); | ||
| const path = resolve(__dirname, '../dist/storybook'); | ||
| // set up server | ||
| server.use(express.static(path)); | ||
| server.get('*', (req, res) => { | ||
| res.sendFile(path + '/index.html'); | ||
| }); | ||
|
|
||
| server.listen(port, () => { | ||
| // log status | ||
| console.log( | ||
| `${BLUE}[vue-ts-docs]${GREEN}[INFO]${RESET}: Docs started!\n\n${[ | ||
| 'Server listening on:', | ||
| `${GREEN}http://127.0.0.1:${port}${RESET}`, | ||
| `${GREEN}http://localhost:${port}${RESET}`, | ||
| '\nCancel the process with [ctrl + c]\n' | ||
| ].join('\n ')}` | ||
| ); | ||
|
|
||
| const start = | ||
| process.platform == 'darwin' ? 'open' : process.platform == 'win32' ? 'start' : 'xdg-open'; | ||
| // open default browser | ||
| exec(`${start} http://localhost:${port}`); | ||
| }); | ||
| }); | ||
| })(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,68 @@ | ||
| import { StoryObj } from '@storybook/vue3'; | ||
|
|
||
| declare const meta: { | ||
| title: string; | ||
| component: import('../../../vue/dist/vue.esm-bundler.js').DefineComponent<{ | ||
| primary: { | ||
| type: import('../../../vue/dist/vue.esm-bundler.js').PropType<boolean>; | ||
| default: boolean; | ||
| }; | ||
| size: { | ||
| type: import('../../../vue/dist/vue.esm-bundler.js').PropType<"small" | "medium" | "large">; | ||
| default: string; | ||
| }; | ||
| text: { | ||
| type: import('../../../vue/dist/vue.esm-bundler.js').PropType<string>; | ||
| required: true; | ||
| default: string; | ||
| }; | ||
| HTMLAttributes: { | ||
| type: import('../../../vue/dist/vue.esm-bundler.js').PropType<import('../../../vue/dist/vue.esm-bundler.js').ButtonHTMLAttributes>; | ||
| default: () => { | ||
| name: string; | ||
| type: "button" | "submit" | "reset" | undefined; | ||
| disabled: boolean; | ||
| }; | ||
| }; | ||
| }, {}, unknown, {}, {}, import('../../../vue/dist/vue.esm-bundler.js').ComponentOptionsMixin, import('../../../vue/dist/vue.esm-bundler.js').ComponentOptionsMixin, {}, string, import('../../../vue/dist/vue.esm-bundler.js').PublicProps, Readonly<import('../../../vue/dist/vue.esm-bundler.js').ExtractPropTypes<{ | ||
| primary: { | ||
| type: import('../../../vue/dist/vue.esm-bundler.js').PropType<boolean>; | ||
| default: boolean; | ||
| }; | ||
| size: { | ||
| type: import('../../../vue/dist/vue.esm-bundler.js').PropType<"small" | "medium" | "large">; | ||
| default: string; | ||
| }; | ||
| text: { | ||
| type: import('../../../vue/dist/vue.esm-bundler.js').PropType<string>; | ||
| required: true; | ||
| default: string; | ||
| }; | ||
| HTMLAttributes: { | ||
| type: import('../../../vue/dist/vue.esm-bundler.js').PropType<import('../../../vue/dist/vue.esm-bundler.js').ButtonHTMLAttributes>; | ||
| default: () => { | ||
| name: string; | ||
| type: "button" | "submit" | "reset" | undefined; | ||
| disabled: boolean; | ||
| }; | ||
| }; | ||
| }>>, { | ||
| primary: boolean; | ||
| size: "small" | "medium" | "large"; | ||
| text: string; | ||
| HTMLAttributes: import('../../../vue/dist/vue.esm-bundler.js').ButtonHTMLAttributes; | ||
| }, {}>; | ||
| tags: string[]; | ||
| argTypes: { | ||
| size: { | ||
| control: string; | ||
| options: string[]; | ||
| }; | ||
| }; | ||
| args: { | ||
| primary: false; | ||
| }; | ||
| }; | ||
| export default meta; | ||
| type Story = StoryObj<typeof meta>; | ||
| export declare const Primary: Story; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| import type { Meta, StoryObj } from '@storybook/vue3'; | ||
|
|
||
| import { default as Button } from './Button.vue'; | ||
|
|
||
| // More on how to set up stories at: https://storybook.js.org/docs/writing-stories | ||
| const meta = { | ||
| title: 'Components/Button', | ||
| component: Button, | ||
| // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/writing-docs/autodocs | ||
| tags: ['autodocs'], | ||
| argTypes: { | ||
| size: { control: 'select', options: ['small', 'medium', 'large'] } | ||
| }, | ||
| args: { | ||
| primary: false | ||
| // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args | ||
| } | ||
| } satisfies Meta<typeof Button>; | ||
|
|
||
| export default meta; | ||
| type Story = StoryObj<typeof meta>; | ||
| /* | ||
| *👇 Render functions are a framework specific feature to allow you control on how the component renders. | ||
| * See https://storybook.js.org/docs/api/csf | ||
| * to learn how to use render functions. | ||
| */ | ||
| export const Primary: Story = { | ||
| args: { | ||
| primary: true, | ||
| text: 'Button' | ||
| } | ||
| }; |
Oops, something went wrong.