Berlioz

Configurations

Storybook

The Storybook configuration is located in the ./.storybook/main.js file. Adding custom controls is managed in the ./.storybook/preview.js folder.

Typescript

The Typescript configuration is located in the ./tsconfig.json file.

Linters

Linters' configurations are shared across different projects in the monorepo; therefore, they are located in the ./packages/config folder.

Tailwind CSS

Similar to linters, the Tailwind CSS configuration comes from the ./packages/config folder.

Tests

Tests are written using the Jest framework along with Vue Testing Library. To run the tests, execute the following command: yarn test:unit

Test configuration can be found in the ./jest.config.js file.

Important Information

Berlioz is a design system, so it's essential to follow the following guidelines to ensure consistency across all components.

Guidelines

• Each component should have a unique and descriptive name suffixed with Bz, for example: : ButtonBz
• Don't forget to type the props and functions for each of the components.

Adding a Component

To add a component, you should follow these 3 steps or launch yarn run generate :

• Validate the component with the design team.
• Add a folder in /src/components with the component's name. Inside this folder, add the following files : ComponentNameBz.vue, ComponentNameBz.stories.js and ComponentNameBz.spec.js
• Configure your story by adding the appropriate props :

import ComponentNameBz from "./ComponentNameBz.vue"

export default {
  title: "MyFolder/ComponentNameBz",
  component: ComponentNameBz,
  tags: ["autodocs"],
  render: (args, { argTypes }) => ({
    props: Object.keys(argTypes),
    components: { ComponentNameBz },
    template: "<ComponentNameBz />"
  }),
  argTypes: {}
}

export const Default = {
  args: {}
}

You can organize components into folders and specify the folder name in the title : MyFolder/ComponentNameBz. Choose a folder name from the following : atoms, components, layouts

• Once your component is developed, write tests for it. Note that code cannot be pushed if the tests don't achieve at least 80% coverage. Here's a basic example of tests :

import { render } from "@testing-library/vue"

import ComponentNameBz from "./ComponentNameBz.vue"

describe("ComponentNameBz.vue", () => {
  it("check text in title", () => {
    const label = "Hello from @berlioz build"

    render(ComponentNameBz)

    const title = document.querySelector("h1")

    expect(title.textContent).toContain(label)
  })
})

• When the component is ready, add it to the ./src/components/index.js file so that it can be exported and used in other projects.

Commit

Commitlint

Refer to the monorepo's README.

By pass lefthook

To avoid coverage report and to force push, you could use the following command:

LEFTHOOK_EXCLUDE=test_berlioz_coverage  g commit -m "my message"