beeple-toolkit 0.1.0 → 1.0.1

package/dist/components/types.d.ts

@@ -0,0 +1,295 @@
+import type { ButtonType, ButtonSize, EvaIconName, Size, ProgressBarSize } from './constants';
+import type { DefineComponent } from 'vue';
+import type { DatePickerLocale } from './DatePicker/locales';
+export interface ButtonProps {
+    label?: string;
+    type?: ButtonType;
+    size?: ButtonSize;
+    iconVariant?: 'leading' | 'text' | 'trailing';
+    shape?: 'square' | 'round' | 'roundBorder';
+    disabled?: boolean;
+    isLoading?: boolean;
+    isActive?: boolean;
+    href?: string;
+}
+export interface IconProps {
+    icon?: EvaIconName | string;
+    color?: string;
+    size?: string | number;
+    customSvgComponent?: DefineComponent;
+}
+export interface CheckboxInputProps {
+    id?: string;
+    label?: string;
+    checked?: boolean;
+    disabled?: boolean;
+}
+export interface RadioInputProps {
+    id?: string;
+    name: string;
+    value: string | number;
+    label?: string;
+    checked?: boolean;
+    disabled?: boolean;
+}
+export interface InputProps {
+    id?: string;
+    label?: string;
+    type?: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search';
+    modelValue?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    isError?: boolean;
+    errorMessage?: string;
+    clearable?: boolean;
+    size?: Size;
+    min?: number;
+    max?: number;
+    step?: number;
+}
+export interface SwitchProps {
+    id?: string;
+    label?: string;
+    checked?: boolean;
+    disabled?: boolean;
+    size?: 'small' | 'medium';
+    labelPosition?: 'left' | 'right';
+}
+export interface TitleProps {
+    level?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+}
+export interface SubtitleProps {
+    size?: 'large' | 'small';
+}
+export interface TextProps {
+    size?: 'default' | 'small' | 'x-small';
+    tag?: 'p' | 'span' | 'div';
+    fontStyle?: 'normal' | 'italic' | 'oblique';
+    fontWeight?: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 'normal' | 'bold' | 'lighter' | 'bolder';
+}
+export interface DropDownOption {
+    label: string;
+    value: unknown;
+    disabled?: boolean;
+    icon?: string;
+    leadingIcon?: string;
+    trailingIcon?: string;
+    clickable?: boolean;
+    onClick?: () => void;
+    avatar?: {
+        photo?: string;
+        fullName?: string;
+        alt?: string;
+    };
+}
+export interface DropDownProps {
+    modelValue?: unknown | unknown[];
+    options: Array<string | number | DropDownOption | Record<string, unknown>>;
+    placeholder?: string;
+    label?: string;
+    isMulti?: boolean;
+    searchable?: boolean;
+    searchPlaceholder?: string;
+    disabled?: boolean;
+    clearable?: boolean;
+    size?: 'x-small' | 'small' | 'medium' | 'large';
+    optionLabel?: string;
+    optionValue?: string;
+    noOptionsText?: string;
+    maxHeight?: string;
+    isError?: boolean;
+    errorMessage?: string;
+    selectAllText?: string;
+    clearAllText?: string;
+}
+export interface AvatarProps {
+    user?: {
+        photo?: string;
+        fullName?: string;
+    };
+    alt?: string;
+    size?: 'xxx-small' | 'xx-small' | 'x-small' | 'small' | 'medium' | 'large';
+    withIcon?: string;
+    withColor?: string;
+}
+export interface FilterButtonProps {
+    modelValue?: unknown | unknown[];
+    options: Array<string | number | DropDownOption | Record<string, unknown>>;
+    placeholder?: string;
+    filterName?: string;
+    isMulti?: boolean;
+    searchable?: boolean;
+    searchPlaceholder?: string;
+    disabled?: boolean;
+    clearable?: boolean;
+    size?: ButtonSize;
+    optionLabel?: string;
+    optionValue?: string;
+    noOptionsText?: string;
+    maxHeight?: string;
+    buttonType?: ButtonType;
+    selectAllText?: string;
+    clearAllText?: string;
+}
+export interface LabelProps {
+    text?: string;
+    size?: 'small' | 'medium' | 'large';
+    color?: 'primary' | 'primary-faded' | 'success' | 'success-faded' | 'warning' | 'warning-faded' | 'error' | 'error-faded' | 'gray' | 'gray-faded' | 'black';
+    leadingIcon?: string;
+    trailingIcon?: string;
+}
+export interface TooltipProps {
+    title?: string;
+    position?: 'top-left' | 'top-middle' | 'top-right' | 'bottom-left' | 'bottom-middle' | 'bottom-right' | 'left-top' | 'left-middle' | 'left-bottom' | 'right-top' | 'right-middle' | 'right-bottom';
+    delay?: number;
+    maxWidth?: number;
+}
+export interface ContextCardProps {
+    title?: string;
+    position?: 'top-left' | 'top-middle' | 'top-right' | 'bottom-left' | 'bottom-middle' | 'bottom-right' | 'left-top' | 'left-middle' | 'left-bottom' | 'right-top' | 'right-middle' | 'right-bottom';
+    delay?: number;
+    color?: 'light' | 'dark';
+    maxWidth?: number;
+}
+export interface StatusDotProps {
+    color?: 'success' | 'warning' | 'danger' | 'primary';
+    label?: string;
+    variant?: 'label-left' | 'label-right' | 'dot-only';
+    size?: 'small' | 'medium';
+    isShadow?: boolean;
+}
+export interface BreadcrumbItem {
+    label: string;
+    href: string;
+}
+export interface BreadcrumbsProps {
+    items: BreadcrumbItem[];
+}
+export type DatePickerVariant = 'single' | 'single-time' | 'single-time-range' | 'range' | 'range-time';
+export interface DatePickerTranslations {
+    time?: string;
+    startTime?: string;
+    endTime?: string;
+}
+export interface DatePickerProps {
+    variant?: DatePickerVariant;
+    modelValue?: Date | {
+        start: Date;
+        end: Date;
+    } | {
+        date: Date;
+        startTime: Date;
+        endTime: Date;
+    } | null;
+    placeholder?: string;
+    isExtended?: boolean;
+    minDate?: Date;
+    maxDate?: Date;
+    locale?: DatePickerLocale;
+    translations?: DatePickerTranslations;
+    timezone?: string;
+}
+export interface MenuProps {
+    items: DropDownOption[];
+    position?: 'top' | 'bottom' | 'left' | 'right';
+}
+export interface TextareaProps {
+    id?: string;
+    label?: string;
+    modelValue?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    isError?: boolean;
+    errorMessage?: string;
+    minRows?: number;
+    maxRows?: number;
+}
+export interface TimeInputProps {
+    id?: string;
+    label?: string;
+    modelValue?: string;
+    disabled?: boolean;
+    isError?: boolean;
+    errorMessage?: string;
+    size?: 'x-small' | 'small' | 'medium' | 'large';
+    hoursPlaceholder?: string;
+    minutesPlaceholder?: string;
+    use24Hour?: boolean;
+}
+export interface KeyboardInputProps {
+    value?: string;
+    theme?: 'light' | 'dark';
+    size?: 'small' | 'medium';
+    withCtrl?: boolean;
+    withShift?: boolean;
+    withAlt?: boolean;
+    withOption?: boolean;
+}
+export interface SliderProps {
+    variants?: 'single' | 'double';
+    minValue?: number;
+    maxValue?: number;
+    modelValue?: number | [number, number];
+    step?: number;
+    disabled?: boolean;
+    leftLabel?: string;
+    middleLabel?: string;
+    rightLabel?: string;
+}
+export interface ProgressBarProps {
+    size?: ProgressBarSize;
+    open: number;
+    confirmed?: number;
+    unconfirmed?: number;
+}
+export interface ModalProps {
+    modelValue?: boolean;
+    size?: 'ultra-small' | 'small' | 'medium' | 'large';
+    showCloseButton?: boolean;
+    titleAlign?: 'left' | 'center';
+}
+export type TeamCardColor = 'orange' | 'red' | 'olive-green' | 'leaf-green' | 'forest-green' | 'yellow' | 'teal' | 'turquoise' | 'blue' | 'lagoon' | 'violet' | 'old-rose' | 'petal-rose' | 'azalea-rose';
+export interface TeamCardRole {
+    name: string;
+}
+export type TeamCardUserStatus = 'confirmed' | 'pending' | 'draft' | 'ai-scheduled';
+export interface TeamCardUser {
+    fullName: string;
+    photo?: string;
+    statusColor?: string;
+    statusLabel?: string;
+    userStatus?: TeamCardUserStatus;
+}
+export interface TeamCardLabel {
+    text: string;
+    color?: string;
+    leadingIcon?: string;
+    trailingIcon?: string;
+    workers?: TeamCardUser[];
+}
+export type TeamCardStatus = 'published' | 'unpublished';
+export interface TeamCardTranslations {
+    open?: string;
+    published?: string;
+    notPublished?: string;
+    addCollaborator?: string;
+    more?: string;
+}
+export interface TeamCardProps {
+    color?: TeamCardColor;
+    labels?: TeamCardLabel[];
+    status?: TeamCardStatus;
+    progressBar?: {
+        open: number;
+        confirmed?: number;
+        unconfirmed?: number;
+        size?: 'small' | 'medium';
+    };
+    shiftSummary?: string;
+    teamName?: string;
+    roles?: TeamCardRole[];
+    users?: TeamCardUser[];
+    selected?: boolean;
+    translations?: TeamCardTranslations;
+}
+export type { DatePickerLocale } from './DatePicker/locales';

package/dist/main.d.ts

@@ -1 +1,2 @@
 import './style.css';
+import './styles/variables.css';

package/dist/stores/index.d.ts

@@ -0,0 +1,2 @@
+export { useToastStore } from './toast';
+export type { Toast, ToastType, ToastOptions } from './toast';

package/dist/stores/toast.d.ts

@@ -0,0 +1,142 @@
+export type ToastType = 'success' | 'error' | 'warning' | 'info';
+export interface Toast {
+    id: string;
+    title?: string;
+    message?: string;
+    type: ToastType;
+    duration: number;
+    persistent?: boolean;
+    withIcon?: boolean;
+    allowHtml?: boolean;
+    actions?: Array<{
+        label: string;
+        action: () => void;
+        style?: 'primary' | 'secondary';
+    }>;
+}
+export interface ToastOptions {
+    title?: string;
+    message?: string;
+    type?: ToastType;
+    duration?: number;
+    persistent?: boolean;
+    withIcon?: boolean;
+    allowHtml?: boolean;
+    actions?: Array<{
+        label: string;
+        action: () => void;
+        style?: 'primary' | 'secondary';
+    }>;
+}
+export declare const useToastStore: import("pinia").StoreDefinition<"toast", Pick<{
+    toasts: import("vue").Ref<{
+        id: string;
+        title?: string | undefined;
+        message?: string | undefined;
+        type: ToastType;
+        duration: number;
+        persistent?: boolean | undefined;
+        withIcon?: boolean | undefined;
+        allowHtml?: boolean | undefined;
+        actions?: {
+            label: string;
+            action: () => void;
+            style?: "primary" | "secondary" | undefined;
+        }[] | undefined;
+    }[], Toast[] | {
+        id: string;
+        title?: string | undefined;
+        message?: string | undefined;
+        type: ToastType;
+        duration: number;
+        persistent?: boolean | undefined;
+        withIcon?: boolean | undefined;
+        allowHtml?: boolean | undefined;
+        actions?: {
+            label: string;
+            action: () => void;
+            style?: "primary" | "secondary" | undefined;
+        }[] | undefined;
+    }[]>;
+    addToast: (options: ToastOptions) => string;
+    removeToast: (id: string) => void;
+    clearToasts: () => void;
+    success: (title: string, message?: string, options?: Partial<ToastOptions>) => string;
+    error: (title: string, message?: string, options?: Partial<ToastOptions>) => string;
+    warning: (title: string, message?: string, options?: Partial<ToastOptions>) => string;
+    info: (title: string, message?: string, options?: Partial<ToastOptions>) => string;
+}, "toasts">, Pick<{
+    toasts: import("vue").Ref<{
+        id: string;
+        title?: string | undefined;
+        message?: string | undefined;
+        type: ToastType;
+        duration: number;
+        persistent?: boolean | undefined;
+        withIcon?: boolean | undefined;
+        allowHtml?: boolean | undefined;
+        actions?: {
+            label: string;
+            action: () => void;
+            style?: "primary" | "secondary" | undefined;
+        }[] | undefined;
+    }[], Toast[] | {
+        id: string;
+        title?: string | undefined;
+        message?: string | undefined;
+        type: ToastType;
+        duration: number;
+        persistent?: boolean | undefined;
+        withIcon?: boolean | undefined;
+        allowHtml?: boolean | undefined;
+        actions?: {
+            label: string;
+            action: () => void;
+            style?: "primary" | "secondary" | undefined;
+        }[] | undefined;
+    }[]>;
+    addToast: (options: ToastOptions) => string;
+    removeToast: (id: string) => void;
+    clearToasts: () => void;
+    success: (title: string, message?: string, options?: Partial<ToastOptions>) => string;
+    error: (title: string, message?: string, options?: Partial<ToastOptions>) => string;
+    warning: (title: string, message?: string, options?: Partial<ToastOptions>) => string;
+    info: (title: string, message?: string, options?: Partial<ToastOptions>) => string;
+}, never>, Pick<{
+    toasts: import("vue").Ref<{
+        id: string;
+        title?: string | undefined;
+        message?: string | undefined;
+        type: ToastType;
+        duration: number;
+        persistent?: boolean | undefined;
+        withIcon?: boolean | undefined;
+        allowHtml?: boolean | undefined;
+        actions?: {
+            label: string;
+            action: () => void;
+            style?: "primary" | "secondary" | undefined;
+        }[] | undefined;
+    }[], Toast[] | {
+        id: string;
+        title?: string | undefined;
+        message?: string | undefined;
+        type: ToastType;
+        duration: number;
+        persistent?: boolean | undefined;
+        withIcon?: boolean | undefined;
+        allowHtml?: boolean | undefined;
+        actions?: {
+            label: string;
+            action: () => void;
+            style?: "primary" | "secondary" | undefined;
+        }[] | undefined;
+    }[]>;
+    addToast: (options: ToastOptions) => string;
+    removeToast: (id: string) => void;
+    clearToasts: () => void;
+    success: (title: string, message?: string, options?: Partial<ToastOptions>) => string;
+    error: (title: string, message?: string, options?: Partial<ToastOptions>) => string;
+    warning: (title: string, message?: string, options?: Partial<ToastOptions>) => string;
+    info: (title: string, message?: string, options?: Partial<ToastOptions>) => string;
+}, "success" | "warning" | "error" | "info" | "addToast" | "removeToast" | "clearToasts">>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "beeple-toolkit",
-  "version": "0.1.0",
+  "version": "1.0.1",
   "description": "Vue 3 component library beeple-toolkit",
   "keywords": [
     "vue",
@@ -18,13 +18,15 @@
       "types": "./dist/components/index.d.ts",
       "import": "./dist/beeple-toolkit.es.js",
       "require": "./dist/beeple-toolkit.umd.js"
-    }
+    },
+    "./dist/beeple-toolkit.css": "./dist/beeple-toolkit.css"
   },
   "files": [
     "dist",
     "README.md"
   ],
   "scripts": {
+    "dev": "vite --port 4000",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "build": "rimraf dist && vite build",
@@ -32,30 +34,48 @@
     "prepublishOnly": "npm run build && npm run build:types",
     "test": "vitest run",
     "test:watch": "vitest",
-    "test:ui": "vitest --ui"
+    "test:ui": "vitest --ui",
+    "lint": "eslint . --ext .vue,.js,.ts",
+    "lint:fix": "eslint . --ext .vue,.js,.ts --fix",
+    "format": "prettier --write .",
+    "format:check": "prettier --check ."
   },
-  "peerDependencies": {
-    "vue": "^3.5.0"
+  "dependencies": {
+    "date-fns": "^4.1.0",
+    "eva-icons": "^1.1.3",
+    "pinia": "^3.0.3",
+    "vue": "^3.5.22"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^4.1.1",
-    "@storybook/addon-a11y": "^9.1.8",
-    "@storybook/addon-docs": "^9.1.8",
-    "@storybook/addon-vitest": "^9.1.8",
-    "@storybook/vue3-vite": "^9.1.8",
+    "@chromatic-com/storybook": "^5.0.1",
+    "@eslint/js": "^9.37.0",
+    "@storybook/addon-a11y": "^10.2.15",
+    "@storybook/addon-docs": "^10.2.15",
+    "@storybook/addon-vitest": "^10.2.15",
+    "@storybook/vue3-vite": "^10.2.15",
+    "@types/eslint__js": "^8.42.3",
     "@types/node": "^24.5.2",
     "@vitejs/plugin-vue": "^6.0.1",
     "@vitest/browser": "^3.2.4",
     "@vitest/coverage-v8": "^3.2.4",
+    "@vue/eslint-config-typescript": "^14.6.0",
     "@vue/test-utils": "^2.4.6",
     "@vue/tsconfig": "^0.8.1",
-    "happy-dom": "^19.0.2",
+    "eslint": "^9.37.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-prettier": "^5.5.4",
+    "eslint-plugin-storybook": "^10.2.15",
+    "eslint-plugin-vue": "^10.5.0",
+    "happy-dom": "^20.0.0",
     "jsdom": "^27.0.0",
     "playwright": "^1.55.1",
+    "prettier": "^3.6.2",
     "rimraf": "^6.0.1",
-    "storybook": "^9.1.8",
+    "storybook": "^10.2.15",
     "typescript": "~5.8.3",
+    "typescript-eslint": "^8.46.0",
     "vite": "^7.1.7",
+    "vite-svg-loader": "^5.1.0",
     "vitest": "^3.2.4",
     "vue": "^3.5.22",
     "vue-tsc": "^3.0.7"
@@ -65,4 +85,4 @@
     "url": "git@git.beeple.eu:beeple/beeple-toolkit.git"
   },
   "license": "ISC"
-}
+}

package/dist/components/Header/Header.vue.d.ts

@@ -1,17 +0,0 @@
-import './header.css';
-type __VLS_Props = {
-    user: {
-        name: string;
-    } | null;
-};
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    createAccount: () => any;
-    login: () => any;
-    logout: () => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onCreateAccount?: (() => any) | undefined;
-    onLogin?: (() => any) | undefined;
-    onLogout?: (() => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;

package/dist/vite.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>