This is a Next.js project bootstrapped with create-next-app.

Contribution Guidelines

• Avoid custom css if possible. Favor TailwindCSS 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:

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.

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',
    },
  },
};