# 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](https://www.conventionalcommits.org/en/v1.0.0/#specification) format
6. Create pull requests against the `main` branch

## Running Storybook

```sh
yarn dev:storybook
```

## Testing

Run tests with a coverage report:

```sh
yarn test
```

Run tests and re-run on file change:

```sh
yarn test:watch
```

Check for type errors:

```sh
yarn tsc:check
```

Lint files with ESLint, Prettier and Stylelint

```sh
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

```sh
yarn generate:component --component=ComponentName
```
