new PropsTable for server doc [MDS-788] (#2473)

* add props table component * new PropsTable for server doc [MDS-788]
coingaming · Nov 9, 2023 · 54a7d70 · 54a7d70
1 parent b7a8ccb
commit 54a7d70
Show file tree

Hide file tree

Showing 15 changed files with 210 additions and 16 deletions.
diff --git a/docs/app/components/server/accordion/page.tsx b/docs/app/components/server/accordion/page.tsx
@@ -2,7 +2,8 @@ import { ContentOutsideSizes } from '@/app/components/server/accordion/examples/
 import { Default } from '@/app/components/server/accordion/examples/Default';
 import { Disabled } from '@/app/components/server/accordion/examples/Disabled';
 import { Sizes } from '@/app/components/server/accordion/examples/Sizes';
-import ExampleSection from '@/app/components/shared/exampleSection/ExampleSection';
+import ExampleSection from '@/app/components/shared/exampleSection';
+import PropsTable from '@/app/components/shared/propsTable';
 import QuickNav from '@/app/components/shared/QuickNav';
 import { getExamples } from '@/app/utils/getExamples';
 import { MDX } from '@/components/MDX';
@@ -11,7 +12,7 @@ export default async function Accordion() {
   const { server } = await getExamples();
   const examplesList = Object.keys(server.accordion.examples);
   return (
-    <div className="w-full max-w-3xl flex flex-col gap-12 text-moon-14">
+    <div className="w-full max-w-3xl flex flex-col gap-12 text-moon-14 px-6 md:px-0">
       <h1 className="font-medium text-moon-32">Accordion</h1>
       <MDX markdown={server.accordion.description} />
       <QuickNav items={examplesList} />
@@ -35,6 +36,59 @@ export default async function Accordion() {
         component={<ContentOutsideSizes />}
         code={server.accordion.examples.ContentOutsideSizes}
       />
+      <PropsTable
+        title="Accordion props"
+        data={[
+          {
+            name: 'itemSize',
+            type: 'sm | md | lg | xl',
+            defaultState: 'md',
+            description: 'Size of accordeon item',
+          },
+          {
+            name: 'singleOpen',
+            type: 'boolean',
+            defaultState: 'false',
+            description: 'Whether only one item can be opened at a time',
+          },
+          {
+            name: 'defaultValue',
+            type: 'string',
+            defaultState: '-',
+            description: 'The value of the item to expand',
+          },
+          {
+            name: 'value',
+            type: 'string[]',
+            defaultState: '-',
+            description: 'The accordeon items value',
+          },
+          {
+            name: 'onValueChange',
+            type: '(value: string[]) => void',
+            defaultState: '-',
+            description:
+              'Event handler called when the expanded state of an item changes and prop singleOpen in false state',
+          },
+        ]}
+      />
+      <PropsTable
+        title="Accordion.Item props"
+        data={[
+          {
+            name: 'value',
+            type: 'string',
+            defaultState: '-',
+            description: 'The accordeon item value',
+          },
+          {
+            name: 'disabled',
+            type: 'boolean',
+            defaultState: 'false',
+            description: 'Set disabled/non-disabled',
+          },
+        ]}
+      />
     </div>
   );
 }
diff --git a/docs/app/components/server/button/page.tsx b/docs/app/components/server/button/page.tsx
@@ -6,7 +6,8 @@ import { Icons } from '@/app/components/server/button/examples/Icons';
 import { Multiline } from '@/app/components/server/button/examples/Multiline';
 import { Sizes } from '@/app/components/server/button/examples/Sizes';
 import { Variants } from '@/app/components/server/button/examples/Variants';
-import ExampleSection from '@/app/components/shared/exampleSection/ExampleSection';
+import ExampleSection from '@/app/components/shared/exampleSection';
+import PropsTable from '@/app/components/shared/propsTable';
 import QuickNav from '@/app/components/shared/QuickNav';
 import { getExamples } from '@/app/utils/getExamples';
 import { MDX } from '@/components/MDX';
@@ -15,7 +16,7 @@ export default async function Button() {
   const { server } = await getExamples();
   const examplesList = Object.keys(server.button.examples);
   return (
-    <div className="w-full max-w-3xl flex flex-col gap-12 text-moon-14">
+    <div className="w-full max-w-3xl flex flex-col gap-12 text-moon-14 px-6 md:px-0">
       <h1 className="font-medium text-moon-32">Button</h1>
       <MDX markdown={server.button.description} />
       <QuickNav items={examplesList} />
@@ -60,6 +61,71 @@ export default async function Button() {
         component={<Multiline />}
         code={server.button.examples.Multiline}
       />
+      <PropsTable
+        title="Button props"
+        data={[
+          {
+            name: 'animation',
+            type: "'progress' | 'success' | 'error' | 'pulse' | boolean",
+            defaultState: '-',
+            description: 'Animation of button',
+          },
+          {
+            name: 'as',
+            type: 'a | button',
+            defaultState: 'button',
+            description: 'Rendered HTML element',
+          },
+          {
+            name: 'children',
+            type: 'React.ReactNode',
+            defaultState: '-',
+            description: 'Children content',
+          },
+          {
+            name: 'className',
+            type: 'string',
+            defaultState: '-',
+            description: 'Tailwind classes for customization',
+          },
+          {
+            name: 'disabled',
+            type: 'boolean',
+            defaultState: 'false',
+            description: 'Disabled button',
+          },
+          {
+            name: 'fullWidth',
+            type: 'boolean',
+            defaultState: 'false',
+            description: 'Full width button',
+          },
+          {
+            name: 'iconLeft',
+            type: 'JSX.Element',
+            defaultState: '-',
+            description: 'Left icon',
+          },
+          {
+            name: 'iconRight',
+            type: 'JSX.Element',
+            defaultState: '-',
+            description: 'Right icon',
+          },
+          {
+            name: 'size',
+            type: 'xs | sm | md | lg | xl',
+            defaultState: 'md',
+            description: 'Size of button',
+          },
+          {
+            name: 'variant',
+            type: 'fill | outline | ghost',
+            defaultState: 'fill',
+            description: 'Visual/Logical variant of button',
+          },
+        ]}
+      />
     </div>
   );
 }
diff --git a/docs/app/components/server/checkbox/page.tsx b/docs/app/components/server/checkbox/page.tsx
@@ -1,5 +1,5 @@
 import { Default } from '@/app/components/server/checkbox/examples/Default';
-import ExampleSection from '@/app/components/shared/exampleSection/ExampleSection';
+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';

diff --git a/docs/app/components/server/chip/page.tsx b/docs/app/components/server/chip/page.tsx
@@ -1,5 +1,5 @@
 import { Default } from '@/app/components/server/chip/examples/Default';
-import ExampleSection from '@/app/components/shared/exampleSection/ExampleSection';
+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';

diff --git a/docs/app/components/server/input/page.tsx b/docs/app/components/server/input/page.tsx
@@ -1,5 +1,5 @@
 import { Default } from '@/app/components/server/input/examples/Default';
-import ExampleSection from '@/app/components/shared/exampleSection/ExampleSection';
+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';

diff --git a/docs/app/components/server/loader/page.tsx b/docs/app/components/server/loader/page.tsx
@@ -1,5 +1,5 @@
 import { Default } from '@/app/components/server/loader/examples/Default';
-import ExampleSection from '@/app/components/shared/exampleSection/ExampleSection';
+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';

diff --git a/docs/app/components/server/nativeSelect/page.tsx b/docs/app/components/server/nativeSelect/page.tsx
@@ -1,5 +1,5 @@
 import { Default } from '@/app/components/server/nativeSelect/examples/Default';
-import ExampleSection from '@/app/components/shared/exampleSection/ExampleSection';
+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';

diff --git a/docs/app/components/server/pagination/page.tsx b/docs/app/components/server/pagination/page.tsx
@@ -1,5 +1,5 @@
 import { Default } from '@/app/components/server/pagination/examples/Default';
-import ExampleSection from '@/app/components/shared/exampleSection/ExampleSection';
+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';

diff --git a/docs/app/components/server/table/page.tsx b/docs/app/components/server/table/page.tsx
@@ -1,5 +1,5 @@
 import { Default } from '@/app/components/server/table/examples/Default';
-import ExampleSection from '@/app/components/shared/exampleSection/ExampleSection';
+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';

diff --git a/docs/app/components/server/tabs/page.tsx b/docs/app/components/server/tabs/page.tsx
@@ -1,5 +1,5 @@
 import { Default } from '@/app/components/server/tabs/examples/Default';
-import ExampleSection from '@/app/components/shared/exampleSection/ExampleSection';
+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';

diff --git a/docs/app/components/server/tag/page.tsx b/docs/app/components/server/tag/page.tsx
@@ -1,5 +1,5 @@
 import { Default } from '@/app/components/server/tag/examples/Default';
-import ExampleSection from '@/app/components/shared/exampleSection/ExampleSection';
+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';

diff --git a/...s/shared/exampleSection/HeaderSection.tsx → docs/app/components/shared/HeaderSection.tsx b/...s/shared/exampleSection/HeaderSection.tsx → docs/app/components/shared/HeaderSection.tsx
@@ -1,12 +1,17 @@
+import { mergeClassnames } from '@heathmont/moon-base-tw';
 import { GenericLink } from '@heathmont/moon-icons-tw';
 
 type Props = {
   title?: string;
   description?: string | JSX.Element;
+  className?: string;
 };
-const HeaderSection = ({ title, description }: Props) => (
+const HeaderSection = ({ title, description, className }: Props) => (
   <>
-    <h2 id={title} className="text-moon-20 font-medium ">
+    <h2
+      id={title}
+      className={mergeClassnames('text-moon-20 font-medium', className)}
+    >
       <a
         href={`#${title}`}
         className="flex items-center gap-3 [&:hover_svg]:opacity-100 cursor-pointer"

diff --git a/.../shared/exampleSection/ExampleSection.tsx → ...omponents/shared/exampleSection/index.tsx b/.../shared/exampleSection/ExampleSection.tsx → ...omponents/shared/exampleSection/index.tsx
@@ -1,7 +1,7 @@
 import { mergeClassnames } from '@heathmont/moon-base-tw';
 import CodePreview from './codePreview/CodePreview';
 import ComponentPreview from './ComponentPreview';
-import HeaderSection from './HeaderSection';
+import HeaderSection from '../HeaderSection';
 
 type Props = {
   title: string;

diff --git a/docs/app/components/shared/propsTable/PropsTableItem.tsx b/docs/app/components/shared/propsTable/PropsTableItem.tsx
@@ -0,0 +1,40 @@
+import type { Data } from './index';
+
+type PropsTableItemProps = {
+  prop: Data;
+};
+
+const PropsTableItem = ({ prop }: PropsTableItemProps) => {
+  const { name, type, defaultState, description } = prop;
+  return (
+    <div className="flex flex-col gap-4 pb-6 relative after:content-[''] after:absolute after:h-px after:bg-beerus after:inset-x-0 after:bottom-0 ">
+      <div className="flex w-full items-center gap-6 text-moon-16">
+        <span className="w-[8.75rem] min-w-[8.75rem] overflow-hidden whitespace-nowrap text-ellipsis font-semibold">
+          Prop
+        </span>
+        <p>
+          <span className="py-1 px-2 bg-frieza-10 text-frieza rounded-moon-i-xs">
+            {name}
+          </span>
+        </p>
+      </div>
+      <div className="flex w-full items-center gap-6 text-moon-16 ">
+        <span className="w-[8.75rem] min-w-[8.75rem] font-semibold overflow-hidden whitespace-nowrap text-ellipsis">
+          Default
+        </span>
+        <p>{defaultState || '-'}</p>
+      </div>
+      <div className="flex flex-col md:flex-row w-full md:items-center gap-6 text-moon-16 ">
+        <span className="md:w-[8.75rem] md:min-w-[8.75rem] font-semibold overflow-hidden whitespace-nowrap text-ellipsis">
+          Description
+        </span>
+        <p>{description}</p>
+      </div>
+      <div className="md:pl-[8.75rem]">
+        <p className="text-moon-16 text-frieza md:pl-6">{type}</p>
+      </div>
+    </div>
+  );
+};
+
+export default PropsTableItem;
diff --git a/docs/app/components/shared/propsTable/index.tsx b/docs/app/components/shared/propsTable/index.tsx
@@ -0,0 +1,29 @@
+import PropsTableItem from './PropsTableItem';
+import HeaderSection from '../HeaderSection';
+
+export type Data = {
+  name: string;
+  type: string;
+  defaultState: string | React.ReactNode;
+  description: string;
+};
+
+type TableProps = {
+  data: Data[];
+  title?: string;
+  description?: string | JSX.Element;
+};
+
+const PropsTable = ({ data, title, description }: TableProps) => {
+  return (
+    <section className="flex flex-col gap-6">
+      <HeaderSection title={title} description={description} className="pb-6" />
+      <hr className="h-px bg-beerus w-full" />
+      {data.map((prop: Data) => (
+        <PropsTableItem prop={prop} key={prop.name} />
+      ))}
+    </section>
+  );
+};
+
+export default PropsTable;