tinywidgets 1.1.5 → 1.2.0

package/eslint.config.js

@@ -138,47 +138,6 @@ export default tsLint.config(
     },
   },
 
-  {
-    files: ['src/@types/**/*.js'],
-    settings: {jsdoc: {mode: 'typescript', contexts: ['any']}},
-    rules: {
-      'jsdoc/check-tag-names': [
-        2,
-        {definedTags: ['category', 'packageDocumentation']},
-      ],
-      'jsdoc/no-restricted-syntax': [
-        2,
-        {
-          contexts: [
-            {
-              comment:
-                // eslint-disable-next-line max-len
-                'JsdocBlock:not(:has(JsdocTag[tag=/category|packageDocumentation/]))',
-              message: 'Every non-module block requires a @category tag',
-            },
-            {
-              comment: 'JsdocBlock:not(:has(JsdocTag[tag=since]))',
-              message: 'Every block requires a @since tag',
-            },
-            {
-              comment:
-                'JsdocBlock:has(JsdocTag[tag=since] ~ JsdocTag[tag=since])',
-              message: 'Every block must have only one @since tag',
-            },
-          ],
-        },
-      ],
-      'jsdoc/require-jsdoc': 2,
-      'jsdoc/require-description': 2,
-      'jsdoc/require-description-complete-sentence': 2,
-      'jsdoc/require-returns-description': 2,
-      'jsdoc/no-blank-blocks': 2,
-      'jsdoc/require-param-type': 0,
-      'jsdoc/require-returns-type': 0,
-      'jsdoc/check-param-names': 0,
-    },
-  },
-
   {
     files: ['eslint.config.js'],
     extends: [tsLint.configs.disableTypeChecked],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tinywidgets",
-  "version": "1.1.5",
+  "version": "1.2.0",
   "author": "jamesgpearce",
   "repository": "github:tinyplex/tinywidgets",
   "license": "MIT",
@@ -19,28 +19,28 @@
     "prePublishPackage": "prettier --check . && eslint . && cspell --quiet . && tsc && cp ../README.md ./README.md"
   },
   "devDependencies": {
-    "@types/react": "^19.0.12",
-    "cspell": "^8.18.1",
-    "eslint": "^9.23.0",
-    "eslint-plugin-react": "^7.37.4",
+    "@eslint/js": "^9.25.1",
+    "@types/react": "^19.1.2",
+    "cspell": "^8.19.3",
+    "eslint": "^9.25.1",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^5.2.0",
+    "globals": "^16.0.0",
     "prettier": "^3.5.3",
     "prettier-plugin-organize-imports": "^4.1.0",
-    "typescript": "^5.8.2"
+    "typescript": "^5.8.3",
+    "typescript-eslint": "^8.31.0"
   },
   "exports": {
     ".": "./src/index.ts",
     "./css": "./src/index.css.ts"
   },
   "dependencies": {
-    "@eslint/js": "^9.23.0",
     "@vanilla-extract/css": "^1.17.1",
-    "eslint-plugin-import": "^2.31.0",
-    "globals": "^16.0.0",
-    "lucide-react": "^0.485.0",
+    "lucide-react": "^0.503.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
-    "tinybase": "^6.0.0",
-    "typescript-eslint": "^8.28.0"
+    "tinybase": "^6.0.4"
   }
-}
+}

package/src/components/App/index.css.ts

@@ -78,3 +78,24 @@ export const mainHasSideNav = style(
     paddingLeft: `calc(${dimensions.sideNavWidth} + ${dimensions.padding})`,
   }),
 );
+
+export const mainHasFooter = style({
+  paddingBottom: `calc(${dimensions.footerHeight} + ${dimensions.padding})`,
+});
+
+export const footer = style({
+  display: 'flex',
+  justifyContent: 'right',
+  alignItems: 'center',
+  gap: dimensions.padding,
+  padding: dimensions.padding,
+  position: 'fixed',
+  bottom: 0,
+  left: 0,
+  right: 0,
+  height: dimensions.footerHeight,
+  backgroundColor: colors.backgroundHaze,
+  borderTop: colors.border,
+  boxShadow: colors.shadow,
+  backdropFilter: 'blur(8px)',
+});

package/src/components/App/index.tsx

@@ -23,8 +23,10 @@ import {Button} from '../Button/index.tsx';
 import {
   app,
   appLayout,
+  footer,
   header,
   main,
+  mainHasFooter,
   mainHasSideNav,
   sideNav,
   sideNavButton,
@@ -83,6 +85,11 @@ export const App = (props: {
    * the application.
    */
   readonly main?: ComponentType | ReactNode;
+  /**
+   * An optional component, element, or string which renders the footer of
+   * the application.
+   */
+  readonly footer?: ComponentType | ReactNode;
   /**
    * An extra CSS class name for the component.
    */
@@ -104,6 +111,7 @@ const Layout = ({
   topNavRight: topNavRightComponentOrNode,
   sideNav: sideNavComponentOrNode,
   main: mainComponentOrNode,
+  footer: footerComponentOrNode,
   className,
 }: Parameters<typeof App>[0]) => {
   const sessionStoreIsReady = useSessionStoreIsReady();
@@ -124,8 +132,10 @@ const Layout = ({
     topNavRightComponentOrNode,
     sideNavComponentOrNode,
     mainComponentOrNode,
+    footerComponentOrNode,
   ].some((componentOrNode) => componentOrNode);
   const hasSideNav = sideNavComponentOrNode != null;
+  const hasFooter = footerComponentOrNode != null;
 
   return sessionStoreIsReady && routeStoreIsReady && localStoreIsReady ? (
     <div
@@ -169,9 +179,20 @@ const Layout = ({
               </nav>
             ) : null}
           </header>
-          <main className={classNames(main, hasSideNav && mainHasSideNav)}>
+          <main
+            className={classNames(
+              main,
+              hasSideNav && mainHasSideNav,
+              hasFooter && mainHasFooter,
+            )}
+          >
             {renderComponentOrNode(mainComponentOrNode)}
           </main>
+          {hasFooter ? (
+            <footer className={footer}>
+              {renderComponentOrNode(footerComponentOrNode)}
+            </footer>
+          ) : null}
         </>
       ) : null}
     </div>

package/src/components/Button/index.tsx

@@ -1,5 +1,5 @@
-import type {ComponentType, ReactNode, Ref} from 'react';
-import {forwardRef, useCallback} from 'react';
+import type {ComponentType, ReactNode} from 'react';
+import {useCallback} from 'react';
 import {classNames, renderComponentOrNode} from '../../common/functions.tsx';
 import {iconSize} from '../../css/dimensions.css.ts';
 import {
@@ -103,104 +103,101 @@ import {
  * 'current'.
  * @icon Lucide.RectangleHorizontal
  */
-export const Button = forwardRef(
-  (
-    {
-      icon: Icon,
-      title: titleComponentOrNode,
-      titleRight: titleRightComponentOrNode,
-      iconRight: IconRight,
-      onClick,
-      variant = 'default',
-      current,
-      href,
-      alt,
-      className,
-    }: {
-      /**
-       * An optional component which renders an icon for the button, and which
-       * must accept a className prop.
-       */
-      readonly icon?: ComponentType<{className?: string}>;
-      /**
-       * An optional component, element, or string which renders the title of
-       * the button.
-       */
-      readonly title?: ComponentType | ReactNode;
-      /**
-       * An optional component, element, or string which renders a second title
-       * on the right side of the button.
-       */
-      readonly titleRight?: ComponentType | ReactNode;
-      /**
-       * An optional component which renders a second icon for the button, and
-       * which must accept a className prop.
-       */
-      readonly iconRight?: ComponentType<{className?: string}>;
-      /**
-       * A handler called when the user clicks on the button.
-       */
-      readonly onClick?: () => void;
-      /**
-       * A variant of the button, one of:
-       * - `default`
-       * - `icon`
-       * - `accent`
-       * - `ghost`
-       * - `item`
-       */
-      readonly variant?: keyof typeof buttonVariants;
-      /**
-       * A flag that indicates that an `item` button is 'current' and therefore
-       * highlighted.
-       */
-      readonly current?: boolean;
-      /**
-       * A URL that can be used instead of an `onClick` to launch a new web
-       * page, much like a link.
-       */
-      readonly href?: string;
-      /**
-       * Alternative text shown when the user hovers over the button.
-       */
-      readonly alt?: string;
-      /**
-       * An extra CSS class name for the component.
-       */
-      readonly className?: string;
-    },
-    ref: Ref<HTMLButtonElement>,
-  ) => {
-    const hrefClick = useCallback(
-      () => (href ? open(href, '_blank', 'noreferrer') : null),
-      [href],
-    );
+export const Button = ({
+  icon: Icon,
+  title: titleComponentOrNode,
+  titleRight: titleRightComponentOrNode,
+  iconRight: IconRight,
+  onClick,
+  variant = 'default',
+  current,
+  href,
+  alt,
+  className,
+  ref,
+}: {
+  /**
+   * An optional component which renders an icon for the button, and which
+   * must accept a className prop.
+   */
+  readonly icon?: ComponentType<{className?: string}>;
+  /**
+   * An optional component, element, or string which renders the title of
+   * the button.
+   */
+  readonly title?: ComponentType | ReactNode;
+  /**
+   * An optional component, element, or string which renders a second title
+   * on the right side of the button.
+   */
+  readonly titleRight?: ComponentType | ReactNode;
+  /**
+   * An optional component which renders a second icon for the button, and
+   * which must accept a className prop.
+   */
+  readonly iconRight?: ComponentType<{className?: string}>;
+  /**
+   * A handler called when the user clicks on the button.
+   */
+  readonly onClick?: () => void;
+  /**
+   * A variant of the button, one of:
+   * - `default`
+   * - `icon`
+   * - `accent`
+   * - `ghost`
+   * - `item`
+   */
+  readonly variant?: keyof typeof buttonVariants;
+  /**
+   * A flag that indicates that an `item` button is 'current' and therefore
+   * highlighted.
+   */
+  readonly current?: boolean;
+  /**
+   * A URL that can be used instead of an `onClick` to launch a new web
+   * page, much like a link.
+   */
+  readonly href?: string;
+  /**
+   * Alternative text shown when the user hovers over the button.
+   */
+  readonly alt?: string;
+  /**
+   * An extra CSS class name for the component.
+   */
+  readonly className?: string;
+  ref?: React.RefObject<HTMLButtonElement>;
+}) => {
+  const hrefClick = useCallback(
+    () => (href ? open(href, '_blank', 'noreferrer') : null),
+    [href],
+  );
 
-    return (
-      <button
-        className={classNames(
-          button,
-          buttonVariants[variant],
-          current && currentStyle,
-          className,
-        )}
-        onClick={onClick ?? hrefClick}
-        title={alt}
-        ref={ref}
-      >
-        {Icon ? <Icon className={iconSize} /> : null}
-        {titleComponentOrNode ? (
-          <span className={titleStyle}>
-            {renderComponentOrNode(titleComponentOrNode)}
-          </span>
-        ) : null}
-        {titleRightComponentOrNode ? (
-          <span className={titleStyleRight}>
-            {renderComponentOrNode(titleRightComponentOrNode)}
-          </span>
-        ) : null}
-        {IconRight ? <IconRight className={iconSize} /> : null}
-      </button>
-    );
-  },
-);
+  return (
+    <button
+      className={classNames(
+        button,
+        buttonVariants[variant],
+        current && currentStyle,
+        className,
+      )}
+      onClick={onClick ?? hrefClick}
+      title={alt}
+      ref={ref}
+    >
+      {Icon ? <Icon className={iconSize} /> : null}
+      {titleComponentOrNode ? (
+        <span className={titleStyle}>
+          {renderComponentOrNode(titleComponentOrNode)}
+        </span>
+      ) : null}
+      {titleRightComponentOrNode ? (
+        <span className={titleStyleRight}>
+          {renderComponentOrNode(titleRightComponentOrNode)}
+        </span>
+      ) : null}
+      {IconRight ? <IconRight className={iconSize} /> : null}
+    </button>
+  );
+};

package/src/css/dimensions.css.ts

@@ -8,6 +8,7 @@ const classAndObject = createTheme({
   radius: fallbackVar('var(--tinyWidgets-radius)', '0.5rem'),
   sideNavWidth: fallbackVar('var(--tinyWidgets-sideNavWidth)', '20rem'),
   topNavHeight: fallbackVar('var(--tinyWidgets-topNavHeight)', '4rem'),
+  footerHeight: fallbackVar('var(--tinyWidgets-footerHeight)', '2rem'),
 });
 export const dimensionsClass = classAndObject[0];
 
@@ -24,6 +25,7 @@ export const dimensionsClass = classAndObject[0];
  * - `radius`
  * - `sideNavWidth`
  * - `topNavHeight`
+ * - `footerHeight`
  *
  * You can use these variables directly in React components that take style
  * attributes, like this:

package/src/index.ts

@@ -10,13 +10,7 @@ export {Metric} from './components/Metric/index.tsx';
 export {Row} from './components/Row/index.tsx';
 export {Summary} from './components/Summary/index.tsx';
 export {Tag} from './components/Tag/index.tsx';
-export {
-  TasksProvider,
-  useScheduleTask,
-} from './components/TasksProvider/index.tsx';
 
 export {classNames} from './common/functions.tsx';
 export {useDark} from './stores/LocalStore.tsx';
 export {useRoute, useSetRouteCallback} from './stores/RouteStore.tsx';
-
-export type {ScheduleTask} from './components/TasksProvider/index.tsx';

package/.prettierignore

@@ -1 +0,0 @@
-package.json