gfx-component-lib

component-lib

Base for component-lib. Contribution Guide

Libraries Use

Currently, the following libraries are used:

• ShadCN
• TailwindCSS
• Radix (ShadCN uses this)
• CVA

Border Gradients

Uses the tailwindcss-border-gradient-radius plugin to create a border gradient.

It follows the border-gradient-[direction-key]-[color-key]-[background-key] syntax. Please refer to the config.linearBorderGradients.js file for the current configs.

WARNING

This is built off of TailwindCSS and any clashing classes will cause an override and could make things distorted

Getting Started

Please run the following commands

pnpm install

pnpm dev

Viewing Storybook

pnpm storybook

Updating Chromatic

pnpm chromatic

Adding New Components

Please use the ShadCN or Radix-UI helper commands to add the individual components.

If a custom component is made (overriding or abstracting the ShadCN/Radix components for better development experience) - please prefix the types and component with Shad/Radix this will help differentiate between the core components to be used and those which are just used as builders.

Components should be added to src/components/ui

Caveats

Class names not applying

Incase certain class names are getting yoinked, or not applied e.g text-b3 text-red-500 you need to patch the extendTailwindMerge in /utils. This is due to twMerge ejecting classes.

Stories

Stories should be added to src/components and should showcase examples and controls (within reason) of the component

Adding variants or complex compound components

Note CVA is used to manage this part

Follow one of the examples that exist, but in essence, the second param of the CVA constructor is used to type out your combinations.

Compound Types

This is used to add unique styles from docs as an example, if the intent is primary, and the size is medium the class uppercase is applied.:

// components/button.ts
import { cva } from "class-variance-authority";
 
const button = cva(["font-semibold", "border", "rounded"], {
  variants: {
    intent: {
      primary: [
        "bg-blue-500",
        "text-white",
        "border-transparent",
        "hover:bg-blue-600",
      ],
      // **or**
      // primary: "bg-blue-500 text-white border-transparent hover:bg-blue-600",
      secondary: [
        "bg-white",
        "text-gray-800",
        "border-gray-400",
        "hover:bg-gray-100",
      ],
    },
    size: {
      small: ["text-sm", "py-1", "px-2"],
      medium: ["text-base", "py-2", "px-4"],
    },
  },
  compoundVariants: [
    {
      intent: "primary",
      size: "medium",
      class: "uppercase",
      // **or** if you're a React.js user, `className` may feel more consistent:
      // className: "uppercase"
    },
  ],
  defaultVariants: {
    intent: "primary",
    size: "medium",
  },
});