feat: add action componentProps and server barrel files (#72)

* chore: add server barrel files * feat: add dynamic children property in actions * fix: responsive tabs styles * test: fix test and lint * docs: add changeset and switch children to componentProps * fix: types
Smile-SA · Nov 24, 2023 · c8d3d94 · c8d3d94
1 parent fbc68f5
commit c8d3d94
Show file tree

Hide file tree

Showing 20 changed files with 190 additions and 52 deletions.
diff --git a/.changeset/cold-terms-pay.md b/.changeset/cold-terms-pay.md
@@ -0,0 +1,7 @@
+---
+'@smile/react-front-kit-shared': minor
+'@smile/react-front-kit-table': minor
+'@smile/react-front-kit': minor
+---
+
+Add dynamic componentProps property in actions
diff --git a/.changeset/sharp-bikes-dress.md b/.changeset/sharp-bikes-dress.md
@@ -0,0 +1,7 @@
+---
+'@smile/react-front-kit-shared': patch
+'@smile/react-front-kit-table': patch
+'@smile/react-front-kit': patch
+---
+
+Add server barrel files
diff --git a/.changeset/slow-trainers-fry.md b/.changeset/slow-trainers-fry.md
@@ -0,0 +1,5 @@
+---
+'@smile/react-front-kit': patch
+---
+
+Fix responsiveTabs when layout switch between columns and rows
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/react-front-kit-shared/package.json b/packages/react-front-kit-shared/package.json
@@ -32,12 +32,16 @@
   "type": "module",
   "exports": {
     ".": "./dist/index.js",
+    "./server": "./dist/server.js",
     "./storybook-utils": "./dist/storybook-utils/index.js",
     "./test-utils": "./dist/test-utils/index.js"
   },
   "types": "./dist/index.d.ts",
   "typesVersions": {
     "*": {
+      "server": [
+        "dist/server.d.ts"
+      ],
       "storybook-utils": [
         "dist/storybook-utils/index.d.ts"
       ],

diff --git a/packages/react-front-kit-shared/src/server.tsx b/packages/react-front-kit-shared/src/server.tsx
@@ -0,0 +1,3 @@
+/* eslint-disable react-refresh/only-export-components */
+export * from './helpers';
+export * from './theme';
diff --git a/packages/react-front-kit-shared/src/types/actions.ts b/packages/react-front-kit-shared/src/types/actions.ts
@@ -20,9 +20,12 @@ export interface IActionConfirmModalProps<Item>
 
 export interface IAction<Item> {
   color?: string;
+  componentProps?:
+    | Record<string, unknown>
+    | ((item: Item) => Record<string, unknown>);
   confirmModalProps?: IActionConfirmModalProps<Item>;
   confirmation?: boolean;
-  icon: ReactNode | ((item: Item) => ReactNode);
+  icon?: ReactNode | ((item: Item) => ReactNode);
   id: number | string;
   isItemAction?: boolean;
   isMassAction?: boolean;

diff --git a/packages/react-front-kit-table/package.json b/packages/react-front-kit-table/package.json
@@ -33,11 +33,15 @@
   "type": "module",
   "exports": {
     ".": "./dist/index.js",
+    "./server": "./dist/server.js",
     "./mock": "./dist/mock.js"
   },
   "types": "./dist/index.d.ts",
   "typesVersions": {
     "*": {
+      "server": [
+        "./dist/server.d.ts"
+      ],
       "mock": [
         "./dist/mock.d.ts"
       ]

diff --git a/packages/react-front-kit-table/src/Components/Table/Table.style.tsx b/packages/react-front-kit-table/src/Components/Table/Table.style.tsx
@@ -40,6 +40,15 @@ export const useStyles = createStyles((theme) => ({
       '0px 3.43489px 2.74791px 0px rgba(0, 0, 0, 0.02), 0px 8.6871px 6.94968px 0px rgba(0, 0, 0, 0.02), 0px 17.72087px 14.1767px 0px rgba(0, 0, 0, 0.03), 0px 36.50164px 29.20132px 0px rgba(0, 0, 0, 0.03), 0px 100px 80px 0px rgba(0, 0, 0, 0.05)',
   },
   rowActions: {
+    '& > *': {
+      alignItems: 'center',
+      display: 'flex',
+      height: '1.75rem',
+      justifyContent: 'center',
+      minHeight: '1.75rem',
+      minWidth: '1.75rem',
+      width: '1.75rem',
+    },
     boxShadow: 'none',
     display: 'flex',
     justifyContent: 'space-between',

diff --git a/packages/react-front-kit-table/src/Components/Table/Table.tsx b/packages/react-front-kit-table/src/Components/Table/Table.tsx
@@ -31,7 +31,11 @@ import {
 } from 'mantine-react-table';
 import { useState } from 'react';
 
-import { getActionIcon, getActionLabel } from '../../helpers';
+import {
+  getActionComponentProps,
+  getActionIcon,
+  getActionLabel,
+} from '../../helpers';
 
 import { useStyles } from './Table.style';
 
@@ -187,6 +191,7 @@ export function Table<Data extends Record<string, unknown>>(
                 onClick={() => handleAction(row, action)}
                 radius={4}
                 type="button"
+                {...getActionComponentProps(action, row)}
               >
                 {getActionIcon(action, row)}
               </ActionIcon>
@@ -223,6 +228,7 @@ export function Table<Data extends Record<string, unknown>>(
                     color={action.color}
                     icon={getActionIcon(action, row)}
                     onClick={() => handleAction(row, action)}
+                    {...getActionComponentProps(action, row)}
                   >
                     {getActionLabel(action, row)}
                   </Menu.Item>

diff --git a/packages/react-front-kit-table/src/Components/Table/__snapshots__/Table.test.tsx.snap b/packages/react-front-kit-table/src/Components/Table/__snapshots__/Table.test.tsx.snap
@@ -844,7 +844,7 @@ exports[`Table matches snapshot 1`] = `
               class="mantine-vej1ag"
             >
               <div
-                class="___ref-rowActions mantine-1idxz77"
+                class="___ref-rowActions mantine-126p8zl"
               />
             </td>
           </tr>
@@ -921,7 +921,7 @@ exports[`Table matches snapshot 1`] = `
               class="mantine-vej1ag"
             >
               <div
-                class="___ref-rowActions mantine-1idxz77"
+                class="___ref-rowActions mantine-126p8zl"
               />
             </td>
           </tr>
@@ -998,7 +998,7 @@ exports[`Table matches snapshot 1`] = `
               class="mantine-vej1ag"
             >
               <div
-                class="___ref-rowActions mantine-1idxz77"
+                class="___ref-rowActions mantine-126p8zl"
               />
             </td>
           </tr>
@@ -1075,7 +1075,7 @@ exports[`Table matches snapshot 1`] = `
               class="mantine-vej1ag"
             >
               <div
-                class="___ref-rowActions mantine-1idxz77"
+                class="___ref-rowActions mantine-126p8zl"
               />
             </td>
           </tr>
@@ -1152,7 +1152,7 @@ exports[`Table matches snapshot 1`] = `
               class="mantine-vej1ag"
             >
               <div
-                class="___ref-rowActions mantine-1idxz77"
+                class="___ref-rowActions mantine-126p8zl"
               />
             </td>
           </tr>

diff --git a/...ct-front-kit-table/src/Components/TableGridView/__snapshots__/TableGridView.test.tsx.snap b/...ct-front-kit-table/src/Components/TableGridView/__snapshots__/TableGridView.test.tsx.snap
@@ -927,7 +927,7 @@ exports[`TableGridView matches snapshot 1`] = `
                   class="mantine-vej1ag"
                 >
                   <div
-                    class="___ref-rowActions mantine-1idxz77"
+                    class="___ref-rowActions mantine-126p8zl"
                   >
                     <button
                       class="mantine-UnstyledButton-root mantine-ActionIcon-root mantine-qf5o1f"
@@ -1091,7 +1091,7 @@ exports[`TableGridView matches snapshot 1`] = `
                   class="mantine-vej1ag"
                 >
                   <div
-                    class="___ref-rowActions mantine-1idxz77"
+                    class="___ref-rowActions mantine-126p8zl"
                   >
                     <button
                       class="mantine-UnstyledButton-root mantine-ActionIcon-root mantine-qf5o1f"
@@ -1255,7 +1255,7 @@ exports[`TableGridView matches snapshot 1`] = `
                   class="mantine-vej1ag"
                 >
                   <div
-                    class="___ref-rowActions mantine-1idxz77"
+                    class="___ref-rowActions mantine-126p8zl"
                   >
                     <button
                       class="mantine-UnstyledButton-root mantine-ActionIcon-root mantine-qf5o1f"
@@ -1419,7 +1419,7 @@ exports[`TableGridView matches snapshot 1`] = `
                   class="mantine-vej1ag"
                 >
                   <div
-                    class="___ref-rowActions mantine-1idxz77"
+                    class="___ref-rowActions mantine-126p8zl"
                   >
                     <button
                       class="mantine-UnstyledButton-root mantine-ActionIcon-root mantine-qf5o1f"
@@ -1583,7 +1583,7 @@ exports[`TableGridView matches snapshot 1`] = `
                   class="mantine-vej1ag"
                 >
                   <div
-                    class="___ref-rowActions mantine-1idxz77"
+                    class="___ref-rowActions mantine-126p8zl"
                   >
                     <button
                       class="mantine-UnstyledButton-root mantine-ActionIcon-root mantine-qf5o1f"
@@ -1747,7 +1747,7 @@ exports[`TableGridView matches snapshot 1`] = `
                   class="mantine-vej1ag"
                 >
                   <div
-                    class="___ref-rowActions mantine-1idxz77"
+                    class="___ref-rowActions mantine-126p8zl"
                   >
                     <button
                       class="mantine-UnstyledButton-root mantine-ActionIcon-root mantine-qf5o1f"
@@ -1911,7 +1911,7 @@ exports[`TableGridView matches snapshot 1`] = `
                   class="mantine-vej1ag"
                 >
                   <div
-                    class="___ref-rowActions mantine-1idxz77"
+                    class="___ref-rowActions mantine-126p8zl"
                   >
                     <button
                       class="mantine-UnstyledButton-root mantine-ActionIcon-root mantine-qf5o1f"

diff --git a/packages/react-front-kit-table/src/helpers/table.ts b/packages/react-front-kit-table/src/helpers/table.ts
@@ -31,15 +31,33 @@ export function getActionIcon<Data extends Record<string, unknown>>(
   rows?: MRT_Row<Data> | MRT_Row<Data>[],
 ): ReactNode {
   if (!action) {
-    return '';
+    return null;
   }
   if (isConfirmAction(action)) {
     return typeof action.icon === 'function'
       ? action.icon(action.item)
       : action.icon;
   }
   if (typeof action.icon === 'function') {
-    return rows ? action.icon(rows) : '';
+    return rows ? action.icon(rows) : null;
   }
   return action.icon;
 }
+
+export function getActionComponentProps<Data extends Record<string, unknown>>(
+  action?: ITableAction<Data> | null,
+  rows?: MRT_Row<Data> | MRT_Row<Data>[],
+): Record<string, unknown> | undefined {
+  if (!action) {
+    return undefined;
+  }
+  if (isConfirmAction(action)) {
+    return typeof action.componentProps === 'function'
+      ? action.componentProps(action.item)
+      : action.componentProps;
+  }
+  if (typeof action.componentProps === 'function') {
+    return rows ? action.componentProps(rows) : undefined;
+  }
+  return action.componentProps;
+}
diff --git a/packages/react-front-kit-table/src/server.tsx b/packages/react-front-kit-table/src/server.tsx
@@ -0,0 +1,2 @@
+/* eslint-disable react-refresh/only-export-components */
+export * from './helpers';
diff --git a/packages/react-front-kit/package.json b/packages/react-front-kit/package.json
@@ -32,11 +32,15 @@
   "type": "module",
   "exports": {
     ".": "./dist/index.js",
+    "./server": "./dist/server.js",
     "./mock": "./dist/mock.js"
   },
   "types": "./dist/index.d.ts",
   "typesVersions": {
     "*": {
+      "server": [
+        "./dist/server.d.ts"
+      ],
       "mock": [
         "./dist/mock.d.ts"
       ]

diff --git a/packages/react-front-kit/src/Components/ResponsiveTabs/ResponsiveTabs.tsx b/packages/react-front-kit/src/Components/ResponsiveTabs/ResponsiveTabs.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import type { IDropdownButtonProps } from '../DropdownButton/DropdownButton';
 import type { TabsListProps, TabsProps } from '@mantine/core';
 import type { ReactElement, ReactNode } from 'react';
@@ -61,12 +63,17 @@ const useStyles = createStyles((theme) => ({
     flexDirection: 'column',
   },
   hidden: {
+    '& .mantine-Tabs-tabLabel': {
+      fontSize: 18,
+      fontWeight: 600,
+    },
     display: 'flex',
     flexDirection: 'row',
     flexWrap: 'nowrap',
     opacity: 0,
     overflow: 'hidden',
     position: 'absolute',
+    top: 0,
     visibility: 'hidden',
     width: '100%',
   },
@@ -77,7 +84,14 @@ const useStyles = createStyles((theme) => ({
     paddingBottom: 16,
   },
   tabs: {
+    '& .mantine-Tabs-tabLabel': {
+      fontSize: 18,
+      fontWeight: 600,
+    },
     flexWrap: 'nowrap',
+    position: 'absolute',
+    top: 0,
+    width: '100%',
   },
 }));
 
@@ -100,7 +114,7 @@ export function ResponsiveTabs(props: IResponsiveTabs): ReactNode {
     tabsListProps,
     ...tabsProps
   } = props;
-  const { ref, width } = useElementSize<HTMLDivElement>();
+  const { height, ref, width } = useElementSize<HTMLDivElement>();
   const generatedId = useId();
   const overflowButtonId = tabsProps.id
     ? `${tabsProps.id}-overflow-button`
@@ -140,6 +154,7 @@ export function ResponsiveTabs(props: IResponsiveTabs): ReactNode {
       classNames={{ tab: classes.tab }}
       onTabChange={handleTabChange}
       radius="sm"
+      style={{ paddingTop: height }}
       {...tabsProps}
     >
       <div ref={ref} aria-hidden className={classes.hidden} hidden>

diff --git a/.../react-front-kit/src/Components/ResponsiveTabs/__snapshots__/ResponsiveTabs.test.tsx.snap b/.../react-front-kit/src/Components/ResponsiveTabs/__snapshots__/ResponsiveTabs.test.tsx.snap
@@ -5,10 +5,11 @@ exports[`ResponsiveTabs matches snapshot 1`] = `
   <div
     class="mantine-Tabs-root mantine-1w1w6vj"
     id="responsive-tabs"
+    style="padding-top: 0px;"
   >
     <div
       aria-hidden="true"
-      class="mantine-18k7ubd"
+      class="mantine-38kat9"
       hidden=""
     >
       <button
@@ -93,7 +94,7 @@ exports[`ResponsiveTabs matches snapshot 1`] = `
     </div>
     <div
       aria-orientation="horizontal"
-      class="mantine-Tabs-tabsList mantine-1c0ih2u"
+      class="mantine-Tabs-tabsList mantine-1h6xllx"
       role="tablist"
     >
       <button

diff --git a/packages/react-front-kit/src/Components/Thumbnail/Thumbnail.tsx b/packages/react-front-kit/src/Components/Thumbnail/Thumbnail.tsx
@@ -147,6 +147,9 @@ export function Thumbnail(props: IThumbnailProps): ReactElement {
                           : action.icon
                       }
                       onClick={() => handleMenuItem(action)}
+                      {...(typeof action.componentProps === 'function'
+                        ? action.componentProps(props)
+                        : action.componentProps)}
                     >
                       {typeof action.label === 'function'
                         ? action.label(props)

diff --git a/packages/react-front-kit/src/server.tsx b/packages/react-front-kit/src/server.tsx
@@ -0,0 +1,4 @@
+/* eslint-disable react-refresh/only-export-components */
+export * from '@smile/react-front-kit-shared/server';
+// other exports
+export * from './helpers';