Merge pull request #1 from kwooshung/develop

Develop

.codeclimate.yml

@@ -0,0 +1,11 @@
+version: '2'
+exclude_patterns:
+  - 'scripts/'
+  - '**/*test.js'
+  - '**/*test.jsx'
+  - '**/*test.ts'
+  - '**/*test.tsx'
+  - '**/*spec.js'
+  - '**/*spec.jsx'
+  - '**/*spec.ts'
+  - '**/*spec.tsx'

.commitlintrc.cjs

@@ -0,0 +1 @@
+module.exports = require('./configs/commitlintrc.cjs');

.eslintrc.cjs

@@ -0,0 +1 @@
+module.exports = require('./configs/eslintrc.cjs');

.gitattributes

@@ -0,0 +1 @@
+* text=auto eol=lf

.github/workflows/ci.yml

@@ -0,0 +1,65 @@
+name: ci
+
+# 当推送到 main分支 时 触发此工作流
+on:
+  push:
+    branches:
+      - main
+permissions:
+  contents: write
+
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: checkout
+        uses: actions/checkout@main
+
+      # 全局安装 pnpm
+      - name: install pnpm
+        run: npm install -g pnpm
+
+      # 使用 pnpm 安装依赖
+      - name: install dependencies
+        run: pnpm install
+
+      # 使用 pnpm 执行测试
+      - name: run tests
+        run: pnpm test:ci
+
+      # 上传覆盖率报告到 Coveralls
+      - name: Upload coverage reports to Codecov
+        uses: codecov/codecov-action@main
+        env:
+          CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
+
+      # 使用 pnpm 构建
+      - name: build
+        run: pnpm build
+
+      # 自动发布
+      - name: Auto Release
+        run: npx cvlar -r
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      # 同步到 Gitee
+      - name: Sync to Gitee
+        uses: wearerequired/git-mirror-action@master
+        env:
+          SSH_PRIVATE_KEY: ${{ secrets.GITEE_PRIVATE_KEY }}
+        with:
+          source-repo: 'git@github.com:kwooshung/React-Themes.git'
+          destination-repo: 'git@gitee.com:kwooshung/React-Themes.git'
+
+      # 自动发布到 npm
+      - name: Sync to Npm.js
+        uses: actions/setup-node@main
+        with:
+          node-version: '16.14.0'
+          registry-url: https://registry.npmjs.org/
+      - name: Publish to Npm.js
+        run: npm publish --access public
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}

.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+.eslintcache
+.stylelintcache
+node_modules
+dist
+dist-ssr
+coverage
+*.local
+# Editor directories and files
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+.cvlar-commit-message-*.tmp

.husky/commit-msg

@@ -0,0 +1,3 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+npx --no-install commitlint --edit $1

.husky/pre-commit

@@ -0,0 +1,3 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+npx lint-staged

.ks-cvlarrc.cjs

@@ -0,0 +1 @@
+module.exports = require('./configs/.ks-cvlarrc.cjs');

.lintstagedrc

@@ -0,0 +1,6 @@
+{
+  "*.{js,jsx,ts,tsx}": ["npx prettier --write", "npx eslint --fix"],
+  "*.{css,less,scss}": ["npx prettier --write", "npx stylelint --fix"],
+  "*.json": ["npx prettier --write"],
+  "*.test.{js,jsx,ts,tsx}": ["pnpm test:ci"]
+}

.prettierrc.cjs

@@ -0,0 +1 @@
+module.exports = require('./configs/prettierrc.cjs');

.stylelintrc.cjs

@@ -0,0 +1 @@
+module.exports = require('./configs/stylelintrc.cjs');

.swcrc

@@ -0,0 +1,11 @@
+{
+  "jsc": {
+    "target": "es5",
+    "parser": {
+      "syntax": "typescript",
+      "tsx": true,
+      "decorators": false,
+      "dynamicImport": false
+    }
+  }
+}

.vscode/OsReactCom.code-snippets

@@ -0,0 +1,33 @@
+{
+  "React-TSX(Function)": {
+    "scope": "javascript,typescript,javascriptreact,typescriptreact",
+    "prefix": "OsReactCom",
+    "body": [
+      "import styles from './index.module.less';",
+      "import { FC, ReactNode } from 'react';",
+      "",
+      "/**",
+      " * @zh 组件Props属性：$2",
+      " * @en Component props: $2",
+      " */",
+      "export interface I$1Props {",
+      "  /**",
+      "  * @zh 子元素",
+      "  * @en Child element",
+      "  */",
+      "  children?: ReactNode;",
+      "}",
+      "",
+      "/**",
+      " * @zh 组件：$2",
+      " * @en Component: $2",
+      " */",
+      "const $1: FC<I$1Props> = ({ children = null }: I$1Props): ReactNode => {",
+      "  return <>{children}</>;",
+      "}",
+      "",
+      "export default $1;"
+    ],
+    "description": "组件模板"
+  }
+}

README.md

@@ -0,0 +1,154 @@
+<div align="center">
+
+# @kwooshung/react-themes
+
+It is more convenient to use svg as React icon, which has strong operability and high degree of freedom.
+
+[![GitHub License](https://img.shields.io/github/license/kwooshung/React-Themes?labelColor=272e3b&color=165dff)](LICENSE)
+![GitHub Release Date - Published_At](https://img.shields.io/github/release-date/kwooshung/React-Themes?labelColor=272e3b&color=00b42A&logo=github)
+![GitHub last commit](https://img.shields.io/github/last-commit/kwooshung/React-Themes?labelColor=272e3b&color=165dff)
+![GitHub code size in bytes](https://img.shields.io/github/languages/code-size/kwooshung/React-Themes?labelColor=272e3b&color=165dff)
+![GitHub top language](https://img.shields.io/github/languages/top/kwooshung/React-Themes?labelColor=272e3b&color=165dff)
+![GitHub pull requests](https://img.shields.io/github/issues-pr/kwooshung/React-Themes?labelColor=272e3b&color=165dff)
+![GitHub issues](https://img.shields.io/github/issues/kwooshung/React-Themes?labelColor=272e3b&color=165dff)
+![Github Stars](https://img.shields.io/github/stars/kwooshung/React-Themes?labelColor=272e3b&color=165dff)
+[![NPM Version](https://img.shields.io/npm/v/@kwooshung/react-themes?labelColor=272e3b&color=165dff)](https://www.npmjs.com/package/@kwooshung/react-themes)
+[![Npm.js Downloads/Week](https://img.shields.io/npm/dw/@kwooshung/react-themes?labelColor=272e3b&labelColor=272e3b&color=165dff&logo=npm)](https://www.npmjs.com/package/@kwooshung/react-themes)
+[![Github CI/CD](https://github.com/kwooshung/React-Themes/actions/workflows/ci.yml/badge.svg)](https://github.com/kwooshung/React-Themes/actions/)
+[![codecov](https://codecov.io/gh/kwooshung/React-Themes/graph/badge.svg?token=EI87ZaW6EC)](https://codecov.io/gh/kwooshung/React-Themes)
+[![Maintainability](https://api.codeclimate.com/v1/badges/d40982a696f3df2e89b8/maintainability)](https://codeclimate.com/github/kwooshung/React-Themes/maintainability)
+[![Gitee Repo](https://img.shields.io/badge/Gitee-React--Themes-165dff?logo=gitee)](https://gitee.com/kwooshung/React-Themes/)
+
+<p align="center">
+    <a href="README.md" style="font-weight:700;color:#165dff;text-decoration:underline;">English</a> | 
+    <a href="README.zh-CN.md">中文</a>
+</p>
+</div>
+
+# Why Develop It?
+
+- So, I think directly importing icons as components into my project is the most suitable way for me.
+- Because current **React websites** only load the entire page during the initial load. During route switching, there's no whole page reload, and writing them once in the global structure won't pose any performance issues (after all, the dynamic creation process of [IconFont](https://www.iconfont.cn/) scripts works the same way).
+
+# What Pain Points Does It Solve?
+
+- Why not directly import SVGs and auto-generate icons?
+  - Because I don't like this way of importing, and the componentization functionality is not strong or flexible enough.
+- Why not directly use [IconFont](https://www.iconfont.cn/) to import **script**?
+  - I quite like this method, but it’s troublesome to manage icons on the official website every time;
+  - It's also bothersome to upload my own icons, especially since the review mechanism is very strict; for example, I wanted to upload a Chinese flag icon to support internationalization, but the review system didn't allow it;
+  - There was an incident where [IconFont](https://www.iconfont.cn/) suddenly announced they would close their CDN service. Although the existing icon links were not affected, modifying the icon library became impossible, and I had to download them myself. Later on, they reopened the service, but such instability is worrying;
+- Full control over tags and SVG structure;
+- Supports **prefix** for easy management;
+
+# Why Use It?
+
+- Supports custom SVG icons, allowing you to use any icons you like;
+- Supports customization of the loading bar's style, such as color, size, rotation direction, and animation;
+- Supports bilingual annotations in both English and Chinese;
+- Low learning curve, simple and flexible usage;
+- Implemented using modern features of **ES6**;
+- Written in **TypeScript** for type safety;
+- Supports modular import on demand with `esm`, natively supporting **tree-shaking**, so there's no need to worry about the package size post-compilation;
+- This project also provides a `commonjs` (`cjs`) version;
+- Test coverage **100%**;
+
+# Installation
+
+## npm
+
+```bash
+npm install @kwooshung/react-themes
+```
+
+## yarn
+
+```bash
+yarn add @kwooshung/react-themes
+```
+
+## pnpm
+
+```bash
+pnpm add @kwooshung/react-themes
+```
+
+# Usage
+
+被 `ThemesProvider` 包裹的组件，都可以通过 `Themes` 获取到主题统一的状态。
+
+## ThemesProvider
+
+```tsx
+import { ThemesProvider } from '@kwooshung/react-themes';
+import Switch from './Switch';
+
+/**
+ * @zh 主题列表
+ * @en Theme list
+ */
+const ThemeList = ['light', 'dark', 'blue', 'green'];
+
+/**
+ * @zh 全局布局
+ * @en Global layout
+ */
+const Layout = () => {
+  return (
+    <ThemesProvider def='auto' list={ThemeList}>
+      <OtherComponents />
+      <Switch />
+      <OtherComponents />
+    </ThemesProvider>
+  );
+};
+
+export default App;
+```
+
+## Themes
+
+```tsx
+import { IThemesContext, Themes } from '@kwooshung/react-themes';
+
+const Demo = () => {
+  const themes = (context: IThemesContext): ReactNode => {
+    return (
+      // Write your theme switching button or list here, and you can get the theme status through `context`;
+    );
+  };
+
+  return <Themes>{themes}</Themes>;
+};
+
+export default Switch;
+```
+
+# API
+
+For interface type definition, you can also read the **[interfaces.d.ts](./src/themes/interfaces.d.ts)** source file;
+
+## IThemesProps
+
+| Properties | Type                                          | Default Value | Description                     |
+| ---------- | --------------------------------------------- | ------------- | ------------------------------- |
+| children   | (themeContext: `IThemesContext`) => ReactNode | -             | Subcomponent rendering function |
+
+## IThemesProviderProps
+
+| Properties | Type     | Default Value | Description                         |
+| ---------- | -------- | ------------- | ----------------------------------- |
+| def        | string   | `auto`        | Default theme value, default `auto` |
+| list       | string[] | -             | Topic list                          |
+
+## IThemesContext
+
+| Properties         | Type                    | Default Value     | Description                                                                                                               |
+| ------------------ | ----------------------- | ----------------- | ------------------------------------------------------------------------------------------------------------------------- |
+| value              | string                  | `auto`            | Current theme value, default `auto`                                                                                       |
+| name               | string                  | `auto`            | The current theme name, except `auto`, is the same as `value`. If `value = auto`, if the system is dark, then `name=dark` |
+| setTheme           | (theme: string) => void | -                 | Topic list                                                                                                                |
+| addThemes          | (themes: string         | string[]) => void | Add topic                                                                                                                 |
+| getValueTheme      | () => string            | -                 | Get the current topic value                                                                                               |
+| getNameTheme       | () => string            | -                 | Get the current topic name                                                                                                |
+| getAvailableThemes | () => string[]          | -                 | Get a list of available themes                                                                                            |