feat: Add a storybook view to preview UI components in the library

feat: Add `styled` utility to create styled UI components

src/UITable/elements/Div.ts

@@ -9,7 +9,8 @@ export type DivStyle = ContainerStyle & TapProps;
 
 export type DivChild = ContainerChild | Falsy;
 
-const Div = (children: DivChild[], opts: DivStyle = {}) => {
+export type DivSignature = (children: DivChild[], opts?: DivStyle) => Container;
+const Div: DivSignature = (children, opts = {}) => {
   const realChildren = children.filter(ExcludeFalsy);
   const el = new Container(realChildren, opts, getTapProps(opts));
   el.setDescription(`DIV > shownCells: ${realChildren.length}`);
@@ -28,6 +29,10 @@ const onTapKeys: (keyof DivStyle)[] = [
   'dismissOnTap',
 ];
 
+export type NonCascadingDivSignature = (
+  children: DivChild[],
+  opts?: DivStyle
+) => Container;
 /**
  * This is for cases when you want to apply style to a Div, but don't want it to
  * cascade beyone that container. E.g. if you want margin for the Div to
@@ -39,7 +44,10 @@ const onTapKeys: (keyof DivStyle)[] = [
  * children have that same onTap logic. It would be possible to have e.g.
  * different onTap actions for padding vs content of a Div, for example.
  */
-export const NonCascadingDiv = (children: DivChild[], opts: DivStyle = {}) =>
+export const NonCascadingDiv: NonCascadingDivSignature = (
+  children,
+  opts = {}
+) =>
   Div(
     [
       Div(

src/UITable/elements/index.ts

@@ -18,3 +18,4 @@ export * from './types';
 export * from './shapes';
 export * from './utils';
 export { default as presetStyles, FlavorKey } from './presetStyles';
+export { default as styled } from './styled';

src/UITable/elements/styled.ts

@@ -0,0 +1,22 @@
+import Button, { ButtonOpts } from './Button';
+import Div, {
+  DivSignature,
+  DivStyle,
+  NonCascadingDiv,
+  NonCascadingDivSignature,
+} from './Div';
+
+export default {
+  Div:
+    (styledOpts: DivStyle): DivSignature =>
+    (children, opts = {}) =>
+      Div(children, { ...styledOpts, ...opts }),
+
+  NonCascadingDiv:
+    (styledOpts: DivStyle): NonCascadingDivSignature =>
+    (children, opts = {}) =>
+      NonCascadingDiv(children, { ...styledOpts, ...opts }),
+
+  Button: (styledOpts: Partial<ButtonOpts>) => (opts: ButtonOpts) =>
+    Button({ ...styledOpts, ...opts }),
+};

src/UITable/index.ts

@@ -81,6 +81,7 @@ export {
   H2Opts,
   IconOrSFKey,
   ToastProps,
+  styled,
 } from './elements';
 export { default as getTable } from './getTable';
 export * from './types';

src/index.ts

@@ -32,3 +32,4 @@ export * from './UITable';
 export * from './views';
 export * from './WebView';
 export * from './types/utilTypes';
+export { default as storybook } from './storybook';

src/input/listChoose.ts

@@ -71,13 +71,8 @@ const listChoose: ListChoose = async <V>(
           action: noop,
         };
       }
-      const { label, flavor, icon } = option;
-      return {
-        label,
-        flavor,
-        icon: icon ?? fallbackIcon,
-        action: noop,
-      };
+      const { label, flavor, icon = fallbackIcon } = option;
+      return { label, flavor, icon, action: noop };
     })
   );