tinywidgets 0.0.4 → 0.0.6

package/index.ts

@@ -1,11 +1,12 @@
-export {Avatar} from './src/Avatar/index.tsx';
-export {Axis} from './src/Axis/index.tsx';
-export {Button} from './src/Button/index.tsx';
-export {Card} from './src/Card/index.tsx';
-export {Collapsible} from './src/Collapsible/index.tsx';
-export {Detail} from './src/Detail/index.tsx';
-export {Hr} from './src/Hr/index.tsx';
-export {Metric} from './src/Metric/index.tsx';
-export {Summary} from './src/Summary/index.tsx';
-export {Tag} from './src/Tag/index.tsx';
-export {Ui} from './src/Ui/index.tsx';
+export { App } from './src/App/index.tsx';
+export { Avatar } from './src/Avatar/index.tsx';
+export { Axis } from './src/Axis/index.tsx';
+export { Button } from './src/Button/index.tsx';
+export { Card } from './src/Card/index.tsx';
+export { Collapsible } from './src/Collapsible/index.tsx';
+export { Detail } from './src/Detail/index.tsx';
+export { Hr } from './src/Hr/index.tsx';
+export { Metric } from './src/Metric/index.tsx';
+export { Summary } from './src/Summary/index.tsx';
+export { Tag } from './src/Tag/index.tsx';
+export { Ui } from './src/Ui/index.tsx';

package/package.json

@@ -1,24 +1,24 @@
 {
   "name": "tinywidgets",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "author": "jamesgpearce",
   "repository": "github:tinyplex/tinywidgets",
   "module": "index.ts",
   "devDependencies": {
-    "@types/react": "^18.3.3",
+    "@types/react": "^18.3.5",
     "@types/react-dom": "^18.3.0",
-    "@typescript-eslint/eslint-plugin": "^7.16.1",
-    "@typescript-eslint/parser": "^7.16.1",
+    "@typescript-eslint/eslint-plugin": "^8.4.0",
+    "@typescript-eslint/parser": "^8.4.0",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-react": "^7.34.4",
+    "eslint-plugin-react": "^7.35.2",
     "eslint-plugin-react-hooks": "^4.6.2",
     "prettier": "^3.3.3",
-    "typescript": "^5.5.3",
+    "typescript": "^5.5.4",
     "@vanilla-extract/css": "^1.15.5",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "tinybase": "^5.1.0"
+    "tinybase": "^5.3.0-beta.2"
   },
   "exports": {
     ".": "./index.ts",
@@ -28,6 +28,6 @@
   "description": "reserved",
   "license": "MIT",
   "dependencies": {
-    "lucide-react": "^0.438.0"
+    "lucide-react": "^0.439.0"
   }
 }

package/src/App/index.tsx

@@ -0,0 +1,18 @@
+/** @jsx createElement */
+
+import type { ReactNode } from 'react';
+import { Provider } from 'tinybase/ui-react';
+import { createElement } from '../index.ts';
+import { LocalStore } from '../stores/LocalStore.tsx';
+import { SessionStore } from '../stores/SessionStore.tsx';
+
+export const App = ({ui, stores}: {ui: ReactNode; stores?: ReactNode}) => {
+  return (
+    <Provider>
+      {ui}
+      {stores}
+      <SessionStore />
+      <LocalStore />
+    </Provider>
+  );
+};

package/src/Collapsible/index.tsx

@@ -13,7 +13,7 @@ import {
 import {
   useCollapsibleOpen,
   useSetCollapsibleOpen,
-} from '../Ui/SessionStore.tsx';
+} from '../stores/SessionStore.tsx';
 import {
   button,
   buttonOpen,
@@ -27,6 +27,7 @@ export const Collapsible = ({
   icon: Icon,
   label = <div />,
   labelRight = <div />,
+  startOpen = false,
   className,
   children,
 }: {
@@ -34,19 +35,20 @@ export const Collapsible = ({
   icon?: ComponentType<{className?: string}>;
   label?: ReactNode;
   labelRight?: ReactNode;
+  startOpen?: boolean;
   className?: string;
   children: ReactNode;
 }) => {
   // State is in session Store if id is present, otherwise here in component.
-  const storedIsOpen = useCollapsibleOpen(id) ?? false;
+  const storedIsOpen = useCollapsibleOpen(id) ?? startOpen;
   const setStoredIsOpen = useSetCollapsibleOpen(id);
-  const [stateIsOpen, setStateIsOpen] = useState(false);
+  const [stateIsOpen, setStateIsOpen] = useState(startOpen);
 
   const isOpen = id ? storedIsOpen : stateIsOpen;
   const setIsOpen = id ? setStoredIsOpen : setStateIsOpen;
 
   const [render, setRender] = useState(isOpen);
-  const timer = useRef<NodeJS.Timeout>();
+  const timer = useRef<Timer>();
 
   const toggle = useCallback(() => {
     setIsOpen(!isOpen);

package/src/Ui/{Layout/Header → Header}/DarkButton/index.tsx

@@ -1,12 +1,12 @@
 /** @jsx createElement */
 
-import {Moon, Sun, SunMoon} from 'lucide-react';
-import {Button} from '../../../../Button/index.tsx';
-import {createElement} from '../../../../index.ts';
+import { Moon, Sun, SunMoon } from 'lucide-react';
+import { Button } from '../../../Button/index.tsx';
+import { createElement } from '../../../index.ts';
 import {
   useDarkChoice,
   useToggleDarkChoiceCallback,
-} from '../../../LocalStore.tsx';
+} from '../../../stores/LocalStore.tsx';
 
 const icons = [Sun, Moon, SunMoon];
 

package/src/Ui/{Layout/Header → Header}/SideNav/index.css.ts

@@ -1,6 +1,6 @@
-import {style} from '@vanilla-extract/css';
-import {dimensions, paddingLike, theme} from '../../../../index.css.ts';
-import {large} from '../../../../index.ts';
+import { style } from '@vanilla-extract/css';
+import { dimensions, paddingLike, theme } from '../../../index.css.ts';
+import { large } from '../../../index.ts';
 
 export const sideNav = style([
   paddingLike,

package/src/Ui/{Layout/Header → Header}/SideNav/index.tsx

@@ -1,9 +1,9 @@
 /** @jsx createElement */
 
-import {type ReactNode} from 'react';
-import {classNames, createElement} from '../../../../index.ts';
-import {useSideNavOpen} from '../../../SessionStore.tsx';
-import {open, sideNav} from './index.css.ts';
+import { type ReactNode } from 'react';
+import { classNames, createElement } from '../../../index.ts';
+import { useSideNavOpen } from '../../../stores/SessionStore.tsx';
+import { open, sideNav } from './index.css.ts';
 
 export const SideNav = ({sideNav: sideNavComponents}: {sideNav: ReactNode}) => {
   return (

package/src/Ui/Header/SideNavButton/index.css.ts

@@ -0,0 +1,4 @@
+import { style } from '@vanilla-extract/css';
+import { large } from '../../../index.ts';
+
+export const sideNavButton = style(large({display: 'none'}));

package/src/Ui/Header/SideNavButton/index.tsx

@@ -0,0 +1,19 @@
+/** @jsx createElement */
+
+import { Menu, X } from 'lucide-react';
+import { Button } from '../../../Button/index.tsx';
+import { createElement } from '../../../index.ts';
+import {
+  useSideNavOpen,
+  useToggleSideNavOpen,
+} from '../../../stores/SessionStore.tsx';
+import { sideNavButton } from './index.css.ts';
+
+export const SideNavButton = () => (
+  <Button
+    variant="icon"
+    onClick={useToggleSideNavOpen()}
+    icon={useSideNavOpen() ? X : Menu}
+    className={sideNavButton}
+  />
+);

package/src/Ui/{Layout/Header → Header}/Title/index.css.ts

@@ -1,6 +1,6 @@
-import {style} from '@vanilla-extract/css';
-import {dimensions} from '../../../../index.css';
-import {large} from '../../../../index.ts';
+import { style } from '@vanilla-extract/css';
+import { dimensions } from '../../../index.css.ts';
+import { large } from '../../../index.ts';
 
 export const title = style({
   display: 'flex',

package/src/Ui/{Layout/Header → Header}/Title/index.tsx

@@ -1,8 +1,8 @@
 /** @jsx createElement */
 
-import {type ReactNode} from 'react';
-import {createElement} from '../../../../index.ts';
-import {title} from './index.css.ts';
+import { type ReactNode } from 'react';
+import { createElement } from '../../../index.ts';
+import { title } from './index.css.ts';
 
 export const Title = ({title: titleComponents}: {title: ReactNode}) => {
   return <nav className={title}>{titleComponents}</nav>;

package/src/Ui/Header/TopNav/index.css.ts

@@ -0,0 +1,9 @@
+import { style } from '@vanilla-extract/css';
+import { axisLike } from '../../../index.css';
+
+export const topNav = style([
+  {
+    ...axisLike,
+    flex: 1,
+  },
+]);

package/src/Ui/{Layout/Header → Header}/TopNav/index.tsx

@@ -1,8 +1,8 @@
 /** @jsx createElement */
 
-import type {ReactNode} from 'react';
-import {createElement} from '../../../../index.ts';
-import {topNav} from './index.css.ts';
+import type { ReactNode } from 'react';
+import { createElement } from '../../../index.ts';
+import { topNav } from './index.css.ts';
 
 export const TopNav = ({
   topNavLeft = <div />,

package/src/Ui/{Layout/Header → Header}/index.css.ts

@@ -1,5 +1,5 @@
-import {style} from '@vanilla-extract/css';
-import {axisLike, dimensions, paddingLike, theme} from '../../../index.css';
+import { style } from '@vanilla-extract/css';
+import { axisLike, dimensions, paddingLike, theme } from '../../index.css';
 
 export const header = style([
   paddingLike,

package/src/Ui/{Layout/Header → Header}/index.tsx

@@ -1,13 +1,13 @@
 /** @jsx createElement */
 
-import type {ReactNode} from 'react';
-import {createElement} from '../../../index.ts';
-import {DarkButton} from './DarkButton/index.tsx';
-import {header} from './index.css.ts';
-import {SideNav} from './SideNav/index.tsx';
-import {SideNavButton} from './SideNavButton/index.tsx';
-import {Title} from './Title/index.tsx';
-import {TopNav} from './TopNav/index.tsx';
+import type { ReactNode } from 'react';
+import { createElement } from '../../index.ts';
+import { DarkButton } from './DarkButton/index.tsx';
+import { header } from './index.css.ts';
+import { SideNav } from './SideNav/index.tsx';
+import { SideNavButton } from './SideNavButton/index.tsx';
+import { Title } from './Title/index.tsx';
+import { TopNav } from './TopNav/index.tsx';
 
 export const Header = ({
   title,

package/src/Ui/{Layout/Main → Main}/Article/index.css.ts

@@ -1,5 +1,5 @@
-import {style} from '@vanilla-extract/css';
-import {dimensions, paddingLike} from '../../../../index.css';
+import { style } from '@vanilla-extract/css';
+import { dimensions, paddingLike } from '../../../index.css';
 
 export const article = style([
   paddingLike,

package/src/Ui/{Layout/Main → Main}/Article/index.tsx

@@ -1,8 +1,8 @@
 /** @jsx createElement */
 
-import type {ReactNode} from 'react';
-import {createElement} from '../../../../index.ts';
-import {article} from './index.css.ts';
+import type { ReactNode } from 'react';
+import { createElement } from '../../../index.ts';
+import { article } from './index.css.ts';
 
 export const Article = ({article: articleComponents}: {article: ReactNode}) => {
   return <article className={article}>{articleComponents}</article>;

package/src/Ui/{Layout/Main → Main}/Footer/index.css.ts

@@ -1,5 +1,5 @@
-import {style} from '@vanilla-extract/css';
-import {axisLike, dimensions, paddingLike, theme} from '../../../../index.css';
+import { style } from '@vanilla-extract/css';
+import { axisLike, dimensions, paddingLike, theme } from '../../../index.css';
 
 export const footer = style([
   {

package/src/Ui/{Layout/Main → Main}/Footer/index.tsx

@@ -1,8 +1,8 @@
 /** @jsx createElement */
 
-import type {ReactNode} from 'react';
-import {createElement} from '../../../../index.ts';
-import {footer} from './index.css.ts';
+import type { ReactNode } from 'react';
+import { createElement } from '../../../index.ts';
+import { footer } from './index.css.ts';
 
 export const Footer = ({footer: footerComponents}: {footer: ReactNode}) => {
   return <footer className={footer}>{footerComponents}</footer>;

package/src/Ui/{Layout/Main → Main}/index.css.ts

@@ -1,6 +1,6 @@
-import {style} from '@vanilla-extract/css';
-import {dimensions, theme} from '../../../index.css';
-import {large} from '../../../index.ts';
+import { style } from '@vanilla-extract/css';
+import { dimensions, theme } from '../../index.css.ts';
+import { large } from '../../index.ts';
 
 export const main = style({
   display: 'flex',

package/src/Ui/{Layout/Main → Main}/index.tsx

@@ -1,10 +1,10 @@
 /** @jsx createElement */
 
-import type {ReactNode} from 'react';
-import {classNames, createElement} from '../../../index.ts';
-import {Article} from './Article/index.tsx';
-import {Footer} from './Footer/index.tsx';
-import {main, mainHasSideNav} from './index.css.ts';
+import type { ReactNode } from 'react';
+import { classNames, createElement } from '../../index.ts';
+import { Article } from './Article/index.tsx';
+import { Footer } from './Footer/index.tsx';
+import { main, mainHasSideNav } from './index.css.ts';
 
 export const Main = ({
   article,

package/src/Ui/index.css.ts

@@ -0,0 +1,9 @@
+import { style } from '@vanilla-extract/css';
+import { theme } from '../index.css.ts';
+
+export const ui = style({
+  display: 'flex',
+  height: '100vh',
+  width: '100vw',
+  color: theme.foreground,
+});

package/src/Ui/index.tsx

@@ -1,13 +1,21 @@
 /** @jsx createElement */
 
-import type {ReactNode} from 'react';
-import {Provider} from 'tinybase/ui-react';
-import {createElement} from '../index.ts';
-import {Layout} from './Layout/index.tsx';
-import {LocalStore} from './LocalStore.tsx';
-import {SessionStore} from './SessionStore.tsx';
+import type { ReactNode } from 'react';
+import { themeDark, themeLight } from '../index.css.ts';
+import { classNames, createElement } from '../index.ts';
+import { useDarkChoice, useDarkPreference } from '../stores/LocalStore.tsx';
+import { Header } from './Header/index.tsx';
+import { ui } from './index.css.ts';
+import { Main } from './Main/index.tsx';
 
-export const Ui = (props: {
+export const Ui = ({
+  title,
+  topNavLeft,
+  topNavRight,
+  sideNav,
+  article,
+  footer,
+}: {
   title: ReactNode;
   topNavLeft?: ReactNode;
   topNavRight?: ReactNode;
@@ -15,11 +23,28 @@ export const Ui = (props: {
   article?: ReactNode;
   footer?: ReactNode;
 }) => {
+  const darkPreference = useDarkPreference();
+  const darkChoice = useDarkChoice();
   return (
-    <Provider>
-      <Layout {...props} />
-      <SessionStore />
-      <LocalStore />
-    </Provider>
+    <div
+      className={classNames(
+        ui,
+        darkChoice == 1 || (darkChoice == 2 && darkPreference)
+          ? themeDark
+          : themeLight,
+      )}
+    >
+      <Header
+        title={title}
+        topNavLeft={topNavLeft}
+        topNavRight={topNavRight}
+        sideNav={sideNav}
+      />
+      <Main
+        article={article}
+        footer={footer}
+        hasSideNav={sideNav ? true : false}
+      />
+    </div>
   );
 };

package/src/{Ui → stores}/LocalStore.tsx

@@ -11,7 +11,7 @@ import {useEffect} from '../';
 
 const PREFERS_DARK = matchMedia?.('(prefers-color-scheme: dark)');
 
-const LOCAL_STORE = 'uiLocal';
+const LOCAL_STORE = 'tinywidgets/Local';
 const DARK_PREFERENCE_VALUE = 'darkPreference';
 const DARK_CHOICE_VALUE = 'darkChoice';
 

package/src/{Ui → stores}/SessionStore.tsx

@@ -10,7 +10,7 @@ import {
   useValue,
 } from 'tinybase/ui-react';
 
-const SESSION_STORE = 'uiSession';
+const SESSION_STORE = 'tinywidgets/Session';
 
 const COLLAPSIBLE_TABLE = 'collapsible';
 const COLLAPSIBLE_OPEN_CELL = 'open';

package/src/Ui/Layout/Header/SideNavButton/index.css.ts

@@ -1,4 +0,0 @@
-import {style} from '@vanilla-extract/css';
-import {large} from '../../../../index.ts';
-
-export const sideNavButton = style(large({display: 'none'}));

package/src/Ui/Layout/Header/SideNavButton/index.tsx

@@ -1,16 +0,0 @@
-/** @jsx createElement */
-
-import {Menu, X} from 'lucide-react';
-import {Button} from '../../../../Button/index.tsx';
-import {createElement} from '../../../../index.ts';
-import {useSideNavOpen, useToggleSideNavOpen} from '../../../SessionStore.tsx';
-import {sideNavButton} from './index.css';
-
-export const SideNavButton = () => (
-  <Button
-    variant="icon"
-    onClick={useToggleSideNavOpen()}
-    icon={useSideNavOpen() ? X : Menu}
-    className={sideNavButton}
-  />
-);

package/src/Ui/Layout/Header/TopNav/index.css.ts

@@ -1,9 +0,0 @@
-import {style} from '@vanilla-extract/css';
-import {axisLike} from '../../../../index.css';
-
-export const topNav = style([
-  {
-    ...axisLike,
-    flex: 1,
-  },
-]);

package/src/Ui/Layout/index.css.ts

@@ -1,9 +0,0 @@
-import {style} from '@vanilla-extract/css';
-import {theme} from '../../index.css.ts';
-
-export const layout = style({
-  display: 'flex',
-  height: '100vh',
-  width: '100vw',
-  color: theme.foreground,
-});

package/src/Ui/Layout/index.tsx

@@ -1,50 +0,0 @@
-/** @jsx createElement */
-
-import type {ReactNode} from 'react';
-import {themeDark, themeLight} from '../../index.css.ts';
-import {classNames, createElement} from '../../index.ts';
-import {useDarkChoice, useDarkPreference} from '../LocalStore.tsx';
-import {Header} from './Header/index.tsx';
-import {layout} from './index.css.ts';
-import {Main} from './Main/index.tsx';
-
-export const Layout = ({
-  title,
-  topNavLeft,
-  topNavRight,
-  sideNav,
-  article,
-  footer,
-}: {
-  title: ReactNode;
-  topNavLeft?: ReactNode;
-  topNavRight?: ReactNode;
-  sideNav?: ReactNode;
-  article?: ReactNode;
-  footer?: ReactNode;
-}) => {
-  const darkPreference = useDarkPreference();
-  const darkChoice = useDarkChoice();
-  return (
-    <div
-      className={classNames(
-        layout,
-        darkChoice == 1 || (darkChoice == 2 && darkPreference)
-          ? themeDark
-          : themeLight,
-      )}
-    >
-      <Header
-        title={title}
-        topNavLeft={topNavLeft}
-        topNavRight={topNavRight}
-        sideNav={sideNav}
-      />
-      <Main
-        article={article}
-        footer={footer}
-        hasSideNav={sideNav ? true : false}
-      />
-    </div>
-  );
-};