Dev 2024/09 - 01

.dockerignore

@@ -8,3 +8,5 @@ CONTRIBUTING.md
 LICENSE
 README.md
 SECURITY.md
+test-results
+playwright-report

.github/workflows/devskim.yml

@@ -7,9 +7,9 @@ name: DevSkim
 
 on:
   push:
-    branches: [ "main" ]
+    branches: [ "main", "dev" ]
   pull_request:
-    branches: [ "main" ]
+    branches: [ "main", "dev" ]
   schedule:
     - cron: '35 6 * * 3'
 

.github/workflows/docker-image.yml

@@ -3,10 +3,10 @@ on:
   schedule:
     - cron: '36 20 * * *'
   push:
-    branches: [ "main" ]
+    branches: [ "main", "dev" ]
     tags: [ 'v*.*.*' ]
   pull_request:
-    branches: [ "main" ]
+    branches: [ "main", "dev" ]
 
 env:
   REGISTRY: ghcr.io

.github/workflows/pages.yml

@@ -0,0 +1,60 @@
+name: Deploy to Github Pages  # Defines the name of the GitHub Actions workflow.
+
+on:
+    push:
+        branches:
+            - main  # Triggers the workflow on each push to the 'develop' branch.
+
+jobs:
+    build:
+      name: Build  # Defines the name of the build job.
+      runs-on: ubuntu-latest  # Specifies the operating system for the job.
+
+      steps:
+        - name: Checkout Repo  # Checks out the repository.
+          uses: actions/checkout@v4
+
+        - name: Create Node Environment  # Sets up Node.js environment.
+          uses: actions/setup-node@v4
+          with: 
+            node-version: 20.x
+
+        - name: Install Packages and Build Application  # Installs npm packages and builds the Vue.js application.
+          run: |
+            npm install
+            npm ci
+            npm run build
+
+        - name: Setup Pages  # Configures pages for deployment.
+          id: pages
+          uses: actions/configure-pages@v3
+
+        - name: Build with Jekyll  # Builds the application with Jekyll.
+          uses: actions/jekyll-build-pages@v1
+          with:
+            source: ./dist/
+            destination: ./_site
+
+        - name: Upload artifact  # Uploads the build artifact.
+          uses: actions/upload-pages-artifact@v2
+
+    deploy:
+      name: Deploy Application  # Defines the name of the deployment job.
+
+      # Add a dependency to the build job
+      needs: build  # Specifies that the deployment job depends on the successful completion of the build job.
+
+      # Grant GITHUB_TOKEN the permissions required to make a Pages deployment
+      permissions:
+        pages: write      # Grants write permission to deploy to Pages.
+        id-token: write   # Grants write permission to verify the deployment source.
+
+      environment:
+        name: github-pages  # Specifies the environment for deployment.
+        url: ${{ steps.deployment.outputs.page_url }}  # Retrieves the deployment URL from the previous deployment step.
+
+      runs-on: ubuntu-latest  # Specifies the operating system for the deployment job.
+      steps:
+        - name: Deploy to GitHub Pages  # Deploys the application to GitHub Pages.
+          id: deployment
+          uses: actions/deploy-pages@v2  # Specifies the version of the deployment action.

.gitignore

@@ -30,3 +30,10 @@ coverage
 *.tsbuildinfo
 .env
 bun.lockb
+package-lock.json
+yarn.lock
+pnpm-lock.yaml
+
+*storybook.log
+test-results
+playwright-report

.storybook/main.ts

@@ -1,22 +1,19 @@
-import type {StorybookConfig} from "@storybook/vue3-vite";
+import type { StorybookConfig } from "@storybook/vue3-vite";
 
 const config: StorybookConfig = {
-	stories: ["../src/**/*.stories.ts"],
-	addons: [
-		"@storybook/addon-links",
-		"@storybook/addon-essentials",
-		"@storybook/addon-interactions",
-		"@chromatic-com/storybook",
-	],
-	framework: {
-		name: "@storybook-vue/vue3",
-		options: {
-			docgen: "vue-component-meta",
-		},
-	},
-	docs: {
-		autodocs: "tag",
-	},
-	staticDirs: ["../public"],
+    stories: [ "../stories/**/*.stories.ts" ],
+    addons: [
+        "@storybook/addon-onboarding",
+        "@storybook/addon-links",
+        "@storybook/addon-essentials",
+        "@chromatic-com/storybook",
+        "@storybook/addon-interactions",
+    ],
+    framework: {
+        name: "@storybook/vue3-vite",
+        options: {},
+    },
+    docs: {},
+    staticDirs: [ "../public" ],
 };
 export default config;

.storybook/manager.ts

@@ -5,7 +5,7 @@ addons.setConfig({
 	theme: create({
 		base: "dark",
 		textColor: "white",
-		appPreviewBg: "#333333",
+		appPreviewBg: "#0f101d",
 		brandTitle: "NEI Market Analytics",
 		brandUrl: "https://bush1d3v-portfolio.vercel.app/",
 		brandImage: "logo.svg",

.storybook/preview.ts

@@ -20,7 +20,7 @@ const preview: Preview = {
 			values: [
 				{
 					name: "dark",
-					value: "#333333",
+					value: "#0f101d",
 				},
 				{
 					name: "light",
@@ -29,8 +29,18 @@ const preview: Preview = {
 			],
 		},
 	},
-	tags: ["autodocs"],
-	decorators: [withActions],
+	tags: ["autodocs", "autodocs"],
+	decorators: [
+		withActions,
+		(story) => ({
+			components: {story},
+			template: `
+                <div style="display: flex; justify-content: center; align-items: center; width: 50dvw; height: 50dvh;">
+                    <story />
+                </div>
+            `,
+		}),
+	],
 };
 
 export default preview;

COMMIT_PATTERN.md

@@ -12,6 +12,9 @@ PT-BR 🇧🇷
 | revert    | Commits que revertem alterações anteriores. Eles são usados para desfazer um ou mais commits anteriores que introduziram problemas ou comportamentos indesejados.                                                                                                                                                                     |
 | style     | Commits relacionados a melhorias na formatação do código, como ajustes de espaçamento, formatação de código e outros aspectos visuais. Isso ajuda a manter um estilo de código consistente e legível.                                                                                                                                 |
 | test      | Commits relacionados a testes, como adição de novos testes, correções de testes existentes ou melhorias na infraestrutura de testes. Testes rigorosos são essenciais para garantir que o código funcione corretamente e para evitar regressões.                                                                                       |
+| update      | Commits relacionados a atualizações gerais que não se enquadram em outras categorias específicas. Atualizações de códigos já existentes e suas funcionalidades.                                                                                       |
+| config      | Commits relacionados a alterações de configuração no projeto. Isso pode incluir mudanças em arquivos de configuração, ajustes em scripts de build, configurações de ferramentas de desenvolvimento, ou qualquer outra modificação que afete a configuração do ambiente de desenvolvimento ou produção.
+| delete      | Commits relacionados a exclusão de arquivos ou diretórios. Isso pode incluir mudanças em arquivos ou diretórios que foram excluídos do projeto.                                                                                                                       |
 
 ENG 🇺🇸
 | Category | Description                                                                                                                                                                                                                                                                                                                             |
@@ -27,3 +30,6 @@ ENG 🇺🇸
 | revert    | Commits that revert previous changes. They are used to undo one or more previous commits that introduced problems or unwanted behavior.                                                                                                                                                                     |
 | style     | Commits related to improvements in code formatting, such as spacing adjustments, code formatting and other visual aspects. This helps maintain a consistent and readable code style.                                                                                                                                 |
 | test      | Test-related commits, such as adding new tests, fixing existing tests, or improving the testing infrastructure. Rigorous testing is essential to ensure code works correctly and to avoid regressions.                                                                                       |
+| update      | Commits related to general updates that do not fit into other specific categories. Updates to existing code and its functionalities.                                                                                       |
+| config      | Commits related to configuration changes in the project. This can include changes to configuration files, adjustments to build scripts, development tool configurations, or any other modifications that affect the development or production environment configuration.                                                                                       |
+| delete      | Commits related to file or directory deletion. This may include changes to files or directories that were removed from the project.

Dockerfile

@@ -2,16 +2,20 @@ FROM node:20
 
 RUN apt-get update && apt-get install -y \
     xdg-utils \
-    git-all
+    git-all \
+    libevent-2.1-7 \
+    libgstreamer-plugins-bad1.0-0
 
 WORKDIR /app
 
 COPY . .
 
 RUN npm install
 
-EXPOSE 3000
+EXPOSE 5173
 
 EXPOSE 6006
 
+EXPOSE 9323
+
 CMD ["npm", "run", "dev"]

README.md

@@ -27,8 +27,8 @@ O **NEI Market Analytics** é um projeto de código aberto projetado para fornec
    <img align='center' height='70' width='70' title='Docker' alt='docker' src='https://github.com/devicons/devicon/blob/master/icons/docker/docker-plain.svg' /> &nbsp;
    <img align='center' height='60' width='50' title='Vitest' alt='vitest' src='https://github.com/bush1D3v/tsbank_api/assets/133554156/74803ee6-3f6e-4335-9f56-cb887a4285ff' />  &nbsp;&nbsp;
    <img align='center' height='54' width='44' title='Storybook-js' alt='storybook-js' src='https://github.com/bush1D3v/my_portfolio/assets/133554156/213c8aa4-ce24-4b30-8e07-dceb476e8589' /> &nbsp;&nbsp;&nbsp;
-   <img align='center' height='54' width='54' title='Cypress' alt='cypress' src='https://github.com/user-attachments/assets/8eb060a2-57dc-4028-9e6b-9c93644fb545' /> &nbsp;&nbsp;&nbsp;
-   <img align='center' height='50' width='50' title='VueUse' alt='vueuse' src='https://github.com/user-attachments/assets/c4eb21ad-858d-4f28-a2c7-1dd0c23342c1' /> &nbsp;
+   <img align='center' height='50' width='50' title='VueUse' alt='vueuse' src='https://github.com/user-attachments/assets/c4eb21ad-858d-4f28-a2c7-1dd0c23342c1' /> &nbsp;&nbsp;
+   <img align='center' height='50' width='60' title='Playwright' alt='playwright' src='https://github.com/user-attachments/assets/1ce5b208-a75b-48e0-bd5c-e663f4e02302' /> &nbsp;
    <img align='center' height='50' width='60' title='Biomejs' alt='biomejs' src='https://github.com/user-attachments/assets/b3d8a249-e17f-4e64-9608-4a4783b7bbc0' /> &nbsp;
    <img align='center' height='50' width='50' title='Chromatic' alt='chromatic' src='https://github.com/user-attachments/assets/6edd5832-5db7-4e2a-a8e4-4bbe7b8e7208' /> &nbsp;
 </div>
@@ -77,22 +77,15 @@ bun build
 bun test:unit
 ```
 
-### Executar testes de ponta a ponta com [Cypress](https://www.cypress.io/)
+### Executar testes de ponta a ponta com [Playwright](https://playwright.dev/)
 
 ```sh
-bun test:e2e:dev
+bun test:e2e
 ```
 
 Isso executa os testes de ponta a ponta no servidor de desenvolvimento Vite.
 É muito mais rápido do que a compilação de produção.
 
-Mas ainda é recomendado testar a compilação de produção com `test:e2e` antes de implantar (por exemplo, em ambientes de CI):
-
-```sh
-bun build
-bun test:e2e
-```
-
 ENG 🇺🇸
 
 # 📊 Nei Market Analytics
@@ -123,8 +116,8 @@ The **NEI Market Analytics** is an open-source project designed to provide compr
    <img align='center' height='70' width='70' title='Docker' alt='docker' src='https://github.com/devicons/devicon/blob/master/icons/docker/docker-plain.svg' /> &nbsp;
    <img align='center' height='54' width='44' title='Vitest' alt='vitest' src='https://github.com/bush1D3v/tsbank_api/assets/133554156/74803ee6-3f6e-4335-9f56-cb887a4285ff' />  &nbsp;&nbsp;
    <img align='center' height='54' width='44' title='Storybook-js' alt='storybook-js' src='https://github.com/bush1D3v/my_portfolio/assets/133554156/213c8aa4-ce24-4b30-8e07-dceb476e8589' /> &nbsp;&nbsp;&nbsp;
-   <img align='center' height='54' width='54' title='Cypress' alt='cypress' src='https://github.com/user-attachments/assets/8eb060a2-57dc-4028-9e6b-9c93644fb545' /> &nbsp;&nbsp;&nbsp;
-   <img align='center' height='50' width='50' title='VueUse' alt='vueuse' src='https://github.com/user-attachments/assets/c4eb21ad-858d-4f28-a2c7-1dd0c23342c1' /> &nbsp;
+   <img align='center' height='50' width='50' title='VueUse' alt='vueuse' src='https://github.com/user-attachments/assets/c4eb21ad-858d-4f28-a2c7-1dd0c23342c1' /> &nbsp;&nbsp;
+   <img align='center' height='50' width='60' title='Playwright' alt='playwright' src='https://github.com/user-attachments/assets/1ce5b208-a75b-48e0-bd5c-e663f4e02302' /> &nbsp;
    <img align='center' height='50' width='60' title='Biomejs' alt='biomejs' src='https://github.com/user-attachments/assets/b3d8a249-e17f-4e64-9608-4a4783b7bbc0' /> &nbsp;
    <img align='center' height='50' width='50' title='Chromatic' alt='chromatic' src='https://github.com/user-attachments/assets/6edd5832-5db7-4e2a-a8e4-4bbe7b8e7208' /> &nbsp;
 </div>
@@ -173,18 +166,8 @@ bun build
 bun test:unit
 ```
 
-### Run End-to-End Tests with [Cypress](https://www.cypress.io/)
+### Run E2E Tests with [Playwright](https://playwright.dev/)
 
 ```sh
-bun test:e2e:dev
-```
-
-This runs the end-to-end tests against the Vite development server.
-It is much faster than the production build.
-
-But it's still recommended to test the production build with `test:e2e` before deploying (e.g. in CI environments):
-
-```sh
-bun build
 bun test:e2e
 ```

chromatic.config.json

@@ -0,0 +1,5 @@
+{
+	"onlyChanged": true,
+	"projectId": "Project:66e0e7399fb56c0cbb1451d2",
+	"zip": true
+}

components.json

@@ -1,17 +1,17 @@
 {
-  "$schema": "https://shadcn-vue.com/schema.json",
-  "style": "new-york",
-  "typescript": true,
-  "tsConfigPath": "./tsconfig.json",
-  "tailwind": {
-    "config": "tailwind.config.js",
-    "css": "src/assets/css/main.css",
-    "baseColor": "stone",
-    "cssVariables": true
-  },
-  "framework": "vite",
-  "aliases": {
-    "components": "@/components",
-    "utils": "@/lib/utils"
-  }
-}
+	"$schema": "https://shadcn-vue.com/schema.json",
+	"style": "new-york",
+	"typescript": true,
+	"tsConfigPath": "./tsconfig.json",
+	"tailwind": {
+		"config": "tailwind.config.js",
+		"css": "src/assets/css/main.css",
+		"baseColor": "stone",
+		"cssVariables": true
+	},
+	"framework": "vite",
+	"aliases": {
+		"components": "@/components",
+		"utils": "@/lib/utils"
+	}
+}