[docs] Add API of picker components (mui#24497)

andriy-shymkiv · Jan 25, 2021 · 9b51547 · 9b51547
1 parent 841e805
commit 9b51547
Show file tree

Hide file tree

Showing 57 changed files with 2,413 additions and 110 deletions.
diff --git a/.stylelintrc.js b/.stylelintrc.js
@@ -1,6 +1,11 @@
 module.exports = {
   processors: ['stylelint-processor-styled-components'],
   extends: 'stylelint-config-standard',
+  ignoreFiles: [
+    // TypeScript declaration files contain no styles.
+    // Stylelint is also reporting parseError on `docs/types/react-docgen.d.ts`.
+    '**/*.d.ts',
+  ],
   rules: {
     'value-no-vendor-prefix': true,
     'property-no-vendor-prefix': true,

diff --git a/docs/pages/api-docs/desktop-time-picker.js b/docs/pages/api-docs/desktop-time-picker.js
@@ -0,0 +1,23 @@
+import * as React from 'react';
+import ApiPage from 'docs/src/modules/components/ApiPage';
+import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
+import jsonPageContent from './desktop-time-picker.json';
+
+export default function Page(props) {
+  const { descriptions, pageContent } = props;
+  return <ApiPage descriptions={descriptions} pageContent={pageContent} />;
+}
+
+Page.getInitialProps = () => {
+  const req = require.context(
+    'docs/translations/api-docs/desktop-time-picker',
+    false,
+    /desktop-time-picker.*.json$/,
+  );
+  const descriptions = mapApiPageTranslations(req);
+
+  return {
+    descriptions,
+    pageContent: jsonPageContent,
+  };
+};
diff --git a/docs/pages/api-docs/desktop-time-picker.json b/docs/pages/api-docs/desktop-time-picker.json
@@ -0,0 +1,70 @@
+{
+  "props": {
+    "onChange": { "type": { "name": "func" }, "required": true },
+    "renderInput": { "type": { "name": "func" }, "required": true },
+    "acceptRegex": { "type": { "name": "instanceOf", "description": "RegExp" } },
+    "allowKeyboardControl": { "type": { "name": "bool" } },
+    "ampm": { "type": { "name": "bool" } },
+    "ampmInClock": { "type": { "name": "bool" } },
+    "className": { "type": { "name": "string" } },
+    "dateAdapter": { "type": { "name": "object" } },
+    "disableCloseOnSelect": { "type": { "name": "bool" } },
+    "disabled": { "type": { "name": "bool" } },
+    "disableIgnoringDatePartForTimeValidation": { "type": { "name": "bool" } },
+    "disableMaskedInput": { "type": { "name": "bool" } },
+    "disableOpenPicker": { "type": { "name": "bool" } },
+    "getClockLabelText": { "type": { "name": "func" } },
+    "getOpenDialogAriaText": { "type": { "name": "func" } },
+    "InputAdornmentProps": { "type": { "name": "object" } },
+    "inputFormat": { "type": { "name": "string" } },
+    "mask": { "type": { "name": "string" } },
+    "minutesStep": { "type": { "name": "number" } },
+    "onAccept": { "type": { "name": "func" } },
+    "onClose": { "type": { "name": "func" } },
+    "onError": { "type": { "name": "func" } },
+    "onOpen": { "type": { "name": "func" } },
+    "open": { "type": { "name": "bool" } },
+    "OpenPickerButtonProps": { "type": { "name": "object" } },
+    "openPickerIcon": { "type": { "name": "node" } },
+    "openTo": {
+      "type": {
+        "name": "enum",
+        "description": "'date'<br>&#124;&nbsp;'hours'<br>&#124;&nbsp;'minutes'<br>&#124;&nbsp;'month'<br>&#124;&nbsp;'seconds'<br>&#124;&nbsp;'year'"
+      }
+    },
+    "orientation": {
+      "type": { "name": "enum", "description": "'landscape'<br>&#124;&nbsp;'portrait'" }
+    },
+    "PopperProps": { "type": { "name": "object" } },
+    "readOnly": { "type": { "name": "bool" } },
+    "rifmFormatter": { "type": { "name": "func" } },
+    "shouldDisableTime": { "type": { "name": "func" } },
+    "showToolbar": { "type": { "name": "bool" } },
+    "ToolbarComponent": { "type": { "name": "elementType" } },
+    "toolbarFormat": { "type": { "name": "string" } },
+    "toolbarPlaceholder": { "type": { "name": "node" } },
+    "toolbarTitle": { "type": { "name": "node" } },
+    "TransitionComponent": { "type": { "name": "elementType" } },
+    "value": {
+      "type": {
+        "name": "union",
+        "description": "any<br>&#124;&nbsp;Date<br>&#124;&nbsp;number<br>&#124;&nbsp;string"
+      }
+    },
+    "views": {
+      "type": {
+        "name": "arrayOf",
+        "description": "Array&lt;'hours'<br>&#124;&nbsp;'minutes'<br>&#124;&nbsp;'seconds'&gt;"
+      }
+    }
+  },
+  "name": "DesktopTimePicker",
+  "styles": { "classes": [], "globalClasses": {}, "name": null },
+  "spread": false,
+  "forwardsRefTo": "HTMLInputElement",
+  "filename": "/packages/material-ui-lab/src/DesktopTimePicker/DesktopTimePicker.tsx",
+  "inheritance": null,
+  "demos": "",
+  "styledComponent": true,
+  "cssComponent": false
+}
diff --git a/docs/pages/api-docs/mobile-time-picker.js b/docs/pages/api-docs/mobile-time-picker.js
@@ -0,0 +1,23 @@
+import * as React from 'react';
+import ApiPage from 'docs/src/modules/components/ApiPage';
+import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
+import jsonPageContent from './mobile-time-picker.json';
+
+export default function Page(props) {
+  const { descriptions, pageContent } = props;
+  return <ApiPage descriptions={descriptions} pageContent={pageContent} />;
+}
+
+Page.getInitialProps = () => {
+  const req = require.context(
+    'docs/translations/api-docs/mobile-time-picker',
+    false,
+    /mobile-time-picker.*.json$/,
+  );
+  const descriptions = mapApiPageTranslations(req);
+
+  return {
+    descriptions,
+    pageContent: jsonPageContent,
+  };
+};
diff --git a/docs/pages/api-docs/mobile-time-picker.json b/docs/pages/api-docs/mobile-time-picker.json
@@ -0,0 +1,75 @@
+{
+  "props": {
+    "onChange": { "type": { "name": "func" }, "required": true },
+    "renderInput": { "type": { "name": "func" }, "required": true },
+    "acceptRegex": { "type": { "name": "instanceOf", "description": "RegExp" } },
+    "allowKeyboardControl": { "type": { "name": "bool" } },
+    "ampm": { "type": { "name": "bool" } },
+    "ampmInClock": { "type": { "name": "bool" } },
+    "cancelText": { "type": { "name": "node" } },
+    "className": { "type": { "name": "string" } },
+    "clearable": { "type": { "name": "bool" } },
+    "clearText": { "type": { "name": "node" } },
+    "dateAdapter": { "type": { "name": "object" } },
+    "DialogProps": { "type": { "name": "object" } },
+    "disableCloseOnSelect": { "type": { "name": "bool" } },
+    "disabled": { "type": { "name": "bool" } },
+    "disableIgnoringDatePartForTimeValidation": { "type": { "name": "bool" } },
+    "disableMaskedInput": { "type": { "name": "bool" } },
+    "disableOpenPicker": { "type": { "name": "bool" } },
+    "getClockLabelText": { "type": { "name": "func" } },
+    "getOpenDialogAriaText": { "type": { "name": "func" } },
+    "InputAdornmentProps": { "type": { "name": "object" } },
+    "inputFormat": { "type": { "name": "string" } },
+    "mask": { "type": { "name": "string" } },
+    "minutesStep": { "type": { "name": "number" } },
+    "okText": { "type": { "name": "node" } },
+    "onAccept": { "type": { "name": "func" } },
+    "onClose": { "type": { "name": "func" } },
+    "onError": { "type": { "name": "func" } },
+    "onOpen": { "type": { "name": "func" } },
+    "open": { "type": { "name": "bool" } },
+    "OpenPickerButtonProps": { "type": { "name": "object" } },
+    "openPickerIcon": { "type": { "name": "node" } },
+    "openTo": {
+      "type": {
+        "name": "enum",
+        "description": "'date'<br>&#124;&nbsp;'hours'<br>&#124;&nbsp;'minutes'<br>&#124;&nbsp;'month'<br>&#124;&nbsp;'seconds'<br>&#124;&nbsp;'year'"
+      }
+    },
+    "orientation": {
+      "type": { "name": "enum", "description": "'landscape'<br>&#124;&nbsp;'portrait'" }
+    },
+    "readOnly": { "type": { "name": "bool" } },
+    "rifmFormatter": { "type": { "name": "func" } },
+    "shouldDisableTime": { "type": { "name": "func" } },
+    "showTodayButton": { "type": { "name": "bool" } },
+    "showToolbar": { "type": { "name": "bool" } },
+    "todayText": { "type": { "name": "node" } },
+    "ToolbarComponent": { "type": { "name": "elementType" } },
+    "toolbarFormat": { "type": { "name": "string" } },
+    "toolbarPlaceholder": { "type": { "name": "node" } },
+    "toolbarTitle": { "type": { "name": "node" } },
+    "value": {
+      "type": {
+        "name": "union",
+        "description": "any<br>&#124;&nbsp;Date<br>&#124;&nbsp;number<br>&#124;&nbsp;string"
+      }
+    },
+    "views": {
+      "type": {
+        "name": "arrayOf",
+        "description": "Array&lt;'hours'<br>&#124;&nbsp;'minutes'<br>&#124;&nbsp;'seconds'&gt;"
+      }
+    }
+  },
+  "name": "MobileTimePicker",
+  "styles": { "classes": [], "globalClasses": {}, "name": null },
+  "spread": false,
+  "forwardsRefTo": "HTMLInputElement",
+  "filename": "/packages/material-ui-lab/src/MobileTimePicker/MobileTimePicker.tsx",
+  "inheritance": null,
+  "demos": "",
+  "styledComponent": true,
+  "cssComponent": false
+}
diff --git a/docs/pages/api-docs/static-time-picker.js b/docs/pages/api-docs/static-time-picker.js
@@ -0,0 +1,23 @@
+import * as React from 'react';
+import ApiPage from 'docs/src/modules/components/ApiPage';
+import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
+import jsonPageContent from './static-time-picker.json';
+
+export default function Page(props) {
+  const { descriptions, pageContent } = props;
+  return <ApiPage descriptions={descriptions} pageContent={pageContent} />;
+}
+
+Page.getInitialProps = () => {
+  const req = require.context(
+    'docs/translations/api-docs/static-time-picker',
+    false,
+    /static-time-picker.*.json$/,
+  );
+  const descriptions = mapApiPageTranslations(req);
+
+  return {
+    descriptions,
+    pageContent: jsonPageContent,
+  };
+};
diff --git a/docs/pages/api-docs/static-time-picker.json b/docs/pages/api-docs/static-time-picker.json
@@ -0,0 +1,71 @@
+{
+  "props": {
+    "onChange": { "type": { "name": "func" }, "required": true },
+    "renderInput": { "type": { "name": "func" }, "required": true },
+    "acceptRegex": { "type": { "name": "instanceOf", "description": "RegExp" } },
+    "allowKeyboardControl": { "type": { "name": "bool" } },
+    "ampm": { "type": { "name": "bool" } },
+    "ampmInClock": { "type": { "name": "bool" } },
+    "className": { "type": { "name": "string" } },
+    "dateAdapter": { "type": { "name": "object" } },
+    "disableCloseOnSelect": { "type": { "name": "bool" } },
+    "disabled": { "type": { "name": "bool" } },
+    "disableIgnoringDatePartForTimeValidation": { "type": { "name": "bool" } },
+    "disableMaskedInput": { "type": { "name": "bool" } },
+    "disableOpenPicker": { "type": { "name": "bool" } },
+    "displayStaticWrapperAs": {
+      "type": { "name": "enum", "description": "'desktop'<br>&#124;&nbsp;'mobile'" }
+    },
+    "getClockLabelText": { "type": { "name": "func" } },
+    "getOpenDialogAriaText": { "type": { "name": "func" } },
+    "InputAdornmentProps": { "type": { "name": "object" } },
+    "inputFormat": { "type": { "name": "string" } },
+    "mask": { "type": { "name": "string" } },
+    "minutesStep": { "type": { "name": "number" } },
+    "onAccept": { "type": { "name": "func" } },
+    "onClose": { "type": { "name": "func" } },
+    "onError": { "type": { "name": "func" } },
+    "onOpen": { "type": { "name": "func" } },
+    "open": { "type": { "name": "bool" } },
+    "OpenPickerButtonProps": { "type": { "name": "object" } },
+    "openPickerIcon": { "type": { "name": "node" } },
+    "openTo": {
+      "type": {
+        "name": "enum",
+        "description": "'date'<br>&#124;&nbsp;'hours'<br>&#124;&nbsp;'minutes'<br>&#124;&nbsp;'month'<br>&#124;&nbsp;'seconds'<br>&#124;&nbsp;'year'"
+      }
+    },
+    "orientation": {
+      "type": { "name": "enum", "description": "'landscape'<br>&#124;&nbsp;'portrait'" }
+    },
+    "readOnly": { "type": { "name": "bool" } },
+    "rifmFormatter": { "type": { "name": "func" } },
+    "shouldDisableTime": { "type": { "name": "func" } },
+    "showToolbar": { "type": { "name": "bool" } },
+    "ToolbarComponent": { "type": { "name": "elementType" } },
+    "toolbarFormat": { "type": { "name": "string" } },
+    "toolbarPlaceholder": { "type": { "name": "node" } },
+    "toolbarTitle": { "type": { "name": "node" } },
+    "value": {
+      "type": {
+        "name": "union",
+        "description": "any<br>&#124;&nbsp;Date<br>&#124;&nbsp;number<br>&#124;&nbsp;string"
+      }
+    },
+    "views": {
+      "type": {
+        "name": "arrayOf",
+        "description": "Array&lt;'hours'<br>&#124;&nbsp;'minutes'<br>&#124;&nbsp;'seconds'&gt;"
+      }
+    }
+  },
+  "name": "StaticTimePicker",
+  "styles": { "classes": [], "globalClasses": {}, "name": null },
+  "spread": false,
+  "forwardsRefTo": "undefined",
+  "filename": "/packages/material-ui-lab/src/StaticTimePicker/StaticTimePicker.tsx",
+  "inheritance": null,
+  "demos": "",
+  "styledComponent": true,
+  "cssComponent": false
+}
diff --git a/docs/pages/api-docs/time-picker.js b/docs/pages/api-docs/time-picker.js
@@ -0,0 +1,23 @@
+import * as React from 'react';
+import ApiPage from 'docs/src/modules/components/ApiPage';
+import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
+import jsonPageContent from './time-picker.json';
+
+export default function Page(props) {
+  const { descriptions, pageContent } = props;
+  return <ApiPage descriptions={descriptions} pageContent={pageContent} />;
+}
+
+Page.getInitialProps = () => {
+  const req = require.context(
+    'docs/translations/api-docs/time-picker',
+    false,
+    /time-picker.*.json$/,
+  );
+  const descriptions = mapApiPageTranslations(req);
+
+  return {
+    descriptions,
+    pageContent: jsonPageContent,
+  };
+};