npm package: @playtron/styleguide
Description: This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app) and setup using https://storybook.js.org/.
Author: ericky@playtron.com
Latest version: 0.0.51

# Playtron Styleguide

This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app) and setup using https://storybook.js.org/.

The purpose of this project is to serve as a base for all stylized components and utilities to be used by the playtron projects.

## Creating a new component

When creating a new component please refer to the `yarn generate` component described in the [Available Scripts](#available-scripts) section.
Please try to write at least a couple tests for every component that you add, you can add them in the component-name.stories.ts file, if you generate the component with the `yarn generate` script, you should already have a play function placeholder in your auto generated stories.ts file where you can define interaction tests like this:

```
 play: async ({ canvasElement }) => {
    const canvas = within(canvasElement);
    // Find the hamburger menu button by its test id and click it
    const hamburgerButton = await canvas.findByTestId('hamburger-menu-button-container');
    await userEvent.click(hamburgerButton);

    // Verify that the menu appears
    const menuContainer = await canvas.findByTestId('hamburger-menu-menu-container');
    expect(menuContainer).not.toHaveStyle('display: none');

    // Click on first menu item
    const accountItem = (await canvas.findAllByTestId('hamburger-menu-menu-item')).at(0) as HTMLElement;
    await userEvent.click(accountItem);

    // Close the menu by clicking the hamburger button again
    await userEvent.click(hamburgerButton);
    expect(menuContainer).toHaveStyle('display: none');
  },
```

## Releasing a new version

If you want to publish a new release with a new set of changes, please run `yarn release` after commiting your new changes, this will bump the current version and update the changelog with a new commit, and once it's merged into master, the master pipeline shall have the new version published.

Also Since we're still setting up the project, we should use `yarn release:alpha` instead of `yarn release` for now.

TODO - REMOVE COMMENT ABOVE AND UPDATE publish.yml publish step to publish without alpha tagging once we move away from alpha.

## Available Scripts

In the project directory, you can run:

### `yarn start`

Runs the app in the development mode.\
Open [http://localhost:6006](http://localhost:6006) to view it in the browser.

The page will reload if you make edits.\
You will also see any lint errors in the console.

### `yarn build`

Builds the project to plain JavaScript code in the `dist` directory ready to be published to NPM.

### `yarn test`

Launches the test runner to run automatic tests against the stories setup.\
See the section about [running tests](https://storybook.js.org/docs/react/writing-tests/test-runner) for more information.

### `yarn test:watch`

Launches the test runner to run automatic tests against the stories setup in watch mode.\
See the section about [running tests](https://storybook.js.org/docs/react/writing-tests/test-runner) for more information.

### `yarn test:coverage`

Launches the test runner to run automatic tests against the stories setup and produces a coverage report at the end.\
See the section about [running coverage tests](https://storybook.js.org/docs/react/writing-tests/test-coverage) for more information.

### `yarn lint`

Lints the project and reports on the warnings/errors found.
For more information, see [eslint](https://eslint.org/docs/latest/).

### `yarn generate`

Generates a new component with standard boilerplate code, ready to use and preview on the storybook.

Templates are defined under the internals/generators folder.