aidos-ui 3.0.0

package/src/BaseView.tsx

@@ -0,0 +1,57 @@
+import React from "react";
+import { JSStyle, jss } from "./jss";
+
+const jsStyles: { [key: string]: JSStyle } = {
+  relative: {
+    position: "relative",
+  },
+  grow: {
+    flexGrow: 1,
+  },
+  shrink: {
+    flexShrink: 1,
+  },
+};
+
+export interface BaseViewProps extends React.HTMLAttributes<HTMLElement> {
+  jsStyle?: JSStyle;
+  ref?: React.Ref<HTMLDivElement>;
+  className?: undefined;
+  grow?: boolean;
+  shrink?: boolean;
+  relative?: boolean;
+  tag?: keyof HTMLElementTagNameMap;
+}
+
+export const BaseView = React.forwardRef(
+  (
+    {
+      jsStyle,
+      children,
+      tag,
+      grow,
+      shrink,
+      relative,
+      ...otherProps
+    }: BaseViewProps,
+    ref?: React.Ref<HTMLElement>
+  ) => {
+    const Tag: string = tag ?? "div";
+
+    return (
+      // @ts-ignore
+      <Tag
+        ref={ref}
+        className={jss([
+          jsStyle,
+          grow && jsStyles.grow,
+          shrink && jsStyles.shrink,
+          relative && jsStyles.relative,
+        ])}
+        {...otherProps}
+      >
+        {children}
+      </Tag>
+    );
+  }
+);

package/src/Box.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { FlexLayout, FlexLayoutProps } from "./FlexLayout";
+
+export interface BoxProps extends FlexLayoutProps {}
+
+export function Box({
+  padding = "medium",
+  align = "center",
+  justify = "center",
+  ...otherProps
+}: BoxProps) {
+  return (
+    <FlexLayout
+      padding={padding}
+      align={align}
+      justify={justify}
+      {...otherProps}
+    />
+  );
+}

package/src/Button.tsx

@@ -0,0 +1,84 @@
+import React from "react";
+
+import { BaseButton, BaseButtonProps } from "./BaseButton";
+import { Text } from "./Text";
+import { IconType } from "./IconType";
+import { Row } from "./Row";
+import { Icon } from "./Icon";
+import { FlexLayoutProps } from "./FlexLayout";
+import { InteractableColor, getGlyphColor } from "./Interactable";
+import { Align, Gap, Justify, Size, cssVar, getPadding } from "./jss";
+
+export interface ButtonProps extends BaseButtonProps {
+  label: string;
+  color: InteractableColor;
+  size?: Size;
+  icon?: IconType;
+  iconSize?: Size;
+  children?: undefined;
+  iconPosition?: "left" | "right";
+  rowProps?: FlexLayoutProps;
+  align?: Align;
+  gap?: Gap;
+  justify?: Justify;
+}
+
+export const Button = React.forwardRef(
+  (
+    {
+      label,
+      color,
+      bare,
+      disabled,
+      icon,
+      iconSize = "medium",
+      iconPosition = "left",
+      align = "center",
+      gap = "small",
+      justify = "center",
+      jsStyle,
+      size = "medium",
+      ...otherProps
+    }: ButtonProps,
+    ref?: React.Ref<HTMLButtonElement>
+  ) => {
+    return (
+      <BaseButton
+        {...otherProps}
+        bare={bare}
+        ref={ref}
+        color={color}
+        disabled={disabled}
+        jsStyle={[
+          {
+            borderRadius: cssVar("--border-radius-m"),
+            justifyContent: "center",
+            userSelect: "none",
+          },
+          getPadding("medium"),
+          jsStyle,
+        ]}
+      >
+        <Row grow={true} align={align} gap={gap} justify={justify}>
+          {icon && iconPosition === "left" && (
+            <Icon
+              icon={icon}
+              size={iconSize}
+              color={getGlyphColor(color, disabled, bare)}
+            />
+          )}
+          <Text size={size} color={getGlyphColor(color, disabled, bare)}>
+            {label}
+          </Text>
+          {icon && iconPosition === "right" && (
+            <Icon
+              icon={icon}
+              size={iconSize}
+              color={getGlyphColor(color, disabled, bare)}
+            />
+          )}
+        </Row>
+      </BaseButton>
+    );
+  }
+);

package/src/Calendar.tsx

@@ -0,0 +1,125 @@
+import React, { useMemo } from "react";
+import { BaseView } from "./BaseView";
+import { JSStyle } from "./jss";
+
+const dateFormatter = Intl.DateTimeFormat("en-UK", {
+  weekday: "short",
+});
+
+const MON = dateFormatter.format(new Date(2000, 1, 7));
+const TUE = dateFormatter.format(new Date(2000, 1, 8));
+const WED = dateFormatter.format(new Date(2000, 1, 9));
+const THU = dateFormatter.format(new Date(2000, 1, 10));
+const FRI = dateFormatter.format(new Date(2000, 1, 11));
+const SAT = dateFormatter.format(new Date(2000, 1, 12));
+const SUN = dateFormatter.format(new Date(2000, 1, 13));
+
+export const Calendar = React.forwardRef(
+  (
+    {
+      date,
+      cell,
+      header,
+      jsStyle,
+    }: {
+      date: Date;
+      header: (props: { weekday: string }) => JSX.Element;
+      jsStyle?: JSStyle;
+      cell: (props: {
+        today?: boolean;
+        date: Date;
+        outOfMonth: boolean;
+        top: boolean;
+        left: boolean;
+        right: boolean;
+        bottom: boolean;
+      }) => JSX.Element;
+    },
+    ref?: React.Ref<HTMLElement>
+  ) => {
+    const year = date.getFullYear();
+    const month = date.getMonth();
+
+    const daysInMonth = new Date(year, month + 1, 0).getDate();
+
+    const firstDayOfTheMonth = new Date(year, month, 1).getDay();
+    const offset = firstDayOfTheMonth === 0 ? 6 : firstDayOfTheMonth - 1;
+    const headers = useMemo(() => {
+      return (
+        <>
+          {header({ weekday: MON })}
+          {header({ weekday: TUE })}
+          {header({ weekday: WED })}
+          {header({ weekday: THU })}
+          {header({ weekday: FRI })}
+          {header({ weekday: SAT })}
+          {header({ weekday: SUN })}
+        </>
+      );
+    }, []);
+
+    return (
+      <BaseView
+        ref={ref}
+        jsStyle={[
+          {
+            display: "grid",
+            gridTemplateColumns: "1fr 1fr 1fr 1fr 1fr 1fr 1fr",
+            gridTemplateRows: "1fr",
+          },
+          jsStyle,
+        ]}
+      >
+        {headers}
+        {Array.from(Array(offset).keys()).map((index) => {
+          const dayDate = new Date(
+            date.getFullYear(),
+            date.getMonth(),
+            index + 1 - offset
+          );
+
+          return (
+            <React.Fragment key={dayDate.toISOString()}>
+              {cell({
+                date: dayDate,
+                today: false,
+                top: true,
+                left: index % 7 === 0,
+                outOfMonth: true,
+                right: false,
+                bottom: false,
+              })}
+            </React.Fragment>
+          );
+        })}
+
+        {Array.from(Array(daysInMonth).keys()).map((index) => {
+          const dayDate = new Date(
+            date.getFullYear(),
+            date.getMonth(),
+            index + 1,
+            12 // If we do not add this the ISO string would be from the day before at midnight
+          );
+
+          return (
+            <React.Fragment key={dayDate.toISOString()}>
+              {cell({
+                date: dayDate,
+                top: index + offset < 7,
+                left: (index + offset) % 7 === 0,
+                right:
+                  (index + offset) % 7 === 7 - 1 || index === daysInMonth - 1,
+                bottom: index > daysInMonth - 7 - 1,
+                outOfMonth: false,
+                today:
+                  dayDate.getDate() == new Date().getDate() &&
+                  dayDate.getMonth() == new Date().getMonth() &&
+                  dayDate.getFullYear() == new Date().getFullYear(),
+              })}
+            </React.Fragment>
+          );
+        })}
+      </BaseView>
+    );
+  }
+);

package/src/Card.tsx

@@ -0,0 +1,17 @@
+import { BaseView } from "./BaseView";
+import { cssVar } from "./jss";
+
+export function Card({ children }: { children: JSX.Element }) {
+  return (
+    <BaseView
+      jsStyle={{
+        backgroundColor: cssVar("--primary-background"),
+        borderRadius: cssVar("--border-radius-l"),
+        padding: cssVar("--spacing-l"),
+        border: `1px solid ${cssVar("--divider")}`,
+      }}
+    >
+      {children}
+    </BaseView>
+  );
+}

package/src/Checkbox.tsx

@@ -0,0 +1,63 @@
+import React from "react";
+import { BaseInput, BaseInputProps } from "./BaseInput";
+import {} from "./BaseView";
+import { Size, jss } from "./jss";
+import { StaticCheckbox, sizes } from "./StaticCheckbox";
+
+// @ts-ignore
+interface CheckboxProps extends BaseInputProps {
+  checked: boolean;
+  onClick: () => void;
+  size: Size;
+  value?: undefined;
+  onChange?: undefined;
+}
+
+export function Checkbox({
+  checked,
+  onClick,
+  size,
+  ...inputProps
+}: CheckboxProps) {
+  return (
+    <label
+      className={jss({
+        position: "relative",
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        height: sizes[size],
+        width: sizes[size],
+        ":has(:focus-visible)": {
+          outline: "2px solid var(--outline)",
+          borderRadius: "50%",
+        },
+        ":has(:active)": {
+          transform: "scale(0.92)",
+        },
+      })}
+    >
+      <StaticCheckbox checked={checked} size={size} />
+      <BaseInput
+        {...inputProps}
+        type="checkbox"
+        role="checkbox"
+        aria-checked={`${checked}`}
+        tabIndex={0}
+        checked={checked}
+        onChange={onClick}
+        jsStyle={{
+          position: "absolute",
+          opacity: 0,
+          cursor: "pointer",
+          top: 0,
+          bottom: 0,
+          left: 0,
+          right: 0,
+          width: "100%",
+          height: "100%",
+        }}
+      />
+    </label>
+  );
+}

package/src/Circle.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { Box, BoxProps } from "./Box";
+
+interface CircleProps extends BoxProps {}
+
+export function Circle({
+  jsStyle,
+  padding = "medium",
+  ...otherProps
+}: CircleProps) {
+  return (
+    <Box
+      padding={padding}
+      jsStyle={[
+        {
+          borderRadius: "50%",
+          overflow: "hidden",
+        },
+        jsStyle,
+      ]}
+      {...otherProps}
+    />
+  );
+}

package/src/Column.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import { FlexLayout, FlexLayoutProps } from "./FlexLayout";
+
+export interface ColumnProps extends FlexLayoutProps {
+  direction?: "column";
+}
+
+export const Column = React.forwardRef(
+  (props: ColumnProps, ref?: React.Ref<HTMLDivElement>) => {
+    return <FlexLayout ref={ref} direction="column" {...props} />;
+  }
+);

package/src/DarkMode.tsx

@@ -0,0 +1,99 @@
+import React, { ReactNode, useContext, useEffect, useState } from "react";
+import { IconButton } from "./IconButton";
+import { BaseView } from "./BaseView";
+
+type State = {
+  enabled: boolean;
+  toggle: () => void;
+};
+
+export const DarkModeContext = React.createContext<State>({
+  enabled: false,
+  toggle: () => {},
+});
+
+if (typeof window !== "undefined") {
+  const darkMode = document.cookie
+    .split(";")
+    .map((c) => c.trim())
+    .filter((c) => c.startsWith("dark-mode="))
+    .map((s) => s.split("=")[1])
+    .map((s) => s)
+    .pop();
+
+  if (darkMode === "true") {
+    document.body.classList.add("dark-mode");
+  }
+}
+
+export function DarkModeProvider({
+  children,
+  enabled,
+  toggle,
+}: {
+  children: ReactNode;
+  enabled: boolean;
+  toggle: () => void;
+}) {
+  useEffect(() => {
+    const statusBarMeta = document.head.querySelector(
+      'meta[name="apple-mobile-web-app-status-bar-style"]'
+    );
+    const themeColorMeta = document.head.querySelector(
+      'meta[name="theme-color"]'
+    );
+
+    if (enabled) {
+      document.body.classList.add("dark-mode");
+      if (statusBarMeta != null) {
+        // @ts-ignore
+        statusBarMeta.content = "black-translucent";
+      }
+      if (themeColorMeta != null) {
+        // @ts-ignore
+        themeColorMeta.content = "rgb(42, 43, 46)";
+      }
+    } else {
+      document.body.classList.remove("dark-mode");
+      if (statusBarMeta != null) {
+        // @ts-ignore
+        statusBarMeta.content = "default";
+      }
+      if (themeColorMeta != null) {
+        // @ts-ignore
+        themeColorMeta.content = "rgb(239, 239, 244)";
+      }
+    }
+  }, [enabled]);
+
+  return (
+    <DarkModeContext.Provider value={{ enabled, toggle }}>
+      {children}
+    </DarkModeContext.Provider>
+  );
+}
+
+export function DarkModeToggle() {
+  const darkMode = useContext(DarkModeContext);
+
+  const [show, setShow] = useState(false);
+
+  useEffect(() => {
+    setShow(true);
+  }, []);
+
+  if (!show) {
+    return <BaseView jsStyle={{ width: 32, height: 32 }} />;
+  }
+
+  return (
+    <IconButton
+      aria-label="Toggle dark mode"
+      icon={darkMode.enabled ? "fa-sun-o" : "fa-moon-o"}
+      size="medium"
+      onClick={darkMode.toggle}
+      color="secondary"
+      bare
+    />
+  );
+}

package/src/DateInput.tsx

@@ -0,0 +1,63 @@
+import React, { ReactNode } from "react";
+import { BaseInput, BaseInputProps } from "./BaseInput";
+import { Box } from "./Box";
+import { Icon } from "./Icon";
+import { IconType } from "./IconType";
+import { Row } from "./Row";
+import { JSStyle } from "./jss";
+
+export interface DateInputProps extends BaseInputProps {
+  onDateChange: (date: Date) => void;
+  date: Date;
+  icon?: IconType;
+  addOn?: ReactNode;
+  onChange?: undefined;
+  jsStyles?: JSStyle;
+}
+
+export const DateInput = React.forwardRef(
+  (
+    { date, onDateChange, jsStyle, icon, addOn, ...inputProps }: DateInputProps,
+    ref?: React.Ref<HTMLInputElement>
+  ) => {
+    return (
+      <Row
+        jsStyle={{
+          backgroundColor: "inherit",
+        }}
+      >
+        {icon && (
+          <Box padding="medium">
+            <Icon size="medium" color="secondary" icon={icon} />
+          </Box>
+        )}
+        <BaseInput
+          {...inputProps}
+          type="date"
+          ref={ref}
+          value={date.toISOString().substring(0, 10)}
+          onChange={(e) => onDateChange(new Date(e.target.value))}
+          jsStyle={[
+            {
+              flexGrow: 1,
+              backgroundColor: "inherit",
+              color: "var(--primary-text)",
+              outline: "none",
+              border: "none",
+              fontSize: 20,
+              lineHeight: 24 / 20,
+              "::placeholder": {
+                color: "var(--subtle-text);",
+              },
+              ":disabled": {
+                color: "var(--subtle-text);",
+              },
+            },
+            jsStyle,
+          ]}
+        />
+        {addOn}
+      </Row>
+    );
+  }
+);

package/src/DatePicker.tsx

@@ -0,0 +1,67 @@
+import React, { useRef } from "react";
+import { Text } from "./Text";
+import { TextColor, jss } from "./jss";
+
+const jsStyles = {
+  dateInput: {
+    border: "1px solid var(--divider)",
+    backgroundColor: "var(--primary-background)",
+    padding: "var(--spacing-m)",
+    color: "var(--primary-text)",
+    fontSize: 20,
+    lineHeight: 24 / 20,
+  },
+};
+
+export interface DatePickerProps {
+  id: string;
+  label: string;
+  date: Date;
+  color?: TextColor;
+  min?: string;
+  max?: string;
+  onDateChange: (date: Date) => void;
+}
+
+export function DatePicker({
+  id,
+  label,
+  color = "primary",
+  date,
+  onDateChange,
+}: DatePickerProps) {
+  const initialDate = useRef(date);
+  const year = initialDate.current.getFullYear();
+  const month = initialDate.current.getMonth();
+  const day = initialDate.current.getDate();
+  const min = new Date(year - 1, month, day).toISOString().substring(0, 10);
+  const max = new Date(year + 1, month, day).toISOString().substring(0, 10);
+
+  return (
+    <>
+      <label htmlFor={id}>
+        <Text size="small" color={color}>
+          {label}
+        </Text>
+      </label>
+      <input
+        min={min}
+        max={max}
+        className={jss(jsStyles.dateInput)}
+        type="date"
+        id={id}
+        value={date.toISOString().substring(0, 10)}
+        onChange={(event) => {
+          let parsedDate;
+          try {
+            parsedDate = new Date(event.target.value);
+          } finally {
+            if (parsedDate != null) {
+              onDateChange(parsedDate);
+            }
+          }
+        }}
+      ></input>
+    </>
+  );
+}

package/src/DatetimeInput.tsx

@@ -0,0 +1,71 @@
+import React, { ReactNode } from "react";
+import { BaseInput, BaseInputProps } from "./BaseInput";
+import { Box } from "./Box";
+import { Icon } from "./Icon";
+import { IconType } from "./IconType";
+import { Row } from "./Row";
+import { JSStyle } from "./jss";
+
+export interface DatetimeInputProps extends BaseInputProps {
+  onDateChange: (date: Date) => void;
+  date: Date;
+  icon?: IconType;
+  addOn?: ReactNode;
+  onChange?: undefined;
+  jsStyle?: JSStyle;
+}
+
+const jsStyles = {
+  root: {
+    backgroundColor: "var(--primary-background)",
+  },
+  input: {
+    padding: "var(--spacing-m)",
+    flexGrow: 1,
+    backgroundColor: "var(--primary-background)",
+    color: "var(--primary-text)",
+    outline: "none",
+    border: "none",
+    fontSize: 20,
+    lineHeight: 24 / 20,
+    "::placeholder": {
+      color: "var(--subtle-text);",
+    },
+    ":disabled": {
+      color: "var(--subtle-text);",
+    },
+  },
+};
+
+export const DatetimeInput = React.forwardRef(
+  (
+    {
+      date,
+      onDateChange,
+      jsStyle,
+      icon,
+      addOn,
+      ...inputProps
+    }: DatetimeInputProps,
+    ref?: React.Ref<HTMLInputElement>
+  ) => {
+    return (
+      <Row jsStyle={jsStyles.root}>
+        {icon && (
+          <Box padding="medium">
+            <Icon size="medium" color="secondary" icon={icon} />
+          </Box>
+        )}
+        <BaseInput
+          {...inputProps}
+          type="datetime-local"
+          ref={ref}
+          value={date.toISOString().substring(0, 16)}
+          onChange={(e) => onDateChange(new Date(e.target.value))}
+          jsStyle={[jsStyles.input, jsStyle]}
+        />
+        {addOn}
+      </Row>
+    );
+  }
+);