Sharkey/packages/frontend/.storybook/generate.tsx

629 lines
23 KiB
TypeScript
Raw Normal View History

import { existsSync, readFileSync } from 'node:fs';
import { writeFile } from 'node:fs/promises';
import { basename, dirname } from 'node:path/posix';
2023-03-19 13:22:14 +00:00
import { promisify } from 'node:util';
import { GENERATOR, type State, generate } from 'astring';
2023-03-19 13:22:14 +00:00
import type * as estree from 'estree';
import glob from 'glob';
2023-03-19 13:22:14 +00:00
import { format } from 'prettier';
interface SatisfiesExpression extends estree.BaseExpression {
type: 'SatisfiesExpression';
expression: estree.Expression;
reference: estree.Identifier;
}
const generator = {
...GENERATOR,
SatisfiesExpression(node: SatisfiesExpression, state: State) {
switch (node.expression.type) {
case 'ArrowFunctionExpression': {
state.write('(');
this[node.expression.type](node.expression, state);
state.write(')');
break;
}
default: {
// @ts-ignore
this[node.expression.type](node.expression, state);
break;
}
2023-03-21 02:58:58 +00:00
}
2023-03-21 15:25:17 +00:00
state.write(' satisfies ', node as unknown as estree.Expression);
this[node.reference.type](node.reference, state);
},
2023-03-21 15:48:11 +00:00
};
2023-03-21 15:48:11 +00:00
type SplitCamel<
T extends string,
YC extends string = '',
YN extends readonly string[] = []
> = T extends `${infer XH}${infer XR}`
? XR extends ''
? [...YN, Uncapitalize<`${YC}${XH}`>]
: XH extends Uppercase<XH>
2023-03-21 15:48:11 +00:00
? SplitCamel<XR, Lowercase<XH>, [...YN, YC]>
: SplitCamel<XR, `${YC}${XH}`, YN>
: YN;
// @ts-ignore
type SplitKebab<T extends string> = T extends `${infer XH}-${infer XR}`
? [XH, ...SplitKebab<XR>]
: [T];
2023-03-21 15:48:11 +00:00
type ToKebab<T extends readonly string[]> = T extends readonly [
infer XO extends string
]
? XO
2023-03-21 15:48:11 +00:00
: T extends readonly [
infer XH extends string,
...infer XR extends readonly string[]
]
? `${XH}${XR extends readonly string[] ? `-${ToKebab<XR>}` : ''}`
: '';
// @ts-ignore
2023-03-21 15:48:11 +00:00
type ToPascal<T extends readonly string[]> = T extends readonly [
infer XH extends string,
...infer XR extends readonly string[]
]
? `${Capitalize<XH>}${ToPascal<XR>}`
: '';
2023-03-21 15:48:11 +00:00
function h<T extends estree.Node>(
component: T['type'],
props: Omit<T, 'type'>
): T {
2023-03-19 13:22:14 +00:00
const type = component.replace(/(?:^|-)([a-z])/g, (_, c) => c.toUpperCase());
2023-04-01 08:54:30 +00:00
return Object.assign(props || {}, { type }) as T;
2023-03-19 13:22:14 +00:00
}
declare global {
namespace JSX {
2023-03-21 15:48:11 +00:00
type Element = estree.Node;
type ElementClass = never;
type ElementAttributesProperty = never;
type ElementChildrenAttribute = never;
type IntrinsicAttributes = never;
type IntrinsicClassAttributes<T> = never;
type IntrinsicElements = {
[T in keyof typeof generator as ToKebab<SplitCamel<Uncapitalize<T>>>]: {
2023-03-21 15:48:11 +00:00
[K in keyof Omit<
Parameters<(typeof generator)[T]>[0],
'type'
>]?: Parameters<(typeof generator)[T]>[0][K];
};
};
}
}
function toStories(component: string): string {
const msw = `${component.slice(0, -'.vue'.length)}.msw`;
const implStories = `${component.slice(0, -'.vue'.length)}.stories.impl`;
2023-03-31 19:20:38 +00:00
const metaStories = `${component.slice(0, -'.vue'.length)}.stories.meta`;
const hasMsw = existsSync(`${msw}.ts`);
const hasImplStories = existsSync(`${implStories}.ts`);
2023-03-31 19:20:38 +00:00
const hasMetaStories = existsSync(`${metaStories}.ts`);
const base = basename(component);
const dir = dirname(component);
2023-03-19 13:22:14 +00:00
const literal = (
<literal
value={component
.slice('src/'.length, -'.vue'.length)
.replace(/\./g, '/')}
/>
2023-03-21 15:48:11 +00:00
) as estree.Literal;
2023-03-19 13:22:14 +00:00
const identifier = (
2023-03-21 15:48:11 +00:00
<identifier
name={base
.slice(0, -'.vue'.length)
.replace(/[-.]|^(?=\d)/g, '_')
.replace(/(?<=^[^A-Z_]*$)/, '_')}
/>
) as estree.Identifier;
const parameters = (
<object-expression
properties={[
2023-03-21 15:48:11 +00:00
(
<property
key={(<identifier name='layout' />) as estree.Identifier}
value={
(
<literal
value={
`${dir}/`.startsWith('src/pages/')
? 'fullscreen'
: 'centered'
}
/>
) as estree.Literal
}
kind={'init' as const}
/>
) as estree.Property,
...(hasMsw
? [
2023-03-21 15:48:11 +00:00
(
<property
key={(<identifier name='msw' />) as estree.Identifier}
value={(<identifier name='msw' />) as estree.Identifier}
kind={'init' as const}
shorthand
/>
) as estree.Property,
]
: []),
]}
/>
2023-03-21 15:48:11 +00:00
) as estree.ObjectExpression;
2023-03-19 13:22:14 +00:00
const program = (
<program
body={[
2023-03-21 15:48:11 +00:00
(
<import-declaration
source={(<literal value='@storybook/vue3' />) as estree.Literal}
specifiers={[
(
<import-specifier
local={(<identifier name='Meta' />) as estree.Identifier}
imported={(<identifier name='Meta' />) as estree.Identifier}
/>
) as estree.ImportSpecifier,
...(hasImplStories
? []
: [
(
<import-specifier
local={
(<identifier name='StoryObj' />) as estree.Identifier
}
imported={
(<identifier name='StoryObj' />) as estree.Identifier
}
/>
) as estree.ImportSpecifier,
]),
]}
/>
) as estree.ImportDeclaration,
...(hasMsw
? [
2023-03-21 15:48:11 +00:00
(
<import-declaration
source={
(<literal value={`./${basename(msw)}`} />) as estree.Literal
}
specifiers={[
(
<import-namespace-specifier
local={(<identifier name='msw' />) as estree.Identifier}
/>
) as estree.ImportNamespaceSpecifier,
]}
/>
) as estree.ImportDeclaration,
]
: []),
...(hasImplStories
2023-03-20 07:27:40 +00:00
? []
: [
2023-03-21 15:48:11 +00:00
(
<import-declaration
source={(<literal value={`./${base}`} />) as estree.Literal}
specifiers={[
(
<import-default-specifier local={identifier} />
) as estree.ImportDefaultSpecifier,
]}
/>
) as estree.ImportDeclaration,
]),
2023-03-31 19:20:38 +00:00
...(hasMetaStories
? [
(
<import-declaration
source={
(<literal value={`./${basename(metaStories)}`} />) as estree.Literal
}
specifiers={[
(
<import-namespace-specifier
local={(<identifier name='storiesMeta' />) as estree.Identifier}
/>
) as estree.ImportNamespaceSpecifier,
]}
/>
) as estree.ImportDeclaration,
]
: []),
2023-03-21 15:48:11 +00:00
(
<variable-declaration
kind={'const' as const}
declarations={[
(
<variable-declarator
id={(<identifier name='meta' />) as estree.Identifier}
init={
(
<satisfies-expression
expression={
(
<object-expression
properties={[
(
<property
key={
(
<identifier name='title' />
) as estree.Identifier
}
value={literal}
kind={'init' as const}
/>
) as estree.Property,
(
<property
key={
(
<identifier name='component' />
) as estree.Identifier
}
value={identifier}
kind={'init' as const}
/>
) as estree.Property,
2023-03-31 19:20:38 +00:00
...(hasMetaStories
? [
(
<spread-element
argument={
(
<identifier name='storiesMeta' />
) as estree.Identifier
}
/>
) as estree.SpreadElement,
]
: [])
2023-03-21 15:48:11 +00:00
]}
/>
) as estree.ObjectExpression
}
reference={
(
<identifier
name={`Meta<typeof ${identifier.name}>`}
/>
) as estree.Identifier
}
/>
) as estree.Expression
}
2023-03-19 13:22:14 +00:00
/>
2023-03-21 15:48:11 +00:00
) as estree.VariableDeclarator,
]}
/>
) as estree.VariableDeclaration,
...(hasImplStories
? []
: [
2023-03-21 15:48:11 +00:00
(
<export-named-declaration
declaration={
(
<variable-declaration
kind={'const' as const}
declarations={[
(
<variable-declarator
id={
(
<identifier name='Default' />
) as estree.Identifier
}
init={
(
<satisfies-expression
expression={
(
<object-expression
properties={[
(
<property
2023-03-21 15:48:11 +00:00
key={
(
<identifier name='render' />
) as estree.Identifier
}
value={
(
<function-expression
params={[
(
<identifier name='args' />
) as estree.Identifier,
]}
body={
(
<block-statement
body={[
(
<return-statement
argument={
(
<object-expression
properties={[
(
<property
key={
(
<identifier name='components' />
) as estree.Identifier
}
value={
(
<object-expression
properties={[
(
<property
key={
identifier
}
value={
identifier
}
kind={
'init' as const
}
shorthand
/>
) as estree.Property,
]}
/>
) as estree.ObjectExpression
}
kind={
'init' as const
}
/>
) as estree.Property,
(
<property
key={
(
2023-03-23 07:44:41 +00:00
<identifier name='setup' />
) as estree.Identifier
}
value={
(
<function-expression
params={[]}
body={
(
<block-statement
body={[
(
<return-statement
argument={
(
<object-expression
properties={[
(
<property
key={
(
<identifier name='args' />
) as estree.Identifier
}
value={
(
<identifier name='args' />
) as estree.Identifier
}
kind={
'init' as const
}
shorthand
/>
) as estree.Property,
]}
/>
) as estree.ObjectExpression
}
/>
) as estree.ReturnStatement,
]}
/>
) as estree.BlockStatement
}
/>
) as estree.FunctionExpression
}
method
kind={
'init' as const
}
/>
) as estree.Property,
(
<property
key={
(
<identifier name='computed' />
2023-03-21 15:48:11 +00:00
) as estree.Identifier
}
value={
(
2023-03-23 07:44:41 +00:00
<object-expression
properties={[
2023-03-21 15:48:11 +00:00
(
2023-03-23 07:44:41 +00:00
<property
key={
2023-03-21 15:48:11 +00:00
(
2023-03-23 07:44:41 +00:00
<identifier name='props' />
2023-03-21 15:48:11 +00:00
) as estree.Identifier
}
2023-03-23 07:44:41 +00:00
value={
2023-03-21 15:48:11 +00:00
(
2023-03-23 07:44:41 +00:00
<function-expression
params={[]}
body={
(
<block-statement
body={[
(
<return-statement
argument={
(
<object-expression
properties={[
(
<spread-element
argument={
(
2023-04-01 07:35:05 +00:00
<member-expression
object={
(
<this-expression />
) as estree.ThisExpression
}
property={
(
<identifier name='args' />
) as estree.Identifier
}
/>
) as estree.MemberExpression
2023-03-23 07:44:41 +00:00
}
/>
) as estree.SpreadElement,
]}
/>
) as estree.ObjectExpression
}
/>
) as estree.ReturnStatement,
]}
/>
) as estree.BlockStatement
}
/>
) as estree.FunctionExpression
}
method
kind={
'init' as const
2023-03-21 15:48:11 +00:00
}
/>
2023-03-23 07:44:41 +00:00
) as estree.Property,
2023-03-21 15:48:11 +00:00
]}
/>
2023-03-23 07:44:41 +00:00
) as estree.ObjectExpression
2023-03-21 15:48:11 +00:00
}
kind={
'init' as const
}
/>
) as estree.Property,
(
<property
key={
(
<identifier name='template' />
) as estree.Identifier
}
value={
(
<literal
2023-03-23 07:44:41 +00:00
value={`<${identifier.name} v-bind="props" />`}
2023-03-21 15:48:11 +00:00
/>
) as estree.Literal
}
kind={
'init' as const
}
/>
) as estree.Property,
]}
/>
) as estree.ObjectExpression
}
/>
) as estree.ReturnStatement,
]}
/>
2023-03-21 15:48:11 +00:00
) as estree.BlockStatement
}
/>
) as estree.FunctionExpression
}
method
kind={'init' as const}
/>
) as estree.Property,
(
<property
key={
(
<identifier name='parameters' />
) as estree.Identifier
}
2023-03-21 15:48:11 +00:00
value={parameters}
kind={'init' as const}
/>
) as estree.Property,
]}
/>
) as estree.ObjectExpression
}
2023-03-21 15:48:11 +00:00
reference={
(
<identifier
name={`StoryObj<typeof ${identifier.name}>`}
/>
) as estree.Identifier
}
/>
) as estree.Expression
}
/>
) as estree.VariableDeclarator,
]}
/>
) as estree.VariableDeclaration
}
/>
) as estree.ExportNamedDeclaration,
]),
(
<export-default-declaration
declaration={(<identifier name='meta' />) as estree.Identifier}
/>
) as estree.ExportDefaultDeclaration,
2023-03-19 13:22:14 +00:00
]}
/>
2023-03-21 15:48:11 +00:00
) as estree.Program;
2023-03-19 13:22:14 +00:00
return format(
2023-03-21 15:25:17 +00:00
'/* eslint-disable @typescript-eslint/explicit-function-return-type */\n' +
'/* eslint-disable import/no-default-export */\n' +
generate(program, { generator }) +
(hasImplStories ? readFileSync(`${implStories}.ts`, 'utf-8') : ''),
2023-03-19 13:22:14 +00:00
{
parser: 'babel-ts',
singleQuote: true,
useTabs: true,
}
);
}
// promisify(glob)('src/{components,pages,ui,widgets}/**/*.vue').then(
promisify(glob)('src/components/global/**/*.vue').then(
2023-03-21 15:48:11 +00:00
(components) =>
Promise.all(
components.map((component) => {
const stories = component.replace(/\.vue$/, '.stories.ts');
return writeFile(stories, toStories(component));
})
)
);