@tcn/ui 0.0.1

package/src/actions/button/base_button/base_button.tsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import classNames from 'classnames';
+import type { Hierarchy, Size } from '../../../utils/index.js';
+import { HStack } from '../../../stacks/h_stack.js';
+import type { HStackOwnProps } from '../../../stacks/h_stack.js';
+import styles from './base_button.module.css';
+import type { WithDetailedHTMLProps } from '../../../stacks/types/as.js';
+
+export interface BaseButtonOwnProps {
+  hierarchy?: Hierarchy;
+  size?: Size;
+  color?: string;
+}
+
+export type BaseButtonWithStackProps = BaseButtonOwnProps &
+  HStackOwnProps & {
+    children?: React.ReactNode;
+  };
+
+export type BaseButtonProps = WithDetailedHTMLProps<BaseButtonWithStackProps, 'button'>;
+
+export const BaseButton = React.forwardRef<HTMLButtonElement, BaseButtonProps>(
+  function BaseButton(
+    {
+      children,
+      className,
+      style,
+      color,
+      hierarchy = 'secondary',
+      size = 'medium',
+      onTouchStart,
+      onContextMenu,
+      ...props
+    },
+    ref
+  ) {
+    const handleTouchStart = (event: React.TouchEvent<HTMLButtonElement>) => {
+      if (onTouchStart == null) {
+        event.preventDefault();
+        return;
+      }
+      onTouchStart(event);
+    };
+
+    const handleContextMenu = (event: React.MouseEvent<HTMLButtonElement>) => {
+      if (onContextMenu == null) {
+        event.preventDefault();
+        return;
+      }
+      onContextMenu(event);
+    };
+
+    const finalStyle: React.CSSProperties = {
+      ...style,
+    };
+
+    if (color) {
+      finalStyle['--button-color'] = color;
+    }
+
+    return (
+      <HStack
+        ref={ref}
+        as="button"
+        inline
+        vAlign="center"
+        hAlign="center"
+        data-hierarchy={hierarchy}
+        data-size={size}
+        data-is-disabled={Boolean(props.disabled)}
+        className={classNames(styles['base-button'], 'base-button', className)}
+        style={finalStyle}
+        onTouchStart={handleTouchStart}
+        onContextMenu={handleContextMenu}
+        {...props}
+      >
+        {children}
+      </HStack>
+    );
+  }
+);

package/src/actions/button/button/button.module.css

@@ -0,0 +1,129 @@
+.button {
+  --button-height: calc(26px * var(--scalar, 1));
+  --button-color: var(--accent-color);
+  --button-color-hover: color-mix(in srgb, var(--button-color) 90%, black);
+  --button-color-active: color-mix(in srgb, var(--button-color) 75%, black);
+  --button-color-disabled: var(--status-disabled, #cccccc);
+
+  min-height: var(--button-height);
+  padding: 4px 8px;
+  border-radius: 4px;
+  width: auto;
+  border: 1px solid transparent;
+  outline: none;
+  cursor: pointer;
+  background: transparent;
+  font-size: calc(14px * var(--scalar, 1));
+  line-height: calc(16px * var(--scalar, 1));
+}
+
+.button:focus-visible {
+  outline: 3px solid color-mix(in srgb, var(--button-color) 40%, transparent);
+}
+
+/* Primary */
+.button[data-hierarchy="primary"] {
+  background: var(--button-color);
+  color: #ffffff;
+}
+
+.button[data-hierarchy="primary"]:hover {
+  background: var(--button-color-hover);
+  color: #ffffff;
+}
+
+.button[data-hierarchy="primary"]:active {
+  background: var(--button-color-active);
+  box-shadow: none;
+}
+
+/* Secondary */
+.button[data-hierarchy="secondary"] {
+  color: rgb(57, 85, 120);
+  border-color: rgb(57, 85, 120);
+}
+
+.button[data-hierarchy="secondary"]:hover {
+  background: color-mix(in srgb, rgb(57, 85, 120) 10%, rgb(255, 255, 255, 0.5));
+}
+
+.button[data-hierarchy="secondary"]:active {
+  background: color-mix(in srgb, rgb(57, 85, 120) 25%, rgb(255, 255, 255, 0.5));
+}
+
+/* Tertiary */
+.button[data-hierarchy="tertiary"] {
+  border-color: transparent;
+  color: rgb(57, 85, 120);
+}
+
+.button[data-hierarchy="tertiary"]:hover {
+  text-decoration: underline;
+  text-decoration-color: rgb(57, 85, 120);
+  text-decoration-thickness: 1px;
+  text-underline-offset: 2px;
+}
+
+.button[data-hierarchy="tertiary"]:active {
+  opacity: 0.5;
+}
+
+/* Disabled */
+.button[data-is-disabled="true"] {
+  pointer-events: none;
+  background: var(--button-color-disabled);
+  color: #ffffff;
+  border-color: var(--button-color-disabled);
+}
+
+/* Disabled Secondary */
+.button[data-hierarchy="secondary"][data-is-disabled="true"] {
+  background: transparent;
+  color: var(--button-color-disabled);
+  border-color: var(--button-color-disabled);
+}
+
+/* Disabled Tertiary */
+.button[data-hierarchy="tertiary"][data-is-disabled="true"] {
+  background: transparent;
+  color: var(--button-color-disabled);
+  border-color: transparent;
+}
+
+/* Sizes */
+.button[data-size="sm"] {
+  --button-height: calc(22px * var(--scalar, 1));
+}
+
+.button[data-size="md"] {
+  --button-height: calc(26px * var(--scalar, 1));
+}
+
+.button[data-size="lg"] {
+  --button-height: calc(32px * var(--scalar, 1));
+}
+
+/* Button Text Sizes */
+.button[data-size="sm"] .button-text {
+  font-size: calc(12px * var(--scalar, 1));
+}
+
+.button[data-size="md"] .button-text {
+  font-size: calc(14px * var(--scalar, 1));
+}
+
+.button[data-size="lg"] .button-text {
+  font-size: calc(16px * var(--scalar, 1));
+}
+
+.button[data-size="sm"] {
+  font-size: calc(12px * var(--scalar, 1));
+}
+
+.button[data-size="md"] {
+  font-size: calc(14px * var(--scalar, 1));
+}
+
+.button[data-size="lg"] {
+  font-size: calc(16px * var(--scalar, 1));
+}

package/src/actions/button/button/button.tsx

@@ -0,0 +1,21 @@
+import cln from 'classnames';
+import React from 'react';
+import { BaseButton, BaseButtonProps } from '../base_button/base_button.js';
+import styles from './button.module.css';
+
+export interface ButtonProps extends BaseButtonProps {}
+
+export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function Button(
+  { children, className, ...props },
+  ref
+) {
+  return (
+    <BaseButton ref={ref} className={cln(styles.button, 'button', className)} {...props}>
+      {typeof children === 'string' ? (
+        <span className={cln(styles['button-text'], 'button-text')}>{children}</span>
+      ) : (
+        children
+      )}
+    </BaseButton>
+  );
+});

package/src/actions/button/button_group/button_group.module.css

@@ -0,0 +1,67 @@
+:where(.button-group) {
+  --button-background: var(--surface-color, transparent);
+  border-radius: 4px;
+}
+
+:where(.button-group-button) {
+  background-color: var(--button-background);
+  z-index: 1;
+}
+
+:where(.button-group-divider) {
+  display: none;
+}
+
+.button-group-button:not(:first-child) {
+  margin-left: -1px;
+}
+
+.button-group-button:is(:focus, :focus-visible, :hover, :active) {
+  z-index: 2;
+}
+
+.button-group-button:not(:first-child),
+.button-group-button:not(:last-child) {
+  border-radius: 0px;
+}
+
+.button-group-button:last-child {
+  border-end-end-radius: 4px;
+  border-start-end-radius: 4px;
+}
+
+.button-group-button:first-child {
+  border-start-start-radius: 4px;
+  border-end-start-radius: 4px;
+}
+
+.button-group-button:last-child {
+  border-inline-start-width: 0;
+}
+
+.button-group-button:first-child {
+  border-inline-end-width: 0;
+}
+
+.button-group-button:only-child {
+  border-inline-end-width: 1px;
+  border-inline-start-width: 1px;
+}
+
+/* Sizes */
+:where(.button-group[data-size="sm"]) {
+  --button-height: calc(22px * var(--scalar, 1));
+}
+
+:where(.button-group[data-size="md"]) {
+  --button-height: calc(26px * var(--scalar, 1));
+}
+
+:where(.button-group[data-size="lg"]) {
+  --button-height: calc(32px * var(--scalar, 1));
+}
+
+/* Disabled */
+:where(.button-group-button[data-is-disabled="true"]) {
+  z-index: 0;
+}

package/src/actions/button/button_group/button_group.tsx

@@ -0,0 +1,69 @@
+import type { Hierarchy, Size } from '../../../utils/index.js';
+import { HStack } from '../../../stacks/h_stack.js';
+import type { WithDetailedHTMLProps } from '../../../stacks/types/as.js';
+import classNames from 'classnames';
+import React from 'react';
+import { Button, ButtonProps } from '../button/button.js';
+import styles from './button_group.module.css';
+
+export interface ButtonGroupOwnProps {
+  hierarchy?: Hierarchy;
+  size?: Size;
+  children: React.ReactElement<ButtonProps> | React.ReactElement<ButtonProps>[];
+}
+
+export type ButtonGroupProps = WithDetailedHTMLProps<ButtonGroupOwnProps, 'div'>;
+
+export const ButtonGroup = React.forwardRef<HTMLDivElement, ButtonGroupProps>(
+  function ButtonGroup(
+    { children, className, hierarchy = 'secondary', size = 'md', ...props },
+    ref
+  ) {
+    const buttons: React.ReactElement<ButtonProps>[] = Array.isArray(children)
+      ? children
+      : [children];
+
+    return (
+      <HStack
+        ref={ref}
+        as="div"
+        inline
+        width="auto"
+        height="auto"
+        data-hierarchy={hierarchy}
+        data-size={size}
+        className={classNames(styles['button-group'], 'button-group', className)}
+        {...props}
+      >
+        {buttons.map((button, i) => {
+          const isLast = buttons.length - 1 === i;
+
+          return (
+            <React.Fragment key={i}>
+              <Button
+                {...button.props}
+                className={classNames(
+                  styles['button-group-button'],
+                  'button-group-button',
+                  button.props.className
+                )}
+                hierarchy={hierarchy}
+                size={size}
+              />
+              {!isLast && (
+                <div
+                  className={classNames(
+                    styles['button-group-divider'],
+                    'button-group-divider'
+                  )}
+                  data-hierarchy={hierarchy}
+                  data-size={size}
+                />
+              )}
+            </React.Fragment>
+          );
+        })}
+      </HStack>
+    );
+  }
+);

package/src/actions/button/select_group/select_group.module.css

@@ -0,0 +1,67 @@
+.select-group {
+  --button-background: var(--surface-color, transparent);
+  border-radius: 4px;
+}
+
+.select-group-option {
+  background-color: var(--button-background);
+  z-index: 1;
+}
+
+.select-group-divider {
+  display: none;
+}
+
+.select-group-option:not(:first-child) {
+  margin-left: -1px;
+}
+
+.select-group-option:is(:focus, :focus-visible, :hover, :active) {
+  z-index: 2;
+}
+
+.select-group-option:not(:first-child),
+.select-group-option:not(:last-child) {
+  border-radius: 0px;
+}
+
+.select-group-option:last-child {
+  border-end-end-radius: 4px;
+  border-start-end-radius: 4px;
+}
+
+.select-group-option:first-child {
+  border-start-start-radius: 4px;
+  border-end-start-radius: 4px;
+}
+
+.select-group-option:last-child {
+  border-inline-start-width: 0;
+}
+
+.select-group-option:first-child {
+  border-inline-end-width: 0;
+}
+
+.select-group-option:only-child {
+  border-inline-end-width: 1px;
+  border-inline-start-width: 1px;
+}
+
+/* Sizes */
+.select-group[data-size="sm"] {
+  --button-height: calc(22px * var(--scalar, 1));
+}
+
+.select-group[data-size="md"] {
+  --button-height: calc(26px * var(--scalar, 1));
+}
+
+.select-group[data-size="lg"] {
+  --button-height: calc(32px * var(--scalar, 1));
+}
+
+/* Disabled */
+.select-group-option[data-is-disabled="true"] {
+  z-index: 0;
+}

package/src/actions/button/select_group/select_group.tsx

@@ -0,0 +1,78 @@
+import { HStack } from '../../../stacks/h_stack.js';
+import type { WithDetailedHTMLProps } from '../../../stacks/types/as.js';
+import classNames from 'classnames';
+import React from 'react';
+import { Button } from '../button/button.js';
+import styles from './select_group.module.css';
+
+export type SelectGroupChangeCallback = (values: string[]) => void;
+export interface SelectGroupOwnProps {
+  value: string[];
+  disabled?: boolean;
+}
+
+export type SelectGroupProps = Omit<
+  WithDetailedHTMLProps<SelectGroupOwnProps, 'div'>,
+  'onChange'
+> & {
+  onChange?: SelectGroupChangeCallback;
+  children:
+    | React.ReactElement<HTMLOptionElement>
+    | React.ReactElement<HTMLOptionElement>[];
+};
+
+export const SelectGroup = React.forwardRef(function ButtonGroup(
+  { children, value, className, onChange, disabled = false, ...props }: SelectGroupProps,
+  ref: React.Ref<HTMLDivElement>
+) {
+  const options: React.ReactElement<any>[] = Array.isArray(children)
+    ? children
+    : [children];
+
+  const handleChange = (option: string, isSelected: boolean) => {
+    if (disabled) return;
+    const next = [...value];
+    if (isSelected) {
+      const index = value.indexOf(option);
+      index > -1 && next.splice(index, 1);
+    } else {
+      next.push(option);
+    }
+    onChange?.(next);
+  };
+
+  return (
+    <HStack
+      ref={ref}
+      as="div"
+      inline
+      width="auto"
+      height="auto"
+      data-is-disabled={disabled}
+      className={classNames(styles['select-group'], 'select-group', className)}
+      {...props}
+    >
+      {options.map((option, i) => {
+        const isSelected = value.includes(option.props.value);
+        const select = () => {
+          handleChange(option.props.value, isSelected);
+        };
+
+        return (
+          <React.Fragment key={i}>
+            <Button
+              disabled={disabled || option.props.disabled}
+              data-is-disabled={disabled || option.props.disabled}
+              className={classNames(styles['select-group-option'], 'select-group-option')}
+              hierarchy={isSelected ? 'primary' : 'secondary'}
+              onClick={select}
+              value={option.props.value}
+            >
+              {option.props.children}
+            </Button>
+          </React.Fragment>
+        );
+      })}
+    </HStack>
+  );
+});

package/src/actions/button/select_group/single_select_group.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { SelectGroup, SelectGroupProps } from './select_group.js';
+
+export interface SingleSelectGroupOwnProps {
+  value: string;
+  disabled?: boolean;
+  onChange?: (value: string) => void;
+}
+
+export type SingleSelectGroupProps = Omit<
+  SelectGroupProps,
+  'value' | 'onChange' | 'enableMultiselect'
+> &
+  SingleSelectGroupOwnProps;
+
+export const SingleSelectGroup = React.forwardRef(function SingleSelectGroup(
+  {
+    children,
+    value,
+    className,
+    onChange,
+    disabled = false,
+    ...props
+  }: SingleSelectGroupProps,
+  ref: React.Ref<HTMLDivElement>
+) {
+  const handleChange = (values: string[]) => {
+    if (values.length === 0) {
+      return;
+    }
+    // For single select, we take the last selected value or empty string if none selected
+    const singleValue = values.length > 0 ? values[values.length - 1] : '';
+    onChange?.(singleValue);
+  };
+
+  return (
+    <SelectGroup
+      ref={ref}
+      value={value != null ? [value] : []}
+      onChange={handleChange}
+      disabled={disabled}
+      className={className}
+      {...props}
+    >
+      {children}
+    </SelectGroup>
+  );
+});

package/src/actions/button/slim_button/slim_button.module.css

@@ -0,0 +1,33 @@
+.slim-button {
+  min-height: auto;
+}
+
+.slim-button[data-is-disabled="true"] {
+  pointer-events: none;
+}
+
+.slim-button[data-size="sm"] {
+  padding: 1px;
+}
+
+.slim-button[data-size="md"] {
+  padding: 2px;
+}
+
+.slim-button[data-size="lg"] {
+  padding: 3px;
+}
+
+.slim-button[data-hierarchy="tertiary"][data-is-disabled="true"] {
+  background-color: transparent;
+  border: none;
+  color: var(--button-color-disabled);
+  min-height: auto;
+  pointer-events: none;
+}
+
+.slim-button[data-hierarchy="secondary"][data-is-disabled="true"] {
+  background-color: transparent;
+  border: 1px solid var(--button-color-disabled);
+  color: var(--button-color-disabled);
+}

package/src/actions/button/slim_button/slim_button.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import classNames from 'classnames';
+import { Button, ButtonProps } from '../button/button.js';
+import styles from './slim_button.module.css';
+
+export const SlimButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ children, className, ...props }, ref) => {
+    return (
+      <Button
+        ref={ref}
+        className={classNames(styles['slim-button'], 'slim-button', className)}
+        {...props}
+      >
+        {children}
+      </Button>
+    );
+  }
+);

package/src/actions/index.ts

@@ -0,0 +1,19 @@
+// Button Components
+export {
+  BaseButton,
+  type BaseButtonProps,
+} from './button/base_button/base_button.js';
+export {
+  ButtonGroup,
+  type ButtonGroupProps,
+} from './button/button_group/button_group.js';
+export { SlimButton } from './button/slim_button/slim_button.js';
+export { Button, type ButtonProps } from './button/button/button.js';
+export {
+  SelectGroup,
+  type SelectGroupProps,
+} from './button/select_group/select_group.js';
+export {
+  SingleSelectGroup,
+  type SingleSelectGroupProps,
+} from './button/select_group/single_select_group.js';

package/src/feedback/index.ts

@@ -0,0 +1,3 @@
+export * from './loading/loading.js';
+export * from './progress/progress_bar.js';
+export * from './lazy/lazy.js';

package/src/feedback/lazy/lazy.stories.tsx

@@ -0,0 +1,56 @@
+import React, { useState } from 'react';
+import { Lazy } from './lazy.js';
+import { HStack } from '../../stacks/h_stack.js';
+import { Runner } from '@tcn/state';
+
+export default {
+  title: 'lazy',
+};
+
+const delay = (ms: number) => new Promise(resolve => window.setTimeout(resolve, ms));
+const delayRejected = (ms: number) =>
+  new Promise((_, reject) => window.setTimeout(reject, ms));
+const delayRejectedWithMessage = (ms: number) =>
+  new Promise((_, reject) =>
+    window.setTimeout(() => reject(new Error('custom error message')), ms)
+  );
+
+export function WithRunner() {
+  const [runner] = useState(() => {
+    const r = new Runner<string>('');
+    r.dispatch(() => delay(3000).then(() => 'passed me a runner'));
+    return r;
+  });
+
+  return <Lazy runner={runner}>{value => <HStack height="100%">{value}</HStack>}</Lazy>;
+}
+
+export function WithLoadedProp() {
+  const [runner] = useState(() => {
+    const r = new Runner<string>('');
+    r.dispatch(() => delay(3000).then(() => 'happy day'));
+    return r;
+  });
+
+  return <Lazy runner={runner}>{value => <HStack height="100%">{value}</HStack>}</Lazy>;
+}
+
+export function WithRejectedLoader() {
+  const [runner] = useState(() => {
+    const r = new Runner<string>('');
+    r.dispatch(() => delayRejected(3000).then(() => 'happy day'));
+    return r;
+  });
+
+  return <Lazy runner={runner}>{value => <HStack height="100%">{value}</HStack>}</Lazy>;
+}
+
+export function WithRejectedLoaderWithMessage() {
+  const [runner] = useState(() => {
+    const r = new Runner<string>('');
+    r.dispatch(() => delayRejectedWithMessage(3000).then(() => 'happy day'));
+    return r;
+  });
+
+  return <Lazy runner={runner}>{value => <HStack height="100%">{value}</HStack>}</Lazy>;
+}