@solfacil/girassol 0.1.7 → 0.1.10

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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@solfacil/girassol",
   "description": "Girassol design system",
-  "version": "0.1.7",
+  "version": "0.1.10",
   "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,45 +37,57 @@
   "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"
+    "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"
   },
   "dependencies": {
-    "@vueuse/core": "^8.5.0",
-    "vue": "^3.2.36"
+    "@vueuse/core": "^8.6.0",
+    "gluegun": "latest",
+    "vue": "^3.2.37"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^0.23.1",
-    "@babel/core": "^7.17.9",
-    "@babel/preset-env": "^7.16.11",
-    "@iconify/json": "^2.1.28",
-    "@storybook/addon-a11y": "^6.5.3",
-    "@storybook/addon-actions": "^6.5.3",
-    "@storybook/addon-essentials": "^6.5.3",
-    "@storybook/addon-links": "^6.5.3",
+    "@babel/core": "^7.18.2",
+    "@babel/preset-env": "^7.18.2",
+    "@commitlint/cli": "^17.0.2",
+    "@commitlint/config-conventional": "^17.0.2",
+    "@iconify/json": "^2.1.57",
+    "@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.3",
-    "@storybook/vue3": "^6.5.3",
+    "@storybook/theming": "^6.5.5",
+    "@storybook/vue3": "^6.5.5",
     "@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.24",
-    "@typescript-eslint/eslint-plugin": "^5.25.0",
-    "@typescript-eslint/parser": "^5.25.0",
+    "@types/node": "^17.0.35",
+    "@typescript-eslint/eslint-plugin": "^5.26.0",
+    "@typescript-eslint/parser": "^5.26.0",
     "@vitejs/plugin-vue": "^2.3.3",
     "babel-loader": "^8.2.5",
-    "c8": "^7.11.0",
+    "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-config-prettier": "^8.5.0",
@@ -79,6 +95,7 @@
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-vue": "^8.7.1",
     "eslint-plugin-vuejs-accessibility": "^1.1.1",
+    "husky": "^8.0.1",
     "jest-axe": "^5.0.1",
     "jsdom": "^19.0.0",
     "sass": "^1.50.0",
@@ -87,6 +104,7 @@
     "stylelint-config-prettier": "^9.0.3",
     "stylelint-config-property-sort-order-smacss": "^9.0.0",
     "stylelint-order": "^5.0.0",
+    "ts-node": "^10.8.1",
     "typescript": "^4.6.3",
     "unplugin-icons": "^0.14.3",
     "vite": "^2.9.9",
@@ -112,5 +130,10 @@
     "vue.js",
     "nuxt",
     "nuxt 3"
-  ]
-}
+  ],
+  "config": {
+    "commitizen": {
+      "path": "./node_modules/cz-conventional-changelog"
+    }
+  }
+}

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/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,91 +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,
-      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',
-      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')
-    }
-  },
-}

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

@@ -1,68 +0,0 @@
-import type { GluegunToolbox } from 'gluegun'
-const RELATIVE_ROOT_PROJECT = './'
-
-import { componentsNames } from '../../../dist/girassol.umd'
-
-module.exports = {
-  name: 'generate:plugin',
-  description: 'Setting girassol global plugin to nuxt/vue',
-  run: async (toolbox: GluegunToolbox) => {
-    const {
-      parameters,
-      template,
-      print: { info, spin, highlight },
-    } = toolbox
-
-    if (parameters?.options?.nuxt) {
-      const spinnerPlugin = spin('Setting plugin')
-
-      await template.generate({
-        template: 'nuxt-plugin.ejs',
-        target: `${RELATIVE_ROOT_PROJECT}/plugins/girassol.ts`,
-      })
-
-      spinnerPlugin.succeed(`Plugin created in [/plugins/girassol.ts]!`)
-      const spinnerTypes = spin('Setting types')
-
-      await template.generate({
-        props: { componentsNames },
-        template: 'components.d.ts.ejs',
-        target: `${RELATIVE_ROOT_PROJECT}components.d.ts`,
-      })
-
-      spinnerTypes.succeed('Global types created in [/components.d.ts]!')
-    } else {
-      const spinnerPlugin = spin('Setting plugin')
-
-      await template.generate({
-        template: 'vue-plugin.ejs',
-        target: `${RELATIVE_ROOT_PROJECT}/src/plugins/girassol.ts`,
-      })
-
-      spinnerPlugin.succeed(`Plugin created in [/src/plugins/girassol.ts]!`)
-
-      const spinnerTypes = spin('Setting types')
-
-      await template.generate({
-        props: { componentsNames },
-        template: 'components.d.ts.ejs',
-        target: `${RELATIVE_ROOT_PROJECT}/src/components.d.ts`,
-      })
-
-      spinnerTypes.succeed('Global types created in [/src/components.d.ts]!')
-
-      info('Please, add command below to src/main.ts')
-      highlight(`import girassol from 'plugins/girassol'`)
-      highlight(`createApp(App).use(girassol)`)
-    }
-
-    const spinnerWindi = spin('Setting plugin')
-
-    await template.generate({
-      template: 'windi.config.ts.ejs',
-      target: `${RELATIVE_ROOT_PROJECT}/windi.config.ts`,
-    })
-
-    spinnerWindi.succeed(`Windicss config created in [/windi.config.ts]!`)
-  },
-}

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

@@ -1,38 +0,0 @@
-import type { GluegunToolbox } from 'gluegun'
-const RELATIVE_ROOT_PROJECT = './'
-
-import { componentsNames } from '../../../dist/girassol.umd'
-
-module.exports = {
-  name: 'generate:plugin',
-  description: 'Setting girassol global plugin to nuxt/vue',
-  run: async (toolbox: GluegunToolbox) => {
-    const {
-      parameters,
-      template,
-      print: { spin },
-    } = toolbox
-
-    if (parameters?.options?.nuxt) {
-      const spinnerTypes = spin('Setting types')
-
-      await template.generate({
-        props: { componentsNames },
-        template: 'components.d.ts.ejs',
-        target: `${RELATIVE_ROOT_PROJECT}components.d.ts`,
-      })
-
-      spinnerTypes.succeed(`Global types created in [/components.d.ts]!`)
-    } else {
-      const spinnerTypes = spin('Setting types')
-
-      await template.generate({
-        props: { componentsNames },
-        template: 'components.d.ts.ejs',
-        target: `${RELATIVE_ROOT_PROJECT}/src/components.d.ts`,
-      })
-
-      spinnerTypes.succeed('Global types created in [/src/components.d.ts]!')
-    }
-  },
-}

package/cli/src/commands/girassol.ts

@@ -1,12 +0,0 @@
-import type { GluegunCommand } from 'gluegun'
-
-const command: GluegunCommand = {
-  name: 'girassol',
-  run: async (toolbox) => {
-    const { print } = toolbox
-
-    print.info('Welcome Girassol CLI')
-  },
-}
-
-module.exports = command

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

@@ -1,17 +0,0 @@
-import type { GluegunToolbox } from 'gluegun'
-
-// add your CLI-specific functionality here, which will then be accessible
-// to your commands
-module.exports = (toolbox: GluegunToolbox) => {
-  toolbox.foo = () => {
-    toolbox.print.info('called foo extension')
-  }
-
-  // enable this if you want to read configuration in from
-  // the current folder's package.json (in a "girassol" property),
-  // girassol.config.json, etc.
-  // toolbox.config = {
-  //   ...toolbox.config,
-  //   ...toolbox.config.loadConfig("girassol", process.cwd())
-  // }
-}

package/cli/src/templates/components/component.spec.ts.ejs

@@ -1,20 +0,0 @@
-import '@testing-library/jest-dom'
-import userEvent from '@testing-library/user-event'
-
-import { render, screen } from '@testing-library/vue'
-
-import <%- props.name %>  from './<%- props.name %>.vue'
-
-describe('[<%- props.folder %>] <%- props.name %>', () => {
-  it('Renders text <%- props.name %> pass by label prop', () => {
-    const label = 'awesome!'
-
-    render(<%- props.name %>, {
-      props: {
-        label
-      },
-    })
-
-    screen.getByText(label)
-  })
-})

package/cli/src/templates/components/component.stories.mdx.ejs

@@ -1,74 +0,0 @@
-import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs'
-import { withDesign } from 'storybook-addon-designs'
-
-import <%- props.name %>  from './<%- props.name %>.vue'
-
-<Meta
-  title="Componentes/<%- props.folder %>/<%- props.name %>"
-  component={<%- props.name %>}
-  decorators={[withDesign]}
-  parameters={{
-    design: {
-      type: 'figma',
-      url: '',
-    },
-  }}
-  argTypes={{
-    label: 'hi!'
-  }}
-/>
-
-export const Template = ({ label,...args }) => ({
-  components: { <%- props.name %> },
-  setup() {
-    return { args, label }
-  },
-  template: `<<%- props.name %> v-bind="args" id="teste"></<%- props.name %>>`,
-})
-
-# <%- props.name %>
-
-## Melhores praticas
-
-
-## Acessibilidade
-
-
-## Importar localmente
-
-```js dark
-import { Sol<%- props.name %> } from '@solfacil/girassol'
-```
-
-## Variants 
-<Canvas>
-  <Story
-    name="Default"
-    args={{
-      label: 'default',
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-## Exemplos de uso
-
-```html dark
-<Sol<%- props.name %> id="just-test">Awesome component!</Sol<%- props.name %>>
-```
-
-## Playground
-
-<Canvas>
-  <Story
-    name="Playground"
-    args={{
-      label: 'its work fine!',
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-<ArgsTable story="Playground" />