├── .browserslistrc
├── .changeset
└── config.json
├── .codesandbox
└── ci.json
├── .commitlintrc
├── .editorconfig
├── .eslintignore
├── .eslintrc.cjs
├── .github
└── workflows
│ ├── ci.yml
│ ├── codeql.yml
│ ├── release.yml
│ └── size-limit.yml
├── .gitignore
├── .lintstagedrc.cjs
├── .npmrc
├── .nvmrc
├── .postcssrc.cjs
├── .prettierignore
├── .prettierrc
├── .remarkrc
├── .renovaterc
├── .simple-git-hooks.cjs
├── .stylelintignore
├── .stylelintrc
├── CHANGELOG.md
├── LICENSE
├── README.md
├── auto-imports.d.ts
├── docs
├── App.tsx
├── components
│ ├── ReactQrcodeDemo.tsx
│ ├── ReactQriousDemo.tsx
│ ├── code.tsx
│ ├── index.ts
│ └── react-rx
│ │ ├── index.tsx
│ │ └── store.ts
├── global.scss
├── index.tsx
├── tsconfig.json
└── types.ts
├── index.html
├── package.json
├── packages
├── @react-enhanced
│ ├── eslint-plugin
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── package.json
│ │ └── tsconfig.json
│ ├── hooks
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── shim.d.ts
│ │ ├── src
│ │ │ ├── api.ts
│ │ │ ├── computed.ts
│ │ │ ├── constant.ts
│ │ │ ├── helper.ts
│ │ │ ├── index.ts
│ │ │ ├── lifecycle.ts
│ │ │ ├── observable.ts
│ │ │ ├── promise.ts
│ │ │ ├── storage.ts
│ │ │ ├── timer.ts
│ │ │ └── types.ts
│ │ ├── test
│ │ │ ├── api.spec.ts
│ │ │ └── storage.spec.ts
│ │ └── tsconfig.json
│ ├── plugins
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── src
│ │ │ └── index.ts
│ │ └── tsconfig.json
│ ├── shared
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── src
│ │ │ ├── constant.ts
│ │ │ ├── http.ts
│ │ │ ├── index.ts
│ │ │ └── timer.ts
│ │ └── tsconfig.json
│ ├── translate
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── shim.d.ts
│ │ ├── src
│ │ │ ├── component.tsx
│ │ │ ├── constants.ts
│ │ │ ├── context.ts
│ │ │ ├── helpers.ts
│ │ │ ├── hook.ts
│ │ │ ├── index.ts
│ │ │ └── types.ts
│ │ └── tsconfig.json
│ ├── types
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── src
│ │ │ ├── builtin.ts
│ │ │ ├── context.ts
│ │ │ ├── error.ts
│ │ │ ├── helper.ts
│ │ │ └── index.ts
│ │ └── tsconfig.json
│ └── utils
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── src
│ │ ├── constant.ts
│ │ ├── header.ts
│ │ ├── helper.ts
│ │ ├── index.ts
│ │ ├── number.ts
│ │ ├── object.ts
│ │ ├── observe-dom.ts
│ │ ├── operator.ts
│ │ ├── promise.ts
│ │ ├── storage.ts
│ │ └── url.ts
│ │ └── tsconfig.json
├── react-qrcode
│ ├── CHANGELOG.md
│ ├── README.md
│ ├── package.json
│ ├── src
│ │ ├── index.ts
│ │ ├── qrcode.ts
│ │ ├── types.ts
│ │ └── use-qrcode.ts
│ └── tsconfig.json
└── react-qrious
│ ├── CHANGELOG.md
│ ├── README.md
│ ├── package.json
│ ├── qrious.d.ts
│ ├── src
│ ├── QRious.ts
│ ├── index.ts
│ └── use-qrious.ts
│ ├── tsconfig.json
│ └── typings.d.ts
├── pnpm-lock.yaml
├── pnpm-workspace.yaml
├── tsconfig.base.json
├── tsconfig.json
├── vercel.json
├── vite.config.ts
└── vitest.config.ts
/.browserslistrc:
--------------------------------------------------------------------------------
1 | extends @1stg/browserslist-config/modern
2 |
--------------------------------------------------------------------------------
/.changeset/config.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://unpkg.com/@changesets/config/schema.json",
3 | "changelog": [
4 | "@changesets/changelog-github",
5 | {
6 | "repo": "rx-ts/react"
7 | }
8 | ],
9 | "commit": false,
10 | "linked": [],
11 | "access": "restricted",
12 | "baseBranch": "master",
13 | "updateInternalDependencies": "minor",
14 | "ignore": []
15 | }
16 |
--------------------------------------------------------------------------------
/.codesandbox/ci.json:
--------------------------------------------------------------------------------
1 | {
2 | "node": "16",
3 | "installCommand": "codesandbox:install",
4 | "sandboxes": []
5 | }
6 |
--------------------------------------------------------------------------------
/.commitlintrc:
--------------------------------------------------------------------------------
1 | {
2 | "extends": [
3 | "@1stg"
4 | ]
5 | }
6 |
--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | root = true
2 |
3 | [*]
4 | indent_style = space
5 | indent_size = 2
6 | tab_width = 2
7 | end_of_line = lf
8 | charset = utf-8
9 | trim_trailing_whitespace = true
10 | insert_final_newline = true
11 |
--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
1 | coverage
2 | dist
3 | lib
4 | packages/*/CHANGELOG.md
5 | /auto-imports.d.ts
6 | /pnpm-lock.yaml
7 | !/.github
8 | !/.*.js
9 |
--------------------------------------------------------------------------------
/.eslintrc.cjs:
--------------------------------------------------------------------------------
1 | const { getGlobals } = require('eslint-plugin-mdx')
2 |
3 | module.exports = {
4 | root: true,
5 | extends: '@1stg',
6 | rules: {
7 | 'react/react-in-jsx-scope': 'off',
8 | },
9 | overrides: [
10 | {
11 | files: 'packages/**/README.md',
12 | extends: 'plugin:mdx/overrides',
13 | globals: getGlobals(['ReactQriousDemo', 'ReactQrcodeDemo']),
14 | parserOptions: {
15 | extensions: '.md',
16 | },
17 | },
18 | ],
19 | }
20 |
--------------------------------------------------------------------------------
/.github/workflows/ci.yml:
--------------------------------------------------------------------------------
1 | name: CI
2 |
3 | on:
4 | - push
5 | - pull_request
6 |
7 | jobs:
8 | ci:
9 | name: Lint and Test with Node.js ${{ matrix.node }}
10 | strategy:
11 | matrix:
12 | node:
13 | - 16
14 | - 18
15 | runs-on: ubuntu-latest
16 | steps:
17 | - name: Checkout Repo
18 | uses: actions/checkout@v3
19 |
20 | - name: Setup pnpm
21 | uses: pnpm/action-setup@v2
22 | with:
23 | version: latest
24 |
25 | - name: Setup Node.js ${{ matrix.node }}
26 | uses: actions/setup-node@v3
27 | with:
28 | node-version: ${{ matrix.node }}
29 | cache: pnpm
30 |
31 | - name: Install Dependencies
32 | run: pnpm i
33 |
34 | - name: Build, Lint and Test
35 | run: pnpm run-s build lint test
36 | env:
37 | EFF_NO_LINK_RULES: true
38 | PARSER_NO_WATCH: true
39 |
40 | - name: Codecov
41 | uses: codecov/codecov-action@v3
42 |
--------------------------------------------------------------------------------
/.github/workflows/codeql.yml:
--------------------------------------------------------------------------------
1 | name: 'CodeQL'
2 |
3 | on:
4 | push:
5 | branches: ['master']
6 | pull_request:
7 | branches: ['master']
8 | schedule:
9 | - cron: '28 6 * * 1'
10 |
11 | jobs:
12 | analyze:
13 | name: Analyze
14 | runs-on: ubuntu-latest
15 | permissions:
16 | actions: read
17 | contents: read
18 | security-events: write
19 |
20 | strategy:
21 | fail-fast: false
22 | matrix:
23 | language: [javascript]
24 |
25 | steps:
26 | - name: Checkout
27 | uses: actions/checkout@v3
28 |
29 | - name: Initialize CodeQL
30 | uses: github/codeql-action/init@v2
31 | with:
32 | languages: ${{ matrix.language }}
33 | queries: +security-and-quality
34 |
35 | - name: Autobuild
36 | uses: github/codeql-action/autobuild@v2
37 |
38 | - name: Perform CodeQL Analysis
39 | uses: github/codeql-action/analyze@v2
40 | with:
41 | category: '/language:${{ matrix.language }}'
42 |
--------------------------------------------------------------------------------
/.github/workflows/release.yml:
--------------------------------------------------------------------------------
1 | name: Release
2 |
3 | on:
4 | push:
5 | branches:
6 | - master
7 |
8 | jobs:
9 | release:
10 | name: Release
11 | runs-on: ubuntu-latest
12 | steps:
13 | - name: Checkout Repo
14 | uses: actions/checkout@v3
15 | with:
16 | # This makes Actions fetch all Git history so that Changesets can generate changelogs with the correct commits
17 | fetch-depth: 0
18 |
19 | - name: Setup pnpm
20 | uses: pnpm/action-setup@v2
21 | with:
22 | version: latest
23 |
24 | - name: Setup Node.js 16
25 | uses: actions/setup-node@v3
26 | with:
27 | node-version: 16
28 | cache: pnpm
29 |
30 | - name: Install Dependencies
31 | run: pnpm i
32 |
33 | - name: Create Release Pull Request or Publish to npm
34 | id: changesets
35 | uses: changesets/action@v1
36 | with:
37 | publish: pnpm release
38 | version: pnpm run version
39 | commit: 'chore: release package(s)'
40 | title: 'chore: release package(s)'
41 | env:
42 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
43 | NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
44 |
--------------------------------------------------------------------------------
/.github/workflows/size-limit.yml:
--------------------------------------------------------------------------------
1 | name: Size Limit
2 |
3 | on:
4 | pull_request:
5 | branches:
6 | - master
7 |
8 | jobs:
9 | size-limit:
10 | runs-on: ubuntu-latest
11 | steps:
12 | - uses: actions/checkout@v3
13 |
14 | - name: Setup pnpm
15 | uses: pnpm/action-setup@v2
16 | with:
17 | version: latest
18 |
19 | - name: Setup Node.js 16
20 | uses: actions/setup-node@v3
21 | with:
22 | node-version: 16
23 | cache: pnpm
24 |
25 | - name: Install Dependencies
26 | run: pnpm i
27 |
28 | - uses: andresz1/size-limit-action@v1
29 | with:
30 | github_token: ${{ secrets.GITHUB_TOKEN }}
31 | skip_step: install
32 | script: pnpm size-limit --json
33 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | *.log
2 | *.tsbuildinfo
3 | .*cache
4 | .type-coverage
5 | .vercel
6 | coverage
7 | dist
8 | lib
9 | node_modules
10 |
--------------------------------------------------------------------------------
/.lintstagedrc.cjs:
--------------------------------------------------------------------------------
1 | module.exports = require('@1stg/lint-staged/tsc')
2 |
--------------------------------------------------------------------------------
/.npmrc:
--------------------------------------------------------------------------------
1 | auto-install-peers=true
2 | enable-pre-post-scripts=true
3 | prefer-workspace-packages=true
4 | public-hoist-pattern[]=@1stg/*
5 | public-hoist-pattern[]=@commitlint/*
6 | public-hoist-pattern[]=@pkgr/*
7 | public-hoist-pattern[]=@size-limit/*
8 | public-hoist-pattern[]=@types/*
9 | public-hoist-pattern[]=cross-env
10 | public-hoist-pattern[]=core-js
11 | public-hoist-pattern[]=*eslint*
12 | public-hoist-pattern[]=lint-staged
13 | public-hoist-pattern[]=*/loader
14 | public-hoist-pattern[]=*-loader
15 | public-hoist-pattern[]=npm-run-all
16 | public-hoist-pattern[]=*prettier*
17 | public-hoist-pattern[]=simple-git-hooks
18 | public-hoist-pattern[]=*stylelint*
19 | public-hoist-pattern[]=tslib
20 | strict-peer-dependencies=false
21 |
--------------------------------------------------------------------------------
/.nvmrc:
--------------------------------------------------------------------------------
1 | lts/*
2 |
--------------------------------------------------------------------------------
/.postcssrc.cjs:
--------------------------------------------------------------------------------
1 | module.exports = require('@1stg/postcss-config')()
2 |
--------------------------------------------------------------------------------
/.prettierignore:
--------------------------------------------------------------------------------
1 | coverage
2 | dist
3 | /auto-imports.d.ts
4 | /pnpm-lock.yaml
5 |
--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | "@1stg/prettier-config"
2 |
--------------------------------------------------------------------------------
/.remarkrc:
--------------------------------------------------------------------------------
1 | {
2 | "plugins": [
3 | "@1stg/preset"
4 | ]
5 | }
6 |
--------------------------------------------------------------------------------
/.renovaterc:
--------------------------------------------------------------------------------
1 | {
2 | "extends": [
3 | "github>1stG/configs"
4 | ]
5 | }
6 |
--------------------------------------------------------------------------------
/.simple-git-hooks.cjs:
--------------------------------------------------------------------------------
1 | module.exports = require('@1stg/simple-git-hooks')
2 |
--------------------------------------------------------------------------------
/.stylelintignore:
--------------------------------------------------------------------------------
1 | coverage
2 | dist
3 | lib
4 | LICENSE
5 | *.json
6 | *.log
7 | *.patch
8 | *.ts
9 | *.tsbuildinfo
10 | *.tsx
11 | *.yaml
12 | *.yml
13 |
--------------------------------------------------------------------------------
/.stylelintrc:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "@1stg/stylelint-config"
3 | }
4 |
--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | # Change Log
2 |
3 | All notable changes to this project will be documented in this file.
4 | See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5 |
6 | - [@react-enhanced/eslint-plugin](./packages/@react-enhanced/eslint-plugin/CHANGELOG.md)
7 | - [@react-enhanced/hooks](./packages/@react-enhanced/hooks/CHANGELOG.md)
8 | - [@react-enhanced/plugins](./packages/@react-enhanced/plugins/CHANGELOG.md)
9 | - [@react-enhanced/shared](./packages/@react-enhanced/shared/CHANGELOG.md)
10 | - [@react-enhanced/translate](./packages/@react-enhanced/translate/CHANGELOG.md)
11 | - [@react-enhanced/types](./packages/@react-enhanced/types/CHANGELOG.md)
12 | - [@react-enhanced/utils](./packages/@react-enhanced/utils/CHANGELOG.md)
13 | - [react-qrcode](./packages/react-qrcode/CHANGELOG.md)
14 | - [react-qrious](./packages/react-qrious/CHANGELOG.md)
15 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2017-present JounQin
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 | [](https://github.com/rx-ts/react/actions/workflows/ci.yml)
14 | [](https://github.com/plantain-00/type-coverage)
15 | [](https://github.com/rx-ts/react/releases)
16 |
17 | [](https://conventionalcommits.org)
18 | [](https://renovatebot.com)
19 | [](https://standardjs.com)
20 | [](https://github.com/prettier/prettier)
21 | [](https://github.com/changesets/changesets)
22 |
23 | > Make [React][] greater with [RxTS][]
24 |
25 | ## TOC
26 |
27 | - [Homepage](#homepage)
28 | - [Packages](#packages)
29 | - [Install](#install)
30 | - [Sponsors](#sponsors)
31 | - [Backers](#backers)
32 | - [Changelog](#changelog)
33 | - [License](#license)
34 |
35 | ## Homepage
36 |
37 | react-rx
38 |
39 | ## Packages
40 |
41 | This repository is a monorepo managed by [changesets][] what means we actually publish several packages to npm from same codebase, including:
42 |
43 | | Package | Description | Version |
44 | | -------------------------------------------------------------------------- | ----------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
45 | | [`@react-enhanced/eslint-plugin`](/packages/@react-enhanced/eslint-plugin) | An incredible ESLint plugin for @react-enhanced Hooks | [](https://www.npmjs.com/package/@react-enhanced/eslint-plugin) [](https://changelogs.xyz/@react-enhanced/eslint-plugin) |
46 | | [`@react-enhanced/hooks`](/packages/@react-enhanced/hooks) | 🔥 Enhanced React Hooks | [](https://www.npmjs.com/package/@react-enhanced/hooks) [](https://changelogs.xyz/@react-enhanced/hooks) |
47 | | [`@react-enhanced/plugins`](/packages/@react-enhanced/plugins) | 🔥 Enhanced React Plugins | [](https://www.npmjs.com/package/@react-enhanced/plugins) [](https://changelogs.xyz/@react-enhanced/plugins) |
48 | | [`@react-enhanced/shared`](/packages/@react-enhanced/shared) | 🔥 Enhanced React Shared codes between sever and client | [](https://www.npmjs.com/package/@react-enhanced/shared) [](https://changelogs.xyz/@react-enhanced/shared) |
49 | | [`@react-enhanced/translate`](/packages/@react-enhanced/translate) | 🔥 Enhanced React Translate Plugin | [](https://www.npmjs.com/package/@react-enhanced/translate) [](https://changelogs.xyz/@react-enhanced/translate) |
50 | | [`@react-enhanced/types`](/packages/@react-enhanced/types) | 🔥 Enhanced React Types | [](https://www.npmjs.com/package/@react-enhanced/types) [](https://changelogs.xyz/@react-enhanced/types) |
51 | | [`@react-enhanced/utils`](/packages/@react-enhanced/utils) | 🔥 Enhanced React Utils | [](https://www.npmjs.com/package/@react-enhanced/utils) [](https://changelogs.xyz/@react-enhanced/utils) |
52 | | [`react-qrcode`](/packages/react-qrcode) | 🤳 A React component for QR code generation with [qrcode][] | [](https://www.npmjs.com/package/react-qrcode) [](https://changelogs.xyz/react-qrcode) |
53 | | [`react-qrious`](/packages/react-qrious) | 🤳 A React component for QR code generation with [qrious][] | [](https://www.npmjs.com/package/react-qrious) [](https://changelogs.xyz/react-qrious) |
54 |
55 | ## Install
56 |
57 | ```sh
58 | # yarn
59 | yarn add @react-enhanced/{hooks,plugins} react-{qrcode,qrious}
60 |
61 | # pnpm
62 | pnpm add @react-enhanced/{hooks,plugins} react-{qrcode,qrious}
63 |
64 | # npm
65 | npm i @react-enhanced/{hooks,plugins} react-{qrcode,qrious}
66 | ```
67 |
68 | ## Sponsors
69 |
70 | | 1stG | RxTS | UnTS |
71 | | ---------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
72 | | [](https://opencollective.com/1stG) | [](https://opencollective.com/rxts) | [](https://opencollective.com/unts) |
73 |
74 | ## Backers
75 |
76 | | 1stG | RxTS | UnTS |
77 | | -------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- |
78 | | [](https://opencollective.com/1stG) | [](https://opencollective.com/rxts) | [](https://opencollective.com/unts) |
79 |
80 | ## Changelog
81 |
82 | Detailed changes for each release are documented in [CHANGELOG.md](./CHANGELOG.md).
83 |
84 | ## License
85 |
86 | [MIT][] © [JounQin][]@[1stG.me][]
87 |
88 | [1stg.me]: https://www.1stg.me
89 | [changesets]: https://github.com/changesets/changesets
90 | [jounqin]: https://GitHub.com/JounQin
91 | [mit]: http://opensource.org/licenses/MIT
92 | [qrcode]: https://github.com/soldair/node-qrcode
93 | [qrious]: https://github.com/neocotic/qrious
94 | [react]: https://reactjs.org
95 | [rxts]: https://rxjs.dev
96 |
--------------------------------------------------------------------------------
/auto-imports.d.ts:
--------------------------------------------------------------------------------
1 | /* eslint-disable */
2 | /* prettier-ignore */
3 | // @ts-nocheck
4 | // Generated by unplugin-auto-import
5 | export {}
6 | declare global {
7 | const afterAll: typeof import('vitest')['afterAll']
8 | const afterEach: typeof import('vitest')['afterEach']
9 | const assert: typeof import('vitest')['assert']
10 | const beforeAll: typeof import('vitest')['beforeAll']
11 | const beforeEach: typeof import('vitest')['beforeEach']
12 | const chai: typeof import('vitest')['chai']
13 | const describe: typeof import('vitest')['describe']
14 | const expect: typeof import('vitest')['expect']
15 | const it: typeof import('vitest')['it']
16 | const suite: typeof import('vitest')['suite']
17 | const test: typeof import('vitest')['test']
18 | const vi: typeof import('vitest')['vi']
19 | const vitest: typeof import('vitest')['vitest']
20 | }
21 |
--------------------------------------------------------------------------------
/docs/App.tsx:
--------------------------------------------------------------------------------
1 | import { lazy, Suspense } from 'react'
2 | import {
3 | BrowserRouter as Router,
4 | Navigate,
5 | Route,
6 | Routes,
7 | useParams,
8 | } from 'react-router-dom'
9 |
10 | import 'github-markdown-css'
11 | import './global.scss'
12 |
13 | import { ReactRxDemo } from './components'
14 |
15 | const Readme = () => {
16 | const { pkgName, name } = useParams<'name' | 'pkgName'>()
17 | const Readme = lazy(() =>
18 | // eslint-disable-next-line @typescript-eslint/no-unsafe-return
19 | pkgName
20 | ? import(`../packages/@react-enhanced/${pkgName}/README.md`)
21 | : name
22 | ? import(`../packages/${name}/README.md`)
23 | : import('../README.md'),
24 | )
25 | return (
26 |
27 |
28 |
29 | )
30 | }
31 |
32 | const Changelog = () => {
33 | const { pkgName, name } = useParams<'name' | 'pkgName'>()
34 | const Changelog = lazy(() =>
35 | // eslint-disable-next-line @typescript-eslint/no-unsafe-return
36 | pkgName
37 | ? import(`../packages/@react-enhanced/${pkgName}/CHANGELOG.md`)
38 | : name
39 | ? import(`../packages/${name}/CHANGELOG.md`)
40 | : import('../CHANGELOG.md'),
41 | )
42 | return (
43 |
44 |
45 |
46 | )
47 | }
48 |
49 | export const App = () => (
50 |
51 |
52 | }
55 | >
56 | }
59 | />
60 | }
63 | />
64 | }
67 | />
68 | }
71 | />
72 | }
75 | />
76 | }
79 | />
80 | }
83 | >
84 |
85 |
86 | )
87 |
--------------------------------------------------------------------------------
/docs/components/ReactQrcodeDemo.tsx:
--------------------------------------------------------------------------------
1 | import { get, merge, set } from 'lodash'
2 | import { FC, useState } from 'react'
3 |
4 | import { ChangeEvent } from '../types'
5 |
6 | import {
7 | LEVELS,
8 | MASK_PATTERNS,
9 | MODES,
10 | MaskPattern,
11 | QRCode,
12 | QRCodeProps,
13 | QRCodeSegment,
14 | TYPES,
15 | } from 'react-qrcode'
16 |
17 | const DEFAULT_TEXT = 'https://www.1stg.me'
18 |
19 | export type FormModel = Omit<
20 | QRCodeProps,
21 | 'maskPattern' | 'version' | 'width'
22 | > & {
23 | manualMode?: boolean
24 | maskPattern?: MaskPattern | ''
25 | width?: number | ''
26 | version?: number | ''
27 | }
28 |
29 | export const ReactQrcodeDemo: FC = () => {
30 | const [{ manualMode, ...options }, setState] = useState({
31 | version: '',
32 | errorCorrectionLevel: 'M',
33 | maskPattern: '',
34 | margin: 4,
35 | scale: 4,
36 | color: {
37 | dark: '#000000',
38 | light: '#ffffff',
39 | },
40 | type: 'image/png',
41 | quality: 0.92,
42 | width: '',
43 | value: DEFAULT_TEXT,
44 | })
45 |
46 | const setOptions = (newOptions: Partial) =>
47 | setState(oldOptions => merge({}, oldOptions, newOptions))
48 |
49 | const fieldProps = (name: string, onChange?: (value: unknown) => void) => {
50 | const defaultOnChange = (e: ChangeEvent) => {
51 | const { type, value } = e.currentTarget
52 | setOptions(
53 | set(
54 | {},
55 | name,
56 | type === 'number'
57 | ? value.trim() === ''
58 | ? ''
59 | : Number.parseFloat(value)
60 | : value,
61 | ),
62 | )
63 | }
64 | return {
65 | onChange(e: ChangeEvent) {
66 | if (onChange) {
67 | onChange(e.currentTarget.value)
68 | } else {
69 | defaultOnChange(e)
70 | }
71 | },
72 | value: get(options, name) as number | string,
73 | }
74 | }
75 |
76 | return (
77 |
78 |
79 | -
80 |
81 |
91 |
92 | -
93 |
94 |
99 |
100 | -
101 |
102 |
107 |
108 | -
109 |
110 |
114 |
115 |
116 | -
117 |
118 |
122 |
123 | -
124 |
125 |
129 |
130 | -
131 |
132 |
136 |
137 | -
138 |
139 |
143 |
144 | -
145 |
146 |
151 |
152 | -
153 |
154 |
159 |
160 | -
161 |
180 |
181 | -
182 |
202 | {manualMode ? (
203 |
236 | ) : (
237 |
242 | )}
243 |
244 |
245 |
246 |
247 | )
248 | }
249 |
--------------------------------------------------------------------------------
/docs/components/ReactQriousDemo.tsx:
--------------------------------------------------------------------------------
1 | import { get, merge, set } from 'lodash'
2 | import { FC, useState } from 'react'
3 |
4 | import { ChangeEvent } from '../types'
5 |
6 | import { QRious, QriousProps } from 'react-qrious'
7 |
8 | export const LEVELS = Object.freeze(['L', 'M', 'Q', 'H'] as const)
9 |
10 | export const ReactQriousDemo: FC = () => {
11 | const [props, setState] = useState({
12 | background: '#fff',
13 | backgroundAlpha: 1,
14 | foreground: '#000000',
15 | foregroundAlpha: 1,
16 | level: 'L',
17 | mime: 'image/png',
18 | padding: 0,
19 | size: 100,
20 | value: 'http://www.1stg.me',
21 | })
22 |
23 | const setProps = (newProps: Partial) =>
24 | setState((oldProps: QriousProps) => merge({}, oldProps, newProps))
25 |
26 | const fieldProps = (name: string, onChange?: (value: unknown) => void) => {
27 | const defaultOnChange = (e: ChangeEvent) => {
28 | const { type, value } = e.currentTarget
29 | setProps(
30 | set(
31 | {},
32 | name,
33 | type === 'number'
34 | ? value.trim() === ''
35 | ? ''
36 | : Number.parseFloat(value)
37 | : value,
38 | ),
39 | )
40 | }
41 | return {
42 | onChange(e: ChangeEvent) {
43 | if (onChange) {
44 | onChange(e.currentTarget.value)
45 | } else {
46 | defaultOnChange(e)
47 | }
48 | },
49 | // type-coverage:ignore-next-line
50 | value: get(props, name) as number | string,
51 | }
52 | }
53 | return (
54 |
124 | )
125 | }
126 |
--------------------------------------------------------------------------------
/docs/components/code.tsx:
--------------------------------------------------------------------------------
1 | import Highlight, { Language, defaultProps } from 'prism-react-renderer'
2 | import { FC } from 'react'
3 |
4 | // eslint-disable-next-line regexp/optimal-lookaround-quantifier
5 | const LANGUAGE_REGEXP = /language-(?=[a-z]+)/
6 |
7 | export const pre = (props: object) =>
8 |
9 | export const code: FC<{
10 | children: string
11 | className?: string
12 | }> = ({ children, className }) => (
13 |
18 | {({ className, style, tokens, getLineProps, getTokenProps }) => (
19 |
23 | {tokens.map((line, i) => (
24 |
28 | {line.map((token, key) => (
29 |
33 | ))}
34 |
35 | ))}
36 |
37 | )}
38 |
39 | )
40 |
--------------------------------------------------------------------------------
/docs/components/index.ts:
--------------------------------------------------------------------------------
1 | export { code } from './code'
2 | export { ReactRxDemo } from './react-rx'
3 | export { ReactQrcodeDemo } from './ReactQrcodeDemo'
4 | export { ReactQriousDemo } from './ReactQriousDemo'
5 |
--------------------------------------------------------------------------------
/docs/components/react-rx/index.tsx:
--------------------------------------------------------------------------------
1 | import cn from 'classnames'
2 | import React, {
3 | ChangeEventHandler,
4 | KeyboardEventHandler,
5 | MouseEventHandler,
6 | PureComponent,
7 | } from 'react'
8 | import { BehaviorSubject, combineLatest, map } from 'rxjs'
9 |
10 | import {
11 | TODO_FILTERS,
12 | TodoFilter,
13 | addTodo,
14 | changeTodoFilter,
15 | changeTodoTitle,
16 | clearComputedTodos,
17 | deleteTodo,
18 | setAllTodosStatus,
19 | todoFilter$,
20 | todos$$,
21 | toggleTodoStatus,
22 | } from './store'
23 |
24 | import { Subscribe } from '@react-enhanced/hooks'
25 |
26 | export interface AppState {
27 | newTodoValue: string
28 | }
29 |
30 | export class ReactRxDemo extends PureComponent