fix: add Table to Docs, align colours [MDS-725] (#2459)

* fix: add Pagination to Docs, align colours [MDS-724] * fix: add Pagination to Docs, align colours [MDS-724] * fix: add Table to Docs, align colours [MDS-725]
coingaming · Nov 1, 2023 · 793fb63 · 793fb63
1 parent 4cdc28c
commit 793fb63
Show file tree

Hide file tree

Showing 10 changed files with 102 additions and 57 deletions.
diff --git a/docs/app/components/server/table/description.md b/docs/app/components/server/table/description.md
@@ -0,0 +1 @@
+A component for displaying large amounts of data in rows and columns.
diff --git a/docs/app/components/server/table/examples/Default.tsx b/docs/app/components/server/table/examples/Default.tsx
@@ -0,0 +1,25 @@
+import Table from '@heathmont/moon-base-tw/lib/table/Table';
+
+export const Default = () => (
+  <Table>
+    <Table.Head>
+      <Table.Row>
+        <Table.Header>Header 1</Table.Header>
+        <Table.Header>Header 2</Table.Header>
+        <Table.Header>Header 3</Table.Header>
+      </Table.Row>
+    </Table.Head>
+    <Table.Body>
+      <Table.Row>
+        <Table.Cell>Cell 1</Table.Cell>
+        <Table.Cell>Cell 2</Table.Cell>
+        <Table.Cell>Cell 3</Table.Cell>
+      </Table.Row>
+      <Table.Row>
+        <Table.Cell>Cell 1</Table.Cell>
+        <Table.Cell>Cell 2</Table.Cell>
+        <Table.Cell>Cell 3</Table.Cell>
+      </Table.Row>
+    </Table.Body>
+  </Table>
+);
diff --git a/docs/app/components/server/table/page.tsx b/docs/app/components/server/table/page.tsx
@@ -0,0 +1,22 @@
+import { Default } from '@/app/components/server/table/examples/Default';
+import ExampleSection from '@/app/components/shared/ExampleSection';
+import QuickNav from '@/app/components/shared/QuickNav';
+import { getExamples } from '@/app/utils/getExamples';
+import { MDX } from '@/components/MDX';
+
+export default async function Table() {
+  const { server } = await getExamples();
+  const examplesList = Object.keys(server.table.examples);
+  return (
+    <div className="w-full max-w-7xl flex flex-col gap-4 text-moon-14">
+      <h1 className="font-medium text-moon-32">Table</h1>
+      <MDX markdown={server.table.description} />
+      <QuickNav items={examplesList} />
+      <ExampleSection
+        title="Default"
+        component={<Default />}
+        code={server.table.examples.Default}
+      />
+    </div>
+  );
+}
diff --git a/docs/app/components/shared/CodePreview.tsx b/docs/app/components/shared/CodePreview.tsx
@@ -1,5 +1,5 @@
 const CodePreview = ({ code }: { code: string }) => (
-  <pre className="theme-moon-dark bg-gohan text-bulma rounded-moon-s-sm p-4">
+  <pre className="theme-moon-dark overflow-x-auto bg-gohan text-bulma rounded-moon-s-sm p-4">
     {code}
   </pre>
 );

diff --git a/docs/app/components/types.ts b/docs/app/components/types.ts
@@ -72,6 +72,12 @@ export interface Examples {
         Default: 'string';
       };
     };
+    table: {
+      description: 'string';
+      examples: {
+        Default: 'string';
+      };
+    };
     tag: {
       description: 'string';
       examples: {

diff --git a/workspaces/base/src/table/Table.tsx b/workspaces/base/src/table/Table.tsx
@@ -1,31 +1,9 @@
 import React from 'react';
+import type Props from './private/types/Props';
+import type TableProps from './private/types/TableProps';
+import getSize from './private/utils/getSize';
 import mergeClassnames from '../mergeClassnames/mergeClassnames';
 
-type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
-type TableProps = {
-  className?: string;
-  children?: React.ReactNode;
-  size?: Size;
-};
-
-const getSize = (size?: Size) => {
-  switch (size) {
-    case 'xs':
-      return '[&_td]:px-2 [&_td]:py-1 [&_td]:text-moon-12 [&_th]:px-2 [&_th]:py-1 [&_th]:text-moon-12';
-    case 'sm':
-      return '[&_td]:px-3 [&_td]:py-1 [&_td]:text-moon-14 [&_th]:px-3 [&_th]:py-1 [&_th]:text-moon-14';
-    case 'lg':
-      return '[&_td]:px-3 [&_td]:py-3 [&_td]:text-moon-14 [&_th]:px-3 [&_th]:py-3 [&_th]:text-moon-14';
-    case 'xl':
-      return '[&_td]:px-3 [&_td]:py-4 [&_td]:text-moon-14 [&_th]:px-3 [&_th]:py-4 [&_th]:text-moon-14';
-    case '2xl':
-      return '[&_td]:px-3 [&_td]:py-5 [&_td]:text-moon-14 [&_th]:px-3 [&_th]:py-5 [&_th]:text-moon-14';
-    case 'md':
-    default:
-      return '[&_td]:px-3 [&_td]:py-2 [&_td]:text-moon-14 [&_th]:px-3 [&_th]:py-2 [&_th]:text-moon-14';
-  }
-};
-
 const TableRoot = ({ children, className, size, ...props }: TableProps) => (
   <table
     className={mergeClassnames(
@@ -39,45 +17,25 @@ const TableRoot = ({ children, className, size, ...props }: TableProps) => (
   </table>
 );
 
-type BodyProps = {
-  className?: string;
-  children?: React.ReactNode;
-};
-
-const Body = ({ children, className, ...props }: BodyProps) => (
+const Body = ({ children, className, ...props }: Props) => (
   <tbody className={mergeClassnames(className)} {...props}>
     {children}
   </tbody>
 );
 
-type HeadProps = {
-  className?: string;
-  children?: React.ReactNode;
-};
-
-const Head = ({ children, className, ...props }: HeadProps) => (
+const Head = ({ children, className, ...props }: Props) => (
   <thead className={mergeClassnames(className)} {...props}>
     {children}
   </thead>
 );
 
-type RowProps = {
-  className?: string;
-  children?: React.ReactNode;
-};
-
-const Row = ({ children, className, ...props }: RowProps) => (
+const Row = ({ children, className, ...props }: Props) => (
   <tr className={mergeClassnames(className)} {...props}>
     {children}
   </tr>
 );
 
-type HeaderProps = {
-  className?: string;
-  children?: React.ReactNode;
-};
-
-const Header = ({ children, className, ...props }: HeaderProps) => (
+const Header = ({ children, className, ...props }: Props) => (
   <th
     className={mergeClassnames(
       className,
@@ -89,16 +47,11 @@ const Header = ({ children, className, ...props }: HeaderProps) => (
   </th>
 );
 
-type CellProps = {
-  className?: string;
-  children?: React.ReactNode;
-};
-
-const Cell = ({ children, className, ...props }: CellProps) => (
+const Cell = ({ children, className, ...props }: Props) => (
   <td
     className={mergeClassnames(
       className,
-      'text-start text-bulma bg-gohan first:rounded-s-moon-s-sm last:rounded-e-moon-s-sm'
+      'text-start text-bulma bg-goku first:rounded-s-moon-s-sm last:rounded-e-moon-s-sm'
     )}
     {...props}
   >

diff --git a/workspaces/base/src/table/private/types/Props.ts b/workspaces/base/src/table/private/types/Props.ts
@@ -0,0 +1,6 @@
+type Props = {
+  className?: string;
+  children?: React.ReactNode;
+};
+
+export default Props;
diff --git a/workspaces/base/src/table/private/types/Size.ts b/workspaces/base/src/table/private/types/Size.ts
@@ -0,0 +1,3 @@
+type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+
+export default Size;
diff --git a/workspaces/base/src/table/private/types/TableProps.ts b/workspaces/base/src/table/private/types/TableProps.ts
@@ -0,0 +1,8 @@
+import type Props from './Props';
+import type Size from './Size';
+
+type TableProps = Props & {
+  size?: Size;
+};
+
+export default TableProps;
diff --git a/workspaces/base/src/table/private/utils/getSize.ts b/workspaces/base/src/table/private/utils/getSize.ts
@@ -0,0 +1,21 @@
+import type Size from '../types/Size';
+
+const getSize = (size?: Size) => {
+  switch (size) {
+    case 'xs':
+      return '[&_td]:px-2 [&_td]:py-1 [&_td]:text-moon-12 [&_th]:px-2 [&_th]:py-1 [&_th]:text-moon-12';
+    case 'sm':
+      return '[&_td]:px-3 [&_td]:py-1 [&_td]:text-moon-14 [&_th]:px-3 [&_th]:py-1 [&_th]:text-moon-14';
+    case 'lg':
+      return '[&_td]:px-3 [&_td]:py-3 [&_td]:text-moon-14 [&_th]:px-3 [&_th]:py-3 [&_th]:text-moon-14';
+    case 'xl':
+      return '[&_td]:px-3 [&_td]:py-4 [&_td]:text-moon-14 [&_th]:px-3 [&_th]:py-4 [&_th]:text-moon-14';
+    case '2xl':
+      return '[&_td]:px-3 [&_td]:py-5 [&_td]:text-moon-14 [&_th]:px-3 [&_th]:py-5 [&_th]:text-moon-14';
+    case 'md':
+    default:
+      return '[&_td]:px-3 [&_td]:py-2 [&_td]:text-moon-14 [&_th]:px-3 [&_th]:py-2 [&_th]:text-moon-14';
+  }
+};
+
+export default getSize;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		A component for displaying large amounts of data in rows and columns.
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		type Size = 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl';

		export default Size;