Skip to content

Commit

Permalink
doc: updated readme and storybook docs for components without tailwin…
Browse files Browse the repository at this point in the history
…dcss (#96)
  • Loading branch information
leandroppf committed Oct 20, 2023
1 parent 7ad8df5 commit 52bef99
Show file tree
Hide file tree
Showing 3 changed files with 29 additions and 12 deletions.
9 changes: 8 additions & 1 deletion apps/docs/src/index.stories.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ export default {

```

Com a configuração do `tailwind.config.js` realizada, basta importar um componente e adicionar ele ao projeto seguindo a [documentação dos componentes no storybook](?path=/docs/componentes--docs)
Com a configuração do `tailwind.config.js` realizada, basta importar um componente e adicionar ele ao projeto seguindo a [documentação dos componentes no storybook(em construção)](https://feat-update-storybook-v7--645ce9be8ed7e2ea5066a152.chromatic.com/)

```typescript
import { Button } from '@droz-js/visu'
Expand All @@ -59,6 +59,13 @@ function App() {
export default App
```

#### Utilização sem Tailwindcss
Para utilizar sem o Tailwindcss é necessário importar a estilização de `@droz-js/visu/styles`. **Essa etapa não deve ser realizada caso esteja utilizando o Tailwindcss**

```typescript
import '@droz-js/visu/styles'
```

### Design System

O Design System do Visu foi criado para ser utilizado em conjunto com o [Tailwindcss](https://tailwindcss.com/), como um plugin. Para utilizar o Design System do Visu basta importar o Design System de `@droz-js/visu/dist/theme-plugin` e adicioná-lo ao arquivo `tailwind.config.ts`
Expand Down
25 changes: 14 additions & 11 deletions apps/docs/src/stories/components.stories.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -16,23 +16,19 @@ import { Meta } from '@storybook/blocks';

## Componentes

Para utilizar os componentes é necessário importar a estilização da biblioteca de `@droz-js/visu/styles`
O Visu é construido utilizando o Tailwind CSS como base para a estilização dos componentes. Para utilizar os componentes corretamente é necessário ter o Tailwind CSS instalado no projeto. No arquivo `tailwind.config.js` o arquivo `@droz-js/visu/dist/visu.es.js` do Visu precisa ser adicionado ao content para que os componentes recebam as atualizações de estilização ao modificar alguma configuração do tema do Tailwind CSS.

```typescript
import '@droz-js/visu/styles'
```
import VisuTailwindcssPlugin from '@droz-js/visu/dist/theme-plugin'
import type { Config } from 'tailwindcss'

Caso esteja utilizando o `tailwindcss` no projeto, faça a importação da estilização da biblioteca juntamente da estilização do tailwindcss
export default {
content: ['./index.html', './src/**/*.{ts,tsx}', './node_modules/@droz-js/visu/dist/visu.es.js'],
} satisfies Config

```css
@import '@droz-js/visu/styles';

@tailwind base;
@tailwind components;
@tailwind utilities;
```

Com a estilização importada, basta importar um componente e adicionar ele ao projeto seguindo a [documentação dos componentes no storybook](?path=/docs/componentes--docs)
Com a configuração do `tailwind.config.js` realizada, basta importar um componente e adicionar ele ao projeto seguindo a [documentação dos componentes no storybook(em construção)](https://feat-update-storybook-v7--645ce9be8ed7e2ea5066a152.chromatic.com/)

```typescript
import { Button } from '@droz-js/visu'
Expand All @@ -44,3 +40,10 @@ function App() {
export default App
```

### Utilização sem Tailwindcss
Para utilizar sem o Tailwindcss é necessário importar a estilização de `@droz-js/visu/styles`. **Essa etapa não deve ser realizada caso esteja utilizando o Tailwindcss**

```typescript
import '@droz-js/visu/styles'
```

7 changes: 7 additions & 0 deletions packages/visu/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,13 @@ function App() {
export default App
```

#### Utilização sem Tailwindcss
Para utilizar sem o Tailwindcss é necessário importar a estilização de `@droz-js/visu/styles`. **Essa etapa não deve ser realizada caso esteja utilizando o Tailwindcss**

```typescript
import '@droz-js/visu/styles'
```

### Design System

O Design System do Visu foi criado para ser utilizado em conjunto com o [Tailwindcss](https://tailwindcss.com/), como um plugin. Para utilizar o Design System do Visu basta importar o Design System de `@droz-js/visu/dist/theme-plugin` e adicioná-lo ao arquivo `tailwind.config.ts`
Expand Down

0 comments on commit 52bef99

Please sign in to comment.