settings.json

{
    "module-templates.engine": "handlebars",
    "module-templates.templates": [
        {
            "displayName": "Chalk UI component",
            "defaultPath": "src/components",
            "folder": "{{kebab name}}",
            "questions": {
                "name": "Component name"
            },
            "files": [
                {
                    "name": "{{kebab name}}.vue",
                    "content": [
                        "<template>",
                        "  <div>",
                        "    {{kebab name}}",
                        "  </div>",
                        "</template>",
                        "",
                        "<script lang=\"ts\">",
                        "import { defineComponent } from 'vue'",
                        "import { useMachine } from '@xstate/vue'",
                        "import { machine } from './machine'",
                        "",
                        "export default defineComponent({",
                        "  name: 'Cl{{pascal name}}',",
                        "",
                        "  setup () {",
                        "    const { state, send } = useMachine(machine)",
                        "",
                        "    return {",
                        "      state,",
                        "      send,",
                        "    }",
                        "  },",
                        "})",
                        "</script>",
                        ""
                    ]
                },
                {
                    "name": "index.ts",
                    "content": [
                        "import Cl{{pascal name}} from './{{kebab name}}.vue'",
                        "",
                        "export default Cl{{pascal name}}",
                        ""
                    ]
                },
                {
                    "name": "machine.ts",
                    "content": [
                        "import { Machine } from 'xstate'",
                        "",
                        "export type MachineContext = {",
                        "  id: string | null;",
                        "}",
                        "",
                        "export interface MachineStatesSchema {",
                        "  states: {",
                        "    enabled: {};",
                        "    disabled: {};",
                        "  };",
                        "}",
                        "",
                        "export type MachineEvent =",
                        "  | { type: 'DISABLE' }",
                        "  | { type: 'ENABLE' }",
                        "",
                        "export const machine = Machine<MachineContext, MachineStatesSchema, MachineEvent>({",
                        "  id: 'machine',",
                        "  context: {",
                        "    id: null,",
                        "  },",
                        "  initial: 'enabled',",
                        "  states: {",
                        "    enabled: {",
                        "      on: {",
                        "        DISABLE: 'disabled',",
                        "      },",
                        "    },",
                        "    disabled: {",
                        "      on: {",
                        "        ENABLE: 'enabled',",
                        "      },",
                        "    },",
                        "  },",
                        "})",
                        ""
                    ]
                },
                {
                    "name": "/__tests__/{{kebab name}}.spec.ts",
                    "content": [
                        "/* eslint-disable @typescript-eslint/no-explicit-any */",
                        "import { mount, VueWrapper } from '@vue/test-utils'",
                        "import Cl{{pascal name}} from '#components/__subdir__/{{kebab name}}'",
                        "",
                        "let wrapper: VueWrapper<any>",
                        "",
                        "const defaultId = 'sample-id'",
                        "",
                        "beforeEach(() => {",
                        "  wrapper = mount(Cl{{pascal name}}, {",
                        "    props: {",
                        "      id: defaultId,",
                        "    },",
                        "  })",
                        "})",
                        "",
                        "afterEach(() => {",
                        "  wrapper.unmount()",
                        "})",
                        "",
                        "describe('Cl{{pascal name}}', () => {",
                        "  describe('defaults', () => {",
                        "    it('should be visible', async () => {",
                        "      expect(wrapper.find('[data-{{kebab name}}-root]').isVisible()).toBe(true)",
                        "    })",
                        "  })",
                        "",
                        "  describe('slots', () => {})",
                        "",
                        "  describe('props', () => {})",
                        "",
                        "  describe('functionality', () => {})",
                        "})",
                        "",
                    ]
                },
                {
                    "name": "/__tests__/machine.spec.ts",
                    "content": [
                        "import { machine } from '../machine'",
                        "",
                        "describe('{{pascal name}} machine', () => {",
                        "  it('transitions from `enabled` to `disabled` when the DISABLE event occurs', async () => {",
                        "    const expectedValue = 'disabled'",
                        "    const actualState = machine.transition('enabled', 'DISABLE')",
                        "",
                        "    expect(actualState.matches(expectedValue)).toBe(true)",
                        "  })",
                        "})",
                        ""
                    ]
                },
                {
                    "name": "{{kebab name}}.stories.mdx",
                    "content": [
                        "import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks'",
                        "import Cl{{pascal name}} from '#components/__subdir__/{{kebab name}}'",
                        "",
                        "export const Template = (args) => ({",
                        "  components: { Cl{{pascal name}} },",
                        "  setup () {",
                        "    return { args }",
                        "  },",
                        "  template: `<cl-{{kebab name}} v-bind=\"args\">Submit</cl-{{kebab name}}>`,",
                        "})",
                        "",
                        "<Meta title=\"Form/{{pascal name}}\" component={ Cl{{pascal name}} } argTypes={ {",
                        "  type: {",
                        "    control: {",
                        "      type: 'select',",
                        "      options: ['primary', 'secondary', 'disabled', 'cancel', 'positive', 'negative'],",
                        "    },",
                        "  },",
                        "} } />",
                        "",
                        "# {{pascal name}}",
                        "",
                        "The `<cl-{{kebab name}} />` component renders a {{pascal name}}.",
                        "",
                        "<Canvas>",
                        "  <Story name=\"Default\">",
                        "    { Template.bind({}) }",
                        "  </Story>",
                        "</Canvas>",
                        "",
                        "<ArgsTable of=\"^\" />",
                        ""
                    ],
                }
            ]
        },
        {
            "displayName": "Chalk UI component doc",
            "defaultPath": "src/components",
            "questions": {
                "name": "Component name"
            },
            "files": [
                {
                    "name": "{{kebab name}}.stories.mdx",
                    "content": [
                        "import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks'",
                        "import Cl{{pascal name}} from '#components/__subdir__/{{kebab name}}'",
                        "",
                        "export const Template = (args) => ({",
                        "  components: { Cl{{pascal name}} },",
                        "  setup () {",
                        "    return { args }",
                        "  },",
                        "  template: `<cl-{{kebab name}} v-bind=\"args\" />`,",
                        "})",
                        "",
                        "<Meta title=\"Form/{{pascal name}}\" component={ Cl{{pascal name}} } argTypes={ {",
                        "  type: {",
                        "    control: {",
                        "      type: 'select',",
                        "      options: ['primary', 'secondary', 'disabled', 'cancel', 'positive', 'negative'],",
                        "    },",
                        "  },",
                        "} } />",
                        "",
                        "# {{pascal name}}",
                        "",
                        "The `<cl-{{kebab name}} />` component renders a {{pascal name}}.",
                        "",
                        "<Canvas>",
                        "  <Story name=\"Default\">",
                        "    { Template.bind({}) }",
                        "  </Story>",
                        "</Canvas>",
                        "",
                        "<ArgsTable of=\"^\" />",
                        ""
                    ],
                }
            ]
        },
    ],
    "typescript.tsdk": "node_modules/typescript/lib",
    "volar.tsPlugin": true
}