aidos-ui 3.0.0 → 3.0.1

package/scripts/embeddings.js

@@ -0,0 +1,93 @@
+import { pipeline } from "@xenova/transformers";
+import fs from "fs/promises";
+import path from "path";
+import { fileURLToPath } from "url";
+import { unified } from "unified";
+import remarkParse from "remark-parse";
+import remarkMdx from "remark-mdx";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const __rootdir = path.join(__dirname, "..");
+const __pages = path.join(__rootdir, "src", "pages");
+const __public = path.join(__rootdir, "public");
+
+const generateEmbeddings = await pipeline(
+  "feature-extraction",
+  "Xenova/all-MiniLM-L6-v2"
+);
+
+const files = await fs.readdir(__pages);
+
+const index = [];
+
+for (const file of files) {
+  if (path.extname(file) !== ".mdx") {
+    continue;
+  }
+
+  const filepath = path.join(__pages, file);
+  const filename = path.parse(file).name;
+  const content = await fs.readFile(filepath, "utf-8");
+  const sections = parseContent(content);
+
+  const embeddings = await Promise.all(
+    sections.map(async ({ text, heading, headingDepth }) => {
+      const embedding = await generateEmbeddings(text, {
+        normalize: true,
+        pooling: "mean",
+      });
+      return {
+        heading,
+        headingDepth,
+        filename,
+        embedding: Array.from(embedding.data),
+      };
+    })
+  );
+
+  index.push(...embeddings);
+}
+
+await fs.writeFile(
+  path.join(__public, "index.json"),
+  JSON.stringify({ index })
+);
+
+function parseChildren(children) {
+  const result = [];
+
+  for (const node of children) {
+    if (node.type === "text") {
+      result.push(node.value);
+    } else if (node.type === "inlineCode") {
+      result.push(node.value);
+    } else if (node.type === "link") {
+      result.push(parseChildren(node.children));
+    }
+  }
+
+  return result.join(" ");
+}
+
+function parseContent(content) {
+  const ast = unified().use(remarkParse).use(remarkMdx).parse(content);
+  const result = [];
+  let headingDepth = 1;
+  let heading = "";
+
+  for (const node of ast.children) {
+    if (node.type === "paragraph") {
+      result.push({
+        text: heading + ": " + parseChildren(node.children),
+        heading,
+        headingDepth,
+      });
+    } else if (node.type === "heading") {
+      headingDepth = node.depth;
+      heading = parseChildren(node.children);
+    }
+  }
+
+  return result;
+}

package/scripts/publish.js

@@ -3,6 +3,7 @@ import { spawnSync } from "child_process";
 async function run() {
   const commands = [
     ["npm", ["run", "build:lib"]],
+    ["npm", ["run", "embeddings"]],
     ["git", ["add", "--all"]],
     ["git", ["commit", "-m", "build:lib"]],
     ["npm", ["version", "patch"]],

package/scripts/test_embeddings.js

@@ -0,0 +1,47 @@
+import { pipeline } from "@xenova/transformers";
+import fs from "fs/promises";
+import path from "path";
+import { fileURLToPath } from "url";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const __rootdir = path.join(__dirname, "..");
+const __public = path.join(__rootdir, "public");
+
+const index = await fs
+  .readFile(path.join(__public, "index.json"), "utf-8")
+  .then((data) => JSON.parse(data).index);
+
+const generateEmbeddings = await pipeline(
+  "feature-extraction",
+  "Xenova/all-MiniLM-L6-v2"
+);
+
+const query = "how to install";
+
+const queryEmbeddings = await generateEmbeddings(query, {
+  normalize: true,
+  pooling: "mean",
+}).then((embedding) => embedding.data);
+
+function dot(xs, ys) {
+  let sum = 0;
+
+  for (let i = 0; i < xs.length; i++) {
+    sum += xs[i] * ys[i];
+  }
+
+  return sum;
+}
+
+const results = index
+  .map((element) => {
+    return {
+      ...element,
+      dot: dot(queryEmbeddings, element.embedding),
+    };
+  })
+  .sort((a, b) => b.dot - a.dot)
+  .slice(0, 5);
+
+console.log({ results });

package/src/List.tsx

@@ -9,6 +9,7 @@ interface ListProps extends BaseListProps {
   autofocus?: boolean;
   role?: undefined;
   navigation?: boolean;
+  carded?: boolean;
 }
 
 export function List({
@@ -17,6 +18,7 @@ export function List({
   autofocus = false,
   navigation = true,
   bare,
+  carded = true,
   ...otherProps
 }: ListProps) {
   const rootRef = useNavigation({ autofocus, enabled: navigation });
@@ -29,10 +31,18 @@ export function List({
       jsStyle={[
         { overflow: "hidden" },
         !bare && {
-          border: `1px solid ${cssVar("--divider")}`,
-          borderRadius: cssVar("--border-radius-l"),
           backgroundColor: cssVar("--overlay-background"),
         },
+        !bare &&
+          !carded && {
+            borderBottom: `1px solid ${cssVar("--divider")}`,
+            borderTop: `1px solid ${cssVar("--divider")}`,
+          },
+        !bare &&
+          carded && {
+            border: `1px solid ${cssVar("--divider")}`,
+            borderRadius: cssVar("--border-radius-l"),
+          },
         jsStyle,
       ]}
       {...otherProps}

package/src/Sublist.tsx

@@ -8,6 +8,7 @@ import { JSStyle } from "./jss";
 export function Sublist({
   children,
   label,
+  labelBold,
   initialState = { collapsed: false },
   jsStyle,
   secondaryAddOn,
@@ -16,6 +17,7 @@ export function Sublist({
   bare?: boolean;
   children: React.ReactNode;
   label: string;
+  labelBold?: boolean;
   initialState?: {
     collapsed: boolean;
   };
@@ -29,6 +31,7 @@ export function Sublist({
       <ListButtonItem
         bare={bare}
         headline={label}
+        headlineBold={labelBold}
         onClick={() => setCollapsed((x) => !x)}
         jsStyle={jsStyle}
         addOn={

package/src/docs/mdx.tsx

@@ -0,0 +1,99 @@
+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 jsStyle={{ marginBottom: cssVar("--spacing-xl") }} {...props} />
+  ),
+  h2: (props) => (
+    <H2
+      id={labelToID(props.children)}
+      jsStyle={{ marginBottom: cssVar("--spacing-l") }}
+      {...props}
+    />
+  ),
+  h3: (props) => {
+    return <H3 id={labelToID(props.children)} {...props} />;
+  },
+  p: (props) => (
+    <P jsStyle={{ marginBottom: cssVar("--spacing-m") }} {...props} />
+  ),
+  span: (props) => <Span {...props} />,
+  li: (props) => (
+    <Li jsStyle={{ marginBottom: cssVar("--spacing-s") }} {...props} />
+  ),
+  a: (props) => {
+    return (
+      <BaseLink
+        bare
+        color="positive"
+        jsStyle={{
+          display: "inline-block",
+          paddingBottom: cssVar("--spacing-s"),
+          paddingTop: cssVar("--spacing-s"),
+        }}
+        href={props.href}
+      >
+        {props.children}
+      </BaseLink>
+    );
+  },
+  hr: () => (
+    <BaseView
+      jsStyle={{
+        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>
+  ),
+};
+
+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

@@ -0,0 +1,112 @@
+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: "Primary components",
+    content: [
+      { type: "link", page: "FlexLayout" },
+      { type: "link", page: "Text" },
+      { type: "link", page: "TextPairing" },
+      { type: "link", page: "Icon" },
+    ],
+  },
+  {
+    type: "section",
+    label: "Buttons and links",
+    content: [
+      { type: "link", page: "Button" },
+      { type: "link", page: "Link" },
+      { type: "link", page: "IconButton" },
+    ],
+  },
+  {
+    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: "Badge" },
+      { type: "link", page: "ProgressBar" },
+      { type: "link", page: "ProgressCircle" },
+    ],
+  },
+  {
+    type: "section",
+    label: "Complex components",
+    content: [
+      { type: "link", page: "Tabs" },
+      { 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" }],
+  },
+];

package/src/pages/Badge.mdx

@@ -3,7 +3,7 @@ import { Row } from "../Row";
 
 # Badge
 
-This component is used to bring attention to some other element (e.g. an unread notification, an update, an important element...).
+This is a simple component that can be used to bring attention to a specific part of the user interface, for example an unread notification, an update, an important element...
 
 ---
 

package/src/pages/Button.mdx

@@ -3,13 +3,13 @@ import { Row } from "../Row";
 
 # Button
 
-This component can be used for the user to take actions with a single click.
+The `Button` component can be used for the user to take actions with a single click, it supports a variety of styles each of them with different semantics.
 
 ---
 
-## Basic variants
+## Button variants
 
-The basic `Button` comes in three main variants, and a disabled style that applies to all three.
+The basic `Button` comes in three main variants, each of them with a specific intent in mind. It also support a "disabled" variant, for cases where the button is not actionable.
 
 - Positive: actions that are going to create something or strongly agree
 - Secondary: actions that are less central to the user experience
@@ -34,7 +34,7 @@ The basic `Button` comes in three main variants, and a disabled style that appli
 
 ---
 
-## Bare variants
+## Bare button
 
 The bare `Button` variants fulfill the same function than the basic counterparts but have a lighter style that can be more easily integrated in complex components.
 

package/src/pages/Link.mdx

@@ -7,9 +7,9 @@ The `Link` component looks the same as the `Button` component and the only diffe
 
 ---
 
-## Basic variants
+## Link variants
 
-The basic `Link` comes in three main variants, and a disabled style that applies to all three.
+The basic `Link` comes in three main variants, each of them with a specific intent in mind. It also support a "disabled" variant, for cases where the button is not actionable.
 
 - Positive: actions that are going to create something or strongly agree
 - Secondary: actions that are less central to the user experience
@@ -34,7 +34,7 @@ The basic `Link` comes in three main variants, and a disabled style that applies
 
 ---
 
-## Bare variants
+## Bare link
 
 The bare `Link` variants fulfill the same function than the basic counterparts but have a lighter style that can be more easily integrated in complex components.
 

package/src/pages/List.mdx

@@ -11,6 +11,8 @@ The `List` component is used to represent data in a list, it has several compone
 
 ## Base list
 
+The default list style has round borders and high contrast background. It can opt out of the roundedness (for example it is useful to go edge-to-edge on small displays) and it also support a bare style, with much more subtle styling.
+
 <List ariaLabel="example">
   <ListItem
     headline="Headline"
@@ -105,10 +107,106 @@ The `List` component is used to represent data in a list, it has several compone
 </List>
 ```
 
+<List carded={false} ariaLabel="example">
+  <ListItem
+    headline="Headline"
+    body="Body"
+    addOn={<Icon color="primary" icon="fa-bell" size="medium" />}
+    addOnPosition="start"
+  />
+  <ListButtonItem
+    color="positive"
+    headline="Positive button"
+    addOn={<Icon color="highlight" icon="fa-plus" size="medium" />}
+    addOnPosition="start"
+    onClick={() => {}}
+  />
+  <ListButtonItem
+    color="secondary"
+    headline="Secondary button"
+    addOn={<Icon color="primary" icon="fa-bicycle" size="medium" />}
+    addOnPosition="start"
+    onClick={() => {}}
+  />
+  <ListButtonItem
+    color="negative"
+    headline="Negative button"
+    addOn={<Icon color="negative" icon="fa-ban" size="medium" />}
+    addOnPosition="start"
+    onClick={() => {}}
+  />
+  <ListLinkItem
+    href="/"
+    color="secondary"
+    headline="Selected link"
+    selected
+    addOn={<Icon color="primary" icon="fa-renren" size="medium" />}
+    addOnPosition="start"
+  />
+  <ListLinkItem
+    href="/"
+    color="secondary"
+    headline="Link"
+    addOn={<Icon color="primary" icon="fa-renren" size="medium" />}
+    addOnPosition="start"
+    withDivider={false}
+  />
+</List>
+
+```js
+<List carded={false} ariaLabel="example">
+  <ListItem
+    headline="Headline"
+    body="Body"
+    addOn={<Icon color="primary" icon="fa-bell" size="medium" />}
+    addOnPosition="start"
+  />
+  <ListButtonItem
+    color="positive"
+    headline="Positive button"
+    addOn={<Icon color="highlight" icon="fa-plus" size="medium" />}
+    addOnPosition="start"
+    onClick={() => {}}
+  />
+  <ListButtonItem
+    color="secondary"
+    headline="Secondary button"
+    addOn={<Icon color="primary" icon="fa-bicycle" size="medium" />}
+    addOnPosition="start"
+    onClick={() => {}}
+  />
+  <ListButtonItem
+    color="negative"
+    headline="Negative button"
+    addOn={<Icon color="negative" icon="fa-ban" size="medium" />}
+    addOnPosition="start"
+    onClick={() => {}}
+  />
+  <ListLinkItem
+    href="/"
+    color="secondary"
+    headline="Selected link"
+    selected
+    addOn={<Icon color="primary" icon="fa-renren" size="medium" />}
+    addOnPosition="start"
+  />
+  <ListLinkItem
+    href="/"
+    color="secondary"
+    headline="Link"
+    addOn={<Icon color="primary" icon="fa-renren" size="medium" />}
+    addOnPosition="start"
+    withDivider={false}
+  />
+</List>
+```
+
 ---
 
 ## Bare list
 
+The bare list, like other components that support the `bare` style, is much more subtle, has less contrast and no borders. For elements that are constantly on display but may not always be necessary (for example navigation elements) it could be preferred to make the user interface cleaner and lighter.
+
 <List bare ariaLabel="example">
   <ListItem
     bare
@@ -237,7 +335,7 @@ The `List` component is used to represent data in a list, it has several compone
 
 ---
 
-## navigation
+## Keyboard navigation
 
 Lists support keyboard navigation by default via the `useNavigation` hook. It can be disabled by passing the prop `navigation` and tries to emulate the [grid layout spec](https://www.w3.org/WAI/ARIA/apg/patterns/grid/examples/layout-grids/):