@solfacil/girassol 0.1.0 → 0.1.5

package/.vscode/extensions.json

@@ -12,6 +12,7 @@
     "formulahendry.auto-close-tag",
     "wix.vscode-import-cost",
     "syler.sass-indented",
-    "streetsidesoftware.code-spell-checker"
+    "streetsidesoftware.code-spell-checker",
+    "ZixuanChen.vitest-explorer"
   ]
 }

package/.vscode/settings.json

@@ -2,17 +2,27 @@
   "cSpell.words": [
     "antfu",
     "attributify",
+    "composables",
+    "describedby",
+    "esnext",
+    "gluegun",
+    "iconify",
+    "IIFE",
+    "nuxt",
     "solfacil",
     "Solfácil",
     "textfield",
     "Textfield",
-    "vitejs",
-    "vueuse",
-    "windicss",
     "theming",
-    "iconify",
     "unplugin",
-    "esnext"
+    "vitejs",
+    "vitest",
+    "vue",
+    "vue.js",
+    "vuejs",
+    "vueuse",
+    "windi",
+    "windicss"
   ],
   "prettier.enable": true,
   "editor.codeActionsOnSave": {

package/README.md

@@ -1,13 +1,24 @@
 <div align="center">
-  <img src="https://raw.githubusercontent.com/solfacil/components-ui/main/public/logo-solfacil-color.svg" />
+  <img src="http://girassol.solfacil.tech/public/girassol.svg" />
 </div>
 
-Biblioteca de componentes
-
+Girassol design system
 # Documentação
+<a href="http://girassol.solfacil.tech/?path=/docs/introdu%C3%A7%C3%A3o-introdu%C3%A7%C3%A3o--page" target="_blank">Storybook</a>
 
 # Instalação
 
+Basta executar:
+```bash dark
+yarn add @solfacil/girassol
+```
+
+e colocar no `scripts` dentro do `package.json` para ter acesso ao nosso CLI:
+
+```json dark
+"girassol": "girassol"
+```
+
 # Licença
 
 <a href="https://opensource.org/licenses/MIT"><img src="https://img.shields.io/npm/l/buefy.svg?logo=github" /></a>

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

@@ -0,0 +1,91 @@
+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,4 +1,4 @@
-import { GluegunToolbox } from 'gluegun'
+import type { GluegunToolbox } from 'gluegun'
 const RELATIVE_ROOT_PROJECT = './'
 
 import { componentsNames } from '../../../dist/girassol.umd'
@@ -18,18 +18,19 @@ module.exports = {
 
       await template.generate({
         template: 'nuxt-plugin.ejs',
-        target: `${RELATIVE_ROOT_PROJECT}components.d.ts`,
+        target: `${RELATIVE_ROOT_PROJECT}/plugins/girassol.ts`,
       })
 
-      spinnerPlugin.succeed('Plugin created!')
+      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!')
+      spinnerTypes.succeed('Global types created in [/components.d.ts]!')
     } else {
       const spinnerPlugin = spin('Setting plugin')
 
@@ -38,21 +39,30 @@ module.exports = {
         target: `${RELATIVE_ROOT_PROJECT}/src/plugins/girassol.ts`,
       })
 
-      spinnerPlugin.succeed('Plugin created!')
+      spinnerPlugin.succeed(`Plugin created in [/src/plugins/girassol.ts]!`)
 
       const spinnerTypes = spin('Setting types')
 
       await template.generate({
-        template: 'components.d.ts.ejs',
         props: { componentsNames },
+        template: 'components.d.ts.ejs',
         target: `${RELATIVE_ROOT_PROJECT}/src/components.d.ts`,
       })
 
-      spinnerTypes.succeed('Global types created!')
+      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,4 +1,4 @@
-import { GluegunToolbox } from 'gluegun'
+import type { GluegunToolbox } from 'gluegun'
 const RELATIVE_ROOT_PROJECT = './'
 
 import { componentsNames } from '../../../dist/girassol.umd'
@@ -17,21 +17,22 @@ module.exports = {
       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!')
+      spinnerTypes.succeed(`Global types created in [/components.d.ts]!`)
     } else {
       const spinnerTypes = spin('Setting types')
 
       await template.generate({
-        template: 'components.d.ts.ejs',
         props: { componentsNames },
+        template: 'components.d.ts.ejs',
         target: `${RELATIVE_ROOT_PROJECT}/src/components.d.ts`,
       })
 
-      spinnerTypes.succeed('Global types created!')
+      spinnerTypes.succeed('Global types created in [/src/components.d.ts]!')
     }
   },
 }

package/cli/src/commands/girassol.ts

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

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

@@ -1,4 +1,4 @@
-import { GluegunToolbox } from 'gluegun'
+import type { GluegunToolbox } from 'gluegun'
 
 // add your CLI-specific functionality here, which will then be accessible
 // to your commands

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

@@ -0,0 +1,20 @@
+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

@@ -0,0 +1,74 @@
+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" />

package/cli/src/templates/components/component.vue.ejs

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+  defineProps<{
+    id: string
+    label?: string
+  }>()
+  
+  const emit = defineEmits<{
+    (e: 'change', value: string): void
+  }>()
+  
+</script>
+
+<template>
+  <div class="sol-<%- props.nameClass %>-core" >
+    {{ label }}
+  </div>
+</template>
+
+<style lang="scss">
+.sol-<%- props.nameClass %>-core {
+  @apply bg-brand-primary-medium px-2xs;
+}
+</style>

package/cli/src/templates/components/index.ts.ejs

@@ -0,0 +1,10 @@
+import type { App } from 'vue'
+import Sol<%- props.name %> from './<%- props.name %>.vue'
+
+Sol<%- props.name %>.install = (app: App) => {
+  app.component('Sol<%- props.name %>', Sol<%- props.name %>)
+}
+
+export {
+  Sol<%- props.name %>,
+}

package/cli/src/templates/windi.config.ts.ejs

@@ -0,0 +1,3 @@
+import windiconfig from '@solfacil/girassol/windi.config'
+
+export default windiconfig