@sula-tech/webcomponents 0.1.1 → 0.2.1

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.2.1",
   "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