@sula-tech/webcomponents 0.1.1 → 0.3.0

package/dist/webcomponents/webcomponents.esm.js

@@ -1,27 +1,34 @@
-import { p as a, b as t } from "./p-cca32e44.js";
+import { p as e, b as t } from "./p-5a36af0f.js";
 
-export { s as setNonce } from "./p-cca32e44.js";
+export { s as setNonce } from "./p-5a36af0f.js";
 
-import { g as e } from "./p-e1255160.js";
+import { g as a } from "./p-e1255160.js";
 
 /*
  Stencil Client Patch Browser v4.26.0 | MIT Licensed | https://stenciljs.com
  */ var patchBrowser = () => {
-  const s = import.meta.url;
-  const t = {};
-  if (s !== "") {
-    t.resourcesUrl = new URL(".", s).href;
+  const t = import.meta.url;
+  const a = {};
+  if (t !== "") {
+    a.resourcesUrl = new URL(".", t).href;
   }
-  return a(t);
+  return e(a);
 };
 
-patchBrowser().then((async a => {
-  await e();
-  return t([ [ "p-82d7a024", [ [ 1, "sula-avatar", {
+patchBrowser().then((async e => {
+  await a();
+  return t([ [ "p-89f57a33", [ [ 1, "sula-avatar", {
     size: [ 1 ],
     imageUrl: [ 1, "image-url" ],
     text: [ 1 ],
     icon: [ 1 ]
+  } ], [ 1, "sula-badge", {
+    status: [ 1025 ],
+    size: [ 1025 ],
+    type: [ 1025 ],
+    text: [ 1025 ],
+    icon: [ 1025 ],
+    hasSlotContent: [ 32 ]
   } ], [ 1, "sula-button", {
     text: [ 1025 ],
     icon: [ 1025 ],
@@ -31,9 +38,57 @@ patchBrowser().then((async a => {
     status: [ 1025 ],
     loading: [ 1028 ],
     buttonDisabled: [ 1028, "button-disabled" ]
-  } ], [ 0, "sula-icon", {
+  } ], [ 1, "sula-checkbox", {
+    type: [ 1025 ],
+    label: [ 1025 ],
+    subTitle: [ 1025, "sub-title" ],
+    disabled: [ 1028 ],
+    checked: [ 1028 ],
+    isFocus: [ 32 ]
+  } ], [ 1, "sula-tag", {
+    label: [ 1025 ],
+    icon: [ 1025 ],
+    iconStatus: [ 1025, "icon-status" ],
+    size: [ 1025 ],
+    appearance: [ 1025 ],
+    fontWeight: [ 1025, "font-weight" ]
+  } ], [ 1, "sula-textfield", {
+    value: [ 1025 ],
+    type: [ 1 ],
+    status: [ 1025 ],
+    label: [ 1 ],
+    placeholder: [ 1 ],
+    disabled: [ 1028 ],
+    helpText: [ 1, "help-text" ],
+    maxLength: [ 2, "max-length" ],
+    icon: [ 1 ],
+    inputIsOpen: [ 32 ],
+    textValue: [ 32 ],
+    showPassword: [ 32 ],
+    inputIsFocused: [ 32 ]
+  }, [ [ 4, "click", "handleClick" ] ] ], [ 1, "sula-switch", {
+    type: [ 1025 ],
+    active: [ 1028 ],
+    disabled: [ 1028 ],
+    label: [ 1025 ],
+    subTitle: [ 1025, "sub-title" ],
+    isFocus: [ 32 ]
+  } ], [ 1, "sula-textarea", {
+    value: [ 1025 ],
+    status: [ 1025 ],
+    label: [ 1 ],
+    placeholder: [ 1 ],
+    disabled: [ 1028 ],
+    helpText: [ 1, "help-text" ],
+    maxLength: [ 2, "max-length" ],
+    rows: [ 2 ],
+    isActive: [ 32 ],
+    textValue: [ 32 ],
+    textareaIsFocused: [ 32 ],
+    labelAnimationClass: [ 32 ]
+  }, [ [ 4, "click", "handleClick" ] ] ], [ 0, "sula-icon", {
     icon: [ 1 ],
     customClass: [ 1, "custom-class" ]
-  } ] ] ] ], a);
+  } ] ] ] ], e);
 }));
 //# sourceMappingURL=webcomponents.esm.js.map

package/dist/webcomponents/webcomponents.esm.js.map

@@ -1 +1 @@
-{"version":3,"names":["patchBrowser","importMeta","url","opts","resourcesUrl","URL","href","promiseResolve","then","async","options","globalScripts","bootstrapLazy","size","imageUrl","text","icon","appearance","type","status","loading","buttonDisabled","customClass"],"sources":["node_modules/.pnpm/@stencil+core@4.26.0/node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Browser v4.26.0 | MIT Licensed | https://stenciljs.com\n */\n\n// src/client/client-patch-browser.ts\nimport { BUILD, NAMESPACE } from \"@stencil/core/internal/app-data\";\nimport { consoleDevInfo, doc, H, promiseResolve } from \"@stencil/core\";\nvar patchBrowser = () => {\n  if (BUILD.isDev && !BUILD.isTesting) {\n    consoleDevInfo(\"Running in development mode.\");\n  }\n  if (BUILD.cloneNodeFix) {\n    patchCloneNodeFix(H.prototype);\n  }\n  const scriptElm = BUILD.scriptDataOpts ? Array.from(doc.querySelectorAll(\"script\")).find(\n    (s) => new RegExp(`/${NAMESPACE}(\\\\.esm)?\\\\.js($|\\\\?|#)`).test(s.src) || s.getAttribute(\"data-stencil-namespace\") === NAMESPACE\n  ) : null;\n  const importMeta = import.meta.url;\n  const opts = BUILD.scriptDataOpts ? (scriptElm || {})[\"data-opts\"] || {} : {};\n  if (importMeta !== \"\") {\n    opts.resourcesUrl = new URL(\".\", importMeta).href;\n  }\n  return promiseResolve(opts);\n};\nvar patchCloneNodeFix = (HTMLElementPrototype) => {\n  const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n  HTMLElementPrototype.cloneNode = function(deep) {\n    if (this.nodeName === \"TEMPLATE\") {\n      return nativeCloneNodeFn.call(this, deep);\n    }\n    const clonedNode = nativeCloneNodeFn.call(this, false);\n    const srcChildNodes = this.childNodes;\n    if (deep) {\n      for (let i = 0; i < srcChildNodes.length; i++) {\n        if (srcChildNodes[i].nodeType !== 2) {\n          clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n        }\n      }\n    }\n    return clonedNode;\n  };\n};\nexport {\n  patchBrowser\n};\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(async (options) => {\n  await globalScripts();\n  return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n});\n"],"mappings":";;;;;;;;GAOA,KAAIA,eAAe;EAUjB,MAAMC,gBAAyBC;EAC/B,MAAMC,IAAqE;EAC3E,IAAIF,MAAe,IAAI;IACrBE,EAAKC,eAAe,IAAIC,IAAI,KAAKJ,GAAYK;AACjD;EACE,OAAOC,EAAeJ;AAAK;;AClB7BH,eAAeQ,MAAKC,MAAOC;QACnBC;EACN,OAAOC,EAAc,wCAA8B;IAAAC,MAAS;IAAAC,UAAA;IAAAC,MAAA;IAAAC,MAAA;OAAA;IAAAD,MAAA;IAAAC,MAAA;IAAAC,YAAA;IAAAC,MAAA;IAAAL,MAAA;IAAAM,QAAA;IAAAC,SAAA;IAAAC,gBAAA;OAAA;IAAAL,MAAA;IAAAM,aAAA;aAAAZ;AAAA","ignoreList":[]}
+{"version":3,"names":["patchBrowser","importMeta","url","opts","resourcesUrl","URL","href","promiseResolve","then","async","options","globalScripts","bootstrapLazy","size","imageUrl","text","icon","status","type","hasSlotContent","appearance","loading","buttonDisabled","label","subTitle","disabled","checked","isFocus","iconStatus","fontWeight","value","placeholder","helpText","maxLength","inputIsOpen","textValue","showPassword","inputIsFocused","active","rows","isActive","textareaIsFocused","labelAnimationClass","customClass"],"sources":["node_modules/.pnpm/@stencil+core@4.26.0/node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Browser v4.26.0 | MIT Licensed | https://stenciljs.com\n */\n\n// src/client/client-patch-browser.ts\nimport { BUILD, NAMESPACE } from \"@stencil/core/internal/app-data\";\nimport { consoleDevInfo, doc, H, promiseResolve } from \"@stencil/core\";\nvar patchBrowser = () => {\n  if (BUILD.isDev && !BUILD.isTesting) {\n    consoleDevInfo(\"Running in development mode.\");\n  }\n  if (BUILD.cloneNodeFix) {\n    patchCloneNodeFix(H.prototype);\n  }\n  const scriptElm = BUILD.scriptDataOpts ? Array.from(doc.querySelectorAll(\"script\")).find(\n    (s) => new RegExp(`/${NAMESPACE}(\\\\.esm)?\\\\.js($|\\\\?|#)`).test(s.src) || s.getAttribute(\"data-stencil-namespace\") === NAMESPACE\n  ) : null;\n  const importMeta = import.meta.url;\n  const opts = BUILD.scriptDataOpts ? (scriptElm || {})[\"data-opts\"] || {} : {};\n  if (importMeta !== \"\") {\n    opts.resourcesUrl = new URL(\".\", importMeta).href;\n  }\n  return promiseResolve(opts);\n};\nvar patchCloneNodeFix = (HTMLElementPrototype) => {\n  const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n  HTMLElementPrototype.cloneNode = function(deep) {\n    if (this.nodeName === \"TEMPLATE\") {\n      return nativeCloneNodeFn.call(this, deep);\n    }\n    const clonedNode = nativeCloneNodeFn.call(this, false);\n    const srcChildNodes = this.childNodes;\n    if (deep) {\n      for (let i = 0; i < srcChildNodes.length; i++) {\n        if (srcChildNodes[i].nodeType !== 2) {\n          clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n        }\n      }\n    }\n    return clonedNode;\n  };\n};\nexport {\n  patchBrowser\n};\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(async (options) => {\n  await globalScripts();\n  return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n});\n"],"mappings":";;;;;;;;GAOA,KAAIA,eAAe;EAUjB,MAAMC,gBAAyBC;EAC/B,MAAMC,IAAqE;EAC3E,IAAIF,MAAe,IAAI;IACrBE,EAAKC,eAAe,IAAIC,IAAI,KAAKJ,GAAYK;AACjD;EACE,OAAOC,EAAeJ;AAAK;;AClB7BH,eAAeQ,MAAKC,MAAOC;QACnBC;EACN,OAAOC,EAAc,wCAA8B;IAAAC,MAAS;IAAAC,UAAA;IAAAC,MAAA;IAAAC,MAAA;OAAA;IAAAC,QAAA;IAAAJ,MAAA;IAAAK,MAAA;IAAAH,MAAA;IAAAC,MAAA;IAAAG,gBAAA;OAAA;IAAAJ,MAAA;IAAAC,MAAA;IAAAI,YAAA;IAAAF,MAAA;IAAAL,MAAA;IAAAI,QAAA;IAAAI,SAAA;IAAAC,gBAAA;OAAA;IAAAJ,MAAA;IAAAK,OAAA;IAAAC,UAAA;IAAAC,UAAA;IAAAC,SAAA;IAAAC,SAAA;OAAA;IAAAJ,OAAA;IAAAP,MAAA;IAAAY,YAAA;IAAAf,MAAA;IAAAO,YAAA;IAAAS,YAAA;OAAA;IAAAC,OAAA;IAAAZ,MAAA;IAAAD,QAAA;IAAAM,OAAA;IAAAQ,aAAA;IAAAN,UAAA;IAAAO,UAAA;IAAAC,WAAA;IAAAjB,MAAA;IAAAkB,aAAA;IAAAC,WAAA;IAAAC,cAAA;IAAAC,gBAAA;KAAA;IAAAnB,MAAA;IAAAoB,QAAA;IAAAb,UAAA;IAAAF,OAAA;IAAAC,UAAA;IAAAG,SAAA;OAAA;IAAAG,OAAA;IAAAb,QAAA;IAAAM,OAAA;IAAAQ,aAAA;IAAAN,UAAA;IAAAO,UAAA;IAAAC,WAAA;IAAAM,MAAA;IAAAC,UAAA;IAAAL,WAAA;IAAAM,mBAAA;IAAAC,qBAAA;KAAA;IAAA1B,MAAA;IAAA2B,aAAA;aAAAjC;AAAA","ignoreList":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sula-tech/webcomponents",
-  "version": "0.1.1",
+  "version": "0.3.0",
   "description": "A web component library built with Stencil",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -21,22 +21,26 @@
   },
   "private": false,
   "devDependencies": {
-    "@chromatic-com/storybook": "^3.2.4",
     "@stencil/core": "^4.7.0",
-    "@storybook/addon-actions": "^8.5.1",
-    "@storybook/addon-essentials": "^8.5.1",
-    "@storybook/addon-interactions": "^8.5.1",
-    "@storybook/blocks": "^8.5.1",
-    "@storybook/html": "^8.5.1",
-    "@storybook/html-vite": "^8.5.1",
-    "@storybook/test": "^8.5.1",
+    "@storybook/addon-a11y": "^8.6.12",
+    "@storybook/addon-actions": "^8.6.12",
+    "@storybook/addon-docs": "^8.6.12",
+    "@storybook/addon-essentials": "^8.6.12",
+    "@storybook/addon-links": "^8.6.12",
+    "@storybook/addon-viewport": "^8.6.12",
+    "@storybook/builder-vite": "^8.6.12",
+    "@storybook/web-components": "^8.6.12",
+    "@storybook/web-components-vite": "^8.6.12",
     "@types/jest": "^29.5.6",
     "@types/node": "^16.18.11",
+    "autoprefixer": "^10.4.21",
+    "fs-extra": "^11.3.0",
     "jest": "^29.7.0",
     "jest-cli": "^29.7.0",
+    "postcss": "^8.5.3",
     "puppeteer": "^24.1.1",
     "stencil-tailwind-plugin": "^1.8.0",
-    "storybook": "^8.5.1",
+    "storybook": "^8.6.12",
     "tailwindcss": "^3.4.10",
     "typescript": "^5.5.4"
   },
@@ -45,16 +49,20 @@
     "@phosphor-icons/web": "^2.1.1",
     "@stencil/sass": "^3.0.12",
     "@sula-tech/design-tokens": "^1.5.3",
-    "@sula-tech/sula-tailwind-css": "^1.0.2"
+    "@sula-tech/sula-tailwind-css": "^1.0.2",
+    "@sula-tech/tailwind-css-plugin": "^1.1.1"
   },
   "scripts": {
     "build": "stencil build",
     "start": "stencil build --dev --watch --serve",
-    "test": "stencil test --spec --e2e",
+    "test": "stencil test --spec --e2e --runInBand",
     "test:coverage": "stencil test --spec --e2e --coverage --json --outputFile=.jest-test-results.json",
     "test.watch": "stencil test --spec --e2e --watchAll",
     "generate": "stencil generate",
+    "prestorybook": "stencil build --dev",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "prebuild-storybook": "stencil build",
+    "build-storybook": "storybook build",
+    "postbuild-storybook": "node ./scripts/copy-stencil-assets.js"
   }
 }

package/readme.md

@@ -24,25 +24,53 @@ Para projetos legados, importe o `webcomponents.js`:
 
 Para uso em frameworks, [consulte a documentação do Stencil](https://stenciljs.com/docs/overview).
 
+### Configuração do TailwindCSS
+
+Para garantir que as cores sejam aplicadas corretamente, é necessário utilizar o plugin do design system com o TailwindCSS:
+
+```bash
+npm i @sula-tech/tailwind-css-plugin
+```
+
+Configure o plugin no seu arquivo `tailwind.config.js`:
+
+```js
+const sulaPlugin = require('@sula-tech/tailwind-css-plugin/src/tailwind-design-system-plugin');
+
+module.exports = {
+  // ... outras configurações
+  plugins: [
+    sulaPlugin,
+    // ... outros plugins
+  ],
+};
+```
+
+### Configuração de Ícones
+
+Para que os ícones funcionem corretamente, adicione a seguinte linha no seu arquivo de estilos global:
+
+```css
+@import '@sula-tech/webcomponents/dist/webcomponents/assets/icons/icons.css';
+```
+
 ### Aplicações Angular
 
 ```bash
 npm i @sula-tech/webcomponents
 ```
 
-No seu arquivo `app.module.ts`, declare o `CUSTOM_ELEMENTS_SCHEMA`:
+É necessário declarar o `CUSTOM_ELEMENTS_SCHEMA` em **cada módulo** onde os webcomponents serão utilizados:
 
 ```ts
-import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; // <-- importe aqui
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 
 @NgModule({
-  declarations: [AppComponent],
-  imports: [BrowserModule, AppRoutingModule],
-  providers: [],
-  bootstrap: [AppComponent],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA], // <-- declare isso
+  declarations: [YourComponent],
+  imports: [CommonModule, OtherModules],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA], // Necessário em cada módulo que utiliza webcomponents
 })
-export class AppModule {}
+export class YourModule {}
 ```
 
 E no final do arquivo `main.ts`, adicione os seguintes imports:
@@ -51,11 +79,6 @@ E no final do arquivo `main.ts`, adicione os seguintes imports:
 import { applyPolyfills, defineCustomElements } from '@sula-tech/webcomponents/loader';
 
 defineCustomElements();
-
-// para suporte ao IE (opcional)
-applyPolyfills().then(() => {
-  defineCustomElements();
-});
 ```
 
 ### Aplicações React
@@ -70,11 +93,6 @@ No seu arquivo `src/index.js` ou `src/index.tsx` (para projetos TypeScript), adi
 import { applyPolyfills, defineCustomElements } from '@sula-tech/webcomponents/loader';
 
 defineCustomElements();
-
-// para suporte ao IE (opcional)
-applyPolyfills().then(() => {
-  defineCustomElements();
-});
 ```
 
 ## Quero contribuir