Extend AddSocialPlatform with more extensive props

Author: agjs

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@programmer_network/yail",
-  "version": "1.0.188",
+  "version": "1.0.189",
   "description": "Programmer Network's official UI library for React",
   "author": "Aleksandar Grbic - (https://programmer.network)",
   "publishConfig": {

src/Components/AddSocialPlatform/AddSocialPlatform.stories.tsx

@@ -8,71 +8,76 @@ export default {
   component: AddSocialPlatform
 };
 
-export const Default = () => {
-  const SOCIAL_PLATFORMS = [
-    {
-      name: "Github",
-      url: "github.com/"
-    },
-    {
-      name: "Gitlab",
-      url: "gitlab.com/"
-    },
-    {
-      name: "Stackoverflow",
-      url: "stackoverflow.com/users/"
-    },
-    {
-      name: "Linkedin",
-      url: "linkedin.com/in/"
-    },
-    {
-      name: "YouTube",
-      url: "youtube.com/"
-    },
-    {
-      name: "Twitter",
-      url: "twitter.com/"
-    },
-    {
-      name: "Mastodon",
-      url: "mastodon.social/"
-    },
-    {
-      name: "Codewars",
-      url: "codewars.com/users/"
-    },
-    {
-      name: "Patreon",
-      url: "patreon.com/user?u="
-    },
-    {
-      name: "Hackernews",
-      url: "news.ycombinator.com/user?id="
-    },
-    {
-      name: "Reddit",
-      url: "reddit.com/user/"
-    },
-    {
-      name: "Hackerrank",
-      url: "hackerrank.com/"
-    },
-    {
-      name: "Leetcode",
-      url: "leetcode.com/"
-    },
-    {
-      name: "Exercism",
-      url: "exercism.org/profiles/"
-    }
-  ];
+const SOCIAL_PLATFORMS = [
+  {
+    name: "Github",
+    url: "github.com/"
+  },
+  {
+    name: "Gitlab",
+    url: "gitlab.com/"
+  },
+  {
+    name: "Stackoverflow",
+    url: "stackoverflow.com/users/"
+  },
+  {
+    name: "Linkedin",
+    url: "linkedin.com/in/"
+  },
+  {
+    name: "YouTube",
+    url: "youtube.com/"
+  },
+  {
+    name: "Twitter",
+    url: "twitter.com/"
+  },
+  {
+    name: "Mastodon",
+    url: "mastodon.social/"
+  },
+  {
+    name: "Codewars",
+    url: "codewars.com/users/"
+  },
+  {
+    name: "Patreon",
+    url: "patreon.com/user?u="
+  },
+  {
+    name: "Hackernews",
+    url: "news.ycombinator.com/user?id="
+  },
+  {
+    name: "Reddit",
+    url: "reddit.com/user/"
+  },
+  {
+    name: "Hackerrank",
+    url: "hackerrank.com/"
+  },
+  {
+    name: "Leetcode",
+    url: "leetcode.com/"
+  },
+  {
+    name: "Exercism",
+    url: "exercism.org/profiles/"
+  }
+];
 
+export const Default = () => {
   return (
     <div>
       <AddSocialPlatform
         platforms={SOCIAL_PLATFORMS}
         onAdd={data => console.log(data)}
+        valueProps={{
+          name: "cool",
+          label: "Story",
+          hint: "Username, a slug or a handle. Different platforms call it differently. Do not include the base URL."
+        }}
       />
     </div>
   );

src/Components/AddSocialPlatform/index.tsx

@@ -3,13 +3,17 @@ import { FC } from "react";
 
 import Button from "Components/Button";
 import { Input, Select } from "Components/Inputs";
-import { Paragraph } from "Components/Typography";
 
 import { IAddSocialPlatformProps } from "./types";
 
 const AddSocialPlatform: FC<IAddSocialPlatformProps> = ({
   onAdd,
-  platforms
+  platforms,
+  valueProps = {
+    name: "",
+    label: "",
+    hint: ""
+  }
 }) => {
   const form = useAJVForm(
     {
@@ -50,20 +54,7 @@ const AddSocialPlatform: FC<IAddSocialPlatformProps> = ({
       />
       <div className='yl-col-span-5'>
         <Input
-          name='url'
-          label='Username'
-          hint={
-            <div>
-              <Paragraph>
-                Username, a slug or a handle. Different platforms call it
-                differently.
-              </Paragraph>
-              <Paragraph className='yl-text-red-500'>
-                <span className='yl-font-bold'>Do not</span> include the base
-                URL.
-              </Paragraph>
-            </div>
-          }
+          {...valueProps}
           value={form.state.url.value}
           error={form.state.url.error}
           onChange={form.set}

src/Components/AddSocialPlatform/types.ts

@@ -1,4 +1,9 @@
 export interface IAddSocialPlatformProps {
   platforms: { name: string; url: string }[];
   onAdd: (data: Record<string, string>) => void;
+  valueProps?: {
+    name: string;
+    label: string;
+    hint?: string;
+  };
 }