mizzkey/packages/frontend/.storybook/generate.tsx
2023-03-20 14:58:24 +09:00

154 lines
3.8 KiB
TypeScript

import * as fs from 'node:fs/promises';
import { basename, dirname } from 'node:path/posix';
import { promisify } from 'node:util';
import { generate } from 'astring';
import type * as estree from 'estree';
import * as glob from 'glob';
import { format } from 'prettier';
function h<T extends estree.Node>(component: T['type'], props: Omit<T, 'type'>): T {
const type = component.replace(/(?:^|-)([a-z])/g, (_, c) => c.toUpperCase());
return Object.assign(props, { type }) as T;
}
function toStories(component: string): string {
const base = basename(component);
const dir = dirname(component);
const literal = (
<literal value={component.slice('src/'.length, -'.vue'.length)} />
) as unknown as estree.Literal;
const identifier = (
<identifier name={base.slice(0, -'.vue'.length).replace(/[-.]|^(?=\d)/g, '_')} />
) as unknown as estree.Identifier;
const parameters = (
<object-expression
properties={[
<property
key={<identifier name="layout" />}
value={<literal value={`${dir}/`.startsWith('src/pages/') || base === 'MkAnalogClock.vue' ? 'fullscreen' : 'centered'} />}
kind="init"
/>
]}
/>
);
const program = (
<program
body={[
<import-declaration
source={<literal value="@storybook/vue3" />}
specifiers={[
<import-specifier
local={<identifier name="Meta" />}
imported={<identifier name="Meta" />}
/>,
<import-specifier
local={<identifier name="Story" />}
imported={<identifier name="Story" />}
/>,
]}
/>,
<import-declaration
source={<literal value={`./${base}`} />}
specifiers={[
<import-default-specifier
local={identifier}
imported={identifier}
/>,
]}
/>,
<variable-declaration
kind="const"
declarations={[
<variable-declarator
id={<identifier name="meta" />}
init={
<object-expression
properties={[
<property
key={<identifier name="title" />}
value={literal}
kind="init"
/>,
<property
key={<identifier name="component" />}
value={identifier}
kind="init"
/>,
]}
/>
}
/>,
]}
/>,
<export-named-declaration
declaration={
<variable-declaration
kind="const"
declarations={[
<variable-declarator
id={<identifier name="Default" />}
init={
<object-expression
properties={[
<property
key={<identifier name="components" />}
value={
<object-expression
properties={[
<property
key={identifier}
value={identifier}
kind="init"
shorthand
/>,
]}
/>
}
kind="init"
/>,
<property
key={<identifier name="template" />}
value={<literal value={`<${identifier.name} />`} />}
kind="init"
/>,
<property
key={<identifier name="parameters" />}
value={parameters}
kind="init"
/>,
]}
/>
}
/>,
]}
/>
}
/>,
<export-default-declaration
declaration={<identifier name="meta" />}
/>,
]}
/>
) as unknown as estree.Program;
return format(
generate(program),
{
parser: 'babel-ts',
singleQuote: true,
useTabs: true,
}
);
}
promisify(glob)('src/{components,pages,ui,widgets}/**/*.vue').then((components) => Promise.all(
components.map((component) => {
const stories = component.replace(/\.vue$/, '.stories.ts');
fs.stat(stories).then(
() => {},
() => {
fs.writeFile(stories, toStories(component));
}
);
})
));