@solfacil/girassol 0.1.0 → 0.1.5

package/dist/types/components/forms/textfield/Textfield.vue.d.ts

@@ -25,8 +25,8 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
 }>>> & {
     "onUpdate:modelValue"?: ((event: string) => any) | undefined;
 }, {
-    label: string;
     modelValue: string;
+    label: string;
 }>;
 export default _default;
 declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;

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

@@ -1,3 +1,3 @@
 import SolTextfield from './Textfield.vue';
 import SolTextfieldPassword from './TextfieldPassword.vue';
-export { SolTextfield, SolTextfieldPassword };
+export { SolTextfield, SolTextfieldPassword, };

package/dist/types/components/forms/textfield/textfield-password.spec.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/types/components/forms/textfield/textfield.spec.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/types/composables/use-toast/Toast.vue.d.ts

@@ -0,0 +1,66 @@
+import type { Position, ToastType } from './types';
+declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    id: string | number;
+    type: ToastType;
+    visible?: boolean | undefined;
+    title: string;
+    description?: string | undefined;
+    timeout: number;
+    hideProgressBar?: boolean | undefined;
+    showIcon?: boolean | undefined;
+    offset: number;
+    onClose?: (() => void) | undefined;
+    onCloseHandler?: (() => void) | undefined;
+    position?: Position | undefined;
+}>, {
+    type: ToastType | undefined;
+    delay: number | undefined;
+    showIcon: boolean | undefined;
+    position: Position | undefined;
+    hideProgressBar: boolean | undefined;
+    offset: number;
+    visible: boolean;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    id: string | number;
+    type: ToastType;
+    visible?: boolean | undefined;
+    title: string;
+    description?: string | undefined;
+    timeout: number;
+    hideProgressBar?: boolean | undefined;
+    showIcon?: boolean | undefined;
+    offset: number;
+    onClose?: (() => void) | undefined;
+    onCloseHandler?: (() => void) | undefined;
+    position?: Position | undefined;
+}>, {
+    type: ToastType | undefined;
+    delay: number | undefined;
+    showIcon: boolean | undefined;
+    position: Position | undefined;
+    hideProgressBar: boolean | undefined;
+    offset: number;
+    visible: boolean;
+}>>>, {
+    type: ToastType;
+    offset: number;
+    position: Position;
+    visible: boolean;
+    hideProgressBar: boolean;
+    showIcon: boolean;
+}>;
+export default _default;
+declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+declare type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+declare type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? P[K] & {
+        default: D[K];
+    } : P[K];
+};

package/dist/types/composables/use-toast/index.d.ts

@@ -0,0 +1,9 @@
+import type { Position, ToastOptions, ToastContent } from './types';
+export declare function useToast(): {
+    createToast: (content: string | ToastContent, options?: ToastOptions | undefined) => {
+        close: () => void;
+    };
+    clearAllToasts: () => void;
+};
+declare function close(id: number, position: Position): void;
+export {};

package/dist/types/composables/use-toast/types.d.ts

@@ -0,0 +1,23 @@
+import type { VNode } from 'vue';
+export declare type ToastType = 'info' | 'danger' | 'warning' | 'success';
+export declare type Position = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'top-center' | 'bottom-center';
+export interface ToastContent {
+    title: string;
+    description?: string;
+}
+export interface ToastOptions {
+    type?: ToastType;
+    timeout?: number;
+    position?: Position;
+    showIcon?: boolean;
+    showCloseButton?: boolean;
+    hideProgressBar?: boolean;
+    onClose?: () => void;
+    showOneToast?: boolean;
+}
+export interface ToastObject {
+    toastVNode: VNode;
+    container: HTMLDivElement;
+}
+export declare const TOAST_GAP = 12;
+export declare const DEFAULT_OPTIONS: ToastOptions;

package/dist/types/composables/use-toast/use-toast.spec.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/types/composables/use-toast/useTimer.d.ts

@@ -0,0 +1,9 @@
+import type { Ref } from 'vue';
+interface TimerReturn {
+    start: () => void;
+    stop: () => void;
+    clear: () => void;
+    progress: Ref<number>;
+}
+export declare function useTimer(callback: () => void | string, delay: number): TimerReturn;
+export {};

package/dist/types/composables/use-toast/useTransition.d.ts

@@ -0,0 +1,57 @@
+import type { Position } from "./types";
+export declare function usePosition(fn: () => ({
+    position: Position;
+    offset: number;
+})): {
+    stylePosition: import("vue").ComputedRef<{
+        left: string;
+        top: string;
+        bottom?: undefined;
+        right?: undefined;
+        marginRight?: undefined;
+        marginLeft?: undefined;
+    } | {
+        left: string;
+        bottom: string;
+        top?: undefined;
+        right?: undefined;
+        marginRight?: undefined;
+        marginLeft?: undefined;
+    } | {
+        right: string;
+        bottom: string;
+        left?: undefined;
+        top?: undefined;
+        marginRight?: undefined;
+        marginLeft?: undefined;
+    } | {
+        top: string;
+        left: string;
+        right: string;
+        marginRight: string;
+        marginLeft: string;
+        bottom?: undefined;
+    } | {
+        bottom: string;
+        left: string;
+        right: string;
+        marginRight: string;
+        marginLeft: string;
+        top?: undefined;
+    } | {
+        right: string;
+        top: string;
+        left?: undefined;
+        bottom?: undefined;
+        marginRight?: undefined;
+        marginLeft?: undefined;
+    }>;
+};
+export declare enum Transition {
+    'top-left' = "bounce-left",
+    'top-right' = "bounce-right",
+    'top-center' = "bounce-down",
+    'bottom-left' = "bounce-left",
+    'bottom-center' = "bounce-up",
+    'bottom-right' = "bounce-right"
+}

package/dist/types/index.d.ts

@@ -1,13 +1,17 @@
-import { App } from 'vue';
+import type { App } from 'vue';
 import { SolButton } from './components/forms/button';
 import { SolInput } from './components/forms/input';
 import { SolTextfield, SolTextfieldPassword } from './components/forms/textfield';
+import { SolTextarea } from './components/forms/textarea';
 import { SolRadio, SolRadioGroup } from './components/forms/radio';
 import { SolCheckbox, SolCheckboxGroup } from './components/forms/checkbox';
+import { SolSwitch } from './components/forms/switch';
+import { SolDropdown } from './components/dropdown/';
 import 'virtual:windi-base.css';
 import 'virtual:windi-components.css';
 import 'virtual:windi-utilities.css';
 import '@/assets/style.css';
+export { useToast } from './composables/use-toast';
 export declare function install(App: App): void;
-export { SolButton, SolInput, SolTextfield, SolTextfieldPassword, SolRadio, SolRadioGroup, SolCheckbox, SolCheckboxGroup };
+export { SolButton, SolInput, SolTextarea, SolTextfield, SolTextfieldPassword, SolRadio, SolRadioGroup, SolCheckbox, SolCheckboxGroup, SolSwitch, SolDropdown, };
 export declare const componentsNames: string[];

package/dist/vite.config.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("vite").UserConfigExport;
+declare const _default: import("vitest/dist/config").UserConfig;
 export default _default;

package/package.json

@@ -1,10 +1,12 @@
 {
   "name": "@solfacil/girassol",
-  "version": "0.1.0",
+  "description": "Girassol design system",
+  "version": "0.1.5",
   "authors": [
     {
       "name": "Kevin Martin",
-      "email": "kevinbreaker2604@gmail.com"
+      "email": "kevinbreaker2604@gmail.com",
+      "url": "https://github.com/kevinbreaker"
     }
   ],
   "engines": {
@@ -25,7 +27,8 @@
       "import": "./dist/girassol.es.js",
       "require": "./dist/girassol.umd.js"
     },
-    "./dist/style.css": "./dist/style.css"
+    "./dist/style.css": "./dist/style.css",
+    "./windi.config.ts": "./windi.config.ts"
   },
   "types": "./dist/types/index.d.ts",
   "scripts": {
@@ -33,50 +36,80 @@
     "build:lib": "vue-tsc --noEmit && vite build",
     "build:lib:ts": "vite build && vue-tsc --emitDeclarationOnly && mv dist/src dist/types",
     "preview": "vite preview",
-    "test": "jest --silent",
-    "test:w": "jest --silent --watch",
+    "lint": "eslint . --resolve-plugins-relative-to .",
+    "lint:fix": "eslint . --fix --resolve-plugins-relative-to .",
+    "girassol": "girassol",
+    "test": "vitest run",
+    "test:w": "vitest watch --silent ",
+    "test:coverage": "vitest run --silent --coverage",
     "storybook": "start-storybook -p 6006 --ci",
     "build-storybook": "build-storybook"
   },
   "dependencies": {
-    "@vueuse/core": "^8.2.0",
-    "vue": "^3.2.31"
+    "@vueuse/core": "^8.2.6",
+    "vue": "^3.2.33"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^0.18.9",
-    "@babel/core": "^7.17.8",
+    "@antfu/eslint-config": "^0.20.2",
+    "@babel/core": "^7.17.9",
     "@babel/preset-env": "^7.16.11",
-    "@iconify/json": "^2.1.21",
-    "@storybook/addon-a11y": "^6.4.19",
-    "@storybook/addon-actions": "^6.4.19",
-    "@storybook/addon-essentials": "^6.4.19",
-    "@storybook/addon-links": "^6.4.19",
-    "@storybook/theming": "^6.4.19",
-    "@storybook/vue3": "^6.4.19",
-    "@testing-library/jest-dom": "^5.16.3",
-    "@testing-library/user-event": "^13.5.0",
+    "@iconify/json": "^2.1.28",
+    "@storybook/addon-a11y": "^6.4.22",
+    "@storybook/addon-actions": "^6.4.22",
+    "@storybook/addon-essentials": "^6.4.22",
+    "@storybook/addon-links": "^6.4.22",
+    "@storybook/theming": "^6.4.22",
+    "@storybook/vue3": "^6.4.22",
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/user-event": "^14.1.1",
     "@testing-library/vue": "^6.5.1",
-    "@types/jest": "^27.4.1",
     "@types/jest-axe": "^3.5.3",
-    "@types/node": "^17.0.23",
-    "@vitejs/plugin-vue": "^2.2.4",
-    "@vue/vue3-jest": "^27.0.0-alpha.4",
-    "babel-jest": "^27.5.1",
+    "@types/node": "^17.0.24",
+    "@typescript-eslint/eslint-plugin": "^5.21.0",
+    "@typescript-eslint/parser": "^5.21.0",
+    "@vitejs/plugin-vue": "^2.3.1",
     "babel-loader": "^8.2.4",
+    "c8": "^7.11.0",
     "critters": "^0.0.16",
-    "jest": "^27.5.1",
+    "eslint": "^8.14.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-html": "^6.2.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-vue": "^8.7.1",
+    "eslint-plugin-vuejs-accessibility": "^1.1.1",
     "jest-axe": "^5.0.1",
-    "sass": "^1.49.9",
+    "jsdom": "^19.0.0",
+    "sass": "^1.50.0",
     "storybook-addon-designs": "^6.2.1",
-    "storybook-builder-vite": "^0.1.22",
-    "ts-jest": "^27.1.4",
+    "storybook-builder-vite": "^0.1.23",
+    "stylelint": "^14.8.2",
+    "stylelint-config-prettier": "^9.0.3",
+    "stylelint-config-property-sort-order-smacss": "^9.0.0",
+    "stylelint-order": "^5.0.0",
     "typescript": "^4.6.3",
     "unplugin-icons": "^0.14.1",
-    "vite": "^2.8.6",
+    "vite": "^2.9.4",
     "vite-plugin-inspect": "^0.4.3",
-    "vite-plugin-windicss": "^1.8.3",
-    "vue-loader": "^16.8.3",
-    "vue-tsc": "^0.33.9",
+    "vite-plugin-windicss": "^1.8.4",
+    "vitest": "^0.10.0",
+    "vue-loader": "^17.0.0",
+    "vue-tsc": "^0.34.6",
     "windicss": "^3.5.1"
-  }
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/solfacil/girassol"
+  },
+  "keywords": [
+    "vue 3",
+    "Components",
+    "solfacil",
+    "girassol",
+    "windicss",
+    "design system",
+    "vue",
+    "vue.js",
+    "nuxt",
+    "nuxt 3"
+  ]
 }

package/theme/solfacil/borders.ts

@@ -6,7 +6,7 @@ export default {
     lg: '1rem',
     full: '40rem',
     half: '50%',
-    fully: '100%'
+    fully: '100%',
   },
 
 
@@ -16,5 +16,5 @@ export default {
     sm: '2px',
     md: '4px',
     lg: '8px',
-  }
+  },
 }

package/theme/solfacil/colors.ts

@@ -7,7 +7,7 @@ export default {
     },
   },
 
-  neutrals: {
+  neutral: {
     low: {
       light: '#8f8f8f',
       medium: '#525252',
@@ -23,8 +23,8 @@ export default {
 
   feedback: {
     positive: {
-      medium: '#eefbf6',
-      light: '#8ae5bf',
+      light: '#eefbf6',
+      medium: '#8ae5bf',
       pure: '#47d79a',
     },
 
@@ -39,5 +39,5 @@ export default {
       medium: '#ff7470',
       pure: '#ff251f',
     },
-  }
+  },
 }

package/theme/solfacil/effects.ts

@@ -4,12 +4,12 @@ export default {
 
     strong: 0.8,
     moderate: 0.32,
-    weak: 0.16
+    weak: 0.16,
   },
 
   boxShadow: {
     soft: '0px 8px 16px rgba(41, 41, 41, 0.08)',
     medium: '0px 12px 24px rgba(41, 41, 41, 0.16)',
-    large: '0px 16px 64px rgba(41, 41, 41, 0.24)'
-  }
+    large: '0px 16px 64px rgba(41, 41, 41, 0.24)',
+  },
 }

package/theme/solfacil/index.ts

@@ -5,7 +5,7 @@ import spacing from './spacing'
 import effects from './effects'
 import misc from './miscs'
 
-import { outlinesForFocus } from './utilities'
+import { outlinesForFocus, maxLines, debug } from './utilities'
 
 
 export {
@@ -18,5 +18,7 @@ export {
 }
 
 export const utilities = {
-  outlinesForFocus
+  outlinesForFocus,
+  maxLines,
+  debug,
 }

package/theme/solfacil/miscs.ts

@@ -1,6 +1,6 @@
 export default {
   width: {
-    'fit-content': 'fit-content'
+    'fit-content': 'fit-content',
   },
 
   colors: {
@@ -10,5 +10,5 @@ export default {
   outline: {
     focused: '',
     'focused-invert': '',
-  }
+  },
 }

package/theme/solfacil/spacing.ts

@@ -51,6 +51,6 @@ export default {
     '3xl': '6rem',
     'mega': '7.5rem',
     'giga': '12.5rem',
-  }
+  },
 }
 

package/theme/solfacil/typography.ts

@@ -40,12 +40,12 @@ export default {
   fontWeight: {
     regular: 400,
     medium: 500,
-    bold: 700
+    bold: 700,
   },
 
   letterSpacing: {
     default: 'normal',
     md: '0.04rem',
     sm: '0.16rem',
-  }
+  },
 }

package/theme/solfacil/utilities.ts

@@ -4,12 +4,80 @@ export const outlinesForFocus = plugin(({ addUtilities }) => {
   addUtilities({
     '.outline-focused': {
       outline: '3px solid #292929',
-      outlineOffset: '0px' 
+      outlineOffset: '0px',
     },
 
     '.outline-focused-invert': {
       outline: '3px solid #ffffff',
-      outlineOffset: '0px' 
-    }
+      outlineOffset: '0px',
+    },
   })
 })
+
+export const maxLines = plugin(({ addUtilities }) => {
+  const total = 10
+  const variants = {}
+
+  for (let i = 1; i <= total; i++) {
+    Object.assign(variants, {
+      [`.max-lines-${i}`]: {
+        overflow: 'hidden',
+        'line-clamp': `${i}`,
+        '-webkit-line-clamp': `${i}`,
+        'display': '-webkit-box',
+        '-webkit-box-orient': 'vertical',
+      },
+    })
+  }
+
+  addUtilities(variants)
+})
+
+export const debug = plugin(({ addUtilities }) => {
+  addUtilities({
+    '.debug': {
+      outline: '2px dashed #ff0000!important',
+    },
+
+    '.debug-all': {
+      outline: '2px dashed #ff0000!important',
+      outlineOffset: '3px',
+      '> *': {
+        outline: '2px dotted #a0092f!important',
+        outlineOffset: '3px',
+        '> *': {
+          outline: '2px dashed #00ffff!important',
+          outlineOffset: '3px',
+          '> *': {
+            outline: '2px dotted #ff00ff!important',
+            outlineOffset: '3px',
+            '> *': {
+              outline: '2px dashed #f0ad2aff!important',
+              outlineOffset: '3px',
+              '> *': {
+                outline: '2px dotted #00ff00!important',
+                outlineOffset: '3px',
+                '> *': {
+                  outline: '2px dashed #d9ffaa!important',
+                  outlineOffset: '3px',
+                  '> *': {
+                    outline: '2px dotted #2adeff!important',
+                    outlineOffset: '3px',
+                    '> *': {
+                      outline: '2px dashed #00af2f!important',
+                      outlineOffset: '3px',
+                      '*': {
+                        outline: '2px groove #0faefa!important',
+                        outlineOffset: '3px',
+                      },
+                    },
+                  },
+                },
+              },
+            },
+          },
+        },
+      },
+    },
+  })
+})

package/vite.config.ts

@@ -1,6 +1,6 @@
-import path from 'path'
+import { defineConfig } from 'vitest/config'
 
-import { defineConfig } from 'vite'
+import path from 'path'
 import vue from '@vitejs/plugin-vue'
 
 import Icons from 'unplugin-icons/vite'
@@ -33,8 +33,8 @@ export default defineConfig({
       '@assets': path.resolve(currentPath, './src/assets'),
       '@components': path.resolve(currentPath, './src/components'),
       '@forms': path.resolve(currentPath, './src/components/forms'),
-      '@themes': path.resolve(currentPath, 'theme')
-    }
+      '@themes': path.resolve(currentPath, 'theme'),
+    },
   },
 
   plugins: [
@@ -51,7 +51,7 @@ export default defineConfig({
 
     Icons({
       autoInstall: true,
-      compiler: 'vue3'
+      compiler: 'vue3',
     }),
   ],
 
@@ -61,4 +61,16 @@ export default defineConfig({
       '@vueuse/core',
     ],
   },
+
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    include: ['src/components/**/*.spec.ts', 'src/composables/**/*.spec.ts'],
+    coverage: {
+      extension: 'vue',
+    },
+    deps: {
+      inline: ['@vue', '@vueuse'],
+    },
+  },
 })

package/windi.config.ts

@@ -8,12 +8,14 @@ export default defineConfig({
   darkMode: 'class',
   attributify: false,
   extract: {
-    include: ['index.html', 'src/**/*']
+    include: ['index.html', 'src/**/*'],
   },
 
   plugins: [
     typography(),
-    utilities.outlinesForFocus
+    utilities.outlinesForFocus,
+    utilities.maxLines,
+    utilities.debug,
   ],
 
   theme: {
@@ -25,6 +27,6 @@ export default defineConfig({
     ...typos,
     ...effects,
     ...borders,
-    ...spacing
+    ...spacing,
   },
 })