fix: general updates

- doc site performance
- bump deps
- migrate to clsx
- add redux docs

.eslintrc.js

@@ -9,6 +9,7 @@ module.exports = {
         '@djthoms/eslint-config',
         '@djthoms/eslint-config/jest',
         '@djthoms/eslint-config/react',
+        '@djthoms/eslint-config/react-typescript',
         '@djthoms/eslint-config/typescript',
     ],
 };

docs/docs/usage/redux.md

@@ -0,0 +1,35 @@
+---
+id: redux
+title: Redux
+---
+
+In lieu of using custom hooks, you should control state yourself when integrating with external
+state systems like redux, flux, etc.
+
+<!-- prettier-ignore -->
+:::caution
+Rarely is there a benefit to using local component state with redux.
+Generally speaking we should avoid this as much as possible and control
+PCR components using state providers rather than `useCheckboxState` and friends.
+:::
+
+Here's a quick example of using redux with PCR:
+
+```tsx
+import { useSelector, useDispatch } from 'react-redux';
+
+function App() {
+    const accepted = useSelector(state => state.accepted);
+    const dispatch = useDispatch();
+
+    const onChange = React.useCallback(e => {
+        dispatch({ type: 'tac', actions: { accepted: e.currentTarget.checked } });
+    }, []);
+
+    return (
+        <Checkbox onChange={onChange} checked={accepted}>
+            Accept terms and conditions?
+        </Checkbox>
+    );
+}
+```

docs/docusaurus.config.js

@@ -27,18 +27,13 @@ const plugins = [
             ],
         },
     ],
-    [
-        '@djthoms/docusaurus-plugin-sass',
-        {
-            implementation: require('sass'),
-        },
-    ],
+    'docusaurus-plugin-sass',
     '@docusaurus/plugin-ideal-image',
     [
         'docusaurus-plugin-react-docgen-typescript',
         {
             src: ['../src/**/*.{ts,tsx}', '!../src/**/*.test.*'],
-            global: true,
+            global: false,
             parserOptions: {
                 shouldExtractLiteralValuesFromEnum: true,
                 shouldRemoveUndefinedFromOptional: true,
@@ -71,8 +66,10 @@ if (process.env.NODE_ENV !== 'production') {
 module.exports = {
     title: 'Pretty Checkbox React',
     tagline: 'A small, super awesome React wrapper around pretty-checkbox 💅',
-    url: 'https://your-docusaurus-test-site.com',
+    url: 'https://pretty-checkbox-react.netlify.app/',
     baseUrl: '/',
+    onBrokenLinks: 'throw',
+    onBrokenMarkdownLinks: 'throw',
     favicon: 'img/favicon.ico',
     organizationName: 'atomicpages', // Usually your GitHub org/user name.
     projectName: 'pretty-checkbox-react', // Usually your repo name.

docs/package.json

@@ -11,18 +11,18 @@
     },
     "dependencies": {
         "@djthoms/pretty-checkbox": "^3.0.3",
-        "@docusaurus/core": "^2.0.0-alpha.64",
-        "@docusaurus/plugin-ideal-image": "^2.0.0-alpha.64",
-        "@docusaurus/plugin-pwa": "^2.0.0-alpha.64",
-        "@docusaurus/preset-classic": "^2.0.0-alpha.64",
-        "@docusaurus/theme-live-codeblock": "^2.0.0-alpha.64",
-        "@docusaurus/theme-search-algolia": "^2.0.0-alpha.64",
+        "@docusaurus/core": "^2.0.0-beta.1",
+        "@docusaurus/plugin-ideal-image": "^2.0.0-beta.1",
+        "@docusaurus/plugin-pwa": "^2.0.0-beta.1",
+        "@docusaurus/preset-classic": "^2.0.0-beta.1",
+        "@docusaurus/theme-live-codeblock": "^2.0.0-beta.1",
+        "@docusaurus/theme-search-algolia": "^2.0.0-beta.1",
         "@mdi/js": "^5.5.55",
         "clsx": "^1.1.1",
         "pretty-checkbox-react": "^3.0.0",
-        "react": "^16.13.1",
-        "react-dom": "^16.13.1",
-        "react-markdown": "^5.0.0"
+        "react": "^17.0.0",
+        "react-dom": "^17.0.0",
+        "react-markdown": "^6.0.0"
     },
     "browserslist": {
         "production": [
@@ -37,12 +37,12 @@
         ]
     },
     "devDependencies": {
-        "@djthoms/docusaurus-plugin-sass": "^0.2.0",
-        "@docusaurus/module-type-aliases": "^2.0.0-alpha.68",
+        "docusaurus-plugin-sass": "^0.2.1",
+        "@docusaurus/module-type-aliases": "^2.0.0-beta.1",
         "docusaurus-plugin-module-alias": "^0.0.2",
-        "docusaurus-plugin-react-docgen-typescript": "^0.0.1",
-        "react-docgen-typescript": "^1.20.4",
-        "sass": "^1.26.10",
+        "docusaurus-plugin-react-docgen-typescript": "^0.1.0",
+        "react-docgen-typescript": "^2.0.0",
+        "sass": "^1.35.1",
         "typescript": "^4.0.2"
     }
 }

docs/sidebars.js

@@ -30,7 +30,7 @@ module.exports = {
             'Migration Guide': ['migration/migrating-2.x', 'migration/migrating-1.x'],
         },
         {
-            'Other Technologies': ['usage/preact'],
+            'Other Technologies': ['usage/preact', 'usage/redux'],
         },
     ],
 };

docs/src/components/PropsTable.tsx

@@ -1,26 +1,15 @@
 import * as React from 'react';
-import { usePluginData } from '@docusaurus/useGlobalData';
+import { useDynamicImport } from 'docusaurus-plugin-react-docgen-typescript/pkg/dist-src/hooks/useDynamicImport';
 
 import Markdown from 'react-markdown';
 
 type PropsTableProps = {
     displayName: string;
 };
 
-const PropsTable = ({ displayName }: PropsTableProps) => {
+const PropsTable: React.FC<PropsTableProps> = ({ displayName }) => {
     const [dir, setDir] = React.useState('desc');
-    const data = usePluginData('docusaurus-plugin-react-docgen-typescript');
-    let props = {};
-
-    if (data) {
-        const comp = data.find(item => {
-            return item.displayName === displayName;
-        });
-
-        if (comp) {
-            props = comp.props;
-        }
-    }
+    const props: any = useDynamicImport(displayName);
 
     return (
         <table className="table">
@@ -40,7 +29,7 @@ const PropsTable = ({ displayName }: PropsTableProps) => {
                 </tr>
             </thead>
             <tbody>
-                {Object.keys(props)
+                {Object.keys(props || {})
                     .sort((a, b) => {
                         const desc = dir === 'desc';
 
@@ -72,7 +61,8 @@ const PropsTable = ({ displayName }: PropsTableProps) => {
                                 </td>
                                 <td>{props[key].defaultValue?.value}</td>
                                 <td>
-                                    <Markdown source={props[key].description} />
+                                    {/* <Markdown source={props[key].description} /> */}
+                                    {props[key].description}
                                 </td>
                             </tr>
                         );