docs: add ui patterns (#992)

mittwald · Nov 26, 2024 · 7fbfb4d · 7fbfb4d
1 parent b74f509
commit 7fbfb4d
Show file tree

Hide file tree

Showing 14 changed files with 869 additions and 2 deletions.
diff --git a/packages/components/src/components/LayoutCard/LayoutCard.module.scss b/packages/components/src/components/LayoutCard/LayoutCard.module.scss
@@ -6,7 +6,6 @@
   overflow: hidden;
 
   > .tabs {
-    margin-inline: calc(var(--layout-card--padding) * -1);
-    margin-block-start: calc(var(--layout-card--padding) * -1);
+    margin: calc(var(--layout-card--padding) * -1);
   }
 }
diff --git a/packages/docs/src/content/02-foundations/04-ui-patterns/01-dashboard/examples/dashboard.tsx b/packages/docs/src/content/02-foundations/04-ui-patterns/01-dashboard/examples/dashboard.tsx
@@ -0,0 +1,104 @@
+import { ColumnLayout } from "@mittwald/flow-react-components/ColumnLayout";
+import { LayoutCard } from "@mittwald/flow-react-components/LayoutCard";
+import { Section } from "@mittwald/flow-react-components/Section";
+import { Heading } from "@mittwald/flow-react-components/Heading";
+import { Header } from "@mittwald/flow-react-components/Header";
+import { Text } from "@mittwald/flow-react-components/Text";
+import { Link } from "@mittwald/flow-react-components/Link";
+import { Button } from "@mittwald/flow-react-components/Button";
+import { IconContextMenu } from "@mittwald/flow-react-components/Icons";
+import { LabeledValue } from "@mittwald/flow-react-components/LabeledValue";
+import { Label } from "@mittwald/flow-react-components/Label";
+import { CopyButton } from "@mittwald/flow-react-components/CopyButton";
+import {
+  ContextMenu,
+  ContextMenuTrigger,
+} from "@mittwald/flow-react-components/ContextMenu";
+import { MenuItem } from "@mittwald/flow-react-components/MenuItem";
+
+<ColumnLayout m={[1]} l={[1]}>
+  <LayoutCard>
+    <Section>
+      <Header>
+        <Heading>Projektübersicht</Heading>
+        <ContextMenuTrigger>
+          <Button color="secondary" variant="soft">
+            <IconContextMenu />
+          </Button>
+          <ContextMenu>
+            <MenuItem
+              onAction={() => alert("not implemented")}
+            >
+              Domain umziehen
+            </MenuItem>
+            <MenuItem
+              onAction={() => alert("not implemented")}
+            >
+              Domain entfernen
+            </MenuItem>
+          </ContextMenu>
+        </ContextMenuTrigger>
+        <Button onPress={() => alert("not implemented")}>
+          Tarif anpassen
+        </Button>
+      </Header>
+      <ColumnLayout l={[1, 1, 1]} m={[1, 1]}>
+        <LabeledValue>
+          <Label>Projektname</Label>
+          <Text>Mein Projekt</Text>
+        </LabeledValue>
+        <LabeledValue>
+          <Label>Server</Label>
+          <Link href="#">MeinServer-01</Link>
+        </LabeledValue>
+        <LabeledValue>
+          <Label>Projektdomain</Label>
+          <Link href="#" target="_blank">
+            p-lis5uw.project.space
+          </Link>
+          <CopyButton text="p-lis5uw.project.space" />
+        </LabeledValue>
+        <LabeledValue>
+          <Label>Erstelldatum</Label>
+          <Text>06.12.2023 um 11:40 Uhr</Text>
+        </LabeledValue>
+        <LabeledValue>
+          <Label>A-Record</Label>
+          <Text>45.225.312.55</Text>
+          <CopyButton text="45.225.312.55" />
+        </LabeledValue>
+        <LabeledValue>
+          <Label>Shoert-ID</Label>
+          <Text>p-lis5uw</Text>
+          <CopyButton text="p-lis5uw" />
+        </LabeledValue>
+      </ColumnLayout>
+    </Section>
+  </LayoutCard>
+
+  <ColumnLayout l={[1, 1]}>
+    <LayoutCard>
+      <Section>
+        <Heading>Lerne mehr über Flow</Heading>
+        <Text>
+          Nutze unseren Styleguide, um mehr über das Design
+          System Flow zu erfahren.
+        </Text>
+        <Link href="#">Zum Styleguide</Link>
+      </Section>
+    </LayoutCard>
+
+    <LayoutCard>
+      <Section>
+        <Heading>Gib uns Feedback</Heading>
+        <Text>
+          Wir freuen uns auf deine Anmerkungen und Wünsche
+          zu Flow.
+        </Text>
+        <Link href="https://github.com/mittwald/flow">
+          Zum GitHub Repository
+        </Link>
+      </Section>
+    </LayoutCard>
+  </ColumnLayout>
+</ColumnLayout>;
diff --git a/packages/docs/src/content/02-foundations/04-ui-patterns/01-dashboard/index.mdx b/packages/docs/src/content/02-foundations/04-ui-patterns/01-dashboard/index.mdx
@@ -0,0 +1,7 @@
+---
+title: Dashboard
+---
+
+Ein Dashboard zeigt dem User relevante Informationen übersichtlich in kleineren
+Bereichen auf einer einzigen Oberfläche an. Es hilft dem User, wichtige Daten
+schnell zu erkennen.
diff --git a/packages/docs/src/content/02-foundations/04-ui-patterns/01-dashboard/overview.mdx b/packages/docs/src/content/02-foundations/04-ui-patterns/01-dashboard/overview.mdx
@@ -0,0 +1,9 @@
+# Beispiel Dashboard
+
+Um eine Dashboard-Struktur zu erstellen, nutze
+[LayoutCards](/03-components/structure/layout-card) in verschiedenen
+[ColumnLayouts](/03-components/structure/column-layout). Zur Unterteilung
+innerhalb der LayoutCards sollten [Sections](/03-components/structure/section)
+eingesetzt werden.
+
+<LiveCodeEditor example="dashboard" editorCollapsed bgColor="dark" />
diff --git a/...ages/docs/src/content/02-foundations/04-ui-patterns/02-anlegeprozess/examples/content.tsx b/...ages/docs/src/content/02-foundations/04-ui-patterns/02-anlegeprozess/examples/content.tsx
@@ -0,0 +1,243 @@
+import {
+  ListItemView,
+  typedList,
+} from "@mittwald/flow-react-components/List";
+import Avatar from "@mittwald/flow-react-components/Avatar";
+import Heading from "@mittwald/flow-react-components/Heading";
+import Text from "@mittwald/flow-react-components/Text";
+import {
+  IconDomain,
+  IconHome,
+  IconInvoice,
+  IconSubdomain,
+} from "@mittwald/flow-react-components/Icons";
+import Button from "@mittwald/flow-react-components/Button";
+import Section from "@mittwald/flow-react-components/Section";
+import ActionGroup from "@mittwald/flow-react-components/ActionGroup";
+import Content from "@mittwald/flow-react-components/Content";
+import Link from "@mittwald/flow-react-components/Link";
+import TextField from "@mittwald/flow-react-components/TextField";
+import Modal, {
+  ModalTrigger,
+} from "@mittwald/flow-react-components/Modal";
+import Label from "@mittwald/flow-react-components/Label";
+import Header from "@mittwald/flow-react-components/Header";
+import { ColumnLayout } from "@mittwald/flow-react-components/ColumnLayout";
+import Initials from "@mittwald/flow-react-components/Initials";
+import Table, {
+  TableBody,
+  TableCell,
+  TableColumn,
+  TableFooterRow,
+  TableHeader,
+  TableRow,
+} from "@mittwald/flow-react-components/Table";
+import CheckboxButton from "@mittwald/flow-react-components/CheckboxButton";
+import { Action } from "@mittwald/flow-react-components/Action";
+import { LayoutCard } from "@mittwald/flow-react-components/LayoutCard";
+import AlertBadge from "@mittwald/flow-react-components/AlertBadge";
+import { Align } from "@mittwald/flow-react-components/Align";
+
+export default () => {
+  interface Domain {
+    hostname: string;
+    type: "Domain" | "Subdomain" | "Default-Domain";
+    ssl?: string;
+  }
+
+  const domains: Domain[] = [
+    {
+      hostname: "toujours.de",
+      type: "Domain",
+    },
+    {
+      hostname: "www.toujours.de",
+      type: "Subdomain",
+      ssl: "Let’s Encrypt",
+    },
+    {
+      hostname: "p-lis5uw.project.space",
+      type: "Default-Domain",
+      ssl: "Let’s Encrypt",
+    },
+  ];
+  const DomainList = typedList<Domain>();
+
+  const addDomainModal = (
+    <Modal offCanvas>
+      <Heading>Domain buchen</Heading>
+      <Content>
+        <Section>
+          <Heading>Wunsch-Domain</Heading>
+          <Text>
+            Eine Liste der Top-Level-Domains findest du auf
+            unserer{" "}
+            <Link
+              target="_blank"
+              href="https://www.mittwald.de/produkte/domains"
+            >
+              Domain-Seite
+            </Link>
+            .
+          </Text>
+          <TextField isRequired>
+            <Label>Domain</Label>
+          </TextField>
+        </Section>
+        <Section>
+          <Header>
+            <Heading>Domain-Inhaber</Heading>
+            <Button
+              color="accent"
+              onPress={() => alert("not implemented")}
+            >
+              Hinzufügen
+            </Button>
+          </Header>
+          <Text>
+            Du hast noch keinen Domain-Inhaber angelegt.
+          </Text>
+        </Section>
+        <Section>
+          <Heading>Bestellübersicht</Heading>
+          <ColumnLayout>
+            <Align>
+              <Avatar color="blue">
+                <Initials>Max Mustermann</Initials>
+              </Avatar>
+              <Text>
+                <b>Meine Organisation</b>
+                Franz Müller
+                <br />
+                Jackenweg 44a
+                <br />
+                12893 Lanzhausen
+              </Text>
+            </Align>
+            <Align>
+              <Avatar color="blue">
+                <IconInvoice />
+              </Avatar>
+              <Text>
+                <b>Rechnung</b>
+                Franz Müller
+                <br />
+                Jackenweg 44a
+                <br />
+                12893 Lanzhausen
+              </Text>
+            </Align>
+          </ColumnLayout>
+          <Table>
+            <TableHeader>
+              <TableColumn>Artikel</TableColumn>
+              <TableColumn>Preis</TableColumn>
+            </TableHeader>
+            <TableBody>
+              <TableRow>
+                <TableCell>Beispiel Domain</TableCell>
+                <TableCell>0,00 €</TableCell>
+              </TableRow>
+              <TableRow>
+                <TableCell>Einrichtungsgebühr</TableCell>
+                <TableCell>0,00 €</TableCell>
+              </TableRow>
+              <TableFooterRow>
+                <TableCell>Gesamtpreis</TableCell>
+                <TableCell>0,00 €</TableCell>
+              </TableFooterRow>
+            </TableBody>
+          </Table>
+          <CheckboxButton isRequired>
+            Ich verstehe, dass ein Klick auf
+            “Kostenpflichtig buchen” keinerlei Auswirkungen
+            hat, da es sich um einen rein fiktiven
+            Bestellprozess handelt. Es wird keine Bestellung
+            ausgelöst und wir speichern keine Daten. Hier
+            passiert nichts, daher sind AGBs und Datenschutz
+            überflüssig.
+          </CheckboxButton>
+        </Section>
+      </Content>
+      <ActionGroup>
+        <Action closeOverlay="Modal">
+          <Button color="secondary" variant="soft">
+            Abbrechen
+          </Button>
+          <Button color="accent">
+            Kostenpflichtig bestellen
+          </Button>
+          ‚
+        </Action>
+      </ActionGroup>
+    </Modal>
+  );
+
+  return (
+    <LayoutCard>
+      <Section>
+        {domains.length > 0 && (
+          <DomainList.List batchSize={5}>
+            <ActionGroup>
+              <ModalTrigger>
+                <Button color="accent">
+                  Domain anlegen
+                </Button>
+                {addDomainModal}
+              </ModalTrigger>
+            </ActionGroup>
+            <DomainList.StaticData data={domains} />
+            <DomainList.Search />
+            <DomainList.Sorting
+              property="hostname"
+              name="A bis Z"
+              defaultEnabled
+            />
+            <DomainList.Sorting
+              property="hostname"
+              name="Z bis A"
+              direction="desc"
+            />
+            <DomainList.Filter
+              name="Filter"
+              property="type"
+            />
+
+            <DomainList.Item>
+              {(domain) => (
+                <ListItemView>
+                  <Avatar
+                    color={
+                      domain.type === "Domain"
+                        ? "blue"
+                        : domain.type === "Subdomain"
+                          ? "teal"
+                          : "lilac"
+                    }
+                  >
+                    {domain.type === "Domain" ? (
+                      <IconDomain />
+                    ) : domain.type === "Subdomain" ? (
+                      <IconSubdomain />
+                    ) : (
+                      <IconHome />
+                    )}
+                  </Avatar>
+                  <Heading>
+                    {domain.hostname}{" "}
+                    {!domain.ssl && (
+                      <AlertBadge status="danger">
+                        SSL-Zertifikat
+                      </AlertBadge>
+                    )}
+                  </Heading>
+                  <Text>{domain.type}</Text>
+                </ListItemView>
+              )}
+            </DomainList.Item>
+          </DomainList.List>
+        )}
+      </Section>
+    </LayoutCard>
+  );
+};