First Commit

.eslintrc.js

@@ -0,0 +1,16 @@
+module.exports = {
+  root: true,
+  // This tells ESLint to load the config from the package `eslint-config-custom`
+  extends: ['custom'],
+  plugins: ['eslint-plugin-html'],
+  overrides: [
+    {
+      files: ['**/*.html', '**/*.yml']
+    }
+  ],
+  settings: {
+    next: {
+      rootDir: ['apps/*/']
+    }
+  }
+}

.github/actions/setup/action.yml

@@ -0,0 +1,33 @@
+name: Set up
+description: Node.js LTS, pnpm, store cache, and install dependencies
+
+runs:
+  using: composite
+  steps:
+    - name: Set up Node.js
+      uses: actions/setup-node@v3
+      with:
+        node-version-file: .nvmrc
+
+    - name: Install pnpm
+      id: pnpm-install
+      shell: bash
+      run: npm install -g pnpm
+
+    - name: Get pnpm store directory
+      id: pnpm-cache
+      shell: bash
+      run: |
+        echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
+
+    - uses: actions/cache@v3
+      name: Set up pnpm cache
+      with:
+        path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
+        key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+        restore-keys: |
+          ${{ runner.os }}-pnpm-store-
+
+    - name: Install dependencies
+      run: pnpm install --no-frozen-lockfile
+      shell: bash

.github/workflows/ci.yml

@@ -0,0 +1,26 @@
+name: CI
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
+      - dev
+jobs:
+  build:
+    strategy:
+      matrix:
+        os: ["ubuntu-latest"]
+    runs-on: ${{ matrix.os }}
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+      - name: Setup Environment
+        uses: ./.github/actions/setup
+
+      - name: Build Component Library
+        run: pnpm run build

.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+node_modules
+.pnp
+.pnp.js
+
+# testing
+coverage
+
+# next.js
+.next/
+out/
+build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# turbo
+.turbo
+
+# vercel
+.vercel

.npmrc

@@ -0,0 +1 @@
+auto-install-peers = true

.nvmrc

@@ -0,0 +1 @@
+v20.9.0

.vscode/settings.json

@@ -0,0 +1,87 @@
+{
+  "eslint.workingDirectories": [
+    {
+      "mode": "auto"
+    }
+  ],
+  "workbench.localHistory.exclude": {
+    "**/pnpm-lock.yaml": true,
+    "**/node_modules": true,
+    "**/dist": true,
+    "**/._*": true,
+    "**/.turbo/": true,
+    ".vscode": true,
+    "**/next-env.d.ts": true
+  },
+  "workbench.editor.highlightModifiedTabs": true,
+  "explorer.sortOrder": "type",
+  "files.trimFinalNewlines": true,
+  "files.exclude": {
+    "**/.git": true,
+    "**/.turbo": true,
+    "**/.next": true,
+    "**/.angular": true,
+    "**/.stencil": true,
+    "**/.vscode": true,
+    "**/build": true,
+    "**/dist": true,
+    "**/node_modules": true,
+    "**/storybook-static": true,
+    "**/out": true
+  },
+  "search.exclude": {
+    "**/.git": true,
+    "**/.turbo": true,
+    "**/.next": true,
+    "**/.angular": true,
+    "**/.stencil": true,
+    "**/.vscode": true,
+    "**/build": true,
+    "**/dist": true,
+    "**/node_modules": true,
+    "**/storybook-static": true,
+    "**/out": true
+  },
+  "workbench.editor.showTabs": "multiple",
+  "workbench.editor.tabSizing": "shrink",
+  "workbench.statusBar.visible": true,
+  "workbench.editor.enablePreview": false,
+  "javascript.format.enable": false,
+  "typescript.format.enable": false,
+  "javascript.updateImportsOnFileMove.enabled": "always",
+  "typescript.updateImportsOnFileMove.enabled": "always",
+  "typescript.suggest.completeFunctionCalls": true,
+  "typescript.suggest.paths": true,
+  "typescript.preferences.importModuleSpecifier": "non-relative",
+  "workbench.colorCustomizations": {
+    "activityBar.activeBackground": "#e4db32",
+    "activityBar.background": "#e4db32",
+    "activityBar.foreground": "#15202b",
+    "activityBar.inactiveForeground": "#15202b99",
+    "activityBarBadge.background": "#16a9a2",
+    "activityBarBadge.foreground": "#e7e7e7",
+    "commandCenter.border": "#15202b99",
+    "sash.hoverBorder": "#e4db32",
+    "statusBar.background": "#c9c01a",
+    "statusBar.foreground": "#15202b",
+    "statusBarItem.hoverBackground": "#9c9514",
+    "statusBarItem.remoteBackground": "#c9c01a",
+    "statusBarItem.remoteForeground": "#15202b",
+    "titleBar.activeBackground": "#c9c01a",
+    "titleBar.activeForeground": "#15202b",
+    "titleBar.inactiveBackground": "#c9c01a99",
+    "titleBar.inactiveForeground": "#15202b99"
+  },
+  "peacock.color": "#c9c01a",
+
+  // Formatters
+  "editor.defaultFormatter": "biomejs.biome",
+
+  // Use Prettier for specific file types
+  "[html]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[markdown]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  }
+}

README.md

@@ -0,0 +1,102 @@
+<div align="center">
+  <h2 align="center"><strong>Stencil Design System</strong></h2>
+  <p align="center">
+    Component Library for a Design System using Stencil and Turborepo
+  </p>
+
+</div>
+
+<br/>
+
+## Structure
+
+This monorepo contains multiple projects that work together to create an integrated Design System
+
+### Packages
+
+> Packages are reusable libraries available for packages and apps
+
+| Package directory             | Description                                         |
+| ----------------------------- | --------------------------------------------------- |
+| `packages/ui-stencil`         | Component library                                   |
+| `packages/ui-stencil-angular` | Official Wrapper that improves Stencil with Angular |
+| `packages/ui-stencil-react`   | Official Wrapper that improves Stencil with React   |
+| `packages/ui-stencil-vue`     | Official Wrapper that improves Stencil with Vue     |
+
+### Apps
+
+> Apps can use all the available packages
+
+| App directory      | Description                                       |
+| ------------------ | ------------------------------------------------- |
+| `apps/storybook`   | Storybook building environment                    |
+| `apps/app-angular` | Test App that uses the ui-stencil-angular library |
+| `apps/app-react`   | Test App that uses the ui-stencil-react library   |
+| `apps/app-vue`     | Test App that uses the ui-stencil-vue library     |
+
+### Config
+
+> Config are reusable eslint and typescript configurations
+
+| Package directory | Description                           |
+| ----------------- | ------------------------------------- |
+| `config/`         | Shared configuration for all packages |
+
+### Tools
+
+> Tools to generate Components, fetch Tokens or update dependencies
+
+| App directory | Description   |
+| ------------- | ------------- |
+| `tools/maintenance`      | CLI Tool that updates all packages dependencies |
+
+<br/>
+
+## Development
+
+These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.
+
+Make sure you have the LTS version of [Node](https://nodejs.dev/) (18.7) installed in your machine. We recommend to use [nvm (Node Version Manager)](https://github.com/nvm-sh/nvm).
+
+This monorepository uses Turborepo to manage dependencies and scripts. The first step is to install the local node dependencies:
+
+```sh
+pnpm install
+```
+
+### Development with Storybook
+
+```shell
+pnpm run dev
+```
+
+<br/>
+
+## Architecture
+
+```mermaid
+graph TD;
+  stencilUi[stencil-ui]
+  uiStencilAngular[ui-stencil-angular]
+  uiStencilReact[ui-stencil-react]
+  uiStencilVue[ui-stencil-vue]
+  appAngular[app-angular]
+  appReact[app-react]
+  appVue[app-vue]
+
+  stencilUi --> uiStencilAngular
+  stencilUi --> uiStencilReact
+  stencilUi --> uiStencilVue
+
+  uiStencilAngular --> appAngular
+  uiStencilReact --> appReact
+  uiStencilVue --> appVue
+
+  stencilUi -.-> appAngular
+  stencilUi -.-> appReact
+  stencilUi -.-> appVue
+```
+
+---
+
+Made by [@chepetime](https://github.com/chepetimetime) at Mexico City 🇲🇽

apps/app-angular/.editorconfig

@@ -0,0 +1,16 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.ts]
+quote_type = single
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

apps/app-angular/.gitignore

@@ -0,0 +1,42 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# Compiled output
+/dist
+/tmp
+/out-tsc
+/bazel-out
+
+# Node
+/node_modules
+npm-debug.log
+yarn-error.log
+
+# IDEs and editors
+.idea/
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# Visual Studio Code
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+.history/*
+
+# Miscellaneous
+/.angular/cache
+.sass-cache/
+/connect.lock
+/coverage
+/libpeerconnection.log
+testem.log
+/typings
+
+# System files
+.DS_Store
+Thumbs.db

apps/app-angular/README.md

@@ -0,0 +1,27 @@
+# AppAngular
+
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 16.1.4.
+
+## Development server
+
+Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
+
+## Code scaffolding
+
+Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
+
+## Build
+
+Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Running unit tests
+
+Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Running end-to-end tests
+
+Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.