Mator NPM | npm.io

🏍️ Mator UI kit

this ui-kit implements based on @nuxt/ui module, and extended some feature and components based on our requirements for presonal use.

🚀 Setup

Make sure to install the dependencies:

# npm
npm install mator 

# pnpm
pnpm install

# yarn
yarn add mator

and then you should add this package in nuxt.config file and extend it.

export default defineNuxtConfig({
    extends: ['mator'],
})

⚠️ this package only available for Nuxt 3.

💚 Contributing

Learn how to contribute to project.

1. Before You Start

Before reporting a bug or reporting a feature, please make sure that you have read through this documentation and communitace with other team members.

2. Local Development Setup

To begin local development, follow these steps:

Clone the mator repository to your local machine

install all dependecies:

# yarn
yarn install

# pnpm
pnpm install

run the project
```
# yarn
yarn dev

# pnpm
pnpm run dev
```

3. write some codes :)

you can test the components in .playground/pages/index.vue page and place your desired component to see your current changes. and then if you sure about your changes please consider next steps.

4. Commit Conventions

We use Conventional Commits for commit messages, which allows a changelog to be auto-generated based on the commits. Please read the guide through if you aren't familiar with it already.

fix and feat are for actual code changes (that might affect logic). For type or document changes, use docs or chore instead.
If you are working on a specific component, ensure that you specify the main scope of your commit in brackets. e.g.
```
feat(Carousel): new component
fix(Button): fix padding in icon-button
chore(Table): improve accessibility
```
also we have lint-staged to check the eslint and prettier configs on your changes. if it found any errors you won't be able to push your changes. please consider to fix them if you saw some errors.

5. Making a Pull Request

Follow along the instructions provided when creating a PR
Ensure your PR's title adheres to the Conventional Commits since it will be used once the code is merged.
Ensure linting and make tests manually before submitting the PR. Avoid making unrelated changes.

6. Publish on NPM

for publish your changes you should update version and then publish it. so you should follows the semantic versioning spec and NPM semantic versioning to update version. then you should run below command to change version:

    npm version 1.0.8

and then you can publish new version

    npm publish

🧱 Project Structure

In this project, you'll find a variety of folders and files that serve different purposes. Here's an overview of the main ones:

Playground - .Playground :
The Playground is located in the root. It's a Nuxt app that uses the mator package to test the components and see your under development changes.
Components - components :
The Components is located in the root. It's a palce we impelment our components wrapped around the @nuxt/ui and also you can use headlessui components to make our desired components.

Theme - theme : The Theme directory is here to manage our design system rules and we use these files in tailwind.config to customize it.

we handle our icons in this project by @egoist/tailwindcss-icons plugin. and we have 4 category for our icons. default icons size set to 24px.

icon usage:

    <icon name="`i-${icon-category}-${icon-name}`" />

we define 4 prefix to our icons categories:

    {
        bf:'bold-filled',
        bo:'bold-outline',
        bo:'light-filled',
        bo:'light-outline',
    }

eg:

    <icon name="i-bf-car" /> <!-- 🚗 -->

theme/
├── icons/
│   ├── bold-filled.ts      # bold and filled category icons 
│   ├── bold-outline.ts     # bold and outlined category icons  
│   ├── index.ts            # handle all icon categories and default configs 
│   ├── light-filled.ts     # light and filled category icons   
│   ├── light-outline.ts    # light and outlined category icons  
│   colors.ts
│   opacity.ts
│   radius.ts
|   spacing.ts
│   typography.ts
└──