npm package: @mayan-co/ui-components
Description: This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
Latest version: 1.0.2

This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).

## Contribution Guidelines

- Avoid custom `css` if possible. Favor [TailwindCSS](https://tailwindcss.com/docs/utility-first) utility classes instead
- Keep components as stateless as possible. Things like `onChange` event handlers are the concern of the app that consumes these components.

> Certain stateful behavior will be necessary, such as tracking if a modal or dropdown is open/closed.

## Coding Style Rules

> To help catch many of the common pitfalls that aren't compile errors, install this project's recommended extensions for VSCode.

### Formatting

- Prettier must be used to format all code.

### FS Conventions

- Component files should follow kebab case _(ie. Good: `text-input.tsx` Bad: `Button.tsx`, `dropDown.tsx`, `user_info.tsx`)_
- Story files should follow kebab case case and have the extension `*.stories.ts` _(ie. Good: `select.stories.ts` Bad: `Table.stories.ts`)_

### Variable/Identifier Conventions

- Constants at the top level of a module should follow capital-snake case _(ie. `const INVALID_STATE: number = 0;`)_
- Types and React components should follow pascal case.
- All other variables, function identifiers and object keys should be camel case.

### Enums vs Literals

- Favor enums instead of literals. It is easier to create/perform reliable code mods that rename enums compared to find-n-replace of literals.
- When literal strings are used _(either in their own right or as part of a string enum)_ prefer snake case.

### Named vs Default Exports

- Favor named exports instead of a default export. 

### React Prop Naming

- Boolean props should be prefixed with `is` (ie. `isActive`)
- Function props should be:
  - prefixed with `on` when representing an event
  - suffixed with `Renderer` when supporting the render prop pattern

### React Prop Performance Considerations

- Avoid passing objects _(including arrays, `Set`, `Map`, etc.)_ as props whenever possible. If it is a necessity, make sure they are properly memoized.
- If you must pass a rendered React element as a prop, perform the rendering in a `useMemo` hook.

## Getting Started

Although this project was initialized from a `nextjs` template, the main focus is the `storybook` app. 

First, run the development server:

```bash
npm run storybook
```

This should open a new tab in your default browser and load the main page. From here you can click around to get acquainted with the layout and play with the controls for the various starter components.

## Integration with Figma

The project is already configured to embed Figma files in the controls section of a Story. Add a `parameters` property to a `Story` config object like the one below.

```typescript
export const Primary: Story = {
  args: {
    primary: true,
    label: 'Button',
  },
  parameters: {
    design: {
      type: 'figma',
      url: 'https://www.figma.com/file/ZruKgQ2m5Pra5OD3GRZ9L5/Design-System-WebApp-Beta?node-id=1017:3120&mode=dev',
    },
  },
};
```