Merge pull request #287 from Enterwell/stage

Stage
Enterwell · Jan 8, 2024 · 19d0884 · 19d0884
2 parents 0da5cc4 + 3c28429
commit 19d0884
Show file tree

Hide file tree

Showing 30 changed files with 477 additions and 286 deletions.
diff --git a/apps/docs/components/ExampleUseControllableState.tsx b/apps/docs/components/ExampleUseControllableState.tsx
@@ -0,0 +1,26 @@
+import { useControllableState } from "@enterwell/react-hooks";
+import { useState } from "react";
+
+export function ExampleUseControllableState() {
+    const [outsideState, setOutsideState] = useState<string | undefined>(undefined);
+
+    // @highlight-start
+    const [value, setValue] = useControllableState(outsideState, 'default');
+    // @highlight-end
+
+    return (
+        <div className="flex flex-col gap-6">
+            <div className="flex flex-col gap-2">
+                <span>{outsideState}</span>
+                <input type="text" value={outsideState || ''} onChange={e => setOutsideState(e.target.value)} />
+                <button onClick={() => setOutsideState(undefined)}>Reset outside state</button>
+            </div>
+
+            <div className="p-2 border rounded-md flex flex-col items-center space-y-4">
+                <span>{value}</span>
+                <input type="text" value={value} onChange={e => setValue(e.target.value)} />
+                <button onClick={() => setValue('default')}>Set default</button>
+            </div>
+        </div>
+    );
+}
diff --git a/apps/docs/components/ExampleUsePromiseWithPromiseObject.tsx b/apps/docs/components/ExampleUsePromiseWithPromiseObject.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useMemo } from 'react';
 import { usePromise } from '@enterwell/react-hooks';
 
 function getItems() {
@@ -11,7 +11,8 @@ function getItems() {
 
 export function ExampleUsePromiseWithPromiseObject() {
     // @highlight-start
-    const { item, isLoading, error } = usePromise(getItems);
+    const getItemsMemo = useMemo(() => getItems(), []);
+    const { item, isLoading, error } = usePromise(getItemsMemo);
     // @highlight-end
 
     return (

diff --git a/apps/docs/components/docs/NpmPackageCard.tsx b/apps/docs/components/docs/NpmPackageCard.tsx
@@ -1,5 +1,5 @@
 import { Card, CardActionArea } from "@mui/material";
-import Image from "next/image";
+import { NpmIcon } from "../internal/icons/NpmIcon";
 
 type NpmPackageCardProps = {
     name: string;
@@ -12,7 +12,7 @@ export function NpmPackageCard({ name, version }: NpmPackageCardProps) {
             <CardActionArea href={`https://www.npmjs.com/package/${name}`}>
                 <div className="px-4 py-2 flex items-center justify-between gap-4 w-full">
                     <span className="flex items-center gap-2">
-                        <Image width={32} height={32} src="/ui/assets/npm.svg" alt="NPM" />
+                        <NpmIcon width={32} height={32} />
                         <span>{name}</span>
                     </span>
                     <span>v{version}</span>

diff --git a/apps/docs/components/internal/PackagesList.tsx b/apps/docs/components/internal/PackagesList.tsx
@@ -1,5 +1,6 @@
 import { Card, CardActionArea, CardContent } from "@mui/material";
-import Image from "next/image";
+import { ReactIcon } from "./icons/ReactIcon";
+import { MuiIcon } from "./icons/MuiIcon";
 
 const availablePackages = [
     { name: "UI", description: "Component library.", href: '/ui/react-ui/about', libraries: ['react', 'mui'] },
@@ -20,8 +21,8 @@ export function PackagesList() {
                                     <div className="text-muted-foreground text-center">{pkg.description}</div>
                                 </div>
                                 <div className="absolute right-3 bottom-3 opacity-20 flex flex-row items-center gap-2">
-                                    {pkg.libraries.includes('react') && <Image alt="React" width={32} height={32} src="/ui/assets/react.svg" />}
-                                    {pkg.libraries.includes('mui') && <Image alt="MUI" width={32} height={32} src="/ui/assets/mui.svg" />}
+                                    {pkg.libraries.includes('react') && <ReactIcon width={32} height={32} />}
+                                    {pkg.libraries.includes('mui') && <MuiIcon width={32} height={32} />}
                                 </div>
                             </CardContent>
                         </CardActionArea>

diff --git a/apps/docs/components/internal/ThemeWrapper.tsx b/apps/docs/components/internal/ThemeWrapper.tsx
@@ -0,0 +1,27 @@
+import { useMutationObserver } from "@enterwell/react-hooks";
+import { ThemeProvider } from "@mui/material";
+import { PropsWithChildren, useState } from "react";
+import { theme } from "../theme";
+
+export function ThemeWrapper({ children }: PropsWithChildren) {
+    const [resolvedTheme, setResolvedTheme] = useState(
+        typeof document !== 'undefined' ? (document.querySelector('html')?.style.colorScheme === 'dark' ? 'dark' : 'light') : 'light'
+    );
+
+    if (typeof document !== 'undefined') {
+        useMutationObserver(
+            document.querySelector('html'),
+            () => {
+                document.querySelector('html')?.style.colorScheme === 'dark' ? setResolvedTheme('dark') : setResolvedTheme('light');
+            }, {
+            attributes: true,
+            subtree: true
+        });
+    }
+
+    return (
+        <ThemeProvider theme={theme(resolvedTheme)}>
+            {children}
+        </ThemeProvider>
+    );
+};
diff --git a/apps/docs/components/internal/icons/MuiIcon.tsx b/apps/docs/components/internal/icons/MuiIcon.tsx
@@ -0,0 +1,19 @@
+import { SVGProps } from "react"
+
+export const MuiIcon = (props: SVGProps<SVGSVGElement>) => (
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={30}
+        height={32}
+        fill="none"
+        viewBox="0 0 36 32"
+        {...props}
+    >
+        <path
+            fill="currentColor"
+            fillRule="evenodd"
+            d="M30.343 21.976a1 1 0 0 0 .502-.864l.018-5.787a1 1 0 0 1 .502-.864l3.137-1.802a1 1 0 0 1 1.498.867v10.521a1 1 0 0 1-.502.867l-11.839 6.8a1 1 0 0 1-.994.001l-9.291-5.314a1 1 0 0 1-.504-.868v-5.305c0-.006.007-.01.013-.007.005.003.012 0 .012-.007v-.006c0-.004.002-.008.006-.01l7.652-4.396c.007-.004.004-.015-.004-.015a.008.008 0 0 1-.008-.008l.015-5.201a1 1 0 0 0-1.5-.87l-5.687 3.277a1 1 0 0 1-.998 0L6.666 9.7a1 1 0 0 0-1.499.866v9.4a1 1 0 0 1-1.496.869l-3.166-1.81a1 1 0 0 1-.504-.87l.028-16.43A1 1 0 0 1 1.527.86l10.845 6.229a1 1 0 0 0 .996 0L24.21.86a1 1 0 0 1 1.498.868v16.434a1 1 0 0 1-.501.867l-5.678 3.27a1 1 0 0 0 .004 1.735l3.132 1.783a1 1 0 0 0 .993-.002l6.685-3.839zM31 7.234a1 1 0 0 0 1.514.857l3-1.8A1 1 0 0 0 36 5.434V1.766A1 1 0 0 0 34.486.91l-3 1.8a1 1 0 0 0-.486.857v3.668z"
+            clipRule="evenodd"
+        />
+    </svg>
+)
diff --git a/apps/docs/components/internal/icons/NpmIcon.tsx b/apps/docs/components/internal/icons/NpmIcon.tsx
@@ -0,0 +1,14 @@
+import { SVGProps } from "react"
+
+export const NpmIcon = (props: SVGProps<SVGSVGElement>) => (
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={512}
+        height={512}
+        fill="currentColor"
+        viewBox="0 0 512 512"
+        {...props}
+    >
+        <path d="M0 327.304h142.624v28.734h113.89v-28.734H512V155.962H.016L0 327.304zm142.608-28.734h-28.734v-85.156H86.169v85.156h-58.48V184.68h114.919v113.89zm142.118.053h-55.917v28.68h-58.48V184.68h114.919l-.522 113.943zm199.552 0h-28.733v-85.21H426.81v85.21h-28.734v-85.21h-27.705v85.21H312.92V184.68h171.341l.016 113.943zM228.81 269.836h26.677v-56.439h-26.677v56.44z" />
+    </svg>
+)
diff --git a/apps/docs/components/internal/icons/ReactIcon.tsx b/apps/docs/components/internal/icons/ReactIcon.tsx
@@ -0,0 +1,15 @@
+import { SVGProps } from "react"
+
+export const ReactIcon = (props: SVGProps<SVGSVGElement>) => (
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={800}
+        height={800}
+        fill="currentColor"
+        viewBox="0 0 512 512"
+        {...props}
+    >
+        <path d="M410.66 180.72q-7.67-2.62-15.45-4.88 1.29-5.25 2.38-10.56c11.7-56.9 4.05-102.74-22.06-117.83-25-14.48-66 .61-107.36 36.69q-6.1 5.34-11.95 11-3.9-3.76-8-7.36c-43.35-38.58-86.8-54.83-112.88-39.69-25 14.51-32.43 57.6-21.9 111.53q1.58 8 3.55 15.93a320.85 320.85 0 0 0-17.77 5.6C48.46 198.9 16 226.73 16 255.59c0 29.82 34.84 59.72 87.77 77.85q6.44 2.19 13 4.07-2.13 8.49-3.77 17.17c-10 53-2.2 95.07 22.75 109.49 25.77 14.89 69-.41 111.14-37.31q5-4.38 10-9.25 6.32 6.11 13 11.86c40.8 35.18 81.09 49.39 106 34.93 25.75-14.94 34.12-60.14 23.25-115.13q-1.25-6.3-2.88-12.86 4.56-1.35 8.93-2.79c55-18.27 90.83-47.81 90.83-78-.02-29-33.52-57.01-85.36-74.9Zm-129-81.08c35.43-30.91 68.55-43.11 83.65-34.39 16.07 9.29 22.32 46.75 12.22 95.88q-1 4.8-2.16 9.57a487.83 487.83 0 0 0-64.18-10.16 481.27 481.27 0 0 0-40.57-50.75q5.38-5.22 11.02-10.15ZM157.73 280.25q6.51 12.6 13.61 24.89 7.23 12.54 15.07 24.71a435.28 435.28 0 0 1-44.24-7.13c4.24-13.72 9.46-27.97 15.56-42.47Zm0-48.33c-6-14.19-11.08-28.15-15.25-41.63 13.7-3.07 28.3-5.58 43.52-7.48q-7.65 11.94-14.72 24.23t-13.58 24.88Zm10.9 24.17q9.48-19.77 20.42-38.78 10.93-19 23.27-37.13c14.28-1.08 28.92-1.65 43.71-1.65s29.52.57 43.79 1.66q12.21 18.09 23.13 37t20.69 38.6Q334 275.63 323 294.73q-10.91 19-23 37.24c-14.25 1-29 1.55-44 1.55s-29.47-.47-43.46-1.38q-12.43-18.19-23.46-37.29t-20.48-38.76ZM340.75 305q7.25-12.58 13.92-25.49a440.41 440.41 0 0 1 16.12 42.32 434.44 434.44 0 0 1-44.79 7.65q7.62-12.09 14.75-24.48Zm13.72-73.07q-6.64-12.65-13.81-25-7-12.18-14.59-24.06c15.31 1.94 30 4.52 43.77 7.67a439.89 439.89 0 0 1-15.37 41.39Zm-98.24-107.45a439.75 439.75 0 0 1 28.25 34.18q-28.35-1.35-56.74 0c9.33-12.34 18.88-23.79 28.49-34.18ZM145.66 65.86c16.06-9.32 51.57 4 89 37.27 2.39 2.13 4.8 4.36 7.2 6.67A491.37 491.37 0 0 0 201 160.51a499.12 499.12 0 0 0-64.06 10q-1.83-7.36-3.3-14.82c-9.05-46.23-3.06-81.08 12.02-89.83Zm-23.41 251.85q-6-1.71-11.85-3.71c-23.4-8-42.73-18.44-56-29.81-11.88-10.19-17.9-20.36-17.9-28.6 0-17.51 26.06-39.85 69.52-55q8.19-2.85 16.52-5.21a493.54 493.54 0 0 0 23.4 60.75 502.46 502.46 0 0 0-23.69 61.58Zm111.13 93.67c-18.63 16.32-37.29 27.89-53.74 33.72-14.78 5.23-26.55 5.38-33.66 1.27-15.14-8.75-21.44-42.54-12.85-87.86q1.53-8 3.5-16a480.85 480.85 0 0 0 64.69 9.39 501.2 501.2 0 0 0 41.2 51c-2.98 2.93-6.03 5.75-9.14 8.48Zm23.42-23.22c-9.72-10.51-19.42-22.14-28.88-34.64q13.79.54 28.08.54c9.78 0 19.46-.21 29-.64a439.33 439.33 0 0 1-28.2 34.74Zm124.52 28.59c-2.86 15.44-8.61 25.74-15.72 29.86-15.13 8.78-47.48-2.63-82.36-32.72-4-3.44-8-7.13-12.07-11a484.54 484.54 0 0 0 40.23-51.2 477.84 477.84 0 0 0 65-10.05q1.47 5.94 2.6 11.64c4.81 24.3 5.5 46.28 2.32 63.47Zm17.4-102.64c-2.62.87-5.32 1.71-8.06 2.53a483.26 483.26 0 0 0-24.31-60.94 481.52 481.52 0 0 0 23.36-60.06c4.91 1.43 9.68 2.93 14.27 4.52 44.42 15.32 71.52 38 71.52 55.43 0 18.6-29.27 42.74-76.78 58.52Z" />
+        <path d="M256 298.55a43 43 0 1 0-42.86-43 42.91 42.91 0 0 0 42.86 43Z" />
+    </svg>
+)
diff --git a/apps/docs/components/internal/icons/SlackIcon.tsx b/apps/docs/components/internal/icons/SlackIcon.tsx
@@ -0,0 +1,14 @@
+import { SVGProps } from "react"
+
+export const SlackIcon = (props: SVGProps<SVGSVGElement>) => (
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={512}
+        height={512}
+        fill="currentColor"
+        viewBox="0 0 512 512"
+        {...props}
+    >
+        <path d="M126.12 315.1A47.06 47.06 0 1 1 79.06 268h47.06ZM149.84 315.1a47.06 47.06 0 0 1 94.12 0v117.84a47.06 47.06 0 1 1-94.12 0ZM196.9 126.12A47.06 47.06 0 1 1 244 79.06v47.06ZM196.9 149.84a47.06 47.06 0 0 1 0 94.12H79.06a47.06 47.06 0 0 1 0-94.12ZM385.88 196.9a47.06 47.06 0 1 1 47.06 47.1h-47.06ZM362.16 196.9a47.06 47.06 0 0 1-94.12 0V79.06a47.06 47.06 0 1 1 94.12 0ZM315.1 385.88a47.06 47.06 0 1 1-47.1 47.06v-47.06ZM315.1 362.16a47.06 47.06 0 0 1 0-94.12h117.84a47.06 47.06 0 1 1 0 94.12Z" />
+    </svg>
+)
diff --git a/apps/docs/package.json b/apps/docs/package.json
@@ -30,7 +30,7 @@
     "@mui/lab": "5.0.0-alpha.159",
     "@mui/material": "5.15.3",
     "@mui/system": "5.15.3",
-    "@mui/x-data-grid-pro": "6.18.6",
+    "@mui/x-data-grid-pro": "6.18.7",
     "@mui/x-date-pickers": "5.0.20",
     "@mui/x-date-pickers-pro": "5.0.20",
     "classix": "2.1.35",
@@ -43,12 +43,12 @@
     "tailwindcss-animate": "1.0.7"
   },
   "devDependencies": {
-    "@types/node": "18.19.4",
-    "@types/react": "18.2.46",
+    "@types/node": "18.19.5",
+    "@types/react": "18.2.47",
     "@types/react-dom": "18.2.18",
     "autoprefixer": "10.4.16",
-    "postcss": "8.4.32",
-    "tailwindcss": "3.4.0",
+    "postcss": "8.4.33",
+    "tailwindcss": "3.4.1",
     "typescript": "5.3.3",
     "unist-builder": "4.0.0",
     "unist-util-visit": "5.0.0"

diff --git a/apps/docs/pages/_app.tsx b/apps/docs/pages/_app.tsx
@@ -1,31 +1,16 @@
-import { theme } from '../components/theme';
-import { ThemeProvider } from '@mui/material';
+import dynamic from 'next/dynamic';
 import { inter } from '../src/fonts';
 import '../styles/global.css';
 import { AppProps } from 'next/app';
-import { useMutationObserver } from '@enterwell/react-hooks';
-import { useState } from 'react';
 
-export default function App({ Component, pageProps }: AppProps) {
-  const [resolvedTheme, setResolvedTheme] = useState(
-    typeof window !== 'undefined' ? document.querySelector('html')?.style.colorScheme === 'dark' ? 'dark' : 'light' : 'light'
-  );
-
-  if (typeof window !== 'undefined') {
-    useMutationObserver(
-      document.querySelector('html'),
-      () => {
-        document.querySelector('html')?.style.colorScheme === 'dark' ? setResolvedTheme('dark') : setResolvedTheme('light');
-      }, {
-      attributes: true
-    });
-  }
+const ThemeWrapper = dynamic(() => import('../components/internal/ThemeWrapper').then((mod) => mod.ThemeWrapper), { ssr: false });
 
+export default function App({ Component, pageProps }: AppProps) {
   return (
     <main className={`${inter.variable} font-sans`}>
-      <ThemeProvider theme={theme(resolvedTheme)}>
+      <ThemeWrapper>
         <Component {...pageProps}></Component>
-      </ThemeProvider>
+      </ThemeWrapper>
     </main>
   );
 }
diff --git a/apps/docs/pages/react-hooks/hooks/use-controllable-state.mdx b/apps/docs/pages/react-hooks/hooks/use-controllable-state.mdx
@@ -0,0 +1,33 @@
+---
+title: useControllableState
+---
+
+import { useControllableState } from '@enterwell/react-hooks';
+import { ComponentWithSource } from '../../../components/docs/ComponentWithSource.tsx';
+import { ComponentDescription, ComponentParameters, ComponentSource } from '../../../components/docs/ComponentDocs';
+import { ExampleUseControllableState } from '../../../components/ExampleUseControllableState.tsx';
+
+# useControllableState
+
+## Description
+
+<ComponentDescription name="useControllableState" />
+
+### Parameters
+
+<ComponentParameters name="useControllableState" />
+
+## Example
+
+<ComponentWithSource component={ ExampleUseControllableState } centered />
+
+## Inspect
+
+<details>
+    <summary>Source code</summary>
+    <ComponentSource 
+        package="@enterwell/react-hooks" 
+        directory="hooks" 
+        name="useControllableState"
+    />
+</details>
diff --git a/apps/docs/public/assets/mui.svg b/apps/docs/public/assets/mui.svg
diff --git a/apps/docs/public/assets/npm.svg b/apps/docs/public/assets/npm.svg
diff --git a/apps/docs/public/assets/react.svg b/apps/docs/public/assets/react.svg
diff --git a/apps/docs/public/assets/slack.svg b/apps/docs/public/assets/slack.svg
diff --git a/apps/docs/styles/global.css b/apps/docs/styles/global.css
@@ -34,6 +34,9 @@
     --ring: 215 20.2% 65.1%;
 
     --radius: 0.5rem;
+
+    --light-display: visible;
+    --dark-display: none;
   }
 
   .dark {
@@ -67,6 +70,9 @@
     --ring: 216 34% 17%;
 
     --radius: 0.5rem;
+
+    --light-display: none;
+    --dark-display: visible;
   }
 }
 
@@ -78,4 +84,12 @@
     @apply bg-background text-foreground;
     font-feature-settings: "rlig" 1, "calt" 1;
   }
+}
+
+.image--light {
+  display: var(--light-display);
+}
+
+.image--dark {
+  display: var(--dark-display);
 }