@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

Linking package locally

Assumes your directory structure looks like

.
├── modeling-app
└── react-shared

git clone [e-mail]:KittyCAD/react-shared.git
cd react-shared
npm link
npm install
npm run build
// edit your files
// make sure to rebuild this after code changes!

cd modeling-app
rm -rf node_modules
// Write "@kittycad/react-shared": "file:../react-shared", the package.json
npm install
npm install ../react-shared/ --install-links

Gotchas

• using npm link can break with vite because vite will create modeling-app/node_modules/.vite/deps that are cached and will not be the correctly npm linked one. I needed to use the file: prefix to install the package to get around this vite issue.
• --install-links commmand is required because the package has a peerDependenices list and React is in that list. We need to make sure that modeling-app and the package have the same react version otherwise you will run into problems.
• Basic npm link and npm link @kittycad/react-shared will not work! vite bricks this!

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