@solfacil/girassol 0.18.0 → 0.19.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@solfacil/girassol",
   "description": "Girassol design system",
-  "version": "0.18.0",
+  "version": "0.19.1",
   "license": "MIT",
   "authors": [
     {
@@ -37,10 +37,10 @@
   },
   "types": "./dist/types/index.d.ts",
   "scripts": {
-    "typecheck": "vue-tsc --noEmit",
+    "typecheck": "vue-tsc -p tsconfig.app.json --noEmit",
     "dev": "vite --port 3333 --host",
     "build:lib": "vue-tsc --noEmit && vite build",
-    "build:lib:ts": "vite build && vue-tsc --emitDeclarationOnly && mv dist/src dist/types",
+    "build:lib:ts": "vite build && vue-tsc -p tsconfig.app.json --emitDeclarationOnly && mv dist/src dist/types",
     "preview": "vite preview",
     "lint": "eslint src/ --resolve-plugins-relative-to .",
     "lint:fix": "eslint src/ --fix --resolve-plugins-relative-to .",
@@ -60,49 +60,50 @@
     "semantic-release": "semantic-release"
   },
   "dependencies": {
-    "@vuepic/vue-datepicker": "^3.6.1",
+    "@vuepic/vue-datepicker": "^3.6.3",
     "@vueuse/core": "^9.6.0",
     "gluegun": "latest",
-    "maska": "^1.5.1",
+    "maska": "^1.5.2",
     "vee-validate": "^4.7.3",
     "vue": "^3.2.45"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^0.33.0",
+    "@antfu/eslint-config": "^0.34.0",
     "@babel/core": "^7.20.5",
     "@babel/preset-env": "^7.20.2",
     "@commitlint/cli": "^17.3.0",
     "@commitlint/config-conventional": "^17.3.0",
-    "@iconify/json": "^2.1.146",
+    "@iconify/json": "^2.1.151",
     "@semantic-release/changelog": "^6.0.2",
     "@semantic-release/git": "^10.0.1",
     "@semantic-release/npm": "^9.0.1",
     "@semantic-release/release-notes-generator": "^10.0.3",
-    "@storybook/addon-a11y": "^6.5.13",
-    "@storybook/addon-actions": "^6.5.13",
-    "@storybook/addon-essentials": "^6.5.13",
-    "@storybook/addon-links": "^6.5.13",
+    "@storybook/addon-a11y": "^6.5.14",
+    "@storybook/addon-actions": "^6.5.14",
+    "@storybook/addon-essentials": "^6.5.14",
+    "@storybook/addon-links": "^6.5.14",
     "@storybook/builder-vite": "^0.2.5",
-    "@storybook/theming": "^6.5.13",
-    "@storybook/vue3": "^6.5.13",
+    "@storybook/theming": "^6.5.14",
+    "@storybook/vue3": "^6.5.14",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/user-event": "^14.4.3",
     "@testing-library/vue": "^6.6.1",
     "@types/jest-axe": "^3.5.5",
     "@types/node": "18.11.9",
-    "@typescript-eslint/eslint-plugin": "^5.45.0",
-    "@typescript-eslint/parser": "^5.45.0",
+    "@types/react": "^16.0.0",
+    "@typescript-eslint/eslint-plugin": "^5.46.1",
+    "@typescript-eslint/parser": "^5.46.1",
     "@vitejs/plugin-vue": "^3.2.0",
     "@vitest/coverage-c8": "^0.25.3",
     "@vitest/ui": "^0.25.3",
     "babel-loader": "^9.1.0",
     "c8": "^7.12.0",
     "cli-spinner": "^0.2.10",
-    "commitizen": "^4.2.5",
+    "commitizen": "^4.2.6",
     "conventional-changelog-conventionalcommits": "^5.0.0",
     "copyfiles": "^2.4.1",
     "critters": "^0.0.16",
-    "eslint": "^8.28.0",
+    "eslint": "^8.29.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-html": "^7.1.0",
     "eslint-plugin-prettier": "^4.2.1",
@@ -114,19 +115,19 @@
     "sass": "^1.56.1",
     "semantic-release": "^19.0.5",
     "storybook-addon-designs": "^6.3.1",
-    "stylelint": "^14.15.0",
+    "stylelint": "^14.16.0",
     "stylelint-config-prettier": "^9.0.4",
     "stylelint-config-property-sort-order-smacss": "^9.0.0",
     "stylelint-order": "^5.0.0",
     "ts-node": "^10.9.1",
-    "typescript": "^4.9.3",
-    "unplugin-icons": "^0.14.14",
+    "typescript": "^4.9.4",
+    "unplugin-icons": "^0.14.15",
     "vite": "^3.2.4",
-    "vite-plugin-inspect": "^0.7.9",
-    "vite-plugin-windicss": "^1.8.8",
+    "vite-plugin-inspect": "^0.7.10",
+    "vite-plugin-windicss": "^1.8.10",
     "vitest": "^0.25.3",
     "vue-loader": "^17.0.1",
-    "vue-tsc": "^1.0.11",
+    "vue-tsc": "^1.0.13",
     "windicss": "^3.5.6"
   },
   "resolutions": {

package/theme/safelist.ts

@@ -1,6 +1,8 @@
 type Data = {
   colors: Record<string, any>
   spacing: Record<string, any>
+  effects: Record<string, any>
+  borders: Record<string, any>
 }
 
 type Args = {
@@ -10,18 +12,26 @@ type Args = {
 
 export function safelist({ activeSafeList = true, data }: Args): string[] {
   if (activeSafeList) {
-    const colors = data.colors ? safelistElementColors(safelistColors(data.colors)) : []
+    const colors = data.colors
+      ? safelistElementColors(safelistColors(data.colors))
+      : []
     const spacing = data.spacing ? safelistSpacing(data.spacing) : []
 
-    const gaps = range(20).map(i => `gap-${i}`)
-    const gridRows = range(14).map(i => `grid-rows-${i}`)
-    const gridCols = range(14).map(i => `grid-cols-${i}`)
-    const rowsStart = range(14).map(i => `row-start-${i}`)
-    const colsStart = range(14).map(i => `col-start-${i}`)
-    const rowsSpan = range(14).map(i => `row-span-${i}`)
-    const colsSpan = range(14).map(i => `col-span-${i}`)
+    const effects = safelistEffects(data.effects)
 
-    return [
+    const gaps = range(20).map((i) => `gap-${i}`)
+    const gridRows = range(14).map((i) => `grid-rows-${i}`)
+    const gridCols = range(14).map((i) => `grid-cols-${i}`)
+    const rowsStart = range(14).map((i) => `row-start-${i}`)
+    const colsStart = range(14).map((i) => `col-start-${i}`)
+    const rowsSpan = range(14).map((i) => `row-span-${i}`)
+    const colsSpan = range(14).map((i) => `col-span-${i}`)
+
+    const maxLines = range(10).map((i) => `max-lines-${i}`)
+
+    const borders = safelistBorders(data.borders.borderRadius, data.borders.borderWidth)
+
+    return  [
       'debug',
       'debug-all',
       ...colors,
@@ -33,10 +43,14 @@ export function safelist({ activeSafeList = true, data }: Args): string[] {
       ...colsStart,
       ...rowsSpan,
       ...colsSpan,
+      ...effects,
+      ...maxLines,
+      ...borders,
+      ...safelistTypography(),
+      ...safelistIconSizes(),
     ]
   }
 
-
   return []
 }
 
@@ -63,9 +77,22 @@ export function safelistColors(colors: Data['colors']) {
 }
 
 export function safelistElementColors(colorsNames: string[]) {
-  const elements = ['text', 'bg', 'outline', 'fill', 'stroke', 'border', 'text-decoration-color', 'text-stroke-color']
+  const elements = [
+    'text',
+    'bg',
+    'outline',
+    'fill',
+    'stroke',
+    'border',
+    'shadow',
+    'text-decoration-color',
+    'text-stroke-color',
+  ]
+
   const elementColors: string[] = []
 
+  elements.forEach((element) => elementColors.push(`${element}-transparent`))
+
   elements.forEach((element: string) => {
     colorsNames.forEach((color: string) => {
       elementColors.push(`${element}-${color}`)
@@ -75,19 +102,80 @@ export function safelistElementColors(colorsNames: string[]) {
   return elementColors
 }
 
+export function safelistBorders(borderRadius: Data['spacing'], borderWidth: Data['spacing']): string[] {
+  const borderAxis = [
+    'border',
+    'border-a',
+    'border-x',
+    'border-y',
+    'border-l',
+    'border-r',
+    'border-t',
+    'border-b',
+  ]
+  const borderWidthAxis = [
+    'rounded',
+    'rounded-x',
+    'rounded-y',
+    'rounded-l',
+    'rounded-r',
+    'rounded-t',
+    'rounded-b',
+  ]
+
+  const elementsBorder: string[] = []
+
+
+  Object.keys(borderWidth).forEach((element: string) => {
+    borderAxis.forEach((axis) => {
+      elementsBorder.push(`${axis}-${element}`)
+    })
+  })
+  
+  Object.keys(borderRadius).forEach((element: string) => {
+    borderWidthAxis.forEach((axis) => {
+      elementsBorder.push(`${axis}-${element}`)
+    })
+  })
+
+  return elementsBorder
+}
 
 export function safelistSpacing(spacing: Data['spacing']): string[] {
   const spacingTokenNames = Object.keys(spacing)
   const paddings = ['p', 'px', 'py', 'pl', 'pr', 'pt', 'pb']
   const margins = ['m', 'mx', 'my', 'ml', 'mr', 'mt', 'mb']
 
-  const typos = ['text', 'tracking', 'decoration', 'underline-offset', 'indent', 'text-stroke']
+  const typos = [
+    'text',
+    'tracking',
+    'decoration',
+    'underline-offset',
+    'indent',
+    'text-stroke',
+  ]
   const svg = ['stroke']
-  const border = ['border-a', 'border-x', 'border-y', 'border-l', 'border-r', 'border-t', 'border-b']
-
-  const elements = [...paddings, ...margins, ...typos, ...svg, ...border]
-  
-  const elementSpacing: string[] = []
+  const border = [
+    'border-a',
+    'border-x',
+    'border-y',
+    'border-l',
+    'border-r',
+    'border-t',
+    'border-b',
+  ]
+
+  const staticTokens = ['w-full', 'h-full', 'w-fit-content']
+
+  const elements = [
+    ...paddings,
+    ...margins,
+    ...typos,
+    ...svg,
+    ...border,
+  ]
+
+  const elementSpacing: string[] = staticTokens
 
   elements.forEach((element: string) => {
     spacingTokenNames.forEach((space: string) => {
@@ -95,12 +183,60 @@ export function safelistSpacing(spacing: Data['spacing']): string[] {
     })
   })
 
-  margins.forEach(margin =>  elementSpacing.push(`${margin}-auto`))
-  paddings.forEach(padding =>  elementSpacing.push(`${padding}-auto`))
+  margins.forEach((margin) => elementSpacing.push(`${margin}-auto`))
+  paddings.forEach((padding) => elementSpacing.push(`${padding}-auto`))
 
   return elementSpacing
 }
 
 export function range(size: number, startAt = 1) {
-  return Array.from(Array(size).keys()).map(i => i + startAt)
-}
+  return Array.from(Array(size).keys()).map((i) => i + startAt)
+}
+
+export function safelistEffects(effects: Data['effects']) {
+  const opacitiesPrefix = ['text', 'bg', 'shadow']
+
+  const opacities = Object.keys(effects.opacity).flatMap((opacity) =>
+    opacitiesPrefix.map((prefix) => `${prefix}-${opacity}`),
+  )
+
+  const shadows = Object.keys(effects.boxShadow).flatMap(
+    (shadow) => `shadow-${shadow}`,
+  )
+
+  return [...opacities, ...shadows]
+}
+
+export function safelistIconSizes() {
+  return [
+    'icon-size-small',
+    'icon-size-medium',
+    'icon-size-large',
+    'icon-size-x-large',
+    'icon-size-giga',
+  ]
+}
+
+export function safelistTypography() {
+  return [
+    'fonts-display-large',
+    'fonts-display-medium',
+    'fonts-display-small',
+    'fonts-heading-h1',
+    'fonts-heading-h2',
+    'fonts-heading-h3',
+    'fonts-heading-h4',
+    'fonts-body-x-large-regular',
+    'fonts-body-x-large-bold',
+    'fonts-body-large-regular',
+    'fonts-body-large-bold',
+    'fonts-body-medium-regular',
+    'fonts-body-medium-bold',
+    'fonts-body-small-regular',
+    'fonts-body-small-bold',
+    'fonts-link-inline-large',
+    'fonts-link-inline-medium',
+    'fonts-link-inline-small',
+    'fonts-overline-small',
+  ]
+}

package/vite.config.ts

@@ -45,7 +45,9 @@ export default defineConfig({
       include: [/\.vue$/],
     }) as any,
 
-    WindiCSS(),
+    WindiCSS({
+      config: './windi.config.ts',
+    }),
 
     Inspect({
       enabled: true,

package/windi.config.ts

@@ -8,7 +8,7 @@ export default defineConfig({
   darkMode: 'class',
   attributify: false,
   extract: {
-    include: ['index.html', 'src/**/*', '*.mdx', '*.vue'],
+    include: ['index.html', 'src/**/*.@(vue|scss)'],
   },
 
   plugins: [

package/dist/cli/src/cli.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/cli/src/commands/create:component.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/cli/src/commands/generate:plugin.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/cli/src/commands/generate:types.d.ts

@@ -1,7 +0,0 @@
-import type { GluegunToolbox } from 'gluegun';
-declare const _default: {
-    name: string;
-    description: string;
-    run: (toolbox: GluegunToolbox) => Promise<void>;
-};
-export default _default;

package/dist/cli/src/commands/girassol-cli.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/cli/src/extensions/cli-extension.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/theme/solfacil/borders.d.ts

@@ -1,18 +0,0 @@
-declare const _default: {
-    borderRadius: {
-        none: number;
-        sm: string;
-        md: string;
-        lg: string;
-        full: string;
-        half: string;
-    };
-    borderWidth: {
-        none: number;
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-    };
-};
-export default _default;

package/dist/theme/solfacil/colors.d.ts

@@ -1,63 +0,0 @@
-declare const _default: {
-    brand: {
-        primary: {
-            pure: string;
-            light: string;
-            medium: string;
-            dark: string;
-        };
-        secondary: {
-            medium: string;
-            light: string;
-            pure: string;
-            dark: string;
-        };
-    };
-    highlight: {
-        pure: string;
-        light: string;
-        medium: string;
-        dark: string;
-    };
-    neutral: {
-        low: {
-            pure: string;
-            light: string;
-            medium: string;
-            dark: string;
-        };
-        high: {
-            pure: string;
-            light: string;
-            medium: string;
-            dark: string;
-        };
-    };
-    feedback: {
-        positive: {
-            pure: string;
-            light: string;
-            medium: string;
-            dark: string;
-        };
-        warning: {
-            pure: string;
-            light: string;
-            medium: string;
-            dark: string;
-        };
-        informative: {
-            pure: string;
-            light: string;
-            medium: string;
-            dark: string;
-        };
-        negative: {
-            pure: string;
-            light: string;
-            medium: string;
-            dark: string;
-        };
-    };
-};
-export default _default;

package/dist/theme/solfacil/effects.d.ts

@@ -1,17 +0,0 @@
-declare const _default: {
-    opacity: {
-        DEFAULT: number;
-        semiopaque: number;
-        intense: number;
-        medium: number;
-        light: number;
-        none: number;
-    };
-    boxShadow: {
-        weak: string;
-        moderate: string;
-        intense: string;
-        strong: string;
-    };
-};
-export default _default;

package/dist/theme/solfacil/index.d.ts

@@ -1,18 +0,0 @@
-import colors from './colors';
-import typography from './typography';
-import borders from './borders';
-import spacing from './spacing';
-import effects from './effects';
-import misc from './miscs';
-import { screens } from './screens';
-export { colors, typography, spacing, borders, effects, misc, screens, };
-export declare const utilities: {
-    componentTypos: import("windicss/types/interfaces").PluginOutput;
-    outlinesForFocus: import("windicss/types/interfaces").PluginOutput;
-    maxLines: import("windicss/types/interfaces").PluginOutput;
-    debug: import("windicss/types/interfaces").PluginOutput;
-    placeholder: import("windicss/types/interfaces").PluginOutput;
-    scrollbarBase: import("windicss/types/interfaces").PluginOutput;
-    iconSizes: import("windicss/types/interfaces").PluginOutput;
-    resetFillFields: import("windicss/types/interfaces").PluginOutput;
-};

package/dist/theme/solfacil/miscs.d.ts

@@ -1,144 +0,0 @@
-declare const _default: {
-    width: {
-        quark: string;
-        nano: string;
-        micro: string;
-        '4xs': string;
-        '3xs': string;
-        '2xs': string;
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-        '2xl': string;
-        '3xl': string;
-        mega: string;
-        '2mega': string;
-        '3mega': string;
-        giga: string;
-        'fit-content': string;
-    };
-    height: {
-        quark: string;
-        nano: string;
-        micro: string;
-        '4xs': string;
-        '3xs': string;
-        '2xs': string;
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-        '2xl': string;
-        '3xl': string;
-        mega: string;
-        '2mega': string;
-        '3mega': string;
-        giga: string;
-    };
-    minHeight: {
-        quark: string;
-        nano: string;
-        micro: string;
-        '4xs': string;
-        '3xs': string;
-        '2xs': string;
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-        '2xl': string;
-        '3xl': string;
-        mega: string;
-        '2mega': string;
-        '3mega': string;
-        giga: string;
-    };
-    maxHeight: {
-        quark: string;
-        nano: string;
-        micro: string;
-        '4xs': string;
-        '3xs': string;
-        '2xs': string;
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-        '2xl': string;
-        '3xl': string;
-        mega: string;
-        '2mega': string;
-        '3mega': string;
-        giga: string;
-    };
-    minWidth: {
-        quark: string;
-        nano: string;
-        micro: string;
-        '4xs': string;
-        '3xs': string;
-        '2xs': string;
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-        '2xl': string;
-        '3xl': string;
-        mega: string;
-        '2mega': string;
-        '3mega': string;
-        giga: string;
-    };
-    maxWidth: {
-        quark: string;
-        nano: string;
-        micro: string;
-        '4xs': string;
-        '3xs': string;
-        '2xs': string;
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-        '2xl': string;
-        '3xl': string;
-        mega: string;
-        '2mega': string;
-        '3mega': string;
-        giga: string;
-    };
-    spacing: {
-        quark: string;
-        nano: string;
-        micro: string;
-        '4xs': string;
-        '3xs': string;
-        '2xs': string;
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-        '2xl': string;
-        '3xl': string;
-        mega: string;
-        '2mega': string;
-        '3mega': string;
-        giga: string;
-    };
-    colors: {
-        transparent: string;
-    };
-    outline: {
-        focused: string;
-        'focused-invert': string;
-    };
-};
-export default _default;

package/dist/theme/solfacil/screens.d.ts

@@ -1,29 +0,0 @@
-export declare const screens: {
-    'xsm:site': {
-        max: string;
-    };
-    'sm:site': {
-        min: string;
-    };
-    'md:site': {
-        min: string;
-    };
-    'lg:site': {
-        min: string;
-    };
-    'xlg:site': {
-        min: string;
-    };
-    'xsm:system': {
-        max: string;
-    };
-    'sm:system': {
-        min: string;
-    };
-    'md:system': {
-        min: string;
-    };
-    'lg:system': {
-        min: string;
-    };
-};