tinywidgets 0.0.11 → 1.0.0

package/src/index.css.ts

@@ -1,137 +1,4 @@
-import {
-  createTheme,
-  createThemeContract,
-  createVar,
-  fallbackVar,
-  globalStyle,
-  style,
-} from '@vanilla-extract/css';
-import {small} from './';
-
-export const accentHue = createVar();
-
-export const theme = createThemeContract({
-  accentHue: null,
-  backgroundHue: null,
-  accent: null,
-  accentLight: null,
-  accentHover: null,
-  accentContrast: null,
-  underneath: null,
-  background: null,
-  background2: null,
-  backgroundHaze: null,
-  backgroundHover: null,
-  foreground: null,
-  foreground2: null,
-  border: null,
-  shadow: null,
-});
-
-const themeCommon = {
-  accentHue: fallbackVar(accentHue, '8'),
-  backgroundHue: `calc(${theme.accentHue} + 180)`,
-  accent: `oklch(50% .11 ${theme.accentHue})`,
-  accentLight: `oklch(71% .16 ${theme.accentHue})`,
-  accentHover: `oklch(45% .1 ${theme.accentHue})`,
-  accentContrast: '#fff',
-};
-
-const light = {
-  ...themeCommon,
-  underneath: '#fff',
-  background: `oklch(99% .01 ${theme.backgroundHue})`,
-  background2: `oklch(95% .01 ${theme.backgroundHue})`,
-  backgroundHaze: `oklch(99% .01 ${theme.backgroundHue} / .5)`,
-  backgroundHover: `oklch(90% .01 ${theme.backgroundHue})`,
-  foreground: `oklch(30% .01 ${theme.accentHue})`,
-  foreground2: `oklch(50% .01 ${theme.accentHue})`,
-  border: `oklch(90% .01 ${theme.backgroundHue})`,
-  shadow: '0 1px 4px 0 hsl(0 0 20 / .1)',
-};
-
-const dark = {
-  ...themeCommon,
-  underneath: '#000',
-  background: `oklch(20% .01 ${theme.backgroundHue})`,
-  background2: `oklch(15% .01 ${theme.backgroundHue})`,
-  backgroundHaze: `oklch(21% 0% ${theme.backgroundHue} / .5)`,
-  backgroundHover: `oklch(25% .01 ${theme.backgroundHue})`,
-  foreground: `oklch(90% .01 ${theme.accentHue})`,
-  foreground2: `oklch(50% .01 ${theme.accentHue})`,
-  border: `oklch(30% .01 ${theme.backgroundHue})`,
-  shadow: '0 1px 4px 0 #000',
-};
-
-export const dimensions = {
-  padding: '1rem',
-  radius: '0.5rem',
-  titleWidth: '18rem',
-  sideNavWidth: '20rem',
-  sideNavWidthHidden: '-30rem',
-  topNavHeight: '4rem',
-  articleWidth: '60rem',
-  footerHeight: '10rem',
-};
-
-export const shadowLike = {
-  boxShadow: theme.shadow,
-};
-
-export const borderLike = {
-  ...shadowLike,
-  border: `1px solid ${theme.border}`,
-};
-
-export const radiusLike = {
-  borderRadius: dimensions.radius,
-};
-
-export const paddingLike = {
-  padding: dimensions.padding,
-};
-
-export const axisLike = {
-  display: 'flex',
-  justifyContent: 'space-between',
-  alignItems: 'center',
-  gap: dimensions.padding,
-};
-
-globalStyle('*', {
-  margin: 0,
-  padding: 0,
-  boxSizing: 'border-box',
-  scrollbarWidth: 'thin',
-  color: 'inherit',
-  fontSize: 'inherit',
-});
-
-globalStyle('html', {
-  fontSize: '14px',
-  lineHeight: '1.5em',
-  textRendering: 'optimizeLegibility',
-  fontWeight: 400,
-  ...small({
-    fontSize: '12px',
-  }),
-});
-
-globalStyle('h1', {fontSize: '1.5rem'});
-
-globalStyle('h2', {fontSize: '1.25rem'});
-
-export const themeLight = createTheme(theme, light);
-globalStyle(`html:has(${themeLight})`, {
-  backgroundColor: light.underneath,
-});
-
-export const themeDark = createTheme(theme, dark);
-globalStyle(`html:has(${themeDark})`, {
-  backgroundColor: dark.underneath,
-});
-
-export const iconSize = style({
-  width: '1rem',
-  height: '1rem',
-});
+export {colors} from './css/colors.css.ts';
+export {code} from './css/code.css.ts';
+export {dimensions} from './css/dimensions.css.ts';
+export {screens} from './css/screens.ts';

package/src/index.ts

@@ -1,26 +1,18 @@
-import React from 'react';
-import type {StyleRule} from '@vanilla-extract/css';
+import './css/global.css.ts';
 
-const LARGE = 'screen and (min-width: 768px)';
-const SMALL = 'screen and (max-width: 450px)';
+export {App} from './components/App/index.tsx';
+export {Button} from './components/Button/index.tsx';
+export {Card} from './components/Card/index.tsx';
+export {Code} from './components/Code/index.tsx';
+export {Collapsible} from './components/Collapsible/index.tsx';
+export {Detail} from './components/Detail/index.tsx';
+export {Hr} from './components/Hr/index.tsx';
+export {Image} from './components/Image/index.tsx';
+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 const {
-  createElement,
-  Fragment,
-  useEffect,
-  useRef,
-  useState,
-  useCallback,
-  forwardRef,
-} = React;
-
-export const large = (style: StyleRule) => ({
-  '@media': {[LARGE]: style},
-});
-
-export const small = (style: StyleRule) => ({
-  '@media': {[SMALL]: style},
-});
-
-export const classNames = (...classes: (string | boolean | undefined)[]) =>
-  classes.filter(Boolean).join(' ');
+export {useRoute, useSetRouteCallback} from './stores/RouteStore.tsx';
+export {useDark} from './stores/LocalStore.tsx';
+export {classNames} from './common/functions.tsx';

package/src/stores/LocalStore.tsx

@@ -1,35 +1,67 @@
-import {createStore} from 'tinybase';
-import {createLocalPersister} from 'tinybase/persisters/persister-browser';
-import {
+import * as UiReact from 'tinybase/ui-react/with-schemas';
+import {CHANGE, READY, READY_SCHEMA} from './common';
+import {type NoTablesSchema, createStore} from 'tinybase/with-schemas';
+import {createLocalPersister} from 'tinybase/persisters/persister-browser/with-schemas';
+import {useEffect} from 'react';
+
+const PREFERS_DARK = matchMedia?.('(prefers-color-scheme: dark)');
+
+const LOCAL_STORE = 'tinywidgets/Local';
+const DARK_PREFERENCE = 'darkPreference';
+const DARK_CHOICE = 'darkChoice';
+
+const VALUES_SCHEMA = {
+  ...READY_SCHEMA,
+  [DARK_PREFERENCE]: {type: 'boolean', default: false},
+  [DARK_CHOICE]: {type: 'number', default: 2},
+} as const;
+type Schemas = [NoTablesSchema, typeof VALUES_SCHEMA];
+
+const {
   useCreatePersister,
   useCreateStore,
   useProvideStore,
   useSetValueCallback,
   useValue,
-} from 'tinybase/ui-react';
-import {useEffect} from '../';
-
-const PREFERS_DARK = matchMedia?.('(prefers-color-scheme: dark)');
-
-const LOCAL_STORE = 'tinywidgets/Local';
-const DARK_PREFERENCE_VALUE = 'darkPreference';
-const DARK_CHOICE_VALUE = 'darkChoice';
+} = UiReact as UiReact.WithSchemas<Schemas>;
 
-export const useDarkPreference = () =>
-  useValue(DARK_PREFERENCE_VALUE, LOCAL_STORE) as boolean;
+/**
+ * The useDark hook returns whether the user is viewing the application in dark
+ * mode.
+ *
+ * @returns A boolean where `true` means 'dark' and `false` means 'light' mode.
+ * @example
+ * ```tsx
+ * <Card>
+ *   Currently in {useDark() ? 'dark' : 'light'} mode
+ * </Card>
+ * ```
+ * This example shows the hook returning the current mode.
+ */
+export const useDark = () => {
+  const darkChoice = useDarkChoice();
+  const darkPreference = useValue(DARK_PREFERENCE, LOCAL_STORE);
+  return darkChoice == 1 || (darkChoice == 2 && darkPreference);
+};
 
 export const useDarkChoice = () =>
-  (useValue(DARK_CHOICE_VALUE, LOCAL_STORE) ?? 2) as 0 | 1 | 2;
+  (useValue(DARK_CHOICE, LOCAL_STORE) ?? 2) as 0 | 1 | 2;
+
 export const useToggleDarkChoiceCallback = () =>
   useSetValueCallback(
-    DARK_CHOICE_VALUE,
+    DARK_CHOICE,
     () => (value) => (((value ?? 2) as number) + 1) % 3,
     [],
     LOCAL_STORE,
   );
 
+export const useLocalStoreIsReady = () =>
+  useValue(READY, LOCAL_STORE) as boolean;
+
 export const LocalStore = () => {
-  const localStore = useCreateStore(createStore);
+  const localStore = useCreateStore(() =>
+    createStore().setValuesSchema(VALUES_SCHEMA),
+  );
   useCreatePersister(
     localStore,
     (localStore) => createLocalPersister(localStore, LOCAL_STORE),
@@ -37,14 +69,15 @@ export const LocalStore = () => {
     async (persister) => {
       await persister.startAutoLoad();
       await persister.startAutoSave();
+      persister.getStore().setValue(READY, true);
     },
   );
   useEffect(() => {
     const preferenceListener = () =>
-      localStore.setValue(DARK_PREFERENCE_VALUE, PREFERS_DARK.matches);
-    PREFERS_DARK.addEventListener('change', preferenceListener);
+      localStore.setValue(DARK_PREFERENCE, PREFERS_DARK.matches);
+    PREFERS_DARK.addEventListener(CHANGE, preferenceListener);
     preferenceListener();
-    return () => PREFERS_DARK.removeEventListener('change', preferenceListener);
+    return () => PREFERS_DARK.removeEventListener(CHANGE, preferenceListener);
   }, [localStore]);
 
   useProvideStore(LOCAL_STORE, localStore);

package/src/stores/RouteStore.tsx

@@ -0,0 +1,103 @@
+import * as UiReact from 'tinybase/ui-react/with-schemas';
+import {type NoTablesSchema, createStore} from 'tinybase/with-schemas';
+import {READY, READY_SCHEMA} from './common';
+import {createCustomPersister} from 'tinybase/persisters/with-schemas';
+
+const ROUTE_STORE = 'tinywidgets/Route';
+const ROUTE = 'route';
+
+const VALUES_SCHEMA = {
+  ...READY_SCHEMA,
+  [ROUTE]: {type: 'string', default: ''},
+} as const;
+type Schemas = [NoTablesSchema, typeof VALUES_SCHEMA];
+
+const {
+  useCreateStore,
+  useProvideStore,
+  useCreatePersister,
+  useValue,
+  useSetValueCallback,
+} = UiReact as UiReact.WithSchemas<Schemas>;
+
+/**
+ * The useRoute hook returns the current route, assuming the app is using the
+ * basic TinyWidgets routing system.
+ *
+ * This 'system' simply involves using this hook to get a string which may have
+ * been persisted to the hash part of the browser's URL.
+ * @returns The current route.
+ * @example
+ * ```tsx
+ * <Card>
+ *   Current route
+ *   <Hr />
+ *   <code>{useRoute()}</code>
+ * </Card>
+ * ```
+ * This example shows the hook returning the current route.
+ */
+export const useRoute = () => useValue(ROUTE, ROUTE_STORE);
+
+/**
+ * The useSetRouteCallback hook a callback for setting the current route,
+ * assuming the app is using the basic TinyWidgets routing system.
+ *
+ * This 'system' simply involves using this hook to set a string to be persisted
+ * to the hash part of the browser's URL.
+ * @returns The current route.
+ * @example
+ * ```tsx
+ * const setRoute = useSetRouteCallback();
+ * // ...
+ * <Button
+ *   icon={Lucide.Home}
+ *   title="Home"
+ *   onClick={() => setRoute('home')}
+ * />
+ * ```
+ * This example shows the hook returning a callback that will change the current
+ * route when called as a click handler.
+ */
+export const useSetRouteCallback = () =>
+  useSetValueCallback(ROUTE, (route: string) => route, [], ROUTE_STORE);
+
+export const useRouteStoreIsReady = () =>
+  useValue(READY, ROUTE_STORE) as boolean;
+
+export const RouteStore = () => {
+  const routeStore = useCreateStore(() =>
+    createStore().setValuesSchema(VALUES_SCHEMA),
+  );
+  useProvideStore(ROUTE_STORE, routeStore);
+
+  useCreatePersister(
+    routeStore,
+    (routeStore) =>
+      createCustomPersister(
+        routeStore,
+        async () => [{}, {route: location.hash.slice(1), ready: true}],
+        async (getContent) => {
+          const route = getContent()[1].route;
+          if (route) {
+            location.hash = route;
+          }
+        },
+        (listener) => {
+          const hashListener = () => listener();
+          window.addEventListener('hashchange', hashListener);
+          return hashListener;
+        },
+        (hashListener) =>
+          window.removeEventListener('hashchange', hashListener),
+      ),
+    [],
+    async (persister) => {
+      await persister.startAutoLoad();
+      await persister.startAutoSave();
+      persister.getStore().setValue(READY, true);
+    },
+  );
+
+  return null;
+};

package/src/stores/SessionStore.tsx

@@ -1,6 +1,25 @@
-import {createStore, type Id} from 'tinybase';
-import {createSessionPersister} from 'tinybase/persisters/persister-browser';
-import {
+import * as UiReact from 'tinybase/ui-react/with-schemas';
+import {READY, READY_SCHEMA} from './common';
+import {createSessionPersister} from 'tinybase/persisters/persister-browser/with-schemas';
+import {createStore} from 'tinybase/with-schemas';
+
+const SESSION_STORE = 'tinywidgets/Session';
+const COLLAPSIBLE = 'collapsible';
+const IS_OPEN = 'isOpen';
+const SIDE_NAV_IS_OPEN = 'sideNavIsOpen';
+
+const TABLES_SCHEMA = {
+  [COLLAPSIBLE]: {
+    [IS_OPEN]: {type: 'boolean', default: false},
+  },
+} as const;
+const VALUES_SCHEMA = {
+  ...READY_SCHEMA,
+  [SIDE_NAV_IS_OPEN]: {type: 'boolean', default: false},
+} as const;
+type Schemas = [typeof TABLES_SCHEMA, typeof VALUES_SCHEMA];
+
+const {
   useCell,
   useCreatePersister,
   useCreateStore,
@@ -8,44 +27,39 @@ import {
   useSetCellCallback,
   useSetValueCallback,
   useValue,
-} from 'tinybase/ui-react';
-
-const SESSION_STORE = 'tinywidgets/Session';
+} = UiReact as UiReact.WithSchemas<Schemas>;
 
-const COLLAPSIBLE_TABLE = 'collapsible';
-const COLLAPSIBLE_OPEN_CELL = 'open';
+export const useCollapsibleIsOpen = (collapsibleId: string) =>
+  useCell(COLLAPSIBLE, collapsibleId, IS_OPEN, SESSION_STORE) as any;
 
-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) =>
+export const useSetCollapsibleIsOpenCallback = (collapsibleId: string) =>
   useSetCellCallback(
-    COLLAPSIBLE_TABLE,
+    COLLAPSIBLE,
     collapsibleId,
-    COLLAPSIBLE_OPEN_CELL,
+    IS_OPEN,
     (open: boolean) => open,
     [collapsibleId],
     SESSION_STORE,
   );
 
-export const useSideNavOpen = () =>
-  useValue(SIDE_NAV_OPEN_VALUE, SESSION_STORE) as any;
-export const useToggleSideNavOpen = () =>
+export const useSideNavIsOpen = () =>
+  useValue(SIDE_NAV_IS_OPEN, SESSION_STORE) as any;
+
+export const useToggleSideNavIsOpenCallback = () =>
   useSetValueCallback(
-    SIDE_NAV_OPEN_VALUE,
+    SIDE_NAV_IS_OPEN,
     () => (value) => !value,
     [],
     SESSION_STORE,
   );
 
+export const useSessionStoreIsReady = () =>
+  useValue(READY, SESSION_STORE) as boolean;
+
 export const SessionStore = () => {
-  const sessionStore = useCreateStore(createStore);
+  const sessionStore = useCreateStore(() =>
+    createStore().setSchema(TABLES_SCHEMA, VALUES_SCHEMA),
+  );
   useCreatePersister(
     sessionStore,
     (sessionStore) => createSessionPersister(sessionStore, SESSION_STORE),
@@ -53,6 +67,7 @@ export const SessionStore = () => {
     async (persister) => {
       await persister.startAutoLoad();
       await persister.startAutoSave();
+      persister.getStore().setValue(READY, true);
     },
   );
   useProvideStore(SESSION_STORE, sessionStore);

package/src/stores/common.ts

@@ -0,0 +1,6 @@
+export const READY = 'ready';
+export const CHANGE = 'change';
+
+export const READY_SCHEMA = {
+  [READY]: {type: 'boolean', default: false},
+} as const;

package/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  }
+}

package/.prettierrc

@@ -1,5 +0,0 @@
-{
-  "bracketSpacing": false,
-  "singleQuote": true,
-  "trailingComma": "all"
-}

package/index.css.ts

@@ -1 +0,0 @@
-export {accentHue, theme} from './src/index.css.ts';

package/index.ts

@@ -1,12 +0,0 @@
-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/src/App/index.tsx

@@ -1,18 +0,0 @@
-/** @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/Avatar/index.css.ts

@@ -1,17 +0,0 @@
-import {style} from '@vanilla-extract/css';
-import {theme} from '../index.css';
-
-export const avatar = style({
-  display: 'inline-block',
-  width: '2rem',
-  height: '2rem',
-  boxShadow: theme.shadow,
-  borderRadius: '50%',
-  border: `1px solid ${theme.border}`,
-  flexShrink: 0,
-  selectors: {
-    '&:hover': {
-      backgroundColor: theme.backgroundHover,
-    },
-  },
-});

package/src/Avatar/index.tsx

@@ -1,25 +0,0 @@
-/** @jsx createElement */
-
-import {classNames, createElement} from '../index.ts';
-import {avatar} from './index.css.ts';
-
-export const Avatar = ({
-  src,
-  title,
-  onClick,
-  className,
-}: {
-  src: string;
-  title?: string;
-  onClick?: () => void;
-  className?: string;
-}) => {
-  return (
-    <img
-      src={src}
-      title={title}
-      onClick={onClick}
-      className={classNames(avatar, className)}
-    />
-  );
-};

package/src/Axis/index.css.ts

@@ -1,19 +0,0 @@
-import {style} from '@vanilla-extract/css';
-import {dimensions} from '../index.css';
-
-export const axis = style({
-  display: 'flex',
-  alignItems: 'center',
-});
-
-export const justifyStyle = style({
-  justifyContent: 'space-between',
-});
-
-export const verticalStyle = style({
-  flexDirection: 'column',
-});
-
-export const gapStyle = style({
-  gap: dimensions.padding,
-});

package/src/Axis/index.tsx

@@ -1,36 +0,0 @@
-/** @jsx createElement */
-
-import type {ReactNode} from 'react';
-import {classNames, createElement} from '../';
-import {axis, gapStyle, justifyStyle, verticalStyle} from './index.css';
-
-export const Axis = ({
-  justify = true,
-  gap = true,
-  vertical,
-  children,
-  className,
-  title,
-}: {
-  justify?: boolean;
-  gap?: boolean;
-  vertical?: boolean;
-  children: ReactNode;
-  className?: string;
-  title?: string;
-}) => {
-  return (
-    <div
-      className={classNames(
-        axis,
-        justify && justifyStyle,
-        vertical && verticalStyle,
-        gap && gapStyle,
-        className,
-      )}
-      title={title}
-    >
-      {children}
-    </div>
-  );
-};