search

ioulian / next-io-ghent-starter

Next.js starter kit for iO Ghent
https://ioulian.github.io/next-io-ghent-starter/
4 stars 0 forks source link

I configured some handy user snippets to generate functional, styled and story(book) component (VS Code) #26

Open timdujardin opened 1 year ago

timdujardin commented 1 year ago

Functional component

{
  "React Functional Component": {
    "prefix": ["rfc"],
    "body": [
      "import { FC } from \"react\";",
      "",
      "import { InferComponentProps } from \"@/types/styled\";",
      "",
      "import { Styled$TM_FILENAME_BASE } from \"./$TM_FILENAME_BASE.styles\";",
      "",
      "const $TM_FILENAME_BASE: FC<InferComponentProps<typeof Styled$TM_FILENAME_BASE>> = ({children, ...props}) => {",
      "  return (",
      "    <Styled$TM_FILENAME_BASE {...props}>",
      "      {children}$2",
      "    </Styled$TM_FILENAME_BASE>",
      "  )",
      "};",
      "",
      "export default $TM_FILENAME_BASE",
      ""
    ],
    "description": "React Functional Component (styled)"
  }
}

Styled Component

{
  "React Styled Component": {
    "prefix": ["rsc"],
    "body": [
      "import styled from \"styled-components\";",
      "",
      "export const Styled${TM_FILENAME_BASE/.styles$//g} = styled.$2``",
      ""
    ],
    "description": "React Styled Component"
  }
}

Story component

{
  "React Stories Component": {
    "prefix": ["rstc"],
    "body": [
      "import type { Meta, StoryObj } from \"@storybook/react\";",
      "",
      "import ${TM_FILENAME_BASE/.stories$//g} from \"./${TM_FILENAME_BASE/.stories$//g}\";",
      "",
      "const meta: Meta<typeof ${TM_FILENAME_BASE/.stories$//g}> = {",
      "  title: \"UI/${TM_FILENAME_BASE/.stories$//g}\",",
      "  component: ${TM_FILENAME_BASE/.stories$//g},",
      "  tags: [\"autodocs\"],",
      "};",
      "",
      "export default meta;",
      "type Story = StoryObj<typeof ${TM_FILENAME_BASE/.stories$//g}>;",
      "",
      "export const Default: Story = {",
      "  args: {",
      "    children: \"${TM_FILENAME_BASE/.stories$//g}\",",
      "  },",
      "};",
      ""
    ],
    "description": "React Stories Component"
  }
}