@solfacil/girassol 0.21.0 → 0.22.0

package/dist/types/components/breadcrumb/Breadcrumb.vue.d.ts

@@ -23,7 +23,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     }[];
 }>>>, {
     items: import("./types").Item[];
-    linkTag: "a" | "router-link" | "nuxt-link";
+    linkTag: "a" | import("./types").NuxtLinkResolved | "router-link";
 }>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;

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

@@ -1,12 +1,14 @@
+import type { resolveComponent } from "vue";
 export type Item = {
     href: string;
     text: string;
     target?: '_blank' | '_self' | '_parent' | '_top';
     rel?: string;
 };
+export type NuxtLinkResolved = Exclude<ReturnType<typeof resolveComponent>, string>;
 export interface Breadcrumb {
     id: string;
     items?: Item[];
     gtmId?: string;
-    linkTag?: 'a' | 'router-link' | 'nuxt-link';
+    linkTag?: 'a' | 'router-link' | NuxtLinkResolved;
 }

package/dist/types/components/link/Link.vue.d.ts

@@ -3,7 +3,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     id: Link['id'];
     text?: Link['text'];
     to?: Link['to'];
-    component?: "a" | "router-link" | "nuxt-link" | undefined;
+    component?: "a" | "router-link" | (import("vue").ComponentOptions<{}, any, any, import("vue").ComputedOptions, import("vue").MethodOptions, any, any, any> | import("vue").FunctionalComponent<{}, any>) | undefined;
     size?: "large" | "medium" | undefined;
     onColor?: Link['onColor'];
     external?: Link['external'];
@@ -15,7 +15,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     id: Link['id'];
     text?: Link['text'];
     to?: Link['to'];
-    component?: "a" | "router-link" | "nuxt-link" | undefined;
+    component?: "a" | "router-link" | (import("vue").ComponentOptions<{}, any, any, import("vue").ComputedOptions, import("vue").MethodOptions, any, any, any> | import("vue").FunctionalComponent<{}, any>) | undefined;
     size?: "large" | "medium" | undefined;
     onColor?: Link['onColor'];
     external?: Link['external'];
@@ -29,6 +29,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     component: Link['component'];
 }>, {
     icon: (_: {}) => any;
+    default: (_: {}) => any;
 }>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;

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

@@ -1,3 +1,4 @@
+import type { resolveComponent } from "vue";
 export interface LinkTo {
     path: string;
     force?: boolean;
@@ -8,12 +9,14 @@ export interface LinkTo {
     replace?: false;
     state?: string;
 }
+type NuxtLinkResolved = Exclude<ReturnType<typeof resolveComponent>, string>;
 export interface Link {
     id: string;
-    component: 'router-link' | 'nuxt-link' | 'a';
+    component: 'router-link' | 'a' | NuxtLinkResolved;
     text?: string;
     to?: string | LinkTo;
     external?: boolean;
     size: 'medium' | 'large';
     onColor?: boolean;
 }
+export {};

package/dist/types/index.d.ts

@@ -5260,7 +5260,7 @@ export declare const components: {
             }[];
         };
         linkTag: {
-            type: import("vue").PropType<"a" | "router-link" | "nuxt-link">;
+            type: import("vue").PropType<"a" | import("./components/breadcrumb/types").NuxtLinkResolved | "router-link">;
         } & {
             default: string;
         };
@@ -5280,7 +5280,7 @@ export declare const components: {
             }[];
         };
         linkTag: {
-            type: import("vue").PropType<"a" | "router-link" | "nuxt-link">;
+            type: import("vue").PropType<"a" | import("./components/breadcrumb/types").NuxtLinkResolved | "router-link">;
         } & {
             default: string;
         };
@@ -5289,7 +5289,7 @@ export declare const components: {
         };
     }>>, {
         items: import("./components/breadcrumb/types").Item[];
-        linkTag: "a" | "router-link" | "nuxt-link";
+        linkTag: "a" | import("./components/breadcrumb/types").NuxtLinkResolved | "router-link";
     }>;
     SolDivider: import("vue").DefineComponent<{
         orientation: {
@@ -5324,7 +5324,7 @@ export declare const components: {
             $props: Partial<{
                 text: string;
                 size: "large" | "medium";
-                component: "a" | "router-link" | "nuxt-link";
+                component: "a" | "router-link" | (import("vue").ComponentOptions<{}, any, any, import("vue").ComputedOptions, import("vue").MethodOptions, any, any, any> | import("vue").FunctionalComponent<{}, any>);
             }> & Omit<Readonly<import("vue").ExtractPropTypes<{
                 id: {
                     type: import("vue").PropType<string>;
@@ -5347,7 +5347,7 @@ export declare const components: {
                     type: import("vue").PropType<string | import("./components/link/types").LinkTo>;
                 };
                 component: {
-                    type: import("vue").PropType<"a" | "router-link" | "nuxt-link">;
+                    type: import("vue").PropType<"a" | "router-link" | (import("vue").ComponentOptions<{}, any, any, import("vue").ComputedOptions, import("vue").MethodOptions, any, any, any> | import("vue").FunctionalComponent<{}, any>)>;
                 } & {
                     default: string;
                 };
@@ -5390,7 +5390,7 @@ export declare const components: {
                     type: import("vue").PropType<string | import("./components/link/types").LinkTo>;
                 };
                 component: {
-                    type: import("vue").PropType<"a" | "router-link" | "nuxt-link">;
+                    type: import("vue").PropType<"a" | "router-link" | (import("vue").ComponentOptions<{}, any, any, import("vue").ComputedOptions, import("vue").MethodOptions, any, any, any> | import("vue").FunctionalComponent<{}, any>)>;
                 } & {
                     default: string;
                 };
@@ -5400,7 +5400,7 @@ export declare const components: {
             }>>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
                 text: string;
                 size: "large" | "medium";
-                component: "a" | "router-link" | "nuxt-link";
+                component: "a" | "router-link" | (import("vue").ComponentOptions<{}, any, any, import("vue").ComputedOptions, import("vue").MethodOptions, any, any, any> | import("vue").FunctionalComponent<{}, any>);
             }, {}, string> & {
                 beforeCreate?: ((() => void) | (() => void)[]) | undefined;
                 created?: ((() => void) | (() => void)[]) | undefined;
@@ -5443,7 +5443,7 @@ export declare const components: {
                 type: import("vue").PropType<string | import("./components/link/types").LinkTo>;
             };
             component: {
-                type: import("vue").PropType<"a" | "router-link" | "nuxt-link">;
+                type: import("vue").PropType<"a" | "router-link" | (import("vue").ComponentOptions<{}, any, any, import("vue").ComputedOptions, import("vue").MethodOptions, any, any, any> | import("vue").FunctionalComponent<{}, any>)>;
             } & {
                 default: string;
             };
@@ -5476,7 +5476,7 @@ export declare const components: {
             type: import("vue").PropType<string | import("./components/link/types").LinkTo>;
         };
         component: {
-            type: import("vue").PropType<"a" | "router-link" | "nuxt-link">;
+            type: import("vue").PropType<"a" | "router-link" | (import("vue").ComponentOptions<{}, any, any, import("vue").ComputedOptions, import("vue").MethodOptions, any, any, any> | import("vue").FunctionalComponent<{}, any>)>;
         } & {
             default: string;
         };
@@ -5486,10 +5486,11 @@ export declare const components: {
     }>>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
         text: string;
         size: "large" | "medium";
-        component: "a" | "router-link" | "nuxt-link";
+        component: "a" | "router-link" | (import("vue").ComponentOptions<{}, any, any, import("vue").ComputedOptions, import("vue").MethodOptions, any, any, any> | import("vue").FunctionalComponent<{}, any>);
     }, {}, string> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
         $slots: {
             icon: (_: {}) => any;
+            default: (_: {}) => any;
         };
     });
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@solfacil/girassol",
   "description": "Girassol design system",
-  "version": "0.21.0",
+  "version": "0.22.0",
   "license": "MIT",
   "authors": [
     {
@@ -20,7 +20,9 @@
     "theme/",
     "cli/bin",
     "cli/build",
-    "*.ts"
+    "vite-modules/",
+    "*.ts",
+    "scripts"
   ],
   "bin": {
     "girassol-cli": "./cli/bin/girassol-cli"
@@ -33,10 +35,12 @@
       "require": "./dist/girassol.umd.js"
     },
     "./dist/style.css": "./dist/style.css",
-    "./windi.config.ts": "./windi.config.ts"
+    "./windi.config.ts": "./windi.config.ts",
+    "./vite-modules/generate-girassol-icons": "./vite-modules/generate-girassol-icons.ts"
   },
   "types": "./dist/types/index.d.ts",
   "scripts": {
+    "postinstall": "node scripts/update-girassol-icons.mjs",
     "typecheck": "vue-tsc -p tsconfig.app.json --noEmit",
     "dev": "vite --port 3333 --host",
     "build:lib": "vue-tsc --noEmit && vite build",

package/scripts/girassol-icons.mjs

@@ -0,0 +1,154 @@
+import { access, constants, mkdir, readFile, writeFile } from 'fs/promises'
+import { dirname, join } from 'path'
+import crypto from 'crypto'
+import https from 'node-fetch'
+
+const COLORS = {
+  Reset: "\x1B[0m",
+  Bright: "\x1B[1m",
+  Dim: "\x1B[2m",
+  Italic: "\x1B[3m",
+  Underscore: "\x1B[4m",
+  Blink: "\x1B[5m",
+  Reverse: "\x1B[7m",
+  Hidden: "\x1B[8m",
+  Stroke: "\x1B[9m",
+
+  FgBlack: "\x1B[30m",
+  FgRed: "\x1B[31m",
+  FgGreen: "\x1B[32m",
+  FgYellow: "\x1B[33m",
+  FgBlue: "\x1B[34m",
+  FgMagenta: "\x1B[35m",
+  FgCyan: "\x1B[36m",
+  FgWhite: "\x1B[37m",
+  FgGray: "\x1B[90m",
+
+  BgBlack: "\x1B[40m",
+  BgRed: "\x1B[41m",
+  BgGreen: "\x1B[42m",
+  BgYellow: "\x1B[43m",
+  BgBlue: "\x1B[44m",
+  BgMagenta: "\x1B[45m",
+  BgCyan: "\x1B[46m",
+  BgWhite: "\x1B[47m",
+  BgGray: "\x1B[100m",
+}
+
+function log(styles, content) {
+  console.log(...styles, content, COLORS.Reset)
+}
+
+log([COLORS.Bright,COLORS.FgYellow], '======== [GIRASSOL_ICONS] =========')
+
+const dirname__ = dirname('./node_modules/')
+const girassolModules = join(dirname__, 'node_modules/@solfacil/girassol')
+
+const COLLECTIONS = [
+  { url: 'https://d1azc1qln24ryf.cloudfront.net/265413/Icons/selection-svg.json', filename: 'icons', collection: 'girassol' },
+  { url: 'https://d1azc1qln24ryf.cloudfront.net/265413/Ilustrations/selection-svg.json', filename: 'illustration', collection: 'illustration' },
+]
+  
+async function getIcon(url) {
+  try {
+    const data = await https(url, { method: 'GET' })
+    const response = await data.json()
+
+    const hash = crypto.createHash('md5')
+    hash.update(JSON.stringify(response))
+
+    response.hash = hash.digest('hex')
+
+    return response
+  }
+  catch (er) {
+    console.error('Error', er)
+  }
+}
+
+function transformIcons(collection, icons) {
+  const girassol = {
+    prefix: collection,
+    hash: icons?.hash,
+    width: 1024,
+    height: 1024,
+    icons: {},
+  }
+
+  icons.icons.forEach(({ icon, properties }) => {
+    const name = properties.name
+    const hasAttributes = icon.attrs.length
+
+    function transformAttribute(index) {
+      const currentAttributes = icon.attrs[index]
+
+      const style = () =>
+        Object.entries(currentAttributes)
+          .flatMap(([property, value]) => `${property}: ${value}`)
+          .join(';')
+
+      if (hasAttributes && Object.values(currentAttributes)) 
+        return `style="${style()}"`
+    }
+
+    function addPath(path, index) {
+      return `<path fill="currentColor" d="${path}" ${transformAttribute(index)} />`
+    }
+
+    const paths = icon.paths
+      .map(addPath)
+      .join('')
+
+    Object.assign(girassol.icons, {
+      [name]: {
+        body: paths,
+      },
+    })
+  })
+
+  return girassol
+}
+
+function createGirassolIconFiles(filename, collection, data) {
+  writeFile(`${girassolModules}/${filename}.json`, JSON.stringify(transformIcons(collection, data)))
+}
+
+export async function generateIcons() {
+  for (const collection of COLLECTIONS) {
+    try {
+      const icons = await getIcon(collection.url)
+
+      readFile(`${girassolModules}/${collection.filename}.json`)
+        .then(response => {
+          const cached = JSON.parse((response).toString())
+          const isDifferentHash = icons.hash !== cached.hash
+
+          log([COLORS.Bright,COLORS.FgCyan],
+              `${isDifferentHash ?  ' 💡' : ' ✅'} [${collection.filename}] ${isDifferentHash ? 'has new update' :  'is updated' }`)
+
+          if (isDifferentHash){
+            log([COLORS.Blink, COLORS.Bright, COLORS.FgCyan],`👷 [${collection.filename}] Updating...`)
+            createGirassolIconFiles(collection.filename, collection.collection, icons)
+            log([COLORS.Bright,COLORS.FgCyan],` ✅ [${collection.filename}] Updated!`)
+          }
+
+        })
+        .catch(() => {
+          createGirassolIconFiles(collection.filename, collection.collection, icons)
+          log([COLORS.Bright,COLORS.FgYellow],` 🧪 [${collection.filename}] Created!`)
+        })
+    }
+    catch(e) {
+      console.error('ERROR ', e)
+    }
+  }
+}
+
+export async function validateFolder() {
+  try {
+    await access(girassolModules, constants.R_OK | constants.W_OK)
+  }
+  catch {
+    await mkdir(join(dirname__, 'node_modules/@solfacil/girassol'), { recursive: true })
+  }
+}

package/scripts/update-girassol-icons.mjs

@@ -0,0 +1,4 @@
+import { generateIcons,validateFolder } from './girassol-icons.mjs'
+
+validateFolder()
+generateIcons()

package/theme/safelist.ts

@@ -54,7 +54,7 @@ export function safelist({ activeSafeList = true, data }: Args): string[] {
   return []
 }
 
-export function safelistColors(colors: Data['colors']) {
+export function safelistColors({ colors, backgroundImage }: Data['colors']) {
   const colorsNames: string[] = []
 
   for (const category in colors) {
@@ -73,6 +73,10 @@ export function safelistColors(colors: Data['colors']) {
     }
   }
 
+  for (const gradientName in backgroundImage) {
+    colorsNames.push(`${gradientName}`)
+  }
+
   return colorsNames
 }
 

package/theme/solfacil/colors.ts

@@ -1,65 +1,72 @@
 export default {
-  brand: {
-    primary: {
-      pure: '#000000',
-      light: '#a3a3a3',
-      medium: '#666666',
-      dark: '#212121',
+  colors: {
+    brand: {
+      primary: {
+        pure: '#000000',
+        light: '#a3a3a3',
+        medium: '#666666',
+        dark: '#212121',
+      },
+      secondary: {
+        medium: '#BFFF00',
+        light: '#EFFFC1',
+        pure: '#00B569',
+        dark: '#008859',
+      },
     },
-    secondary: {
-      medium: '#BFFF00',
-      light: '#EFFFC1',
-      pure: '#00B569',
-      dark: '#008859',
-    },
-  },
 
-  highlight: {
-    pure: '#8250DF',
-    light: '#E6DCF9',
-    medium: '#C0A7EF',
-    dark: '#342059',
-  },
+    highlight: {
+      pure: '#8250DF',
+      light: '#E6DCF9',
+      medium: '#C0A7EF',
+      dark: '#342059',
+    },
 
-  neutral: {
-    low: {
-      pure: '#000000',
-      light: '#757575',
-      medium: '#505050',
-      dark: '#222222',
+    neutral: {
+      low: {
+        pure: '#000000',
+        light: '#757575',
+        medium: '#505050',
+        dark: '#222222',
+      },
+      high: {
+        pure: '#ffffff',
+        light: '#F0f0f0',
+        medium: '#dedede',
+        dark: '#c8c8c8',
+      },
     },
-    high: {
-      pure: '#ffffff',
-      light: '#F0f0f0',
-      medium: '#dedede',
-      dark: '#c8c8c8',
+
+    feedback: {
+      positive: {
+        pure: '#1CA36F',
+        light: '#D2EDE2',
+        medium: '#8DD1B7',
+        dark: '#0B412C',
+      },
+      warning: {
+        pure: '#FFB300',
+        light: '#FFF0CC',
+        medium: '#FFD97F',
+        dark: '#664800',
+      },
+      informative: {
+        pure: '#176EC4',
+        light: '#D1E4F6',
+        medium: '#8CBAE8',
+        dark: '#0A2F54',
+      },
+      negative: {
+        pure: '#D0382D',
+        light: '#F6D7D5',
+        medium: '#E79B96',
+        dark: '#531612',
+      },
     },
   },
-  
-  feedback: {
-    positive: {
-      pure: '#1CA36F',
-      light: '#D2EDE2',
-      medium: '#8DD1B7',
-      dark: '#0B412C',
-    },
-    warning: {
-      pure: '#FFB300',
-      light: '#FFF0CC',
-      medium: '#FFD97F',
-      dark: '#664800',
-    },
-    informative: {
-      pure: '#176EC4',
-      light: '#D1E4F6',
-      medium: '#8CBAE8',
-      dark: '#0A2F54',
-    },
-    negative: {
-      pure: '#D0382D',
-      light: '#F6D7D5',
-      medium: '#E79B96',
-      dark: '#531612',
-    },
+  backgroundImage: {
+    'gradient-pure': 'linear-gradient(180deg, #BFFF00 0%, #00B569 100%)',
+    'gradient-dark':
+      'linear-gradient(274.52deg, #BFFF00 -105.99%, #42CF45 -65.65%, #008859 134.97%)',
   },
-}
+}

package/vite-modules/generate-component-types.ts

@@ -0,0 +1,44 @@
+import { readFile, writeFile } from 'fs/promises'
+import type { Plugin } from 'vite'
+
+export default (): Plugin => {
+
+  return {
+    name: 'vite-generate-component-types',
+    enforce: 'post',
+    apply: 'build',
+
+    async closeBundle() {
+      const data = await readFile('./src/index.ts', { encoding: 'utf8' })
+
+      const init = data.indexOf('export const component')
+      const dataFiltered = data.slice(init)
+      const end = dataFiltered.indexOf('}')
+
+      const componentsString = dataFiltered.slice(0, end)
+
+      const componentsArray = componentsString
+        .split(',')
+        .map((item) => item.slice(item.indexOf("Sol")).trim())
+        .filter(item => item)
+
+      const componentsTypes = componentsArray.map((component) =>
+        `${component}: typeof import('@solfacil/girassol')['${component}']`,
+      )
+
+      await writeFile('dist/components.json', `${JSON.stringify({ components: componentsArray })}`)
+      await writeFile('dist/components.d.ts',
+      `import '@vue/runtime-core'
+      declare module '@vue/runtime-core' {
+        export interface GlobalComponents {
+          ${componentsTypes.join('\n\t\t\t\t\t')}
+        }
+      }
+      
+      export {}
+      `)
+
+      console.log(`[Girassol] all types and components file generated!`)
+    },
+  }
+}

package/vite-modules/generate-girassol-icons.ts

@@ -0,0 +1,18 @@
+import type { Plugin } from 'vite'
+
+import { generateIcons,validateFolder } from '../scripts/girassol-icons.mjs'
+
+export default (): Plugin => {
+  return {
+    name: 'vite-generate-girassol-icons-data',
+    apply: 'serve',
+
+    async buildStart() {
+      
+      await validateFolder()
+      await generateIcons()
+    
+      console.log('[Girassol icons generated!]')
+    },
+  }
+}

package/vite.config.ts

@@ -1,4 +1,6 @@
 import path from 'path'
+import { readFile } from 'fs/promises'
+
 import { defineConfig } from 'vitest/config'
 
 import vue from '@vitejs/plugin-vue'
@@ -8,10 +10,13 @@ import Icons from 'unplugin-icons/vite'
 import Inspect from 'vite-plugin-inspect'
 import WindiCSS from 'vite-plugin-windicss'
 
-import GirassolComponentsTypes  from './vite-modules/generate-component-types'
+import GirassolComponentsTypes from './vite-modules/generate-component-types'
+import GenerateIconsData from './vite-modules/generate-girassol-icons'
 
 const currentPath = path.resolve(__dirname)
 
+const girassolPath = path.join(__dirname, 'node_modules/@solfacil/girassol')
+
 // https://vitejs.dev/config/
 export default defineConfig({
   build: {
@@ -53,21 +58,22 @@ export default defineConfig({
       enabled: true,
     }),
 
-
     Icons({
       autoInstall: true,
       compiler: 'vue3',
       scale: 1.0,
+      customCollections: {
+        girassol:  async () => JSON.parse(await readFile(`${girassolPath}/icons.json`, 'utf8')),
+        illustration:  async () => JSON.parse(await readFile(`${girassolPath}/illustration.json`, 'utf8')),
+      },
     }),
 
     GirassolComponentsTypes(),
+    GenerateIconsData(),
   ],
 
   optimizeDeps: {
-    include: [
-      'vue',
-      '@vueuse/core',
-    ],
+    include: ['vue', '@vueuse/core'],
   },
 
   test: {

package/windi.config.ts

@@ -51,8 +51,8 @@ export default defineConfig({
       ...misc,
     },
 
-    colors,
     screens,
+    ...colors,
     ...typos,
     ...effects,
     ...borders,