From 1a358c747cefb8ad61578b3c1dc5938a2e0df536 Mon Sep 17 00:00:00 2001
From: Tamara Seban <tseban@g.jct.ac.il>
Date: Wed, 5 Jul 2023 14:59:16 +0300
Subject: [PATCH 1/3] Updating SelectField to be using shadcn-ui instead of
 materialUi

---
 .../src/exports/Fields/SelectField.tsx        | 47 ++++++++-----------
 1 file changed, 20 insertions(+), 27 deletions(-)

diff --git a/packages/shadcn-ui/src/exports/Fields/SelectField.tsx b/packages/shadcn-ui/src/exports/Fields/SelectField.tsx
index 54e2418..1ed2483 100644
--- a/packages/shadcn-ui/src/exports/Fields/SelectField.tsx
+++ b/packages/shadcn-ui/src/exports/Fields/SelectField.tsx
@@ -1,35 +1,28 @@
-import { Option, Field } from '@tutim/types';
-import { TextField as MuiTextField, MenuItem as MuiMenuItem } from '@mui/material';
+import { Field } from '@tutim/types';
 import { FieldWrapper } from './FieldWrapper';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '../../components/ui/select';
 
-export const SelectField: Field = ({ fieldConfig, inputProps: { value, onChange }, fieldState }) => {
-  const { key, isRequired, isDisabled, options = [], placeholder } = fieldConfig;
-
-  const childOptions = options.map((option: Option) => (
-    <MuiMenuItem disabled={option.disabled} key={option.value} value={option.value}>
-      {option.label}
-    </MuiMenuItem>
-  ));
 
+export const SelectField: Field = ({ fieldConfig, inputProps: fieldState }) => { 
+  fieldConfig;
   return (
     <FieldWrapper fieldConfig={fieldConfig} fieldState={fieldState}>
-      <MuiTextField
-        select
-        onChange={onChange}
-        value={value || ''}
-        InputLabelProps={{ shrink: true }}
-        InputProps={{
-          placeholder: placeholder,
-        }}
-        SelectProps={{ native: false }}
-        fullWidth
-        size="small"
-        key={key}
-        required={isRequired}
-        disabled={isDisabled}
-      >
-        {childOptions}
-      </MuiTextField>
+      <Select>
+  <SelectTrigger className="w-[180px]">
+    <SelectValue placeholder="Editor" />
+  </SelectTrigger>
+  <SelectContent>
+    <SelectItem value="Administrator">Administrator</SelectItem>
+    <SelectItem value="Viewer" disabled>Viewer</SelectItem>
+    <SelectItem value="Editor">Editor</SelectItem>
+  </SelectContent>
+</Select>
     </FieldWrapper>
   );
 };

From 125308625354bf027ad46defc7c3408c622c0eee Mon Sep 17 00:00:00 2001
From: Tamara Seban <tseban@g.jct.ac.il>
Date: Wed, 12 Jul 2023 12:07:28 +0300
Subject: [PATCH 2/3] Updating SelectField to be using shadcn-ui instead of
 materialUi

---
 packages/example/src/main.tsx                 |  2 +-
 packages/fields/src/Fields/SelectField.tsx    |  2 +-
 .../src/exports/Fields/SelectField.tsx        | 35 ++++++++++++-------
 3 files changed, 24 insertions(+), 15 deletions(-)

diff --git a/packages/example/src/main.tsx b/packages/example/src/main.tsx
index 2a74c20..3987306 100644
--- a/packages/example/src/main.tsx
+++ b/packages/example/src/main.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-// import App from './App';
+ //import App from './App';
 import App from './ShadcnApp';
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(<App />);
diff --git a/packages/fields/src/Fields/SelectField.tsx b/packages/fields/src/Fields/SelectField.tsx
index ef6800a..04e7f6b 100644
--- a/packages/fields/src/Fields/SelectField.tsx
+++ b/packages/fields/src/Fields/SelectField.tsx
@@ -4,7 +4,7 @@ import { FieldWrapper } from './utils';
 
 export const SelectField: Field = ({ fieldConfig, inputProps: { value, onChange }, fieldState }) => {
   const { key, isRequired, isDisabled, options = [], placeholder } = fieldConfig;
-
+             
   const childOptions = options.map((option: Option) => (
     <MuiMenuItem disabled={option.disabled} key={option.value} value={option.value}>
       {option.label}
diff --git a/packages/shadcn-ui/src/exports/Fields/SelectField.tsx b/packages/shadcn-ui/src/exports/Fields/SelectField.tsx
index 1ed2483..82820d3 100644
--- a/packages/shadcn-ui/src/exports/Fields/SelectField.tsx
+++ b/packages/shadcn-ui/src/exports/Fields/SelectField.tsx
@@ -1,4 +1,4 @@
-import { Field } from '@tutim/types';
+import { Option, Field } from '@tutim/types';
 import { FieldWrapper } from './FieldWrapper';
 import {
   Select,
@@ -6,23 +6,32 @@ import {
   SelectItem,
   SelectTrigger,
   SelectValue,
+  SelectGroup
 } from '../../components/ui/select';
 
+export const SelectField: Field = ({ fieldConfig, inputProps: { value, onChange }, fieldState }) => {
+  
+  const { key, isRequired, isDisabled, options = [] } = fieldConfig;
+
+
+  const childOptions = options.map((option: Option) => (
+     <SelectItem value={ String(option.value)} key={option.value} disabled={option.disabled}>{option.label}</SelectItem>
+  ));
+
 
-export const SelectField: Field = ({ fieldConfig, inputProps: fieldState }) => { 
-  fieldConfig;
   return (
     <FieldWrapper fieldConfig={fieldConfig} fieldState={fieldState}>
-      <Select>
-  <SelectTrigger className="w-[180px]">
-    <SelectValue placeholder="Editor" />
-  </SelectTrigger>
-  <SelectContent>
-    <SelectItem value="Administrator">Administrator</SelectItem>
-    <SelectItem value="Viewer" disabled>Viewer</SelectItem>
-    <SelectItem value="Editor">Editor</SelectItem>
-  </SelectContent>
-</Select>
+      <div  className="mt-2" > 
+        <Select key={key} required ={isRequired} disabled={isDisabled} onValueChange ={onChange}>
+      <SelectTrigger className="w-full">
+        <SelectValue placeholder={value || ''} />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectGroup>
+          {childOptions}
+        </SelectGroup>
+      </SelectContent>
+    </Select></div>  
     </FieldWrapper>
   );
 };

From 1ad4a6491ba96e496e1145669ff967f833d1e94f Mon Sep 17 00:00:00 2001
From: Tamara Seban <tseban@g.jct.ac.il>
Date: Sun, 16 Jul 2023 16:40:06 +0300
Subject: [PATCH 3/3] Updating TextAreaField to be in shadcn-ui instead of Mui

---
 packages/example/src/Wizards/AllOfExamples.tsx  | 12 ++++++++++++
 .../src/exports/Fields/TextAreaField.tsx        | 17 ++++++++++++-----
 2 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/packages/example/src/Wizards/AllOfExamples.tsx b/packages/example/src/Wizards/AllOfExamples.tsx
index 02ee4af..ed7e3ce 100644
--- a/packages/example/src/Wizards/AllOfExamples.tsx
+++ b/packages/example/src/Wizards/AllOfExamples.tsx
@@ -8,7 +8,18 @@ const config: FormConfig = {
             key: 'firstName',
             label: 'TextField',
             type: 'text',
+           
+            
         },
+        {
+            key: 'description',
+            label: 'TextAreaField',
+            type: 'text-area',
+            placeholder: 'Type your text here',
+            
+        },
+
+
         {
             key: 'lastName',
             label: 'TextField',
@@ -175,6 +186,7 @@ const config: FormConfig = {
                 label: 'Basic',
                 fields: [
                     'firstName',
+                    'description',
                     'lastName',
                     'dataPicker',
                     'agree',
diff --git a/packages/shadcn-ui/src/exports/Fields/TextAreaField.tsx b/packages/shadcn-ui/src/exports/Fields/TextAreaField.tsx
index 6ee3f54..4f780b6 100644
--- a/packages/shadcn-ui/src/exports/Fields/TextAreaField.tsx
+++ b/packages/shadcn-ui/src/exports/Fields/TextAreaField.tsx
@@ -1,18 +1,23 @@
 import React from 'react';
 import { Field } from '@tutim/types';
-import { TextField as MuiTextField } from '@mui/material';
+//import { TextField as MuiTextField } from '@mui/material';
 import { FieldWrapper } from './FieldWrapper';
+import { Textarea } from "../../components/ui/textarea"
+
+
 
 export const TextAreaField: Field = ({ fieldConfig, inputProps: { value, onChange }, fieldState }) => {
   const { key, isRequired, isDisabled, placeholder } = fieldConfig;
 
-  const onInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    onChange(event.currentTarget.value);
+  const onInputChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+    const { value } = event.currentTarget;
+    onChange(value);
   };
 
+
   return (
     <FieldWrapper fieldConfig={fieldConfig} fieldState={fieldState}>
-      <MuiTextField
+      {/* <MuiTextField
         multiline
         onChange={onInputChange}
         value={value || ''}
@@ -25,7 +30,9 @@ export const TextAreaField: Field = ({ fieldConfig, inputProps: { value, onChang
         key={key}
         required={isRequired}
         disabled={isDisabled}
-      />
+      /> */}
+      <Textarea placeholder ={ placeholder} disabled={isDisabled}  required={isRequired} 
+      onChange={e=>onInputChange(e)}    value={value || ''} rows={4} key={key}/>
     </FieldWrapper>
   );
 };