![](\"public/icon.svg\"){kind=icon}
\n \n \n
\n O Design System é um conjunto de diretrizes, componentes e padrões visuais e de código, criado para garantir consistência e eficiência, auxiliando no desenvolvemento de aplicações de excelente qualidade.\n
\n
\n\n## Como usar\n\nPara usar o Design System no seu projeto, execute o comando:\n\n```\nnpm install @tray-tecnologia/design-system\n```\n\n#### Importações\n\nTodos os componentes podem ser importados individualmente pelo nome global do pacote.\n\n```ts\nimport { Button } from '@tray-tecnologia/design-system';\n```\n\nCaso deseja adicionar o Design System como um plugin da sua aplicação Vue com as diretivas já instaladas, use:\n\n```ts\nimport { DS } from '@tray-tecnologia/design-system/setup';\n```\n\nCaso desejar importar os filtros ou as diretivas disponibilizadas pelo Design System:\n\n```ts\nimport { initials } from '@tray-tecnologia/design-system/filters';\n```\n\nCaso deseja usar somente as diretivas:\n\n```ts\nimport directives from '@tray-tecnologia/design-system/directives';\n```\n\nCaso precisar qualquer coisa relacionada aos estilos disponibilizados:\n\n```scss\nimport '@tray-tecnologia/design-system/theme';\n```\n\nVale ressaltar que a importação acima não engloba os estilos individuais dos componentes, somente a base usada por todo o Design System. Estão incluídos: normalização, helpers, mixins, tokens, variáveis, formulários, tabelas e tooltips.\n\n## Versões\n\nPara as últimas alterações e versões, visite [releases](https://github.com/uxshop/design-system/releases).\n\n## Desenvolvimento\n\n#### Configuração básica\n\nPara auxiliar no desenvolvimento desse pacote, siga os passos abaixo para executá-lo em sem ambiente local.\n\n1. Clone esse repositório;\n2. Execute `npm install` para instalar as dependencias;\n3. Execute `npm run dev` para iniciar o desenvolvimento.\n\nO projeto inclui uma instalação básica do Vue no qual poderá testar os componentes criados.\n\n#### Usando localmente com outros projetos\n\nCaso esteja trabalhando em alguma funcionalidade para o Design System e queira testar em outro projeto, siga os passos descritos.\n\n1. Execute `npm install` para instalar as dependencias;\n2. Execute `npm link` para criar um link simbólico do pacote no seu ambiente global;\n3. Acesse a pasta do outro projeto que deseja usar o Design System;\n4. Execute `npm link @tray-tecnologia/design-system` para usar a cópia do Design System loca no projeto;\n\nNesse modo, qualquer alteração realizada na pasta local do Design System deve refletir automaticamente no outro projeto.\n\n\n#### Componentes Depreciados que serão removidos em breve\n\n- TableList\n- ButtonDarkMode\n- Breadcrumb\n- CardAnnotation\n- FrameAnnotation\n- CalloutCard\n- FormHelper\n- ListGroup\n- ProgressIndeterminate\n- Topbar\n- StatsItem\n- StatsGroup\n- IconButton\n- ButtonAction\n\nRecomendamos não utilizar esses componentes em novos projetos, pois serão removidos em breve.\n\n\n#### Documentação\n\nO projeto inclui o Storybook, com instruções de uso dos componentes já criados. Para executar o Storybook basta executar `npm run storybook`.\n","readmeFilename":"README.md"}