cleanup

coingaming · Oct 9, 2023 · be797d0 · be797d0
1 parent a85d355
commit be797d0
Show file tree

Hide file tree

Showing 11 changed files with 32 additions and 86 deletions.
diff --git a/next-docs/pages/components/tagsInput.tsx b/next-docs/pages/components/tagsInput.tsx
@@ -4,9 +4,9 @@ import type { ComponentNames } from '../../components/getComponent';
 import Layout from '../../components/Layout';
 import PropsTable from '../../components/PropsTable';
 import Default from '../../public/examples/tagsInput/Default';
+import LowerCase from '../../public/examples/tagsInput/LowerCase';
 import Sizes from '../../public/examples/tagsInput/Sizes';
 import States from '../../public/examples/tagsInput/States';
-import TagsCases from '../../public/examples/tagsInput/TagsCases';
 import useComponent from '../../utils/useComponent';
 
 const COMPONENT_NAME: ComponentNames = 'TagsInput';
@@ -51,9 +51,9 @@ const PageTagsInput = () => {
       />
 
       <Preview
-        title="Tags cases"
-        preview={<TagsCases />}
-        code={examples ? examples.TagsCases : 'Loading'}
+        title="Uppercase & lowercase"
+        preview={<LowerCase />}
+        code={examples ? examples.LowerCase : 'Loading'}
       />
 
       <PropsTable
@@ -115,13 +115,6 @@ const PageTagsInput = () => {
             default: '-',
             description: 'Tailwind classes for customization',
           },
-          {
-            name: 'tagsCase',
-            type: 'normal | lower | capitalize',
-            required: false,
-            default: '-',
-            description: 'Sets the case of the tag`s text. By default, it is set to upper case.',
-          },
           {
             name: 'onEnter',
             type: '(value: string) => void;',

diff --git a/...s/public/examples/tagsInput/TagsCases.tsx → ...s/public/examples/tagsInput/LowerCase.tsx b/...s/public/examples/tagsInput/TagsCases.tsx → ...s/public/examples/tagsInput/LowerCase.tsx
@@ -2,14 +2,9 @@ import { TagsInput } from "@heathmont/moon-core-tw";
 import { useCallback, useState } from "react";
 
 const Example = () => {
-  const [selected0, setSelected0] = useState<string[]>(['Preset data']);
   const [selected1, setSelected1] = useState<string[]>(['Preset data']);
   const [selected2, setSelected2] = useState<string[]>(['Preset data']);
 
-  const onEnter0 = useCallback((value: string) => {
-    setSelected0([...selected0, value]);
-  }, [selected0, setSelected0]);
-
   const onEnter1 = useCallback((value: string) => {
     setSelected1([...selected1, value]);
   }, [selected1, setSelected1]);
@@ -18,10 +13,6 @@ const Example = () => {
     setSelected2([...selected2, value]);
   }, [selected2, setSelected2]);
 
-  const onClear0 = useCallback((index: number) => {
-    setSelected0(selected0.filter((item, id) => id !== index));
-  }, [selected0, setSelected0]);
-
   const onClear1 = useCallback((index: number) => {
     setSelected1(selected1.filter((item, id) => id !== index));
   }, [selected1, setSelected1]);
@@ -33,30 +24,15 @@ const Example = () => {
   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-4">
-        <div className="flex flex-col w-full max-w-xs">
-          <TagsInput
-            selected={selected0}
-            label="Normal"
-            tagsCase="normal"
-            onEnter={onEnter0}
-            onClear={onClear0}
-          >
-            {selected0.map((text, index) => (
-              <TagsInput.SelectedItem index={index} label={text} />
-            ))}
-          </TagsInput>
-        </div>
-
         <div className="flex flex-col w-full max-w-xs">
           <TagsInput
             selected={selected1}
             label="Lower"
-            tagsCase="lower"
             onEnter={onEnter1}
             onClear={onClear1}
           >
             {selected1.map((text, index) => (
-              <TagsInput.SelectedItem index={index} label={text} />
+              <TagsInput.SelectedItem isUppercase={false} index={index} label={text} />
             ))}
           </TagsInput>
         </div>
@@ -65,7 +41,6 @@ const Example = () => {
           <TagsInput
             selected={selected2}
             label="Capitalized"
-            tagsCase="capitalize"
             onEnter={onEnter2}
             onClear={onClear2}
           >

diff --git a/next-docs/public/examples/tagsInput/__tests__/index.test.tsx b/next-docs/public/examples/tagsInput/__tests__/index.test.tsx
@@ -6,7 +6,7 @@ import { cleanup, render } from '@testing-library/react';
 import Default from '../Default';
 import Sizes from '../Sizes';
 import States from '../States';
-import TagsCases from '../TagsCases';
+import TagsCases from '../LowerCase';
 
 const withRtl = (component: JSX.Element) => <div dir="rtl">{component}</div>;
 

diff --git a/workspaces/core/src/selectButton/SelectButton.tsx b/workspaces/core/src/selectButton/SelectButton.tsx
@@ -22,6 +22,7 @@ const SelectButtonRoot = forwardRef(
       idDisabled,
       open,
       children,
+      isUppercase,
       ...rest
     }: SelectButtonProps,
     ref: Ref<HTMLInputElement>
@@ -158,9 +159,9 @@ const Control = () => {
   );
 };
 
-const Chip = ({ children, onClear }: ChipProps) => {
+const Chip = ({ children, onClear, isUppercase, ...rest }: ChipProps) => {
   const { size } = useSelectButtonContext('SelectButton.Control');
-  const cliclHandler = useCallback(
+  const clickHandler = useCallback(
     (e: any) => {
       e.preventDefault();
       onClear && onClear();
@@ -171,8 +172,10 @@ const Chip = ({ children, onClear }: ChipProps) => {
     <Tag
       size={size === 'sm' ? '2xs' : 'xs'}
       iconRight={
-        <ControlsCloseSmall onClick={cliclHandler} className="cursor-pointer" />
+        <ControlsCloseSmall onClick={clickHandler} className="cursor-pointer" />
       }
+      isUppercase={isUppercase}
+      {...rest}
     >
       {children}
     </Tag>

diff --git a/workspaces/core/src/selectButton/private/types/ChipProps.ts b/workspaces/core/src/selectButton/private/types/ChipProps.ts
@@ -1,3 +1,7 @@
-type ChipProps = { children: React.ReactNode; onClear?: () => void };
+type ChipProps = {
+  children: React.ReactNode;
+  onClear?: () => void;
+  isUppercase?: boolean
+};
 
 export default ChipProps;
diff --git a/workspaces/core/src/selectButton/private/types/SelectButtonProps.ts b/workspaces/core/src/selectButton/private/types/SelectButtonProps.ts
@@ -6,6 +6,7 @@ type SelectButtonProps = {
   label?: JSX.Element | string;
   placeholder?: JSX.Element | string;
   children?: React.ReactNode;
+  isUppercase?: boolean;
 };
 
 export default SelectButtonProps;
diff --git a/workspaces/core/src/selectButton/private/types/SelectButtonState.ts b/workspaces/core/src/selectButton/private/types/SelectButtonState.ts
@@ -3,6 +3,7 @@ type SelectButtonState = {
   size?: 'sm' | 'md' | 'lg' | string;
   isError?: boolean;
   idDisabled?: boolean;
+  isUppercase?: boolean;
 };
 
 export default SelectButtonState;
diff --git a/workspaces/core/src/tagsInput/TagsInput.tsx b/workspaces/core/src/tagsInput/TagsInput.tsx
@@ -1,12 +1,10 @@
 import React, { forwardRef, useState } from "react";
-import { usePopper } from "react-popper";
-import { Input  as NativeInput, SelectButton, mergeClassnames } from "../index";
-import { TagsInputContext, useTagsInputContext } from "./private/utils/useTagsInputContext";
-import { TagsInputRootProps } from "./private/types/TagsInputRootProps";
+import { Listbox } from "@headlessui/react";
 import SelectedItemProps from "./private/types/SelectedItemProps";
+import { TagsInputRootProps } from "./private/types/TagsInputRootProps";
+import { TagsInputContext, useTagsInputContext } from "./private/utils/useTagsInputContext";
 import getTextSizes from "./private/utils/useTextSizes";
-import getTextCase from "./private/utils/useTextCase";
-import { Listbox } from "@headlessui/react";
+import { Input  as NativeInput, SelectButton, mergeClassnames } from "../index";
 
 const TagsInputRoot = forwardRef<HTMLSpanElement, TagsInputRootProps>(({
   label,
@@ -20,30 +18,18 @@ const TagsInputRoot = forwardRef<HTMLSpanElement, TagsInputRootProps>(({
   isError,
   onEnter,
   onClear,
-  tagsCase,
-  popper,
+  isUppercase,
 },
   ref
 ) => {
   const [isFocused, setIsFocused] = useState(false);
-  const [anchorEl, setAnchorEl] = React.useState<Element | null>();
-  const [popperEl, setPopperEl] = React.useState<HTMLElement | null>();
-
-  let { styles, attributes } = usePopper(anchorEl, popperEl);
-
   const states = {
+    isUppercase,
     value: selected,
     size: size,
     disabled: disabled,
     isError: isError,
     onClear: onClear,
-    tagsCase: tagsCase,
-    popper: {
-        styles: styles,
-        attributes: attributes,
-        setAnchor: setAnchorEl,
-        setPopper: setPopperEl,
-    }
   }
 
   return (
@@ -96,7 +82,6 @@ const TagsInputRoot = forwardRef<HTMLSpanElement, TagsInputRootProps>(({
             }}
             onFocus={() => setIsFocused(true)}
             onBlur={() => setIsFocused(false)}
-            ref={states.popper?.setAnchor}
           />
         </span>
       </Listbox>
@@ -108,15 +93,15 @@ const SelectedItem = ({
   className,
   index,
   label,
+  isUppercase,
   ...rest
 }: SelectedItemProps) => {
-  const { size, disabled, isError, tagsCase, onClear } = useTagsInputContext('TagstInput.SelectedItem');
+  const { size, disabled, isError, onClear } = useTagsInputContext('TagstInput.SelectedItem');
   return (
     <span
       key={index}
       className={mergeClassnames(
-        'flex gap-2 items-center flex-grow-0 flex-shrink-0 self-center max-w-full [&>div]:max-w-full',
-        getTextCase(tagsCase),
+        'flex gap-2 items-center flex-grow-0 flex-shrink-0 self-center max-w-full',
         className
       )}
     >
@@ -128,6 +113,7 @@ const SelectedItem = ({
       >
         <SelectButton.Value>
           <SelectButton.Chip
+            isUppercase={isUppercase}
             onClear={() => !disabled && onClear && onClear(index)}
           >
             <span

diff --git a/workspaces/core/src/tagsInput/private/types/SelectedItemProps.ts b/workspaces/core/src/tagsInput/private/types/SelectedItemProps.ts
@@ -2,6 +2,7 @@ type SelectedItemProps = {
   index: number;
   label: string;
   className?: string;
+  isUppercase?: boolean;
 }
 
 export default SelectedItemProps;
diff --git a/workspaces/core/src/tagsInput/private/types/TagsInputRootProps.ts b/workspaces/core/src/tagsInput/private/types/TagsInputRootProps.ts
@@ -1,5 +1,5 @@
-import Size from "./Size";
 import Case from "./Case";
+import Size from "./Size";
 
 export interface TagsInputRootProps
   extends Omit<
@@ -17,13 +17,5 @@ export interface TagsInputRootProps
   size?: Size;
   onEnter?: (value: string) => void;
   onClear?: (index: number) => void;
-  tagsCase?: Case;
-  popper?: {
-    styles?: { [key: string]: React.CSSProperties };
-    attributes?: { [key: string]: { [key: string]: string } | undefined };
-    setAnchor: React.Dispatch<React.SetStateAction<Element | null | undefined>>;
-    setPopper: React.Dispatch<
-      React.SetStateAction<HTMLElement | null | undefined>
-    >;
-  };
+  isUppercase?: boolean;
 };
diff --git a/workspaces/core/src/tagsInput/private/types/TagsInputState.ts b/workspaces/core/src/tagsInput/private/types/TagsInputState.ts
@@ -1,4 +1,3 @@
-import Case from "./Case";
 import Size from "./Size";
 
 type TagsInputState = {
@@ -7,15 +6,6 @@ type TagsInputState = {
   disabled?: boolean;
   isError?: boolean;
   onClear?: (index: number) => void;
-  tagsCase?: Case;
-  popper?:  {
-    styles?: { [key: string]: React.CSSProperties };
-    attributes?: { [key: string]: { [key: string]: string } | undefined };
-    setAnchor: React.Dispatch<React.SetStateAction<Element | null | undefined>>;
-    setPopper: React.Dispatch<
-      React.SetStateAction<HTMLElement | null | undefined>
-    >;
-  };
 };
 
 export default TagsInputState;