tinywidgets 0.0.0 → 0.0.2

package/src/Summary/index.tsx

@@ -0,0 +1,34 @@
+/** @jsx createElement */
+
+import React from 'react';
+import {classNames} from '../';
+import {Avatar} from '../Avatar';
+import {summary, summaryContent, summaryImage} from './index.css';
+
+const {createElement} = React;
+
+export const Summary = ({
+  icon: Icon,
+  src,
+  label,
+  children,
+  className,
+}: {
+  icon?: React.ComponentType<{className?: string}>;
+  src?: string;
+  label: React.ReactNode;
+  children: React.ReactNode;
+  className?: string;
+}) => (
+  <div className={classNames(summary, className)}>
+    {src ? (
+      <Avatar src={src} className={summaryImage} />
+    ) : Icon ? (
+      <Icon className={summaryImage} />
+    ) : null}
+    <div className={summaryContent}>
+      <h2>{label}</h2>
+      {children}
+    </div>
+  </div>
+);

package/src/Tag/index.css.ts

@@ -0,0 +1,27 @@
+import {style, styleVariants} from '@vanilla-extract/css';
+import {theme} from '../index.css';
+
+export const tag = style({
+  fontSize: '0.625rem',
+  lineHeight: '0.625rem',
+  padding: '0.1rem 0.25rem',
+  borderRadius: '0.25rem',
+  gap: '0.25rem',
+  flexShrink: 0,
+});
+
+export const tagVariant = styleVariants({
+  default: {
+    backgroundColor: theme.backgroundHover,
+    color: theme.foreground2,
+  },
+  accent: {
+    backgroundColor: theme.accent,
+    color: theme.accentContrast,
+  },
+});
+
+export const tagIcon = style({
+  width: '0.75rem',
+  height: '0.75rem',
+});

package/src/Tag/index.tsx

@@ -0,0 +1,28 @@
+/** @jsx createElement */
+
+import React from 'react';
+import {classNames} from '../';
+import {Axis} from '../Axis';
+import {tag, tagIcon, tagVariant} from './index.css';
+
+const {createElement} = React;
+
+export const Tag = ({
+  icon: Icon,
+  label,
+  title,
+  variant = 'default',
+}: {
+  icon?: React.ComponentType<{className?: string}>;
+  label?: React.ReactNode;
+  title?: string;
+  variant?: keyof typeof tagVariant;
+}) => {
+  const icon = Icon ? <Icon className={tagIcon} /> : null;
+  return (
+    <Axis className={classNames(tag, tagVariant[variant])} title={title}>
+      {icon}
+      {label}
+    </Axis>
+  );
+};

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

@@ -0,0 +1,20 @@
+/** @jsx createElement */
+
+import React from 'react';
+import {Moon, Sun, SunMoon} from 'lucide-react';
+import {Button} from '../../../../Button/index.tsx';
+import {
+  useDarkChoice,
+  useToggleDarkChoiceCallback,
+} from '../../../LocalStore.tsx';
+
+const {createElement} = React;
+const icons = [Sun, Moon, SunMoon];
+
+export const DarkButton = () => (
+  <Button
+    variant="icon"
+    onClick={useToggleDarkChoiceCallback()}
+    icon={icons[useDarkChoice()]}
+  />
+);

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

@@ -0,0 +1,23 @@
+import {style} from '@vanilla-extract/css';
+import {dimensions, paddingLike, theme} from '../../../../index.css.ts';
+import {large} from '../../../../index.ts';
+
+export const sideNav = style([
+  paddingLike,
+  {
+    position: 'fixed',
+    backgroundColor: theme.background2,
+    overflow: 'auto',
+    borderRight: `1px solid ${theme.border}`,
+    width: dimensions.sideNavWidth,
+    bottom: 0,
+    left: '-' + dimensions.sideNavWidth,
+    top: dimensions.topNavHeight,
+    height: `calc(100vh - ${dimensions.topNavHeight})`,
+    overscrollBehavior: 'contain',
+    transition: 'left .2s ease-in-out',
+  },
+  large({left: 0}),
+]);
+
+export const open = style({left: 0});

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

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

package/src/Ui/Layout/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/Layout/Header/SideNavButton/index.tsx

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

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

@@ -0,0 +1,10 @@
+import {style} from '@vanilla-extract/css';
+import {dimensions} from '../../../../index.css';
+import {large} from '../../../../index.ts';
+
+export const title = style({
+  display: 'flex',
+  alignItems: 'center',
+  gap: dimensions.padding,
+  ...large({width: dimensions.titleWidth}),
+});

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

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

package/src/Ui/Layout/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/TopNav/index.tsx

@@ -0,0 +1,19 @@
+/** @jsx createElement */
+
+import React, {type ReactNode} from 'react';
+import {topNav} from './index.css.ts';
+
+const {createElement} = React;
+
+export const TopNav = ({
+  topNavLeft = <div />,
+  topNavRight = <div />,
+}: {
+  topNavLeft?: ReactNode;
+  topNavRight?: ReactNode;
+}) => (
+  <nav className={topNav}>
+    {topNavLeft}
+    {topNavRight}
+  </nav>
+);

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

@@ -0,0 +1,18 @@
+import {style} from '@vanilla-extract/css';
+import {axisLike, dimensions, paddingLike, theme} from '../../../index.css';
+
+export const header = style([
+  paddingLike,
+  axisLike,
+  {
+    position: 'fixed',
+    boxShadow: theme.shadow,
+    backdropFilter: 'blur(8px)',
+    backgroundColor: theme.backgroundHaze,
+    left: 0,
+    right: 0,
+    height: dimensions.topNavHeight,
+    borderBottom: `1px solid ${theme.border}`,
+    zIndex: 2,
+  },
+]);

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

@@ -0,0 +1,33 @@
+/** @jsx createElement */
+
+import React, {type ReactNode} from 'react';
+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';
+
+const {createElement} = React;
+
+export const Header = ({
+  title,
+  topNavLeft,
+  topNavRight,
+  sideNav,
+}: {
+  title: ReactNode;
+  topNavLeft?: ReactNode;
+  topNavRight?: ReactNode;
+  sideNav?: ReactNode;
+}) => {
+  return (
+    <header className={header}>
+      {sideNav ? <SideNavButton /> : null}
+      <Title title={title} />
+      <TopNav topNavLeft={topNavLeft} topNavRight={topNavRight} />
+      <DarkButton />
+      {sideNav ? <SideNav sideNav={sideNav} /> : null}
+    </header>
+  );
+};

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

@@ -0,0 +1,13 @@
+import {style} from '@vanilla-extract/css';
+import {dimensions, paddingLike} from '../../../../index.css';
+
+export const article = style([
+  paddingLike,
+  {
+    paddingTop: dimensions.padding,
+    flex: 1,
+    width: '100%',
+    // maxWidth: dimensions.articleWidth,
+    margin: '0 auto',
+  },
+]);

package/src/Ui/Layout/Main/Article/index.tsx

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

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

@@ -0,0 +1,12 @@
+import {style} from '@vanilla-extract/css';
+import {axisLike, dimensions, paddingLike, theme} from '../../../../index.css';
+
+export const footer = style([
+  {
+    ...axisLike,
+    ...paddingLike,
+    background: theme.background,
+    height: dimensions.footerHeight,
+    borderTop: `1px solid ${theme.border}`,
+  },
+]);

package/src/Ui/Layout/Main/Footer/index.tsx

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

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

@@ -0,0 +1,16 @@
+import {style} from '@vanilla-extract/css';
+import {dimensions, theme} from '../../../index.css';
+import {large} from '../../../index.ts';
+
+export const main = style({
+  display: 'flex',
+  flex: 1,
+  flexDirection: 'column',
+  backgroundColor: theme.background,
+  overflow: 'auto',
+  paddingTop: dimensions.topNavHeight,
+});
+
+export const mainHasSideNav = style(
+  large({paddingLeft: dimensions.sideNavWidth}),
+);

package/src/Ui/Layout/Main/index.tsx

@@ -0,0 +1,26 @@
+/** @jsx createElement */
+
+import React, {type ReactNode} from 'react';
+import {classNames} from '../../../index.ts';
+import {Article} from './Article/index.tsx';
+import {Footer} from './Footer/index.tsx';
+import {main, mainHasSideNav} from './index.css.ts';
+
+const {createElement} = React;
+
+export const Main = ({
+  article,
+  footer,
+  hasSideNav,
+}: {
+  article?: ReactNode;
+  footer?: ReactNode;
+  hasSideNav: boolean;
+}) => {
+  return (
+    <main className={classNames(main, hasSideNav && mainHasSideNav)}>
+      {article ? <Article article={article} /> : null}
+      {footer ? <Footer footer={footer} /> : null}
+    </main>
+  );
+};

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

@@ -0,0 +1,9 @@
+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

@@ -0,0 +1,52 @@
+/** @jsx createElement */
+
+import React, {type ReactNode} from 'react';
+import {themeDark, themeLight} from '../../index.css.ts';
+import {classNames} 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';
+
+const {createElement} = React;
+
+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>
+  );
+};

package/src/Ui/LocalStore.tsx

@@ -0,0 +1,55 @@
+/** @jsx createElement */
+import React from 'react';
+import {createStore} from 'tinybase';
+import {createLocalPersister} from 'tinybase/persisters/persister-browser';
+import {
+  useCreatePersister,
+  useCreateStore,
+  useProvideStore,
+  useSetValueCallback,
+  useValue,
+} from 'tinybase/ui-react';
+
+const {useEffect} = React;
+
+const PREFERS_DARK = matchMedia?.('(prefers-color-scheme: dark)');
+
+const LOCAL_STORE = 'uiLocal';
+const DARK_PREFERENCE_VALUE = 'darkPreference';
+const DARK_CHOICE_VALUE = 'darkChoice';
+
+export const useDarkPreference = () =>
+  useValue(DARK_PREFERENCE_VALUE, LOCAL_STORE) as boolean;
+
+export const useDarkChoice = () =>
+  (useValue(DARK_CHOICE_VALUE, LOCAL_STORE) ?? 2) as 0 | 1 | 2;
+export const useToggleDarkChoiceCallback = () =>
+  useSetValueCallback(
+    DARK_CHOICE_VALUE,
+    () => (value) => (((value ?? 2) as number) + 1) % 3,
+    [],
+    LOCAL_STORE,
+  );
+
+export const LocalStore = () => {
+  const localStore = useCreateStore(createStore);
+  useCreatePersister(
+    localStore,
+    (localStore) => createLocalPersister(localStore, LOCAL_STORE),
+    [],
+    async (persister) => {
+      await persister.startAutoLoad();
+      await persister.startAutoSave();
+    },
+  );
+  useEffect(() => {
+    const preferenceListener = () =>
+      localStore.setValue(DARK_PREFERENCE_VALUE, PREFERS_DARK.matches);
+    PREFERS_DARK.addEventListener('change', preferenceListener);
+    preferenceListener();
+    return () => PREFERS_DARK.removeEventListener('change', preferenceListener);
+  }, [localStore]);
+
+  useProvideStore(LOCAL_STORE, localStore);
+  return null;
+};

package/src/Ui/SessionStore.tsx

@@ -0,0 +1,60 @@
+import {createStore, type Id} from 'tinybase';
+import {createSessionPersister} from 'tinybase/persisters/persister-browser';
+import {
+  useCell,
+  useCreatePersister,
+  useCreateStore,
+  useProvideStore,
+  useSetCellCallback,
+  useSetValueCallback,
+  useValue,
+} from 'tinybase/ui-react';
+
+const SESSION_STORE = 'uiSession';
+
+const COLLAPSIBLE_TABLE = 'collapsible';
+const COLLAPSIBLE_OPEN_CELL = 'open';
+
+const SIDE_NAV_OPEN_VALUE = 'sideNavOpen';
+
+export const useCollapsibleOpen = (collapsibleId: Id) =>
+  useCell(
+    COLLAPSIBLE_TABLE,
+    collapsibleId,
+    COLLAPSIBLE_OPEN_CELL,
+    SESSION_STORE,
+  ) as any;
+export const useSetCollapsibleOpen = (collapsibleId: Id) =>
+  useSetCellCallback(
+    COLLAPSIBLE_TABLE,
+    collapsibleId,
+    COLLAPSIBLE_OPEN_CELL,
+    (open: boolean) => open,
+    [collapsibleId],
+    SESSION_STORE,
+  );
+
+export const useSideNavOpen = () =>
+  useValue(SIDE_NAV_OPEN_VALUE, SESSION_STORE) as any;
+export const useToggleSideNavOpen = () =>
+  useSetValueCallback(
+    SIDE_NAV_OPEN_VALUE,
+    () => (value) => !value,
+    [],
+    SESSION_STORE,
+  );
+
+export const SessionStore = () => {
+  const sessionStore = useCreateStore(createStore);
+  useCreatePersister(
+    sessionStore,
+    (sessionStore) => createSessionPersister(sessionStore, SESSION_STORE),
+    [],
+    async (persister) => {
+      await persister.startAutoLoad();
+      await persister.startAutoSave();
+    },
+  );
+  useProvideStore(SESSION_STORE, sessionStore);
+  return null;
+};

package/src/Ui/index.tsx

@@ -0,0 +1,26 @@
+/** @jsx createElement */
+
+import React, {type ReactNode} from 'react';
+import {Provider} from 'tinybase/ui-react';
+import {Layout} from './Layout/index.tsx';
+import {LocalStore} from './LocalStore.tsx';
+import {SessionStore} from './SessionStore.tsx';
+
+const {createElement} = React;
+
+export const Ui = (props: {
+  title: ReactNode;
+  topNavLeft?: ReactNode;
+  topNavRight?: ReactNode;
+  sideNav?: ReactNode;
+  article?: ReactNode;
+  footer?: ReactNode;
+}) => {
+  return (
+    <Provider>
+      <Layout {...props} />
+      <SessionStore />
+      <LocalStore />
+    </Provider>
+  );
+};