Pivot-ui is a set of React components that implement the Pivot's Tekana Design components. The components are built using Tailwind CSS, Radix UI, D3.js and our custom design tokens.

• Consistency: The components should be consistent in look and feel.
• Accessibility: The components should be accessible, and follow the WAI-ARIA guidelines.
• Composable: The components should be composable. Let the consumer decide how to use them and give them powerful control over the components.
• Responsive: The components should be responsive.
• Performant: The components should be performant.
• Testable: The components should be testable.

1. Install the package:

   pnpm install pivot-ui

2. Import the styles:

   import 'pivot-ui/dist/index.css';

3. Import the components you need:

   import { Button } from 'pivot-ui';

The repository is structured as a monorepo using pnpm as the package manager. To get started, make sure you are familiar with the pnpm workspace concept.

1. Clone the repo, go into the project root directory and run:

   pnpm install

2. To start the development storybook server, run:

   pnpm --filter pivot-ui dev

Before you start contributing, ensure you've followed the steps in the Development section. When creating new components, adhere to the Atomic Design System principles. Familiarize yourself with the concept using this article.

For new components, navigate to packages/pivot-ui and run:

# packages/pivot-ui
pnpm component

• Ensure your component works as expected.
• Represent all component states in storybook.
• Write tests for the component.
• Run pnpm changeset to describe changes.
• Ensure 100% test coverage for the new component.
• Ensure the component is responsive.
• Add the component to the index.ts file in packages/pivot-ui/src.
• Ensure the component doesn't require external styling; handle all styling internally.

This format provides a clear structure for both the changelog and the getting started guide. Adjustments can be made based on specific needs or preferences.