7 setup cicd

.devcontainer/Dockerfile

@@ -0,0 +1,9 @@
+ARG ALPINE_VERSION=3.20
+ARG NODE_VERSION=20.15.1-r0
+
+FROM mcr.microsoft.com/devcontainers/base:alpine-${ALPINE_VERSION}
+
+ARG NODE_VERSION
+RUN apk update && apk add --no-cache nodejs=${NODE_VERSION} npm
+
+WORKDIR /workspaces/datc

.devcontainer/devcontainer.json

@@ -0,0 +1,34 @@
+// https://containers.dev/implementors/json_reference/
+{
+    "build": {
+        "dockerfile": "Dockerfile",
+        "context": ".."
+    },
+    "customizations": {
+        "vscode": {
+            "extensions": [
+                "esbenp.prettier-vscode",
+                "Bubulus.copilot-inline-toggle",
+                "EditorConfig.EditorConfig",
+                "GitHub.copilot",
+                "GitHub.copilot-chat",
+                "dbaeumer.vscode-eslint",
+                "mgmcdermott.vscode-language-babel",
+                "firsttris.vscode-jest-runner",
+                "vitaliymaz.vscode-svg-previewer",
+                "redhat.vscode-yaml",
+                "naumovs.color-highlight",
+                "kaiwood.center-editor-window",
+                "eamodio.gitlens",
+                "wayou.vscode-todo-highlight",
+                "PKief.material-icon-theme",
+                "yoavbls.pretty-ts-errors"
+            ]
+        }
+    },
+    "runArgs": [
+        "--name",
+        "fluentui-helper-dev-env"
+    ],
+    "postCreateCommand": "npm install"
+}

.env

@@ -0,0 +1 @@
+NODE_VERSION=20.15

.eslintignore

@@ -0,0 +1,4 @@
+jest.config.ts
+jest.setup.ts
+vite.config.mts
+tests/react-testing-library.tsx

.eslintrc.yml

@@ -0,0 +1,131 @@
+parser: "@typescript-eslint/parser"
+
+parserOptions:
+  # allows for ES Modules
+  sourceType: "module"
+  # maps our tsconfig with appropriate settings (e.g. paths) to eslint
+  project: "./tsconfig.json"
+  # default recommended settings from vite // alligned with tsconfig
+  ecmaVersion: 2020
+  ecmaFeatures:
+    # enables to parse jsx code (react components)
+    jsx: true
+
+env:
+  # allows for browser specific globals like window, document etc.
+  browser: true
+  # allows for jest specific globals like test, expect etc.
+  jest: true
+
+plugins:
+  - "prettier"
+  - "jest"
+  - "promise"
+  - "@typescript-eslint"
+
+# Important Note: The order of rules IS NOT ARBITRARY, but follows a specific order of precedence
+extends:
+  # --------------------------- Core ------------------------------
+  # create basis for all JS rules, neutral opinions
+  - "eslint:recommended"
+
+  # create basis for all TS rules, neutral opinions, enhanced with typed-linting
+  - "plugin:@typescript-eslint/strict-type-checked"
+  - "plugin:@typescript-eslint/stylistic-type-checked"
+
+  # this introduces React rules and overrides some of the JS and TS rules in favor of AirBnB opinions
+  - airbnb
+  - airbnb-typescript
+  - airbnb/hooks
+
+  # --------------------------- Additional JS ---------------------
+  # NOTE: Make sure that none of the introduced rules conflict with the airbnb rules
+  # suprisingly AirBnB has neither opinions on promises nor deprecations
+  - "plugin:promise/recommended"
+  - "plugin:deprecation/recommended"
+
+  # --------------------------- Additional Libraries ---------------
+  # -- JEST --
+  - "plugin:jest/recommended"
+  - "plugin:jest/style"
+  # -- STORYBOOK --
+  # NOTE: Quote from docs: "This plugin will only be applied to files following the *.stories.* (we recommend this) or *.story.* pattern."
+  # Its recommended to lint also the config files in .storybook, which in our current file context, is painfull to achieve, so this is emmited.
+  # It would not have made any major difference anyhow, can only help with mistyped addon names, we will survive without it...
+  - "plugin:storybook/recommended"
+
+  # --------------------------- Formatting -------------------------
+  # NOTE: Needs to go very last, because the formatting rules should be enforced ONLY by prettier, overwriting some AirBnB rules
+  - "plugin:prettier/recommended"
+
+rules:
+  # --------------------------- RESTORATION -------------------------------
+  # Note: restoring airbnb rules
+  # overwrites are introduced by import/resolver
+  import/order: off
+  import/extensions:
+    - error
+    - ignorePackages
+    - { js: never, jsx: never, ts: never, tsx: never }
+
+  # --------------------------- DEVIATIONS -------------------------------
+  # Note: deviations from rules which are required because default community guidelines might not consider the stack context
+
+  # the default type-definitions from typescript-eslint enforces interfaces (for OOP usage), but because we are in react 16+ functional component context we should stick with types
+  "@typescript-eslint/consistent-type-definitions": ["error", "type"]
+
+  # react is brought default into scope, so we can disable this rule
+  "react/react-in-jsx-scope": off
+
+  # --------------------------- ADDITIONS -------------------------------
+  # In order to ensure consistency in type imports and exports we enforce the consistent type imports and exports rules
+  # these will make sure that imports and exports that concern types are prefixed with the word "type"
+  # also these imports / exports must not be mixed with actual runtime code related imports / exports
+  # essentially the defaults of both rules are enforced
+  "@typescript-eslint/consistent-type-exports": "error"
+  "@typescript-eslint/consistent-type-imports": "error"
+
+  # --------------------------- FORMATTING --------------------------
+  # lints falsely formated code, easier to fix and will be subsequently enforced by ci/cd as well
+  prettier/prettier: "warn"
+
+settings:
+  # makes sure that eslint can resolve aliased imports derived from the paths config in tsconfig
+  import/resolver:
+    typescript:
+      # in case third party packages dont ship their types with them, but with a seperate package, this will help resolve eslint errors
+      # example: lodash might have types in @types/lodash
+      alwaysTryTypes: true
+      # project key is not specified, because if omited, it will default to the tsconfig in the root of the project
+      # meaning: project: "./tsconfig.json"
+  react:
+    # corresponding to the package.json version
+    version: "detect"
+
+# --------------------------- Overrides ------------------------------
+# Note: In general, always denote the reasoning for the override, so that the next person can understand the context
+overrides:
+  # for index files, named exports should be allowed
+  - files: ["index.ts", "index.tsx", "hooks.ts", "hooks.tsx"]
+    rules:
+      import/prefer-default-export: off
+  # is located at src location, but runs devDeps only
+  - files: ["vite.config.mts"]
+    rules:
+      import/no-extraneous-dependencies: off
+  - files: ["**/*"]
+    rules:
+      # because we are not using defaultProps but defaultArguments, we need to augment the rule to resolve when default arguments are provided for the props
+      react/require-default-props:
+        - error
+        - functions: "defaultArguments"
+  # test files, usual naming does not apply do needs to re-disable certain rules
+  - files: ["**/*tests.ts", "**/*tests.tsx"]
+    rules:
+      import/no-extraneous-dependencies: off
+  # storybook files
+  - files: ["**/*stories.ts", "**/*stories.tsx"]
+    rules:
+      import/no-extraneous-dependencies: off
+      react/jsx-props-no-spreading: off
+      react-hooks/rules-of-hooks: off

.github/workflows/check-version.yml

@@ -0,0 +1,24 @@
+name: Version Check
+
+on:
+  pull_request:
+    branches:
+      - production
+
+jobs:
+  version-check:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Fetch all branches
+        run: git fetch --all
+
+      - name: Run version check script
+        run: |
+          chmod +x ./ci/check_version.sh
+          ./ci/check_version.sh

.github/workflows/ci-pipeline.yml

@@ -0,0 +1,34 @@
+name: Continuous Integration Pipeline
+
+on:
+  pull_request:
+    branches:
+      - development
+
+jobs:
+  checks-lint-type-test-build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Load node version
+        run: echo "NODE_VERSION=$(cat .env | grep NODE_VERSION | cut -d '=' -f2)" >> $GITHUB_ENV
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+          cache: "npm"
+
+      - run: npm ci
+
+      - name: Lint
+        run: make ci-lint
+
+      - name: Type Check
+        run: make ci-tsc
+
+      - name: Tests
+        run: make ci-test
+
+      - name: Build
+        run: make ci-build

.github/workflows/deploy-storybook.yml

@@ -0,0 +1,52 @@
+name: Storybook to GitHub Pages Pipeline
+
+on:
+  push:
+    branches:
+      - production
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: "pages"
+  cancel-in-progress: true
+
+jobs:
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Load node version
+        run: echo "NODE_VERSION=$(cat .env | grep NODE_VERSION | cut -d '=' -f2)" >> $GITHUB_ENV
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+          cache: "npm"
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build Storybook
+        run: make storybook-build
+
+      - name: Setup Pages
+        uses: actions/configure-pages@v4
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: dist/storybook
+
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

.github/workflows/publish-package.yml

@@ -0,0 +1 @@
+# name: Publishing pipeline

.gitignore

@@ -0,0 +1,3 @@
+/node_modules
+/dist
+/coverage

.storybook/caller.mk

@@ -0,0 +1,19 @@
+p=storybook-
+
+npx_s=npx storybook
+
+dev_port=39047
+preview_port=8080
+dist=dist/storybook
+
+$(p)dev:
+	@$(call echo_yellow, "--> Running Storybook in development mode...")
+	$(run) $(npx_s) dev --no-open -p $(dev_port)
+
+$(p)build:
+	@$(call echo_yellow, "--> Building Storybook...")
+	$(run) $(npx_s) build --docs -o $(dist)
+
+$(p)preview-build-locally:
+	@$(call echo_yellow, "--> Starting server to preview storybook locally...")
+	npx http-server $(dist) -p $(preview_port)

.storybook/main.ts

@@ -0,0 +1,9 @@
+import { StorybookConfig } from "@storybook/react-vite";
+
+const config: StorybookConfig = {
+  stories: ["../**/stories.@(ts|tsx)"],
+  addons: ["@storybook/addon-essentials"],
+  framework: "@storybook/react-vite",
+};
+
+export default config;

.storybook/preview.tsx

@@ -0,0 +1,57 @@
+import React from "react";
+
+import { Preview } from "@storybook/react";
+
+import { ThemeProvider } from "../src/theme";
+
+const preview: Preview = {
+  // parameters: {},
+  globalTypes: {
+    theme: {
+      toolbar: {
+        title: "Theme",
+        items: ["light", "dark", "side-by-side"],
+        dynamicTitle: true,
+      },
+    },
+  },
+  initialGlobals: {
+    theme: "light",
+  },
+  tags: ["autodocs"],
+  decorators: [
+    (Story, context) => {
+      const isSideBySide = context.globals.theme === "side-by-side";
+
+      return isSideBySide ? (
+        <div
+          style={{
+            display: "flex",
+            flexDirection: "row",
+            gap: "2rem",
+            padding: "2rem",
+          }}
+        >
+          <ThemeProvider theme={"light"}>
+            <Story />
+          </ThemeProvider>
+          <ThemeProvider theme={"dark"}>
+            <Story />
+          </ThemeProvider>
+        </div>
+      ) : (
+        <ThemeProvider theme={context.globals.theme}>
+          <div
+            style={{
+              padding: "2rem",
+            }}
+          >
+            <Story />
+          </div>
+        </ThemeProvider>
+      );
+    },
+  ],
+};
+
+export default preview;