@ovchinnikov-lxs-frontend/ui-kit

UI-kit for my vue 3 projects

Install

npm i @ovchinnikov-lxs-frontend/ui-kit

Example of usage:

1. Import default ui-kit css styles

   _bundle.sccs

   @import "@ovchinnikov-lxs-frontend/ui-kit/dist/ui-kit.css";

   or main.ts

   import '@ovchinnikov-lxs-frontend/ui-kit/dist/ui-kit.css';

2. Create a component in your project and add styles from your style guide based on the component props

   components/ui/UiButton/UiButton.vue

   <script setup lang="ts">
   // Components
   import { UiButton } from '@ovchinnikov-lxs-frontend/ui-kit';
   </script>
   
   <template>
       <UiButton v-bind="$attrs">
           <slot></slot>
       </UiButton>
   </template>
   
   <style lang="scss">
   .UiButton {
       &.--large-size {
           padding: 16px 32px;
           font-size: 24px;
       }
       
       &.--red-color {
           background: red;
           color: white;
       }
   }
   </style>
   

3. Use in project

   components/YourComponent.vue

   <script setup lang="ts">
   import UiButton from '~/components/ui/UiButton/UiButton.vue';
   </script>
   
   <template>
       <form>
           ....
           <UiButton size="large" color="red">submit</UiButton>
       </form>
   </template>

List of the components

🛠 - in progress
🚧 - experimental

• UiButton
• UiLink
• UiFormCell
• UiInput
• UiFileInput - 🚧
• UiRichText
• UiCheckbox
• UiToggle - 🚧
• UiRadio
• UiPopover
• UiSelect
  • UiSelectHeader
  • UiSelectOption
• UiTooltip
• UiIcon
• UiSwiper - 🚧
• UiImage
• UiPlate
• UiCollapse
• UiPreloader

Develop

Install dependencies

npm install 

Storybook

npm run storybook

Lint

Check eslint and stylelint

npm run lint:check

Fix eslint and stylelint

npm run lint:fix 

Unit tests

npm run test