Skip to content

Commit 3bbe216

Browse files
eylonmizeylonmiz
authored
Rename form provider (#50)
* chore(renaming-form-provider): rename FormProvider to TutimProvider * chore(renaming-form-provider): TutimWizard with useFields wrapper * chore(renaming-form-provider): finalazing * chore(renaming-form-provider): cleanup * chore(renaming-form-provider): cleanup
1 parent a60ed5c commit 3bbe216

File tree

26 files changed

+177
-493
lines changed

26 files changed

+177
-493
lines changed

‎README.md‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -78,8 +78,8 @@ npm install @tutim/headless @tutim/fields @tutim/types
7878
### 2\. Render the wizard:
7979

8080
```jsx
81-
import { TutimWizard, defaultFields } from '@tutim/fields';
82-
import { FormProvider } from '@tutim/headless';
81+
import { defaultFields } from '@tutim/fields';
82+
import { TutimWizard, TutimProvider } from '@tutim/headless';
8383

8484
const config = {
8585
// Use https://app.tutim.io to create and manage rich schemas with no-code
@@ -92,9 +92,9 @@ const config = {
9292
const App = () => {
9393
return (
9494
<div className="App">
95-
<FormProvider fieldComponents={defaultFields}>
95+
<TutimProvider fieldComponents={defaultFields}>
9696
<TutimWizard onSubmit={console.log} config={config} />
97-
</FormProvider>
97+
</TutimProvider>
9898
</div>
9999
);
100100
};
@@ -114,11 +114,11 @@ Build your form schema with [Tutim Form Builder](https://app.tutim.io/) or follo
114114
### 5\. Customize components
115115
#### [CustomField](https://docs.tutim.io/react-sdk/customfield)
116116

117-
BYOF - Bring Your Own Field. Use `Field` type to register any type of field. Can be used on `FormProvider` level for global inputs or withing `FieldConfig` for local use cases
117+
BYOF - Bring Your Own Field. Use `Field` type to register any type of field. Can be used on `TutimProvider` level for global inputs or withing `FieldConfig` for local use cases
118118

119119
`CustomField` is a component that allows you to define custom form fields that can be used in your react application. You can use it to render any type of form field that you want, based on the `type` specified in the field configuration.
120120

121-
`CustomField` can be used either globally, by specifying it in the `fieldComponents` object passed to the `FormProvider` component, or locally, by specifying the `Field` prop in the field configuration when creating a form.
121+
`CustomField` can be used either globally, by specifying it in the `fieldComponents` object passed to the `TutimProvider` component, or locally, by specifying the `Field` prop in the field configuration when creating a form.
122122

123123
```tsx
124124
import { Field, FieldConfig } from '@tutim/types';
@@ -142,13 +142,13 @@ export const customFieldConfig: FieldConfig = {
142142
};
143143
```
144144

145-
#### [FormProvider](https://docs.tutim.io/react-sdk/formprovider)
145+
#### [TutimProvider](https://docs.tutim.io/react-sdk/formprovider)
146146

147-
`FormProvider` is a component that allows you to define the form fields that you want to use in your react application. It provides a way to specify the field components that will be used to render the form fields, and allows you to use either the default field components provided by the `@tutim/fields` library, or your own custom field components.
147+
`TutimProvider` is a component that allows you to define the form fields that you want to use in your react application. It provides a way to specify the field components that will be used to render the form fields, and allows you to use either the default field components provided by the `@tutim/fields` library, or your own custom field components.
148148

149149
```tsx
150-
import { FormProvider } from '@tutim/headless';
151-
import { defaultFields, TutimWizard } from '@tutim/fields';
150+
import { TutimWizard, TutimProvider } from '@tutim/headless';
151+
import { defaultFields } from '@tutim/fields';
152152
import { Field, FieldComponents, InputType } from '@tutim/types';
153153

154154
export const CustomField: Field = ({ inputProps, fieldConfig }) => {
@@ -171,9 +171,9 @@ const fieldComponents: FieldComponents = {
171171
const App = (): JSX.Element => {
172172
return (
173173
<div className="App">
174-
<FormProvider fieldComponents={fieldComponents}>
174+
<TutimProvider fieldComponents={fieldComponents}>
175175
<TutimWizard onSubmit={console.log} config={{ fields: [{ key: 'field1' }] }} />
176-
</FormProvider>
176+
</TutimProvider>
177177
</div>
178178
);
179179
};

‎packages/example/src/App.tsx‎

Lines changed: 47 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,58 +1,60 @@
11
import { defaultFields, SelectField } from '@tutim/fields';
2-
import { FormProvider } from '@tutim/headless';
2+
import { TutimProvider } from '@tutim/headless';
33
import React from 'react';
4-
import {
5-
BasicFieldsScheme,
6-
BasicFieldsValues,
7-
InitialFields,
8-
FieldValidations,
9-
DynamicState,
10-
FieldLogicRender,
11-
DesignSystem,
12-
TutimForm,
13-
LayoutConfig,
14-
FormWizard,
15-
ConfigProvider,
16-
SimpleForm,
17-
MultiNested,
18-
DeepNested,
19-
Builder,
20-
ControlledForm,
21-
SchemaServe,
22-
FormMeta,
23-
BasicWizard,
24-
LogicWizard,
25-
} from './Forms';
4+
// import {
5+
// BasicFieldsScheme,
6+
// BasicFieldsValues,
7+
// InitialFields,
8+
// FieldValidations,
9+
// DynamicState,
10+
// FieldLogicRender,
11+
// DesignSystem,
12+
// TutimForm,
13+
// LayoutConfig,
14+
// FormWizard,
15+
// ConfigProvider,
16+
// SimpleForm,
17+
// MultiNested,
18+
// DeepNested,
19+
// Builder,
20+
// ControlledForm,
21+
// SchemaServe,
22+
// FormMeta,
23+
// BasicWizard,
24+
// LogicWizard,
25+
// } from './Forms';
2626
import formConfig from './basic.json';
2727
import { HeadlessWizard } from './Wizards/HeadlessWizard';
28+
import { TutimWizardExample } from './Wizards/TutimWizardExample';
2829

2930
const contextOptions = {
3031
clientId: '2',
3132
forms: { ['form-config-1337']: formConfig },
3233
};
3334

3435
const examples: Record<string, () => JSX.Element> = {
35-
TutimForm: TutimForm,
36-
BasicFieldsScheme: BasicFieldsScheme,
37-
BasicFieldsValues: BasicFieldsValues,
38-
InitialFields: InitialFields,
39-
FieldValidations: FieldValidations,
40-
DynamicState: DynamicState,
41-
FieldLogicRender: FieldLogicRender,
42-
DesignSystem: DesignSystem,
43-
LayoutConfig: LayoutConfig,
44-
FormWizard: FormWizard,
45-
ConfigProvider: ConfigProvider,
46-
SimpleForm: SimpleForm,
47-
MultiNested: MultiNested,
48-
DeepNested: DeepNested,
49-
Builder: Builder,
50-
ControlledForm: ControlledForm,
51-
SchemaServe: SchemaServe,
52-
FormMeta: FormMeta,
53-
BasicWizard: BasicWizard,
54-
LogicWizard: LogicWizard,
36+
// TutimForm,
37+
// BasicFieldsScheme,
38+
// BasicFieldsValues,
39+
// InitialFields,
40+
// FieldValidations,
41+
// DynamicState,
42+
// FieldLogicRender,
43+
// DesignSystem,
44+
// LayoutConfig,
45+
// FormWizard,
46+
// ConfigProvider,
47+
// SimpleForm,
48+
// MultiNested,
49+
// DeepNested,
50+
// Builder,
51+
// ControlledForm,
52+
// SchemaServe,
53+
// FormMeta,
54+
// BasicWizard,
55+
// LogicWizard,
5556
HeadlessWizard,
57+
TutimWizardExample,
5658
};
5759

5860
const options = Object.keys(examples).map((key, ix) => ({ value: key, label: `${ix}) => ${key}` }));
@@ -73,9 +75,9 @@ function App(): React.ReactNode {
7375
}}
7476
/>
7577
</div>
76-
<FormProvider fieldComponents={defaultFields} options={contextOptions}>
78+
<TutimProvider fieldComponents={defaultFields} options={contextOptions}>
7779
{<Example />}
78-
</FormProvider>
80+
</TutimProvider>
7981
</div>
8082
);
8183
}

‎packages/example/src/HookForms/BasicHookForm.tsx‎

Lines changed: 0 additions & 68 deletions
This file was deleted.

‎packages/example/src/Wizards/HeadlessWizard.tsx‎

Lines changed: 8 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,8 @@
11
import React from 'react';
2-
import { WizardProvider, useStep, useWizardContext } from '@tutim/headless';
2+
import { WizardProvider, useStep, useWizard, useWizardContext } from '@tutim/headless';
33
import { FormConfig } from '@tutim/types';
4-
import { MuiTutimWizard, MultiStepWizard } from '@tutim/fields';
54

65
const config: FormConfig = {
7-
logic: {
8-
// webhook: {
9-
// endpoint: 'lala',
10-
// },
11-
},
126
fields: [
137
{
148
key: 'firstName',
@@ -52,28 +46,19 @@ const config: FormConfig = {
5246
};
5347

5448
export const HeadlessWizard = (): JSX.Element => {
55-
return <MuiTutimWizard config={config} onSubmit={console.log} initialValues={{ email: 'one' }} />;
49+
const wizardContext = useWizard({ initialValues: { email: 'one' }, onSubmit: console.log, config });
50+
5651
return (
57-
<div>
58-
{/* <WizardProvider config={config} onSubmit={console.log} initialValues={{ email: 'one' }}>
59-
<ContextedWizard />
60-
</WizardProvider> */}
61-
{/* <WizardProvider config={config}>
62-
<ContextedWizard />
63-
</WizardProvider> */}
64-
</div>
52+
<WizardProvider wizardContext={wizardContext}>
53+
<ContextedWizard />
54+
</WizardProvider>
6555
);
6656
};
6757

6858
const ContextedWizard = () => {
6959
const wizard = useWizardContext();
7060

71-
return (
72-
<div>
73-
<ContextedStep key={`step${wizard.activeStep}`} />
74-
<div>hey</div>
75-
</div>
76-
);
61+
return <ContextedStep key={`step${wizard.activeStep}`} />;
7762
};
7863

7964
const ContextedStep = () => {
@@ -83,7 +68,7 @@ const ContextedStep = () => {
8368
<div>
8469
<p>my step is {context.activeStep}</p>
8570
{step.form.fields}
86-
<button onClick={step.goBack} disabled={!step.form.formState.isValid}>
71+
<button onClick={step.goBack} disabled={!step.form.formState.isValid || step.isFirstStep}>
8772
Go Back
8873
</button>
8974
<button onClick={step.goNext} disabled={!step.form.formState.isValid}>

‎packages/example/src/Wizards/TutimWizardExample.tsx‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import { TutimWizard } from '@tutim/headless';
2+
import { FormConfig } from '@tutim/types';
3+
4+
const config: FormConfig = {
5+
logic: {
6+
// webhook: {
7+
// endpoint: 'lala',
8+
// },
9+
},
10+
fields: [
11+
{
12+
key: 'firstName',
13+
label: 'First Name',
14+
type: 'text',
15+
isRequired: true,
16+
tooltip: 'A tooltip',
17+
helperText: 'A helper text',
18+
placeholder: 'A placeholder',
19+
},
20+
{
21+
key: 'lastName',
22+
isRequired: true,
23+
label: 'Last Name',
24+
type: 'text',
25+
},
26+
{ key: 'email', isRequired: true, label: 'Email', type: 'text' },
27+
{ key: 'phone', label: 'Phone', type: 'number' },
28+
{ key: 'additional', label: 'additional', type: 'text', isRequired: true },
29+
],
30+
wizard: {
31+
steps: [
32+
{
33+
label: 'Basic',
34+
fields: ['firstName', 'lastName'],
35+
},
36+
{
37+
label: 'Contact',
38+
fields: ['email', 'phone'],
39+
},
40+
{
41+
label: 'Additional',
42+
fields: ['additional'],
43+
},
44+
],
45+
orientation: 'vertical',
46+
},
47+
meta: {
48+
title: 'Basic Wizard',
49+
},
50+
};
51+
52+
export const TutimWizardExample = (): JSX.Element => {
53+
return <TutimWizard config={config} onSubmit={console.log} initialValues={{ email: 'one' }} />;
54+
};

‎packages/fields/package.json‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,8 +27,7 @@
2727
"react": "^18.2.0",
2828
"react-dom": "^18.2.0",
2929
"react-hook-form": "^7.41.0",
30-
"react-json-view": "^1.21.3",
31-
"react-use-wizard": "^2.2.1"
30+
"react-json-view": "^1.21.3"
3231
},
3332
"devDependencies": {
3433
"@babel/core": "^7.20.7",

‎packages/fields/src/Fields/DefaultFields.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { FieldComponents, InputType } from '@tutim/types';
1+
import { FieldComponents, InputType, WrapperType } from '@tutim/types';
22
import { SelectField } from './SelectField';
33
import { TextField } from './TextField';
44
import { RadioField } from './RadioField';
@@ -13,6 +13,8 @@ import { NumberField } from './NumberField';
1313
import { PasswordField } from './PasswordField';
1414
import { TextAreaField } from './TextAreaField';
1515
import { MultiCheckboxField } from './MultiChecboxField';
16+
import { MuiTutimWizard } from '../Wizards';
17+
import { SinglePageForm } from '../Forms';
1618

1719
export const defaultFields: FieldComponents = {
1820
[InputType.Select]: SelectField,
@@ -29,4 +31,6 @@ export const defaultFields: FieldComponents = {
2931
[InputType.MultiSelect]: MultiSelectField,
3032
[InputType.MultiCheckbox]: MultiCheckboxField,
3133
[InputType.Array]: FieldArray,
34+
[WrapperType.MultiStepWizard]: MuiTutimWizard as any, //TODO: fix this hack,
35+
[WrapperType.SingleStepForm]: SinglePageForm as any, //TODO: fix this hack,
3236
};

0 commit comments

Comments
 (0)