@sula-tech/webcomponents 0.5.0 → 0.7.0

package/dist/webcomponents/webcomponents.esm.js

@@ -15,7 +15,19 @@ export { s as setNonce } from "./p-or7qTZgT.js";
 
 patchBrowser().then((async e => {
   await t();
-  return a([ [ "p-51f9d6a5", [ [ 1, "sula-chip", {
+  return a([ [ "p-da741505", [ [ 1, "sula-button", {
+    text: [ 1025 ],
+    icon: [ 1025 ],
+    leftIcon: [ 1025, "left-icon" ],
+    rightIcon: [ 1025, "right-icon" ],
+    appearance: [ 1025 ],
+    type: [ 1025 ],
+    size: [ 1025 ],
+    status: [ 1025 ],
+    loading: [ 1028 ],
+    buttonDisabled: [ 1028, "button-disabled" ],
+    fullWidth: [ 1028, "full-width" ]
+  } ], [ 1, "sula-chip", {
     text: [ 1025 ],
     appearance: [ 1025 ],
     disabled: [ 1028 ],
@@ -44,15 +56,6 @@ patchBrowser().then((async e => {
     text: [ 1025 ],
     icon: [ 1025 ],
     hasSlotContent: [ 32 ]
-  } ], [ 1, "sula-button", {
-    text: [ 1025 ],
-    icon: [ 1025 ],
-    appearance: [ 1025 ],
-    type: [ 1025 ],
-    size: [ 1025 ],
-    status: [ 1025 ],
-    loading: [ 1028 ],
-    buttonDisabled: [ 1028, "button-disabled" ]
   } ], [ 1, "sula-checkbox", {
     type: [ 1025 ],
     label: [ 1025 ],
@@ -60,6 +63,23 @@ patchBrowser().then((async e => {
     disabled: [ 1028 ],
     checked: [ 1028 ],
     isFocus: [ 32 ]
+  } ], [ 1, "sula-progress-bar", {
+    appearance: [ 1025 ],
+    state: [ 1025 ],
+    topLabel: [ 1025, "top-label" ],
+    bottomLabel: [ 1025, "bottom-label" ],
+    progress: [ 1026 ],
+    showProgress: [ 1028, "show-progress" ]
+  }, null, {
+    progress: [ "validateProgress" ]
+  } ], [ 1, "sula-search-bar", {
+    value: [ 1025 ],
+    searchBarStyle: [ 1025, "search-bar-style" ],
+    placeholder: [ 1025 ],
+    leftIcon: [ 1025, "left-icon" ],
+    rightIcon: [ 1025, "right-icon" ],
+    isFocused: [ 32 ],
+    textValue: [ 32 ]
   } ], [ 1, "sula-tag", {
     label: [ 1025 ],
     icon: [ 1025 ],
@@ -91,9 +111,6 @@ patchBrowser().then((async e => {
     disabled: [ 4 ]
   } ], [ 1, "sula-timeline-list", {
     sulaTimelineList: [ 1040, "sula-timeline-list" ]
-  } ], [ 1, "sula-loader", {
-    size: [ 1 ],
-    animationInstance: [ 32 ]
   } ], [ 1, "sula-radio-button", {
     checked: [ 1028 ],
     label: [ 1025 ],
@@ -118,7 +135,10 @@ patchBrowser().then((async e => {
     isActive: [ 32 ],
     textValue: [ 32 ],
     textareaIsFocused: [ 32 ]
-  }, [ [ 4, "click", "handleClick" ] ] ], [ 1, "sula-menu-select-list", {
+  }, [ [ 4, "click", "handleClick" ] ] ], [ 1, "sula-loader", {
+    size: [ 1 ],
+    animationInstance: [ 32 ]
+  } ], [ 1, "sula-menu-select-list", {
     items: [ 1040 ],
     fullWidth: [ 4, "full-width" ]
   } ], [ 0, "sula-icon", {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sula-tech/webcomponents",
-  "version": "0.5.0",
+  "version": "0.7.0",
   "description": "A web component library built with Stencil",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",

package/readme.md

@@ -26,25 +26,14 @@ Para uso em frameworks, [consulte a documentação do Stencil](https://stenciljs
 
 ### Configuração do TailwindCSS
 
-Para garantir que as cores sejam aplicadas corretamente, é necessário utilizar o plugin do design system com o TailwindCSS:
+Para que as cores do design system sejam aplicadas corretamente aos componentes, é **obrigatório** configurar o plugin do design system junto ao TailwindCSS.
 
-```bash
-npm i @sula-tech/tailwind-css-plugin
-```
+### Como configurar:
 
-Configure o plugin no seu arquivo `tailwind.config.js`:
+1. Instale e configure o plugin seguindo o [guia de instalação completo](https://bitbucket.org/sulamerica/sula-tailwind-css/src/develop/README.md)
+2. Certifique-se de que o plugin está devidamente integrado ao seu arquivo de configuração do Tailwind
 
-```js
-const sulaPlugin = require('@sula-tech/tailwind-css-plugin/src/tailwind-design-system-plugin');
-
-module.exports = {
-  // ... outras configurações
-  plugins: [
-    sulaPlugin,
-    // ... outros plugins
-  ],
-};
-```
+> ⚠️ **Importante**: Sem essa configuração, as cores dos componentes não serão exibidas conforme o esperado.
 
 ### Configuração de Ícones
 
@@ -81,20 +70,91 @@ import { applyPolyfills, defineCustomElements } from '@sula-tech/webcomponents/l
 defineCustomElements();
 ```
 
-### Aplicações React
+## **Instalação em Aplicações React**
+
+### 1. Instalação do Pacote
 
 ```bash
-npm i @sula-tech/webcomponents
+npm install @sula-tech/webcomponents
 ```
 
-No seu arquivo `src/index.js` ou `src/index.tsx` (para projetos TypeScript), adicione os seguintes imports, preferencialmente antes da renderização do React:
+### 2. Configuração Básica
+
+No arquivo principal da sua aplicação (`src/index.js` ou `src/index.tsx`), adicione a configuração dos Web Components **antes** da renderização do React:
 
 ```js
 import { applyPolyfills, defineCustomElements } from '@sula-tech/webcomponents/loader';
 
+// Inicializa os Web Components
 defineCustomElements();
+
+// Resto do seu código de inicialização do React...
 ```
 
+> 💡 **Dica**: É importante importar e executar `defineCustomElements()` antes de renderizar qualquer componente React que utilize os Web Components.
+
+### 3. Configuração para TypeScript
+
+Se você estiver usando TypeScript, siga os passos adicionais abaixo:
+
+#### 3.1. Criação do arquivo de tipos
+
+Crie o arquivo `src/types/sula-components.d.ts`:
+
+```typescript
+import { HTMLAttributes } from 'react';
+
+declare module 'react' {
+  namespace JSX {
+    interface IntrinsicElements {
+      [K: `sula-${string}`]: HTMLAttributes<HTMLElement> & {
+        className?: string;
+        [prop: string]: unknown;
+      };
+    }
+  }
+}
+```
+
+#### 3.2. Atualização do tsconfig.json
+
+Adicione as seguintes configurações ao seu `tsconfig.json`:
+
+```json
+{
+  "compilerOptions": {
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true
+  },
+  "include": [
+    "src/**/*",
+    "src/types/**/*"
+  ]
+}
+```
+
+### ✅ Verificação da Instalação
+
+Após seguir os passos acima, você pode testar se a instalação foi bem-sucedida utilizando qualquer componente da biblioteca:
+
+```jsx
+function App() {
+  return (
+    <div>
+      <sula-button
+        text="Default Button"
+        appearance="default"
+        type="text"
+        size="default"
+        status="primary"
+        loading="false"
+        button-disabled="false"
+      ></sula-button>
+    </div>
+  );
+}
+```
 ## Quero contribuir
 
 Veja o [guia de contribuição](CONTRIBUTING.md).