@avakhula/ui 0.0.14 → 0.0.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@avakhula/ui",
-  "version": "0.0.14",
+  "version": "0.0.16",
   "main": "dist/index.js",
   "module": "dist/index.umd.cjs",
   "source": "src/index.js",
@@ -21,7 +21,7 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
-    "@vueup/vue-quill": "^1.1.0",
+    "@vueup/vue-quill": "^1.2.0",
     "mitt": "^3.0.0",
     "vue": "^3.2.45"
   },
@@ -29,23 +29,23 @@
     "@babel/core": "^7.20.7",
     "@babel/preset-env": "^7.21.4",
     "@rushstack/eslint-patch": "^1.1.4",
-    "@storybook/addon-a11y": "^7.0.9",
-    "@storybook/addon-actions": "^7.0.9",
-    "@storybook/addon-docs": "^7.0.9",
-    "@storybook/addon-essentials": "^7.0.9",
-    "@storybook/addon-interactions": "^7.0.9",
-    "@storybook/addon-links": "^7.0.9",
-    "@storybook/addon-mdx-gfm": "^7.0.9",
+    "@storybook/addon-a11y": "^7.0.11",
+    "@storybook/addon-actions": "^7.0.11",
+    "@storybook/addon-docs": "^7.0.11",
+    "@storybook/addon-essentials": "^7.0.11",
+    "@storybook/addon-interactions": "^7.0.11",
+    "@storybook/addon-links": "^7.0.11",
+    "@storybook/addon-mdx-gfm": "^7.0.11",
     "@storybook/testing-library": "^0.1.0",
-    "@storybook/vue3": "^7.0.9",
-    "@storybook/vue3-vite": "^7.0.9",
+    "@storybook/vue3": "^7.0.11",
+    "@storybook/vue3-vite": "^7.0.11",
     "@vitejs/plugin-vue": "^4.0.0",
     "@vitest/coverage-c8": "^0.28.4",
     "@vue/eslint-config-prettier": "^7.0.0",
     "@vue/test-utils": "^2.2.10",
     "babel-loader": "^8.3.0",
     "eslint": "^8.22.0",
-    "eslint-plugin-storybook": "^0.6.10",
+    "eslint-plugin-storybook": "^0.6.12",
     "eslint-plugin-vue": "^9.3.0",
     "flatpickr": "^4.6.13",
     "jsdom": "^21.1.0",
@@ -56,7 +56,7 @@
     "react-dom": "^18.2.0",
     "sass": "^1.57.1",
     "sass-loader": "^13.2.0",
-    "storybook": "^7.0.9",
+    "storybook": "^7.0.11",
     "vite": "^4.0.0",
     "vitest": "^0.28.4",
     "vue-loader": "^16.8.3",

package/src/App.vue

@@ -1,40 +1,82 @@
 <template>
+  <ib-select
+    v-model="test"
+    :options="options"
+    :is-required="true"
+    :is-multiple="false"
+  />
 
-  <button @click="active = !active">test</button>
-  <ib-modal :active="active" @close="onClose">
-    <template #body>
-      test
-    </template>
-  </ib-modal>
+  <button @click="changeValue">test</button>
 </template>
 
 <script>
-import IbModal from "./components/Modal/Modal.vue";
+import IbSelect from "./components/TreeSelect/Select.vue";
+const testData = [
+  {
+    id: "1",
+    title: "Education",
+    is_category: true,
+    initiallyVisible: true,
+    visible: true,
+    isDisabled: false,
+    checked: true,
+    isChildrenVisible: true,
+  },
+  {
+    id: "2",
+    title: "Education 2",
+    is_category: true,
+    initiallyVisible: true,
+    visible: true,
+    isDisabled: false,
+    checked: false,
+    isChildrenVisible: true,
+  },
+  {
+    id: "3",
+    title: "Education 3",
+    is_category: true,
+    initiallyVisible: true,
+    visible: true,
+    isDisabled: false,
+    checked: false,
+    isChildrenVisible: true,
+  },
+  {
+    id: "4",
+    title: "Education 4",
+    is_category: true,
+    initiallyVisible: true,
+    visible: true,
+    isDisabled: false,
+    checked: false,
+    isChildrenVisible: true,
+  },
+];
 
 export default {
-  components: { IbModal },
   data() {
     return {
-      active: false
+      options: testData,
+      test: testData[1].id
     };
   },
-  methods: {
-    onClose() {
-      console.log('called OnClose')
-      this.active = !this.active
-    }
-  },
   watch: {
-    active(val, oldVal) {
-      console.log("active has ben changet")
-    
-      if(val) {
-        setTimeout(() => {
-          this.active = false
-        }, 5000)
-      }
+    test(val) {
+        console.log('test', val)
     }
-  }
-}
+  },
+  components: {
+    IbSelect,
+  },
+  methods: {
+    changeValue() {
+        console.log('test')
+        this.test = testData[2].id
+    },
+  },
+};
+</script>
 
-</script>
+<style>
+</style>

package/src/components/Alert/Alert.stories.js

@@ -25,53 +25,45 @@ const Template = (args) => ({
   },
   template: `
   <ib-alert v-bind="args">
-    {{args.default}}
-
-    <template #link v-if="args.link">
-      <span v-html="args.link"></span>
-    </template>
+    Alert message
   </ib-alert>`,
 });
 
 export const Default = Template.bind({});
-Default.args = {
-  default: "Default message",
-};
+
 const Type = (args) => ({
   components: { IbAlert },
   setup() {
     return { args };
   },
   template: `
-    <ib-alert style="margin-bottom: 5px;">
-      {{args.default}}
-    </ib-alert>
-
-    <ib-alert style="margin-bottom: 5px;" type="warning">
-      {{args.default}}
-    </ib-alert>
-    
-    <ib-alert style="margin-bottom: 5px;" type="success">
-      {{args.default}}
-    </ib-alert>
-    
-    <ib-alert type="info">
-      {{args.default}}
-    </ib-alert>
+    <ib-alert style="margin-bottom: 5px;">Alert message</ib-alert>
+    <ib-alert style="margin-bottom: 5px;" type="warning">Warning message</ib-alert>
+    <ib-alert style="margin-bottom: 5px;" type="success">Success message</ib-alert>
+    <ib-alert type="info">Info message</ib-alert>
   `,
 });
 
 export const Types = Type.bind({});
-Types.args = {
-  default: "Default message",
-};
 Type.parameters = { controls: { disable: true } };
 
-export const LargeAlert = Template.bind({});
+const LargeTemplate = (args) => ({
+  components: { IbAlert },
+  setup() {
+    return { args };
+  },
+  template: `
+    <ib-alert v-bind="args">
+    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.
+      <template #link>
+        <a href="#" class="ib-standalone-link">View Server</a>
+      </template>
+    </ib-alert>`,
+});
+
+export const LargeAlert = LargeTemplate.bind({});
 LargeAlert.args = {
   showCloseButton: true,
   showIcon: true,
   title: "It is Title",
-  default: "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.",
-  link: `<a class='ib-standalone-link'>View Server</a>`,
 };

package/src/components/Alert/readme.mdx

@@ -1,6 +1,6 @@
 # IbAlert
 
-import { Story, Canvas } from "@storybook/addon-docs";
+import { Canvas } from "@storybook/addon-docs";
 import * as AlertStories from "./Alert.stories";
 
 Notifications are an important method of communicating with users and providing feedback. They range from granular, inline responses to user actions to system-wide messages.

package/src/components/Badge/readme.mdx

@@ -1,6 +1,6 @@
 # IbBadge
 
-import { Story, Canvas } from "@storybook/addon-docs";
+import { Canvas } from "@storybook/addon-docs";
 import * as BadgeStories from "./Badge.stories";
 
 The `IbBadge` component is a small component used to display a notification badge with a count or indicator on a parent component.

package/src/components/Button/Button.stories.js

@@ -24,12 +24,7 @@ const Template = (args) => ({
   setup() {
     return { args };
   },
-  template: `<ib-button v-bind="args">
-    {{args.default}}
-    <template #icon v-if="args.icon">
-      <span style="display: contents" v-html="args.icon"></span>
-    </template>
-  </ib-button>`,
+  template: '<ib-button v-bind="args">Button</ib-button>',
 });
 
 const IconTemplate = (args) => ({
@@ -79,51 +74,40 @@ const KindsTemplate = (args) => ({
 });
 
 export const Default = Template.bind({});
-Default.args = {
-  default: "Default",
-  // icon: `<ion-icon name="add"></ion-icon>`,
-  icon: ``,
-};
+Default.args = {};
 
 export const Secondary = Template.bind({});
 Secondary.args = {
-  default: "Secondary",
   kind: "secondary",
 };
 
 export const Tertiary = Template.bind({});
 Tertiary.args = {
-  default: "Tertiary",
   kind: "tertiary",
 };
 
 export const Ghost = Template.bind({});
 Ghost.args = {
-  default: "Ghost",
   kind: "ghost",
 };
 
 export const Danger = Template.bind({});
 Danger.args = {
-  default: "Danger",
   kind: "danger",
 };
 
 export const DangerGhost = Template.bind({});
 DangerGhost.args = {
-  default: "Danger-ghost",
   kind: "ghostDanger",
 };
 
 export const Block = Template.bind({});
 Block.args = {
-  default: "Block",
   block: true,
 };
 
 export const Disabled = Template.bind({});
 Disabled.args = {
-  default: "Disabled",
   disabled: true,
 };
 

package/src/components/Button/readme.mdx

@@ -1,6 +1,6 @@
 # IbButton
 
-import { Story, Canvas } from "@storybook/addon-docs";
+import { Canvas } from "@storybook/addon-docs";
 import * as ButtonStories from "./Button.stories";
 
 Buttons are used to initialize an action. Button labels express what action will occur when the user interacts with it.

package/src/components/ButtonGroup/ButtonGroup.stories.js

@@ -7,6 +7,9 @@ export default {
   parameters: {
     docs: {
       page: readme,
+      source: {
+        type: "code",
+      },
     },
   },
 };

package/src/components/Dropdown/readme.mdx

@@ -3,6 +3,7 @@
 import { Story, Canvas } from "@storybook/addon-docs";
 import * as DropdownStories from "./Dropdown.stories"
 
+
 ### Default
 
 <Canvas of={DropdownStories.Default} />

package/src/components/Form/Checkbox/readme.mdx

@@ -1,6 +1,7 @@
 # IbCheckbox
 
-import { Story, Canvas } from "@storybook/addon-docs";
+import { Canvas } from "@storybook/addon-docs";
+import * as CheckboxStories from "./Checkbox.stories";
 
 Checkboxes are used when there are multiple items to select in a list. Users can select zero, one, or any number of items.
 
@@ -26,9 +27,7 @@ Used when there is a parent and child relationship. You can use a parent checkbo
 
 ### Default
 
-<Canvas>
-  <Story id="form-checkbox--default" />
-</Canvas>
+<Canvas of={CheckboxStories.Default}/>
 
 ### Props
 
@@ -58,12 +57,8 @@ The component has no named slots, but you can place any content inside the compo
 
 To get the indeterminate state, need isChecked prop set to null. The indeterminate state is visually represented by a horizontal line inside the checkbox.
 
-<Canvas>
-  <Story id="form-checkbox--indeterminate" />
-</Canvas>
+<Canvas of={CheckboxStories.Indeterminate}/>
 
 ### Error state
 
-<Canvas>
-  <Story id="form-checkbox--error" />
-</Canvas>
+<Canvas of={CheckboxStories.Default}/>

package/src/components/Form/CheckboxGroup/readme.mdx

@@ -1,14 +1,13 @@
 # IbCheckboxGroup
 
-import { Story, Canvas } from "@storybook/addon-docs";
+import { Canvas } from "@storybook/addon-docs";
+import * as CheckboxGroupStories from "./CheckboxGroup.stories";
 
 The IbCheckboxGroup component is a wrapper component that helps to group and display a set of checkboxes or radio buttons together. It provides a label, an error message and an option to display the checkboxes or radio buttons horizontally.
 
 ## Default
 
-<Canvas>
-  <Story id="form-checkbox-group--default" />
-</Canvas>
+<Canvas of={CheckboxGroupStories.Default}/>
 
 ### Props
 
@@ -34,23 +33,14 @@ This component does not emit any events.
 Checkbox labels are positioned to the right of their inputs. If there is a checkbox grouping, they can be laid out vertically or horizontally depending on the use case and the structure of the UI. When possible, arrange the checkbox and radio button groups vertically for easier reading.
 
 - #### Vertical
-
-  <Canvas>
-    <Story id="form-checkbox-group--default" />
-  </Canvas>
+<Canvas of={CheckboxGroupStories.Default}/>
 
 - #### Horizontal
-  <Canvas>
-    <Story id="form-checkbox-group--horizontal-alignment" />
-  </Canvas>
+<Canvas of={CheckboxGroupStories.HorizontalAlignment}/>
 
 ### Use radio
 
-<Canvas>
-  <Story id="form-checkbox-group--radio-group" />
-</Canvas>
+<Canvas of={CheckboxGroupStories.RadioGroup}/>
 
 ### Has error
-<Canvas>
-  <Story id="form-checkbox-group--checkbox-group-error" />
-</Canvas>
+<Canvas of={CheckboxGroupStories.CheckboxGroupError}/>

package/src/components/Form/DatePicker/readme.mdx

@@ -1,6 +1,7 @@
 # IbDatePicker
 
-import { Story, Canvas } from "@storybook/addon-docs";
+import { Canvas } from "@storybook/addon-docs";
+import * as DatePickerStories from "./DatePicker.stories";
 
 Date and time pickers allow users to select a single instance or range of dates and times.
 
@@ -38,9 +39,7 @@ Date pickers allow users to select past, present, or future dates. The type of d
 
 Internationalization, also referred to as globalization, refers to software adapting to different languages, regional peculiarities, and technical requirements of a target locale without additional code changes. This means that if the location is known, then formatting of a date or time can automatically change to the acceptable local format. You should always try to design for internationalization.
 
-<Canvas>
-  <Story id="form-date-picker--default" />
-</Canvas>
+<Canvas of={DatePickerStories.Default}/>
 
 ### Props
 
@@ -75,9 +74,7 @@ The simple date input provides the user with only a text field in which they can
 
 The simple date input can include month/year or month/day/year. The formatting may be localized and rearranged in sequence of appearance.
 
-<Canvas>
-  <Story id="form-date-picker--single-max" />
-</Canvas>
+<Canvas of={DatePickerStories.SingleMax}/>
 
 #### When to use
 
@@ -95,21 +92,15 @@ A date can be selected by manually entering a date in the text input field.
 
 **Example single date picker width error**
 
-<Canvas>
-  <Story id="form-date-picker--single-with-error" />
-</Canvas>
+<Canvas of={DatePickerStories.SingleWithError}/>
 
 ## Range Input
 
 Date range picker
 The date range picker functions much like the single date picker but instead of choosing just one date the user can choose a start and end date. For each date in the range, users have the option to manually enter the date in a text field or select the date in the calendar. Each point requires a day, month, and year to be selected.
 
-<Canvas>
-  <Story id="form-date-picker--range-max" />
-</Canvas>
+<Canvas of={DatePickerStories.RangeMax}/>
 
 **Example range date picker width error**
 
-<Canvas>
-  <Story id="form-date-picker--range-with-error" />
-</Canvas>
+<Canvas of={DatePickerStories.RangeWithError}/>

package/src/components/Form/Input/readme.mdx

@@ -1,6 +1,7 @@
 # IbInput
 
-import { Story, Canvas } from "@storybook/addon-docs";
+import { Canvas } from "@storybook/addon-docs";
+import * as InputStories from "./Input.stories";
 
 Text inputs enable users to enter free-form text data. The type of text field used should reflect the length of the content you expect the user to enter. The default text input is for short, one-line content, whereas text area is for longer, multi-line entries.
 
@@ -13,9 +14,7 @@ Text inputs enable users to enter free-form text data. The type of text field us
 
 - If a user can only enter an option from a predefined list then avoid using a free-form text input as it is likely to result in an error. Consider using a selection control such as a select dropdown, or radio button group instead.
 
-<Canvas>
-  <Story id="form-input--text" />
-</Canvas>
+<Canvas of={InputStories.Text}/>
 
 ### Props
 
@@ -52,17 +51,9 @@ Text inputs enable users to enter free-form text data. The type of text field us
 | settings  | Content that will be displayed in the dropdown menu. |
 
 ## Hass custom dropdown
+<Canvas of={InputStories.Search}/>
 
-<Canvas>
-  <Story id="form-input--search" />
-</Canvas>
-
-<Canvas>
-  <Story id="form-input--search-large" />
-</Canvas>
+<Canvas of={InputStories.SearchLarge}/>
 
 ## Password
-
-<Canvas>
-  <Story id="form-input--password" />
-</Canvas>
+<Canvas of={InputStories.Password}/>

package/src/components/Form/Label/Label.vue

@@ -65,6 +65,7 @@ export default {
   }
 
   &.has-info-text {
+    width: fit-content;
     display: flex;
     align-items: center;
   }

package/src/components/Form/Label/readme.mdx

@@ -1,15 +1,13 @@
 # IbLabel
 
-import { Story, Canvas } from "@storybook/addon-docs";
+import { Canvas } from "@storybook/addon-docs";
+import * as LabelStories from "./Label.stories";
 
 This component styles the default `<label>` component
 
 ### Default
 
-<Canvas>
-  <Story id="form-label--default" />
-</Canvas>
-
+<Canvas of={LabelStories.Default} />
 
 ### Props
 

package/src/components/Form/PhoneInput/readme.mdx

@@ -1,14 +1,13 @@
 # IbPhoneInput
 
-import { Story, Canvas } from "@storybook/addon-docs";
+import { Canvas } from "@storybook/addon-docs";
+import * as PhoneInputStories from "./PhoneInput.stories";
 
 This component provides a phone input field with country code selection functionality. It utilizes the VueTelInput library for the phone input and allows users to select a country from a dropdown menu.
 
 ### Default
 
-<Canvas>
-  <Story id="form-phone-input--default" />
-</Canvas>
+<Canvas of={PhoneInputStories.Default}/>
 
 ### Props
 
@@ -32,6 +31,4 @@ This component has no default events but has global events `countrySelectValue`
 
 ### Error state
 
-<Canvas>
-  <Story id="form-phone-input--error" />
-</Canvas>
+<Canvas of={PhoneInputStories.Error}/>

package/src/components/Form/Radio/readme.mdx

@@ -1,6 +1,7 @@
 # IbRadio
 
-import { Story, Canvas } from "@storybook/addon-docs";
+import { Canvas } from "@storybook/addon-docs";
+import * as RadioStories from "./Radio.stories";
 
 Radio buttons are used for mutually exclusive choices, not for multiple choices. Only one radio button can be selected at a time. When a user chooses a new item, the previous choice is automatically deselected.
 
@@ -20,9 +21,7 @@ If a user can select from multiple options, use [checkboxes](?path=/story/form-c
 
 ### Default
 
-<Canvas>
-  <Story id="form-radio--default" />
-</Canvas>
+<Canvas of={RadioStories.Default}/>
 
 ### Props
 

package/src/components/Form/TextEditor/readme.mdx

@@ -1,6 +1,7 @@
 # IbTextEditor
 
-import { Story, Canvas } from "@storybook/addon-docs";
+import { Canvas } from "@storybook/addon-docs";
+import * as TextEditorStories from "./TextEditor.stories";
 
 Text inputs enable users to enter free-form text data. The type of text field used should reflect the length of the content you expect the user to enter. The default text input is for short, one-line content, whereas text area is for longer, multi-line entries.
 
@@ -13,9 +14,7 @@ Text inputs enable users to enter free-form text data. The type of text field us
 
 - If a user can only enter an option from a predefined list then avoid using a free-form text input as it is likely to result in an error. Consider using a selection control such as a select dropdown, or radio button group instead.
 
-<Canvas>
-  <Story id="form-text-editor--default" />
-</Canvas>
+<Canvas of={TextEditorStories.Default}/>
 
 ### Props
 
@@ -47,13 +46,7 @@ Text inputs enable users to enter free-form text data. The type of text field us
 This component don't support slots
 
 ### Used in form group
-
-<Canvas>
-  <Story id="form-text-editor--width-form-group" />
-</Canvas>
+<Canvas of={TextEditorStories.WidthFormGroup}/>
 
 ### Error state
-
-<Canvas>
-  <Story id="form-text-editor--width-form-group" />
-</Canvas>
+<Canvas of={TextEditorStories.ErrorState}/>