aidos-ui 4.0.4 → 4.0.5

package/src/BaseButton.tsx

@@ -1,62 +0,0 @@
-import React from "react";
-import { InteractableColor, getInteractableJSS } from "./Interactable";
-import { JSS, Padding, toClassnames } from "./jss";
-
-export interface BaseButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  onClick: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
-  jss?: JSS;
-  color: InteractableColor;
-  bare?: boolean;
-  border?: boolean;
-  className?: undefined;
-  animateInteraction?: boolean;
-  padding?: Padding;
-}
-
-export const BaseButton = React.forwardRef(
-  (
-    {
-      onClick,
-      children,
-      jss,
-      color,
-      bare = false,
-      border = false,
-      disabled,
-      animateInteraction = true,
-      padding,
-      ...otherProps
-    }: BaseButtonProps,
-    ref?: React.Ref<HTMLButtonElement>
-  ) => {
-    return (
-      <button
-        type="button"
-        {...otherProps}
-        aria-disabled={disabled ? true : undefined}
-        ref={ref}
-        onClick={(event) => {
-          if (disabled) {
-            return;
-          }
-
-          onClick?.(event);
-        }}
-        className={toClassnames([
-          ...getInteractableJSS({
-            color,
-            bare,
-            border,
-            disabled,
-            animateInteraction,
-            padding,
-          }),
-          jss,
-        ])}
-      >
-        {children}
-      </button>
-    );
-  }
-);

package/src/BaseInput.tsx

@@ -1,63 +0,0 @@
-import React, { ReactNode, useId } from "react";
-import { JSS, Size, TextColor, toClassnames } from "./jss";
-import { Label } from "./Text";
-
-export interface BaseInputProps
-  extends React.InputHTMLAttributes<HTMLInputElement> {
-  jss?: JSS;
-  className?: undefined;
-  size?: undefined;
-  children?: undefined;
-  label?: ReactNode;
-  labelSize?: Size;
-  labelColor?: TextColor;
-  labelBold?: boolean;
-  labelPosition?: "start" | "end";
-}
-
-export const BaseInput = React.forwardRef(
-  (
-    {
-      jss,
-      label,
-      labelPosition = "end",
-      labelSize,
-      labelColor,
-      labelBold,
-      id: propId,
-      ...otherProps
-    }: BaseInputProps,
-    ref?: React.Ref<HTMLInputElement>
-  ) => {
-    const hookid = useId();
-    const id = propId ?? hookid;
-    const labelElement = (
-      <Label
-        size={labelSize}
-        bold={labelBold}
-        color={labelColor}
-        jss={{
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-        }}
-        htmlFor={id}
-      >
-        {label}
-      </Label>
-    );
-
-    return (
-      <>
-        {label && labelPosition === "start" && labelElement}
-        <input
-          id={id}
-          ref={ref}
-          className={toClassnames(jss)}
-          {...otherProps}
-        />
-        {label && labelPosition === "end" && labelElement}
-      </>
-    );
-  }
-);

package/src/BaseLink.tsx

@@ -1,80 +0,0 @@
-import React, { useContext } from "react";
-import { InteractableColor, getInteractableJSS } from "./Interactable";
-import { JSS, Padding, toClassnames } from "./jss";
-
-export interface BaseLinkProps
-  extends React.LinkHTMLAttributes<HTMLAnchorElement> {
-  onClick?: (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void;
-  target?: string;
-  jss?: JSS;
-  color: InteractableColor;
-  href: string;
-  disabled?: boolean;
-  bare?: boolean;
-  border?: boolean;
-  className?: undefined;
-  animateInteraction?: boolean;
-  padding?: Padding;
-}
-
-// This only exists to make NextJS happy, it should not be used in any other case
-export const BaseLinkComponentOverrideContext = React.createContext((props) => (
-  <a {...props} />
-));
-
-export const BaseLink = React.forwardRef(
-  (
-    {
-      onClick,
-      children,
-      jss,
-      color,
-      bare = false,
-      disabled,
-      animateInteraction = true,
-      padding,
-      href,
-      border,
-      role = "link",
-      ...otherProps
-    }: BaseLinkProps,
-    ref?: React.Ref<HTMLAnchorElement>
-  ) => {
-    const Link = useContext(BaseLinkComponentOverrideContext);
-
-    return (
-      <Link
-        {...otherProps}
-        aria-disabled={disabled ? true : undefined}
-        href={href}
-        role={role}
-        ref={ref}
-        onClick={
-          onClick
-            ? (event) => {
-                if (disabled) {
-                  return;
-                }
-
-                onClick(event);
-              }
-            : undefined
-        }
-        className={toClassnames([
-          ...getInteractableJSS({
-            color,
-            border,
-            bare,
-            disabled,
-            animateInteraction,
-            padding,
-          }),
-          disabled && { pointerEvents: "none" },
-          jss,
-        ])}
-      >
-        {children}
-      </Link>
-    );
-  }
-);

package/src/BaseList.tsx

@@ -1,26 +0,0 @@
-import React from "react";
-import { Column, ColumnProps } from "./Column";
-
-export interface BaseListProps extends ColumnProps {
-  tag?: undefined;
-}
-
-export const BaseList = React.forwardRef(
-  ({ jss, ...otherProps }: BaseListProps, ref?: React.Ref<HTMLDivElement>) => {
-    return (
-      <Column
-        {...otherProps}
-        tag="ul"
-        jss={[
-          {
-            listStyle: "none",
-            margin: 0,
-            padding: 0,
-          },
-          jss,
-        ]}
-        ref={ref}
-      />
-    );
-  }
-);

package/src/BaseListAddOn.tsx

@@ -1,10 +0,0 @@
-import React from "react";
-import { BaseView, BaseViewProps } from "./BaseView";
-
-export interface BaseListAddOnProps extends BaseViewProps {}
-
-export const BaseListAddOn = React.forwardRef(
-  (props: BaseListAddOnProps, ref?: React.Ref<HTMLDivElement>) => {
-    return <BaseView {...props} ref={ref} />;
-  }
-);

package/src/BaseListItem.tsx

@@ -1,119 +0,0 @@
-import React, { ReactNode } from "react";
-
-import { ListDivider } from "./ListDivider";
-import { Row, RowProps } from "./Row";
-import { JSS, Size, Position, Spacing, TextColor, cssVar } from "./jss";
-import { InteractableColor } from "./Interactable";
-import { TextPairing } from "./TextPairing";
-import { BaseView } from "./BaseView";
-import { useListContext } from "./List";
-
-// @ts-ignore
-export interface BaseListItemProps extends RowProps {
-  children: (elements: { content: React.JSX.Element }) => ReactNode;
-  jss?: JSS;
-  withDivider?: boolean;
-  headline: string;
-  headlineSize?: Size;
-  headlineColor?: TextColor;
-  headlineAddOn?: ReactNode;
-  headlineBold?: boolean;
-  body?: string;
-  bodySize?: Size;
-  bodyColor?: TextColor;
-  addOn?: ReactNode;
-  addOnPosition?: Position;
-  outerAddOn?: ReactNode;
-  disabled?: boolean;
-  role?: undefined;
-  gap?: Spacing;
-  selected?: boolean;
-}
-
-export const BaseListItem = React.forwardRef(
-  (
-    {
-      children,
-      jss,
-      withDivider = true,
-      headline,
-      headlineSize = "medium",
-      headlineColor = "primary",
-      headlineAddOn,
-      body,
-      bodySize = "small",
-      bodyColor = "secondary",
-      addOn,
-      addOnPosition,
-      outerAddOn,
-      disabled = false,
-      padding = "medium",
-      gap = "medium",
-      selected,
-      headlineBold,
-      ...otherProps
-    }: BaseListItemProps,
-    ref?: React.Ref<HTMLElement>
-  ) => {
-    const { bare, carded } = useListContext();
-
-    const content = (
-      <TextPairing
-        headlineBold={headlineBold}
-        padding={padding}
-        gap={gap}
-        addOn={addOn}
-        addOnPosition={addOnPosition}
-        headline={headline}
-        headlineSize={headlineSize}
-        headlineColor={
-          disabled ? "subtle" : bare && selected ? "highlight" : headlineColor
-        }
-        headlineAddOn={headlineAddOn}
-        body={body}
-        bodySize={bodySize}
-        bodyColor={disabled ? "subtle" : bodyColor}
-        grow={true}
-        shrink={false}
-      />
-    );
-
-    return (
-      <>
-        <Row
-          {...otherProps}
-          ref={ref}
-          relative
-          tag="li"
-          role="row"
-          jss={[
-            !bare &&
-              carded && {
-                [":first-child *"]: {
-                  borderTopLeftRadius: cssVar("--border-radius-l"),
-                  borderTopRightRadius: cssVar("--border-radius-l"),
-                },
-                [":last-child *"]: {
-                  borderBottomLeftRadius: cssVar("--border-radius-l"),
-                  borderBottomRightRadius: cssVar("--border-radius-l"),
-                },
-              },
-            jss,
-          ]}
-        >
-          <Row
-            grow
-            role="gridcell"
-            jss={{
-              overflow: "hidden",
-            }}
-          >
-            {children({ content })}
-          </Row>
-          {outerAddOn && <BaseView role="gridcell">{outerAddOn}</BaseView>}
-        </Row>
-        {withDivider && <ListDivider />}
-      </>
-    );
-  }
-);

package/src/BaseView.tsx

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

package/src/Box.tsx

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

@@ -1,90 +0,0 @@
-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 {
-  children: string;
-  color: InteractableColor;
-  size?: Size;
-  icon?: IconType;
-  iconSize?: Size;
-  iconPosition?: "left" | "right";
-  rowProps?: FlexLayoutProps;
-  align?: Align;
-  gap?: Gap;
-  justify?: Justify;
-  bold?: boolean;
-}
-
-export const Button = React.forwardRef(
-  (
-    {
-      children,
-      color,
-      bare,
-      disabled,
-      icon,
-      iconSize = "medium",
-      iconPosition = "left",
-      align = "center",
-      gap = "small",
-      justify = "center",
-      jss,
-      size = "medium",
-      bold,
-      padding = "medium",
-      ...otherProps
-    }: ButtonProps,
-    ref?: React.Ref<HTMLButtonElement>
-  ) => {
-    return (
-      <BaseButton
-        {...otherProps}
-        bare={bare}
-        ref={ref}
-        color={color}
-        disabled={disabled}
-        padding={padding}
-        jss={[
-          {
-            borderRadius: cssVar("--border-radius-m"),
-            justifyContent: "center",
-            userSelect: "none",
-          },
-          jss,
-        ]}
-      >
-        <Row grow={true} align={align} gap={gap} justify={justify}>
-          {icon && iconPosition === "left" && (
-            <Icon
-              icon={icon}
-              size={iconSize}
-              color={getGlyphColor(color, disabled, bare)}
-            />
-          )}
-          <Text
-            bold={bold}
-            size={size}
-            color={getGlyphColor(color, disabled, bare)}
-          >
-            {children}
-          </Text>
-          {icon && iconPosition === "right" && (
-            <Icon
-              icon={icon}
-              size={iconSize}
-              color={getGlyphColor(color, disabled, bare)}
-            />
-          )}
-        </Row>
-      </BaseButton>
-    );
-  }
-);

package/src/Calendar.tsx

@@ -1,123 +0,0 @@
-import React, { cloneElement, useMemo } from "react";
-import { BaseView } from "./BaseView";
-import { JSS } 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,
-      jss,
-    }: {
-      date: Date;
-      header: (props: { weekday: string }) => React.JSX.Element;
-      jss?: JSS;
-      cell: (props: {
-        today?: boolean;
-        date: Date;
-        outOfMonth: boolean;
-        top: boolean;
-        left: boolean;
-        right: boolean;
-        bottom: boolean;
-      }) => React.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}
-        jss={[
-          {
-            display: "grid",
-            gridTemplateColumns: "1fr 1fr 1fr 1fr 1fr 1fr 1fr",
-            gridTemplateRows: "1fr",
-          },
-          jss,
-        ]}
-      >
-        {headers}
-        {Array.from(Array(offset).keys()).map((index) => {
-          const dayDate = new Date(
-            date.getFullYear(),
-            date.getMonth(),
-            index + 1 - offset
-          );
-
-          return cloneElement(
-            cell({
-              date: dayDate,
-              today: false,
-              top: true,
-              left: index % 7 === 0,
-              outOfMonth: true,
-              right: false,
-              bottom: false,
-            }),
-            { key: dayDate.toISOString() }
-          );
-        })}
-
-        {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 cloneElement(
-            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(),
-            }),
-            { key: dayDate.toISOString() }
-          );
-        })}
-      </BaseView>
-    );
-  }
-);

package/src/Card.tsx

@@ -1,30 +0,0 @@
-import { FlexLayout, FlexLayoutProps } from "./FlexLayout";
-import { cssVar } from "./jss";
-
-export interface CardProps extends FlexLayoutProps {}
-
-export function Card({
-  children,
-  jss,
-  padding = "large",
-  gap = "large",
-  ...otherProps
-}: CardProps) {
-  return (
-    <FlexLayout
-      {...otherProps}
-      padding={padding}
-      gap={gap}
-      jss={[
-        {
-          backgroundColor: cssVar("--overlay-background"),
-          borderRadius: cssVar("--border-radius-l"),
-          boxShadow: cssVar("--shadow-sm"),
-        },
-        jss,
-      ]}
-    >
-      {children}
-    </FlexLayout>
-  );
-}