aidos-ui 3.0.0

package/dist/useCookie.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCookie.js","sourceRoot":"","sources":["../src/useCookie.tsx"],"names":[],"mappings":"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"}

package/dist/useKeyboard.d.ts

@@ -0,0 +1,8 @@
+export type KeyboardShortcut<T> = {
+    key: string;
+    metaKey?: boolean;
+    ctrlKey?: boolean;
+    action: (root: T) => void;
+    onlyWhenFocused?: boolean;
+};
+export declare function useKeyboard<T extends HTMLElement>(shortcuts: Array<KeyboardShortcut<T>>): (root: T) => void;

package/dist/useKeyboard.js

@@ -0,0 +1,26 @@
+import { useRefEffect } from "./useRefEffect";
+export function useKeyboard(shortcuts) {
+    return useRefEffect((root) => {
+        const onKeyDown = (e) => {
+            for (const { metaKey, key, action, ctrlKey, onlyWhenFocused, } of shortcuts) {
+                if (metaKey && e.metaKey !== true) {
+                    continue;
+                }
+                else if (ctrlKey && e.ctrlKey !== true) {
+                    continue;
+                }
+                else if (onlyWhenFocused && document.activeElement !== root) {
+                    continue;
+                }
+                if (e.key.toLowerCase() === key.toLowerCase()) {
+                    action(root);
+                }
+            }
+        };
+        window.addEventListener("keydown", onKeyDown);
+        return () => {
+            window.removeEventListener("keydown", onKeyDown);
+        };
+    });
+}
+//# sourceMappingURL=useKeyboard.js.map

package/dist/useKeyboard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useKeyboard.js","sourceRoot":"","sources":["../src/useKeyboard.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAU9C,MAAM,UAAU,WAAW,CACzB,SAAqC;IAErC,OAAO,YAAY,CAAI,CAAC,IAAO,EAAE,EAAE;QACjC,MAAM,SAAS,GAAG,CAAC,CAAgB,EAAE,EAAE;YACrC,KAAK,MAAM,EACT,OAAO,EACP,GAAG,EACH,MAAM,EACN,OAAO,EACP,eAAe,GAChB,IAAI,SAAS,EAAE;gBACd,IAAI,OAAO,IAAI,CAAC,CAAC,OAAO,KAAK,IAAI,EAAE;oBACjC,SAAS;iBACV;qBAAM,IAAI,OAAO,IAAI,CAAC,CAAC,OAAO,KAAK,IAAI,EAAE;oBACxC,SAAS;iBACV;qBAAM,IAAI,eAAe,IAAI,QAAQ,CAAC,aAAa,KAAK,IAAI,EAAE;oBAC7D,SAAS;iBACV;gBAED,IAAI,CAAC,CAAC,GAAG,CAAC,WAAW,EAAE,KAAK,GAAG,CAAC,WAAW,EAAE,EAAE;oBAC7C,MAAM,CAAC,IAAI,CAAC,CAAC;iBACd;aACF;QACH,CAAC,CAAC;QAEF,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;QAE9C,OAAO,GAAG,EAAE;YACV,MAAM,CAAC,mBAAmB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;QACnD,CAAC,CAAC;IACJ,CAAC,CAAC,CAAC;AACL,CAAC"}

package/dist/useNavigation.d.ts

@@ -0,0 +1,5 @@
+export declare function useNavigation({ autofocus, rowLength, enabled, }?: {
+    autofocus?: boolean;
+    rowLength?: number;
+    enabled?: boolean;
+}): (root: HTMLElement) => void;

package/dist/useNavigation.js

@@ -0,0 +1,79 @@
+import { queryFocusables, focusElement, normalizeElements } from "./aria";
+import { useRefEffect } from "./useRefEffect";
+export function useNavigation({ autofocus = false, rowLength = 1, enabled = true, } = {}) {
+    return useRefEffect((root) => {
+        if (!enabled) {
+            return;
+        }
+        let index = 0;
+        const elements = queryFocusables(root);
+        if (elements.length === 0) {
+            return;
+        }
+        if (elements.length !== 0 && autofocus) {
+            focusElement(elements, index);
+        }
+        else {
+            normalizeElements(elements, index);
+        }
+        const onKeyDown = (e) => {
+            const elements = queryFocusables(root);
+            if (elements.length === 0) {
+                return;
+            }
+            let newIndex = -1;
+            if (e.code === "ArrowUp") {
+                if (index - rowLength < 0) {
+                    newIndex = elements.length - (elements.length % rowLength) + index;
+                }
+                else {
+                    newIndex = index - rowLength;
+                }
+            }
+            else if (e.code === "ArrowLeft") {
+                if (index <= 0) {
+                    newIndex = elements.length - 1;
+                }
+                else {
+                    newIndex = index - 1;
+                }
+            }
+            else if (e.code === "ArrowRight") {
+                if (index >= elements.length - 1) {
+                    newIndex = 0;
+                }
+                else {
+                    newIndex = index + 1;
+                }
+            }
+            else if (e.code === "ArrowDown") {
+                if (index + rowLength > elements.length - 1) {
+                    newIndex = (index + rowLength) % rowLength;
+                }
+                else {
+                    newIndex = index + rowLength;
+                }
+            }
+            if (newIndex !== -1 && index !== newIndex) {
+                index = newIndex;
+                focusElement(elements, index);
+                e.preventDefault();
+                e.stopPropagation();
+            }
+        };
+        root.addEventListener("keydown", onKeyDown);
+        const observer = new MutationObserver((mutationList) => {
+            if (mutationList.filter((m) => m.type === "childList").length > 0) {
+                const elements = queryFocusables(root);
+                if (elements.length > 0) {
+                    normalizeElements(elements, index);
+                }
+            }
+        });
+        observer.observe(root, { childList: true });
+        return () => {
+            root.removeEventListener("keydown", onKeyDown);
+        };
+    });
+}
+//# sourceMappingURL=useNavigation.js.map

package/dist/useNavigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useNavigation.js","sourceRoot":"","sources":["../src/useNavigation.tsx"],"names":[],"mappings":"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"}

package/dist/usePromise.d.ts

@@ -0,0 +1 @@
+export declare function usePromise<T>(promiseFactory: () => Promise<T>, inputs: Array<any>, initialValue: T): [T | null, any];

package/dist/usePromise.js

@@ -0,0 +1,12 @@
+import { useState, useEffect } from "react";
+export function usePromise(promiseFactory, inputs, initialValue) {
+    const [value, setValue] = useState(initialValue);
+    const [error, setError] = useState(null);
+    useEffect(() => {
+        promiseFactory()
+            .then((value) => setValue(value))
+            .catch((error) => setError(error));
+    }, inputs);
+    return [value, error];
+}
+//# sourceMappingURL=usePromise.js.map

package/dist/usePromise.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePromise.js","sourceRoot":"","sources":["../src/usePromise.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE5C,MAAM,UAAU,UAAU,CACxB,cAAgC,EAChC,MAAkB,EAClB,YAAe;IAEf,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,YAAY,CAAC,CAAC;IACjD,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IAEzC,SAAS,CAAC,GAAG,EAAE;QACb,cAAc,EAAE;aACb,IAAI,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;aAChC,KAAK,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC;IACvC,CAAC,EAAE,MAAM,CAAC,CAAC;IAEX,OAAO,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;AACxB,CAAC"}

package/dist/useRefEffect.d.ts

@@ -0,0 +1 @@
+export declare function useRefEffect<T>(callback: (root: T) => (() => void) | void): (root: T) => void;

package/dist/useRefEffect.js

@@ -0,0 +1,15 @@
+import { useRef, useCallback } from "react";
+export function useRefEffect(callback) {
+    const unsubscribeRef = useRef(null);
+    const refCallback = useCallback((root) => {
+        if (root === null) {
+            unsubscribeRef.current && unsubscribeRef.current();
+        }
+        else {
+            const unsubscribe = callback(root);
+            unsubscribeRef.current = unsubscribe;
+        }
+    }, []);
+    return refCallback;
+}
+//# sourceMappingURL=useRefEffect.js.map

package/dist/useRefEffect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRefEffect.js","sourceRoot":"","sources":["../src/useRefEffect.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAE5C,MAAM,UAAU,YAAY,CAC1B,QAA0C;IAE1C,MAAM,cAAc,GAAG,MAAM,CAAsB,IAAI,CAAC,CAAC;IAEzD,MAAM,WAAW,GAAG,WAAW,CAAC,CAAC,IAAc,EAAE,EAAE;QACjD,IAAI,IAAI,KAAK,IAAI,EAAE;YACjB,cAAc,CAAC,OAAO,IAAI,cAAc,CAAC,OAAO,EAAE,CAAC;SACpD;aAAM;YACL,MAAM,WAAW,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;YACnC,cAAc,CAAC,OAAO,GAAG,WAAW,CAAC;SACtC;IACH,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,WAAW,CAAC;AACrB,CAAC"}

package/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

package/next.config.js

@@ -0,0 +1,21 @@
+// next.config.js
+
+import mdx from "@next/mdx";
+
+const withMDX = mdx({
+  extension: /\.mdx?$/,
+  options: {
+    remarkPlugins: [],
+    rehypePlugins: [],
+    providerImportSource: "@mdx-js/react",
+  },
+});
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  pageExtensions: ["ts", "tsx", "js", "jsx", "md", "mdx"],
+  reactStrictMode: true,
+};
+
+// Merge MDX config with Next.js config
+export default withMDX(nextConfig);

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "aidos-ui",
+  "version": "3.0.0",
+  "description": "A simple UI framework",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "scripts": {
+    "dev": "next dev",
+    "publish:patch": "node ./scripts/publish.js --patch",
+    "build": "next build",
+    "build:lib": "rimraf ./dist && tsc --project tsconfig.build.json",
+    "tsc": "tsc --watch",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "type": "module",
+  "author": "Gerard Moreno-Torres Bertran",
+  "license": "ISC",
+  "devDependencies": {
+    "@mdx-js/loader": "^2.3.0",
+    "@mdx-js/react": "^2.3.0",
+    "@next/mdx": "^13.4.9",
+    "@types/prismjs": "^1.26.0",
+    "@types/react": "^18.0.26",
+    "@types/react-dom": "^18.0.10",
+    "csstype": "^3.1.1",
+    "install": "^0.13.0",
+    "next": "latest",
+    "npm": "^9.8.0",
+    "prismjs": "^1.29.0",
+    "process": "^0.11.10",
+    "react-dom": "latest",
+    "rimraf": "^5.0.1",
+    "ts-node": "^10.9.1",
+    "typescript": "^4.9.4"
+  },
+  "peerDependencies": {
+    "react": "latest"
+  }
+}

package/scripts/publish.js

@@ -0,0 +1,27 @@
+import { spawnSync } from "child_process";
+
+async function run() {
+  const commands = [
+    ["npm", ["run", "build:lib"]],
+    ["git", ["add", "--all"]],
+    ["git", ["commit", "-m", "build:lib"]],
+    ["npm", ["version", "patch"]],
+    ["npm", ["publish"]],
+    ["git", ["push"]],
+  ].reverse();
+
+  while (commands.length) {
+    const [command, args = []] = commands.pop();
+    console.log(`Executing ${command} ${args.join(" ")}`);
+    const { error, stdout } = spawnSync(command, args);
+
+    if (error) {
+      console.error(error);
+      break;
+    } else {
+      process.stdout.write(stdout);
+    }
+  }
+}
+
+run();

package/src/Badge.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+
+import { BaseView } from "./BaseView";
+import { Color, JSStyle, Size, getBackground } from "./jss";
+
+const sizes = {
+  xsmall: 4,
+  small: 6,
+  medium: 12,
+  large: 18,
+  xlarge: 24,
+};
+
+export function Badge({
+  size = "medium",
+  color = "highlight",
+  jsStyle,
+}: {
+  size?: Size;
+  color?: Color;
+  jsStyle?: JSStyle;
+}) {
+  return (
+    <BaseView
+      jsStyle={[
+        {
+          width: sizes[size],
+          height: sizes[size],
+          borderRadius: sizes[size] / 2,
+        },
+        getBackground(color),
+        jsStyle,
+      ]}
+    />
+  );
+}

package/src/BaseButton.tsx

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

package/src/BaseInput.tsx

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

package/src/BaseLink.tsx

@@ -0,0 +1,77 @@
+import React, { useContext } from "react";
+import { InteractableColor, getInteractableJSStyles } from "./Interactable";
+import { JSStyle, Padding, jss } from "./jss";
+
+export interface BaseLinkProps
+  extends React.LinkHTMLAttributes<HTMLAnchorElement> {
+  onClick?: (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void;
+  target?: string;
+  jsStyle?: JSStyle;
+  color: InteractableColor;
+  href: string;
+  disabled?: boolean;
+  bare?: 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,
+      jsStyle,
+      color,
+      bare = false,
+      disabled,
+      animateInteraction = true,
+      padding,
+      href,
+      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={jss([
+          ...getInteractableJSStyles({
+            color,
+            bare,
+            disabled,
+            animateInteraction,
+            padding,
+          }),
+          disabled && { pointerEvents: "none" },
+          jsStyle,
+        ])}
+      >
+        {children}
+      </Link>
+    );
+  }
+);

package/src/BaseList.tsx

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

package/src/BaseListAddOn.tsx

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

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