You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 7-8.RSVP
Socket
Socket
Sign inDemoInstall

gfx-component-lib

Package Overview
Dependencies
Maintainers
0
Versions
83
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

gfx-component-lib


Version published
Maintainers
0
Created

Readme

Source

component-lib

Base for component-lib. Contribution Guide

Libraries Use

Currently, the following libraries are used:

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",
  },
});

FAQs

Package last updated on 18 Jul 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc