Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[4.x] Adiciona o sistema de publicação #401

Merged
merged 9 commits into from
Dec 13, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 29 additions & 0 deletions .github/workflows/release.action.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
name: 'Publish'

on:
release:
types: [published]

env:
NODE_VERSION: 20.x

jobs:
publish:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with:
node-version: ${{ env.NODE_VERSION }}
registry-url: 'https://registry.npmjs.org'
scope: '@tray-tecnologia'
cache: 'npm'
- run: npm ci
- run: npm run build
- run: npm publish --access public
env:
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
- uses: actions/upload-artifact@v4
with:
name: ds-build
path: dist/
95 changes: 59 additions & 36 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,59 +1,82 @@
# design-system
<p align="center">
<img src="public/icon.svg" width="100"/>
<h1 align="center">
Design System
</h1>
<p align="center">
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.
<p>
</p>

This template should help get you started developing with Vue 3 in Vite.
## Como usar

## Recommended IDE Setup
Para usar o Design System no seu projeto, execute o comando:

[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.vscode-typescript-vue-plugin).

## Type Support for `.vue` Imports in TS
```
npm install @tray-tecnologia/design-system
```

TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.
#### Importações

If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:
Todos os componentes podem ser importados individualmente pelo nome global do pacote.

1. Disable the built-in TypeScript Extension
1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette
2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.
```ts
import { Button } from '@tray-tecnologia/design-system';
```

## Customize configuration
Caso deseja adicionar o Design System como um plugin da sua aplicação Vue com as diretivas já instaladas, use:

See [Vite Configuration Reference](https://vitejs.dev/config/).
```ts
import { DS } from '@tray-tecnologia/design-system/setup';
```

## Project Setup
Caso desejar importar os filtros ou as diretivas disponibilizadas pelo Design System:

```sh
npm install
```ts
import { initials } from '@tray-tecnologia/design-system/filters';
```

### Compile and Hot-Reload for Development
Caso deseja usar somente as diretivas:

```sh
npm run dev
```ts
import directives from '@tray-tecnologia/design-system/directives';
```

### Type-Check, Compile and Minify for Production
Caso precisar qualquer coisa relacionada aos estilos disponibilizados:

```sh
npm run build
```scss
import '@tray-tecnologia/design-system/theme';
```

### Run Unit Tests with [Vitest](https://vitest.dev/)
Vale 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.

```sh
npm run test:unit
```
## Versões

### Run End-to-End Tests with [Cypress](https://www.cypress.io/)
Para as últimas alterações e versões, visite [releases](https://github.com/uxshop/design-system/releases).

```sh
npm run build
npm run test:e2e # or `npm run test:e2e:ci` for headless testing
```
## Desenvolvimento

### Lint with [ESLint](https://eslint.org/)
#### Configuração básica

```sh
npm run lint
```
Para auxiliar no desenvolvimento desse pacote, siga os passos abaixo para executá-lo em sem ambiente local.

1. Clone esse repositório;
2. Execute `npm install` para instalar as dependencias;
3. Execute `npm run dev` para iniciar o desenvolvimento.

O projeto inclui uma instalação básica do Vue no qual poderá testar os componentes criados.

#### Usando localmente com outros projetos

Caso esteja trabalhando em alguma funcionalidade para o Design System e queira testar em outro projeto, siga os passos descritos.

1. Execute `npm install` para instalar as dependencias;
2. Execute `npm link` para criar um link simbólico do pacote no seu ambiente global;
3. Acesse a pasta do outro projeto que deseja usar o Design System;
4. Execute `npm link @tray-tecnologia/design-system` para usar a cópia do Design System loca no projeto;

Nesse modo, qualquer alteração realizada na pasta local do Design System deve refletir automaticamente no outro projeo.

#### Documentação

O projeto inclui o Storybook, com instruções de uso dos componentes já criados. Para executar o Storybook basta executar `npm run storybook`.
18 changes: 13 additions & 5 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,10 +1,15 @@
{
"name": "design-system",
"version": "4.0.0-alpha",
"name": "@tray-tecnologia/design-system",
"description": "Conjunto de diretrizes, componentes e padrões visuais e de código.",
"version": "4.0.0-rc",
"type": "module",
"engines": {
"node": ">=20.10.0"
},
"repository": {
"type": "git",
"url": "git+https://github.com/uxshop/design-system.git"
},
"scripts": {
"dev": "vite",
"preview": "vite preview --port 5050",
Expand All @@ -19,8 +24,7 @@
"storybook": "storybook dev -p 6006",
"storybook:build": "storybook build",
"storybook:sass:compile": "tsx .storybook/compile.ts",
"prepare": "husky",
"postinstall": "npm run build"
"prepare": "husky"
},
"peerDependencies": {
"typescript": ">= 5.5.0",
Expand Down Expand Up @@ -129,5 +133,9 @@
"default": "./dist/directives.js"
},
"./theme": "./src/scss/theme.scss"
}
},
"files": [
"./dist",
"./src"
]
}
1 change: 1 addition & 0 deletions public/icon.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading