refactor: remove cypress and fix storybook

.cz-config.js

@@ -1,5 +1,6 @@
 module.exports = {
     types: [
+      { value: 'ci', name: 'ci:     Change in the CI' },
       { value: 'feat', name: 'feat:     A new feature' },
       { value: 'fix', name: 'fix:      A bug fix' },
       { value: 'docs', name: 'docs:     Documentation only changes' },

.eslintignore

@@ -4,7 +4,6 @@ node_modules
 dist
 www
 loader
-cypress
 # don't lint nyc coverage output
 coverage
 

.eslintrc.js

@@ -20,6 +20,7 @@ module.exports = {
   settings: {
     react: {
       pragma: 'h',
+      version: 'detect', // Automatically detect the React version
     },
   },
 };

.github/copilot-instructions.md

@@ -0,0 +1,75 @@
+# Blip Design System (blip-ds) - Copilot Instructions
+
+## Project Overview
+
+Blip Design System (blip-ds) is a design system component library built with Web Components using StencilJS. The project provides UI components that follow Blip's design guidelines and can be used in various web applications.
+
+## Project Structure
+
+- `/src/` - Source code of the component library
+  - `/assets/` - Static assets like images and SVGs
+  - `/components/` - Individual web components
+  - `/globals/` - Global styles and variables
+  - `/pages/` - Documentation pages in MDX format for Storybook, including guides, integration docs, and framework-specific usage
+  - `/snippets/` - Reusable code examples demonstrating UI patterns and component combinations as Storybook stories
+  - `/templates/` - Full page layout templates showing how components can be combined into complete interfaces
+  - `/utils/` - Utility functions and helpers
+  - `/view_components/` - View-specific components
+- `/blip-ds-react/` - React wrapper components (generated from StencilJS components)
+
+## Core Technologies
+
+### StencilJS
+
+The project uses [StencilJS](https://stenciljs.com/) (v2.16.1) as the core technology for building web components. StencilJS is a compiler that generates standard Web Components that can work in any framework or with no framework at all.
+
+Stencil config is located in #file:../stencil.config.ts
+
+#### React Integration
+
+React wrapper components are auto-generated using `@stencil/react-output-target` to allow usage of these components in React applications.
+
+### Styling
+
+- **SASS** is used for styling via `@stencil/sass`
+- **blip-tokens** design tokens are imported for consistent theming
+
+### Testing
+
+We use stencil unit tests and e2e tests.
+
+Tests are located in each component's directory in a `test` folder. We prioritize unit tests for component logic and e2e tests for integration scenarios.
+
+Must follow stencil's testing guidelines and use the `@stencil/core/testing` package.
+
+### Documentation
+
+- **Storybook** for component documentation and development
+
+## Build & Development Commands
+
+- `npm run dev` - Starts development environment with Stencil and Storybook
+- `npm run build` - Builds the component library
+- `npm run build:react` - Builds the React wrapper components
+- `npm run test` - Runs all tests
+- `npm run storybook` - Starts Storybook for component development
+- `npm run storybook:build` - Builds static Storybook documentation
+
+## Key Integration Points
+
+1. When adding new components:
+
+   - Create the StencilJS component in `/src/components/`
+   - React wrappers will be auto-generated in `/blip-ds-react/` with `npm run build:react`
+   - Add Storybook documentation. Use an existing component as a reference for structure and format.
+   - Ensure unit tests are written in the component's `test` folder
+   - Ensure e2e tests cover integration scenarios
+   - Review and update documentation as necessary
+
+2. The project follows semantic versioning and uses conventional commits for releases.
+
+3. Design tokens come from the `blip-tokens` package which should be kept updated.
+
+## Resources
+
+- [GitHub Repository](https://github.com/takenet/blip-ds)

.github/workflows/pr-storybook.yml

@@ -0,0 +1,54 @@
+name: PR Storybook Preview
+
+on:
+  pull_request:
+    types: [opened, synchronize, reopened, closed]
+    branches:
+      - master
+      - main
+
+permissions:
+  contents: write
+  pull-requests: write
+
+concurrency:
+  group: 'pr-preview-${{ github.event.pull_request.number }}'
+  cancel-in-progress: true
+
+jobs:
+  deploy-storybook-preview:
+    runs-on: ubuntu-latest
+    environment: storybook-preview
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+
+      - name: NPM Install and build
+        if: github.event.action != 'closed'
+        run: |
+          npm install
+          npm run build
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          HUSKY: 0
+
+      - name: Build Storybook for PR
+        if: github.event.action != 'closed'
+        run: |
+          npm run storybook:build -- --output-dir ./storybook-static
+        env:
+          STORYBOOK_BASE_PATH: /test-before-migrate/pr-preview/pr-${{ github.event.pull_request.number }}
+          HUSKY: 0
+
+      - name: Deploy PR Preview (separate from main)
+        uses: rossjrw/pr-preview-action@v1
+        env:
+          CI: true
+        with:
+          source-dir: ./storybook-static

.github/workflows/nodejs.yml → .github/workflows/publish.yml

@@ -4,6 +4,7 @@ on:
   push:
     branches:
       - master
+      - main
 
 permissions:
   contents: write
@@ -29,13 +30,23 @@ jobs:
           npm run build
         env:
           GITHUB_TOKEN: ${{ secrets.GH_TOKEN }}
+          HUSKY: 0
 
-      - name: Build and Deploy to Storybook
+      - name: Build Storybook
         run: |
-          npm run storybook:build
-          npm run storybook:deploy
+          npm run storybook:build -- --output-dir ./storybook-static
         env:
-          GH_TOKEN: ${{ github.actor }}:${{ secrets.GITHUB_TOKEN }}
+          HUSKY: 0
+
+      - name: Deploy Storybook to Root (preserving previews)
+        uses: JamesIves/github-pages-deploy-action@v4
+        env:
+          CI: true
+        with:
+          folder: ./storybook-static
+          clean: true
+          clean-exclude: |
+            'pr-preview/**'
 
       - name: Semantic Release
         uses: cycjimmy/semantic-release-action@v4

.github/workflows/test.yml

@@ -0,0 +1,35 @@
+name: Run Tests
+
+on:
+  pull_request:
+    branches:
+      - main
+      - master
+
+permissions:
+  contents: read
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+
+      - name: NPM Install and build
+        run: |
+          npm install
+
+      - name: Lint
+        run: |
+          npm run eslint
+
+      - name: Test
+        run: |
+          npm run test

.gitignore

@@ -34,11 +34,4 @@ package-lock.json
 icons/
 scripts/*.js
 
-/screenshot
-
-cypress/assets/
-cypress/build/
-cypress/dist/
-cypress/screenshots/
-cypress/host.config.json
-cypress/index.html
+/screenshot

.husky/commit-msg

@@ -0,0 +1,6 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+# Simple commit message validation using commitizen config
+# This ensures commit messages follow conventional commit format
+npx --no-install commitizen --hook || true

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npm run eslint && npm run test

.husky/pre-push

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npm run eslint

.storybook/main.js

@@ -6,6 +6,8 @@ module.exports = {
     '@storybook/addon-actions',
     '@storybook/addon-docs',
     '@storybook/addon-console',
+    // '@storybook/addon-notes', // Remove this as it's causing compatibility issues
+    '@storybook/preset-create-react-app',
   ],
   typescript: {
     reactDocgen: false,
@@ -18,4 +20,13 @@ module.exports = {
     autodocs: true,
     defaultName: 'Visão Geral'
   },
+  staticDirs: ['../dist'], // Include the Stencil build output
+  // Use managerWebpack for base path configuration instead of webpackFinal
+  managerWebpack: async (config) => {
+    if (process.env.STORYBOOK_BASE_PATH) {
+      config.output = config.output || {};
+      config.output.publicPath = process.env.STORYBOOK_BASE_PATH;
+    }
+    return config;
+  },
 };

.storybook/manager.js

@@ -9,15 +9,24 @@ addons.setConfig({
   showToolbar: true,
   selectedPanel: 'undefined',
   initialActive: 'sidebar',
+  isFullscreen: false,
+  showNav: true,
+  showPanel: true,
+  layoutCustomisations: {
+    showSidebar: true, // Force sidebar to be always visible
+  },
   sidebar: {
     showRoots: true,
-    collapsedRoots: ['other'],
+    collapsedRoots: [],
+    renderLabel: (item) => item.name,
   },
   toolbar: {
     title: { hidden: false },
     zoom: { hidden: false },
     eject: { hidden: false },
     copy: { hidden: false },
     fullscreen: { hidden: false },
+    'storybook/background': { hidden: false },
+    'storybook/viewport': { hidden: false },
   },
 });

.storybook/preview-head.html

@@ -1,3 +1,3 @@
 <link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,200;0,300;0,400;0,600;0,700;0,800;1,200;1,300;1,400;1,600;1,700;1,800&display=swap" rel="stylesheet">
-<script type="module" src="./build/blip-ds.esm.js"></script>
-<script nomodule src="./build/blip-ds.js"></script>
+<script type="module" src="./blip-ds/blip-ds.esm.js"></script>
+<script nomodule src="./blip-ds/blip-ds.js"></script>

.storybook/preview.js

@@ -2,7 +2,8 @@ import { defineCustomElements } from '../dist/esm/loader';
 import { withConsole } from '@storybook/addon-console';
 import './preview.css';
 
-defineCustomElements();
+// Load the custom elements
+defineCustomElements(window);
 
 export const globalTypes = {
   hasTheme: {