production

.github/workflows/chromatic.yml

@@ -4,7 +4,11 @@
 name: 'Chromatic'
 
 # Event for the workflow
-on: push
+on:
+  push:
+    branches:
+      - master
+      - production
 
 # List of jobs
 jobs:

.gitignore

@@ -1,6 +1,7 @@
 .DS_Store
 node_modules
 /dist
+storybook-static
 
 
 # local env files

CHANGELOG.md

@@ -0,0 +1,60 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+## [1.0.3] - Current
+### Added
+- Spinner
+- Badge
+- Accordion
+- Tooltip (directive + component)
+- Tabs
+- Calendar
+### Changed
+- Updated docs
+- Update Table
+- Update Button
+- Update Inputs (by design)
+### Fixed
+- Remove storybook-static folder and add to gitignore
+
+## [1.0.2] - 2023-04-03
+### Added
+_
+### Changed
+- Moved git and npm to nuxtjs-ui-kit
+### Fixed
+_
+
+## [1.0.1] - 2023-04-02
+### Added
+- Button
+- Card
+- Carousel
+- Footer
+- interaction test
+- File select
+### Changed
+_
+### Fixed
+- build error
+
+## [0.1.5] - 2023-03-14
+### Added
+- HeaderOne
+- HeaderTwo
+- HeaderOne(fix)
+- Form Inputs
+- VeeValidate
+- V-Select
+- Table
+- rename Module
+### Changed
+- Improved the UI design.
+### Fixed
+- some fix
+
+## [0.1.4] - 2023-02-21
+### Added
+- Initial release.
+

README.md

@@ -1,17 +1,22 @@
-![agrisom](https://ibecsystems.com/css/images/ibec-systems.svg)
+![agrisom](https://avatars.githubusercontent.com/u/129746451?s=200&v=4)
 
-# Welcome to IBEC UI kit
+[![npm version][npm-version-src]][npm-version-href]
+[![Github Actions CI][github-actions-ci-src]][github-actions-ci-href]
+
+[//]: # ([![ibecsystems][ibecsystems-src]][ibecsystems-href])
+
+# Welcome to @ibecsystems/nuxtjs-ui-kit
 
 This is a Nuxt component library that will contain all ibec ui components you need to start a new nuxt (C & D) project. Components are written with nuxt 2, HTML, SCSS, bootstrap 5 and fully configurable using props, slots, and css variables.
 
-> This library is currently under construction. I'll be publishing new components as son as they are ready for use
+> This library is currently under construction. We'll be publishing new components as son as they are ready for use
 
 ## Installation
 
 **Using npm or yarn**
 ```
-npm install ibec-ui-kit
-yarn add ibec-ui-kit
+npm install @ibecsystems/nuxtjs-ui-kit
+yarn add @ibecsystems/nuxtjs-ui-kit
 ```
 
 ## Usage
@@ -20,16 +25,18 @@ yarn add ibec-ui-kit
 
 ```
 <template lang="html">
-    <HeaderOne />
+    <UiButton variant="primary">
+        Button Label
+    </UiButton>
 </template>
 
 <script lang="js">
-import {HeaderOne} from 'ibec-ui-kit';
+import { UiButton } from '@ibecsystems/nuxtjs-ui-kit';
 
 export default {
   name: 'MyComponent',
   components: {
-    HeaderOne: HeaderOne,
+    UiButton,
   },
 };
 </script>
@@ -54,24 +61,25 @@ main.scss
 ```
 
 ## Repository
-Check out the code on github, [d.tem4ik/ibec-ui-kit](https://ibecsystems.com/ru#/) **[soon]**
+Check out the code on github, [IBEC-BOX/nuxtjs-ui-kit](https://github.com/IBEC-BOX/nuxtjs-ui-kit)
 
 ## Documentation
 StoryBook
-[documentation](http://www.chromatic.com/library?appId=63f77fcfd12622a3e085e406)
+[documentation](https://production--642ab77737bffcfd679b51f1.chromatic.com)
 
 ## Changelog
-All notable changes to this project will be documented in this file.
-
-### [0.1.4] - 2023-02-21
-- Init Library
-- HeaderOne
-
-### [0.1.5] - 2023-03-14
-- HeaderTwo
-- HeaderOne(fix)
-- Form Inputs
-- VeeValidate
-- V-Select
-- Table
-- rename Module
+
+Changes for each version of our project are documented in the [CHANGELOG.md](./CHANGELOG.md) file.
+
+Copyright (c) [Ibec Systems][ibecsystems-href]
+
+<!-- Badges -->
+[npm-version-src]: https://badgen.net/npm/v/@ibecsystems/nuxtjs-ui-kit
+[npm-version-href]: https://www.npmjs.com/package/@ibecsystems/nuxtjs-ui-kit
+
+[github-actions-ci-src]: https://badgen.net/github/checks/IBEC-BOX/nuxtjs-ui-kit/production
+[github-actions-ci-href]: https://github.com/IBEC-BOX/nuxtjs-ui-kit
+
+[ibecsystems-src]: https://badgen.net/badge/icon/ibec-systems?icon=chrome&label&color=black
+[ibecsystems-href]: https://ibecsystems.com/ru#/
+

package.json

@@ -1,18 +1,21 @@
 {
-  "name": "@nuxtjs/ibec-ui-kit",
+  "name": "@ibecsystems/nuxtjs-ui-kit",
   "my-old-module-name": "ibec-ui-kit",
-  "version": "1.0.1",
-  "private": false,
-  "repository": "ibec-kits/nuxtjs-ibec-ui-kit",
-  "description": "Ibec UI components",
+  "version": "1.0.3",
+  "homepage": "https://github.com/IBEC-BOX/nuxtjs-ui-kit",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/IBEC-BOX/nuxtjs-ui-kit.git"
+  },
+  "description": "Ibec Nuxtjs UI components",
   "files": [
     "dist"
   ],
   "contributors": [
     "Artyom Dugijiyev <[email protected]>"
   ],
   "author": {
-    "name": "Tem4ik",
+    "name": "Artyom Dugijiyev",
     "email": "[email protected]"
   },
   "scripts": {
@@ -28,6 +31,7 @@
   "dependencies": {
     "bootstrap": "5.3.0-alpha1",
     "core-js": "^3.8.3",
+    "v-calendar": "^2.4.1",
     "vee-validate": "<3.0.0",
     "vue": "^2.6.14",
     "vue-select": "^3.20.2"
@@ -77,9 +81,8 @@
     "last 2 versions",
     "not dead"
   ],
+  "license": "ISC",
   "publishConfig": {
     "access": "public"
-  },
-  "readme": "ERROR: No README data found!",
-  "_id": "@nuxtjs/[email protected]"
+  }
 }

src/components/Accordion/Accordion.stories.js

@@ -0,0 +1,127 @@
+import Accordion from './Accordion.vue';
+
+// More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
+export default {
+  title: 'Ui Components/Accordion',
+  component: Accordion,
+  // More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
+  argTypes: {
+    id: {
+      type: 'string',
+      description: 'Уникальный идентификатор аккордеона',
+      defaultValue: 'UiAccordion'
+    },
+    bordered: {
+      type: 'boolean',
+      description: 'Определяет, нужны ли бордеры между элементами аккордеона',
+      defaultValue: false
+    },
+    flush: {
+      type: 'boolean',
+      description: 'Определяет, нужены ли отступы и бордеры',
+      defaultValue: false
+    },
+    alwaysOpen: {
+      type: 'boolean',
+      description: 'Определяет, нужно ли закрывать элементы аккордеона',
+      defaultValue: false
+    },
+    items: {
+      type: 'array',
+      description: 'Массив объектов, содержащих заголовок и содержимое элементов аккордеона',
+      defaultValue: [
+        { header: 'Заголовок 1', body: 'Содержимое 1' },
+        { header: 'Заголовок 2', body: 'Содержимое 2' },
+      ],
+      control: {
+        type: 'object',
+        keys: {
+          header: {
+            type: 'string',
+            description: 'Заголовок элемента аккордеона'
+          },
+          body: {
+            type: 'string',
+            description: 'Содержимое элемента аккордеона'
+          },
+        },
+      },
+    },
+    defaultExpanded: {
+      type: 'number',
+      description: 'Индекс элемента аккордеона, который должен быть раскрыт по умолчанию',
+      defaultValue: -1
+    },
+  },
+};
+
+// More on component templates: https://storybook.js.org/docs/vue/writing-stories/introduction#using-args
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { Accordion },
+  template:
+    `<div style="max-width: 790px"><Accordion v-bind="$props"></Accordion></div>`,
+});
+
+export const Primary = Template.bind({});
+// More on args: https://storybook.js.org/docs/vue/writing-stories/args
+Primary.parameters = {
+  design: {
+    type: 'figma',
+    url: 'https://www.figma.com/file/UmrBZaCGhezw0qx9xuq7Xf/%D0%94%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD-%D1%81%D0%B8%D1%81%D1%82%D0%B5%D0%BC%D0%B0?node-id=903-23750&t=DH2rYxN0T4IVWmKl-4',
+  },
+}
+
+Primary.args = {
+  defaultExpanded: 0,
+  items: [
+    {id: '3', header: 'What is Lorem ipsum dolor?', body: `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.`},
+    {id: '1', header: 'What is Webflow and why is it the best website builder?', body: `asdads <a href="/asd">Link</a>`},
+    {id: '2', header: 'What is Lorem ipsum dolor?', body: `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.`},
+    {id: '4', header: 'What is Lorem ipsum dolor?', body: `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.`}
+  ]
+};
+
+export const Bordered = Template.bind({});
+// More on args: https://storybook.js.org/docs/vue/writing-stories/args
+Bordered.parameters = {
+  design: {
+    type: 'figma',
+    url: 'https://www.figma.com/file/UmrBZaCGhezw0qx9xuq7Xf/%D0%94%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD-%D1%81%D0%B8%D1%81%D1%82%D0%B5%D0%BC%D0%B0?node-id=903-23875&t=DH2rYxN0T4IVWmKl-4',
+  },
+}
+
+Bordered.args = {
+  ...Primary.args,
+  bordered: true
+};
+
+export const Flush = Template.bind({});
+// More on args: https://storybook.js.org/docs/vue/writing-stories/args
+Flush.parameters = {
+  design: {
+    type: 'figma',
+    url: 'https://www.figma.com/file/UmrBZaCGhezw0qx9xuq7Xf/%D0%94%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD-%D1%81%D0%B8%D1%81%D1%82%D0%B5%D0%BC%D0%B0?node-id=903-23964&t=DH2rYxN0T4IVWmKl-4',
+  },
+}
+
+Flush.args = {
+  ...Primary.args,
+  flush: true
+};
+
+export const AlwaysOpen = Template.bind({});
+// More on args: https://storybook.js.org/docs/vue/writing-stories/args
+
+AlwaysOpen.args = {
+  ...Primary.args,
+  alwaysOpen: true
+};
+
+export const defaultExpanded = Template.bind({});
+// More on args: https://storybook.js.org/docs/vue/writing-stories/args
+
+defaultExpanded.args = {
+  ...Primary.args,
+  defaultExpanded: 2
+};