tinywidgets 0.0.0 → 0.0.2

package/.eslintrc.json

@@ -0,0 +1,91 @@
+{
+  "parser": "@typescript-eslint/parser",
+  "plugins": ["@typescript-eslint", "react", "react-hooks", "react-refresh"],
+  "extends": [
+    "eslint:recommended",
+    "plugin:react/all",
+    "plugin:react-hooks/recommended",
+    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:@typescript-eslint/recommended",
+    "prettier"
+  ],
+  "env": {"browser": true, "es6": true, "node": true},
+  "globals": {"page": true, "browser": true, "context": true},
+  "parserOptions": {
+    "ecmaVersion": 7,
+    "ecmaFeatures": {
+      "experimentalObjectRestSpread": true,
+      "globalReturn": true,
+      "jsx": true
+    },
+    "sourceType": "module"
+  },
+  "settings": {"react": {"version": "18.3.0"}},
+  "rules": {
+    "@typescript-eslint/no-explicit-any": 0,
+    "@typescript-eslint/no-var-requires": 0,
+    "@typescript-eslint/no-unused-vars": [
+      2,
+      {"argsIgnorePattern": "^_.*", "varsIgnorePattern": "^_.*"}
+    ],
+    "max-len": [2, {"code": 80, "ignorePattern": "^(im|ex)ports?\\W.*"}],
+    "no-var": 2,
+    "no-console": 2,
+    "object-curly-spacing": [2, "never"],
+    "comma-dangle": [
+      2,
+      {
+        "arrays": "always-multiline",
+        "objects": "always-multiline",
+        "imports": "always-multiline",
+        "exports": "always-multiline",
+        "functions": "always-multiline"
+      }
+    ],
+    "indent": 0,
+    "no-empty": [2, {"allowEmptyCatch": true}],
+    "linebreak-style": [2, "unix"],
+    "space-infix-ops": 2,
+    "quotes": [2, "single", {"allowTemplateLiterals": true}],
+    "semi": [2, "always"],
+    "sort-keys": 0,
+    "sort-imports": 2,
+    "no-multiple-empty-lines": [2, {"max": 1}],
+    "react/function-component-definition": [
+      2,
+      {
+        "namedComponents": "arrow-function",
+        "unnamedComponents": "arrow-function"
+      }
+    ],
+    "react/no-multi-comp": [2, {"ignoreStateless": true}],
+    "react/no-find-dom-node": 0,
+    "react/no-set-state": 0,
+    "react/no-unsafe": 2,
+    "jsx-quotes": [2, "prefer-double"],
+    "react-hooks/exhaustive-deps": 2,
+    "react-hooks/rules-of-hooks": 2,
+    "react/destructuring-assignment": 0,
+    "react/display-name": 0,
+    "react/jsx-boolean-value": 0,
+    "react/jsx-filename-extension": 0,
+    "react/jsx-first-prop-new-line": [2, "multiline"],
+    "react/jsx-handler-names": [
+      2,
+      {"eventHandlerPrefix": "_handle", "eventHandlerPropPrefix": "on"}
+    ],
+    "react/jsx-indent": 0,
+    "react/jsx-indent-props": [2, 2],
+    "react/jsx-max-depth": [2, {"max": 5}],
+    "react/jsx-max-props-per-line": [2, {"maximum": 1, "when": "multiline"}],
+    "react/jsx-newline": 0,
+    "react/jsx-no-literals": 0,
+    "react/jsx-one-expression-per-line": 0,
+    "react/jsx-props-no-spreading": 0,
+    "react/jsx-sort-props": 0,
+    "react/require-default-props": 0,
+    "react/sort-comp": 0,
+    "react/forbid-component-props": 0,
+    "react/button-has-type": 0
+  }
+}

package/.prettierrc

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

package/index.css.ts

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

package/index.ts

@@ -0,0 +1,11 @@
+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/media.ts

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

package/package.json

@@ -1,8 +1,33 @@
 {
   "name": "tinywidgets",
-  "version": "0.0.0",
+  "version": "0.0.2",
   "author": "jamesgpearce",
   "repository": "github:tinyplex/tinywidgets",
+  "module": "index.ts",
+  "devDependencies": {
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@typescript-eslint/eslint-plugin": "^7.16.1",
+    "@typescript-eslint/parser": "^7.16.1",
+    "eslint": "^8.57.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-react": "^7.34.4",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "prettier": "^3.3.3",
+    "typescript": "^5.5.3",
+    "@vanilla-extract/css": "^1.15.5",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "tinybase": "^5.1.0"
+  },
+  "exports": {
+    ".": "./index.ts",
+    "./media": "./media.ts",
+    "./css": "./index.css.ts"
+  },
+  "description": "reserved",
   "license": "MIT",
-  "description": "reserved"
+  "dependencies": {
+    "lucide-react": "^0.438.0"
+  }
 }

package/src/Avatar/index.css.ts

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

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

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

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

package/src/Button/index.css.ts

@@ -0,0 +1,57 @@
+import {style, styleVariants} from '@vanilla-extract/css';
+import {axisLike, borderLike, radiusLike, theme} from '../index.css';
+
+const ghostLike = {
+  backgroundColor: 'transparent',
+  border: 0,
+};
+
+export const button = style([
+  axisLike,
+  radiusLike,
+  {
+    textAlign: 'left',
+    cursor: 'pointer',
+    padding: '0.5rem 1rem',
+    outlineOffset: '-2px',
+    backgroundColor: theme.background,
+    color: 'inherit',
+    overflow: 'hidden',
+    whiteSpace: 'nowrap',
+    transition: 'background-color 0.2s,border-color 0.2s',
+    flexShrink: 0,
+    selectors: {
+      '&:hover': {
+        backgroundColor: theme.backgroundHover,
+      },
+    },
+  },
+]);
+
+export const buttonVariant = styleVariants({
+  default: borderLike,
+  accent: {
+    ...borderLike,
+    backgroundColor: theme.accent,
+    color: theme.accentContrast,
+    border: 0,
+    selectors: {
+      '&:hover': {
+        backgroundColor: theme.accentHover,
+      },
+    },
+  },
+  ghost: ghostLike,
+  item: {...ghostLike, width: '100%'},
+  icon: {...ghostLike, padding: '0.25rem'},
+});
+
+export const highlight = style({
+  backgroundColor: theme.backgroundHover,
+});
+
+export const labelStyle = style({
+  flex: 1,
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+});

package/src/Button/index.tsx

@@ -0,0 +1,65 @@
+/** @jsx createElement */
+/** @jsxFrag Fragment */
+
+import React from 'react';
+import {iconSize} from '../index.css.ts';
+import {classNames} from '../index.ts';
+import {button, buttonVariant, highlight, labelStyle} from './index.css.ts';
+
+const {createElement, useCallback, forwardRef} = React;
+
+export const Button = forwardRef(
+  (
+    {
+      icon: Icon,
+      label,
+      labelRight,
+      iconRight: IconRight,
+      onClick,
+      variant = 'default',
+      className,
+      href,
+      title,
+      current,
+    }: {
+      icon?: React.ComponentType<{className?: string}>;
+      label?: React.ReactNode;
+      labelRight?: React.ReactNode;
+      iconRight?: React.ComponentType<{className?: string}>;
+      onClick?: () => void;
+      variant?: keyof typeof buttonVariant;
+      className?: string;
+      href?: string;
+      title?: string;
+      current?: boolean;
+    },
+    ref: React.Ref<HTMLButtonElement>,
+  ) => {
+    const icon = Icon ? <Icon className={iconSize} /> : null;
+    const iconRight = IconRight ? <IconRight className={iconSize} /> : null;
+
+    const hrefClick = useCallback(
+      () => (href ? open(href, '_blank', 'noreferrer') : null),
+      [href],
+    );
+
+    return (
+      <button
+        className={classNames(
+          button,
+          buttonVariant[variant],
+          current && highlight,
+          className,
+        )}
+        onClick={onClick ?? hrefClick}
+        title={title}
+        ref={ref}
+      >
+        {icon}
+        {label ? <span className={labelStyle}>{label}</span> : null}
+        {labelRight}
+        {iconRight}
+      </button>
+    );
+  },
+);

package/src/Card/index.css.ts

@@ -0,0 +1,9 @@
+import {style} from '@vanilla-extract/css';
+import {borderLike, paddingLike, radiusLike} from '../index.css';
+
+export const card = style([
+  borderLike,
+  radiusLike,
+  paddingLike,
+  {height: 'fit-content'},
+]);

package/src/Card/index.tsx

@@ -0,0 +1,15 @@
+/** @jsx createElement */
+
+import React from 'react';
+import {classNames} from '../';
+import {card} from './index.css';
+
+const {createElement} = React;
+
+export const Card = ({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) => <div className={classNames(card, className)}>{children}</div>;

package/src/Collapsible/index.css.ts

@@ -0,0 +1,34 @@
+import {style} from '@vanilla-extract/css';
+import {borderLike, dimensions, paddingLike, radiusLike} from '../index.css';
+
+export const collapsible = style([
+  borderLike,
+  radiusLike,
+  {
+    display: 'grid',
+    gridTemplateRows: 'max-content minmax(0, 0fr)',
+    transition: '.2s grid-template-rows ease-in-out',
+    overflow: 'hidden',
+    marginBottom: dimensions.padding,
+    selectors: {
+      '&:last-child': {
+        marginBottom: 0,
+      },
+    },
+  },
+]);
+
+export const collapsibleOpen = style({
+  gridTemplateRows: 'max-content minmax(0, 1fr)',
+});
+
+export const button = style({
+  margin: '-1px',
+});
+
+export const buttonOpen = style({
+  borderBottomLeftRadius: 0,
+  borderBottomRightRadius: 0,
+});
+
+export const content = style([paddingLike, {overflow: 'hidden'}]);

package/src/Collapsible/index.tsx

@@ -0,0 +1,69 @@
+/** @jsx createElement */
+
+import React from 'react';
+import {ChevronDown, ChevronRight} from 'lucide-react';
+import {Button} from '../Button/index.tsx';
+import {classNames} from '../index.ts';
+import {
+  useCollapsibleOpen,
+  useSetCollapsibleOpen,
+} from '../Ui/SessionStore.tsx';
+import {
+  button,
+  buttonOpen,
+  collapsible,
+  collapsibleOpen,
+  content,
+} from './index.css.ts';
+
+const {createElement, useState, useCallback, useRef} = React;
+
+export const Collapsible = ({
+  id = '',
+  icon: Icon,
+  label = <div />,
+  labelRight = <div />,
+  className,
+  children,
+}: {
+  id?: string;
+  icon?: React.ComponentType<{className?: string}>;
+  label?: React.ReactNode;
+  labelRight?: React.ReactNode;
+  className?: string;
+  children: React.ReactNode;
+}) => {
+  // State is in session Store if id is present, otherwise here in component.
+  const storedIsOpen = useCollapsibleOpen(id) ?? false;
+  const setStoredIsOpen = useSetCollapsibleOpen(id);
+  const [stateIsOpen, setStateIsOpen] = useState(false);
+
+  const isOpen = id ? storedIsOpen : stateIsOpen;
+  const setIsOpen = id ? setStoredIsOpen : setStateIsOpen;
+
+  const [render, setRender] = useState(isOpen);
+  const timer = useRef<Timer>();
+
+  const toggle = useCallback(() => {
+    setIsOpen(!isOpen);
+    clearTimeout(timer.current);
+    timer.current = setTimeout(() => setRender(!isOpen), isOpen ? 200 : 0);
+  }, [id, isOpen]);
+
+  return (
+    <div className={classNames(collapsible, isOpen && collapsibleOpen)}>
+      <Button
+        onClick={toggle}
+        icon={Icon}
+        label={label}
+        labelRight={labelRight}
+        iconRight={isOpen ? ChevronDown : ChevronRight}
+        className={classNames(button, render && buttonOpen)}
+        current={render}
+      />
+      {render ? (
+        <div className={classNames(content, className)}>{children}</div>
+      ) : null}
+    </div>
+  );
+};

package/src/Detail/index.css.ts

@@ -0,0 +1,19 @@
+import {style} from '@vanilla-extract/css';
+import {theme} from '../index.css';
+
+export const detailTable = style({
+  width: '100%',
+  borderCollapse: 'collapse',
+  margin: '-.5rem 0',
+});
+
+export const detailRow = style({
+  borderBottom: `1px solid ${theme.border}`,
+  selectors: {'&:last-child': {borderBottom: 'none'}},
+});
+
+export const detailCell = style({
+  padding: '0.5rem 1rem',
+  verticalAlign: 'top',
+  selectors: {'&:is(th)': {textAlign: 'right'}},
+});

package/src/Detail/index.tsx

@@ -0,0 +1,28 @@
+/** @jsx createElement */
+
+import React from 'react';
+import {classNames} from '../';
+import {detailCell, detailRow, detailTable} from './index.css';
+
+const {createElement} = React;
+
+export const Detail = ({
+  data,
+  className,
+}: {
+  data: Record<string, React.ReactNode>;
+  className?: string;
+}) => {
+  return (
+    <table className={classNames(detailTable, className)}>
+      <tbody>
+        {Object.entries(data).map(([key, value]) => (
+          <tr key={key} className={detailRow}>
+            <th className={detailCell}>{key}:</th>
+            <td className={detailCell}>{value}</td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+};

package/src/Hr/index.css.ts

@@ -0,0 +1,10 @@
+import {style} from '@vanilla-extract/css';
+import {dimensions, theme} from '../index.css';
+
+export const hr = style({
+  border: 'none',
+  borderBottom: `solid 1px ${theme.border}`,
+  margin: `${dimensions.padding} 0`,
+  height: '1px',
+  width: '100%',
+});

package/src/Hr/index.tsx

@@ -0,0 +1,10 @@
+/** @jsx createElement */
+
+import React from 'react';
+import {hr} from './index.css';
+
+const {createElement} = React;
+
+export const Hr = () => {
+  return <hr className={hr} />;
+};

package/src/Metric/index.css.ts

@@ -0,0 +1,18 @@
+import {style} from '@vanilla-extract/css';
+
+export const metric = style({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '0.5rem',
+});
+
+export const metricLabel = style({
+  display: 'flex',
+  alignItems: 'center',
+  gap: '0.5rem',
+});
+
+export const metricNumber = style({
+  fontSize: '1.5rem',
+  fontWeight: 'bold',
+});

package/src/Metric/index.tsx

@@ -0,0 +1,28 @@
+/** @jsx createElement */
+
+import React from 'react';
+import {classNames} from '../';
+import {iconSize} from '../index.css';
+import {metric, metricLabel, metricNumber} from './index.css';
+
+const {createElement} = React;
+
+export const Metric = ({
+  icon: Icon,
+  label,
+  number,
+  className,
+}: {
+  icon?: React.ComponentType<{className?: string}>;
+  label: React.ReactNode;
+  number: React.ReactNode;
+  className?: string;
+}) => (
+  <div className={classNames(metric, className)}>
+    <div className={metricLabel}>
+      {Icon ? <Icon className={iconSize} /> : null}
+      {label}
+    </div>
+    <div className={metricNumber}>{number}</div>
+  </div>
+);

package/src/Summary/index.css.ts

@@ -0,0 +1,17 @@
+import {style} from '@vanilla-extract/css';
+
+export const summary = style({
+  display: 'flex',
+  flexDirection: 'row',
+  gap: '1rem',
+});
+
+export const summaryImage = style({
+  flex: '0 0 6rem',
+  width: '6rem',
+  height: '6rem',
+});
+
+export const summaryContent = style({
+  flex: 1,
+});