Merge pull request #83 from AndyOooh/ED1-68-refactor-components-to-ui

Ed1 68 refactor components to UI

apps/app/src/app/(protected)/components/HomeMain/stats/Stats.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Stat } from 'ui';
 
 export const Stats = () => {
   const statsData = [
@@ -32,11 +33,8 @@ export const Stats = () => {
     <div>
       <div className='grid grid-cols-4 gap-2'>
         {statsData.map(stat => (
-          <div
-            key={stat.title}
-            className='flex flex-col justify-center items-center gap-4 bg-base-100 p-4 rounded-3xl shadow-md'>
-            <p className='stat-title text-sm font-semibold'>{stat.title}</p>
-            <p className='text-3xl stat-value text-neutral'>{stat.value}</p>
+          <div key={stat.title}>
+            <Stat stat={stat} />
           </div>
         ))}
       </div>

apps/app/src/app/(protected)/events/create/form/event-roles/form-data.ts

@@ -1,4 +1,4 @@
-import { TextInputClassNames } from 'ui/src/forms/TextInput_new';
+import { TextInputClassNames } from 'ui/src/form-elements/TextInput';
 import {
   IeventRoleSchema,
   // IeventRolesSchema

apps/app/src/app/(protected)/events/create/form/event-roles/index.tsx

@@ -16,7 +16,7 @@ import { IcreateEventSchema } from '../validation';
 import { IeventRoleSchema } from './validation';
 import { IeventDetailsSchema } from '../event-info/validation';
 import { LoaderSpinner } from '__components/ui/LoaderSpinner';
-import { getAttributes } from 'ui/src/forms/attributesMap';
+import { getAttributes } from 'ui/src/form-elements/attributesMap';
 import { BiEdit, BiTrash } from 'react-icons/bi';
 
 type Props = {
@@ -184,7 +184,7 @@ export const EventRoles = ({ register, control, errors }: Props) => {
               <div key={option} className='flex gap-2'>
                 <RadioButtonMulti
                   control={control}
-                  register={register}
+                  // register={register}
                   name={option}
                   reg_name={`roles.${saved.length}.${option}`}
                   options={selectOptions}

apps/app/src/app/(protected)/events/create/form/index.tsx

@@ -85,10 +85,6 @@ export const CreateEventForm = () => {
         />
       ),
     },
-    // {
-    //   title: 'Event detailsss',
-    //   element: <TestFieldArray />,
-    // },
     {
       title: 'Event details',
       element: <EventInfo register={register} errors={errors} />,

apps/app/src/app/(public)/(auth)/signup/freelancer/signup-member-right/steps/Step2.tsx

@@ -9,21 +9,31 @@ import { yupResolver } from '@hookform/resolvers/yup';
 import { IStep2Schema, step2Schema } from '../validation';
 import { useRecoilState } from 'recoil';
 import { FormStep2, wizardForm } from '../../../../../../../atoms/signupFreelancerAtom';
-import { auth } from '__firebase/clientApp';
-import { useAuthState } from 'react-firebase-hooks/auth';
 
 type Props = {};
 
+const professionOptions = [
+  {
+    label: 'Model',
+    value: 'Model',
+  },
+  {
+    label: 'Photographer',
+    value: 'Photographer',
+  },
+  {
+    label: 'MC',
+    value: 'MC',
+  },
+];
+
 export const Step2 = ({}: Props) => {
   const [wFormData, setWFormData] = useRecoilState(wizardForm);
-  const [authUser, sadasdsadsad2, asdasdsadsad3] = useAuthState(auth);
 
   const {
     register,
-    watch,
     handleSubmit,
     formState: { errors },
-    // } = useForm<FormStep2>({
   } = useForm<IStep2Schema>({
     mode: 'onTouched',
     resolver: yupResolver(step2Schema),
@@ -37,21 +47,6 @@ export const Step2 = ({}: Props) => {
     }));
   };
 
-  const professionOptions = [
-    {
-      label: 'Model',
-      value: 'Model',
-    },
-    {
-      label: 'Photographer',
-      value: 'Photographer',
-    },
-    {
-      label: 'MC',
-      value: 'MC',
-    },
-  ];
-
   return (
     <form onSubmit={handleSubmit(onSubmit)} className={styles.formSmall}>
       <TextInput

packages/ui/src/ColoredDiv.tsx

@@ -1,5 +1,4 @@
 import { colorMap } from './utils/brandColors';
-
 import { ThemeColors } from 'event-dee-types';
 
 type ColoredDivProps = {
@@ -17,7 +16,7 @@ type ColoredDivProps = {
   // toColor?: string;
 };
 
-// Maybe we can remove w and h and just pack it into divs always?
+/* Maybe we can remove w and h and always wrap in divs instead? */
 
 export const ColoredDiv = ({
   children,

packages/ui/src/ImageWithtext.tsx

@@ -1,43 +1,25 @@
-import React from 'react';
-
+import { ReactNode } from 'react';
 import { RiCheckboxCircleFill } from 'react-icons/ri';
-import { colorMap } from './utils/brandColors';
 
 type Props = {
-  image: React.ReactNode;
+  image: ReactNode;
   name: string;
   title: string;
-  // textLocation: 'left' | 'right';
   className?: string;
   textClassName?: string;
 };
 
-export const ImageWithtext = ({
-  image,
-  name,
-  title,
-  // textLocation = 'left',
-  className,
-  textClassName,
-}: Props) => {
+export const ImageWithtext = ({ image, name, title, className, textClassName }: Props) => {
   return (
     <div className={`${className} relative z-20`}>
-      {/* <div className='relative'> */}
       <div className='rounded-3xl overflow-hidden'>{image}</div>
-      {/* <div className="badge">neutral</div> */}
-
-      {/* <div className='relative'> */}
-      {/* <div className='absolute bottom-0 right-1/2 flex gap-4 bg-primary px-2 py-1 rounded'> */}
-      <div
-        className={`absolute flex gap-4 bg-base-200 px-2 py-1 rounded ${textClassName}`}>
-        {/* className={`absolute bottom-0 left-1/2 flex gap-4 bg-primary px-2 py-1 rounded`}> */}
+      <div className={`absolute flex gap-4 bg-base-200 px-2 py-1 rounded ${textClassName}`}>
         <div className='flex flex-col justify-center'>
           <span className='text-sm font-semibold'>{name}</span>{' '}
           <span className='text-sm whitespace-nowrap'>{title}</span>
         </div>
         <RiCheckboxCircleFill color='green' size={'1rem'} />
       </div>
-      {/* </div> */}
     </div>
   );
 };

packages/ui/src/Stat.tsx

@@ -1,42 +1,17 @@
-import React from 'react'
+type Props = {
+  stat: {
+    title: string;
+    value: string | number;
+  };
+};
 
-type Props = {}
-
-export const Stat = (props: Props) => {
+export const Stat = ({ stat }: Props) => {
   return (
-    <div className="stats shadow">
-
-  <div className="stat">
-    <div className="stat-figure text-primary">
-      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" className="inline-block w-8 h-8 stroke-current"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg>
-    </div>
-    <div className="stat-title">Total Likes</div>
-    <div className="stat-value text-primary">25.6K</div>
-    <div className="stat-desc">21% more than last month</div>
-  </div>
-
-  <div className="stat">
-    <div className="stat-figure text-secondary">
-      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" className="inline-block w-8 h-8 stroke-current"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
-    </div>
-    <div className="stat-title">Page Views</div>
-    <div className="stat-value text-secondary">2.6M</div>
-    <div className="stat-desc">21% more than last month</div>
-  </div>
-
-  <div className="stat">
-    <div className="stat-figure text-secondary">
-      <div className="avatar online">
-        <div className="w-16 rounded-full">
-          <img src="/images/stock/photo-1534528741775-53994a69daeb.jpg" />
-        </div>
-      </div>
+    <div
+      key={stat.title}
+      className='flex flex-col justify-center items-center gap-4 bg-base-100 p-4 rounded-3xl shadow-md'>
+      <p className='stat-title text-sm font-semibold'>{stat.title}</p>
+      <p className='text-3xl stat-value text-neutral'>{stat.value}</p>
     </div>
-    <div className="stat-value">86%</div>
-    <div className="stat-title">Tasks done</div>
-    <div className="stat-desc text-secondary">31 tasks remaining</div>
-  </div>
-
-</div>
-  )
-}
+  );
+};

packages/ui/src/forms/Button.tsx → packages/ui/src/form-elements/Button.tsx

@@ -1,5 +1,5 @@
-import * as React from "react";
 
+/* Not in use, delete */
 export const Button = () => {
   return <button className='btn btn-secondary'>Orange div from ui package</button>;
 };

packages/ui/src/forms/Checkbox.tsx → packages/ui/src/form-elements/Checkbox.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 type Props = {
   name: string;
   register: any;
@@ -12,7 +10,6 @@ export const Checkbox = ({ name, value, label, register, className }: Props) =>
   const _value = value || name;
   const _label = label || _value;
   return (
-    // <label htmlFor={_label} className='label cursor-pointer flex/center gap-2'>
     <label htmlFor={_label} className='label cursor-pointer flex/center gap-2'>
       <input
         {...register(name)}

packages/ui/src/forms/RadioButtonMulti.tsx → packages/ui/src/form-elements/RadioButtonMulti.tsx

@@ -1,20 +1,19 @@
 'use client';
 
 import { useState } from 'react';
-import { Controller, Control, UseFormRegister } from 'react-hook-form';
 import { startCase } from 'lodash';
+import { Controller } from 'react-hook-form';
 
 type Props = {
-  control: Control;
-  register: UseFormRegister<any>;
+  // control: Control;
+  control: any;
   name: string;
   reg_name: string;
   options: string[];
 };
 
 /* Default checked is options[0] */
-export const RadioButtonMulti = ({ control, register, name, reg_name, options }: Props) => {
-  //   const title = name.replace(/_/g, ' ');
+export const RadioButtonMulti = ({ control, name, reg_name, options }: Props) => {
   const title = startCase(name);
 
   const [checked, setChecked] = useState<string>(options[0]);
@@ -28,7 +27,6 @@ export const RadioButtonMulti = ({ control, register, name, reg_name, options }:
             <div key={option} className='form-control'>
               <label className='label gap-2 cursor-pointer'>
                 <Controller
-                  //   name={name}
                   name={reg_name}
                   control={control}
                   defaultValue={option}

packages/ui/src/forms/index.tsx → packages/ui/src/form-elements/index.tsx

@@ -1,12 +1,13 @@
 export * from './Button';
 export * from './FormError';
 
+// export { SearchableSelect } from './old-unused/SearchableSelect';
+// export { SearchableSelect2 } from './old-unused/SearchableSelect2';
+// export { ReactSelect } from './old-unusedReactSelect';
+
 export { TextInput } from './TextInput';
 export { Checkbox } from './Checkbox';
 export { Select } from './Select';
-export { SearchableSelect } from './SearchableSelect';
-export { SearchableSelect2 } from './SearchableSelect2';
-export { ReactSelect } from './ReactSelect';
 export { DatePicker } from './DatePicker';
 export { ActionButton } from './ActionButton';
 export { RadioButtonMulti } from './RadioButtonMulti';