Add 'packages/components/' from commit '31cbde7c68fa3462d52c105386ad7…

…51d71b8c9bf'

git-subtree-dir: packages/components
git-subtree-mainline: d33aafa
git-subtree-split: 31cbde7

packages/components/.editorconfig

@@ -0,0 +1,13 @@
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_size = 4
+indent_style = space
+insert_final_newline = false
+tab_width = 4
+
+[*.yml]
+indent_size = 2
+tab_width = 2

packages/components/.eslintrc.cjs

@@ -0,0 +1,14 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'plugin:react-hooks/recommended', 'plugin:storybook/recommended'],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}

packages/components/.github/workflows/call-build.yml

@@ -0,0 +1,28 @@
+name: Build
+
+on: [ workflow_call ]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Setup Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+
+      - name: Install Dependencies
+        run: npm ci
+
+      - name: Build
+        run: npm run build
+
+      - name: Upload artifact
+        uses: actions/upload-artifact@v2
+        with:
+          name: dist
+          path: dist
+          retention-days: 1

packages/components/.github/workflows/call-test.yml

@@ -0,0 +1,44 @@
+name: Test
+
+on: [ workflow_call ]
+
+jobs:
+  test:
+    name: Test
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Setup Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+
+      - name: Install Dependencies
+        run: npm ci
+
+      - name: Run tests
+        run: npm run test
+
+  test-storybook:
+    name: Test Storybook
+    timeout-minutes: 20
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Setup Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16
+
+      - name: Install Dependencies
+        run: npm ci
+
+      - name: Install Playwright
+        run: npx playwright install --with-deps
+
+      - name: Run tests
+        run: npm run storybook:test-ci

packages/components/.github/workflows/development.yml

@@ -0,0 +1,12 @@
+name: Test
+
+on: [ push, pull_request ]
+
+jobs:
+  build:
+    name: Build
+    uses: ./.github/workflows/call-build.yml
+
+  test:
+    name: Test
+    uses: ./.github/workflows/call-test.yml

packages/components/.github/workflows/publish.yml

@@ -0,0 +1,51 @@
+name: Publish
+
+on:
+  push:
+    tags:
+      - v*
+
+jobs:
+  build:
+    name: Build
+    uses: ./.github/workflows/call-build.yml
+  test:
+    name: Test
+    uses: ./.github/workflows/call-test.yml
+
+  publish:
+    needs: [ build, test ]
+    strategy:
+      matrix:
+        include:
+          - registry: "https://registry.npmjs.org/"
+            token: NPM_TOKEN
+          - registry: "https://npm.pkg.github.com/"
+            token: GITHUB_TOKEN
+
+    permissions:
+      contents: read
+      packages: write
+
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Download artifact
+        uses: actions/download-artifact@v2
+        with:
+          name: dist
+          path: dist
+
+      - name: Setup Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          registry-url: ${{ matrix.registry }}
+
+      - name: Publish
+        run: |
+          npm publish --access public
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets[matrix.token] }}

packages/components/.gitignore

@@ -0,0 +1,26 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+storybook-static

packages/components/.prettierrc

@@ -0,0 +1,3 @@
+{
+    "tabWidth": 4
+}

packages/components/.storybook/main.ts

@@ -0,0 +1,24 @@
+import type { StorybookConfig } from "@storybook/react-vite";
+
+const config: StorybookConfig = {
+    stories: [
+        "../lib/components/**/*.mdx",
+        "../lib/components/**/*.stories.@(js|jsx|mjs|ts|tsx)",
+    ],
+    addons: [
+        "@storybook/addon-links",
+        "@storybook/addon-essentials",
+        "@storybook/addon-onboarding",
+        "@storybook/addon-interactions",
+    ],
+    framework: {
+        name: "@storybook/react-vite",
+        options: {},
+    },
+    docs: {
+        autodocs: "tag",
+        defaultName: "Documentation",
+    },
+};
+
+export default config;

packages/components/.storybook/preview-head.html

@@ -0,0 +1,4 @@
+<link
+    rel="stylesheet"
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,[email protected],100..700,0..1,-50..200"
+/>

packages/components/.storybook/preview.ts

@@ -0,0 +1,34 @@
+import type { Preview } from "@storybook/react";
+
+import "../lib/styles/reset.css";
+import "../lib/index.sass";
+import { withTheme } from "./theme";
+
+const preview: Preview = {
+    parameters: {
+        actions: { argTypesRegex: "^on[A-Z].*" },
+        layout: "centered",
+        controls: {
+            matchers: {
+                color: /(background|color)$/i,
+                date: /Date$/i,
+            },
+        },
+        backgrounds: {
+            default: "theme-vertex-dark",
+            values: [
+                {
+                    name: "theme-vertex-dark",
+                    value: "#111111",
+                },
+                {
+                    name: "theme-vertex-light",
+                    value: "#ffffff",
+                },
+            ],
+        },
+    },
+    decorators: [withTheme],
+};
+
+export default preview;

packages/components/.storybook/theme.tsx

@@ -0,0 +1,20 @@
+import { StoryContext, StoryFn } from "@storybook/react";
+
+export const withTheme = (Story: StoryFn, context: StoryContext) => {
+    const theme =
+        context?.globals?.backgrounds?.value === "#ffffff"
+            ? "theme-vertex-light"
+            : "theme-vertex-dark";
+
+    return (
+        <div id="app" className={theme}>
+            <Story
+                {...context}
+                globals={{
+                    ...context.globals,
+                    theme: theme,
+                }}
+            />
+        </div>
+    );
+};

packages/components/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Quentin Guidée
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

packages/components/README.md

@@ -0,0 +1,27 @@
+<p align="center">
+    <img height="96" src="https://github.com/vertex-center/vertex-design/raw/main/logos/transparent/vertex_logo_transparent.png" alt="Vertex logo" />
+</p>
+<h1 align="center">Vertex Components</h1>
+
+<p align="center">
+<img alt="GitHub release (latest by date)" src="https://img.shields.io/github/v/release/vertex-center/components?color=DE3C4B&labelColor=1E212B&style=for-the-badge">
+<img alt="GitHub license" src="https://img.shields.io/github/license/vertex-center/components?color=DE3C4B&labelColor=1E212B&style=for-the-badge">
+<img alt="GitHub contributors" src="https://img.shields.io/github/contributors/vertex-center/components?color=DE3C4B&labelColor=1E212B&style=for-the-badge">
+</p>
+
+## About
+
+Vertex Components is a library of React components that are used in Vertex projects.
+
+This subproject is a part of the [Vertex](https://github.com/vertex-center/vertex) project.
+
+The goal is to anticipate the creation of the Vertex website, allowing components to be reused between Vertex and its
+website. Another objective is also to recode components with more tests and documentation. Future 3rd party apps will be
+able to use these components.
+
+**Disclaimer:** We do not advise you to use these components in your projects. They will likely change a lot in the near
+future. We will make a stable release when we will be satisfied with the components.
+
+## License
+
+This project is licensed under the [MIT License](./LICENSE.md).

packages/components/jest.config.ts

@@ -0,0 +1,15 @@
+import { JestConfigWithTsJest } from "ts-jest";
+
+const config: JestConfigWithTsJest = {
+    transform: {
+        "^.+\\.svg$": "jest-transform-stub",
+    },
+    preset: "ts-jest",
+    testEnvironment: "jsdom",
+    moduleNameMapper: {
+        "^@/(.*)$": "<rootDir>/lib/$1",
+        "^.+\\.(sass|css)$": "identity-obj-proxy",
+    },
+};
+
+export default config;