aidos-ui 4.0.4 → 4.0.6

package/src/aria.ts

@@ -1,72 +0,0 @@
-type Focusable = HTMLElement;
-
-export function queryFocusables(root: HTMLElement): Focusable[] {
-  const focusables: Focusable[] = Array.from(
-    root.querySelectorAll(
-      "button,input,textarea,a,[tabindex='0'],[tabindex='-1']"
-    )
-  );
-
-  return focusables.filter((element: Focusable) => !element["disabled"]);
-}
-
-export function queryGrid(root: HTMLElement): HTMLElement[][] {
-  const rows: HTMLLIElement[] = Array.from(
-    root.querySelectorAll('li[role="row"]')
-  );
-
-  const rowsWithColumns = rows
-    .map((row) => Array.from(queryFocusables(row)))
-    .filter((row) => row.length > 0);
-
-  return rowsWithColumns;
-}
-
-export const normalizeGrid = (
-  rows: HTMLElement[][],
-  rowIndex: number,
-  columnIndex: number
-): void => {
-  for (const row of rows) {
-    for (const column of row) {
-      column.tabIndex = -1;
-    }
-  }
-
-  const row = rows[rowIndex];
-  const column = row[columnIndex] ?? row[row.length - 1];
-  column.tabIndex = 0;
-};
-
-export const focusGridElement = (
-  rows: HTMLElement[][],
-  rowIndex: number,
-  columnIndex: number
-): void => {
-  normalizeGrid(rows, rowIndex, columnIndex);
-  const row = rows[rowIndex];
-  const column = row[columnIndex] ?? row[row.length - 1];
-  column.focus();
-  column.scrollIntoView(false);
-};
-
-export const normalizeElements = (
-  focusables: HTMLElement[],
-  index: number
-): void => {
-  for (const element of focusables) {
-    element.tabIndex = -1;
-  }
-  const element = focusables[index] ?? focusables[focusables.length - 1];
-  element.tabIndex = 0;
-};
-
-export const focusElement = (
-  focusables: HTMLElement[],
-  index: number
-): void => {
-  normalizeElements(focusables, index);
-  const element = focusables[index] ?? focusables[focusables.length - 1];
-  element.focus();
-  // element.scrollIntoView(false);
-};

package/src/docs/mdx.tsx

@@ -1,137 +0,0 @@
-import { MDXProvider } from "@mdx-js/react";
-import React from "react";
-import { PropsWithChildren } from "react";
-import { H1, H2, H3, Li, P, Span } from "../Text";
-import { BaseLink } from "../BaseLink";
-import { BaseView } from "../BaseView";
-import { ListDivider } from "../ListDivider";
-import { cssVar } from "../jss";
-import { Roboto } from "next/font/google";
-
-const monospace = Roboto({ weight: "400", subsets: ["latin"] });
-
-const components: any = {
-  h1: (props) => (
-    <H1 jss={{ marginBottom: cssVar("--spacing-xl") }} {...props} />
-  ),
-  h2: (props) => (
-    <H2
-      id={labelToID(props.children)}
-      jss={{ marginBottom: cssVar("--spacing-l") }}
-      {...props}
-    />
-  ),
-  h3: (props) => {
-    return <H3 id={labelToID(props.children)} {...props} />;
-  },
-  p: (props) => <P jss={{ marginBottom: cssVar("--spacing-m") }} {...props} />,
-  span: (props) => <Span {...props} />,
-  li: (props) => (
-    <Li jss={{ marginBottom: cssVar("--spacing-s") }} {...props} />
-  ),
-  a: (props) => {
-    return (
-      <BaseLink
-        bare
-        color="positive"
-        jss={{
-          display: "inline-block",
-          paddingBottom: cssVar("--spacing-s"),
-          paddingTop: cssVar("--spacing-s"),
-        }}
-        href={props.href}
-      >
-        {props.children}
-      </BaseLink>
-    );
-  },
-  hr: () => (
-    <BaseView
-      jss={{
-        marginBottom: cssVar("--spacing-xxl"),
-        marginTop: cssVar("--spacing-xxl"),
-      }}
-    >
-      <ListDivider />
-    </BaseView>
-  ),
-  pre: (props) => {
-    return (
-      <pre
-        style={{ borderRadius: cssVar("--border-radius-l") }}
-        className={props.children.props.className}
-        tabIndex={0}
-      >
-        <code className={props.children.props.className}>
-          {props.children.props.children}
-        </code>
-      </pre>
-    );
-  },
-  code: ({ children }) => (
-    <span
-      className={monospace.className}
-      style={{
-        color: cssVar("--primary-text"),
-        backgroundColor: cssVar("--secondary-background"),
-        borderRadius: cssVar("--border-radius-m"),
-        padding: cssVar("--spacing-xs"),
-        border: `1px solid ${cssVar("--divider")}`,
-        display: "inline-block",
-      }}
-    >
-      {children}
-    </span>
-  ),
-  table: (props) => (
-    <table
-      style={{
-        width: "100%",
-        borderCollapse: "collapse",
-        marginBottom: cssVar("--spacing-l"),
-        fontSize: 14,
-      }}
-      {...props}
-    />
-  ),
-  thead: (props) => (
-    <thead
-      style={{
-        borderBottom: `2px solid ${cssVar("--divider")}`,
-      }}
-      {...props}
-    />
-  ),
-  th: (props) => (
-    <th
-      style={{
-        textAlign: "left",
-        padding: cssVar("--spacing-s"),
-        color: cssVar("--primary-text"),
-        fontWeight: "bold",
-      }}
-      {...props}
-    />
-  ),
-  td: (props) => (
-    <td
-      style={{
-        padding: cssVar("--spacing-s"),
-        borderBottom: `1px solid ${cssVar("--divider")}`,
-        color: cssVar("--secondary-text"),
-      }}
-      {...props}
-    />
-  ),
-};
-
-export function labelToID(string: string): string {
-  return string
-    .replace(/[A-Z]/g, (m) => m.toLowerCase())
-    .replace(/\s/g, "-")
-    .replace(/\?/g, "");
-}
-
-export function DocsMDXProvider({ children }: PropsWithChildren<{}>) {
-  return <MDXProvider components={components}>{children}</MDXProvider>;
-}

package/src/docs/pages.ts

@@ -1,115 +0,0 @@
-import { Size } from "../jss";
-
-type PageLink = {
-  type: "link";
-  page: string;
-  name?: string;
-  headlineSize?: Size;
-  headlineBold?: boolean;
-};
-
-type Page =
-  | PageLink
-  | {
-      type: "section";
-      label: string;
-      content: Array<PageLink>;
-    };
-
-export const pages: Array<Page> = [
-  {
-    type: "link",
-    page: "",
-    name: "Aidos UI",
-    headlineSize: "large",
-    headlineBold: true,
-  },
-  {
-    type: "section",
-    label: "CSS",
-    content: [{ type: "link", page: "css-in-js", name: "jss" }],
-  },
-  {
-    type: "section",
-    label: "Layout",
-    content: [{ type: "link", page: "FlexLayout" }],
-  },
-  {
-    type: "section",
-    label: "Text",
-    content: [
-      { type: "link", page: "Text" },
-      { type: "link", page: "TextPairing" },
-      { type: "link", page: "Icon" },
-    ],
-  },
-  {
-    type: "section",
-    label: "Actions",
-    content: [
-      { type: "link", page: "Button" },
-      { type: "link", page: "Link" },
-      { type: "link", page: "IconButton" },
-      { type: "link", page: "Tabs" },
-    ],
-  },
-  {
-    type: "section",
-    label: "Inputs",
-    content: [
-      { type: "link", page: "TextInput" },
-      { type: "link", page: "RangeInput" },
-      { type: "link", page: "TimeInput" },
-      { type: "link", page: "Checkbox" },
-    ],
-  },
-  {
-    type: "section",
-    label: "List components",
-    content: [
-      { type: "link", page: "List" },
-      { type: "link", page: "ListHeader" },
-      { type: "link", page: "navigation", name: "List navigation" },
-    ],
-  },
-  {
-    type: "section",
-    label: "Modals",
-    content: [
-      { type: "link", page: "Dialog" },
-      { type: "link", page: "Popover" },
-      { type: "link", page: "Tooltip" },
-    ],
-  },
-  {
-    type: "section",
-    label: "Visual indicators",
-    content: [
-      { type: "link", page: "Card" },
-      { type: "link", page: "Badge" },
-      { type: "link", page: "ProgressBar" },
-      { type: "link", page: "ProgressCircle" },
-    ],
-  },
-  {
-    type: "section",
-    label: "Time",
-    content: [{ type: "link", page: "Calendar" }],
-  },
-  {
-    type: "section",
-    label: "Hooks",
-    content: [
-      { type: "link", page: "useCookie" },
-      { type: "link", page: "useNavigation" },
-      { type: "link", page: "useKeyboard" },
-      { type: "link", page: "useRefEffect" },
-      { type: "link", page: "usePromise" },
-    ],
-  },
-  {
-    type: "section",
-    label: "Utils",
-    content: [{ type: "link", page: "Hashing" }],
-  },
-];