From 079532a17051facb30c58fd5f61d6637967980e3 Mon Sep 17 00:00:00 2001 From: Lineng CAO Date: Thu, 25 Aug 2022 21:44:07 -0700 Subject: [PATCH] feat: Improve example w dark mode, update dependencies (#19) * feat: Improve example * chore: Dependencies updates & fix type warning --- example/index.html | 4 +- example/index.tsx | 56 +- example/package.json | 8 +- example/src/App.tsx | 67 + example/src/DemoUseFetch/DemoIPFetch.tsx | 12 +- .../DemoUsePromiseState/DemoGithubSection.tsx | 4 +- .../src/DemoUsePromiseState/DemoIPSection.tsx | 2 +- example/src/DemoUseShuttle/DemoShuttle.tsx | 2 +- example/src/DemoUseTimeout/DemoTimeout.tsx | 2 +- example/src/components/Button.tsx | 2 +- example/src/components/Code.tsx | 2 +- example/src/components/CodeBlock.tsx | 17 +- example/src/components/Footer.tsx | 2 +- example/src/components/Header.tsx | 2 +- example/src/components/Input.tsx | 2 +- example/src/input.css | 15 + example/tailwind.config.js | 8 + example/yarn.lock | 2654 ++++++++++------- package.json | 2 +- src/usePromiseState/use-promise-state.ts | 2 +- yarn.lock | 962 +++--- 21 files changed, 2182 insertions(+), 1645 deletions(-) create mode 100644 example/src/App.tsx create mode 100644 example/src/input.css create mode 100644 example/tailwind.config.js diff --git a/example/index.html b/example/index.html index b1a6412..872f4b4 100644 --- a/example/index.html +++ b/example/index.html @@ -4,11 +4,11 @@ - + Use Tools Playground - +
diff --git a/example/index.tsx b/example/index.tsx index 873ee4c..b5b0a33 100644 --- 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 ( -
-
- - use-tools - - - - - - - - - -
- -
- - - - - - - - - - - - - - - - - - -
-
- - copyright@Vince - -
-
- ); -} - root.render(); diff --git a/example/package.json b/example/package.json index eb81705..40db1d1 100644 --- 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 new file mode 100644 index 0000000..574493f --- /dev/null +++ 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 ( +
+
+
+ + use-tools + +
+ + + + + + + + +
+ +
+ + + +
+ + + + + +
+ + + + + +
+ + + + + +
+ + + + +
+
+ + copyright@Vince + +
+
+ ); +} \ No newline at end of file diff --git a/example/src/DemoUseFetch/DemoIPFetch.tsx b/example/src/DemoUseFetch/DemoIPFetch.tsx index 8ea6847..d357dbc 100644 --- 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( - 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 { ({ baseURL: 'http://ip-api.com/json/' }), []); + codeString={`const options = useMemo(() => ({ baseURL: 'https://ipapi.co/' }), []); const { data, pending, error, refresh } = useFetch( - '${ipSearch.current || ipDefault?.['ip']}', + '${ipSearch.current || ipDefault?.['ip']}' + '/json/', options );`} /> @@ -47,7 +47,7 @@ const { data, pending, error, refresh } = useFetch( IP { setIpSearch(prev => ({ ...prev, input: value })); }} diff --git a/example/src/DemoUsePromiseState/DemoGithubSection.tsx b/example/src/DemoUsePromiseState/DemoGithubSection.tsx index 38209ba..d7b5e20 100644 --- 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( usernamefor a new search.

-
-