convert_style(multi-chackbox,multu-selsct,multi-text, password and nu…

packages/example/src/ShadcnApp.tsx

@@ -6,17 +6,19 @@ import formConfig from './basic.json';
 
 import { HeadlessWizard } from './Wizards/HeadlessWizard';
 import { AllOfExamples } from './Wizards/AllOfExamples';
+import { ShaniForm } from './Wizards/ShaniForm';
 
 import { defaultFields, SelectField } from '@tutim/shadcn-ui';
 
 const contextOptions = {
-  clientId: '2',
+  clientId: '3',
   forms: { ['form-config-1337']: formConfig },
 };
 
 const examples: Record<string, () => JSX.Element> = {
   HeadlessWizard,
   AllOfExamples,
+  ShaniForm,
 };
 
 const options = Object.keys(examples).map((key, ix) => ({ value: key, label: `${ix}) => ${key}` }));

packages/example/src/ShaniApp.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { BrowserRouter } from 'react-router-dom';
+import { TutimProvider } from '@tutim/headless';
+import '@tutim/shadcn-ui/dist/output.css';
+import formConfig from './basic.json';
+
+import { HeadlessWizard } from './Wizards/HeadlessWizard';
+import { AllOfExamples } from './Wizards/AllOfExamples';
+import { ShaniForm } from './Wizards/ShaniForm';
+
+import { defaultFields, SelectField } from '@tutim/shadcn-ui';
+import { defaultFields as defaultFieldsMatirial, SelectField as SelectFieldMatirial } from '@tutim/fields'; //material-ui
+
+const contextOptions = {
+  clientId: '3',
+  forms: { ['form-config-1337']: formConfig },
+};
+
+const examples: Record<string, () => JSX.Element> = {
+  HeadlessWizard,
+  AllOfExamples,
+  ShaniForm,
+};
+
+const options = Object.keys(examples).map((key, ix) => ({ value: key, label: `${ix}) => ${key}` }));
+
+function App(): React.ReactNode {
+  const [exampleKey, setExample] = React.useState(options[options.length - 1].value);
+  const Example = examples[exampleKey];
+
+  return (
+    <BrowserRouter>
+      <div>
+        <div style={{ padding: '30px', borderBottom: '4px solid green', marginBottom: '30px' }}>
+          <h3>left side:Shadcn UI | right side:MatiralUI</h3>
+          <SelectField
+            fieldConfig={{ key: 'select', label: 'Example', type: 'select', options }}
+            inputProps={{
+              value: exampleKey,
+              onChange: (e: any) => setExample(e.target.value),
+            }}
+          />
+        </div>
+        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gridGap: '20px' }}>
+          <TutimProvider fieldComponents={defaultFields} options={contextOptions}>
+            {<Example />}
+          </TutimProvider>
+
+          <TutimProvider fieldComponents={defaultFieldsMatirial} options={contextOptions}>
+            {<Example />}
+          </TutimProvider>
+        </div>
+      </div>
+    </BrowserRouter>
+  );
+}
+
+export default App;

packages/example/src/Wizards/ShaniForm.tsx

@@ -0,0 +1,95 @@
+import React from 'react';
+import { FormConfig, Field } from '@tutim/types';
+import { TutimWizard } from '@tutim/headless';
+import { SimpleButton } from '@tutim/shadcn-ui';
+
+const config: FormConfig = {
+  fields: [
+    {
+      key: 'MultiCheckboxField',
+      label: 'Multi-Checkbox',
+      type: 'multi-checkbox',
+      options: [
+        { value: '1', label: '1' },
+        { value: '2', label: '2', disabled: true },
+      ],
+      custom: { orientation: 'vertical' },
+    },
+    {
+      key: 'MultiSelectField',
+      label: 'TextField',
+      type: 'multi-select',
+      options: [
+        { value: '1', label: '1' },
+        { value: '2', label: '2', disabled: true },
+        { value: '3', label: '3' },
+        { value: '11', label: '11' },
+        { value: '112', label: '112' },
+        { value: '22', label: '22' },
+        { value: '2222', label: '2222' },
+      ],
+    },
+    {
+      key: 'MultiTextField',
+      label: 'TextField',
+      type: 'multi-text',
+      options: [
+        { value: '1', label: '1' },
+        { value: '2', label: '2', disabled: true },
+      ],
+    },
+    {
+      key: 'NumberField',
+      label: 'TextField',
+      type: 'number',
+    },
+    {
+      key: 'PasswordField',
+      label: 'TextField',
+      type: 'password',
+    },
+  ],
+  wizard: {
+    steps: [
+      {
+        label: 'Basic',
+        fields: ['MultiCheckboxField', 'MultiSelectField', 'MultiTextField', 'NumberField', 'PasswordField'],
+      },
+    ],
+    orientation: 'vertical',
+  },
+  meta: {
+    title: 'Example Title',
+  },
+};
+
+const CustomField: Field = ({ inputProps }) => {
+  const { value, onChange } = inputProps;
+  const onClick = () => onChange(value + 2);
+  return <SimpleButton label={`Click Me: ${value}`} onClick={onClick} />;
+};
+
+const customField = {
+  key: 'clicker',
+  label: 'Click Me',
+  type: 'custom',
+  defaultValue: 0,
+  Field: CustomField,
+};
+
+const newConfig = { ...config, fields: [...config.fields, customField] };
+
+const initialValues = {
+  firstName: 'sami',
+  agree: true,
+  enable: true,
+  hosting: 'cloud',
+};
+
+export const ShaniForm = (): JSX.Element => {
+  const onSubmit = (data: any) => {
+    alert(JSON.stringify(data));
+  };
+
+  return <TutimWizard onSubmit={onSubmit} config={newConfig} initialValues={initialValues} />;
+};

packages/example/src/main.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 // import App from './App';
-import App from './ShadcnApp';
+// import App from './ShadcnApp';
+import App from './ShaniApp';
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(<App />);

packages/shadcn-ui/src/exports/Fields/MultiChecboxField.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Field } from '@tutim/types';
-import { Checkbox, FormControlLabel, Grid, FormGroup } from '@mui/material';
+import { Checkbox } from '../../components';
 import { FieldWrapper } from './FieldWrapper';
 
 const handleChange = (optionValue, currentValue, onChange) => {
@@ -17,27 +17,29 @@ export const MultiCheckboxField: Field = ({ fieldConfig, inputProps: { value = [
   const isHorizontal = custom?.orientation === 'vertical' ? false : true;
 
   const childOptions = options.map((option) => (
-    <Grid item key={option.value}>
-      <FormControlLabel
-        control={
-          <Checkbox
-            checked={value.includes(option.value)}
-            onChange={() => handleChange(option.value, value, onChange)}
-            disabled={isDisabled || option.disabled}
-          />
-        }
-        label={option.label}
+    <div key={option.value} className="flex justify-start items-center px-2">
+      <Checkbox
+        checked={value.includes(option.value)}
+        onClick={() => handleChange(option.value, value, onChange)}
+        disabled={isDisabled || option.disabled}
+        className="m-1 border-black"
       />
-    </Grid>
+      <label
+        htmlFor="terms"
+        className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+      >
+        {option.label}
+      </label>
+    </div>
   ));
 
   return (
     <FieldWrapper fieldConfig={fieldConfig} fieldState={fieldState}>
-      <FormGroup row={isHorizontal}>
-        <Grid container direction={isHorizontal ? 'row' : 'column'} alignItems={isHorizontal ? 'center' : 'flex-start'}>
-          {childOptions}
-        </Grid>
-      </FormGroup>
+      <div
+        className={`flex ${isHorizontal ? 'flex-row' : 'flex-col'} ${isHorizontal ? 'items-center' : 'items-start'}`}
+      >
+        {childOptions}
+      </div>
     </FieldWrapper>
   );
 };