@zarinpal/web-components

@zarinpal/web-components.

This package providing a new design system for ZarinPal that contains a foundation and many components based on the new design system. although this package developing for ZarinPal, it will use for other ZarinPal products in the future. In order to increase development speed and consistency on the style guide, we decided to use TailwindCSS. So this package uses TailwindCSS, Typescript and Vuejs.

NOTE: This package is under construction and it's not ready to use!

NOTE: These web components build for Vue.js 2.x / Nuxt.js 2.x

Features

• Responsive components
• Support Dark and Light mode

Installation

First install and configure TailwindCSS with a minimal config then add @zarinpal/web-components dependency to your project:

# using npm
npm install @zarinpal/web-components

# using yarn
yarn add @zarinpal/web-components

Add it to your project:

Nuxtjs

1. Create a plugin with web-components.js name

// web-components.js

import Vue from 'vue';
import zwc from '@zarinpal/web-components';
import '@zarinpal/web-components/dist/zwc.css';

Vue.use(zwc);

2. Add plugin to nuxt.config.js

// nuxt.config.js

...

plugins: [
  '~/plugin/web-components',
],

...

3. Add purge to tailwind.config.js

// tailwind.config.js

...

purge: [
  'node_modules/@zarinpal/web-components/**/*.vue',
],

...

Usage

After installation, you just need to add components anywhere you want

<!-- *.vue -->

<button size="large">My Button</button>

Contributing

We're haven't any contributing guidelines yet because this package built as an intra-organizational project.