Playtron Styleguide

This project was bootstrapped with 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 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 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 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 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 for more information.

yarn lint

Lints the project and reports on the warnings/errors found. For more information, see eslint.

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.