v2.0.0 🌈

Versão 2.0.0

A nova versão 2.0.0 já está disponível e com ela muitas mudanças. A principal mudança foi a substituição da biblioteca Stitches.js pelo Tailwindcss. Além da mudança de biblioteca de estilização também temos a adição de novos componentes e a modificação na utilização do Design System.

Tailwindcss

A mudança para Tailwindcss tem um impacto direto na forma com que os componentes são estilizados e também na forma com que o Design System é disponibilizado. O nosso tema se mantém, com os mesmos tokens de espaçamento e de cores.

Novos componentes

Avatar

Divider

File

Flex

FloatCard

Icon

Loading

Menu

OTPInput

Pagination

Radio

Select

Sidebar

Switch

Toast

Tooltip

Para utilizar os componentes é necessário importar a estilização da biblioteca de @coaktion/visu/styles

import '@coaktion/visu/styles'

Caso esteja utilizando o tailwindcss no projeto, faça a importação da estilização da biblioteca juntamente da estilização do tailwindcss

@import '@coaktion/visu/styles';

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

Com a estilização importada, basta importar um componente e adicionar ele ao projeto.

import { Button } from '@coaktion/visu'

function App() {
  return <Button.Root>Clique aqui</Button.Root>
}

export default App

Design System

O Design System do Visu foi recriado para ser utilizado em conjunto com o Tailwindcss, como um plugin. Para utilizar o Design System do Visu basta importar o Design System de @coaktion/visu/dist/theme-plugin e adicioná-lo ao arquivo tailwind.config.ts

import VisuTailwindcssPlugin from '@coaktion/visu/dist/theme-plugin'
import type { Config } from 'tailwindcss'

export default {
  content: ['./index.html', './src/**/*.{ts,tsx}'],
  plugins: [VisuTailwindcssPlugin],
} satisfies Config

Ao adicionar o plugin do Visu será possível utilizar todos os tokens do Design System do Visu no projeto, como cores, espaçamentos, etc.