aidos-ui 3.0.0

package/src/pages/Button.mdx

@@ -0,0 +1,57 @@
+import { Button } from "../Button";
+import { Row } from "../Row";
+
+# Button
+
+This component can be used for the user to take actions with a single click.
+
+---
+
+## Basic variants
+
+The basic `Button` comes in three main variants, and a disabled style that applies to all three.
+
+- Positive: actions that are going to create something or strongly agree
+- Secondary: actions that are less central to the user experience
+- Negative: actions that are going to delete data or remove something
+- Disabled: actions that are not available
+
+<Row gap="large" align="center" padding="large" justify="center">
+  <Button label="Positive" color="positive" onClick={() => {}} />
+  <Button label="Secondary" color="secondary" onClick={() => {}} />
+  <Button label="Negative" color="negative" onClick={() => {}} />
+  <Button label="Disabled" color="positive" disabled onClick={() => {}} />
+</Row>
+
+```js
+<Row gap="large" align="center" padding="large" justify="center">
+  <Button label="Positive" color="positive" onClick={() => {}} />
+  <Button label="Secondary" color="secondary" onClick={() => {}} />
+  <Button label="Negative" color="negative" onClick={() => {}} />
+  <Button label="Disabled" color="positive" disabled onClick={() => {}} />
+</Row>
+```
+
+---
+
+## Bare variants
+
+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.
+
+<Row gap="large" align="center" padding="large" justify="center">
+  <Button bare label="Positive" color="positive" onClick={() => {}} />
+  <Button bare label="Secondary" color="secondary" onClick={() => {}} />
+  <Button bare label="Negative" color="negative" onClick={() => {}} />
+  <Button bare label="Disabled" color="positive" disabled onClick={() => {}} />
+</Row>
+
+```js
+<Row gap="large" align="center" padding="large" justify="center">
+  <Button bare label="Positive" color="positive" onClick={() => {}} />
+  <Button bare label="Secondary" color="secondary" onClick={() => {}} />
+  <Button bare label="Negative" color="negative" onClick={() => {}} />
+  <Button bare label="Disabled" color="positive" disabled onClick={() => {}} />
+</Row>
+```
+
+---

package/src/pages/Calendar.mdx

@@ -0,0 +1,60 @@
+import { Calendar } from "../Calendar";
+import { Box } from "../Box";
+import { Badge } from "../Badge";
+import { Span, H3 } from "../Text";
+
+# Calendar
+
+The calendar component is can be used to represent months, and is customisable through render callbacks for the header and cell elemtns
+
+<Calendar
+  date={new Date()}
+  header={({ weekday }) => (
+    <Box>
+      <H3>{weekday}</H3>
+    </Box>
+  )}
+  cell={({ today, date, outOfMonth }) => (
+    <Box relative={true} jsStyle={{ opacity: outOfMonth ? 0.2 : 1 }}>
+      {today && (
+        <Badge
+          jsStyle={{
+            position: "absolute",
+            top: "50%",
+            transform: "translateY(-50%) translateX(-75%)",
+            right: "50%",
+          }}
+        />
+      )}
+      <Span>{date.getDate()}</Span>
+    </Box>
+  )}
+/>
+
+```js
+<Calendar
+  date={new Date()}
+  header={({ weekday }) => (
+    <Box>
+      <H2>{weekday}</H2>
+    </Box>
+  )}
+  cell={({ today, date, outOfMonth }) => (
+    <Box relative={true} jsStyle={{ opacity: outOfMonth ? 0.2 : 1 }}>
+      {today && (
+        <Badge
+          jsStyle={{
+            position: "absolute",
+            top: "50%",
+            transform: "translateY(-50%) translateX(-75%)",
+            right: "50%",
+          }}
+        />
+      )}
+      <Span>{date.getDate()}</Span>
+    </Box>
+  )}
+/>
+```
+
+---

package/src/pages/Checkbox.mdx

@@ -0,0 +1,56 @@
+import { Checkbox } from "../Checkbox";
+import { StaticCheckbox } from "../StaticCheckbox";
+import { Column } from "../Column";
+import { Row } from "../Row";
+
+# Checkbox
+
+The `Checkbox` component is an input of type checkbox with the visual style of a checkbox.
+
+<Column>
+  <Row padding="medium" gap="medium" justify="center" align="center">
+    <Checkbox size="small" checked={true} onClick={() => {}} />
+    <Checkbox size="medium" checked={true} onClick={() => {}} />
+    <Checkbox size="large" checked={true} onClick={() => {}} />
+  </Row>
+  <Row padding="medium" gap="medium" justify="center" align="center">
+    <Checkbox size="small" checked={false} onClick={() => {}} />
+    <Checkbox size="medium" checked={false} onClick={() => {}} />
+    <Checkbox size="large" checked={false} onClick={() => {}} />
+  </Row>
+</Column>
+
+```js
+<Column>
+  <Row padding="medium" gap="medium" justify="center" align="center">
+    <Checkbox size="small" checked={true} onClick={() => {}} />
+    <Checkbox size="medium" checked={true} onClick={() => {}} />
+    <Checkbox size="large" checked={true} onClick={() => {}} />
+  </Row>
+  <Row padding="medium" gap="medium" justify="center" align="center">
+    <Checkbox size="small" checked={false} onClick={() => {}} />
+    <Checkbox size="medium" checked={false} onClick={() => {}} />
+    <Checkbox size="large" checked={false} onClick={() => {}} />
+  </Row>
+</Column>
+```
+
+---
+
+## Static checkbox
+
+The variant `StaticCheckbox` can be used when one only needs the visual representation of a checkbox but the `<input type="checkbox" />` does not make sense.
+
+<Row padding="medium" gap="medium" justify="center" align="center">
+  <StaticCheckbox size="small" checked={true} />
+  <StaticCheckbox size="medium" checked={true} />
+  <StaticCheckbox size="large" checked={true} />
+</Row>
+
+```js
+<Row padding="medium" gap="medium" justify="center" align="center">
+  <StaticCheckbox size="small" checked={true} />
+  <StaticCheckbox size="medium" checked={true} />
+  <StaticCheckbox size="large" checked={true} />
+</Row>
+```

package/src/pages/Dialog.mdx

@@ -0,0 +1,32 @@
+import { DialogTrigger } from "../examples/ExampleDialog.tsx";
+
+# Dialog
+
+The `Dialog` component can be used to show a modal window on top of the main UI. When visible, it will trap focus and clicks to the underlying UI, which is the required behaviour for acceessibility.
+
+<DialogTrigger />
+
+```js
+function ExampleDialog({ close }) {
+  return (
+    <Dialog close={close} label="Example">
+      <Row padding="medium" align="center" justify="space-between">
+        <Span>Dark mode</Span>
+        <DarkModeToggle />
+      </Row>
+    </Dialog>
+  );
+}
+
+export function DialogTrigger() {
+  const { open } = useDialog<void>(
+    ({ close }) => <ExampleDialog close={close} />,
+    { closeOnOutsideClick: true }
+  );
+
+  return <Button label="Show dialog" color={"positive"} onClick={() => open()} />;
+}
+
+```
+
+---

package/src/pages/FlexLayout.mdx

@@ -0,0 +1,77 @@
+import { Column } from "../Column";
+import { Row } from "../Row";
+import { Badge } from "../Badge";
+import { cssVar } from "../jss";
+
+# FlexLayout
+
+Because flex is so common there are a `Row` and a `Column` components, with a lot of utility that mean it is very easy to create complex layouts without having to create extra styles.
+
+- justify: like the `justify-content` flex property.
+- gap: like the `gap` property, it accepts any `Size`.
+- align: like the `align-items` flex property.
+- padding: like the `padding` property, it accepts any `Padding`.
+
+<Column gap="medium">
+  <Row
+    jsStyle={{ border: `1px solid ${cssVar("--highlight")}` }}
+    justify="space-around"
+    align="center"
+  >
+    <Badge />
+    <Badge />
+    <Badge />
+  </Row>
+  <Row
+    jsStyle={{ border: `1px solid ${cssVar("--highlight")}` }}
+    justify="space-evenly"
+    align="center"
+  >
+    <Badge />
+    <Badge />
+    <Badge />
+  </Row>
+  <Row
+    jsStyle={{ border: `1px solid ${cssVar("--highlight")}` }}
+    justify="space-between"
+    align="center"
+  >
+    <Badge />
+    <Badge />
+    <Badge />
+  </Row>
+</Column>
+
+```js
+<Column gap="medium">
+  <Row
+    jsStyle={{ border: `1px solid ${cssVar("--highlight")}` }}
+    justify="space-around"
+    align="center"
+  >
+    <Badge />
+    <Badge />
+    <Badge />
+  </Row>
+  <Row
+    jsStyle={{ border: `1px solid ${cssVar("--highlight")}` }}
+    justify="space-evenly"
+    align="center"
+  >
+    <Badge />
+    <Badge />
+    <Badge />
+  </Row>
+  <Row
+    jsStyle={{ border: `1px solid ${cssVar("--highlight")}` }}
+    justify="space-between"
+    align="center"
+  >
+    <Badge />
+    <Badge />
+    <Badge />
+  </Row>
+</Column>
+```
+
+---

package/src/pages/Hashing.mdx

@@ -0,0 +1,20 @@
+# Hashing and unique IDs
+
+## hash
+
+The `hash` function can be used to create a numeric hash from a given string. If you want to constraint the hashing space you can pass an optional modulus.
+
+```js
+const id = hash("ABC"); // 64578
+const small_id = hash("ABC", 10); // 8
+```
+
+## numberToBase
+
+The `numberToBase` util will transform any number to an arbitrary base represented as a string of characters (e.g. the base two could be ["0", "1"]). This can be useful to convert between numeric representations or to compress big numbers. It defaults to a base of 26 elements formed of the English alphabet.
+
+```js
+const id_base_26 = numberToBase(hash("ABC")); // cqmv
+const id_base_2 = numberToBase(hash("ABC"), ["?", "!"]); //!!!!!???!???!?!
+const id_base_2 = numberToBase(8, ["1", "0"]); // 100
+```

package/src/pages/Icon.mdx

@@ -0,0 +1,63 @@
+import { Icon } from "../Icon";
+import { Row } from "../Row";
+import { Column } from "../Column";
+
+# Icon
+
+The `Icon` component uses [iconify](https://github.com/iconify/iconify) under the hood so it makes thousands of different icons available.
+
+<Column gap="medium">
+  <Row justify="space-around">
+    <Icon icon="fa-reddit-alien" color="primary" size="small" />
+    <Icon icon="fa-reddit-square" color="secondary" size="small" />
+    <Icon icon="fa-refresh" color="highlight" size="small" />
+    <Icon icon="fa-registered" color="negative" size="small" />
+    <Icon icon="fa-remove" color="subtle" size="small" />
+    <Icon icon="fa-renren" color="light" size="small" />
+  </Row>
+  <Row justify="space-around">
+    <Icon icon="fa-reddit-alien" color="primary" size="medium" />
+    <Icon icon="fa-reddit-square" color="secondary" size="medium" />
+    <Icon icon="fa-refresh" color="highlight" size="medium" />
+    <Icon icon="fa-registered" color="negative" size="medium" />
+    <Icon icon="fa-remove" color="subtle" size="medium" />
+    <Icon icon="fa-renren" color="light" size="medium" />
+  </Row>
+  <Row justify="space-around">
+    <Icon icon="fa-reddit-alien" color="primary" size="large" />
+    <Icon icon="fa-reddit-square" color="secondary" size="large" />
+    <Icon icon="fa-refresh" color="highlight" size="large" />
+    <Icon icon="fa-registered" color="negative" size="large" />
+    <Icon icon="fa-remove" color="subtle" size="large" />
+    <Icon icon="fa-renren" color="light" size="large" />
+  </Row>
+</Column>
+
+```js
+<Column gap="medium">
+  <Row justify="space-around">
+    <Icon icon="fa-reddit-alien" color="primary" size="small" />
+    <Icon icon="fa-reddit-square" color="secondary" size="small" />
+    <Icon icon="fa-refresh" color="highlight" size="small" />
+    <Icon icon="fa-registered" color="negative" size="small" />
+    <Icon icon="fa-remove" color="subtle" size="small" />
+    <Icon icon="fa-renren" color="light" size="small" />
+  </Row>
+  <Row justify="space-around">
+    <Icon icon="fa-reddit-alien" color="primary" size="medium" />
+    <Icon icon="fa-reddit-square" color="secondary" size="medium" />
+    <Icon icon="fa-refresh" color="highlight" size="medium" />
+    <Icon icon="fa-registered" color="negative" size="medium" />
+    <Icon icon="fa-remove" color="subtle" size="medium" />
+    <Icon icon="fa-renren" color="light" size="medium" />
+  </Row>
+  <Row justify="space-around">
+    <Icon icon="fa-reddit-alien" color="primary" size="large" />
+    <Icon icon="fa-reddit-square" color="secondary" size="large" />
+    <Icon icon="fa-refresh" color="highlight" size="large" />
+    <Icon icon="fa-registered" color="negative" size="large" />
+    <Icon icon="fa-remove" color="subtle" size="large" />
+    <Icon icon="fa-renren" color="light" size="large" />
+  </Row>
+</Column>
+```

package/src/pages/IconButton.mdx

@@ -0,0 +1,144 @@
+import { IconButton } from "../IconButton";
+import { Row } from "../Row";
+
+# IconButton
+
+This component is similar to the `Button` component but is styled simply as a circle containing an icon.
+
+---
+
+## Basic variants
+
+The basic `IconButton` is useful to create compound components in which it is harder to fit a button with a text description. Choosing the right icon will be helpful for the users, and in some cases a tooltip may be necessary to explain the intent.
+
+<Row gap="large" align="center" padding="large" justify="center">
+  <IconButton
+    size="medium"
+    icon="fa-check"
+    color="positive"
+    onClick={() => {}}
+  />
+  <IconButton
+    size="medium"
+    icon="fa-check"
+    color="secondary"
+    onClick={() => {}}
+  />
+  <IconButton
+    size="medium"
+    icon="fa-check"
+    color="negative"
+    onClick={() => {}}
+  />
+  <IconButton
+    size="medium"
+    icon="fa-check"
+    color="positive"
+    disabled
+    onClick={() => {}}
+  />
+</Row>
+
+```js
+<Row gap="large" align="center" padding="large" justify="center">
+  <IconButton
+    size="medium"
+    icon="fa-check"
+    color="positive"
+    onClick={() => {}}
+  />
+  <IconButton
+    size="medium"
+    icon="fa-check"
+    color="secondary"
+    onClick={() => {}}
+  />
+  <IconButton
+    size="medium"
+    icon="fa-check"
+    color="negative"
+    onClick={() => {}}
+  />
+  <IconButton
+    size="medium"
+    icon="fa-check"
+    color="positive"
+    disabled
+    onClick={() => {}}
+  />
+</Row>
+```
+
+---
+
+## Bare variants
+
+The bare `IconButton` is even more subtle than the bare `Button` so it can be used to make the interface feel ligther.
+
+<Row gap="large" align="center" justify="center">
+  <IconButton
+    size="medium"
+    bare
+    icon="fa-check"
+    color="positive"
+    onClick={() => {}}
+  />
+  <IconButton
+    size="medium"
+    bare
+    icon="fa-check"
+    color="secondary"
+    onClick={() => {}}
+  />
+  <IconButton
+    size="medium"
+    bare
+    icon="fa-check"
+    color="negative"
+    onClick={() => {}}
+  />
+  <IconButton
+    size="medium"
+    bare
+    icon="fa-check"
+    color="positive"
+    disabled
+    onClick={() => {}}
+  />
+</Row>
+
+```js
+<Row gap="large" align="center" justify="center">
+  <IconButton
+    size="medium"
+    bare
+    icon="fa-check"
+    color="positive"
+    onClick={() => {}}
+  />
+  <IconButton
+    size="medium"
+    bare
+    icon="fa-check"
+    color="secondary"
+    onClick={() => {}}
+  />
+  <IconButton
+    size="medium"
+    bare
+    icon="fa-check"
+    color="negative"
+    onClick={() => {}}
+  />
+  <IconButton
+    size="medium"
+    bare
+    icon="fa-check"
+    color="positive"
+    disabled
+    onClick={() => {}}
+  />
+</Row>
+```
+
+---

package/src/pages/Link.mdx

@@ -0,0 +1,57 @@
+import { Link } from "../Link";
+import { Row } from "../Row";
+
+# Link
+
+The `Link` component looks the same as the `Button` component and the only difference is that the underlying HTML is an anchor tag.
+
+---
+
+## Basic variants
+
+The basic `Link` comes in three main variants, and a disabled style that applies to all three.
+
+- Positive: actions that are going to create something or strongly agree
+- Secondary: actions that are less central to the user experience
+- Negative: actions that are going to delete data or remove something
+- Disabled: actions that are not available
+
+<Row gap="large" align="center" padding="large" justify="center">
+  <Link label="Positive" color="positive" href="/" />
+  <Link label="Secondary" color="secondary" href="/" />
+  <Link label="Negative" color="negative" href="/" />
+  <Link label="Disabled" color="positive" disabled href="/" />
+</Row>
+
+```js
+<Row gap="large" align="center" padding="large" justify="center">
+  <Link label="Positive" color="positive" href="/" />
+  <Link label="Secondary" color="secondary" href="/" />
+  <Link label="Negative" color="negative" href="/" />
+  <Link label="Disabled" color="positive" disabled href="/" />
+</Row>
+```
+
+---
+
+## Bare variants
+
+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.
+
+<Row gap="large" align="center" padding="large" justify="center">
+  <Link bare label="Positive" color="positive" href="/" />
+  <Link bare label="Secondary" color="secondary" href="/" />
+  <Link bare label="Negative" color="negative" href="/" />
+  <Link bare label="Disabled" color="positive" disabled href="/" />
+</Row>
+
+```js
+<Row gap="large" align="center" padding="large" justify="center">
+  <Link bare label="Positive" color="positive" href="/" />
+  <Link bare label="Secondary" color="secondary" href="/" />
+  <Link bare label="Negative" color="negative" href="/" />
+  <Link bare label="Disabled" color="positive" disabled href="/" />
+</Row>
+```
+
+---