kitzo 2.1.29 → 2.2.0

package/README.md

@@ -2,20 +2,7 @@
 
 [![npm](https://img.shields.io/npm/v/kitzo)](https://www.npmjs.com/package/kitzo)
 
-### A lightweight library of Vanilla js and React js
-
-##### [Vanilla js](#quick-usage-overview-vanilla-js)
-
-- Copy on click
-- Tooltip on mouseover
-- Ripple effect on mousedown
-- Debounce function
-- Hover clip-path effect
-
-##### [React js](#react)
-
-- React Toast notifications
-- Tooltip wrapper component
+### A lightweight React micro-utility.
 
 #### Install
 
@@ -23,224 +10,136 @@
 npm i kitzo
 ```
 
-or
-
-```javascript
-<script src="https://cdn.jsdelivr.net/npm/kitzo@2.1.29/dist/kitzo.umd.min.js"></script>
-```
-
-> Vanilla: Attach this script tag in the html head tag and you are good to go.
-
----
-
-#### API links
-
-- **Vanilla**: [copy](#copy-api), [Tooltip](#tooltip-api), [Ripple](#ripple-api), [Debounce](#debounce-api), [Clippath](#clippath-api), [Get type](#typecheck-api)
-- **React**: [Toast](#react-toast-api-usage), [Tooltip](#react-tooltip-api)
-
-#### Vanilla APIs
-
-```javascript
-// NPM usage
-import kitzo from 'kitzo';
-
-kitzo.copy();
-kitzo.tooltip();
-kitzo.ripple();
-kitzo.debounce();
-kitzo.clippath();
-kitzo.getType();
-```
-
-> Use a modern build tool. **vite** - recommended
-
-##### Copy API:
+#### React APIs
 
-```javascript
-kitzo.copy(doc);
+```jsx
+import {
+  ToastContainer,
+  toast,
+  Tooltip,
+  useDebounce,
+  useWindowSize,
+} from 'kitzo';
 ```
 
-> Copy functionality on call.
-
-##### Tooltip API:
+> You can import only what you need.
 
-```javascript
-kitzo.tooltip(selectors | element | NodeList, {
-  tooltip: string,
-  direction: 'top' | 'right' | 'bottom' | 'left',
-  arrow: 'on' | 'off',
-  offset: number,
-  customClass: string,
-  style: object,
-});
-```
+#### UI
 
-> Attach minimal tooltips to buttons for clean, helpful hover hints.
+- Toast message
+- Tooltip
 
-##### Ripple API:
+##### Toast API usage:
 
-```javascript
-kitzo.ripple(selectors | element | NodeList, {
-  opacity: number,
-  duration: number,
-  color: string,
-  size: number,
+```jsx
+import { toast } from 'kitzo';
+import MyCustomComponent from './MyCustomComponent';
+
+// ---------------------
+// Normal / Success / Error
+// ---------------------
+
+toast('Toast message', {
+  id: 'normat_toast',
+  duration: 2000,
+  showIcon: true,
+  position: 'top-center',
 });
-```
 
-> Adds a lightweight, clean ripple effect to your elements on click.
-
-##### Debounce API:
-
-```javascript
-kitzo.debounce(callback, delayInMilliseconds);
-```
-
-```javascript
-// Log only after typing stops for 500ms
-const logSearch = kitzo.debounce((text) => {
-  console.log('Searching for:', text);
-}, 500);
-
-// Attach to input
-document.querySelector('#search').addEventListener('input', (e) => {
-  logSearch(e.target.value);
+toast.success('Toast message', {
+  id: 'success_toast',
+  duration: 2000,
+  showIcon: true,
+  position: 'top-center',
 });
-```
-
-> Debounce on every call of function.
-
-##### Clippath API:
 
-```javascript
-kitzo.clippath(selectors | element | NodeList, {
-  textOption: null | { selector: string, value: string | number },
-  clippathSize: string | number,
-  smooth: boolean,
-  class: string,
-  style: object,
+toast.error('Toast message', {
+  id: 'error_toast',
+  duration: 2000,
+  showIcon: true,
+  position: 'top-center',
 });
-```
-
-##### TypeCheck API:
-
-```javascript
-kitzo.getType(type);
-
-const data = [];
-console.log(kitzo.getType(data)); // 'array'
-```
-
----
-
-## React
-
-#### Install
-
-```bash
-npm i kitzo
-```
-
-#### React APIs
 
-```jsx
-import { ToastContainer, toast, Tooltip, ... } from 'kitzo/react';
-```
-
-##### Toast API:
-
-```jsx
-import { toast } from 'kitzo/react';
+// content can be: (dismiss) => (
+// <div>
+//   <span>any thing</span>
+//   <button onClick={dismiss} >❌</button>
+// </div>
+//)
 
-toast.success('toast message', { duration: 2000, style: {}, showIcon: true, position: 'top-center' });
-toast.error('toast message', { duration: 2000, style: {}, showIcon: true, position: 'top-center' });
+// ---------------------
+// Promise-based toast
+// ---------------------
 
 toast.promise(
-  promise(), // call a function that returns promise
+  promise(), // function that returns a promise
   {
     loading: 'Saving...',
-    success: 'Saved' | (response) => 'Saved',
-    error: 'Error occured' | (error) => 'Error occured',
+    success: (res) => `Saved: ${res}`, // or just 'Saved'
+    error: (err) => `Error occurred: ${err}`, // or just 'Error occurred'
+  },
+  {
+    id: 'promise_toast',
+    duration: 2000,
+    showIcon: true,
+    position: 'top-center',
   },
-  { duration: 2000, style: {}, showIcon: true, position: 'top-center' },
 );
 
+// ---------------------
+// Custom toast
+// ---------------------
+
 // JSX element
-toast.custom(<MyCustomComponent />, { duration: 2000, position: 'top-center' });
+toast.custom(<MyCustomComponent />, {
+  id: 'custom_toast',
+  duration: 2000,
+  position: 'top-center',
+});
 
 // Function that receives a dismiss handler
-toast.custom((dismiss) => (
-  <div>
-    <span>Custom toast message</span>
-    <button onClick={dismiss}>Close</button>
-  </div>
-), { duration: 3000 | Infinity });
-
-// (and optionally)
-toast.custom("string");
-```
-
-##### React Toast API Usage
-
-```jsx
-import { ToastContainer, toast } from 'kitzo/react';
-
-function App() {
-  function fakePromise() {
-    return new Promise((resolved, rejected) => {
-      setTimeout(() => {
-        Math.random() > 0.5 ? resolved('resolved') : rejected('rejected');
-      }, 2000);
-    });
-  }
+toast.custom(
+  (dismiss) => (
+    <div>
+      <span>Custom toast message</span>
+      <button onClick={dismiss}>Close</button>
+    </div>
+  ),
+  {
+    id: 'custom_toast',
+    duration: Infinity, // or 3000
+    position: 'top-center',
+  },
+);
 
-  function promiseToast() {
-    toast.promise(
-      fakePromise(),
-      {
-        loading: 'Saving data...',
-        success: 'Data saved',
-        error: 'Failed saving data',
-      },
-      { duration: 2500, position: 'top-center' },
-    );
-  }
+// Simple string
+toast.custom('Simple string toast', {
+  id: 'custom_toast',
+  duration: 2000,
+  position: 'top-center',
+});
 
-  function customToast() {
-    toast.custom(
-      (dismiss) => (
-        <div>
-          <span>Funtion that return jsx</span>
-          <button onClick={dismiss}>Close</button>
-        </div>
-      ),
-      {
-        duration: 2000,
-        position: 'top-center',
-      },
-    );
-  }
+// ---------------------
+// Update / Dismiss
+// ---------------------
+// ❗ Update is only supported on custom toasts
 
-  return (
-    <div>
-      <button onClick={() => toast.success('✅ Success toast message')}>Succes</button>
-      <button onClick={() => toast.error('❌ Error toast message')}>Error</button>
-      <button onClick={promiseToast}>Promise</button>
-      <button onClick={customToast}>Custom Toast</button>
+toast.update('my-toast', 'Updated content!', {
+  duration: 3000,
+});
 
-      {/* Toast container must needed */}
-      <ToastContainer />
-    </div>
-  );
-}
+// Dismiss by id (optional)
+toast.dismiss('my-toast');
+// Or dismiss all toasts
+toast.dismiss();
 ```
 
 > Each toast can have its own position. default position is `top-center`.
 
-##### React Tooltip API:
+##### React Tooltip API usage:
 
 ```jsx
-import { Tooltip } from 'kitzo/react';
+import { Tooltip } from 'kitzo';
 
 function App() {
   return (
@@ -261,7 +160,7 @@ function App() {
           }}
           style={{
             '--arrow-size': 6,
-            '--arrow-color': 'red'
+            '--arrow-color': 'red',
           }}
         >
           <button>Hover me</button>
@@ -273,3 +172,87 @@ function App() {
 ```
 
 > You can provide your own custom jsx element as `content`. e.g. `content={<div>Custom tooltip</div>}`
+
+---
+
+### Hooks
+
+- useDebounce
+- useWindowSize
+
+#### useDebounce usage:
+
+```jsx
+import { useDebounce } from 'kitzo';
+
+function App() {
+  const [value, setValue] = useState('');
+  const debouncedValue = useDebounce(value, 500);
+
+  return (
+    <div>
+      <input
+        value={value}
+        onChange={(e) => setValue(e.target.value)}
+      />
+      <p>Debounced value: {debouncedValue}</p>
+    </div>
+  );
+}
+```
+
+#### useWindowSize usage:
+
+```jsx
+import { useWindowSize } from 'kitzo';
+
+function App() {
+  const { screenWidth, screenHeight } = useWindowSize({ delay: 100 });
+
+  return (
+    <div>
+      <p>Window width: {width}</p>
+      <p>Window height: {height}</p>
+    </div>
+  );
+}
+```
+
+---
+
+### Functions
+
+- copy _(Copy text to clipboard)_
+
+#### copy usage:
+
+```jsx
+import { copy } from 'kitzo/fns';
+import { ToastContainer, toast } from 'kitzo';
+
+// copy(text: string): Promise<void>;
+
+function App() {
+  async function copyText(text) {
+    try {
+      await copy(text);
+      toast.success('Copied to clipboard');
+    } catch (err) {
+      console.error(err);
+      toast.error('Failed to copy to clipboard');
+    }
+  }
+
+  return (
+    <div>
+      <button onClick={() => copyText('hello world')}>Copy text</button>
+      <ToastContainer />
+    </div>
+  );
+}
+
+// or just
+copy('hello world');
+```
+
+> Use `copy` function to copy text to clipboard.

package/dist/functions/index.js

@@ -0,0 +1,36 @@
+//! Copy function
+function legacyCopy(text) {
+  const textarea = document.createElement('textarea');
+  textarea.value = text;
+
+  document.body.appendChild(textarea);
+  textarea.select();
+  document.execCommand('copy');
+  document.body.removeChild(textarea);
+}
+
+async function writeToClipboard(text) {
+  if (!navigator.clipboard?.writeText) {
+    legacyCopy(text);
+    return;
+  }
+
+  try {
+    await navigator.clipboard.writeText(text);
+  } catch (err) {
+    legacyCopy(text);
+    console.error(err);
+  }
+}
+
+async function copy(doc) {
+  if (doc == null) throw new Error('[kitzo/copy] expected a value to copy, got null or undefined.');
+
+  const text =
+    typeof doc === 'string' || typeof doc === 'number' ? String(doc) : JSON.stringify(doc);
+
+  await writeToClipboard(text);
+}
+
+export { copy };
+//# sourceMappingURL=index.js.map

package/dist/functions/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../src/kitzo/functions/copy.js"],"sourcesContent":["//! Copy function\r\nfunction legacyCopy(text) {\r\n  const textarea = document.createElement('textarea');\r\n  textarea.value = text;\r\n\r\n  document.body.appendChild(textarea);\r\n  textarea.select();\r\n  document.execCommand('copy');\r\n  document.body.removeChild(textarea);\r\n}\r\n\r\nasync function writeToClipboard(text) {\r\n  if (!navigator.clipboard?.writeText) {\r\n    legacyCopy(text);\r\n    return;\r\n  }\r\n\r\n  try {\r\n    await navigator.clipboard.writeText(text);\r\n  } catch (err) {\r\n    legacyCopy(text);\r\n    console.error(err);\r\n  }\r\n}\r\n\r\nexport default async function copy(doc) {\r\n  if (doc == null) throw new Error('[kitzo/copy] expected a value to copy, got null or undefined.');\r\n\r\n  const text =\r\n    typeof doc === 'string' || typeof doc === 'number' ? String(doc) : JSON.stringify(doc);\r\n\r\n  await writeToClipboard(text);\r\n}\r\n"],"names":[],"mappings":"AAAA;AACA,SAAS,UAAU,CAAC,IAAI,EAAE;AAC1B,EAAE,MAAM,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;AACtD,EAAE,QAAQ,CAAC,KAAK,GAAG,IAAI,CAAC;AACxB;AACA,EAAE,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;AACtC,EAAE,QAAQ,CAAC,MAAM,EAAE,CAAC;AACpB,EAAE,QAAQ,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;AAC/B,EAAE,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;AACtC,CAAC;AACD;AACA,eAAe,gBAAgB,CAAC,IAAI,EAAE;AACtC,EAAE,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,SAAS,EAAE;AACvC,IAAI,UAAU,CAAC,IAAI,CAAC,CAAC;AACrB,IAAI,OAAO;AACX,EAAE,CAAC;AACH;AACA,EAAE,IAAI;AACN,IAAI,MAAM,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;AAC9C,EAAE,CAAC,CAAC,OAAO,GAAG,EAAE;AAChB,IAAI,UAAU,CAAC,IAAI,CAAC,CAAC;AACrB,IAAI,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;AACvB,EAAE,CAAC;AACH,CAAC;AACD;AACe,eAAe,IAAI,CAAC,GAAG,EAAE;AACxC,EAAE,IAAI,GAAG,IAAI,IAAI,EAAE,MAAM,IAAI,KAAK,CAAC,+DAA+D,CAAC,CAAC;AACpG;AACA,EAAE,MAAM,IAAI;AACZ,IAAI,OAAO,GAAG,KAAK,QAAQ,IAAI,OAAO,GAAG,KAAK,QAAQ,GAAG,MAAM,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC;AAC3F;AACA,EAAE,MAAM,gBAAgB,CAAC,IAAI,CAAC,CAAC;AAC/B;;;;"}