@solfacil/girassol 0.1.9 → 0.2.0

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

@@ -0,0 +1,3 @@
+import type { Plugin } from 'vite';
+declare const _default: () => Plugin;
+export default _default;

package/dist/windi.config.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("windicss/types/interfaces").FullConfig;
+declare const _default: import("vite-plugin-windicss").WindiCssOptions;
 export default _default;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@solfacil/girassol",
   "description": "Girassol design system",
-  "version": "0.1.9",
+  "version": "0.2.0",
   "authors": [
     {
       "name": "Kevin Martin",
@@ -17,9 +17,13 @@
     "dist",
     "public/",
     "theme/",
-    "cli/",
+    "cli/bin",
+    "cli/build",
     "*.ts"
   ],
+  "bin": {
+    "girassol-cli": "./cli/bin/girassol-cli"
+  },
   "main": "./dist/girassol.umd.js",
   "module": "./dist/girassol.es.js",
   "exports": {
@@ -33,77 +37,83 @@
   "types": "./dist/types/index.d.ts",
   "scripts": {
     "dev": "vite --port 3333 --host",
-    "build:cli": "cd cli/ && yarn build",
     "build:lib": "vue-tsc --noEmit && vite build",
     "build:lib:ts": "vite build && vue-tsc --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 .",
-    "girassol": "girassol",
+    "girassol-cli": "cli/bin/girassol-cli",
     "test": "vitest run",
     "test:w": "vitest watch --silent ",
     "test:coverage": "vitest run --silent --coverage",
     "storybook": "start-storybook -p 6006 --ci",
+    "build-storybook": "build-storybook",
+    "cli:clean-build": "rm -rf ./cli/build",
+    "cli:compile": "tsc -p ./cli",
+    "cli:copy-templates": "copyfiles -f ./cli/src/templates/* ./cli/build/templates",
+    "cli:build": "yarn cli:clean-build && yarn cli:compile && yarn cli:copy-templates",
     "prepare": "husky install",
     "commit": "cz",
-    "pre-commit": "./.husky/run-staged-tests.js",
-    "build-storybook": "build-storybook"
+    "pre-commit": "./.husky/run-staged-tests.js"
   },
   "dependencies": {
-    "@vueuse/core": "^8.5.0",
-    "vue": "^3.2.36"
+    "@vueuse/core": "^8.7.5",
+    "gluegun": "latest",
+    "vue": "^3.2.37"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^0.23.1",
-    "@babel/core": "^7.18.2",
-    "@babel/preset-env": "^7.18.2",
-    "@commitlint/cli": "^17.0.1",
-    "@commitlint/config-conventional": "^17.0.0",
-    "@iconify/json": "^2.1.28",
-    "@storybook/addon-a11y": "^6.5.5",
-    "@storybook/addon-actions": "^6.5.5",
-    "@storybook/addon-essentials": "^6.5.5",
-    "@storybook/addon-links": "^6.5.5",
-    "@storybook/builder-vite": "^0.1.35",
-    "@storybook/theming": "^6.5.5",
-    "@storybook/vue3": "^6.5.5",
+    "@antfu/eslint-config": "^0.25.2",
+    "@babel/core": "^7.18.6",
+    "@babel/preset-env": "^7.18.6",
+    "@commitlint/cli": "^17.0.3",
+    "@commitlint/config-conventional": "^17.0.3",
+    "@iconify/json": "^2.1.70",
+    "@storybook/addon-a11y": "^6.5.9",
+    "@storybook/addon-actions": "^6.5.9",
+    "@storybook/addon-essentials": "^6.5.9",
+    "@storybook/addon-links": "^6.5.9",
+    "@storybook/builder-vite": "^0.1.38",
+    "@storybook/theming": "^6.5.9",
+    "@storybook/vue3": "^6.5.9",
     "@testing-library/jest-dom": "^5.16.4",
-    "@testing-library/user-event": "^14.2.0",
-    "@testing-library/vue": "^6.5.1",
-    "@types/jest-axe": "^3.5.3",
-    "@types/node": "^17.0.35",
-    "@typescript-eslint/eslint-plugin": "^5.26.0",
-    "@typescript-eslint/parser": "^5.26.0",
+    "@testing-library/user-event": "^14.2.1",
+    "@testing-library/vue": "^6.6.0",
+    "@types/jest-axe": "^3.5.4",
+    "@types/node": "^17.0.41",
+    "@typescript-eslint/eslint-plugin": "^5.30.0",
+    "@typescript-eslint/parser": "^5.30.0",
     "@vitejs/plugin-vue": "^2.3.3",
     "babel-loader": "^8.2.5",
     "c8": "^7.11.3",
     "cli-spinner": "^0.2.10",
     "commitizen": "^4.2.4",
+    "copyfiles": "^2.4.1",
     "critters": "^0.0.16",
-    "eslint": "^8.14.0",
+    "eslint": "^8.18.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-html": "^6.2.0",
-    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-vue": "^8.7.1",
-    "eslint-plugin-vuejs-accessibility": "^1.1.1",
+    "eslint-plugin-vuejs-accessibility": "^1.2.0",
     "husky": "^8.0.1",
     "jest-axe": "^5.0.1",
-    "jsdom": "^19.0.0",
+    "jsdom": "^20.0.0",
     "sass": "^1.50.0",
-    "storybook-addon-designs": "^6.2.1",
-    "stylelint": "^14.8.2",
+    "storybook-addon-designs": "^6.3.1",
+    "stylelint": "^14.9.1",
     "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.3",
-    "vite": "^2.9.9",
-    "vite-plugin-inspect": "^0.5.0",
-    "vite-plugin-windicss": "^1.8.4",
-    "vitest": "^0.12.9",
+    "ts-node": "^10.8.1",
+    "typescript": "^4.7.4",
+    "unplugin-icons": "^0.14.7",
+    "vite": "^2.9.13",
+    "vite-plugin-inspect": "^0.5.1",
+    "vite-plugin-windicss": "^1.8.6",
+    "vitest": "^0.16.0",
     "vue-loader": "^17.0.0",
-    "vue-tsc": "^0.34.15",
-    "windicss": "^3.5.4"
+    "vue-tsc": "^0.38.2",
+    "windicss": "^3.5.6"
   },
   "repository": {
     "type": "git",
@@ -126,4 +136,4 @@
       "path": "./node_modules/cz-conventional-changelog"
     }
   }
-}
+}

package/theme/solfacil/borders.ts

@@ -4,7 +4,8 @@ export default {
     sm: '0.25rem',
     md: '0.5rem',
     lg: '1rem',
-    full: '40rem',
+    full: '80rem',
+
     half: '50%',
     fully: '100%',
   },

package/theme/solfacil/colors.ts

@@ -1,43 +1,56 @@
 export default {
   brand: {
     primary: {
-      light: '#FFF8EB',
-      medium: '#FFCD70',
-      pure: '#FFB01F',
+      medium: '#BFFF00',
+      light: '#EFFFC1',
+      pure: '#00B569',
+      dark: '#008859',
     },
   },
-
+  highlight: {
+    pure: '#8250DF',
+    light: '#E6DCF9',
+    medium: '#C0A7EF',
+    dark: '#342059',
+  },
   neutral: {
     low: {
-      light: '#8f8f8f',
-      medium: '#525252',
-      pure: '#292929',
+      pure: '#000000',
+      light: '#888888',
+      medium: '#555555',
+      dark: '#222222',
     },
-
     high: {
-      light: '#FFFFFF',
-      medium: '#F5F5F5',
-      pure: '#E0E0E0',
+      pure: '#ffffff',
+      light: '#F5f5f5',
+      medium: '#e0e0e0',
+      dark: '#cccccc',
     },
   },
-
   feedback: {
     positive: {
-      light: '#eefbf6',
-      medium: '#8ae5bf',
-      pure: '#47d79a',
+      pure: '#1CA36F',
+      light: '#D2EDE2',
+      medium: '#8DD1B7',
+      dark: '#0B412C',
+    },
+    warning: {
+      pure: '#FFB300',
+      light: '#FFF0CC',
+      medium: '#FFD97F',
+      dark: '#664800',
     },
-
     informative: {
-      light: '#ebf8ff',
-      medium: '#70cbff',
-      pure: '#1faeff',
+      pure: '#1976D2',
+      light: '#D1E4F6',
+      medium: '#8CBAE8',
+      dark: '#0A2F54',
     },
-
     negative: {
-      light: '#ffebeb',
-      medium: '#ff7470',
-      pure: '#ff251f',
+      pure: '#D0382D',
+      light: '#F6D7D5',
+      medium: '#E79B96',
+      dark: '#531612',
     },
   },
 }

package/theme/solfacil/effects.ts

@@ -1,15 +1,17 @@
 export default {
-  opacity:  {
+  opacity: {
     'DEFAULT': 1,
 
     strong: 0.8,
+    intense: 0.6,
     moderate: 0.32,
     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)',
+    weak: '0px 4px 8px rgba(41, 41, 41, 0.08)',
+    moderate: '0px 8px 24px rgba(41, 41, 41, 0.16)',
+    intense: '0px 16px 32px rgba(41, 41, 41, 0.24)',
+    strong: '0px 16px 48px rgba(41, 41, 41, 0.24)',
   },
 }

package/theme/solfacil/typography.ts

@@ -1,10 +1,8 @@
 export default {
   fontFamily: {
     sans: ['"Lato"', 'sans-serif'],
-    
     base: ['"Lato"', 'sans-serif'],
-    highlight: ['"Rubik"'],
-    code: ['"Roboto Slab", "serif"'],
+    title: ['"Rubik"'],
   },
 
   fontSize: {
@@ -21,7 +19,7 @@ export default {
     '2xl': '3.5rem',
     '3xl': '4rem',
     'mega': '4.5rem',
-    'giga': '5.5rem',
+    'giga': '5rem',
   },
 
   lineHeight: {

package/vite.config.ts

@@ -8,6 +8,8 @@ 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'
+
 const currentPath = path.resolve(__dirname)
 
 // https://vitejs.dev/config/
@@ -53,6 +55,8 @@ export default defineConfig({
       autoInstall: true,
       compiler: 'vue3',
     }),
+
+    GirassolComponentsTypes(),
   ],
 
   optimizeDeps: {

package/windi.config.ts

@@ -4,13 +4,43 @@ import typography from 'windicss/plugin/typography'
 
 import { borders, colors, effects, misc, spacing, typography as typos, utilities } from './theme/solfacil/'
 
+function range(size: number, startAt = 1) {
+  return Array.from(Array(size).keys()).map(i => i + startAt)
+}
+
 export default defineConfig({
   darkMode: 'class',
   attributify: false,
   extract: {
-    include: ['index.html', 'src/**/*'],
+    include: ['index.html', 'src/**/*', '*.mdx', '*.vue'],
   },
 
+  safelist: [
+    'p-nano',
+    'p-micro',
+    'p-3xs',
+    'p-2xs',
+    'p-xs',
+    'p-sm',
+    'p-md',
+    'p-lg',
+    'm-nano',
+    'm-micro',
+    'm-3xs',
+    'm-2xs',
+    'm-xs',
+    'm-sm',
+    'm-md',
+    'm-lg',
+    range(30).map(i => `grid-rows-${i}`),
+    range(30).map(i => `grid-cols-${i}`),
+    range(10).map(i => `gap-${i}`),
+    range(30).map(i => `row-start-${i}`),
+    range(30).map(i => `col-start-${i}`),
+    range(30).map(i => `row-span-${i}`),
+    range(30).map(i => `col-span-${i}`),
+  ],
+
   plugins: [
     typography(),
     utilities.outlinesForFocus,

package/cli/.eslintrc.js

@@ -1,18 +0,0 @@
-/**
- * @type {import("eslint").Linter.Config}
- */
-module.exports = {
-  parser: '@typescript-eslint/parser',
-
-  parserOptions: {
-    ecmaVersion: 2020,
-    sourceType: 'module',
-  },
-  extends: [
-    'plugin:@typescript-eslint/recommended',
-
-    'prettier',
-    'plugin:prettier/recommended',
-  ],
-  rules: {},
-}

package/cli/LICENSE

@@ -1,21 +0,0 @@
-The MIT License (MIT)
-
-Copyright (c) 2017 
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

package/cli/docs/commands.md

@@ -1,3 +0,0 @@
-# Command Reference for girassol
-
-TODO: Add your command reference here

package/cli/docs/plugins.md

@@ -1,47 +0,0 @@
-# Plugin guide for girassol
-
-Plugins allow you to add features to girassol, such as commands and
-extensions to the `toolbox` object that provides the majority of the functionality
-used by girassol.
-
-Creating a girassol plugin is easy. Just create a repo with two folders:
-
-```
-commands/
-extensions/
-```
-
-A command is a file that looks something like this:
-
-```js
-// commands/foo.js
-
-module.exports = {
-  run: (toolbox) => {
-    const { print, filesystem } = toolbox
-
-    const desktopDirectories = filesystem.subdirectories(`~/Desktop`)
-    print.info(desktopDirectories)
-  }
-}
-```
-
-An extension lets you add additional features to the `toolbox`.
-
-```js
-// extensions/bar-extension.js
-
-module.exports = (toolbox) => {
-  const { print } = toolbox
-
-  toolbox.bar = () => { print.info('Bar!') }
-}
-```
-
-This is then accessible in your plugin's commands as `toolbox.bar`.
-
-# Loading a plugin
-
-To load a particular plugin (which has to start with `girassol-*`),
-install it to your project using `npm install --save-dev girassol-PLUGINNAME`,
-and girassol will pick it up automatically.

package/cli/package.json

@@ -1,53 +0,0 @@
-{
-  "name": "girassol",
-  "version": "0.0.1",
-  "description": "girassol CLI",
-  "private": true,
-  "types": "build/types/types.d.ts",
-  "bin": {
-    "girassol": "bin/girassol"
-  },
-  "scripts": {
-    "clean-build": "rm -rf ./build",
-    "compile": "tsc -p .",
-    "copy-templates": "copyfiles ./src/templates/* ./build/templates",
-    "build": "yarn clean-build && yarn compile && yarn copy-templates",
-    "prepublishOnly": "yarn build",
-    "format": "eslint \"**/*.{js,jsx,ts,tsx}\" --fix && prettier \"**/*.{js,jsx,ts,tsx,json}\" --write"
-  },
-  "files": [
-    "build",
-    "LICENSE",
-    "readme.md",
-    "docs",
-    "bin"
-  ],
-  "license": "MIT",
-  "dependencies": {
-    "gluegun": "latest"
-  },
-  "devDependencies": {
-    "@types/node": "^12.7.11",
-    "@typescript-eslint/eslint-plugin": "^4.17.0",
-    "@typescript-eslint/parser": "^4.17.0",
-    "ts-node": "^9.1.1",
-    "typescript": "^4.2.3",
-    "copyfiles": "^2.4.1",
-    "eslint": "^7.22.0",
-    "eslint-config-prettier": "^8.1.0",
-    "eslint-plugin-prettier": "^3.3.1",
-    "husky": "^5.1.3",
-    "prettier": "^2.2.1",
-    "pretty-quick": "^3.1.0"
-  },
-
-  "prettier": {
-    "semi": false,
-    "singleQuote": true
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "pretty-quick --staged"
-    }
-  }
-}

package/cli/readme.md

@@ -1,26 +0,0 @@
-# girassol CLI
-
-A CLI for girassol.
-
-## Customizing your CLI
-
-Check out the documentation at https://github.com/infinitered/gluegun/tree/master/docs.
-
-## Publishing to NPM
-
-To package your CLI up for NPM, do this:
-
-```shell
-$ npm login
-$ npm whoami
-$ npm test
-
-$ npm run build
-
-$ npm publish
-```
-
-# License
-
-MIT - see LICENSE
-

package/cli/src/cli.ts

@@ -1,25 +0,0 @@
-import { build } from 'gluegun'
-
-/**
- * Create the cli and kick it off
- */
-async function run(argv) {
-  // create a CLI runtime
-  const cli = build()
-    .brand('girassol')
-    .src(__dirname)
-    .plugins('./node_modules', { matching: 'girassol-*', hidden: true })
-    .help() // provides default for help, h, --help, -h
-    .version() // provides default for version, v, --version, -v
-    .create()
-  // enable the following method if you'd like to skip loading one of these core extensions
-  // this can improve performance if they're not necessary for your project:
-  // .exclude(['meta', 'strings', 'print', 'filesystem', 'semver', 'system', 'prompt', 'http', 'template', 'patching', 'package-manager'])
-  // and run it
-  const toolbox = await cli.run(argv)
-
-  // send it back (for testing, mostly)
-  return toolbox
-}
-
-module.exports = { run }

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

@@ -1,93 +0,0 @@
-import type { GluegunToolbox } from 'gluegun'
-import { resolve } from 'path'
-const COMPONENTS_PATH_GIRASSOL = resolve(__dirname, '../../../src/components')
-
-const pascalToKebab = (str: string) =>
-  str.replace(
-    /[A-Z]/g,
-    (letter, match) => `${match !== 0 ? '-' : ''}${letter.toLowerCase()}`
-  )
-
-module.exports = {
-  name: 'create:component',
-  description: 'Create a component, unit test and docs file',
-  run: async (toolbox: GluegunToolbox) => {
-    const {
-      prompt,
-      template,
-      parameters,
-      print: { highlight, info, success, error },
-    } = toolbox
-
-    const askFolder = {
-      type: 'input',
-      name: 'folder',
-      message: 'Gostaria de criar dentro de alguma pasta?',
-      hint: 'forms |  forms/specials',
-    }
-
-    const askName = {
-      type: 'input',
-      name: 'name',
-      initial: parameters.string,
-      message: 'Qual o nome do componente?',
-      hint: 'Textfield |  Button',
-    }
-
-    const { folder, name } = await prompt.ask([askFolder, askName])
-
-    const path = folder.endsWith('/')
-      ? `${folder}${pascalToKebab(name)}`
-      : `${folder}/${pascalToKebab(name)}`
-
-    const fullPath = `${COMPONENTS_PATH_GIRASSOL}/${path}/`
-
-    console.log(folder, name)
-
-    info('Isto ira criar:')
-
-    highlight(`
-    components/
-    ├── ${path}
-        └── ${name}.vue
-        └── ${pascalToKebab(name)}.spec.ts
-        └── ${name}.stories.mdx
-        └── index.ts
-    `)
-
-    try {
-      const canWrite = await prompt.confirm('Esta configuração esta correta?')
-
-      if (canWrite) {
-        info('Gerando arquivos...')
-        await template.generate({
-          props: { name, folder, nameClass: pascalToKebab(name) },
-          template: 'components/component.vue.ejs',
-          target: `${fullPath}${name}.vue`,
-        })
-
-        await template.generate({
-          props: { name, folder, nameClass: pascalToKebab(name) },
-          template: 'components/component.spec.ts.ejs',
-          target: `${fullPath}${pascalToKebab(name)}.spec.ts`,
-        })
-
-        await template.generate({
-          props: { name, folder, nameClass: pascalToKebab(name) },
-          template: 'components/component.stories.mdx.ejs',
-          target: `${fullPath}${name}.stories.mdx`,
-        })
-
-        await template.generate({
-          props: { name },
-          template: 'components/index.ts.ejs',
-          target: `${fullPath}index.ts`,
-        })
-
-        success('Arquivos gerados com sucesso!')
-      }
-    } catch (er) {
-      error('Error  inesperado')
-    }
-  },
-}