feat: MDS-904 Props proposal (#17)

* MDS-904 Props proposal * ops typo * Prettified Code! * Sorting and cleanup * Update words.txt * MDS-904 fix typo * Fix comments * added to index types the new utils * fix cspelling --------- Co-authored-by: salvatorecriscioneweb <[email protected]> Co-authored-by: Karl Kallavus <[email protected]>
coingaming · Dec 18, 2023 · 1907bb5 · 1907bb5
1 parent e692126
commit 1907bb5
Show file tree

Hide file tree

Showing 11 changed files with 274 additions and 139 deletions.
diff --git a/cspell.json b/cspell.json
@@ -15,6 +15,7 @@
     ".git",
     "pnpm-lock.yaml",
     "node_modules",
-    "pnpm-workspace.yaml"
+    "pnpm-workspace.yaml",
+    "docs/package.json"
   ]
-}
+}
diff --git a/docs/app/client/authcode/page.tsx b/docs/app/client/authcode/page.tsx
@@ -1,18 +1,15 @@
 import React from "react";
-import Image from "next/image";
+import dynamic from "next/dynamic";
+import { Loader } from "@heathmont/moon-base-tw";
 import { getExamples } from "@/utils/getExamples";
-import { MDX } from "@/components/MDX";
 import { ExampleSectionData } from "@/components/exampleSection/ExampleSection";
 import { MainLayout } from "@/components/MainLayout";
+import { PageHeadComponent } from "@/components/PageHeadComponent";
+import { PropsTable } from "@/components/propsTable";
 
-import dynamic from "next/dynamic";
-import TitleTags from "@/components/TitleTags";
-
+import props from "./props";
 import image from "./authcode.webp";
-import { Loader } from "@heathmont/moon-base-tw";
-import { PageHeadComponent } from "@/components/PageHeadComponent";
 
-const TITLE = "AuthCode";
 const ordered = [
   "Default",
   "WithManualSubmit",
@@ -57,7 +54,7 @@ export default async function AuthCodePage(request: {
     <MainLayout isMockup={isMockup}>
       <div className="flex flex-col gap-4 text-moon-14 pb-20">
         <PageHeadComponent
-          title={TITLE}
+          title={"AuthCode"}
           description={description}
           tags={["ARIA", "RTL"]}
           image={image}
@@ -72,7 +69,16 @@ export default async function AuthCodePage(request: {
           }}
           data={ordered}
         />
-        {/* TODO: Props table/s */}
+        <PropsTable
+          title="AuthCode props"
+          description={
+            <p>
+              These are props specific to the{" "}
+              <span className="text-frieza">AuthCode</span> component:
+            </p>
+          }
+          data={props}
+        />
       </div>
     </MainLayout>
   );

diff --git a/docs/app/client/authcode/props.ts b/docs/app/client/authcode/props.ts
@@ -0,0 +1,67 @@
+import { PropsTableProp } from "@/types";
+
+const Props: PropsTableProp[] = [
+  {
+    name: "onChange",
+    type: ["(value: string) => {}"],
+    description: "Callback function triggered upon a value change.",
+    required: true,
+  },
+  {
+    name: "length",
+    type: ["number"],
+    description: "Number of digits for entering single values.",
+    defaultState: 6,
+  },
+  {
+    name: "allowedCharacters",
+    type: ["alphanumeric", "numeric", "alpha"],
+    defaultState: "alphanumeric",
+    description: "Specifies the type of input characters allowed.",
+  },
+  {
+    name: "autoFocus",
+    type: ["boolean"],
+    defaultState: "false",
+    description:
+      "When set to true, inputs automatically receive the keyboard focus.",
+  },
+  {
+    name: "isPassword",
+    type: ["boolean"],
+    defaultState: "false",
+    description:
+      "When set to true, inputs will show entered values as obfuscated symbols.",
+  },
+  {
+    name: "disabled",
+    type: ["boolean"],
+    defaultState: "false",
+    description: "When set to true, the AuthCode component is disabled.",
+  },
+  {
+    name: "placeholder",
+    type: ["string"],
+    description: "Default placeholder for input elements.",
+  },
+  {
+    name: "isValid",
+    type: ["boolean"],
+    defaultState: "true",
+    description: "When set to false, the AuthCode will show a error state.",
+  },
+  {
+    name: "className",
+    type: ["string"],
+    description:
+      "Specifies the extra styles for the container that wraps the set of input elements.",
+  },
+  {
+    name: "ariaLabel",
+    type: ["string"],
+    defaultState: '"Character `${i + 1}`"',
+    description: "Specifies the common of the aria phrase for input elements.",
+  },
+];
+
+export default Props;
diff --git a/docs/components/propsTable/PropsTableItem.tsx b/docs/components/propsTable/PropsTableItem.tsx
@@ -1,21 +1,41 @@
-import type { Data } from "./index";
+import { PropsTableProp, PropsTablePropTypes } from "@/types";
+import { Tag } from "@heathmont/moon-base-tw";
 
 type PropsTableItemProps = {
-  prop: Data;
+  prop: PropsTableProp;
 };
 
 const PropsTableItem = ({ prop }: PropsTableItemProps) => {
-  const { name, type, defaultState, description } = prop;
+  const { name, type, defaultState, required, description } = prop;
+
+  const renderType = (item: PropsTablePropTypes) => {
+    // Check using Regex if the prop is a arrow function
+    const isArrowFunction = /\(([^)]+)\) => \w/.test(item);
+
+    if (isArrowFunction) {
+      return item;
+    } else if (["number", "boolean", "string"].includes(item)) {
+      return item;
+    } else {
+      return `"${item}"`;
+    }
+  };
+
   return (
     <div className="flex flex-col gap-4 pb-6 relative 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-36 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">
+          <Tag
+            className="text-moon-16"
+            isUppercase={false}
+            color="text-frieza"
+            bgColor="bg-frieza-10"
+          >
             {name}
-          </span>
+          </Tag>
         </p>
       </div>
       <div className="flex w-full items-center gap-6 text-moon-16 ">
@@ -24,14 +44,22 @@ const PropsTableItem = ({ prop }: PropsTableItemProps) => {
         </span>
         <p>{defaultState || "-"}</p>
       </div>
+      <div className="flex w-full items-center gap-6 text-moon-16 ">
+        <span className="w-36 font-semibold overflow-hidden whitespace-nowrap text-ellipsis">
+          Required
+        </span>
+        <p>{required ? "Yes" : "No"}</p>
+      </div>
       <div className="flex flex-col md:flex-row w-full md:items-center gap-6 text-moon-16 ">
         <span className="w-36 font-semibold overflow-hidden whitespace-nowrap text-ellipsis">
           Description
         </span>
         <p>{description}</p>
       </div>
       <div className="md:ps-36">
-        <p className="text-moon-16 text-frieza md:ps-6">{type}</p>
+        <p className="text-moon-16 text-frieza md:ps-6">
+          {type?.map(renderType).join(" | ")}
+        </p>
       </div>
     </div>
   );

diff --git a/docs/components/propsTable/index.tsx b/docs/components/propsTable/index.tsx
@@ -1,15 +1,9 @@
 import PropsTableItem from "./PropsTableItem";
 import HeaderSection from "../HeaderSection";
-
-export type Data = {
-  name: string;
-  type: string;
-  defaultState: string | React.ReactNode;
-  description: string;
-};
+import { type PropsTableProp } from "@/types";
 
 type TableProps = {
-  data: Data[];
+  data: PropsTableProp[];
   title?: string;
   description?: string | JSX.Element;
 };
@@ -19,9 +13,11 @@ export const PropsTable = ({ data, title, description }: TableProps) => {
     <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} />
-      ))}
+      {data
+        .sort((x: PropsTableProp) => (x.required ? -1 : 1))
+        .map((prop: PropsTableProp) => (
+          <PropsTableItem prop={prop} key={prop.name} />
+        ))}
     </section>
   );
 };
diff --git a/docs/package.json b/docs/package.json
@@ -37,4 +37,4 @@
     "tailwindcss": "^3.3.0",
     "typescript": "^5"
   }
-}
+}