Update cells usage (#1002)

swan-io · Nov 12, 2024 · 3aa473e · 3aa473e
1 parent f910c5a
commit 3aa473e
Show file tree

Hide file tree

Showing 36 changed files with 261 additions and 325 deletions.
diff --git a/.prettierignore b/.prettierignore
@@ -1,7 +1,9 @@
 *.min.js
 
+LICENSE_REPORT.md
 coverage/
 dist/
-pnpm-lock.yaml
+docs/.docusaurus/
+docs/build/
 node_modules/
-LICENSE_REPORT.md
+pnpm-lock.yaml
diff --git a/clients/banking/package.json b/clients/banking/package.json
@@ -18,9 +18,9 @@
     "@swan-io/boxed": "3.1.1",
     "@swan-io/chicane": "2.1.0",
     "@swan-io/graphql-client": "0.3.1",
-    "@swan-io/lake": "11.1.3",
+    "@swan-io/lake": "11.1.4",
     "@swan-io/request": "1.0.6",
-    "@swan-io/shared-business": "11.1.3",
+    "@swan-io/shared-business": "11.1.4",
     "@swan-io/use-form": "3.1.0",
     "core-js": "3.38.1",
     "dayjs": "1.11.13",

diff --git a/clients/banking/src/components/AccountStatementCustom.tsx b/clients/banking/src/components/AccountStatementCustom.tsx
@@ -3,14 +3,7 @@ import { Link } from "@swan-io/chicane";
 import { useMutation, useQuery } from "@swan-io/graphql-client";
 import { BorderedIcon } from "@swan-io/lake/src/components/BorderedIcon";
 import { Box } from "@swan-io/lake/src/components/Box";
-import {
-  CellAction,
-  CenteredCell,
-  EndAlignedCell,
-  SimpleHeaderCell,
-  SimpleRegularTextCell,
-  SimpleTitleCell,
-} from "@swan-io/lake/src/components/Cells";
+import { ActionCell, Cell, HeaderCell, TextCell } from "@swan-io/lake/src/components/Cells";
 import { EmptyView } from "@swan-io/lake/src/components/EmptyView";
 import { Icon } from "@swan-io/lake/src/components/Icon";
 import { LakeButton, LakeButtonGroup } from "@swan-io/lake/src/components/LakeButton";
@@ -117,22 +110,24 @@ const columns: ColumnConfig<Statement, ExtraInfo>[] = [
     title: t("accountStatements.period"),
     width: "grow",
     id: "period",
-    renderTitle: ({ title }) => <SimpleHeaderCell text={title} />,
+    renderTitle: ({ title }) => <HeaderCell text={title} />,
     renderCell: ({ item: { openingDate, closingDate } }) => {
       const openingDateStatement = dayjs.utc(openingDate).add(1, "hour").format("MMM, DD YYYY");
       const closingDateStatement = dayjs.utc(closingDate).add(1, "hour").format("MMM, DD YYYY");
-      return <SimpleTitleCell text={`${openingDateStatement} - ${closingDateStatement}`} />;
+      return (
+        <TextCell variant="medium" text={`${openingDateStatement} - ${closingDateStatement}`} />
+      );
     },
   },
   {
     title: t("accountStatements.generated"),
     width: 150,
     id: "generated",
-    renderTitle: ({ title }) => <SimpleHeaderCell text={title} />,
+    renderTitle: ({ title }) => <HeaderCell text={title} />,
     renderCell: ({ item: { createdAt, status } }) => {
       return status === "Available" ? (
-        <SimpleRegularTextCell
-          textAlign="left"
+        <TextCell
+          align="left"
           variant="smallMedium"
           text={dayjs(createdAt).format("MMM, DD YYYY")}
         />
@@ -146,24 +141,20 @@ const columns: ColumnConfig<Statement, ExtraInfo>[] = [
     renderTitle: () => null,
     renderCell: ({ item: { status } }) => {
       return status === "Available" ? null : (
-        <SimpleRegularTextCell
-          textAlign="right"
-          variant="smallMedium"
-          text={t("accountStatements.notReady")}
-        />
+        <TextCell align="right" variant="smallMedium" text={t("accountStatements.notReady")} />
       );
     },
   },
   {
     title: t("accountStatements.action"),
     width: 70,
     id: "action",
-    renderTitle: ({ title }) => <SimpleHeaderCell text={title} justifyContent="center" />,
+    renderTitle: ({ title }) => <HeaderCell text={title} align="center" />,
     renderCell: ({ item: { status } }) => {
       return status === "Available" ? (
-        <CenteredCell>
+        <Cell align="center">
           <Icon name="open-regular" size={16} color={colors.gray[300]} />
-        </CenteredCell>
+        </Cell>
       ) : null;
     },
   },
@@ -178,7 +169,9 @@ const smallColumns: ColumnConfig<Statement, ExtraInfo>[] = [
     renderCell: ({ item: { openingDate, closingDate } }) => {
       const openingDateStatement = dayjs.utc(openingDate).add(1, "hour").format("MMM, DD YYYY");
       const closingDateStatement = dayjs.utc(closingDate).add(1, "hour").format("MMM, DD YYYY");
-      return <SimpleTitleCell text={`${openingDateStatement} - ${closingDateStatement}`} />;
+      return (
+        <TextCell variant="medium" text={`${openingDateStatement} - ${closingDateStatement}`} />
+      );
     },
   },
 
@@ -189,23 +182,23 @@ const smallColumns: ColumnConfig<Statement, ExtraInfo>[] = [
     renderTitle: () => null,
     renderCell: ({ item: { status } }) => {
       return status === "Available" ? (
-        <EndAlignedCell>
-          <CellAction>
+        <Cell align="right">
+          <ActionCell>
             <Icon name="open-regular" size={16} color={colors.gray[300]} />
-          </CellAction>
-        </EndAlignedCell>
+          </ActionCell>
+        </Cell>
       ) : (
-        <EndAlignedCell>
-          <CellAction>
+        <Cell align="right">
+          <ActionCell>
             <BorderedIcon
               name="clock-regular"
               padding={4}
               size={24}
               color="warning"
               borderRadius={4}
             />
-          </CellAction>
-        </EndAlignedCell>
+          </ActionCell>
+        </Cell>
       );
     },
   },

diff --git a/clients/banking/src/components/AccountStatementMonthly.tsx b/clients/banking/src/components/AccountStatementMonthly.tsx
@@ -2,14 +2,7 @@ import { Array, Option } from "@swan-io/boxed";
 import { Link } from "@swan-io/chicane";
 import { useQuery } from "@swan-io/graphql-client";
 import { BorderedIcon } from "@swan-io/lake/src/components/BorderedIcon";
-import {
-  CellAction,
-  CenteredCell,
-  EndAlignedCell,
-  SimpleHeaderCell,
-  SimpleRegularTextCell,
-  SimpleTitleCell,
-} from "@swan-io/lake/src/components/Cells";
+import { ActionCell, Cell, HeaderCell, TextCell } from "@swan-io/lake/src/components/Cells";
 import { EmptyView } from "@swan-io/lake/src/components/EmptyView";
 import { Icon } from "@swan-io/lake/src/components/Icon";
 import {
@@ -59,20 +52,20 @@ const columns: ColumnConfig<Statement, ExtraInfo>[] = [
     title: t("accountStatements.period"),
     width: 150,
     id: "period",
-    renderTitle: ({ title }) => <SimpleHeaderCell text={title} />,
+    renderTitle: ({ title }) => <HeaderCell text={title} />,
     renderCell: ({ item: { openingDate } }) => (
-      <SimpleTitleCell text={dayjs(openingDate).format("MMMM YYYY")} />
+      <TextCell variant="medium" text={dayjs(openingDate).format("MMMM YYYY")} />
     ),
   },
   {
     title: t("accountStatements.generated"),
     width: "grow",
     id: "generated",
-    renderTitle: ({ title }) => <SimpleHeaderCell text={title} />,
+    renderTitle: ({ title }) => <HeaderCell text={title} />,
     renderCell: ({ item: { createdAt, status } }) => {
       return status === "Available" ? (
-        <SimpleRegularTextCell
-          textAlign="left"
+        <TextCell
+          align="left"
           variant="smallMedium"
           text={dayjs(createdAt).format("MMM, DD YYYY")}
         />
@@ -86,9 +79,9 @@ const columns: ColumnConfig<Statement, ExtraInfo>[] = [
     renderTitle: () => null,
     renderCell: ({ item: { status } }) => {
       return status === "Available" ? null : (
-        <SimpleRegularTextCell
+        <TextCell
           color={colors.gray[300]}
-          textAlign="right"
+          align="right"
           variant="smallMedium"
           text={t("accountStatements.notReady")}
         />
@@ -99,12 +92,12 @@ const columns: ColumnConfig<Statement, ExtraInfo>[] = [
     title: t("accountStatements.action"),
     width: 70,
     id: "action",
-    renderTitle: ({ title }) => <SimpleHeaderCell justifyContent="center" text={title} />,
+    renderTitle: ({ title }) => <HeaderCell align="center" text={title} />,
     renderCell: ({ item: { status } }) => {
       return status === "Available" ? (
-        <CenteredCell>
+        <Cell align="center">
           <Icon name="open-regular" size={16} color={colors.gray[300]} />
-        </CenteredCell>
+        </Cell>
       ) : null;
     },
   },
@@ -117,7 +110,7 @@ const smallColumns: ColumnConfig<Statement, ExtraInfo>[] = [
     id: "period",
     renderTitle: () => null,
     renderCell: ({ item: { openingDate } }) => (
-      <SimpleTitleCell text={dayjs(openingDate).format("MMMM YYYY")} />
+      <TextCell variant="medium" text={dayjs(openingDate).format("MMMM YYYY")} />
     ),
   },
   {
@@ -127,23 +120,23 @@ const smallColumns: ColumnConfig<Statement, ExtraInfo>[] = [
     renderTitle: () => null,
     renderCell: ({ item: { status } }) => {
       return status === "Available" ? (
-        <EndAlignedCell>
-          <CellAction>
+        <Cell align="right">
+          <ActionCell>
             <Icon name="open-regular" size={16} color={colors.gray[300]} />
-          </CellAction>
-        </EndAlignedCell>
+          </ActionCell>
+        </Cell>
       ) : (
-        <EndAlignedCell>
-          <CellAction>
+        <Cell align="right">
+          <ActionCell>
             <BorderedIcon
               name="clock-regular"
               padding={4}
               size={24}
               color="warning"
               borderRadius={4}
             />
-          </CellAction>
-        </EndAlignedCell>
+          </ActionCell>
+        </Cell>
       );
     },
   },

diff --git a/clients/banking/src/components/BeneficiaryList.tsx b/clients/banking/src/components/BeneficiaryList.tsx
@@ -1,8 +1,8 @@
 import { AsyncData, Dict, Option, Result } from "@swan-io/boxed";
 import { Link } from "@swan-io/chicane";
 import { useForwardPagination, useQuery } from "@swan-io/graphql-client";
-import { Box, BoxProps } from "@swan-io/lake/src/components/Box";
-import { CellAction, EndAlignedCell, SimpleHeaderCell } from "@swan-io/lake/src/components/Cells";
+import { Box } from "@swan-io/lake/src/components/Box";
+import { ActionCell, Cell, HeaderCell } from "@swan-io/lake/src/components/Cells";
 import { EmptyView } from "@swan-io/lake/src/components/EmptyView";
 import { Fill } from "@swan-io/lake/src/components/Fill";
 import { FilterChooser } from "@swan-io/lake/src/components/FilterChooser";
@@ -66,27 +66,13 @@ const styles = StyleSheet.create({
   headerLarge: {
     paddingHorizontal: spacings[40],
   },
-  cell: {
-    paddingHorizontal: spacings[16],
-  },
 });
 
 type Account = NonNullable<BeneficiariesListQuery["account"]>;
 type Beneficiaries = NonNullable<Account["trustedBeneficiaries"]>;
 type Beneficiary = GetNode<Beneficiaries>;
 type RouteParams = GetRouteParams<"AccountPaymentsBeneficiariesList">;
 
-const Cell = (props: BoxProps) => (
-  <Box
-    direction="row"
-    alignItems="center"
-    grow={1}
-    shrink={1}
-    {...props}
-    style={[styles.cell, props.style]}
-  />
-);
-
 export const getBeneficiaryIdentifier = (beneficiary: Beneficiary) =>
   match(beneficiary)
     .returnType<Option<{ label: string; text: string }>>()
@@ -143,7 +129,7 @@ const smallColumns: ColumnConfig<Beneficiary, undefined>[] = [
     id: "name",
     title: t("beneficiaries.label.title"),
     width: "grow",
-    renderTitle: ({ title }) => <SimpleHeaderCell text={title} />,
+    renderTitle: ({ title }) => <HeaderCell text={title} />,
     renderCell: ({ item }) => {
       const identifier = getBeneficiaryIdentifier(item);
 
@@ -183,7 +169,7 @@ const columns: ColumnConfig<Beneficiary, undefined>[] = [
     id: "name",
     title: t("beneficiaries.label.title"),
     width: "grow",
-    renderTitle: ({ title }) => <SimpleHeaderCell text={title} />,
+    renderTitle: ({ title }) => <HeaderCell text={title} />,
     renderCell: ({ item }) => (
       <Cell>
         <Tag
@@ -213,7 +199,7 @@ const columns: ColumnConfig<Beneficiary, undefined>[] = [
     id: "identifier",
     title: t("beneficiaries.details.title"),
     width: "grow",
-    renderTitle: ({ title }) => <SimpleHeaderCell text={title} />,
+    renderTitle: ({ title }) => <HeaderCell text={title} />,
     renderCell: ({ item }) => {
       const identifier = getBeneficiaryIdentifier(item);
 
@@ -237,7 +223,7 @@ const columns: ColumnConfig<Beneficiary, undefined>[] = [
     id: "currency",
     title: t("beneficiaries.currency.title"),
     width: 200,
-    renderTitle: ({ title }) => <SimpleHeaderCell text={title} />,
+    renderTitle: ({ title }) => <HeaderCell text={title} />,
     renderCell: ({ item }) => {
       const currency = match(item)
         .with({ __typename: "TrustedInternationalBeneficiary" }, ({ currency }) => currency)
@@ -272,7 +258,7 @@ const columns: ColumnConfig<Beneficiary, undefined>[] = [
     id: "type",
     title: t("beneficiaries.type.title"),
     width: 200,
-    renderTitle: ({ title }) => <SimpleHeaderCell text={title} />,
+    renderTitle: ({ title }) => <HeaderCell text={title} />,
     renderCell: ({ item }) => (
       <Cell>
         <LakeText variant="smallMedium" color={colors.gray[700]} numberOfLines={1}>
@@ -291,15 +277,15 @@ const columns: ColumnConfig<Beneficiary, undefined>[] = [
     title: "",
     renderTitle: () => null,
     renderCell: ({ isHovered }) => (
-      <EndAlignedCell>
-        <CellAction>
+      <Cell align="right">
+        <ActionCell>
           <Icon
             name="chevron-right-filled"
             color={isHovered ? colors.gray[900] : colors.gray[500]}
             size={16}
           />
-        </CellAction>
-      </EndAlignedCell>
+        </ActionCell>
+      </Cell>
     ),
   },
 ];

diff --git a/clients/banking/src/components/CardList.tsx b/clients/banking/src/components/CardList.tsx
@@ -1,5 +1,5 @@
 import { Option } from "@swan-io/boxed";
-import { SimpleHeaderCell } from "@swan-io/lake/src/components/Cells";
+import { HeaderCell } from "@swan-io/lake/src/components/Cells";
 import { ColumnConfig, PlainListView } from "@swan-io/lake/src/components/PlainListView";
 import { LinkConfig } from "@swan-io/lake/src/components/VirtualizedList";
 import { ReactElement, ReactNode, useState } from "react";
@@ -38,21 +38,21 @@ const columns: ColumnConfig<CardListItemFragment, ExtraInfo>[] = [
     id: "type",
     width: "grow",
     title: t("cardList.fullNameAndCardType"),
-    renderTitle: ({ title }) => <SimpleHeaderCell text={title} />,
+    renderTitle: ({ title }) => <HeaderCell text={title} />,
     renderCell: ({ item }) => <FullNameAndCardTypeCell card={item} />,
   },
   {
     id: "name",
     width: 150,
     title: t("cardList.cardName"),
-    renderTitle: ({ title }) => <SimpleHeaderCell text={title} />,
+    renderTitle: ({ title }) => <HeaderCell text={title} />,
     renderCell: ({ item }) => <CardNameCell card={item} />,
   },
   {
     id: "spendingLimit",
     width: 200,
     title: t("cardList.spendingLimit"),
-    renderTitle: ({ title }) => <SimpleHeaderCell text={title} justifyContent="flex-end" />,
+    renderTitle: ({ title }) => <HeaderCell text={title} align="right" />,
     renderCell: ({ item }) => <CardSpendingLimitCell card={item} />,
   },
   {