# @mark/ui

Mark component library

## Description

@mark/ui is Grade Group's unified design system, providing modular, reusable components and tools to streamline UI/UX development across all products. It offers a comprehensive set of pre-built, customizable components that adhere to our design principles.

## Installation

Install @mark/ui and its dependencies using your preferred package manager:

```bash
# npm
npm install @mark/fonts @mark/icons @mark/ui

# yarn
yarn add @mark/fonts @mark/icons @mark/ui

# pnpm
pnpm install @mark/fonts @mark/icons @mark/ui
```

## Usage

Import and use the components in your project:

```javascript
import "@mark/fonts";
import { Button, Icon, Tag } from "@mark/ui";

// Use the components in your application
```

For detailed usage instructions and examples, please refer to our [Storybook documentation](https://your-storybook-url.com).

## Available Components

@mark/ui includes a variety of components, such as:

- Button
- Icon
- Tag
- Dialog
- Stack
- Nav
- And more...

For a complete list of components and their documentation, visit our Storybook.

## Documentation

Comprehensive documentation for each component is available in our Storybook. To run Storybook locally:

```bash
pnpm run dev
```

## Testing

We use Cypress for component testing. Run the tests with:

```bash
# Run all tests in the cli
pnpm test
# Open cypress test runner
pnpm cypress open
# Run single test in the cli by pointing to the component directory
pnpm cypress run --component --spec "src/components/hello-world/"
```

## Support

For questions or support, please reach out to the design team via [Teams](https://teams.microsoft.com/l/channel/19%3AGfDZM_PvfzrQ966xNlbBy6Kb-Ps0Fagi9zoAKuW_tgE1%40thread.tacv2/General%20(Design)?groupId=e103b6c1-1fae-4835-bcff-0b2ace356a62).

## Issues and Feature Requests

Please report any issues or submit feature requests through our [Jira board](https://gradegroup.atlassian.net/jira/software/projects/DSGN/boards/108/backlog).