temp2

thunderstore-io · Nov 8, 2023 · a228953 · a228953
1 parent f625104
commit a228953
Show file tree

Hide file tree

Showing 4 changed files with 83 additions and 35 deletions.
diff --git a/packages/cyberstorm/src/components/Forms/CreateTeamForm/CreateTeamForm.module.css b/packages/cyberstorm/src/components/Forms/CreateTeamForm/CreateTeamForm.module.css
@@ -13,9 +13,9 @@
 
 .footer {
   display: flex;
-  flex-direction: row;
+  flex-direction: row-reverse;
   gap: var(--gap--16);
   justify-content: space-between;
-  padding: var(--space--16) var(--space--24);
+  padding-top: var(--space--16);
   border-top: var(--border);
 }
diff --git a/packages/cyberstorm/src/components/Forms/CreateTeamForm/CreateTeamForm.tsx b/packages/cyberstorm/src/components/Forms/CreateTeamForm/CreateTeamForm.tsx
@@ -4,6 +4,33 @@ import * as Button from "../../Button";
 import { TextInput } from "../../TextInput/TextInput";
 import { useForm, useController, UseControllerProps } from "react-hook-form";
 
+type FormValues = {
+  teamName: string;
+};
+
+function Input(props: UseControllerProps<FormValues>) {
+  const { field, fieldState } = useController(props);
+
+  return (
+    <div>
+      <TextInput asChild>
+        <input
+          {...field}
+          placeholder={props.name}
+          data-state={
+            fieldState.isDirty
+              ? fieldState.invalid
+                ? "invalid"
+                : "valid"
+              : "empty"
+          }
+        />
+      </TextInput>
+      <p>{fieldState.isTouched && "Touched"}</p>
+    </div>
+  );
+}
+
 /**
  * Form for creating a team
  */
@@ -17,25 +44,18 @@ export function CreateTeamForm() {
 
   const onSubmit = (data: { teamName: string }) => console.log(data);
 
-  const controllerProps = {
-    control: control,
-    name: "teamName",
-    rules: { required: true },
-  } as UseControllerProps<{ teamName: string }>;
-
-  const { field, fieldState } = useController(controllerProps);
-
   return (
     <form onSubmit={handleSubmit(onSubmit)}>
       <div className={styles.createTeamDialog}>
         <div className={styles.createTeamDialogText}>
           Enter the name of the team you wish to create. Team names can contain
           the characters a-z A-Z 0-9 _ and must not start or end with an _
         </div>
-        <TextInput {...field} placeHolder="Team name" />
-        <p>{fieldState.isTouched && "Touched"}</p>
-        <p>{fieldState.isDirty && "Dirty"}</p>
-        <p>{fieldState.invalid ? "invalid" : "valid"}</p>
+        <Input
+          control={control}
+          name="teamName"
+          rules={{ required: true, minLength: 5 }}
+        />
       </div>
       <div className={styles.footer}>
         <Button.Root type="submit" paddingSize="large" colorScheme="success">

diff --git a/packages/cyberstorm/src/components/TextInput/TextInput.module.css b/packages/cyberstorm/src/components/TextInput/TextInput.module.css
@@ -5,7 +5,7 @@
   color: var(--color-text--tertiary);
 }
 
-.input {
+.root > input {
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -23,27 +23,51 @@
   --border-color: transparent;
 }
 
-.hasLeftIcon {
-  padding-left: 2.875rem;
-}
-
-.input:hover {
+.root > input:hover {
   --border-color: var(--color-border--highlight);
 
   transition: ease-out 80ms;
 }
 
-.input:focus-within {
+.root > input:focus-within {
   color: var(--color-text--default);
   background-color: var(--color-black);
 
   --border-color: var(--color-border--highlight);
 }
 
-.input::placeholder {
+.root > input::placeholder {
   color: var(--color-text--tertiary);
 }
 
+.root > input[data-state="invalid"] {
+  --border-color: var(--color-red--5);
+
+  transition: ease-out 80ms;
+}
+
+.root > input[data-state="invalid"]:hover {
+  --border-color: var(--color-red--3);
+
+  transition: ease-out 80ms;
+}
+
+.root > input[data-state="valid"] {
+  --border-color: var(--color-cyber-green--50);
+
+  transition: ease-out 80ms;
+}
+
+.root > input[data-state="valid"]:hover {
+  --border-color: var(--color-cyber-green--80);
+
+  transition: ease-out 80ms;
+}
+
+.hasLeftIcon {
+  padding-left: 2.875rem;
+}
+
 .leftIcon {
   position: absolute;
   width: 1em;

diff --git a/packages/cyberstorm/src/components/TextInput/TextInput.tsx b/packages/cyberstorm/src/components/TextInput/TextInput.tsx
@@ -1,10 +1,11 @@
 "use client";
-import React from "react";
+import React, { ReactNode, cloneElement } from "react";
 import styles from "./TextInput.module.css";
 import { Icon } from "../Icon/Icon";
 import { classnames } from "../../utils/utils";
 
 export interface TextInputProps {
+  children?: ReactNode;
   placeHolder?: string;
   leftIcon?: JSX.Element;
   id?: string;
@@ -13,13 +14,15 @@ export interface TextInputProps {
   value?: string;
   setValue?: React.Dispatch<React.SetStateAction<string>>;
   enterHook?: (value: string) => string | void;
+  asChild?: boolean;
 }
 
 /**
  * Cyberstorm TextInput component
  */
 export function TextInput(props: TextInputProps) {
   const {
+    children,
     placeHolder,
     id,
     type = "text",
@@ -28,6 +31,7 @@ export function TextInput(props: TextInputProps) {
     value = "",
     setValue,
     enterHook,
+    asChild = false,
   } = props;
 
   const onEnter = (e: React.KeyboardEvent<HTMLInputElement>) => {
@@ -43,18 +47,18 @@ export function TextInput(props: TextInputProps) {
           {leftIcon}
         </Icon>
       ) : null}
-      <input
-        id={id}
-        type={type}
-        placeholder={placeHolder}
-        className={classnames(
-          styles.input,
-          leftIcon ? styles.hasLeftIcon : null
-        )}
-        onChange={(event) => setValue && setValue(event.target.value)}
-        value={value}
-        onKeyDown={(e) => onEnter(e)}
-      />
+      {asChild ? (
+        children
+      ) : (
+        <input
+          id={id}
+          type={type}
+          placeholder={placeHolder}
+          onChange={(event) => setValue && setValue(event.target.value)}
+          value={value}
+          onKeyDown={(e) => onEnter(e)}
+        />
+      )}
       {rightIcon ? (
         <Icon inline wrapperClasses={styles.rightIcon}>
           {rightIcon}