Merge pull request #2 from kwooshung/develop

Develop

README.md

@@ -2,7 +2,7 @@
 
 # @kwooshung/react-themes
 
-It is more convenient to use svg as React icon, which has strong operability and high degree of freedom.
+## A super convenient theme management component, you can set the theme color by yourself, add custom themes at will, and design templates by yourself. All data themes share the same state, support local storage settings, and can determine light or dark colors according to the system.
 
 [![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)
@@ -27,31 +27,33 @@ It is more convenient to use svg as React icon, which has strong operability and
 
 # 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).
+- In today's world, can a website be called modern without a **`Change Theme`** feature? At the very least, it should have a **`Dark Mode`**, right?
 
 # 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;
+- Every time a website is developed, there's the hassle of writing a theme management system from scratch;
+- Why not use other third-party components?
+  - They are often highly integrated with their own UI component libraries;
+  - The functionality is too complex and not lightweight enough;
+  - The lightweight component libraries, on the other hand, tend to be overly simplistic in features;
 
 # 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**;
+- **Headless**, no predefined styles, allows customizing the theme switch button or list;
+- Supports custom theme colors, with default support for **'light'** and **'dark'** themes;
+- Easy to use, simple operation, **low learning curve**, and high flexibility;
+- Shared state, all data themes share the same status;
+- Implemented with modern **ES6** features;
 - 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%**;
+- Modular **esm** import on demand, naturally supports **tree-shaking**, no worries about the size after packaging;
+- Of course, this project also offers a **commonjs (cjs)** version;
+- **100%** test coverage;
+
+# Demo
+
+## [CodePen](https://codepen.io/kwooshung/pen/vYPwypM)
+
+## [CodeSandbox](https://codesandbox.io/p/devbox/react-themes-tmdtrh?file=%2Fsrc%2Fmain.tsx%3A9%2C3)
 
 # Installation
 

README.zh-CN.md

@@ -2,7 +2,7 @@
 
 # @kwooshung/react-themes
 
-超方便的主题管理组件，可自行设置主题颜色，可自行设计模板，所有数据主题共享同一个状态，支持本地存储设置。
+## 超方便的主题管理组件，可自行设置主题颜色，可任意增加自定义主题，可自行设计模板，所有数据主题共享同一个状态，支持本地存储设置，可根据系统判断浅色调或暗色调。
 
 [![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)
@@ -49,6 +49,12 @@
 - 当然本项目也提供了 **commonjs** 规范的 **cjs** 版本；
 - 测试覆盖率 **100%**；
 
+# 在线演示
+
+## [CodePen](https://codepen.io/kwooshung/pen/vYPwypM)
+
+## [CodeSandbox](https://codesandbox.io/p/devbox/react-themes-tmdtrh?file=%2Fsrc%2Fmain.tsx%3A9%2C3)
+
 # 安装
 
 ## npm

changelogs/.history

@@ -1 +1,2 @@
+1.0.0
 0.0.1

changelogs/CHANGELOG.en.md

@@ -1,3 +1,9 @@
+## 🎉 1.0.0 `2024-02-22`
+### ✨ Feature
+- Increase online demonstration cases ([#f8ef484](https://github.com/kwooshung/React-Themes/commit/f8ef4846e2f9a322531c4d6d0f94f350c47d255f))
+### 🐛 Fix
+- Modify the English document, due to the copy of the document, the text is not right ([#7cf5264](https://github.com/kwooshung/React-Themes/commit/7cf526425c813fb63b759850b5f62ec8505c811e))
+
 ## 🎉 0.0.1 `2024-02-22`
 ### 🆕 Add
 - Explain that the document has been basically perfect, and the demo Demo demonstrates, and later added ([#36ad49c](https://github.com/kwooshung/React-Themes/commit/36ad49c55b49c1a79408530d35243636fb7fb248))
@@ -6,5 +12,4 @@
 ### 🐛 Fix
 - Repair unit test type ([#ae82a55](https://github.com/kwooshung/React-Themes/commit/ae82a552fbf7dc96a65b4868eb3786826bd39da3))
 ### ✨ Feature
-- The function has been perfect, so there is a test unit test and API documentation ([#8911071](https://github.com/kwooshung/React-Themes/commit/8911071f6d72cac0e2dd7f8d092ae8cc416c9a01))
-
+- The function has been perfect, so there is a test unit test and API documentation ([#8911071](https://github.com/kwooshung/React-Themes/commit/8911071f6d72cac0e2dd7f8d092ae8cc416c9a01))

changelogs/CHANGELOG.ja.md

@@ -1,3 +1,9 @@
+## 🎉 1.0.0 `2024-02-22`
+### ✨ Feature
+- オンラインデモンストレーションケースを増やします ([#f8ef484](https://github.com/kwooshung/React-Themes/commit/f8ef4846e2f9a322531c4d6d0f94f350c47d255f))
+### 🐛 Fix
+- ドキュメントのコピーにより、英語のドキュメントを変更すると、テキストは正しくありません ([#7cf5264](https://github.com/kwooshung/React-Themes/commit/7cf526425c813fb63b759850b5f62ec8505c811e))
+
 ## 🎉 0.0.1 `2024-02-22`
 ### 🆕 Add
 - ドキュメントが基本的に完璧であり、デモのデモが実証し、後で追加したことを説明する ([#36ad49c](https://github.com/kwooshung/React-Themes/commit/36ad49c55b49c1a79408530d35243636fb7fb248))
@@ -6,5 +12,4 @@
 ### 🐛 Fix
 - 修理単位テストタイプ ([#ae82a55](https://github.com/kwooshung/React-Themes/commit/ae82a552fbf7dc96a65b4868eb3786826bd39da3))
 ### ✨ Feature
-- 機能は完璧だったので、テスト単位テストとAPIドキュメントがあります ([#8911071](https://github.com/kwooshung/React-Themes/commit/8911071f6d72cac0e2dd7f8d092ae8cc416c9a01))
-
+- 機能は完璧だったので、テスト単位テストとAPIドキュメントがあります ([#8911071](https://github.com/kwooshung/React-Themes/commit/8911071f6d72cac0e2dd7f8d092ae8cc416c9a01))

changelogs/CHANGELOG.ko.md

@@ -1,3 +1,9 @@
+## 🎉 1.0.0 `2024-02-22`
+### ✨ Feature
+- 온라인 데모 사례를 늘리십시오 ([#f8ef484](https://github.com/kwooshung/React-Themes/commit/f8ef4846e2f9a322531c4d6d0f94f350c47d255f))
+### 🐛 Fix
+- 문서의 사본으로 인해 텍스트가 옳지 않습니다. ([#7cf5264](https://github.com/kwooshung/React-Themes/commit/7cf526425c813fb63b759850b5f62ec8505c811e))
+
 ## 🎉 0.0.1 `2024-02-22`
 ### 🆕 Add
 - 문서가 기본적으로 완벽했으며 데모 데모가 시연되고 나중에 추가되었다고 설명합니다. ([#36ad49c](https://github.com/kwooshung/React-Themes/commit/36ad49c55b49c1a79408530d35243636fb7fb248))
@@ -6,5 +12,4 @@
 ### 🐛 Fix
 - 수리 장치 테스트 유형 ([#ae82a55](https://github.com/kwooshung/React-Themes/commit/ae82a552fbf7dc96a65b4868eb3786826bd39da3))
 ### ✨ Feature
-- 이 기능은 완벽 했으므로 테스트 장치 테스트 및 API 문서가 있습니다. ([#8911071](https://github.com/kwooshung/React-Themes/commit/8911071f6d72cac0e2dd7f8d092ae8cc416c9a01))
-
+- 이 기능은 완벽 했으므로 테스트 장치 테스트 및 API 문서가 있습니다. ([#8911071](https://github.com/kwooshung/React-Themes/commit/8911071f6d72cac0e2dd7f8d092ae8cc416c9a01))

changelogs/CHANGELOG.ru.md

@@ -1,3 +1,9 @@
+## 🎉 1.0.0 `2024-02-22`
+### ✨ Feature
+- Увеличьте случаи демонстрации онлайн ([#f8ef484](https://github.com/kwooshung/React-Themes/commit/f8ef4846e2f9a322531c4d6d0f94f350c47d255f))
+### 🐛 Fix
+- Изменить английский документ, из -за копии документа, текст не прав. ([#7cf5264](https://github.com/kwooshung/React-Themes/commit/7cf526425c813fb63b759850b5f62ec8505c811e))
+
 ## 🎉 0.0.1 `2024-02-22`
 ### 🆕 Add
 - Объясните, что документ был в основном совершенным, и демонстрация демонстрирует, а затем добавил ([#36ad49c](https://github.com/kwooshung/React-Themes/commit/36ad49c55b49c1a79408530d35243636fb7fb248))
@@ -6,5 +12,4 @@
 ### 🐛 Fix
 - Тип испытаний на ремонт ([#ae82a55](https://github.com/kwooshung/React-Themes/commit/ae82a552fbf7dc96a65b4868eb3786826bd39da3))
 ### ✨ Feature
-- Функция была идеальной, поэтому есть тест -тест и документация по API ([#8911071](https://github.com/kwooshung/React-Themes/commit/8911071f6d72cac0e2dd7f8d092ae8cc416c9a01))
-
+- Функция была идеальной, поэтому есть тест -тест и документация по API ([#8911071](https://github.com/kwooshung/React-Themes/commit/8911071f6d72cac0e2dd7f8d092ae8cc416c9a01))

changelogs/CHANGELOG.zh-cn.md

@@ -1,3 +1,9 @@
+## 🎉 1.0.0 `2024-02-22`
+### ✨ Feature
+- 增加在线演示案例 ([#f8ef484](https://github.com/kwooshung/React-Themes/commit/f8ef4846e2f9a322531c4d6d0f94f350c47d255f))
+### 🐛 Fix
+- 修改英语文档，由于文档的副本，文本不正确 ([#7cf5264](https://github.com/kwooshung/React-Themes/commit/7cf526425c813fb63b759850b5f62ec8505c811e))
+
 ## 🎉 0.0.1 `2024-02-22`
 ### 🆕 Add
 - 说明该文档基本上是完美的，演示演示了，然后添加 ([#36ad49c](https://github.com/kwooshung/React-Themes/commit/36ad49c55b49c1a79408530d35243636fb7fb248))
@@ -6,5 +12,4 @@
 ### 🐛 Fix
 - 维修单元测试类型 ([#ae82a55](https://github.com/kwooshung/React-Themes/commit/ae82a552fbf7dc96a65b4868eb3786826bd39da3))
 ### ✨ Feature
-- 该功能非常完美，因此有一个测试单元测试和API文档 ([#8911071](https://github.com/kwooshung/React-Themes/commit/8911071f6d72cac0e2dd7f8d092ae8cc416c9a01))
-
+- 该功能非常完美，因此有一个测试单元测试和API文档 ([#8911071](https://github.com/kwooshung/React-Themes/commit/8911071f6d72cac0e2dd7f8d092ae8cc416c9a01))

changelogs/CHANGELOG.zh-tw.md

@@ -1,3 +1,9 @@
+## 🎉 1.0.0 `2024-02-22`
+### ✨ Feature
+- 增加在線演示案例 ([#f8ef484](https://github.com/kwooshung/React-Themes/commit/f8ef4846e2f9a322531c4d6d0f94f350c47d255f))
+### 🐛 Fix
+- 修改英語文檔，由於文檔的副本，文本不正確 ([#7cf5264](https://github.com/kwooshung/React-Themes/commit/7cf526425c813fb63b759850b5f62ec8505c811e))
+
 ## 🎉 0.0.1 `2024-02-22`
 ### 🆕 Add
 - 說明該文檔基本上是完美的，演示演示了，然後添加 ([#36ad49c](https://github.com/kwooshung/React-Themes/commit/36ad49c55b49c1a79408530d35243636fb7fb248))
@@ -6,5 +12,4 @@
 ### 🐛 Fix
 - 維修單元測試類型 ([#ae82a55](https://github.com/kwooshung/React-Themes/commit/ae82a552fbf7dc96a65b4868eb3786826bd39da3))
 ### ✨ Feature
-- 該功能非常完美，因此有一個測試單元測試和API文檔 ([#8911071](https://github.com/kwooshung/React-Themes/commit/8911071f6d72cac0e2dd7f8d092ae8cc416c9a01))
-
+- 該功能非常完美，因此有一個測試單元測試和API文檔 ([#8911071](https://github.com/kwooshung/React-Themes/commit/8911071f6d72cac0e2dd7f8d092ae8cc416c9a01))

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kwooshung/react-themes",
-  "version": "0.0.1",
+  "version": "1.0.0",
   "title": "react-themes",
   "description": "It is more convenient to use svg as React theme, which has strong operability and high degree of freedom.",
   "private": false,

src/index.ts

@@ -1,3 +1,3 @@
-export type { IThemesProviderProps, IThemesProps } from './themes/interfaces';
+export type { IThemesProviderProps, IThemesContext, IThemesProps } from './themes/interfaces';
 export { default as ThemesProvider } from './themes/themesProvider';
 export { default as Themes } from './themes';

src/themes/index.ts

@@ -1,4 +1,4 @@
-import { FC, ReactNode, useContext } from 'react';
+import { FC, memo, ReactNode, useContext } from 'react';
 import ThemesContext from './themesContext';
 import { IThemesProps } from './interfaces';
 
@@ -11,4 +11,4 @@ const Themes: FC<IThemesProps> = ({ children }: IThemesProps): ReactNode => {
   return children(context);
 };
 
-export default Themes;
+export default memo(Themes);