feat: Improve example w dark mode, update dependencies (#19)

* feat: Improve example * chore: Dependencies updates & fix type warning
vincecao · Aug 26, 2022 · 079532a · 079532a
1 parent 215589e
commit 079532a
Show file tree

Hide file tree

Showing 21 changed files with 2,182 additions and 1,645 deletions.
diff --git a/example/index.html b/example/index.html
@@ -4,11 +4,11 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
-    <script src="https://cdn.tailwindcss.com"></script>
+    <link href="/dist/output.css" rel="stylesheet">
     <title>Use Tools Playground</title>
   </head>
 
-  <body>
+  <body class="dark:bg-stone-800">
     <div id="root"></div>
     <script src="./index.tsx"></script>
   </body>

diff --git a/example/index.tsx b/example/index.tsx
@@ -3,64 +3,10 @@ import 'react-app-polyfill/ie11';
 import * as React from 'react';
 import { createRoot } from 'react-dom/client';
 
-import Anchor from './src/components/Anchor';
-import CodeBlock from './src/components/CodeBlock';
-import Footer from './src/components/Footer';
-import Header from './src/components/Header';
-import HookSection from './src/components/HookSection';
-import DemoUsePromiseState from './src/DemoUsePromiseState';
-import DemoUseShuttle from './src/DemoUseShuttle';
-import DemoUseTimeout from './src/DemoUseTimeout';
-import DemoUseFetch from './src/DemoUseFetch';
+import App from './src/App';
 
 const container = document.getElementById('root');
 // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
 const root = createRoot(container!);
 
-function App() {
-  return (
-    <div className='text-gray-800 container max-w-6xl mx-auto'>
-      <Header>
-        <Anchor href="//github.com/vincecao/use-tools">
-          use-tools
-        </Anchor>
-        <span className='flex space-x-2'>
-          <Anchor href="//www.npmjs.com/package/@vincecao/use-tools">
-            <img src="//badge.fury.io/js/@vincecao%2Fuse-tools.svg" />
-          </Anchor>
-          <Anchor href="//github.com/vincecao/use-tools">
-            <img src="//badgen.net/github/checks/vincecao/use-tools" />
-          </Anchor>
-        </span>
-      </Header>
-
-      <div className="p-5 space-y-5 font-serif py-10">
-
-        <CodeBlock type='installation' codeString='yarn add @vincecao/use-tools' language='bash'/>
-
-        <HookSection title="usePromiseState">
-          <DemoUsePromiseState />
-        </HookSection>
-
-        <HookSection title="useTimeout">
-          <DemoUseTimeout />
-        </HookSection>
-
-        <HookSection title="useShuttle">
-          <DemoUseShuttle />
-        </HookSection>
-
-        <HookSection title="useFetch">
-          <DemoUseFetch />
-        </HookSection>
-      </div>
-      <Footer>
-        <span>
-          copyright<Anchor href="//vince-amazing.com">@Vince</Anchor>
-        </span>
-      </Footer>
-    </div>
-  );
-}
-
 root.render(<App />);
diff --git a/example/package.json b/example/package.json
@@ -1,13 +1,16 @@
 {
-  "name": "example",
+  "name": "use-tools-example",
   "version": "1.0.2",
   "main": "index.tsx",
   "license": "MIT",
   "scripts": {
     "start": "parcel index.html",
-    "build": "parcel build index.html --public-url ./"
+    "build": "npm style && parcel build index.html --public-url ./",
+    "style": "npx tailwindcss -i ./src/input.css -o ./dist/output.css",
+    "style:watch": "npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch"
   },
   "dependencies": {
+    "@vincecao/use-tools": "..",
     "classnames": "^2.3.1",
     "react-app-polyfill": "^3.0.0",
     "react-syntax-highlighter": "^15.5.0"
@@ -21,6 +24,7 @@
     "@types/react": "../node_modules/@types/react",
     "@types/react-dom": "../node_modules/@types/react-dom",
     "parcel": "1.12.3",
+    "tailwindcss": "^3.1.8",
     "typescript": "../node_modules/typescript"
   }
 }
diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -0,0 +1,67 @@
+import * as React from 'react';
+
+import Anchor from './components/Anchor';
+import CodeBlock from './components/CodeBlock';
+import Footer from './components/Footer';
+import Header from './components/Header';
+import HookSection from './components/HookSection';
+import DemoUsePromiseState from './DemoUsePromiseState';
+import DemoUseShuttle from './DemoUseShuttle';
+import DemoUseTimeout from './DemoUseTimeout';
+import DemoUseFetch from './DemoUseFetch';
+
+export default function App() {
+  return (
+    <div className='text-stone-800 dark:text-stone-200 dark:bg-stone-800 container max-w-6xl mx-auto'>
+      <Header>
+        <div className='mix-blend-difference'>
+          <Anchor href="//github.com/vincecao/use-tools">
+            use-tools
+          </Anchor>
+        </div>
+        <span className='flex space-x-2'>
+          <Anchor href="//www.npmjs.com/package/@vincecao/use-tools">
+            <img src="//badge.fury.io/js/@vincecao%2Fuse-tools.svg" />
+          </Anchor>
+          <Anchor href="//github.com/vincecao/use-tools">
+            <img src="//badgen.net/github/checks/vincecao/use-tools" />
+          </Anchor>
+        </span>
+      </Header>
+
+      <div className="p-5 space-y-14 font-serif py-10">
+
+        <CodeBlock type='installation' codeString='yarn add @vincecao/use-tools' language='bash'/>
+
+        <hr/>
+
+        <HookSection title="usePromiseState">
+          <DemoUsePromiseState />
+        </HookSection>
+
+        <hr/>
+
+        <HookSection title="useTimeout">
+          <DemoUseTimeout />
+        </HookSection>
+
+        <hr/>
+
+        <HookSection title="useShuttle">
+          <DemoUseShuttle />
+        </HookSection>
+
+        <hr/>
+
+        <HookSection title="useFetch">
+          <DemoUseFetch />
+        </HookSection>
+      </div>
+      <Footer>
+        <span>
+          copyright<Anchor href="//vince-amazing.com">@Vince</Anchor>
+        </span>
+      </Footer>
+    </div>
+  );
+}
diff --git a/example/src/DemoUseFetch/DemoIPFetch.tsx b/example/src/DemoUseFetch/DemoIPFetch.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { useFetch } from '../../..';
+import { useFetch } from '@vincecao/use-tools';
 import Button from '../components/Button';
 import CodeBlock from '../components/CodeBlock';
 import Input from '../components/Input';
@@ -17,13 +17,13 @@ export default function DemoIPFetch(): React.ReactElement {
 
   const options = React.useMemo(
     () => ({
-      baseURL: 'http://ip-api.com/json/',
+      baseURL: 'https://ipapi.co/',
     }),
     []
   );
 
   const { data, pending, error, refresh } = useFetch<string>(
-    ipDefault?.['ip'] && (ipSearch.current || ipDefault?.['ip']),
+    `${ipDefault?.['ip'] && (ipSearch.current || ipDefault?.['ip'])}/json/`,
     options
   );
   return (
@@ -33,10 +33,10 @@ export default function DemoIPFetch(): React.ReactElement {
         <CodeBlock
           type="typescript"
           sourceHref="/example/src/DemoUseFetch/DemoIPFetch.tsx"
-          codeString={`const options = useMemo(() => ({ baseURL: 'http://ip-api.com/json/' }), []);
+          codeString={`const options = useMemo(() => ({ baseURL: 'https://ipapi.co/' }), []);
 
 const { data, pending, error, refresh } = useFetch<string>(
-  '${ipSearch.current || ipDefault?.['ip']}',
+  '${ipSearch.current || ipDefault?.['ip']}' + '/json/',
   options
 );`}
         />
@@ -47,7 +47,7 @@ const { data, pending, error, refresh } = useFetch<string>(
             IP
             <Input
               value={ipSearch.input}
-              placeholder={ipSearch.current || 'Type a new IP address to search'}
+              placeholder={ipSearch.current || 'Type a new IP address to search. e.g. 8.8.8.8'}
               onChange={value => {
                 setIpSearch(prev => ({ ...prev, input: value }));
               }}

diff --git a/example/src/DemoUsePromiseState/DemoGithubSection.tsx b/example/src/DemoUsePromiseState/DemoGithubSection.tsx
@@ -5,7 +5,7 @@ import {
   usePromiseState,
   UsePromiseStateOptions,
   UsePromiseStatePromise,
-} from '../../..';
+} from '@vincecao/use-tools';
 import Anchor from '../components/Anchor';
 import Button from '../components/Button';
 import Code from '../components/Code';
@@ -98,8 +98,6 @@ const [data, { error, status, refetch }] = usePromiseState<ResponseType>(
             <Code>username</Code>for a new search.
           </p>
 
-          <hr className="my-5 w-3/4 mx-auto" />
-
           <span className="flex justify-between">
             <label>
               Github Username

diff --git a/example/src/DemoUsePromiseState/DemoIPSection.tsx b/example/src/DemoUsePromiseState/DemoIPSection.tsx
@@ -1,7 +1,7 @@
 import { $fetch } from 'ohmyfetch';
 import * as React from 'react';
 
-import { usePromiseState } from '../../..';
+import { usePromiseState } from '@vincecao/use-tools';
 import Button from '../components/Button';
 import CodeBlock from '../components/CodeBlock';
 import SampleSection from '../components/SampleSection';

diff --git a/example/src/DemoUseShuttle/DemoShuttle.tsx b/example/src/DemoUseShuttle/DemoShuttle.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { useShuttle } from '../../..';
+import { useShuttle } from '@vincecao/use-tools';
 import Button from '../components/Button';
 import Code from '../components/Code';
 import CodeBlock from '../components/CodeBlock';

diff --git a/example/src/DemoUseTimeout/DemoTimeout.tsx b/example/src/DemoUseTimeout/DemoTimeout.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { useTimeout } from '../../..';
+import { useTimeout } from '@vincecao/use-tools';
 import Button from '../components/Button';
 import Code from '../components/Code';
 import CodeBlock from '../components/CodeBlock';

diff --git a/example/src/components/Button.tsx b/example/src/components/Button.tsx
@@ -18,7 +18,7 @@ function Button(
       ref={ref}
       type={type}
       className={classNames(
-        'm-1 p-1 px-2 text-sm rounded hover:opacity-50 border',
+        'm-1 p-1 px-2 text-sm rounded hover:opacity-50 border dark:bg-stone-900 border-stone-500',
         {
           'cursor-not-allowed opacity-50': disabled,
         }

diff --git a/example/src/components/Code.tsx b/example/src/components/Code.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 
 export default function Code({ children }: { children: React.ReactNode }) {
   return (
-    <code className="bg-red-100 px-1 font-mono text-sm rounded-sm mx-1">
+    <code className="bg-rose-100 dark:bg-rose-900 px-1 font-mono text-sm rounded-sm mx-1">
       {children}
     </code>
   );

diff --git a/example/src/components/CodeBlock.tsx b/example/src/components/CodeBlock.tsx
@@ -1,5 +1,7 @@
 import * as React from 'react';
+import { useEffect, useState } from 'react';
 import SyntaxHighlighter from 'react-syntax-highlighter/dist/esm/prism';
+import { vscDarkPlus, oneLight } from "react-syntax-highlighter/dist/esm/styles/prism";
 
 import Anchor from './Anchor';
 
@@ -18,23 +20,32 @@ export default function CodeBlock({
   type,
   children,
 }: CodeBlockProps) {
+
+  const [mode, setMode] = useState('light')
+
+  useEffect(() => {
+    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+      setMode('dark')
+    }
+  }, []);
+
   return (
     <div className="text-xs my-3">
       <span className="flex justify-between">
-        {type && <pre className="font-mono">{type}</pre>}
+        {type && <pre className="font-mono capitalize">{type}</pre>}
         {sourceHref && (
           <Anchor
             href={`//github.com/vincecao/use-tools/blob/master${sourceHref}`}
           >
-            <pre className="font-mono text-blue-600 hover:text-red-600">
+            <pre className="font-mono text-blue-400 dark:text-blue-500 hover:text-red-600 dark:hover:text-red-900">
               source
             </pre>
           </Anchor>
         )}
       </span>
 
       <div className="max-h-64 overflow-x-auto">
-        <SyntaxHighlighter language={language}>{codeString}</SyntaxHighlighter>
+        <SyntaxHighlighter language={language} style={mode === 'light' ? oneLight: vscDarkPlus}>{codeString}</SyntaxHighlighter>
       </div>
       {children}
     </div>

diff --git a/example/src/components/Footer.tsx b/example/src/components/Footer.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 
 export default function Footer({ children }: { children: React.ReactNode }) {
   return (
-    <div className="text-sm fixed bottom-0 left-0 space-x-5 w-full py-1 flex justify-center bg-white border-t shadow">
+    <div className="backdrop-blur text-sm fixed bottom-0 left-0 space-x-5 w-full py-1 flex justify-center">
       {children}
     </div>
   );

diff --git a/example/src/components/Header.tsx b/example/src/components/Header.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 
 export default function Header({ children }: { children: React.ReactNode }) {
   return (
-    <div className="text-sm fixed top-0 left-0 w-full py-1 px-5 flex justify-between bg-white border-b shadow">
+    <div className="backdrop-blur text-sm fixed top-0 left-0 w-full py-1 px-5 flex justify-between">
       {children}
     </div>
   );

diff --git a/example/src/components/Input.tsx b/example/src/components/Input.tsx
@@ -24,7 +24,7 @@ function Input(
   return (
     <input
       className={classNames(
-        'm-1 p-1 px-2 border rounded bg-white focus:outline-cyan-500/50',
+        'm-1 p-1 px-2 border rounded bg-white dark:bg-stone-900 border-stone-500 focus:outline-none focus:ring focus:ring-cyan-300/20',
         {
           'cursor-not-allowed opacity-50': disabled,
         }

diff --git a/example/src/input.css b/example/src/input.css
@@ -0,0 +1,15 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+::-webkit-scrollbar {
+  @apply w-2 h-2;
+}
+
+::-webkit-scrollbar-track {
+  @apply bg-stone-200 dark:bg-stone-900 border rounded-full;
+}
+
+::-webkit-scrollbar-thumb {
+  @apply bg-stone-400 hover:bg-stone-500 dark:bg-stone-700 hover:dark:bg-stone-600 rounded-full;
+}
diff --git a/example/tailwind.config.js b/example/tailwind.config.js
@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ["./src/**/*.{html,js,jsx,ts,tsx}"],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}