Merge pull request #563 from rvsia/typingsToTemplate

Add TS option to generate templates

Author: Hyperkid123

.eslintignore

@@ -4,5 +4,5 @@
 /**/coverage
 /**/vendor.js
 /**/*.config.js
-/templates/**/*.*
+/templates/
 packages/**/service-worker.js

.gitignore

@@ -43,6 +43,8 @@ jspm_packages/
 # TypeScript v1 declaration files
 typings/
 
+!templates/typings/
+
 # Optional npm cache directory
 .npm
 

package.json

@@ -37,7 +37,10 @@
     "moduleNameMapper": {
       "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
       "\\.(css|scss)$": "identity-obj-proxy"
-    }
+    },
+    "modulePathIgnorePatterns": [
+      "<rootDir>/templates/"
+    ]
   },
   "devDependencies": {
     "@babel/plugin-transform-runtime": "^7.9.0",

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);
+    }
   });
 });

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",

templates/component-mapper/src/files/component-mapper.js

@@ -46,5 +46,9 @@ export const components = {
   Switch,
   PlainText,
   DualListSelect,
-  Slider
+  Slider,
+  FieldArray,
+  SubForm,
+  Wizard,
+  Tabs
 };

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;

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;

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;

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;