docs: tagsInput Component [MDS-893] (#37)

* first draft from CLI * Prettified Code! * MDS-893: rewrote examples * Prettified Code! * Update description.md * Anatomy component * MDS-893 props and examples * added colors to words.txt * MDS-893 final draft * Prettified Code! * ops, forgot to re-enable the page close * spelling correction MDS-893 * MDS-893 spelling issue * fix: added keys --------- Co-authored-by: salvatorecriscioneweb <[email protected]>
coingaming · Dec 28, 2023 · c89637f · c89637f
1 parent fad2904
commit c89637f
Show file tree

Hide file tree

Showing 31 changed files with 630 additions and 8 deletions.
diff --git a/docs/app/client/tagsInput/anatomy.md b/docs/app/client/tagsInput/anatomy.md
@@ -0,0 +1,12 @@
+---
+title: Anatomy
+description: The component `<TagsInput />` can have as direct child the component `<TagsInput.SelectedItem />` to show the actual
+---
+
+```
+<TagsInput ...>
+    <TagsInput.SelectedItem ... />
+    <TagsInput.SelectedItem ... />
+    ...
+</TagsInput>
+```
diff --git a/docs/app/client/tagsInput/description.md b/docs/app/client/tagsInput/description.md
@@ -0,0 +1,5 @@
+TagsInput is an extension of the text input fields. This component allows users to both enter text and capture input results and display them as well.
+<br />
+These selected text entries are being displayed as tags. Tags represent a set of interactive keywords that help organize and categorize objects.
+<br />
+Tags can be added by pressing the <kbd class="inline-block whitespace-nowrap rounded px-1.5 font-medium tracking-wide text-moon-14 border border-beerus text-trunks ms-auto">Enter ⏎</kbd> key or removed by the mouse click from the input element.
diff --git a/docs/app/client/tagsInput/descriptions/Default.md b/docs/app/client/tagsInput/descriptions/Default.md
@@ -0,0 +1,3 @@
+---
+title: Default
+---
diff --git a/docs/app/client/tagsInput/descriptions/DifferentSizes.md b/docs/app/client/tagsInput/descriptions/DifferentSizes.md
@@ -0,0 +1,5 @@
+---
+title: Different sizes
+---
+
+`TagsInput` component can vary its sizes according to the `size` prop, there's 3 possible sizes: small (`sm`), medium (`md`) and large(`lg`).
diff --git a/docs/app/client/tagsInput/descriptions/States.md b/docs/app/client/tagsInput/descriptions/States.md
@@ -0,0 +1,5 @@
+---
+title: Different states
+---
+
+`<TagsInput />` Component can be in different state to visually provide the user some important notification. In this example using Hint component is possible to show some informative information.
diff --git a/docs/app/client/tagsInput/descriptions/UppercaseLowercase.md b/docs/app/client/tagsInput/descriptions/UppercaseLowercase.md
@@ -0,0 +1,5 @@
+---
+title: Different Items casing
+---
+
+Using the prop `isUppercase` of the `<TagsInput.SelectedItem />` is possible change how the tag will show the text.
diff --git a/docs/app/client/tagsInput/examples/Default.tsx b/docs/app/client/tagsInput/examples/Default.tsx
@@ -0,0 +1,32 @@
+"use client";
+
+import { TagsInput } from "@heathmont/moon-core-tw";
+import { useCallback, useState } from "react";
+
+const Default = () => {
+  const [selected, setSelected] = useState<string[]>([]);
+
+  const onEnter = useCallback(
+    (value: string) => {
+      setSelected([...selected, value]);
+    },
+    [selected, setSelected],
+  );
+
+  const onClear = useCallback(
+    (index: number) => {
+      setSelected(selected.filter((item: string, id: number) => id !== index));
+    },
+    [selected, setSelected],
+  );
+
+  return (
+    <TagsInput selected={selected} onEnter={onEnter} onClear={onClear}>
+      {selected.map((text, index) => (
+        <TagsInput.SelectedItem key={index} index={index} label={text} />
+      ))}
+    </TagsInput>
+  );
+};
+
+export default Default;
diff --git a/docs/app/client/tagsInput/examples/DifferentSizes.tsx b/docs/app/client/tagsInput/examples/DifferentSizes.tsx
@@ -0,0 +1,47 @@
+"use client";
+
+import { TagsInput } from "@heathmont/moon-core-tw";
+import type Size from "@heathmont/moon-core-tw/lib/tagsInput/private/types/Size";
+import { useCallback, useState } from "react";
+
+const TagsInputWithLogic = ({ size }: { size?: Size }) => {
+  const [selected, setSelected] = useState<string[]>([]);
+  const onEnter = useCallback(
+    (value: string) => {
+      setSelected([...selected, value]);
+    },
+    [selected, setSelected],
+  );
+  const onClear = useCallback(
+    (index: number) => {
+      setSelected(selected.filter((item: string, id: number) => id !== index));
+    },
+    [selected, setSelected],
+  );
+
+  return (
+    <TagsInput
+      selected={selected}
+      onEnter={onEnter}
+      onClear={onClear}
+      size={size as Size}
+    >
+      {selected.map((text, index) => (
+        <TagsInput.SelectedItem key={index} index={index} label={text} />
+      ))}
+    </TagsInput>
+  );
+};
+
+const DifferentSizes = () => (
+  <>
+    <p>Small</p>
+    <TagsInputWithLogic size="sm" />
+    <p>Medium (default)</p>
+    <TagsInputWithLogic />
+    <p>Large</p>
+    <TagsInputWithLogic size="lg" />
+  </>
+);
+
+export default DifferentSizes;
diff --git a/docs/app/client/tagsInput/examples/States.tsx b/docs/app/client/tagsInput/examples/States.tsx
@@ -0,0 +1,63 @@
+"use client";
+
+import { Hint, TagsInput } from "@heathmont/moon-core-tw";
+import { GenericInfo } from "@heathmont/moon-icons-tw";
+import { useCallback, useState } from "react";
+
+const Example = () => {
+  const [selected, setSelected] = useState<string[]>(["Preset data"]);
+
+  const onEnter = useCallback(
+    (value: string) => {
+      setSelected([...selected, value]);
+    },
+    [selected, setSelected],
+  );
+
+  const onClear = useCallback(
+    (index: number) => {
+      setSelected(selected.filter((item: string, id: number) => id !== index));
+    },
+    [selected, setSelected],
+  );
+
+  return (
+    <div className="flex flex-col items-center w-full h-50">
+      <div className="flex flex-col items-center lg:flex-row lg:justify-center lg:items-start w-full gap-2">
+        <div className="flex flex-col w-full">
+          <TagsInput
+            selected={selected}
+            label="Disabled"
+            disabled
+            onEnter={onEnter}
+            onClear={onClear}
+          >
+            {selected.map((text, index) => (
+              <TagsInput.SelectedItem key={index} index={index} label={text} />
+            ))}
+          </TagsInput>
+          <Hint disabled>Informative message holder</Hint>
+        </div>
+        <div className="flex flex-col w-full">
+          <TagsInput
+            selected={selected}
+            label={<span className="text-chichi">Error</span>}
+            isError
+            onEnter={onEnter}
+            onClear={onClear}
+          >
+            {selected.map((text, index) => (
+              <TagsInput.SelectedItem key={index} index={index} label={text} />
+            ))}
+          </TagsInput>
+          <Hint error>
+            <GenericInfo />
+            Informative message holder
+          </Hint>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Example;
diff --git a/docs/app/client/tagsInput/examples/UppercaseLowercase.tsx b/docs/app/client/tagsInput/examples/UppercaseLowercase.tsx
@@ -0,0 +1,60 @@
+"use client";
+
+import { TagsInput } from "@heathmont/moon-core-tw";
+import { useCallback, useState } from "react";
+
+const Example = () => {
+  const [selected, setSelected] = useState<string[]>(["Preset data"]);
+
+  const onEnter = useCallback(
+    (value: string) => {
+      setSelected([...selected, value]);
+    },
+    [selected, setSelected],
+  );
+
+  const onClear = useCallback(
+    (index: number) => {
+      setSelected(selected.filter((item, id) => id !== index));
+    },
+    [selected, setSelected],
+  );
+
+  return (
+    <div className="flex flex-col items-center w-full h-50">
+      <div className="flex flex-col items-center lg:flex-row lg:justify-center lg:items-start w-full gap-2">
+        <div className="flex flex-col w-full">
+          <TagsInput
+            selected={selected}
+            label="Lower"
+            onEnter={onEnter}
+            onClear={onClear}
+          >
+            {selected.map((text, index) => (
+              <TagsInput.SelectedItem
+                isUppercase={false}
+                index={index}
+                label={text}
+                key={index}
+              />
+            ))}
+          </TagsInput>
+        </div>
+        <div className="flex flex-col w-full">
+          <TagsInput
+            selected={selected}
+            label="Uppercase (default)"
+            onEnter={onEnter}
+            onClear={onClear}
+          >
+            {selected.map((text, index) => (
+              <TagsInput.SelectedItem key={index} index={index} label={text} />
+            ))}
+          </TagsInput>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Example;
diff --git a/docs/app/client/tagsInput/page.tsx b/docs/app/client/tagsInput/page.tsx
@@ -0,0 +1,101 @@
+import React from "react";
+import { getExamples } from "@/utils/getExamples";
+import { ExampleSectionData } from "@/components/exampleSection/ExampleSection";
+import { MainLayout } from "@/components/MainLayout";
+
+import dynamic from "next/dynamic";
+
+import { Loader } from "@heathmont/moon-base-tw";
+import { PageHeadComponent } from "@/components/PageHeadComponent";
+import { tagsInputProps, tagsInputSelectedPropsItems } from "./props";
+import image from "./tagsinput.webp";
+import { PropsTable } from "@/components/propsTable";
+import { Anatomy } from "@/components/Anatomy";
+
+const TITLE = "TagsInput";
+const ordered: string[] = [
+  "Default",
+  "DifferentSizes",
+  "States",
+  "UppercaseLowercase",
+];
+
+export default async function AuthCodePage(request: {
+  searchParams: { raw: string };
+}) {
+  const {
+    client: {
+      tagsInput: {
+        description,
+        descriptions: exampleDescriptions,
+        examples,
+        anatomy,
+      },
+    },
+  } = await getExamples();
+
+  const searchParam = request?.searchParams?.raw;
+  const isMockup = !!searchParam && Object.keys(examples).includes(searchParam);
+
+  if (isMockup) {
+    const Component = dynamic(
+      () => import(`@/app/client/tagsInput/examples/${searchParam}`),
+      {
+        loading: () => <Loader />,
+        ssr: false,
+      },
+    );
+    return (
+      <div className="p-4" id="playwright-test">
+        <Component />
+      </div>
+    );
+  }
+
+  return (
+    <MainLayout
+      isMockup={isMockup}
+      componentName="tagsInput"
+      contentSidebar={ordered}
+    >
+      <div className="flex flex-col gap-4 text-moon-14 pb-20">
+        <PageHeadComponent
+          title={TITLE}
+          description={description}
+          tags={["IN PROGRESS", "ARIA", "RTL"]}
+          image={image}
+        />
+        <ExampleSectionData
+          componentName="tagsInput"
+          client={{
+            description,
+            descriptions: exampleDescriptions,
+            examples,
+          }}
+          data={ordered}
+        />
+        <Anatomy anatomy={anatomy} />
+        <PropsTable
+          title="TagsInput props"
+          description={
+            <p>
+              These are props specific to the{" "}
+              <span className="text-frieza">TagsInput</span> component:
+            </p>
+          }
+          data={tagsInputProps}
+        />
+        <PropsTable
+          title="TagsInput props"
+          description={
+            <p>
+              These are props specific to the{" "}
+              <span className="text-frieza">TagsInput</span> component:
+            </p>
+          }
+          data={tagsInputSelectedPropsItems}
+        />
+      </div>
+    </MainLayout>
+  );
+}