css/.vscode/story-template.code-snippets

{
    "story-template": {
        "prefix": "story-template",
        "body": [
            "import React from 'react'",
            "import clsx from 'clsx'",
            "// import { StoryTemplateName } from './OtherStoryFile.stories' // import stories for component compositions",
            "",
            "export default {",
            "  title: 'Components/ComponentName',",
            "  excludeStories: ['ComponentTemplateName'],",
            "  layout: 'padded',",
            "  argTypes: {",
            "    booleanExample: {",
            "      control: {type: 'boolean'},",
            "      description: 'true/false toggle to controls',",
            "      table: {",
            "        category: 'Pick one: CSS, HTML, Interactive'",
            "      }",
            "    },",
            "    radioExample: {",
            "      options: ['string1', 'string2', 'string3', 'string4'],",
            "      control: {",
            "        type: 'inline-radio',",
            "      },",
            "      description: 'radio buttons mapping to strings (example: use for variant class names)',",
            "      table: {",
            "        category: 'Pick one: CSS, HTML, Interactive'",
            "      }",
            "    },",
            "    stringExample: {",
            "      name: 'stringExample',",
            "      type: 'string',",
            "      description: 'text box control',",
            "      table: {",
            "        category: 'Pick one: CSS, HTML, Interactive'",
            "      }",
            "    },",
            "    children: {",
            "      description: 'creates a slot for children',",
            "      table: {",
            "        category: 'HTML'",
            "      }",
            "    }",
            "  }",
            "}",
            "",
            "// build every component case here in the template (private api)",
            "export const ComponentTemplateName = ({booleanExample, radioExample, stringExample, children}) => (",
            "  <div",
            "    // use clsx for multiple classnames",
            "    className={clsx('defaultClass', radioExample && `radioExample`, booleanExample && 'defaultClass--modifier')}",
            "    // use undefined for values that shouldn't be set if false",
            "    // aria-hidden={booleanExample ? 'true' : undefined}",
            "  >",
            "    {/* use {children} for wrapper component templates */}",
            "    <>",
            "      {stringExample}",
            "      {children}",
            "    </>",
            "  </div>",
            ")",
            "",
            "// create a \"playground\" demo page that may set some defaults and allow story to access component controls",
            "export const Playground = ComponentTemplateName.bind({})",
            "Playground.args = {",
            "  stringExample: 'Default text',",
            "  booleanExample: false",
            "  //   children: (",
            "  //     <>",
            "  //       <StoryTemplateName {...StoryTemplateName.args} />",
            "  //     </>",
            "  //   )",
            "}",
            ""
        ],
        "description": "Basic component story jsx template"
    }
}