chore: move design-tokens into merged-packages as part of migration p…

…rocess (#100)

Duplicate of #92
with updated `main` branch

## **Description**

This PR follows **[PR#6] 1. Migrate the source repo's git history into
the merged-packages/ temporary directory in metamask design system** as
part of the [package migration process
guide](https://github.com/MetaMask/metamask-design-system/blob/main/docs/package-migration-process-guide.md#pr6-1-migrate-the-source-repos-git-history-into-the-merged-packages-temporary-directory-in-metamask-design-system).
This step migrates the Git history of the `design-tokens` repository
into the `metamask-design-system` monorepo, placing all contents under
the `merged-packages/design-tokens` directory.

[Example PR](MetaMask/core#1872) in core

## **Related issues**

Partly fixes:
#88

## **Manual testing steps**

1. Check the contents under `merged-packages/design-tokens` in the
`metamask-design-system` repository to ensure the file structure aligns
with the original `design-tokens` repository.
2. Verify that the commit history within `merged-packages/design-tokens`
accurately preserves previous `design-tokens` commits.
3. Confirm successful integration within the monorepo and that no errors
are introduced.

## **Pre-merge author checklist**

- [x] Verified `git-filter-repo` installation and migration process.
- [x] Confirmed all `design-tokens` files are correctly moved to
`merged-packages/design-tokens`.
- [x] Checked that the full commit history for `design-tokens` is
retained.
- [x] Followed MetaMask Coding Standards.
- [x] Set PR status appropriately.

## **Pre-merge reviewer checklist**

- [ ] Confirmed that all `design-tokens` files appear in
`merged-packages/design-tokens` with the correct structure.
- [ ] Verified the commit history for `design-tokens` is intact and
accurately reflects the original repository.
- [ ] Ensured this PR meets all acceptance criteria.

merged-packages/design-tokens/.babelrc.json

@@ -0,0 +1,18 @@
+{
+  "sourceType": "unambiguous",
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "chrome": 100,
+          "safari": 15,
+          "firefox": 91
+        }
+      }
+    ],
+    "@babel/preset-typescript",
+    "@babel/preset-react"
+  ],
+  "plugins": []
+}

merged-packages/design-tokens/.circleci/config.yml

@@ -0,0 +1,68 @@
+version: 2.1
+
+executors:
+  node-browsers:
+    docker:
+      - image: cimg/node:18.20-browsers
+
+workflows:
+  storybook:
+    jobs:
+      - prep-deps
+      - prep-build-storybook:
+          requires:
+            - prep-deps
+      - job-announce-storybook:
+          requires:
+            - prep-build-storybook
+
+jobs:
+  prep-deps:
+    executor: node-browsers
+    steps:
+      - checkout
+      - restore_cache:
+          key: dependency-cache-v1-{{ checksum "yarn.lock" }}
+      - run:
+          name: Install deps
+          command: |
+            yarn install
+      - save_cache:
+          key: dependency-cache-v1-{{ checksum "yarn.lock" }}
+          paths:
+            - node_modules/
+      - run:
+          name: Postinstall
+          command: |
+            yarn setup
+      - persist_to_workspace:
+          root: .
+          paths:
+            - node_modules
+
+  prep-build-storybook:
+    executor: node-browsers
+    steps:
+      - checkout
+      - attach_workspace:
+          at: .
+      - run:
+          name: build:storybook
+          command: yarn build-storybook
+      - persist_to_workspace:
+          root: .
+          paths:
+            - storybook-static
+
+  job-announce-storybook:
+    executor: node-browsers
+    steps:
+      - checkout
+      - attach_workspace:
+          at: .
+      - store_artifacts:
+          path: storybook-static
+          destination: storybook
+      - run:
+          name: build:announce
+          command: ./.circleci/scripts/metamaskbot-build-announce.js

merged-packages/design-tokens/.circleci/scripts/metamaskbot-build-announce.js

@@ -0,0 +1,47 @@
+#!/usr/bin/env node
+const fetch = require('node-fetch');
+
+start().catch((error) => {
+  console.error(error);
+  process.exit(1);
+});
+
+async function start() {
+  const {
+    GITHUB_COMMENT_TOKEN,
+    CIRCLE_PULL_REQUEST,
+    CIRCLE_SHA1,
+    CIRCLE_WORKFLOW_JOB_ID,
+  } = process.env;
+
+  if (!CIRCLE_PULL_REQUEST) {
+    console.warn(`No pull request detected for commit "${CIRCLE_SHA1}"`);
+    return;
+  }
+
+  const CIRCLE_PR_NUMBER = CIRCLE_PULL_REQUEST.split('/').pop();
+  const SHORT_SHA1 = CIRCLE_SHA1.slice(0, 7);
+  const BUILD_LINK_BASE = `https://output.circle-artifacts.com/output/job/${CIRCLE_WORKFLOW_JOB_ID}/artifacts/0`;
+
+  const storybookUrl = `${BUILD_LINK_BASE}/storybook/index.html`;
+  const storybookLink = `<a href="${storybookUrl}">Storybook</a>`;
+
+  const commentBody = `Builds ready [${SHORT_SHA1}]\n\nStorybook: ${storybookLink}`;
+
+  const JSON_PAYLOAD = JSON.stringify({ body: commentBody });
+  const POST_COMMENT_URI = `https://api.github.com/repos/metamask/design-tokens/issues/${CIRCLE_PR_NUMBER}/comments`;
+
+  console.log(`Posting to: ${POST_COMMENT_URI}`);
+
+  const response = await fetch(POST_COMMENT_URI, {
+    method: 'POST',
+    body: JSON_PAYLOAD,
+    headers: {
+      'User-Agent': 'metamaskbot',
+      Authorization: `token ${GITHUB_COMMENT_TOKEN}`,
+    },
+  });
+  if (!response.ok) {
+    throw new Error(`Post comment failed with status '${response.statusText}'`);
+  }
+}

merged-packages/design-tokens/.depcheckrc.json

@@ -0,0 +1,21 @@
+{
+  "ignores": [
+    "@lavamoat/allow-scripts",
+    "@lavamoat/preinstall-always-fail",
+    "@metamask/auto-changelog",
+    "@types/*",
+    "@yarnpkg/types",
+    "prettier-plugin-packagejson",
+    "ts-node",
+    "@yarnpkg/core",
+    "@yarnpkg/cli",
+    "clipanion",
+    "@yarnpkg/fslib",
+    "@chromatic-com/storybook",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+    "@storybook/addon-links",
+    "@storybook/blocks",
+    "@storybook/test"
+  ]
+}

merged-packages/design-tokens/.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true

merged-packages/design-tokens/.eslintrc.js

@@ -0,0 +1,51 @@
+module.exports = {
+  root: true,
+
+  extends: ['@metamask/eslint-config', 'plugin:storybook/recommended'],
+
+  overrides: [
+    {
+      files: ['*.ts'],
+      extends: ['@metamask/eslint-config-typescript'],
+    },
+
+    {
+      files: ['*.js'],
+      parserOptions: {
+        sourceType: 'script',
+      },
+      extends: ['@metamask/eslint-config-nodejs'],
+    },
+
+    {
+      files: ['yarn.config.cjs'],
+      parserOptions: {
+        sourceType: 'script',
+        ecmaVersion: 2020,
+      },
+      settings: {
+        jsdoc: {
+          mode: 'typescript',
+        },
+      },
+      extends: ['@metamask/eslint-config-nodejs'],
+    },
+
+    {
+      files: ['*.test.ts', '*.test.js'],
+      extends: [
+        '@metamask/eslint-config-jest',
+        '@metamask/eslint-config-nodejs',
+      ],
+    },
+  ],
+
+  ignorePatterns: [
+    '!.eslintrc.js',
+    '!.prettierrc.js',
+    'dist/',
+    'storybook-static/',
+    '.yarn/',
+    'docs/utils/getCSSVariablesFromStylesheet.ts',
+  ],
+};

merged-packages/design-tokens/.gitattributes

@@ -0,0 +1,8 @@
+* text=auto
+
+yarn.lock linguist-generated=false
+
+# yarn v3
+# See: https://yarnpkg.com/getting-started/qa#which-files-should-be-gitignored
+/.yarn/releases/** binary
+/.yarn/plugins/** binary

merged-packages/design-tokens/.github/CODEOWNERS

@@ -0,0 +1,4 @@
+# Lines starting with '#' are comments.
+# Each line is a file pattern followed by one or more owners.
+
+*                                    @MetaMask/engineering

merged-packages/design-tokens/.github/ISSUE_TEMPLATE/general_issue.md

@@ -0,0 +1,31 @@
+---
+name: General issue
+about: For any issues
+title: ''
+labels: ''
+assignees: ''
+---
+
+### **Description**
+
+Describe the task. What does this aim to solve?
+
+### **Technical Details**
+
+- Implementation details
+- Insight to what needs to be done
+- Etc.
+
+### **Acceptance Criteria**
+
+- Check with product on metrics
+- Cases to satisfy
+- XYZ should work
+- Etc.
+
+### **References**
+
+- References go here.
+- Issue numbers. Links.
+- Slack threads.
+- Etc.

merged-packages/design-tokens/.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,48 @@
+## **Description**
+
+<!--
+Write a short description of the changes included in this pull request, also include relevant motivation and context. Have in mind the following questions:
+1. What is the reason for the change?
+2. What is the improvement/solution?
+-->
+
+## **Related issues**
+
+Fixes:
+
+## **Manual testing steps**
+
+1. Go to this page...
+2.
+3.
+
+## **Screenshots/Recordings**
+
+<!-- If applicable, add screenshots and/or recordings to visualize the before and after of your change. -->
+
+### **Before**
+
+<!-- [screenshots/recordings] -->
+
+### **After**
+
+<!-- [screenshots/recordings] -->
+
+## **Pre-merge author checklist**
+
+- [ ] I’ve followed [MetaMask Coding Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md).
+- [ ] I've clearly explained what problem this PR is solving and how it is solved.
+- [ ] I've linked related issues
+- [ ] I've included manual testing steps
+- [ ] I've included screenshots/recordings if applicable
+- [ ] I’ve included tests if applicable
+- [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format if applicable
+- [ ] I’ve applied the right labels on the PR (see [labeling guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)). Not required for external contributors.
+- [ ] I’ve properly set the pull request status:
+  - [ ] In case it's not yet "ready for review", I've set it to "draft".
+  - [ ] In case it's "ready for review", I've changed it from "draft" to "non-draft".
+
+## **Pre-merge reviewer checklist**
+
+- [ ] I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed).
+- [ ] I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.

merged-packages/design-tokens/.github/dependabot.yml

@@ -0,0 +1,15 @@
+# Please see the documentation for all configuration options:
+# https://docs.github.com/code-security/dependabot/dependabot-version-updates/configuration-options-for-the-dependabot.yml-file
+
+version: 2
+updates:
+  - package-ecosystem: 'npm'
+    directory: '/'
+    schedule:
+      interval: 'daily'
+      time: '06:00'
+    allow:
+      - dependency-name: '@metamask/*'
+    target-branch: 'main'
+    versioning-strategy: 'increase-if-necessary'
+    open-pull-requests-limit: 10

merged-packages/design-tokens/.github/workflows/build-deploy-storybook.yml

@@ -0,0 +1,34 @@
+name: Build and Deploy Storybook
+
+on:
+  workflow_call:
+    secrets:
+      PUBLISH_STORYBOOK_TOKEN:
+        required: true
+
+jobs:
+  build-deploy-storybook:
+    permissions:
+      contents: write
+    runs-on: ubuntu-latest
+    environment: github-pages
+    steps:
+      - name: Checkout the repository
+        uses: actions/checkout@v4
+      - name: Use Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+          cache: 'yarn'
+      - name: Install npm dependencies
+        run: yarn --immutable
+      - name: Run build script
+        run: yarn build-storybook
+      - name: Deploy to `storybook-static` directory of `gh-pages` branch
+        uses: peaceiris/actions-gh-pages@de7ea6f8efb354206b205ef54722213d99067935
+        with:
+          # This PUBLISH_STORYBOOK_TOKEN needs to be manually set per-repository.
+          # Look in the repository settings under "Environments", and set this token in the github-pages environment.
+          personal_token: ${{ secrets.PUBLISH_STORYBOOK_TOKEN }}
+          publish_dir: ./storybook-static
+          destination_dir: storybook-static