Migrate Chromatic (#2906)

libs/.github/workflows/build.yml

@@ -1,107 +0,0 @@
----
-name: Build
-
-on: push
-
-jobs:
-  cloc:
-    name: CLOC
-    runs-on: ubuntu-20.04
-
-    steps:
-      - name: Checkout repo
-        uses: actions/checkout@5a4ac9002d0be2fb38bd78e4b4dbde5606d7042f
-
-      - name: Set up cloc
-        run: |
-          sudo apt-get update
-          sudo apt-get -y install cloc
-
-      - name: Print lines of code
-        run: cloc --include-lang TypeScript,JavaScript,HTML,Sass,CSS --vcs git
-
-  build:
-    name: Build jslib
-    runs-on: ${{ matrix.os }}
-
-    strategy:
-      matrix:
-        os: [windows-2019, macos-10.15, ubuntu-20.04]
-
-    steps:
-      - name: Set up Node
-        uses: actions/setup-node@46071b5c7a2e0c34e49c3cb8a0e792e86e18d5ea
-        with:
-          node-version: "16"
-
-      - name: Install node-gyp
-        run: |
-          npm install -g node-gyp
-          node-gyp install $(node -v)
-
-      - name: Print environment
-        run: |
-          node --version
-          npm --version
-
-      - name: Checkout repo
-        uses: actions/checkout@5a4ac9002d0be2fb38bd78e4b4dbde5606d7042f
-
-      - name: Install Node dependencies
-        run: npm install
-
-      - name: Run linter
-        run: npm run lint
-
-      - name: Run tests
-        if: runner.os != 'Linux'
-        run: npm run test
-
-      - name: Upload test coverage artifact
-        if: runner.os != 'Linux'
-        uses: actions/upload-artifact@ee69f02b3dfdecd58bb31b4d133da38ba6fe3700
-        with:
-          name: test-coverage
-          path: coverage/
-
-  check-failures:
-    name: Check for failures
-    if: always()
-    runs-on: ubuntu-20.04
-    needs:
-      - cloc
-      - build
-    steps:
-      - name: Check if any job failed
-        if: ${{ (github.ref == 'refs/heads/master') || (github.ref == 'refs/heads/rc') }}
-        env:
-          CLOC_STATUS: ${{ needs.cloc.result }}
-          BUILD_STATUS: ${{ needs.build.result }}
-        run: |
-          if [ "$CLOC_STATUS" = "failure" ]; then
-              exit 1
-          elif [ "$BUILD_STATUS" = "failure" ]; then
-              exit 1
-          fi
-
-      - name: Login to Azure - Prod Subscription
-        uses: Azure/login@77f1b2e3fb80c0e8645114159d17008b8a2e475a
-        if: failure()
-        with:
-          creds: ${{ secrets.AZURE_PROD_KV_CREDENTIALS }}
-
-      - name: Retrieve secrets
-        id: retrieve-secrets
-        uses: Azure/get-keyvault-secrets@80ccd3fafe5662407cc2e55f202ee34bfff8c403
-        if: failure()
-        with:
-          keyvault: "bitwarden-prod-kv"
-          secrets: "devops-alerts-slack-webhook-url"
-
-      - name: Notify Slack on failure
-        uses: act10ns/slack@e4e71685b9b239384b0f676a63c32367f59c2522 # v1.2.2
-        if: failure()
-        env:
-          SLACK_WEBHOOK_URL: ${{ steps.retrieve-secrets.outputs.devops-alerts-slack-webhook-url }}
-        with:
-          status: ${{ job.status }}

libs/.github/workflows/chromatic.yml

@@ -1,41 +0,0 @@
----
-name: Chromatic
-
-on: push
-
-jobs:
-  chromatic:
-    name: Chromatic
-    runs-on: ubuntu-20.04
-
-    steps:
-      - name: Set up Node
-        uses: actions/setup-node@46071b5c7a2e0c34e49c3cb8a0e792e86e18d5ea # v2.1.5
-        with:
-          node-version: "16"
-
-      - name: Checkout repo
-        uses: actions/checkout@5a4ac9002d0be2fb38bd78e4b4dbde5606d7042f # v2.3.4
-        with:
-          fetch-depth: 0
-
-      - name: Cache npm
-        id: npm-cache
-        uses: actions/cache@c64c572235d810460d0d6876e9c705ad5002b353  # v2.1.6
-        with:
-          path: "~/.npm"
-          key: ${{ runner.os }}-npm-chromatic-${{ hashFiles('**/package-lock.json') }}
-
-      - name: Install Node dependencies
-        run: npm ci
-        working-directory: ./components
-
-      - name: Publish to Chromatic
-        uses: chromaui/action@c72f0b48c8887c0ef0abe18ad865a6c1e01e73c6
-        with:
-          token: ${{ secrets.GITHUB_TOKEN }}
-          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
-          workingDir: ./components
-          exitOnceUploaded: true
-          onlyChanged: true
-          externals: "[\"components/**/*.scss\", \"components/tailwind.config*.js\"]"

libs/components/.storybook/main.js

@@ -1,13 +0,0 @@
-module.exports = {
-  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
-  addons: [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@storybook/addon-a11y",
-    "storybook-addon-designs",
-  ],
-  framework: "@storybook/angular",
-  core: {
-    builder: "webpack5",
-  },
-};

libs/components/.storybook/preview.js

@@ -1,33 +0,0 @@
-import { setCompodocJson } from "@storybook/addon-docs/angular";
-import { componentWrapperDecorator, addDecorator } from "@storybook/angular";
-
-import docJson from "../documentation.json";
-setCompodocJson(docJson);
-
-export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
-  controls: {
-    matchers: {
-      color: /(background|color)$/i,
-      date: /Date$/,
-    },
-  },
-  docs: { inlineStories: true },
-};
-
-// ng-template is used to scope any template reference variables and isolate the previews
-const decorator = componentWrapperDecorator(
-  (story) => `
-<ng-template #lightPreview>
-  <div class="theme_light tw-px-5 tw-py-10 tw-border-2 tw-border-solid tw-border-secondary-300 tw-bg-[#ffffff]">${story}</div>
-</ng-template>
-<ng-template #darkPreview>
-  <div class="theme_dark tw-mt-5 tw-px-5 tw-py-10 tw-bg-[#1f242e]">${story}</div>
-</ng-template>
-
-<ng-container *ngTemplateOutlet="lightPreview"></ng-container>
-<ng-container *ngTemplateOutlet="darkPreview"></ng-container>
-`
-);
-
-addDecorator(decorator);

libs/components/.storybook/tsconfig.json

@@ -1,10 +0,0 @@
-{
-  "extends": "../tsconfig.app.json",
-  "compilerOptions": {
-    "types": ["node"],
-    "allowSyntheticDefaultImports": true
-  },
-  "exclude": ["../src/test.ts", "../src/**/*.spec.ts", "../projects/**/*.spec.ts"],
-  "include": ["../src/**/*", "../projects/**/*"],
-  "files": ["./typings.d.ts"]
-}

libs/components/.storybook/typings.d.ts

@@ -1,4 +0,0 @@
-declare module "*.md" {
-  const content: string;
-  export default content;
-}

libs/components/tailwind.config.js

@@ -1,7 +1,7 @@
 /* eslint-disable */
 const config = require("./tailwind.config.base");
 
-config.content = ["./src/**/*.{html,ts,mdx}", "./.storybook/preview.js"];
+config.content = ["./libs/components/src/**/*.{html,ts,mdx}", "./.storybook/preview.js"];
 config.safelist = [
   {
     pattern: /tw-bg-(.*)/,