Figma Code Connectやっていき

{
  "codeConnect": {
    "parser": "react",
    "include": ["/**/*.{tsx,jsx}"]
  }
}

import styles from './Button.module.css';

export type Props = {
  onClick: () => void;
  text: string;
  variant: "primary" | "secondary";
  Size: "small" | "large";
  State: "enabled" | "disabled"
}

const Button = (props: Props) => {
  const { onClick, text, variant, Size, State } = props;

  const getButtonClasses = () => {
    const classes = [styles.btn];
    
    if (variant === 'primary') classes.push(styles.btnPrimary);
    if (variant === 'secondary') classes.push(styles.btnSecondary);
    
    if (Size === 'small') classes.push(styles.btnSmall);
    if (Size === 'large') classes.push(styles.btnLarge);
    if (State === 'disabled') {
      classes.push(styles.btnDisabled);
    }

    return classes.join(' ');
  };

  return (
      <button
        onClick={onClick}
        className={getButtonClasses()}
        disabled={State === 'disabled'}
      >
        {text}
      </button>
  );
};

export default Button;

import React from "react"
import Button from "./Button"
import figma from "@figma/code-connect"

/**
 * -- This file was auto-generated by Code Connect --
 * `props` includes a mapping from your code props to Figma properties.
 * You should check this is correct, and update the `example` function
 * to return the code example you'd like to see in Figma
 */

figma.connect(
  Button,
  "https://www.figma.com/design/ozQcMwI3tRaC83972uL1Nd/Figma-basics?node-id=527%3A6",
  {
    props: {
      // These props were automatically mapped based on your linked code:
      text: figma.string("text"),
      variant: figma.enum("variant", {
        primary: "primary",
        secondary: "secondary",
      }),
      Size: figma.enum("Size", {
        small: "small",
        large: "large",
      }),
      State: figma.enum("State", {
        enabled: "enabled",
        disabled: "disabled",
      }),
      // No matching props could be found for these Figma properties:
      // "text": figma.string('text')
    },
    example: (props) => (
      <Button
        onClick={/* TODO */}
        text={props.text}
        variant={props.variant}
        Size={props.Size}
        State={props.State}
      />
    ),
  },
)