From 7d39bb3d89253cb7c6e302e6baaa9ffec5f2fdbe Mon Sep 17 00:00:00 2001
From: SrJuggernaut <jugger@srjuggernaut.dev>
Date: Thu, 4 Jan 2024 21:46:10 -0600
Subject: [PATCH] feat: improve ui components

---
 .gitignore                               |   5 +-
 bun.lockb                                | Bin 263050 -> 263050 bytes
 package.json                             |   2 +-
 src/components/ui/Alert.tsx              |  36 ++++++++------
 src/components/ui/ButtonGroup.tsx        |  20 ++++++++
 src/components/ui/Chip.tsx               |  19 ++++++++
 src/components/ui/Collapse.tsx           |  36 ++++++++++++++
 src/components/ui/IconButton.tsx         |   4 +-
 src/components/ui/ListGroup.tsx          |  20 ++++++++
 src/components/ui/ListGroupItem.tsx      |  19 ++++++++
 src/components/ui/Tooltip.tsx            |  28 +++++++++++
 src/components/ui/Typography.tsx         |  19 +++-----
 src/components/ui/form/Input.tsx         |  17 ++++---
 src/components/ui/form/PasswordInput.tsx |  57 +++++++++++++++++++++++
 14 files changed, 245 insertions(+), 37 deletions(-)
 create mode 100644 src/components/ui/ButtonGroup.tsx
 create mode 100644 src/components/ui/Chip.tsx
 create mode 100644 src/components/ui/Collapse.tsx
 create mode 100644 src/components/ui/ListGroup.tsx
 create mode 100644 src/components/ui/ListGroupItem.tsx
 create mode 100644 src/components/ui/Tooltip.tsx
 create mode 100644 src/components/ui/form/PasswordInput.tsx

diff --git a/.gitignore b/.gitignore
index 8d30874..ae2b362 100644
--- a/.gitignore
+++ b/.gitignore
@@ -192,4 +192,7 @@ dist
 # End of https://www.toptal.com/developers/gitignore/api/node,yarn,nextjs
 
 # Panda Css
-src/styled-system
\ No newline at end of file
+src/styled-system
+
+# Vscode
+.vscode
diff --git a/bun.lockb b/bun.lockb
index 0a7a2b099cde522720dc1c4b97fa0a7b698e08c5..1cc8b0b5822db58b45cc0bc56eab9cdfa4471a16 100755
GIT binary patch
delta 254
zcmV<a00IAshY*T~5Rfh)V^(B61ceV1a9zq~7y_ENAyZ}^HkSSx=le8bHE_X9u}(@t
zlUO=1v&ceFQj^$2FtbRN)r3G6Qkb@e5KA6tKchATD2*gS%1OO{FNdp{!XDLP>EDv0
z2h+~DP(P_T&(!QNHmM+^gCd%Bu_9+F_{Q3B#pGnST^a!}aX{UjO39Pw2X5{LJ%iB|
z%6BLwE0Phr9ZyyD)XZaMHY1J<kFoo|8d;O|UyZZHI*1|kC9;$eGjP|Ui5<J^B*BNx
zivhRIivpS{2LWC%E-)@Nmu|HJ7y&W2hqVI7o|hxN10k27RRamPcvJ(qVgWU`GPeU*
EO!1#>?EnA(

delta 254
zcmV<a00IAshY*T~5Rfh)<mZYMO)ohV$|YmgJbnoJJO{Ij;Lfr*+2^{z0rZk2u}(@t
zlbAFxv&ceFQj-`rFtbRN)r3HOkCkKUi`x`B-4cxz9k{o%gj!BE{;_z6Y?RS5?K*Or
zAvD`6>J^zcoSx}@sb`H4OSS}>erW`aT*%q^MNrwdT^a!}aX>@OMo4nRW5TZ}PFZW_
zdj>B*Vo?{I9nZ7U+g_jJ6$W4%BK)yr4x>mb*Zgrf1!Oi+kCv+1LAh|oVxTz6Kv0Lx
zivhRIivpS{2Lb>900000mu|HJ7y&T1hqVI7o|klk10a{5RRapQcvJ(qVgWR_GPeU*
EOpZlvGXMYp

diff --git a/package.json b/package.json
index 612d7c1..58f4183 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,7 @@
     "@fortawesome/react-fontawesome": "^0.2.0",
     "appwrite": "^13.0.1",
     "entgamers-database": "^0.0.5",
-    "entgamers-panda-preset": "0.1.0",
+    "entgamers-panda-preset": "0.1.1",
     "formik": "^2.4.5",
     "framer-motion": "^10.16.16",
     "isomorphic-fetch": "^3.0.0",
diff --git a/src/components/ui/Alert.tsx b/src/components/ui/Alert.tsx
index 48c1292..a3f6001 100644
--- a/src/components/ui/Alert.tsx
+++ b/src/components/ui/Alert.tsx
@@ -1,35 +1,41 @@
 import { cx } from '@/styled-system/css'
 import { alert, type AlertVariantProps } from '@/styled-system/recipes/alert'
 import { type MergeOmitting } from '@/types/utilities'
-import { faTimes } from '@fortawesome/free-solid-svg-icons'
+import { faTimes } from '@fortawesome/free-solid-svg-icons/faTimes'
 import { FontAwesomeIcon, type FontAwesomeIconProps } from '@fortawesome/react-fontawesome'
-import { type ButtonHTMLAttributes, type DetailedHTMLProps, type FC, type HTMLAttributes } from 'react'
+import { type DetailedHTMLProps, type FC, type HTMLAttributes, type ReactNode } from 'react'
+import IconButton, { type IconButtonProps } from './IconButton'
 
-export type AlertProps = MergeOmitting<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, AlertVariantProps>
+type ComposedAlertProps = MergeOmitting<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, AlertVariantProps>
 
-const Alert: FC<AlertProps> = ({ children, className, ...props }) => {
-  const [alertArgs, allOtherProps] = alert.splitVariantProps(props)
+const Alert: FC<ComposedAlertProps> = ({ className, children, ...props }) => {
+  const [alertRecipeArgs, allOtherAlertProps] = alert.splitVariantProps(props)
   return (
     <div
-      className={cx(alert(alertArgs).body, className)}
-      {...allOtherProps}
+      className={cx(alert(alertRecipeArgs).body, className)}
+      {...allOtherAlertProps}
     >
       {children}
     </div>
   )
 }
 
-export type AlertCloseButtonProps = MergeOmitting<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, AlertVariantProps>
+type ComposedAlertCloseButtonProps = MergeOmitting<IconButtonProps, AlertVariantProps> & {
+  children?: ReactNode
+}
 
-export const AlertCloseButton: FC<AlertCloseButtonProps> = ({ children, className, ...props }) => {
-  const [alertArgs, allOtherProps] = alert.splitVariantProps(props)
+export const AlertCloseButton: FC<ComposedAlertCloseButtonProps> = ({ children, className, ...props }) => {
+  const [alertRecipeArgs, allOtherAlertProps] = alert.splitVariantProps(props)
   return (
-    <button
-      className={cx(alert(alertArgs).closeButton, className)}
-      {...allOtherProps}
+    <IconButton
+      className={cx(alert(alertRecipeArgs).closeButton, className)}
+      {...allOtherAlertProps}
     >
-      {children !== undefined ? children : <FontAwesomeIcon icon={faTimes as FontAwesomeIconProps['icon']} fixedWidth />}
-    </button>
+      {children === undefined
+        ? <FontAwesomeIcon icon={faTimes as FontAwesomeIconProps['icon']} fixedWidth size='sm' />
+        : children
+      }
+    </IconButton>
   )
 }
 
diff --git a/src/components/ui/ButtonGroup.tsx b/src/components/ui/ButtonGroup.tsx
new file mode 100644
index 0000000..b0259e3
--- /dev/null
+++ b/src/components/ui/ButtonGroup.tsx
@@ -0,0 +1,20 @@
+import { cx } from '@/styled-system/css'
+import { buttonGroup, type ButtonGroupVariantProps } from '@/styled-system/recipes/button-group'
+import { type MergeOmitting } from '@/types/utilities'
+import { type DetailedHTMLProps, type FC, type HTMLAttributes } from 'react'
+
+export type ButtonGroupProps = MergeOmitting<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ButtonGroupVariantProps>
+
+const ButtonGroup: FC<ButtonGroupProps> = ({ children, className, ...rest }) => {
+  const [buttonGroupRecipeArgs, allOtherButtonGroupProps] = buttonGroup.splitVariantProps(rest)
+  return (
+    <div
+      className={cx(buttonGroup(buttonGroupRecipeArgs), className)}
+      {...allOtherButtonGroupProps}
+    >
+      {children}
+    </div>
+  )
+}
+
+export default ButtonGroup
diff --git a/src/components/ui/Chip.tsx b/src/components/ui/Chip.tsx
new file mode 100644
index 0000000..5b3a707
--- /dev/null
+++ b/src/components/ui/Chip.tsx
@@ -0,0 +1,19 @@
+import { cx } from '@/styled-system/css'
+import { chip, type ChipVariantProps } from '@/styled-system/recipes/chip'
+import { type MergeOmitting } from '@/types/utilities'
+import { type DetailedHTMLProps, type FC, type HTMLAttributes } from 'react'
+
+export type ChipProps = MergeOmitting<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, ChipVariantProps>
+
+const Chip: FC<ChipProps> = ({ children, className, ...rest }) => {
+  const [chipRecipeArgs, allOtherChipProps] = chip.splitVariantProps(rest)
+  return (
+    <span
+      className={cx(chip(chipRecipeArgs), className)}
+      {...allOtherChipProps}
+    >
+      {children}
+    </span>
+  )
+}
+export default Chip
diff --git a/src/components/ui/Collapse.tsx b/src/components/ui/Collapse.tsx
new file mode 100644
index 0000000..d912d67
--- /dev/null
+++ b/src/components/ui/Collapse.tsx
@@ -0,0 +1,36 @@
+import { cx } from '@/styled-system/css'
+import { collapse, type CollapseVariantProps } from '@/styled-system/recipes/collapse'
+import { type MergeOmitting } from '@/types/utilities'
+import { type DetailedHTMLProps, type DetailsHTMLAttributes, type FC, type HTMLAttributes, type ReactNode } from 'react'
+
+export type CollapseProps = MergeOmitting<DetailedHTMLProps<DetailsHTMLAttributes<HTMLDetailsElement>, HTMLDetailsElement>, CollapseVariantProps> & {
+  children?: ReactNode
+  contentProps?: HTMLAttributes<HTMLElement>
+  summary: ReactNode
+  summaryProps?: HTMLAttributes<HTMLElement>
+}
+
+const Collapse: FC<CollapseProps> = ({ children, className, summary, summaryProps, contentProps, ...rest }) => {
+  const [collapseRecipeArgs, allOtherCollapseProps] = collapse.splitVariantProps(rest)
+  return (
+    <details
+      className={cx(collapse(collapseRecipeArgs).root, className)}
+      {...allOtherCollapseProps}
+    >
+      <summary
+        {...summaryProps}
+        className={cx(collapse(collapseRecipeArgs).summary, summaryProps?.className)}
+      >
+        {summary}
+      </summary>
+      <div
+        {...contentProps}
+        className={cx(collapse(collapseRecipeArgs).content, contentProps?.className)}
+      >
+        {children}
+      </div>
+    </details>
+  )
+}
+
+export default Collapse
diff --git a/src/components/ui/IconButton.tsx b/src/components/ui/IconButton.tsx
index 25423ec..5b9d6a1 100644
--- a/src/components/ui/IconButton.tsx
+++ b/src/components/ui/IconButton.tsx
@@ -1,9 +1,9 @@
 import { cx } from '@/styled-system/css'
 import { iconButton, type IconButtonVariantProps } from '@/styled-system/recipes/icon-button'
 import { type MergeOmitting } from '@/types/utilities'
-import React, { type FC } from 'react'
+import { type ButtonHTMLAttributes, type DetailedHTMLProps, type FC } from 'react'
 
-type ComposedIconButtonProps = MergeOmitting<React.HTMLAttributes<HTMLButtonElement>, IconButtonVariantProps>
+type ComposedIconButtonProps = MergeOmitting<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, IconButtonVariantProps>
 
 export interface IconButtonProps extends ComposedIconButtonProps {}
 
diff --git a/src/components/ui/ListGroup.tsx b/src/components/ui/ListGroup.tsx
new file mode 100644
index 0000000..022eaae
--- /dev/null
+++ b/src/components/ui/ListGroup.tsx
@@ -0,0 +1,20 @@
+import { cx } from '@/styled-system/css'
+import { listGroup, type ListGroupVariantProps } from '@/styled-system/recipes/list-group'
+import { type MergeOmitting } from '@/types/utilities'
+import { type DetailedHTMLProps, type FC, type HTMLAttributes } from 'react'
+
+type ComposedInputProps = MergeOmitting<DetailedHTMLProps<HTMLAttributes<HTMLUListElement>, HTMLUListElement>, ListGroupVariantProps>
+
+const ListGroup: FC<ComposedInputProps> = ({ children, className, ...rest }) => {
+  const [listGroupRecipeArgs, allOtherListGroupProps] = listGroup.splitVariantProps(rest)
+  return (
+    <ul
+      className={cx(listGroup(listGroupRecipeArgs).root, className)}
+      {...allOtherListGroupProps}
+    >
+      {children}
+    </ul>
+  )
+}
+
+export default ListGroup
diff --git a/src/components/ui/ListGroupItem.tsx b/src/components/ui/ListGroupItem.tsx
new file mode 100644
index 0000000..e59e5e8
--- /dev/null
+++ b/src/components/ui/ListGroupItem.tsx
@@ -0,0 +1,19 @@
+import { cx } from '@/styled-system/css'
+import { listGroup, type ListGroupVariantProps } from '@/styled-system/recipes/list-group'
+import { type MergeOmitting } from '@/types/utilities'
+import { type DetailedHTMLProps, type FC, type LiHTMLAttributes } from 'react'
+
+type ComposedInputProps = MergeOmitting<DetailedHTMLProps<LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, ListGroupVariantProps>
+
+const ListGroupItem: FC<ComposedInputProps> = ({ children, className, ...rest }) => {
+  const [listGroupRecipeArgs, allOtherListGroupProps] = listGroup.splitVariantProps(rest)
+  return (
+    <li
+      className={cx(listGroup(listGroupRecipeArgs).item, className)}
+      {...allOtherListGroupProps}
+    >
+      {children}
+    </li>
+  )
+}
+export default ListGroupItem
diff --git a/src/components/ui/Tooltip.tsx b/src/components/ui/Tooltip.tsx
new file mode 100644
index 0000000..706f8b6
--- /dev/null
+++ b/src/components/ui/Tooltip.tsx
@@ -0,0 +1,28 @@
+import { cx } from '@/styled-system/css'
+import { tooltip, type TooltipVariantProps } from '@/styled-system/recipes/tooltip'
+import { type MergeOmitting } from '@/types/utilities'
+import { type DetailedHTMLProps, type FC, type HTMLAttributes, type ReactNode } from 'react'
+
+type ComposedTooltipProps = MergeOmitting<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, TooltipVariantProps> & {
+  title: ReactNode
+}
+
+const Tooltip: FC<ComposedTooltipProps> = ({ children, className, title, ...rest }) => {
+  const [tooltipRecipeArgs, allOtherTooltipProps] = tooltip.splitVariantProps(rest)
+  return (
+    <div
+      className={cx(tooltip(tooltipRecipeArgs), className)}
+      {...allOtherTooltipProps}
+    >
+      {children}
+      <span
+        className="tooltip__content"
+        aria-hidden="true"
+      >
+        {title}
+      </span>
+    </div>
+  )
+}
+
+export default Tooltip
diff --git a/src/components/ui/Typography.tsx b/src/components/ui/Typography.tsx
index 601117b..7899a57 100644
--- a/src/components/ui/Typography.tsx
+++ b/src/components/ui/Typography.tsx
@@ -1,9 +1,9 @@
 import { cx } from '@/styled-system/css'
-import { typography, type TypographyVariantProps } from '@/styled-system/recipes'
+import { typography, type TypographyVariantProps } from '@/styled-system/recipes/typography'
 import { type MergeOmitting } from '@/types/utilities'
-import React, { type ElementType, type FC } from 'react'
+import { type ElementType, type FC, type HTMLAttributes } from 'react'
 
-type ComposedTypographyProps = MergeOmitting<React.HTMLAttributes<HTMLElement>, TypographyVariantProps>
+type ComposedTypographyProps = MergeOmitting<HTMLAttributes<HTMLElement>, TypographyVariantProps>
 
 export interface TypographyProps extends ComposedTypographyProps {
   component?: ElementType
@@ -33,19 +33,14 @@ const variantToComponent = (variant: TypographyVariantProps['variant']): Element
   }
 }
 
-const isHeading = (text: string): boolean => {
-  return text.startsWith('h')
-}
-
 const Typography: FC<TypographyProps> = ({ children, className, component, ...rest }) => {
   const [typographyRecipeArgs, allOtherTypographyProps] = typography.splitVariantProps(rest)
   const Component = component ?? variantToComponent(typographyRecipeArgs.variant)
-  // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-  typographyRecipeArgs.color = typographyRecipeArgs.color !== undefined
-    ? typographyRecipeArgs.color
-    : typeof typographyRecipeArgs.variant === 'string' && isHeading(typographyRecipeArgs.variant)
+  typographyRecipeArgs.color = typographyRecipeArgs.color ?? (
+    typeof typographyRecipeArgs.variant === 'string' && typographyRecipeArgs.variant.startsWith('h')
       ? 'primary'
-      : undefined
+      : 'inherit'
+  )
   return (
     <Component
       className={cx(typography(typographyRecipeArgs), className)}
diff --git a/src/components/ui/form/Input.tsx b/src/components/ui/form/Input.tsx
index e94561b..4618625 100644
--- a/src/components/ui/form/Input.tsx
+++ b/src/components/ui/form/Input.tsx
@@ -3,15 +3,20 @@ import { input, type InputVariantProps } from '@/styled-system/recipes/input'
 import { type MergeOmitting } from '@/types/utilities'
 import { type DetailedHTMLProps, type FC, type InputHTMLAttributes } from 'react'
 
-export type InputProps = MergeOmitting<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, InputVariantProps>
+type ComposedInputProps = MergeOmitting<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, InputVariantProps>
 
-const Input: FC<InputProps> = ({ className, ...props }) => {
-  const [inputCss, rest] = input.splitVariantProps(props)
+export interface InputProps extends ComposedInputProps {}
+
+const Input: FC<InputProps> = ({ children, className, ...rest }) => {
+  const [inputRecipeArgs, allOtherInputProps] = input.splitVariantProps(rest)
   return (
     <input
-      className={cx(input(inputCss), className)}
-      {...rest}
-    />
+      className={cx(input(inputRecipeArgs), className)}
+      {...allOtherInputProps}
+    >
+      {children}
+    </input>
   )
 }
+
 export default Input
diff --git a/src/components/ui/form/PasswordInput.tsx b/src/components/ui/form/PasswordInput.tsx
new file mode 100644
index 0000000..25debe6
--- /dev/null
+++ b/src/components/ui/form/PasswordInput.tsx
@@ -0,0 +1,57 @@
+import IconButton from '@/components/ui/IconButton'
+import Tooltip from '@/components/ui/Tooltip'
+import { css, cx } from '@/styled-system/css'
+import { input, type InputVariantProps } from '@/styled-system/recipes/input'
+import { type MergeOmitting } from '@/types/utilities'
+import { faEye, faEyeSlash } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { useState, type FC, type InputHTMLAttributes } from 'react'
+
+export type InputProps = MergeOmitting<Omit<InputHTMLAttributes<HTMLInputElement>, 'type'>, InputVariantProps>
+
+const PasswordInput: FC<InputProps> = ({ className, ...props }) => {
+  const [showPassword, setShowPassword] = useState(false)
+  const [inputCss, rest] = input.splitVariantProps(props)
+  return (
+    <div
+      className={css({
+        display: 'flex',
+        alignItems: 'center',
+        position: 'relative'
+      })}
+    >
+      <input
+        className={cx(
+          input(inputCss),
+          css({ fontSize: 'medium' }),
+          className
+        )}
+        {...rest}
+        type={showPassword ? 'text' : 'password'}
+      />
+      <div
+        className={css({
+          position: 'absolute',
+          right: '16px',
+          top: '50%',
+          transform: 'translateY(-50%)'
+        })}
+      >
+        <Tooltip
+          title={showPassword ? 'Ocultar contraseña' : 'Mostrar contraseña'}
+          position="top"
+        >
+          <IconButton
+            type="button"
+            color="primary"
+            size="small"
+            onClick={() => { setShowPassword(!showPassword) }}
+          >
+            <FontAwesomeIcon icon={showPassword ? faEyeSlash : faEye} fixedWidth/>
+          </IconButton>
+        </Tooltip>
+      </div>
+    </div>
+  )
+}
+export default PasswordInput