npm package: @mpinnovationskz/ui-kit
Description: MPI shared components
Author: Alexander Kim
Latest version: 0.0.27

# UI-Kit MPinnovations

[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![License][license-src]][license-href]
[![Nuxt][nuxt-src]][nuxt-href]

Shared UI components based on AntDesign + TailwindCSS.

## Dependencies

This module is dependent on (it's on peerDependencies):
- [@ant-design-vue/nuxt](https://nuxt.com/modules/ant-design-vue)
- [@nuxtjs/tailwindcss](https://tailwindcss.nuxtjs.org/getting-started/installation)

## Quick Setup

1. Add `@mpinnovations/ui-kit` dependency to your project

```bash
pnpm add -D @mpinnovations/ui-kit
```

2. Add `@mpinnovations/ui-kit` to the `modules` section of `nuxt.config.ts`, custom config could be passed in `uiKitMpi` property as shown below:

```js
export default defineNuxtConfig({
  modules: [
    '@mpinnovations/ui-kit'
  ],
  // ui-kit configuration
  uiKitMpi: {
    theme: {
      colorPrimary: '#9139ae',
      borderRadius: 6,
      fontFamily: 'Roboto',
      colorInfo: '#9139ae'
      twColors: {
        'custom-blue': '#1e40af',
        'custom-red': '#ef4444',
      }.
      twScreens: {
        'sm': '640px',
        'md': '768px',
      }
    },
  },
})
```

`theme.fontFamily` is applied to a Tailwind config as well. You can apply this font globally using `font-main` class on a root container. `twColors` is for extending default color palette.

3. This module provides two components: `<AntdSpa>` & `<AntdSsr>`, it must be used as wrapper in `app.vue` at the top level in order to utilize theme configuration variables:

```jsx
<AntdSsr>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</AntdSsr>

// or in case of SPA
<AntdSpa>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</AntdSpa>
```

4. VSCode config for taiwind intellisense:

```json
{
  "files.associations": {
    "*.css": "tailwindcss"
  },
  "editor.quickSuggestions": {
    "strings": true
  },
  "tailwindCSS.experimental.configFile": "./.nuxt/tailwind.config.cjs"
}
```

You're good to go! ✨

## Development

Node version must be >= 18

```bash
# Install dependencies
pnpm i

# Generate type stubs
pnpm dev:prepare

# Develop with the playground
pnpm dev

# Build the playground
pnpm dev:build

# Run ESLint
pnpm lint

# Run Vitest
pnpm test
pnpm test:watch

# Release new version
pnpm release
```

<!-- Badges -->
[npm-version-src]: https://img.shields.io/npm/v/@mpinnovations/ui-kit/latest.svg?style=flat&colorA=020420&colorB=00DC82
[npm-version-href]: https://npmjs.com/package/@mpinnovations/ui-kit

[npm-downloads-src]: https://img.shields.io/npm/dm/@mpinnovations/ui-kit.svg?style=flat&colorA=020420&colorB=00DC82
[npm-downloads-href]: https://npmjs.com/package/@mpinnovations/ui-kit

[license-src]: https://img.shields.io/npm/l/@mpinnovations/ui-kit.svg?style=flat&colorA=020420&colorB=00DC82
[license-href]: https://npmjs.com/package/@mpinnovations/ui-kit

[nuxt-src]: https://img.shields.io/badge/Nuxt-020420?logo=nuxt.js
[nuxt-href]: https://nuxt.com