Merge branch 'main' into e-1694-designsystem-cardstemplate-transactio…

…n-card-refacto-project

.storybook/preview.ts → .storybook/preview.tsx

@@ -6,7 +6,16 @@ import "remixicon/fonts/remixicon.css";
 
 import "@/app/globals.css";
 
+import { TranslationProvider } from "../shared/translation/components/translation-provider/translation-provider";
+
 const preview: Preview = {
+  decorators: [
+    Story => (
+      <TranslationProvider>
+        <Story />
+      </TranslationProvider>
+    ),
+  ],
   parameters: {
     docs: {
       canvas: {

app/programs/[programId]/_context/program-details-panels/program-details-panels.context.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+import { PropsWithChildren, RefObject, createContext, useRef } from "react";
+
+import { SidePanelGroupRef } from "@/shared/features/side-panel-group/side-panel-group.types";
+
+interface ProgramDetailsPanelContextInterface {
+  transactionPanel: RefObject<SidePanelGroupRef>;
+}
+
+export const ProgramDetailsPanelContext = createContext<ProgramDetailsPanelContextInterface>({
+  transactionPanel: { current: null },
+});
+
+export function ProgramDetailsPanelProvider({ children }: PropsWithChildren) {
+  const transactionPanel = useRef<SidePanelGroupRef>(null);
+
+  return (
+    <ProgramDetailsPanelContext.Provider value={{ transactionPanel }}>{children}</ProgramDetailsPanelContext.Provider>
+  );
+}

app/programs/[programId]/_features/transactions-sidepanel/transaction-sidepanel.en.json

@@ -0,0 +1,8 @@
+{
+  "transaction": {
+    "title": "Transactions"
+  },
+  "export": {
+    "title": "Export"
+  }
+}

app/programs/[programId]/_features/transactions-sidepanel/transactions-sidepanel.tsx

@@ -0,0 +1,36 @@
+import { useContext } from "react";
+
+import { ProgramDetailsPanelContext } from "@/app/programs/[programId]/_context/program-details-panels/program-details-panels.context";
+
+import { Button } from "@/design-system/atoms/button/variants/button-default";
+
+import { SIDE_PANEL_GAP, SIDE_PANEL_SIZE } from "@/shared/constants/side-panel-size";
+import { SidePanelGroup } from "@/shared/features/side-panel-group/side-panel-group";
+import { SidePanelHeader } from "@/shared/features/side-panel-group/side-panel-header/side-panel-header";
+import { SidePanel } from "@/shared/features/side-panel-group/side-panel/side-panel";
+
+import { TransactionsSidepanels } from "./transactions-sidepanel.types";
+
+export function TransactionsSidepanel() {
+  const { transactionPanel } = useContext(ProgramDetailsPanelContext);
+
+  return (
+    <SidePanelGroup
+      ref={transactionPanel}
+      panels={[TransactionsSidepanels.TRANSACTIONS, TransactionsSidepanels.EXPORT]}
+      defaultPanelName={TransactionsSidepanels.TRANSACTIONS}
+      config={{ closedWidth: 0, openedWidth: SIDE_PANEL_SIZE.m, gap: SIDE_PANEL_GAP.m }}
+    >
+      {/* @INFO THIS TWO PANELS COULD BE SPLIT IN TWO FILE */}
+      <SidePanel name={TransactionsSidepanels.TRANSACTIONS}>
+        <SidePanelHeader canClose={true} title={{ token: "programs:transactionPanel.transaction.title" }} />
+        <Button variant={"secondary-light"} onClick={() => transactionPanel.current?.onNext()}>
+          Export CSV
+        </Button>
+      </SidePanel>
+      <SidePanel name={TransactionsSidepanels.EXPORT}>
+        <SidePanelHeader canGoBack={true} canClose={true} title={{ token: "programs:transactionPanel.export.title" }} />
+      </SidePanel>
+    </SidePanelGroup>
+  );
+}

app/programs/[programId]/_features/transactions-sidepanel/transactions-sidepanel.types.ts

@@ -0,0 +1,8 @@
+import { PropsWithChildren } from "react";
+
+export enum TransactionsSidepanels {
+  TRANSACTIONS = "transactions",
+  EXPORT = "export",
+}
+
+export interface TransactionsSidepanelProps extends PropsWithChildren {}

app/programs/[programId]/page.tsx

@@ -1,11 +1,37 @@
 "use client";
 
+import { useContext } from "react";
+
+import {
+  ProgramDetailsPanelContext,
+  ProgramDetailsPanelProvider,
+} from "@/app/programs/[programId]/_context/program-details-panels/program-details-panels.context";
+import { TransactionsSidepanel } from "@/app/programs/[programId]/_features/transactions-sidepanel/transactions-sidepanel";
+
 import { ProgramReactQueryAdapter } from "@/core/application/react-query-adapter/program";
 
+import { Button } from "@/design-system/atoms/button/variants/button-default";
+
+import { AnimatedColumnGroup } from "@/shared/components/animated-column-group/animated-column-group";
+import { AnimatedColumn } from "@/shared/components/animated-column-group/animated-column/animated-column";
 import { NEXT_ROUTER } from "@/shared/constants/router";
 import { PageWrapper } from "@/shared/features/page-wrapper/page-wrapper";
 import { Translate } from "@/shared/translation/components/translate/translate";
 
+function TransactionButtonMock() {
+  const { transactionPanel } = useContext(ProgramDetailsPanelContext);
+
+  function togglePanel() {
+    const isPanelOpen = transactionPanel.current?.isPanelOpen();
+    if (isPanelOpen) {
+      transactionPanel.current?.closePanel();
+    } else {
+      transactionPanel.current?.openPanel();
+    }
+  }
+  return <Button onClick={togglePanel}>Open Transactions</Button>;
+}
+
 export default function ProgramPage({ params: { programId } }: { params: { programId: string } }) {
   const { data } = ProgramReactQueryAdapter.client.useGetProgramById({
     pathParams: {
@@ -14,25 +40,33 @@ export default function ProgramPage({ params: { programId } }: { params: { progr
   });
 
   return (
-    <PageWrapper
-      navigation={{
-        iconName: "ri-clipboard-line",
-        breadcrumbs: [
-          {
-            id: "root",
-            label: <Translate token={"programs:list.header.title"} />,
-            href: NEXT_ROUTER.programs.root,
-          },
-          {
-            id: "details",
-            label: data?.name,
-          },
-        ],
-      }}
-    >
-      <div className="flex flex-1 flex-col gap-3">
-        <h1>Program Page : {data?.name}</h1>
-      </div>
-    </PageWrapper>
+    <ProgramDetailsPanelProvider>
+      <PageWrapper
+        navigation={{
+          iconName: "ri-clipboard-line",
+          breadcrumbs: [
+            {
+              id: "root",
+              label: <Translate token={"programs:list.header.title"} />,
+              href: NEXT_ROUTER.programs.root,
+            },
+            {
+              id: "details",
+              label: data?.name,
+            },
+          ],
+        }}
+      >
+        <AnimatedColumnGroup>
+          <AnimatedColumn autoWidth={true} className="h-full flex-1 overflow-auto bg-container-2">
+            <div className="h-auto">
+              <h1>Content of Program Page : {data?.name}</h1>
+              <TransactionButtonMock />
+            </div>
+          </AnimatedColumn>
+          <TransactionsSidepanel />
+        </AnimatedColumnGroup>
+      </PageWrapper>
+    </ProgramDetailsPanelProvider>
   );
 }

app/programs/_translations/programs.translate.ts

@@ -1,6 +1,7 @@
+import enTransactionPanel from "../[programId]/_features/transactions-sidepanel/transaction-sidepanel.en.json";
+import enProgramsDetails from "../[programId]/programs-detail.en.json";
 import enPrograms from "./programs.en.json";
-import enProgramsDetails from "./programs.en.json";
 
 export const enProgramsTranslation = {
-  programs: { list: enPrograms, details: enProgramsDetails },
+  programs: { list: enPrograms, details: enProgramsDetails, transactionPanel: enTransactionPanel },
 };

design-system/atoms/button/button.loading.tsx

@@ -12,16 +12,16 @@ const skeletonVariants = tv({
   variants: {
     size: {
       s: {
-        base: "size-8",
+        base: "h-[26px] w-[152px]",
       },
       m: {
-        base: "size-10",
+        base: "h-[34px] w-[194px]",
       },
       l: {
-        base: "size-12",
+        base: "h-10 w-[202px]",
       },
       xl: {
-        base: "size-14",
+        base: "h-[50px] w-[228px]",
       },
     },
     hideText: {
@@ -33,28 +33,28 @@ const skeletonVariants = tv({
       size: "s",
       hideText: true,
       className: {
-        base: "w-[150px]",
+        base: "size-[26px]",
       },
     },
     {
       size: "m",
       hideText: true,
       className: {
-        base: "w-[192px]",
+        base: "size-[34px]",
       },
     },
     {
       size: "l",
       hideText: true,
       className: {
-        base: "w-[200px]",
+        base: "size-10",
       },
     },
     {
       size: "xl",
       hideText: true,
       className: {
-        base: "w-[226px]",
+        base: "size-[50px]",
       },
     },
   ],

design-system/atoms/table-header/adapters/react-table/react-table.adapter.tsx

@@ -7,7 +7,7 @@ import { cn } from "@/shared/helpers/cn";
 import { TableHeaderPort } from "../../table-header.types";
 import { TableHeaderReactTableVariants } from "./react-table.variants";
 
-export function TableHeaderReactTableAdapter({ headerGroups, classNames }: TableHeaderPort) {
+export function TableHeaderReactTableAdapter<H>({ headerGroups, classNames }: TableHeaderPort<H>) {
   const slots = TableHeaderReactTableVariants();
 
   return (

design-system/atoms/table-header/adapters/react-table/react-table.variants.tsx

@@ -4,7 +4,7 @@ export const TableHeaderReactTableVariants = tv({
   slots: {
     base: "bg-container-4",
     row: "",
-    header: "p-4 text-left leading-none first:rounded-l-lg last:rounded-r-lg",
+    header: "p-4 text-left leading-none first:rounded-l-xl last:rounded-r-xl",
   },
   variants: {},
   defaultVariants: {},

design-system/atoms/table-header/table-header.stories.tsx

@@ -47,32 +47,22 @@ const defaultData: Person[] = [
 const columnHelper = createColumnHelper<Person>();
 
 const columns = [
-  columnHelper.accessor("firstName", {
-    cell: info => info.getValue(),
-    footer: info => info.column.id,
-  }),
+  columnHelper.accessor("firstName", {}),
   columnHelper.accessor(row => row.lastName, {
     id: "lastName",
-    cell: info => <i>{info.getValue()}</i>,
     header: () => <span>Last Name</span>,
-    footer: info => info.column.id,
   }),
   columnHelper.accessor("age", {
     header: () => "Age",
-    cell: info => info.renderValue(),
-    footer: info => info.column.id,
   }),
   columnHelper.accessor("visits", {
     header: () => <span>Visits</span>,
-    footer: info => info.column.id,
   }),
   columnHelper.accessor("status", {
     header: "Status",
-    footer: info => info.column.id,
   }),
   columnHelper.accessor("progress", {
     header: "Profile Progress",
-    footer: info => info.column.id,
   }),
 ];
 

design-system/atoms/table-header/table-header.types.ts

@@ -1,4 +1,4 @@
-import { useReactTable } from "@tanstack/react-table";
+import { HeaderGroup as ReactTableHeaderGroup } from "@tanstack/react-table";
 
 interface Variants {}
 
@@ -8,7 +8,7 @@ interface ClassNames {
   header: string;
 }
 
-interface HeaderGroups extends ReturnType<ReturnType<typeof useReactTable>["getHeaderGroups"]> {
+interface HeaderGroup<H> extends ReactTableHeaderGroup<H> {
   // Includes the following
   // id: string;
   // headers: {
@@ -17,7 +17,7 @@ interface HeaderGroups extends ReturnType<ReturnType<typeof useReactTable>["getH
   // }[];
 }
 
-export interface TableHeaderPort extends Partial<Variants> {
-  headerGroups: HeaderGroups;
+export interface TableHeaderPort<H> extends Partial<Variants> {
+  headerGroups: HeaderGroup<H>[];
   classNames?: Partial<ClassNames>;
 }

design-system/atoms/table-header/variants/table-header-default.tsx

@@ -3,6 +3,6 @@ import { withComponentAdapter } from "@/design-system/helpers/with-component-ada
 import { TableHeaderReactTableAdapter } from "../adapters/react-table/react-table.adapter";
 import { TableHeaderPort } from "../table-header.types";
 
-export function TableHeader(props: TableHeaderPort) {
-  return withComponentAdapter<TableHeaderPort>(TableHeaderReactTableAdapter)(props);
+export function TableHeader<H>(props: TableHeaderPort<H>) {
+  return withComponentAdapter<TableHeaderPort<H>>(TableHeaderReactTableAdapter)(props);
 }

design-system/atoms/table-row/adapters/react-table/react-table.adapter.tsx

@@ -0,0 +1,20 @@
+import { flexRender } from "@tanstack/react-table";
+
+import { cn } from "@/shared/helpers/cn";
+
+import { TableRowPort } from "../../table-row.types";
+import { TableRowReactTableVariants } from "./react-table.variants";
+
+export function TableRowReactTableAdapter({ row, classNames }: TableRowPort) {
+  const slots = TableRowReactTableVariants();
+
+  return (
+    <tr key={row.id} className={cn(slots.base(), classNames?.base)}>
+      {row.getVisibleCells().map(cell => (
+        <td key={cell.id} className={cn(slots.cell(), classNames?.cell)}>
+          {flexRender(cell.column.columnDef.cell, cell.getContext())}
+        </td>
+      ))}
+    </tr>
+  );
+}

design-system/atoms/table-row/adapters/react-table/react-table.variants.tsx

@@ -0,0 +1,10 @@
+import { tv } from "tailwind-variants";
+
+export const TableRowReactTableVariants = tv({
+  slots: {
+    base: "",
+    cell: "border-b border-t border-container-stroke-separator p-3 first:rounded-l-xl first:border-l last:rounded-r-xl last:border-r",
+  },
+  variants: {},
+  defaultVariants: {},
+});

design-system/atoms/table-row/index.ts

@@ -0,0 +1,3 @@
+export * from "./variants/table-row-default";
+export * from "./table-row.types";
+export * from "./table-row.loading";

design-system/atoms/table-row/table-row.loading.tsx

@@ -0,0 +1,11 @@
+import { Skeleton } from "@/design-system/atoms/skeleton";
+
+export function TableRowLoading() {
+  return (
+    <Skeleton
+      classNames={{
+        base: "w-full h-14",
+      }}
+    />
+  );
+}