aidos-ui 4.0.4 → 4.0.6

package/src/Checkbox.tsx

@@ -1,63 +0,0 @@
-import React from "react";
-import { BaseInput, BaseInputProps } from "./BaseInput";
-import {} from "./BaseView";
-import { Size, toClassnames } 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={toClassnames({
-        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}
-        jss={{
-          position: "absolute",
-          opacity: 0,
-          cursor: "pointer",
-          top: 0,
-          bottom: 0,
-          left: 0,
-          right: 0,
-          width: "100%",
-          height: "100%",
-        }}
-      />
-    </label>
-  );
-}

package/src/Circle.tsx

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

package/src/Column.tsx

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

@@ -1,100 +0,0 @@
-import React, { ReactNode, useContext, useEffect, useState } from "react";
-import { IconButton } from "./IconButton";
-import { BaseView } from "./BaseView";
-import { isServer } from "./isServer";
-
-type State = {
-  enabled: boolean;
-  toggle: () => void;
-};
-
-export const DarkModeContext = React.createContext<State>({
-  enabled: false,
-  toggle: () => {},
-});
-
-if (!isServer()) {
-  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 jss={{ 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="primary"
-      bare
-    />
-  );
-}

package/src/DateInput.tsx

@@ -1,63 +0,0 @@
-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 { JSS } from "./jss";
-
-export interface DateInputProps extends BaseInputProps {
-  onDateChange: (date: Date) => void;
-  date: Date;
-  icon?: IconType;
-  addOn?: ReactNode;
-  onChange?: undefined;
-  jss?: JSS;
-}
-
-export const DateInput = React.forwardRef(
-  (
-    { date, onDateChange, jss, icon, addOn, ...inputProps }: DateInputProps,
-    ref?: React.Ref<HTMLInputElement>
-  ) => {
-    return (
-      <Row
-        jss={{
-          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))}
-          jss={[
-            {
-              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);",
-              },
-            },
-            jss,
-          ]}
-        />
-        {addOn}
-      </Row>
-    );
-  }
-);

package/src/DatePicker.tsx

@@ -1,67 +0,0 @@
-import React, { useRef } from "react";
-import { Text } from "./Text";
-import { TextColor, toClassnames } from "./jss";
-
-const styles = {
-  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={toClassnames(styles.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

@@ -1,64 +0,0 @@
-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 { JSS } from "./jss";
-
-export interface DatetimeInputProps extends BaseInputProps {
-  onDateChange: (date: Date) => void;
-  date: Date;
-  icon?: IconType;
-  addOn?: ReactNode;
-  onChange?: undefined;
-  jss?: JSS;
-}
-
-const styles = {
-  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, jss, icon, addOn, ...inputProps }: DatetimeInputProps,
-    ref?: React.Ref<HTMLInputElement>
-  ) => {
-    return (
-      <Row jss={styles.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))}
-          jss={[styles.input, jss]}
-        />
-        {addOn}
-      </Row>
-    );
-  }
-);