Add TS option to generate templates

rvsia · rvsia · commit 70cf93051ae4 · 2020-06-18T10:45:45.000+02:00
diff --git a/.gitignore b/.gitignore
@@ -43,6 +43,8 @@ jspm_packages/
 # TypeScript v1 declaration files
 typings/
 
+!templates/typings/
+
 # Optional npm cache directory
 .npm
 
diff --git a/scripts/generate-mapper.js b/scripts/generate-mapper.js
@@ -16,11 +16,29 @@ const QUESTIONS = [
         return 'Project name may only include letters or numbers.';
       }
     }
+  },
+  {
+    name: 'typescript',
+    type: 'confirm',
+    message: 'Do you want to attach TypeScript types?'
   }
 ];
 
-inquirer.prompt(QUESTIONS).then(async ({ componentmapper }) => {
-  console.log('Creating ', componentmapper, '-component-mapper');
+inquirer.prompt(QUESTIONS).then(async ({ componentmapper, typescript }) => {
+  const successmessage = `Next steps:
+
+  1. Update styles in "packages/${componentmapper}-component-mapper/demo/index.html"
+  2. Add dependencies in "packages/${componentmapper}-component-mapper/package.json",
+  3. Mark the dependencies as globals/external in "packages/${componentmapper}-component-mapper/rollup.config.js"
+  4. (optional) Transform import to allow threeshake (bundle size optimization) in "packages/common/babel.config.js"
+  5. Have a fun and make some magic! :-)
+
+  Please visit https://data-driven-forms.org for more information.
+
+  (After your mapper is done, consider adding it to the documentation page.)
+  `;
+
+  console.log('Creating ', componentmapper, '-component-mapper', typescript ? ' with TypeScript' : '');
 
   console.log('Copying template');
   await ncp('./templates/component-mapper', `./packages/${componentmapper}-component-mapper`, {}, async () => {
@@ -43,18 +61,36 @@ inquirer.prompt(QUESTIONS).then(async ({ componentmapper }) => {
       console.error('Error occurred:', e);
     }
 
-    console.log(`
-  Next steps:
-
-    1. Update styles in "packages/${componentmapper}-component-mapper/demo/index.html"
-    2. Add dependencies in "packages/${componentmapper}-component-mapper/package.json",
-    3. Mark the dependencies as globals/external in "packages/${componentmapper}-component-mapper/rollup.config.js"
-    4. (optional) Transform import to allow threeshake (bundle size optimization) in "packages/common/babel.config.js"
-    5. Have a fun and make some magic! :-)
+    const optionTypeScriptPath = {
+      files: [path.resolve(__dirname, `../packages/${componentmapper}-component-mapper/package.json`)],
+      from: /\{\{typingspath\}\}/g,
+      to: typescript ? '\n  "typings": "dist/cjs/index.d.ts",' : ''
+    };
+    const optionTypeScriptCommand = {
+      files: [path.resolve(__dirname, `../packages/${componentmapper}-component-mapper/package.json`)],
+      from: /\{\{buildtypingscmd\}\}/g,
+      to: typescript ? ' && yarn build:typings' : ''
+    };
+    const optionTypeScriptScript = {
+      files: [path.resolve(__dirname, `../packages/${componentmapper}-component-mapper/package.json`)],
+      from: /\{\{buildtypingsscript\}\}/g,
+      to: typescript ? '\n    "build:typings": "node ../../scripts/copy-files.js",' : ''
+    };
 
-  Please visit https://data-driven-forms.org for more information.
+    try {
+      await replace(optionTypeScriptPath);
+      await replace(optionTypeScriptCommand);
+      await replace(optionTypeScriptScript);
+    } catch (e) {
+      console.error('Error occurred when replacing typescript variables:', e);
+    }
 
-  (After your mapper is done, consider adding it to the documentation page.)
-    `);
+    if (typescript) {
+      await ncp('./templates/typings', `./packages/${componentmapper}-component-mapper`, {}, () => {
+        console.log(successmessage);
+      });
+    } else {
+      console.log(successmessage);
+    }
   });
 });
diff --git a/templates/component-mapper/package.json b/templates/component-mapper/package.json
@@ -3,17 +3,17 @@
   "version": "0.0.0",
   "description": "{{componentmapper}}-component-mapper for data-driven-forms.",
   "main": "dist/cjs/index.js",
-  "module": "dist/esm/index.js",
+  "module": "dist/esm/index.js",{{typingspath}}
   "files": [
     "dist/"
   ],
   "license": "Apache-2.0",
   "scripts": {
     "start": "webpack-dev-server --env dev --config ./config/webpack.config.js --open --hot",
-    "build": "yarn build:cjs && yarn build:esm && yarn build:umd",
+    "build": "yarn build:cjs && yarn build:esm && yarn build:umd{{buildtypingscmd}}",
     "build:cjs": "BABEL_ENV=cjs rollup -c ./rollup.config.js --format=cjs --environment FORMAT:cjs",
     "build:esm": "BABEL_ENV=esm rollup -c ./rollup.config.js --format=esm --environment FORMAT:esm",
-    "build:umd": "rollup -c ./rollup.config.js --format=umd --environment FORMAT:umd",
+    "build:umd": "rollup -c ./rollup.config.js --format=umd --environment FORMAT:umd",{{buildtypingsscript}}
     "release": "semantic-release"
   },
   "repository": "git@github.com:data-driven-forms/react-forms.git",
diff --git a/templates/component-mapper/src/files/component-mapper.js b/templates/component-mapper/src/files/component-mapper.js
@@ -46,5 +46,9 @@ export const components = {
   Switch,
   PlainText,
   DualListSelect,
-  Slider
+  Slider,
+  FieldArray,
+  SubForm,
+  Wizard,
+  Tabs
 };
diff --git a/templates/typings/src/files/checkbox.d.ts b/templates/typings/src/files/checkbox.d.ts
@@ -0,0 +1,18 @@
+import { UseFieldApiComponentConfig, AnyObject } from "@data-driven-forms/react-form-renderer";
+import { ReactNode } from "react";
+import { FormGroupProps } from "./form-group";
+
+export interface CheckboxOption extends AnyObject {
+  value?: any;
+  label: ReactNode;
+}
+
+interface InternalCheckboxProps extends React.HTMLProps<HTMLInputElement> {
+  options?: CheckboxOption[];
+}
+
+export type CheckboxProps = InternalCheckboxProps & FormGroupProps &  UseFieldApiComponentConfig;
+
+declare const Checkbox: React.ComponentType<CheckboxProps>;
+
+export default Checkbox;
diff --git a/templates/typings/src/files/component-mapper.d.ts b/templates/typings/src/files/component-mapper.d.ts
@@ -0,0 +1,43 @@
+import { ComponentTypes, ComponentMapper } from '@data-driven-forms/react-form-renderer';
+
+interface Components  {
+  TextField: React.ComponentType;
+  Textarea: React.ComponentType;
+  Select: React.ComponentType;
+  Checkbox: React.ComponentType;
+  Radio: React.ComponentType;
+  Switch: React.ComponentType;
+  DatePicker: React.ComponentType;
+  TimePicker: React.ComponentType;
+  PlainText: React.ComponentType;
+  SubForm: React.ComponentType;
+  Wizard: React.ComponentType;
+  DualListSelect: React.ComponentType;
+  Slider: React.ComponentType;
+  FueldArray: React.ComponentType;
+  Tabs: React.ComponentType;
+}
+
+interface componentMapper extends ComponentMapper {
+  [ComponentTypes.TEXT_FIELD]: React.ComponentType;
+  [ComponentTypes.TEXTAREA]: React.ComponentType;
+  [ComponentTypes.SELECT]: React.ComponentType;
+  [ComponentTypes.CHECKBOX]: React.ComponentType;
+  [ComponentTypes.SUB_FORM]: React.ComponentType;
+  [ComponentTypes.RADIO]: React.ComponentType;
+  [ComponentTypes.TABS]: React.ComponentType;
+  [ComponentTypes.DATE_PICKER]: React.ComponentType;
+  [ComponentTypes.TIME_PICKER]: React.ComponentType;
+  [ComponentTypes.SWITCH]: React.ComponentType;
+  [ComponentTypes.PLAIN_TEXT]: React.ComponentType;
+  [ComponentTypes.WIZARD]: React.ComponentType;
+  [ComponentTypes.FIELD_ARRAY]: React.ComponentType;
+  [ComponentTypes.DUAL_LIST_SELECT]: React.ComponentType;
+  [ComponentTypes.SLIDER]: React.ComponentType;
+}
+
+declare const componentMapper: componentMapper;
+
+export const components: Components;
+
+export default componentMapper;
diff --git a/templates/typings/src/files/date-picker.d.ts b/templates/typings/src/files/date-picker.d.ts
@@ -0,0 +1,13 @@
+import { FormGroupProps } from "./form-group";
+import { UseFieldApiComponentConfig } from "@data-driven-forms/react-form-renderer";
+
+interface InternalDatePickerProps extends React.HTMLProps<HTMLInputElement> {
+  isDisabled?: boolean;
+  isReadOnly?: boolean;
+}
+
+export type DatePickerProps = InternalDatePickerProps & FormGroupProps & UseFieldApiComponentConfig;
+
+declare const DatePicker: React.ComponentType<DatePickerProps>;
+
+export default DatePicker;
diff --git a/templates/typings/src/files/dual-list-select.d.ts b/templates/typings/src/files/dual-list-select.d.ts
@@ -0,0 +1,18 @@
+import { FormGroupProps } from "./form-group";
+import { UseFieldApiComponentConfig, AnyObject } from "@data-driven-forms/react-form-renderer";
+import { ReactNode } from "react";
+
+export interface DualListSelectValue extends AnyObject {
+  value: any;
+  label: ReactNode;
+}
+
+interface InternalDualListSelectProps {
+  options: DualListSelectValue[];
+}
+
+export type DualListSelectProps = InternalDualListSelectProps & FormGroupProps & UseFieldApiComponentConfig;
+
+declare const DualListSelect: React.ComponentType<DualListSelectProps>;
+
+export default DualListSelect;
diff --git a/templates/typings/src/files/field-array.d.ts b/templates/typings/src/files/field-array.d.ts
@@ -0,0 +1,10 @@
+import { FieldArrayField } from "@data-driven-forms/react-form-renderer";
+
+export interface FieldArrayProps {
+  fields: FieldArrayField[];
+  itemDefault?: any;
+}
+
+declare const FieldArray: React.ComponentType<FieldArrayProps>;
+
+export default FieldArray;
diff --git a/templates/typings/src/files/form-group.d.ts b/templates/typings/src/files/form-group.d.ts
@@ -0,0 +1,9 @@
+import { UseFieldApiComponentConfig } from "@data-driven-forms/react-form-renderer";
+
+export interface FormGroupInternalProps { }
+
+export type FormGroupProps = FormGroupInternalProps & UseFieldApiComponentConfig;
+
+declare const FormGroup: React.ComponentType<FormGroupProps>;
+
+export default FormGroup;
diff --git a/templates/typings/src/files/form-template.d.ts b/templates/typings/src/files/form-template.d.ts
@@ -0,0 +1,10 @@
+import { ReactNode } from "react";
+
+export interface FormTemplateProps {
+  showFormControls?: boolean;
+  disableSubmit: string[];
+}
+
+declare const FormTemplate: React.ComponentType<FormTemplateProps>;
+
+export default FormTemplate;
diff --git a/templates/typings/src/files/plain-text.d.ts b/templates/typings/src/files/plain-text.d.ts
@@ -0,0 +1,9 @@
+import { ReactNode } from "react";
+
+export interface PlainTextProps {
+  label: ReactNode;
+}
+
+declare const PlainText: React.ComponentType<PlainTextProps>;
+
+export default PlainText;
diff --git a/templates/typings/src/files/radio.d.ts b/templates/typings/src/files/radio.d.ts
@@ -0,0 +1,20 @@
+import { FormGroupProps } from "./form-group";
+import { UseFieldApiComponentConfig, AnyObject } from "@data-driven-forms/react-form-renderer";
+import { ReactNode } from "react";
+
+export interface RadioOption extends AnyObject {
+    value: any;
+    label: ReactNode;
+}
+
+interface InternalRadioProps {
+    idDisabled?: boolean;
+    label?: ReactNode;
+    options: RadioOption[];
+}
+
+export type RadioProps = InternalRadioProps & FormGroupProps & UseFieldApiComponentConfig;
+
+declare const Radio: React.ComponentType<RadioProps>;
+
+export default Radio;
diff --git a/templates/typings/src/files/select.d.ts b/templates/typings/src/files/select.d.ts
@@ -0,0 +1,19 @@
+import { FormGroupProps } from "./form-group";
+import { UseFieldApiComponentConfig, AnyObject } from "@data-driven-forms/react-form-renderer";
+import { ReactNode } from "react";
+
+export interface SelectOption extends AnyObject {
+  value?: any;
+  label: ReactNode;
+}
+
+interface InternalSelectProps extends React.HTMLProps<HTMLSelectElement> {
+  options: SelectOption[];
+  isDisabled?: boolean;
+}
+
+export type SelectProps = InternalSelectProps & FormGroupProps & UseFieldApiComponentConfig;
+
+declare const Select: React.ComponentType<SelectProps>;
+
+export default Select;
diff --git a/templates/typings/src/files/slider.d.ts b/templates/typings/src/files/slider.d.ts
@@ -0,0 +1,13 @@
+import { FormGroupProps } from "./form-group";
+import { UseFieldApiComponentConfig } from "@data-driven-forms/react-form-renderer";
+
+interface InternalSliderProps extends React.HTMLProps<HTMLInputElement> {
+  isReadOnly?: boolean;
+  isDisabled?: boolean;
+}
+
+export type SliderProps = InternalSliderProps & FormGroupProps & UseFieldApiComponentConfig;
+
+declare const Slider: React.ComponentType<SliderProps>;
+
+export default Slider;
diff --git a/templates/typings/src/files/sub-form.d.ts b/templates/typings/src/files/sub-form.d.ts
@@ -0,0 +1,9 @@
+import { Field } from "@data-driven-forms/react-form-renderer";
+
+export interface SubFormProps {
+  fields: Field | Field[];
+}
+
+declare const SubForm: React.ComponentType<SubFormProps>;
+
+export default SubForm;
diff --git a/templates/typings/src/files/switch.d.ts b/templates/typings/src/files/switch.d.ts
@@ -0,0 +1,10 @@
+import { FormGroupProps } from "./form-group";
+import { UseFieldApiComponentConfig } from "@data-driven-forms/react-form-renderer";
+
+interface InternalSwitchProps extends React.HTMLProps<HTMLInputElement> { }
+
+export type SwitchProps = InternalSwitchProps & FormGroupProps & UseFieldApiComponentConfig;
+
+declare const Switch: React.ComponentType<SwitchProps>;
+
+export default Switch;
diff --git a/templates/typings/src/files/tabs.d.ts b/templates/typings/src/files/tabs.d.ts
@@ -0,0 +1,16 @@
+import { ReactNode } from "react";
+import { Field } from "@data-driven-forms/react-form-renderer";
+
+export interface TabField {
+  name: string;
+  title?: ReactNode;
+  fields: Field[];
+}
+
+export interface TabsProps {
+  fields: TabField[];
+}
+
+declare const Tabs: React.ComponentType<TabsProps>;
+
+export default Tabs;
diff --git a/templates/typings/src/files/text-field.d.ts b/templates/typings/src/files/text-field.d.ts
@@ -0,0 +1,13 @@
+import { FormGroupProps } from "./form-group";
+import { UseFieldApiComponentConfig } from "@data-driven-forms/react-form-renderer";
+
+interface InternalTextFieldProps extends React.HTMLProps<HTMLInputElement> {
+    isReadOnly?: boolean;
+    isDisabled?: boolean;
+}
+
+export type TextFieldProps = InternalTextFieldProps & FormGroupProps & UseFieldApiComponentConfig;
+
+declare const TextField: React.ComponentType<TextFieldProps>;
+
+export default TextField;
diff --git a/templates/typings/src/files/textarea.d.ts b/templates/typings/src/files/textarea.d.ts
@@ -0,0 +1,13 @@
+import { FormGroupProps } from "./form-group";
+import { UseFieldApiComponentConfig } from "@data-driven-forms/react-form-renderer";
+
+interface InternalTextareaProps extends React.HTMLProps<HTMLInputElement> {
+    isReadOnly?: boolean;
+    isDisabled?: boolean;
+}
+
+export type TextareaProps = InternalTextareaProps & FormGroupProps & UseFieldApiComponentConfig;
+
+declare const Textarea: React.ComponentType<TextareaProps>;
+
+export default Textarea;
diff --git a/templates/typings/src/files/time-picker.d.ts b/templates/typings/src/files/time-picker.d.ts
@@ -0,0 +1,13 @@
+import { FormGroupProps } from "./form-group";
+import { UseFieldApiComponentConfig } from "@data-driven-forms/react-form-renderer";
+
+interface InternalTimePickerProps extends React.HTMLProps<HTMLInputElement> {
+    isReadOnly?: boolean;
+    isDisabled?: boolean;
+}
+
+export type TimePickerProps = InternalTimePickerProps & FormGroupProps & UseFieldApiComponentConfig;
+
+declare const TimePicker: React.ComponentType<TimePickerProps>;
+
+export default TimePicker;
diff --git a/templates/typings/src/files/wizard.d.ts b/templates/typings/src/files/wizard.d.ts
diff --git a/templates/typings/tsconfig.json b/templates/typings/tsconfig.json
