@7pmlabs/design-system 0.1.8 → 0.2.0

package/dist/types/components/index.d.ts

@@ -1,29 +1,30 @@
-export { default as BToast } from './BToast/BToast.vue';
-export { default as BToastItem } from './BToast/BToastItem.vue';
 export { default as BButton } from './BButton.vue';
-export { default as BTextField } from './BTextField.vue';
-export { default as BCheckbox } from './BCheckbox.vue';
 export { default as BCarousel } from './BCarousel/BCarousel.vue';
 export { default as BCarouselItem } from './BCarousel/BCarouselItem.vue';
-export { default as BOtpField } from './BOtpField/BOtpField.vue';
-export { default as BRadio } from './BRadio.vue';
-export { default as BSelect } from './BSelect.vue';
-export { default as BMultiSelect } from './BMultiSelect.vue';
-export { default as BModal } from './BModal/BModal.vue';
-export { default as BModalHeader } from './BModal/BModalHeader.vue';
-export { default as BModalBody } from './BModal/BModalBody.vue';
-export { default as BModalFooter } from './BModal/BModalFooter.vue';
-export { default as BLoadingBar } from './BLoadingBar.vue';
-export { default as BLabel } from './BLabel.vue';
-export { default as BErrorMessage } from './BErrorMessage.vue';
+export { default as BCheckbox } from './BCheckbox.vue';
+export { default as BCollapse } from './BCollapse.vue';
+export { default as BDatePicker } from './BDatePicker.vue';
 export { default as BDropdown } from './BDropdown/BDropdown.vue';
 export { default as BDropdownContent } from './BDropdown/BDropdownContent.vue';
 export { default as BDropdownItem } from './BDropdown/BDropdownItem.vue';
+export { default as BErrorMessage } from './BErrorMessage.vue';
+export { default as BLabel } from './BLabel.vue';
+export { default as BLoadingBar } from './BLoadingBar.vue';
+export { default as BLoadingOverlay } from './BLoadingOverlay.vue';
+export { default as BModal } from './BModal/BModal.vue';
+export { default as BModalBody } from './BModal/BModalBody.vue';
+export { default as BModalFooter } from './BModal/BModalFooter.vue';
+export { default as BModalHeader } from './BModal/BModalHeader.vue';
+export { default as BMultiSelect } from './BMultiSelect.vue';
+export { default as BOtpField } from './BOtpField/BOtpField.vue';
+export { default as BOverlay } from './BOverlay.vue';
 export { default as BPagination } from './BPagination.vue';
-export { default as BCollapse } from './BCollapse.vue';
-export { default as BTabs } from './BTabs/BTabs.vue';
+export { default as BRadio } from './BRadio.vue';
+export { default as BSelect } from './BSelect.vue';
 export { default as BTab } from './BTabs/BTab.vue';
-export { default as BOverlay } from './BOverlay.vue';
-export { default as BLoadingOverlay } from './BLoadingOverlay.vue';
-export { default as BDatePicker } from './BDatePicker.vue';
+export { default as BTabs } from './BTabs/BTabs.vue';
 export { default as BTextarea } from './BTextarea.vue';
+export { default as BTextField } from './BTextField.vue';
+export { default as BToast } from './BToast/BToast.vue';
+export { default as BToastItem } from './BToast/BToastItem.vue';
+export { default as BTooltip } from './BTooltip.vue';

package/dist/types/constants/Enums.d.ts

@@ -56,9 +56,7 @@ export declare enum BRadioSize {
  */
 export declare enum BTooltipPosition {
     Top = "top",
-    Right = "right",
-    Bottom = "bottom",
-    Left = "left"
+    Bottom = "bottom"
 }
 export declare enum BTooltipOpenEvent {
     Click = "click",
@@ -98,3 +96,11 @@ export declare enum BPaginationSize {
     Small = "sm",
     Medium = "md"
 }
+/**
+ * BDatePicker
+ */
+export declare enum BDatePickerView {
+    Days = "days",
+    Months = "months",
+    Years = "years"
+}

package/dist/types/index.d.ts

@@ -1,9 +1,9 @@
-export * from './types';
 export * from './components';
-export * from './composables/Validation';
 export * from './composables/Date';
+export * from './composables/Validation';
 export * from './constants/Common';
 export * from './constants/Enums';
 export * from './helpers/ComponentHelper';
-import './assets/styles/main.scss';
 export { default as default } from './plugin';
+export * from './types';
+import './assets/styles/main.scss';

package/dist/types/types/components/BCarousel.d.ts

@@ -0,0 +1,8 @@
+export interface BCarouselProps {
+    modelValue?: number;
+    autoplay?: boolean;
+    duration?: number;
+    navigation?: boolean;
+    pagination?: boolean;
+    continuous?: boolean;
+}

package/dist/types/types/components/BDatePicker.d.ts

@@ -0,0 +1,19 @@
+import type { ValidationRule } from '@/composables/Validation';
+import { BDatePickerView } from '@/constants/Enums';
+export interface BDatePickerProps {
+    inputId?: string;
+    modelValue: any;
+    label?: string;
+    validationRules?: ValidationRule[];
+    placeholder?: string;
+    required?: boolean;
+    requiredErrorMessage?: string;
+    disabled?: boolean;
+    inputCssClass?: string;
+    minDate?: any;
+    maxDate?: any;
+    showHintToday?: boolean;
+    view?: BDatePickerView;
+    hideDetails?: boolean;
+    position?: string;
+}

package/dist/types/types/components/BDropdown.d.ts

@@ -0,0 +1,11 @@
+export interface BDropdownProps {
+    inputId?: string;
+    modelValue?: boolean;
+    label?: string;
+    text?: string;
+    toggleCssClass?: string;
+    menuCssClass?: string;
+    noCloseOnClickOutside?: boolean;
+    noCloseOnEsc?: boolean;
+    menuFixed?: boolean;
+}

package/dist/types/types/components/BErrorMessage.d.ts

@@ -0,0 +1,4 @@
+export interface BErrorMessageProps {
+    errorMessage?: string | ErrorMessageFunction;
+}
+export declare type ErrorMessageFunction = () => string;

package/dist/types/types/components/BLabel.d.ts

@@ -0,0 +1,5 @@
+export interface BLabelProps {
+    id?: string;
+    label?: string;
+    required?: boolean;
+}

package/dist/types/types/components/BLoadingBar.d.ts

@@ -0,0 +1,6 @@
+export interface BLoadingBarProps {
+    loading: boolean;
+    height?: string;
+    borderRadius?: string;
+    absolute?: boolean;
+}

package/dist/types/types/components/BLoadingOverlay.d.ts

@@ -0,0 +1,6 @@
+import { BLoadingOverlaySpinnerSize } from '@/constants/Enums';
+export interface BLoadingOverlayProps {
+    loading: boolean;
+    absolute?: boolean;
+    spinnerSize?: `${BLoadingOverlaySpinnerSize}`;
+}

package/dist/types/types/components/BModal.d.ts

@@ -0,0 +1,7 @@
+import type { BModalSize } from '@/constants/Enums';
+export interface BModalProps {
+    modelValue: boolean;
+    size?: `${BModalSize}`;
+    fullscreen?: boolean;
+    persistent?: boolean;
+}

package/dist/types/types/components/BMultiSelect.d.ts

@@ -0,0 +1,18 @@
+import type { ValidationRule } from '@/composables/Validation';
+import type { DisplayItem } from '@/types';
+export interface BMultiSelectProps {
+    inputId?: string;
+    modelValue: Array<string | number>;
+    label?: string;
+    items: DisplayItem[];
+    disabled?: boolean;
+    placeholder?: string;
+    valueCssClass?: string;
+    menuCssClass?: string;
+    validationRules?: ValidationRule[];
+    required?: boolean;
+    requiredErrorMessage?: string;
+    hideDetails?: boolean;
+    showSelectedItemCount?: boolean;
+    allowInput?: boolean;
+}

package/dist/types/types/components/BOtpField.d.ts

@@ -0,0 +1,13 @@
+import type { ValidationRule } from '@/composables/Validation';
+export interface BOtpFieldProps {
+    inputId?: string;
+    modelValue?: string;
+    numInputs?: number;
+    focusIndex?: number;
+    disabled?: boolean;
+    inputCssClass?: string | {};
+    validationRules?: ValidationRule[];
+    required?: boolean;
+    requiredErrorMessage?: string;
+    hideDetails?: boolean;
+}

package/dist/types/types/components/BPagination.d.ts

@@ -0,0 +1,8 @@
+import { BPaginationSize } from '@/constants/Enums';
+export interface BPaginationProps {
+    modelValue: number;
+    numberOfPages: number;
+    border?: boolean;
+    transparent?: boolean;
+    size?: `${BPaginationSize}`;
+}

package/dist/types/types/components/BRadio.d.ts

@@ -0,0 +1,13 @@
+import { ValidationRule } from '@/composables/Validation';
+export interface BRadioProps {
+    inputId?: string;
+    modelValue?: string | number | boolean;
+    inputName?: string;
+    label?: string;
+    disabled?: boolean;
+    labelCssClass?: string;
+    hideDetails?: boolean;
+    validationRules?: ValidationRule[];
+    required?: boolean;
+    requiredErrorMessage?: string;
+}

package/dist/types/types/components/BSelect.d.ts

@@ -0,0 +1,17 @@
+import type { ValidationRule } from '@/composables/Validation';
+import type { DisplayItem } from '@/types';
+export interface BSelectProps {
+    inputId?: string;
+    modelValue: string | number;
+    label?: string;
+    items: DisplayItem[];
+    disabled?: boolean;
+    placeholder?: string;
+    valueCssClass?: string;
+    menuCssClass?: string;
+    validationRules?: ValidationRule[];
+    required?: boolean;
+    requiredErrorMessage?: string;
+    hideDetails?: boolean;
+    allowInput?: boolean;
+}

package/dist/types/types/components/BTabs.d.ts

@@ -1,3 +1,8 @@
+export interface BTabsProps {
+    headers: BTabsHeader[];
+    modelValue?: number;
+    headerCssClass?: string;
+}
 export interface BTabsHeader {
     text: string;
     disabled?: boolean;

package/dist/types/types/components/BTextField.d.ts

@@ -0,0 +1,22 @@
+import type { ValidationRule } from '@/composables/Validation';
+export interface BTextFieldProps {
+    inputId?: string;
+    inputCssClass?: string;
+    validationRules?: ValidationRule[];
+    modelValue: string | number;
+    label?: string;
+    prependIcon?: string;
+    hidePrependIcon?: boolean;
+    appendIcon?: string;
+    hideAppendIcon?: boolean;
+    placeholder?: string;
+    autocomplete?: boolean;
+    disabled?: boolean;
+    readonly?: boolean;
+    type?: string;
+    required?: boolean;
+    requiredErrorMessage?: string;
+    hideDetails?: boolean;
+    keyPressFn?: any;
+    inputmode?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
+}

package/dist/types/types/components/BTextarea.d.ts

@@ -0,0 +1,16 @@
+import type { ValidationRule } from '@/composables/Validation';
+export interface BTextareaProps {
+    inputId?: string;
+    inputCssClass?: string;
+    modelValue: string;
+    validationRules?: ValidationRule[];
+    label?: string;
+    placeholder?: string;
+    autocomplete?: boolean;
+    disabled?: boolean;
+    readonly?: boolean;
+    rows?: number;
+    required?: boolean;
+    requiredErrorMessage?: string;
+    hideDetails?: boolean;
+}

package/dist/types/types/components/BTooltip.d.ts

@@ -0,0 +1,6 @@
+import { BTooltipOpenEvent, BTooltipPosition } from '@/constants/Enums';
+export interface BTooltipProps {
+    modelValue?: boolean;
+    position?: `${BTooltipPosition}`;
+    openEvent?: `${BTooltipOpenEvent}`;
+}

package/dist/types/types/index.d.ts

@@ -1,2 +1,19 @@
 export * from './Common';
+export * from './components/BCarousel';
+export * from './components/BDatePicker';
+export * from './components/BDropdown';
+export * from './components/BErrorMessage';
+export * from './components/BLabel';
+export * from './components/BLoadingBar';
+export * from './components/BLoadingOverlay';
+export * from './components/BModal';
+export * from './components/BMultiSelect';
+export * from './components/BOtpField';
+export * from './components/BPagination';
+export * from './components/BRadio';
+export * from './components/BSelect';
+export * from './components/BTabs';
+export * from './components/BTextarea';
+export * from './components/BTextField';
 export * from './components/BToast';
+export * from './components/BTooltip';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@7pmlabs/design-system",
-  "version": "0.1.8",
+  "version": "0.2.0",
   "sideEffects": [
     "style.css"
   ],
@@ -33,12 +33,16 @@
     "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
     "eslint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
     "lint": "npm run eslint; npm run type-check",
-    "format": "prettier .  --write"
+    "format": "prettier .  --write",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "build-storybook:preview": "npx http-server ./storybook-static",
+    "chromatic": "npx chromatic --project-token=chpt_eab274113efb448 --auto-accept-changes"
   },
   "dependencies": {
-    "7pmlabs-icons": "^0.1.2",
     "@babel/core": "^7.20.5",
     "@vueuse/core": "^9.12.0",
+    "7pmlabs-icons": "^0.1.2",
     "air-datepicker": "3.3.0",
     "lodash-es": "^4.17.21",
     "moment-mini": "^2.29.4",
@@ -49,6 +53,13 @@
   "devDependencies": {
     "@intlify/eslint-plugin-vue-i18n": "^2.0.0",
     "@rushstack/eslint-patch": "^1.1.4",
+    "@storybook/addon-essentials": "^7.3.2",
+    "@storybook/addon-interactions": "^7.3.2",
+    "@storybook/addon-links": "^7.3.2",
+    "@storybook/blocks": "^7.3.2",
+    "@storybook/testing-library": "^0.2.0",
+    "@storybook/vue3": "^7.3.2",
+    "@storybook/vue3-vite": "^7.3.2",
     "@types/jsdom": "^20.0.0",
     "@types/lodash-es": "^4.17.7",
     "@types/node": "^16.18.4",
@@ -56,19 +67,25 @@
     "@typescript-eslint/eslint-plugin": "^5.42.0",
     "@typescript-eslint/parser": "^5.42.0",
     "@vitejs/plugin-vue": "^4.2.3",
+    "@volar/vue-typescript": "^1.6.5",
     "@vue/eslint-config-prettier": "^7.0.0",
     "@vue/eslint-config-typescript": "^11.0.0",
     "@vue/test-utils": "^2.1.0",
     "@vue/tsconfig": "^0.1.3",
     "autoprefixer": "^10.4.13",
     "eslint": "^8.22.0",
+    "eslint-plugin-storybook": "^0.6.13",
     "eslint-plugin-vue": "^9.3.0",
     "jsdom": "^20.0.1",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.19",
-    "prettier": "^2.7.1",
-    "prettier-plugin-tailwindcss": "^0.2.5",
+    "prettier": "^2.8.8",
+    "prettier-plugin-organize-imports": "^3.2.3",
+    "prettier-plugin-tailwindcss": "^0.4.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "sass": "^1.56.0",
+    "storybook": "^7.3.2",
     "tailwindcss": "^3.3.1",
     "typescript": "~4.7.4",
     "vite": "^4.3.5",