Sula Webcomponents

Como instalar

$3

Instale a dependência:

``bash
npm i @sula-tech/webcomponents
`

E importe o webcomponents.esm.js:

`js

`

Para projetos legados, importe o webcomponents.js:

`js

`

Para uso em frameworks, consulte a documentação do Stencil.

$3

Para que as cores do design system sejam aplicadas corretamente aos componentes, é obrigatório configurar o plugin do design system junto ao TailwindCSS.

$3

1. Instale e configure o plugin seguindo o guia de instalação completo
2. Certifique-se de que o plugin está devidamente integrado ao seu arquivo de configuração do Tailwind

> ⚠️ Importante: Sem essa configuração, as cores dos componentes não serão exibidas conforme o esperado.

$3

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';
`

$3

`bash
npm i @sula-tech/webcomponents
`

É 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';

@NgModule({
declarations: [YourComponent],
imports: [CommonModule, OtherModules],
schemas: [CUSTOM_ELEMENTS_SCHEMA], // Necessário em cada módulo que utiliza webcomponents
})
export class YourModule {}
`

E no final do arquivo main.ts, adicione os seguintes imports:

`ts
import { applyPolyfills, defineCustomElements } from '@sula-tech/webcomponents/loader';

defineCustomElements();
`

Instalação em Aplicações React

$3

`bash
npm install @sula-tech/webcomponents
`

$3

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

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 & {
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/*/"
]
}
`

$3

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 (



);
}
``

Quero contribuir

Veja o guia de contribuição.