first commit

.eslintrc.json

@@ -0,0 +1,20 @@
+{
+  "root": true,
+  "env": {
+    "node": true
+  },
+  "extends": [
+    "plugin:vue/vue3-essential",
+    "eslint:recommended",
+    "@vue/typescript/recommended",
+    "@vue/prettier",
+    "@vue/prettier/@typescript-eslint"
+  ],
+  "parserOptions": {
+    "ecmaVersion": 2020
+  },
+  "rules": {
+    "vue/no-unused-components": "off",
+    "no-debugger": "off"
+  }
+}

.github/docsearch.yml

@@ -0,0 +1,27 @@
+# name: docsearch
+
+# on:
+#   push:
+#     branches:
+#       - main
+# jobs:
+#   algolia:
+#     runs-on: ubuntu-latest
+#     steps:
+#       - uses: actions/checkout@v2
+
+#       - name: Get the content of docsearch.json as config
+#         id: algolia_config
+#         run: echo "::set-output name=config::$(cat docsearch.json | jq -r tostring)"
+
+#       - name: Run algolia/docsearch-scraper image
+#         env:
+#           ALGOLIA_APP_ID: ${{ secrets.APPLICATION_ID }}
+#           ALGOLIA_API_KEY: ${{ secrets.API_KEY }}
+#           CONFIG: ${{ steps.algolia_config.outputs.config }}
+#         run: |
+#           docker run \
+#             --env APPLICATION_ID=${ALGOLIA_APP_ID} \
+#             --env API_KEY=${ALGOLIA_API_KEY} \
+#             --env "CONFIG=${CONFIG}" \
+#             algolia/docsearch-scraper

.github/workflows/deploy2io.yml

@@ -0,0 +1,30 @@
+name: sync to github.io
+
+on:
+  push:
+    branches:
+      - main # default branch
+    paths:
+      - ".github/workflows/**"
+      - "**"
+
+jobs:
+  copy:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3 # 检出仓库
+      - uses: actions/setup-node@v3 # 设置node版本
+        with:
+          node-version: 16
+      - run: npm install
+      - run: npm run build
+
+      - name: Sync
+        uses: JamesIves/github-pages-deploy-action@v4
+        with:
+          branch: main # action 应该部署到的分支。
+          folder: dist # 操作应该部署的文件夹。
+          clean: false
+          repository-name: hellof2e/react-quarkdesign.github.io
+          token: ${{ secrets.GIT_ACTION }}
+          target-folder: /

.gitignore

@@ -0,0 +1,21 @@
+.DS_Store
+node_modules
+yarn.lock
+/cache
+/.nyc_output
+/coverage
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+/lib
+/es
+/umd
+/tsc
+/dist

.husky/.gitignore

@@ -0,0 +1 @@
+_

.prettierrc.js

@@ -0,0 +1,3 @@
+"use strict";
+
+module.exports = {};

.vscode/settings.json

@@ -0,0 +1,16 @@
+{
+  "editor.codeActionsOnSave": {
+    "source.fixAll": true
+  },
+  "files.associations": {
+    "*.vue": "html"
+  },
+  "eslint.options": {
+    "configFile": "./.eslintrc.json"
+  },
+  "eslint.validate": ["javascript", "vue", "html", "typescript"],
+  "workbench.startupEditor": "none",
+  "stylelint.validate": ["css", "scss"],
+  "scss.validate": false,
+  "css.validate": false
+}

README.md

@@ -0,0 +1,23 @@
+# Quark Design Documentation
+
+Quark Design documentation for React.
+
+To run the project locally, first install the dependencies:
+
+```bash
+npm install
+```
+
+Next, run the development server:
+
+```
+npm run dev
+```
+
+## Build
+
+When the code is merged into the `main` branch, the static resources are automatically built.
+
+## License
+
+This project is not licensed under an open-source license and is the intellectual property of Quark Labs. The source is available only as an educational resource and to accept fixes for minor mistakes.

commitlint.config.js

@@ -0,0 +1,34 @@
+module.exports = {
+  extends: ["@commitlint/config-conventional"],
+  rules: {
+    "body-leading-blank": [1, "always"],
+    "footer-leading-blank": [1, "always"],
+    "header-max-length": [2, "always", 72],
+    "scope-case": [2, "always", "lower-case"],
+    "subject-case": [
+      2,
+      "never",
+      ["sentence-case", "start-case", "pascal-case", "upper-case"],
+    ],
+    "subject-empty": [2, "never"],
+    "subject-full-stop": [2, "never", "."],
+    "type-case": [2, "always", "lower-case"],
+    "type-empty": [2, "never"],
+    "type-enum": [
+      2,
+      "always",
+      [
+        "upd",
+        "chore",
+        "docs",
+        "feat",
+        "fix",
+        "test",
+        "refactor",
+        "revert",
+        "style",
+        "release",
+      ],
+    ],
+  },
+};

dark-light-mode.mjs

@@ -0,0 +1,143 @@
+// enjoy it
+const template = document.createElement("template");
+template.innerHTML = `<style>
+    *,::after,::before{
+      box-sizing:border-box
+    }
+    :host{
+      contain:content;
+      display:inline-block;
+    }
+    :host img {
+        max-width: 100%;
+        margin-left: 0;
+        margin-right: 0;
+        margin-top: 0;
+        padding-bottom: 0;
+        padding-left: 0;
+        padding-right: 0;
+        padding-top: 0;
+        margin-bottom: 1.75rem;
+    }
+    .toggle {
+        position: relative;
+        touch-action: pan-x;
+        cursor: pointer;
+        background-color: transparent;
+        border: 0;
+        padding: 0;
+        -webkit-touch-callout: none;
+        -webkit-user-select: none;
+        -ms-user-select: none;
+        user-select: none;
+        -webkit-tap-highlight-color: rgba(0,0,0,0);
+        -webkit-tap-highlight-color: transparent;
+    }
+    .toggle .track {
+        width: 48px;
+        height: 22px;
+        padding: 0;
+        border-radius: 30px;
+        background-color: #313136;
+        transition: all .2s ease;
+        border: 1px solid rgba(82, 82, 89, .68);
+    }
+    .toggle .track .check, .toggle .track .x {
+        position: absolute;
+        width: 17px;
+        height: 17px;
+        top: 0;
+        bottom: 0;
+        margin-top: auto;
+        margin-bottom: auto;
+        line-height: 0;
+    }
+    .toggle .track .check {
+        left: 5px;
+        opacity: 0;
+        transition: opacity .25s ease;
+    }
+    .toggle .track .x {
+        right: 5px;
+    }
+    .toggle.dark .track .check, .toggle.dark .track .x{
+        opacity: 1;
+        transition: opacity .25s ease;
+    }
+    .toggle.dark .track .x {
+        opacity: 0;
+    }
+    .toggle .thumb {
+        position: absolute;
+        top: 1px;
+        left: 1px;
+        width: 20px;
+        height: 20px;
+        border-radius: 50%;
+        background-color: #fafafa;
+        box-sizing: border-box;
+        transition: all .5s cubic-bezier(.23,1,.32,1) 0ms;
+        transform: translateX(0);
+    }
+    .toggle.dark .thumb {
+        transform: translateX(26px);
+        border-color: #19ab27;
+    }
+  </style>
+  <div class="toggle">
+    <div class="track">
+      <div class="check">
+        <img src="data:image/png;base64,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" width="16" height="16" role="presentation" style="pointer-events: none;">
+      </div>
+      <div class="x">
+        <img src="data:image/png;base64,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" width="16" height="16" role="presentation" style="pointer-events: none;">
+      </div>
+    </div>
+    <div class="thumb"></div>
+  </div>
+`;
+
+function turnDark() {
+  document.documentElement.classList.add("dark");
+  localStorage.setItem("theme", "dark");
+}
+
+function turnLight() {
+  console.log("turn light");
+  document.documentElement.classList.remove("dark");
+  localStorage.setItem("theme", "light");
+}
+class DarkLightMode extends HTMLElement {
+  constructor() {
+    super();
+  }
+
+  connectedCallback() {
+    const shadowRoot = this.attachShadow({ mode: "closed" });
+    shadowRoot.appendChild(template.content.cloneNode(true));
+
+    const themeMedia = window.matchMedia("(prefers-color-scheme: dark)");
+    const toggle = shadowRoot.querySelector(".toggle");
+
+    if (localStorage.theme === "dark") {
+      turnDark();
+    } else if (localStorage.theme === "light") {
+      toggle.classList.toggle("dark");
+      turnLight();
+    } else if (themeMedia.matches) {
+      document.documentElement.classList.add("dark");
+    }
+
+    toggle.addEventListener("click", (e) => {
+      toggle.classList.toggle("dark");
+
+      if (toggle.classList.contains("dark")) {
+        turnLight();
+      } else {
+        turnDark();
+      }
+    });
+  }
+}
+
+customElements.define("dark-light-mode", DarkLightMode);

docsearch.json

@@ -0,0 +1,13 @@
+// {
+//   "index_name": "quark-design-hellobike",
+//   "start_urls": ["https://quark-design.hellobike.com/#/en-US/component/button"],
+//   "selectors": {
+//     "lvl0": {
+//       "selector": "",
+//       "default_value": "Documentation"
+//     },
+//     "lvl1": ".markdown-body h1"
+//   },
+//   "rateLimit": 8,
+//   "maxDepth": 10
+// }

index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta content="telephone=no" name="format-detection" />
+    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"/>
+    <link rel="shortcut icon" href="./src/assets/images/favicon.ico" type="image/x-icon"/>
+    <title>Quark Design - 下一代浏览器原生组件库，它可以同时在任意框架或无框架中使用。</title>
+    <meta name="keywords" content="quarkd、quark design、web components、webcomponents、组件库、跨技术栈、跨技术栈组件库、customelement、custom element、移动端组件库">
+    <meta name="description" content="基于 Quark Design 设计体系的跨技术栈移动端组件库。">
+    <script type="module" src="./dark-light-mode.mjs"></script>
+  </head>
+  <body>
+    <div id="doc"></div>
+    <script type="module" src="./src/docs_react/main.ts"></script>
+  </body>
+</html>

jest.config.js

@@ -0,0 +1,16 @@
+module.exports = {
+  moduleFileExtensions: ["vue", "js", "ts"],
+  preset: "ts-jest",
+  testEnvironment: "jsdom",
+  transform: {
+    "^.+\\.vue$": "vue-jest", // vue 文件用 vue-jest 转换
+    "^.+\\.ts$": "ts-jest", // ts 文件用 ts-jest 转换
+  },
+  // 匹配 __tests__ 目录下的 .js/.ts 文件 或其他目录下的 xx.test.js/ts xx.spec.js/ts
+  testRegex: "(/__tests__/.*|(\\.|/)(test|spec))\\.(ts)$",
+  //testRegex: '__tests__.action.spec.ts',
+  // 支持源代码中相同的 `@` -> `src` 别名
+  moduleNameMapper: {
+    "^@/(.*)$": "<rootDir>/src/$1",
+  },
+};