Euler Materials

Euler Materials is a component library to help deliver the best experience and drive consistency between Euler web apps.

Component structure

.
├── src
│   ├── components
|   │   ├── Button
|   |   │   ├── Button.api.mdx
|   |   │   ├── Button.classes.ts
|   |   │   ├── Button.docs.mdx
|   |   │   ├── Button.stories.tsx
|   |   │   ├── Button.styles.ts
|   |   │   ├── Button.tsx
|   |   │   ├── Button.types.ts
|   |   │   └── index.ts
|   │   └── index.ts
│   └── index.ts

Getting Started

To install the package: npx install-peerdeps @eulerxyz/euler-materials

Contributing

1. Clone this repo to your local device
2. Create a branch: git checkout -b ED-{TASKNO}-{BRANCHNAME}
3. Install dependencies: yarn
4. Start the development server: yarn dev
5. Make commits using the conventional commits format
6. Create pull requests against the main branch

Running Storybook

yarn dev:storybook

Testing

Run tests with a coverage report:

yarn test

Run tests and re-run on file change:

yarn test:watch

Check for type errors:

yarn tsc:check

Lint files with ESLint, Prettier and Stylelint

yarn lint:eslint
yarn lint:prettier
yarn lint:stylelint

Generating components

There is an implemented component generation script that will generate the boiler plate of a component. To do this run

yarn generate:component --component=ComponentName