main ?? add tailwind for demos

debabin · debabin · commit 902c114d4483 · 2025-02-09T01:06:17.000+07:00
diff --git a/docs/src/components/code.vue b/docs/src/components/code.vue
@@ -1,6 +1,4 @@
 <script setup>
-import { onMounted, ref } from 'vue';
-
 const props = defineProps({
   code: String,
   lang: String
diff --git a/src/hooks/useActiveElement/useActiveElement.demo.tsx b/src/hooks/useActiveElement/useActiveElement.demo.tsx
@@ -10,10 +10,10 @@ const Demo = () => {
         {Array.from({ length: 6 }, (_, i) => i + 1).map((id) => (
           <input
             key={id}
+            className='rounded border p-2'
             data-id={String(id)}
-            placeholder={String(id)}
             type='text'
-            className='rounded border p-2'
+            placeholder={String(id)}
           />
         ))}
       </div>
diff --git a/src/hooks/useBluetooth/useBluetooth.demo.tsx b/src/hooks/useBluetooth/useBluetooth.demo.tsx
@@ -1,4 +1,5 @@
 import { useState } from 'react';
+
 import { useBluetooth } from './useBluetooth';
 
 const Demo = () => {
@@ -27,22 +28,26 @@ const Demo = () => {
 
   return (
     <>
-      <p>
-        Bluetooth Web API supported
-      </p>
+      <p>Bluetooth Web API supported</p>
       {bluetooth.connected && (
         <div className='rounded-md bg-green-500 p-3 text-white'>
           <p>Connected</p>
         </div>
       )}
 
       {!bluetooth.connected && (
-        <div className='bg-orange-800 text-white p-3 rounded-md'>
+        <div className='rounded-md bg-orange-800 p-3 text-white'>
           <p>Not Connected</p>
         </div>
       )}
-      <button onClick={onRequestDeviceClick}>Request device</button>
-      {error && <p>Errors: <code className="block p-5 whitespace-pre">{error}</code></p>}
+      <button type='button' onClick={onRequestDeviceClick}>
+        Request device
+      </button>
+      {error && (
+        <p>
+          Errors: <code className='block p-5 whitespace-pre'>{error}</code>
+        </p>
+      )}
     </>
   );
 };
diff --git a/src/hooks/useClipboard/useClipboard.demo.tsx b/src/hooks/useClipboard/useClipboard.demo.tsx
@@ -11,7 +11,7 @@ const Demo = () => {
   return (
     <>
       <p>
-        Clipboard Permission: read <b>{clipboardReadPermission.state}</b> | write{' '}
+        Clipboard permission: read <b>{clipboardReadPermission.state}</b> | write{' '}
         <b>{clipboardWritePermissionWrite.state}</b>
       </p>
 
@@ -20,11 +20,9 @@ const Demo = () => {
       </p>
       <input {...textField.register()} />
 
-      <div style={{ display: 'flex' }}>
-        <button type='button' onClick={() => clipboard.copy(textField.getValue())}>
-          Copy
-        </button>
-      </div>
+      <button type='button' onClick={() => clipboard.copy(textField.getValue())}>
+        Copy
+      </button>
     </>
   );
 };
diff --git a/src/hooks/useCssVar/useCssVar.demo.tsx b/src/hooks/useCssVar/useCssVar.demo.tsx
@@ -3,9 +3,6 @@ import { useCssVar } from './useCssVar';
 const Demo = () => {
   const key = '--color';
   const colorVar = useCssVar(key, '#7fa998');
-  const style = {
-    color: 'var(--color)'
-  };
 
   const switchColor = () => {
     if (colorVar.value === '#df8543') colorVar.set('#7fa998');
@@ -14,7 +11,7 @@ const Demo = () => {
 
   return (
     <>
-      <p style={style}>Sample text, {colorVar.value}</p>
+      <p style={{ color: 'var(--color)' }}>Sample text, {colorVar.value}</p>
       <button type='button' onClick={switchColor}>
         Change Color
       </button>
diff --git a/src/hooks/useElementSize/useElementSize.demo.tsx b/src/hooks/useElementSize/useElementSize.demo.tsx
@@ -1,28 +1,15 @@
-import type { CSSProperties } from 'react';
-
 import { useElementSize } from './useElementSize';
 
 const Demo = () => {
   const elementSize = useElementSize<HTMLTextAreaElement>();
 
-  const containerStyle: CSSProperties = {
-    display: 'flex',
-    flexDirection: 'column',
-    gap: '15px'
-  };
-
-  const textareaStyle: CSSProperties = {
-    resize: 'both',
-    width: '200px',
-    height: '200px'
-  };
-
   return (
-    <div style={containerStyle}>
-      <span>Resize the box to see changes</span>
+    <div className='flex flex-col gap-4'>
+      <p>Resize the box to see changes</p>
       <textarea
         ref={elementSize.ref}
-        style={textareaStyle}
+        className='200px 200px'
+        style={{ resize: 'both' }}
         value={`width: ${elementSize.value.width}\nheight: ${elementSize.value.height}`}
       />
     </div>
diff --git a/src/hooks/useField/useField.demo.tsx b/src/hooks/useField/useField.demo.tsx
@@ -45,8 +45,8 @@ const Demo = () => {
 
       <div>
         <input
-          placeholder='Name'
           type='text'
+          placeholder='Name'
           {...nameInput.register({
             required: 'field is required',
             minLength: {
@@ -55,7 +55,7 @@ const Demo = () => {
             }
           })}
         />
-        {nameInput.error && <span style={{ color: 'red' }}>{nameInput.error}</span>}
+        {nameInput.error && <span className='text-red-400'>{nameInput.error}</span>}
       </div>
 
       <select {...sexSelect.register()}>
@@ -66,7 +66,7 @@ const Demo = () => {
       <textarea placeholder='About' rows={5} {...aboutTextArea.register()} />
 
       <label htmlFor='checkbox'>
-        <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
+        <div className='flex items-center gap-3'>
           <input id='checkbox' type='checkbox' {...rememberThisComputerCheckbox.register()} />
           <span>Remember this computer?</span>
         </div>
diff --git a/src/hooks/useHash/useHash.demo.tsx b/src/hooks/useHash/useHash.demo.tsx
@@ -10,15 +10,11 @@ const Demo = () => {
     <div>
       <p>window.location.href:</p>
       <p>
-        <pre style={{ whiteSpace: 'pre-wrap' }}>{window.location.href}</pre>
+        <pre className='whitespace-pre-wrap'>{window.location.href}</pre>
       </p>
       <p>Edit hash: </p>
       <p>
-        <input
-          style={{ width: '100%' }}
-          value={hash}
-          onChange={(event) => setHash(event.target.value)}
-        />
+        <input className='w-full' value={hash} onChange={(event) => setHash(event.target.value)} />
       </p>
     </div>
   );
diff --git a/src/hooks/useIdle/useIdle.demo.tsx b/src/hooks/useIdle/useIdle.demo.tsx
@@ -1,3 +1,5 @@
+import { cn } from '@/docs/src/utils';
+
 import { useIdle } from './useIdle';
 
 const Demo = () => {
@@ -6,7 +8,12 @@ const Demo = () => {
   return (
     <>
       <p>
-        Status: <code style={{ color: idle ? 'red' : 'green' }}>{idle ? 'idle' : 'active'}</code>
+        Status:{' '}
+        <code>
+          <span className={cn('text-red-300', { 'text-green-300': !idle })}>
+            {idle ? 'idle' : 'active'}
+          </span>
+        </code>
       </p>
       <p>Last active: {lastActive}</p>
     </>
diff --git a/src/hooks/useImage/useImage.demo.tsx b/src/hooks/useImage/useImage.demo.tsx
@@ -7,13 +7,9 @@ const Demo = () => {
 
   return (
     <p>
-      {image.isLoading && <div style={{ width: 300, height: 200 }}>Loading...</div>}
+      {image.isLoading && <div className='h-xs w-xs'>Loading...</div>}
       {!image.isLoading && image.data && (
-        <img
-          alt='demo'
-          src={`https://place-hold.it/300x200/${color}`}
-          style={{ width: 300, height: 200 }}
-        />
+        <img alt='demo' className='h-xs w-xs' src={`https://place-hold.it/300x200/${color}`} />
       )}
       <button type='button' onClick={() => toggle()}>
         Change
diff --git a/src/hooks/useLastChanged/useLastChanged.demo.tsx b/src/hooks/useLastChanged/useLastChanged.demo.tsx
@@ -9,9 +9,9 @@ const Demo = () => {
   return (
     <div>
       <input
-        placeholder='Type something...'
         value={inputValue}
         onChange={(event) => setInputValue(event.target.value)}
+        placeholder='Type something...'
       />
       <p>Last changed: {value}</p>
     </div>
diff --git a/src/hooks/useMap/useMap.demo.tsx b/src/hooks/useMap/useMap.demo.tsx
@@ -14,7 +14,7 @@ const Demo = () => {
     <>
       <div style={{ display: 'flex', gap: 8 }}>
         <input placeholder='Name' {...nameInput.register()} />
-        <input placeholder='Age' type='number' {...ageInput.register()} />
+        <input type='number' placeholder='Age' {...ageInput.register()} />
 
         <button
           type='button'
diff --git a/src/hooks/useScroll/useScroll.demo.tsx b/src/hooks/useScroll/useScroll.demo.tsx
@@ -1,7 +1,9 @@
 import { useState } from 'react';
 
-import { useScroll, UseScrollCallbackParams } from './useScroll';
+import type { UseScrollCallbackParams } from './useScroll';
+
 import { useDebounceCallback } from '../useDebounceCallback/useDebounceCallback';
+import { useScroll } from './useScroll';
 
 const Demo = () => {
   const [scroll, setScroll] = useState({ x: 0, y: 0 });
diff --git a/src/hooks/useScrollTo/useScrollTo.demo.tsx b/src/hooks/useScrollTo/useScrollTo.demo.tsx
@@ -1,4 +1,5 @@
-import { CSSProperties } from 'react';
+import type { CSSProperties } from 'react';
+
 import { useScrollTo } from './useScrollTo';
 
 const blockStyle: CSSProperties = {
diff --git a/src/hooks/useSet/useSet.demo.tsx b/src/hooks/useSet/useSet.demo.tsx
@@ -1,36 +1,31 @@
-import { Fragment, useState } from 'react';
-
+import { useField } from '../useField/useField';
 import { useSet } from './useSet';
 
 const Demo = () => {
-  const [input, setInput] = useState('');
+  const scopeInput = useField({ initialValue: '' });
   const scopes = useSet(['@siberiacancode', '@siberiacancode-tests', '@shared']);
 
   return (
     <>
-      <div style={{ display: 'flex', gap: 8 }}>
-        <input
-          placeholder='Enter scope'
-          value={input}
-          onChange={(event) => setInput(event.currentTarget.value)}
-        />
+      <div className='flex gap-2'>
+        <input {...scopeInput.register()} placeholder='Enter scope' />
 
         <button
           type='button'
           onClick={() => {
-            scopes.add(input.trim().toLowerCase());
-            setInput('');
+            scopes.add(scopeInput.getValue().trim().toLowerCase());
+            scopeInput.reset();
           }}
         >
           Add
         </button>
       </div>
 
-      <div style={{ marginTop: 8 }}>
+      <div className='mt-4 flex gap-2'>
         {Array.from(scopes.value).map((scope, index) => (
-          <Fragment key={index}>
-            <code key={index}>{scope}</code>{' '}
-          </Fragment>
+          <div key={index} className='cursor-pointer' onClick={() => scopes.remove(scope)}>
+            <code>{scope}</code>
+          </div>
         ))}
       </div>
     </>
diff --git a/src/hooks/useStopwatch/useStopwatch.ts b/src/hooks/useStopwatch/useStopwatch.ts
diff --git a/src/hooks/useTextDirection/useTextDirection.demo.tsx b/src/hooks/useTextDirection/useTextDirection.demo.tsx
