@kittycad/react-shared

@kittycad/react-shared

Shared React components for KittyCAD applications.

Installation

npm install @kittycad/react-shared
# or
yarn add @kittycad/react-shared

Usage

import { Button } from '@kittycad/react-shared'

function App() {
  return (
    <Button variant="primary" size="md" onClick={() => console.log('Clicked!')}>
      Click me
    </Button>
  )
}

Development

Prerequisites

• Node.js 20+
• npm or yarn

Setup

# Install dependencies
npm install

# Start Storybook for development
npm run dev

# Build the library
npm run build

# Run tests
npm test

# Type checking
npm run tsc

# Linting and formatting
npm run lint
npm run fmt

Available Components

• Button: A customizable button component with multiple variants and sizes

Storybook

This project uses Storybook for component development and documentation. Run npm run dev to start the Storybook development server.

Publishing

The library is automatically published to npm when a new git tag is created:

git checkout -b bump

npm version patch --no-git-tag-version # or minor, major

npm run fmt

git add package.json package-lock.json
git commit -m "bump version"

# !! Create PR and merge it

git checkout main
git pull
git tag -a vX.Y.Z
git push origin vX.Y.Z

This will trigger the GitHub Action to publish to npm.

Contributing

• Fork the repository
• Create a feature branch
• Make your changes
• Add tests and stories for new components
• Run npm run lint and npm run type-check
• Submit a pull request