tinywidgets 1.1.1 → 1.1.3

package/README.md

@@ -15,6 +15,35 @@ TinyWidgets uses [React](https://react.dev/) for DOM manipulation, [Vanilla-Extr
 
 But, just to be clear - that doesn't mean you need to use Vanilla-Extract, Lucide, or Tinybase in the apps you build with these widgets. You can set arbitrary class names (from Tailwind, for example!) on all components if you like.
 
+## Meet the family
+
+TinyTick is part of a group of small libraries designed to help make rich client and local-first apps easier to build. Check out the others!
+
+<p>
+  <a href='https://tinybase.org' target='_blank'>
+    <img width="48" src="https://tinybase.org/favicon.svg" />
+    <br/>
+    <b>TinyBase</b>
+  </a>
+  <br />The reactive data store for local-first apps.<br />
+</p>
+
+<p>
+    <img width="48" src="https://tinywidgets.org/favicon.svg" />
+    <br/>
+    <b>TinyWidgets</b>
+  <br />A collection of tiny, reusable, UI components.<br />
+</p>
+
+<p>
+  <a href='https://tinytick.org' target='_blank'>
+  <img width="48" src="https://tinytick.org/favicon.svg" />
+  <br />
+  <b>TinyTick</b>
+  </a>
+  <br />A tiny but very useful task orchestrator.<br />
+</p>
+
 ## Help out!
 
 This project was created because [I](https://github.com/jamesgpearce) want to be able to build lots of local-first apps quickly and without the overhead of all the app boilerplate each time.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tinywidgets",
-  "version": "1.1.1",
+  "version": "1.1.3",
   "author": "jamesgpearce",
   "repository": "github:tinyplex/tinywidgets",
   "license": "MIT",
@@ -21,26 +21,26 @@
   "devDependencies": {
     "@types/react": "^18.3.11",
     "@types/react-dom": "^18.3.0",
-    "@typescript-eslint/eslint-plugin": "^8.17.0",
-    "@typescript-eslint/parser": "^8.17.0",
-    "cspell": "^8.16.1",
+    "@typescript-eslint/eslint-plugin": "^8.26.1",
+    "@typescript-eslint/parser": "^8.26.1",
+    "cspell": "^8.17.5",
     "eslint": "^8.57.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-react": "^7.37.2",
-    "eslint-plugin-react-hooks": "^5.1.0",
-    "eslint-plugin-react-refresh": "^0.4.16",
-    "prettier": "^3.4.2",
-    "typescript": "^5.7.2"
+    "eslint-config-prettier": "^10.1.1",
+    "eslint-plugin-react": "^7.37.4",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.19",
+    "prettier": "^3.5.3",
+    "typescript": "^5.8.2"
   },
   "exports": {
     ".": "./src/index.ts",
     "./css": "./src/index.css.ts"
   },
   "dependencies": {
-    "@vanilla-extract/css": "^1.16.1",
-    "lucide-react": "^0.468.0",
+    "@vanilla-extract/css": "^1.17.1",
+    "lucide-react": "^0.479.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "tinybase": "^5.4.2"
+    "tinybase": "^5.4.8"
   }
 }

package/src/components/Code/index.tsx

@@ -81,7 +81,7 @@ export const Code = ({
    */
   readonly className?: string;
 }) => {
-  const prism = globalThis.Prism;
+  const prism = (globalThis as any).Prism;
   return (
     <pre className={classNames(pre, className)}>
       <code

package/src/components/TasksProvider/index.tsx

@@ -120,8 +120,8 @@ const TaskRunner = ({
  *
  * - `taskId`: a required string to identify the task by Id.
  * - `arg`: an optional string that will be passed to the task when run.
- * - `storeId`: an optional string that will be used to look up a Store by Id
- *   in the current TinyBase Provider context and be passed to the task.
+ * - `storeId`: an optional string that will be used to look up a Store by Id in
+ *   the current TinyBase Provider context and be passed to the task.
  *
  * @example
  * ```tsx
@@ -163,6 +163,31 @@ const TaskRunner = ({
  * ```
  * This example shows the hook returning a function that will schedule a task to
  * be run by the provider. That task in turn will call another.
+ * @example
+ * ```tsx
+ * const TaskButton3 = () => {
+ *   const scheduleTask = useScheduleTask();
+ *   return (<Button
+ *     title="JSON"
+ *     onClick={() => scheduleTask('json', '', 'store1')}
+ *   />);
+ * };
+ * // ...
+ * <Provider storesById={{
+ *   store1: useCreateStore(() =>
+ *     createStore().setCell('pets', 'fido', 'species', 'dog')),
+ *   }}>
+ *   <TasksProvider tasks={{
+ *     json: (_arg: string, store: Store | undefined) =>
+ *       alert(store?.getJson()),
+ *   }}>
+ *     <TaskButton3 />
+ *   </TasksProvider>
+ * </Provider>
+ * ```
+ * This example shows the hook returning a function that will schedule a task to
+ * be run by the provider, using a Store from the current context, specified by
+ * Id.
  */
 export const useScheduleTask = () => useContext(Context);