tinywidgets 0.0.10 → 1.0.0

package/src/components/Code/index.css.ts

@@ -0,0 +1,49 @@
+import {globalStyle, style} from '@vanilla-extract/css';
+import {code} from '../../css/code.css';
+import {colors} from '../../css/colors.css';
+import {dimensions} from '../../css/dimensions.css';
+
+export const pre = style({
+  padding: dimensions.padding,
+  borderRadius: dimensions.radius,
+  background: colors.background2,
+  border: colors.border,
+  lineHeight: '1.25rem',
+  overflowX: 'auto',
+});
+
+globalStyle('.token.comment, .token.prolog, .token.cdata', {
+  color: code['mono-3'],
+});
+
+globalStyle('.token.doctype, .token.punctuation, .token.entity', {
+  color: code['mono-1'],
+});
+
+globalStyle(
+  // eslint-disable-next-line max-len
+  '.token.attr-name, .token.class-name, .token.boolean, .token.constant, .token.number, .token.atrule',
+  {color: code['hue-6']},
+);
+
+globalStyle('.token.keyword', {color: code['hue-3']});
+
+globalStyle(
+  // eslint-disable-next-line max-len
+  '.token.property, .token.tag, .token.symbol, .token.deleted, .token.important',
+  {color: code['hue-5']},
+);
+
+globalStyle(
+  // eslint-disable-next-line max-len
+  '.token.selector, .token.string, .token.char, .token.builtin, .token.inserted, .token.regex, .token.attr-value, .token.attr-value > .token.punctuation',
+  {color: code['hue-4']},
+);
+
+globalStyle('.token.variable, .token.operator, .token.function', {
+  color: code['hue-2'],
+});
+
+globalStyle('.token.url', {
+  color: code['hue-1'],
+});

package/src/components/Code/index.tsx

@@ -0,0 +1,89 @@
+/* eslint-disable max-len */
+import 'prismjs';
+import 'prismjs/components/prism-jsx';
+import 'prismjs/components/prism-typescript';
+import 'prismjs/components/prism-tsx';
+import Prism from 'prismjs';
+import React from 'react';
+import {classNames} from '../../common/functions.tsx';
+import {pre} from './index.css.ts';
+
+const {highlight, languages} = Prism;
+
+/**
+ * The `Code` component displays a block of pre-formatted code, and uses PrismJS
+ * to parse its syntax. The coloring is based on the [prism-one-dark](https://github.com/PrismJS/prism-themes/blob/master/themes/prism-one-dark.css) and [prism-one-light](https://github.com/PrismJS/prism-themes/blob/master/themes/prism-one-light.css) themes.
+ *
+ * This component supports the default PrismJS languages (`markup`, `html`
+ * , `xml`, `svg`, `mathml`, `ssml`, `atom`, `rss`, `css`, `clike`, `javascript`
+ * , `js`), and specific additional languages (`jsx`, `typescript`, `ts`
+ * , `tsx`).
+ * Others can be added if there is demand! Please open an issue on GitHub.
+ *
+ * @param props The props for the component.
+ * @returns The Code component.
+ * @example
+ * ```tsx
+ * <Code
+ *   code={`
+ * import React from 'react';
+ * const App = () => (
+ *   <div>Hello, world!</div>
+ * );
+ *   `}
+ * />
+ * ```
+ * This example shows a simple block of code, defaulting to the `jsx` language.
+ * @example
+ * ```tsx
+ * <Code
+ *   code={`
+ * h1 {
+ *   font-size: 1.5rem;
+ * }
+ *   `}
+ *   language="css"
+ * />
+ * ```
+ * This example shows the use of the `css` language.
+ * @example
+ * ```tsx
+ * <Code
+ *   code={`
+ * const a: number = 1;
+ *   `}
+ *   language="typescript"
+ * />
+ * ```
+ * This example shows the use of the `tsx` language.
+ * @icon Lucide.SquareCode
+ */
+export const Code = ({
+  code,
+  language = 'jsx',
+  className,
+}: {
+  /**
+   * The code to display, as a string.
+   */
+  readonly code: string;
+  /**
+   * An optional indication of the language. Defaults to `jsx`.
+   */
+  readonly language?: string;
+  /**
+   * An extra CSS class name for the component.
+   */
+  readonly className?: string;
+}) => {
+  return (
+    <pre className={classNames(pre, className)}>
+      <code
+        // eslint-disable-next-line react/no-danger
+        dangerouslySetInnerHTML={{
+          __html: highlight(code.trim(), languages[language], language),
+        }}
+      />
+    </pre>
+  );
+};

package/src/components/Collapsible/index.css.ts

@@ -0,0 +1,37 @@
+import {colors} from '../../css/colors.css';
+import {dimensions} from '../../css/dimensions.css';
+import {style} from '@vanilla-extract/css';
+
+export const collapsible = style({
+  width: '100%',
+  alignSelf: 'start',
+  borderRadius: dimensions.radius,
+  boxShadow: colors.shadow,
+  border: colors.border,
+  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',
+  boxShadow: 'none',
+});
+
+export const buttonOpen = style({
+  borderBottomLeftRadius: 0,
+  borderBottomRightRadius: 0,
+});
+
+export const content = style({padding: dimensions.padding, overflow: 'hidden'});

package/src/components/Collapsible/index.tsx

@@ -0,0 +1,132 @@
+import {ChevronDown, ChevronRight} from 'lucide-react';
+import type {ComponentType, ReactNode} from 'react';
+import React, {useCallback, useRef, useState} from 'react';
+import {
+  button,
+  buttonOpen,
+  collapsible,
+  collapsibleOpen,
+  content,
+} from './index.css.ts';
+import {
+  useCollapsibleIsOpen,
+  useSetCollapsibleIsOpenCallback,
+} from '../../stores/SessionStore.tsx';
+import {Button} from '../Button/index.tsx';
+import {classNames} from '../../common/functions.tsx';
+
+/**
+ * The `Collapsible` component displays a titled box that can be expanded or
+ * collapsed. If the `id` prop is provided, its state is preserved between page
+ * reloads.
+ *
+ * @param props The props for the component.
+ * @returns The Collapsible component.
+ * @example
+ * ```tsx
+ * <Collapsible
+ *   title="TinyWidgets"
+ * >
+ *  <p>Peekaboo!</p>
+ * </Collapsible>
+ * ```
+ * This example shows the basic Collapsible component.
+ * @example
+ * ```tsx
+ * <Collapsible
+ *   title="TinyWidgets"
+ *   icon={Lucide.Grid3x3}
+ *   startOpen={true}
+ * >
+ *  <p>Already open</p>
+ * </Collapsible>
+ * ```
+ * This example shows a Collapsible component with an icon and which starts
+ * open.
+ * @example
+ * ```tsx
+ * <Collapsible
+ *   title="TinyWidgets"
+ *   id="example"
+ * >
+ *  <p>Reload the window</p>
+ * </Collapsible>
+ * ```
+ * This example shows a Collapsible component where its state is preserved
+ * between page reloads.
+ * @icon Lucide.PanelTopOpen
+ */
+export const Collapsible = ({
+  icon: Icon,
+  title,
+  titleRight,
+  startOpen = false,
+  id = '',
+  className,
+  children,
+}: {
+  /**
+   * An optional component which renders an icon for the top of the collapsible
+   * component, and which must accept a className prop.
+   */
+  readonly icon?: ComponentType<{className?: string}>;
+  /**
+   * An optional component, element, or string which renders the title of
+   * the top of the component.
+   */
+  readonly title?: ComponentType | ReactNode;
+  /**
+   * An optional component, element, or string which renders a second title
+   * on the right side of the top of the component.
+   */
+  readonly titleRight?: ComponentType | ReactNode;
+  /**
+   * Whether the section should start opened up.
+   */
+  readonly startOpen?: boolean;
+  /**
+   * An Id which will allow the state to be preserved between page reloads.
+   */
+  readonly id?: string;
+  /**
+   * An extra CSS class name for the component.
+   */
+  readonly className?: string;
+  /**
+   * The children of the component, that go inside the collapsible section.
+   */
+  readonly children: ReactNode;
+}) => {
+  const storedIsOpen = useCollapsibleIsOpen(id) ?? startOpen;
+  const setStoredIsOpen = useSetCollapsibleIsOpenCallback(id);
+  const [stateIsOpen, setStateIsOpen] = useState(startOpen);
+
+  const isOpen = id ? storedIsOpen : stateIsOpen;
+  const setIsOpen = id ? setStoredIsOpen : setStateIsOpen;
+
+  const [render, setRender] = useState(isOpen);
+  const timer = useRef<ReturnType<typeof setTimeout>>();
+
+  const toggle = useCallback(() => {
+    setIsOpen(!isOpen);
+    clearTimeout(timer.current);
+    timer.current = setTimeout(() => setRender(!isOpen), isOpen ? 200 : 0);
+  }, [setIsOpen, isOpen]);
+
+  return (
+    <div className={classNames(collapsible, isOpen && collapsibleOpen)}>
+      <Button
+        onClick={toggle}
+        icon={Icon}
+        title={title}
+        titleRight={titleRight}
+        iconRight={isOpen ? ChevronDown : ChevronRight}
+        className={classNames(button, render && buttonOpen)}
+        current={render}
+      />
+      {render ? (
+        <div className={classNames(content, className)}>{children}</div>
+      ) : null}
+    </div>
+  );
+};

package/src/{Detail → components/Detail}/index.css.ts

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

package/src/components/Detail/index.tsx

@@ -0,0 +1,48 @@
+import {detailCell, detailRow, detailTable} from './index.css';
+import React from 'react';
+import type {ReactNode} from 'react';
+import {classNames} from '../../common/functions';
+
+/**
+ * The `Detail` component displays a set of key-value pairs in a two-column
+ * table.
+ *
+ * @param props The props for the component.
+ * @returns The Detail component.
+ * @example
+ * ```tsx
+ * <Detail
+ *  data={{
+ *    normal: 'lorem ipsum',
+ *    italic: <i>lorem ipsum</i>,
+ *    underline: <u>lorem ipsum</u>,
+ *  }}
+ * />
+ * ```
+ * This example shows the basic Collapsible component.
+ * @icon Lucide.Table
+ */
+export const Detail = ({
+  data,
+  className,
+}: {
+  /**
+   * The data to display in the detail table. The values can be any React node.
+   */
+  readonly data: Record<string, ReactNode>;
+  /**
+   * An extra CSS class name for the component.
+   */
+  readonly className?: string;
+}) => (
+  <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 → components/Hr}/index.css.ts

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

package/src/components/Hr/index.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import {classNames} from '../../common/functions';
+import {hr} from './index.css';
+
+/**
+ * The `Hr` component displays a styled horizontal rule.
+ *
+ * @param props The props for the component.
+ * @returns The Hr component.
+ * @example
+ * ```tsx
+ * <Hr />
+ * ```
+ * This example shows the basic Hr component.
+ * @icon Lucide.Minus
+ */
+export const Hr = ({
+  className,
+}: {
+  /**
+   * An extra CSS class name for the component.
+   */
+  readonly className?: string;
+}) => {
+  return <hr className={classNames(hr, className)} />;
+};

package/src/components/Image/index.css.ts

@@ -0,0 +1,38 @@
+import {style, styleVariants} from '@vanilla-extract/css';
+import {colors} from '../../css/colors.css';
+import {dimensions} from '../../css/dimensions.css';
+
+export const image = style({
+  display: 'inline-block',
+  flexShrink: 0,
+  width: '100%',
+  maxHeight: 'inherit',
+  selectors: {
+    '&:hover': {
+      backgroundColor: colors.backgroundHover,
+    },
+  },
+});
+
+export const imageVariants = styleVariants({
+  default: {
+    borderRadius: dimensions.radius,
+    boxShadow: colors.shadow,
+  },
+  logo: {
+    width: dimensions.logo,
+    height: dimensions.logo,
+  },
+  avatar: {
+    borderRadius: '50%',
+    border: colors.border,
+    width: dimensions.avatar,
+    height: dimensions.avatar,
+    boxShadow: colors.shadow,
+  },
+  icon: {
+    border: colors.border,
+    width: dimensions.icon,
+    height: dimensions.icon,
+  },
+});

package/src/components/Image/index.tsx

@@ -0,0 +1,85 @@
+import {image, imageVariants} from './index.css.ts';
+import React from 'react';
+import {classNames} from '../../common/functions.tsx';
+
+/**
+ * The `Image` component displays an image, with a number of common variants.
+ *
+ * @param props The props for the component.
+ * @returns The Image component.
+ * @example
+ * ```tsx
+ * <Image
+ *   src="/favicon.svg"
+ *   onClick={() => alert('Clicked!')}
+ *   alt="TinyWidgets"
+ * />
+ * ```
+ * This example shows the `default` variant of the Image component.
+ * @example
+ * ```tsx
+ * <Image
+ *   src="/favicon.svg"
+ *   variant="logo"
+ * />
+ * ```
+ * This example shows the `logo` variant of the Image component.
+ * @example
+ * ```tsx
+ * <Image
+ *   src="/favicon.svg"
+ *   variant="avatar"
+ * />
+ * ```
+ * This example shows the `avatar` variant of the Image component.
+ * @example
+ * ```tsx
+ * <Image
+ *   src="/favicon.svg"
+ *   variant="icon"
+ * />
+ * ```
+ * This example shows the `icon` variant of the Image component.
+ * @icon Lucide.Image
+ */
+export const Image = ({
+  src,
+  onClick,
+  variant = 'default',
+  alt,
+  className,
+}: {
+  /**
+   * The source of the image.
+   */
+  readonly src: string;
+  /**
+   * A handler called when the user clicks on the image.
+   */
+  readonly onClick?: () => void;
+  /**
+   * A variant of the image, one of:
+   * - `default`
+   * - `logo`
+   * - `avatar`
+   * - `icon`
+   */
+  readonly variant?: keyof typeof imageVariants;
+  /**
+   * Alternative text shown when the user hovers over the image.
+   */
+  readonly alt?: string;
+  /**
+   * An extra CSS class name for the component.
+   */
+  readonly className?: string;
+}) => {
+  return (
+    <img
+      src={src}
+      onClick={onClick}
+      title={alt}
+      className={classNames(image, imageVariants[variant], className)}
+    />
+  );
+};

package/src/components/Metric/index.tsx

@@ -0,0 +1,59 @@
+import type {ComponentType, ReactNode} from 'react';
+import {classNames, renderComponentOrNode} from '../../common/functions';
+import {metric, metricLabel, metricNumber} from './index.css';
+import React from 'react';
+import {iconSize} from '../../css/dimensions.css';
+
+/**
+ * The `Metric` component displays a metric as a prominent numerical value with
+ * a label above.
+ *
+ * @param props The props for the component.
+ * @returns The Metric component.
+ * @example
+ * ```tsx
+ * <Metric
+ *   icon={Lucide.ChartLine}
+ *   title="Number"
+ *   number="57"
+ * />
+ * ```
+ * This example shows the basic usage of the Metric component.
+ * @icon Lucide.SquareSigma
+ */
+export const Metric = ({
+  icon: Icon,
+  title: titleComponentOrNode,
+  number: numberComponentOrNode,
+  className,
+}: {
+  /**
+   * An optional component which renders an icon for the metric panel, and which
+   * must accept a className prop.
+   */
+  readonly icon?: ComponentType<{className?: string}>;
+  /**
+   * An optional component, element, or string which renders the title of
+   * the metric panel.
+   */
+  readonly title?: ComponentType | ReactNode;
+  /**
+   * An optional component, element, or string which renders the number of
+   * the metric panel.
+   */
+  readonly number?: ComponentType | ReactNode;
+  /**
+   * An extra CSS class name for the component.
+   */
+  readonly className?: string;
+}) => (
+  <div className={classNames(metric, className)}>
+    <div className={metricLabel}>
+      {Icon ? <Icon className={iconSize} /> : null}
+      {renderComponentOrNode(titleComponentOrNode)}
+    </div>
+    <div className={metricNumber}>
+      {renderComponentOrNode(numberComponentOrNode)}
+    </div>
+  </div>
+);

package/src/components/Row/index.css.ts

@@ -0,0 +1,30 @@
+import {style, styleVariants} from '@vanilla-extract/css';
+import {dimensions} from '../../css/dimensions.css.ts';
+import {notLarge} from '../../common/functions.tsx';
+
+export const row = style({
+  display: 'grid',
+  width: '100%',
+  gap: dimensions.padding,
+  ...notLarge({gridTemplateColumns: '1fr'}),
+});
+
+export const rowVariants = styleVariants({
+  '1|1': {gridTemplateColumns: `calc((100% - ${dimensions.padding})/2) 1fr`},
+  '1|2': {
+    gridTemplateColumns: `calc((100% - ${dimensions.padding}*2)/3) 1fr`,
+  },
+  '2|1': {
+    gridTemplateColumns: `1fr calc((100% - ${dimensions.padding}*2)/3)`,
+  },
+  '1|1|1': {
+    gridTemplateColumns: `1fr 1fr 1fr`,
+  },
+  '1|3': {
+    gridTemplateColumns: `1fr calc((100% - ${dimensions.padding}*3)/4)`,
+  },
+  '3|1': {
+    gridTemplateColumns: `calc((100% - ${dimensions.padding}*3)/4) 1fr`,
+  },
+  '1|1|1|1': {gridTemplateColumns: '1fr 1fr 1fr 1fr'},
+});