@solfacil/girassol 0.1.3 → 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,8 +2,13 @@
   "cSpell.words": [
     "antfu",
     "attributify",
+    "composables",
+    "describedby",
     "esnext",
+    "gluegun",
     "iconify",
+    "IIFE",
+    "nuxt",
     "solfacil",
     "Solfácil",
     "textfield",
@@ -11,6 +16,10 @@
     "theming",
     "unplugin",
     "vitejs",
+    "vitest",
+    "vue",
+    "vue.js",
+    "vuejs",
     "vueuse",
     "windi",
     "windicss"

package/README.md

@@ -1,5 +1,5 @@
 <div align="center">
-  <img src="https://raw.githubusercontent.com/solfacil/girassol/develop/public/girassol.svg?token=GHSAT0AAAAAABRQP4AJEP625ZKYT2QDG3NSYSXE5HQ" />
+  <img src="http://girassol.solfacil.tech/public/girassol.svg" />
 </div>
 
 Girassol design system

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'

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'

package/cli/src/commands/girassol.ts

@@ -1,4 +1,4 @@
-import { GluegunCommand } from 'gluegun'
+import type { GluegunCommand } from 'gluegun'
 
 const command: GluegunCommand = {
   name: 'girassol',

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 %>,
+}