Add list, datepicker and textfield component guides

docs/data/pages.ts

@@ -100,10 +100,13 @@ const pages: MuiPage[] = [
     pathname: '/toolpad/components',
     children: [
       { pathname: '/toolpad/components/button' },
-      {
-        pathname: '/toolpad/components/datagrid',
-        title: 'Data Grid',
-      },
+      { pathname: '/toolpad/components/data-grid',
+            title: 'DataGrid', },
+      { pathname: '/toolpad/components/list' },
+      { pathname: '/toolpad/components/date-picker',
+            title: 'DatePicker', },
+      { pathname: '/toolpad/components/text-field',
+            title: 'TextField', },
     ],
   },
   {

docs/data/toolpad/components/datepicker/DatePicker.js

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { DatePicker } from '@mui/toolpad-components';
+
+const TOOLPAD_PROPS = {
+  label: 'Enter date',
+  size: 'small',
+};
+
+export default function BasicDatepicker() {
+  return <DatePicker {...TOOLPAD_PROPS} />;
+}

docs/data/toolpad/components/datepicker/DatePickerDisabled.js

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { DatePicker } from '@mui/toolpad-components';
+import { Stack } from '@mui/material';
+
+const TOOLPAD_PROPS1 = {
+  variant: 'outlined',
+  size: 'small',
+  disabled: true,
+  label: 'Disabled',
+};
+
+const TOOLPAD_PROPS2 = {
+  variant: 'outlined',
+  label: 'Active',
+  size: 'small',
+  disabled: false,
+};
+
+export default function BasicButton() {
+  return (
+    <Stack spacing={2} direction="row" alignItems="center">
+      <DatePicker {...TOOLPAD_PROPS1} />
+      <DatePicker {...TOOLPAD_PROPS2} />
+    </Stack>
+  );
+}

docs/data/toolpad/components/datepicker/DatePickerFormat.js

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { DatePicker } from '@mui/toolpad-components';
+import { Stack } from '@mui/material';
+
+const TOOLPAD_PROPS1 = {
+  size: 'small',
+  variant: 'outlined',
+  label: 'MM/dd/yyyy',
+  format: 'MM/dd/yyyy',
+};
+
+const TOOLPAD_PROPS2 = {
+  size: 'small',
+  variant: 'outlined',
+  label: 'MMMM-YY',
+  format: 'MMMM-YY',
+  // defaultValue: '2017-05-24',
+};
+
+export default function BasicButton() {
+  return (
+    <Stack spacing={2} direction="row" alignItems="center">
+      <DatePicker {...TOOLPAD_PROPS1} />
+      <DatePicker {...TOOLPAD_PROPS2} />
+    </Stack>
+  );
+}

docs/data/toolpad/components/datepicker/DatePickerSize.js

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { DatePicker } from '@mui/toolpad-components';
+import { Stack } from '@mui/material';
+
+const TOOLPAD_PROPS1 = {
+  size: 'small',
+  variant: 'outlined',
+  label: 'Small',
+};
+
+const TOOLPAD_PROPS2 = {
+  size: 'medium',
+  variant: 'outlined',
+  label: 'Medium',
+};
+
+export default function BasicButton() {
+  return (
+    <Stack spacing={2} direction="row" alignItems="center">
+      <DatePicker {...TOOLPAD_PROPS1} />
+      <DatePicker {...TOOLPAD_PROPS2} />
+    </Stack>
+  );
+}

docs/data/toolpad/components/datepicker/DatePickerVariant.js

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { DatePicker } from '@mui/toolpad-components';
+import { Stack } from '@mui/material';
+
+const TOOLPAD_PROPS1 = {
+  size: 'small',
+  variant: 'outlined',
+  label: 'Outlined',
+};
+
+const TOOLPAD_PROPS2 = {
+  size: 'small',
+  variant: 'filled',
+  label: 'Filled',
+};
+
+const TOOLPAD_PROPS3 = {
+  size: 'small',
+  variant: 'standard',
+  label: 'Standard',
+};
+
+export default function BasicButton() {
+  return (
+    <Stack spacing={2} direction="row" alignItems="center">
+      <DatePicker {...TOOLPAD_PROPS1} />
+      <DatePicker {...TOOLPAD_PROPS2} />
+      <DatePicker {...TOOLPAD_PROPS3} />
+    </Stack>
+  );
+}

docs/data/toolpad/components/datepicker/date-picker.md

@@ -0,0 +1,87 @@
+# DatePicker
+
+<p class="description">Learn about the datepicker component and its usage in Toolpad.</p>
+
+## Demo
+
+DatePicker is an input component. It takes user input and provides the value for further usage on the page.
+
+{{"demo": "DatePicker.js", "hideToolbar": true}}
+
+## Usage
+
+Below props makes it usable:
+
+### format
+
+The [format](https://day.js.org/docs/en/display/format) of the date in the UI. The value for the bindings will always be in the YYYY-MM-DD format. Leave empty to let the end-user locale define the format.
+
+{{"demo": "DatePickerFormat.js", "hideToolbar": true}}
+
+### value
+
+The current selected date. It shows the format in which it is being provided to the page: YYYY-MM-DD.
+
+### defaultValue
+
+Allows setting a default value. Example:
+
+<video controls width="100%" height="auto" style="contain" alt="button-onclick-js-expression">
+  <source src="/static/toolpad/docs/components/datepicker/datepicker-defaultValue.mp4" type="video/mp4">
+  Your browser does not support the video tag.
+</video>
+
+### name
+
+A name is needed when a textfield is part of a form component. It is used to show validation errors.
+
+## Appearance
+
+The DatePicker component has some appearance related props supported in Toolpad. Let's look at each of these below:
+
+### label
+
+A label that describes the content of the datepicker. Eg: Enter date.
+
+### variant
+
+The variant property supports three different options: outlined (default), filled and standard. Outlined is for low-emphasis while Filled is a high-emphasis input. Standard is used for less-pronounced actions that ensure user remains focused on the main content.
+
+{{"demo": "DatePickerVariant.js", "hideToolbar": true}}
+
+### size
+
+The size property supports two options: small (default) and medium.
+
+{{"demo": "DatePickerSize.js", "hideToolbar": true}}
+
+### fullWidth
+
+This boolean defines if the component should take the full width of the page.
+
+### disabled
+
+Disabled property shows the state of the component so that end user is aware that can't interact with the component.
+
+{{"demo": "DatePickerDisabled.js", "hideToolbar": true}}
+
+## Validation
+
+### isRequired
+
+isRequired is useful when the action can't be perfomed without a user provided date.
+
+<video controls width="100%" height="auto" style="contain" alt="button-onclick-js-expression">
+  <source src="/static/toolpad/docs/components/datepicker/datepicker-validation.mp4" type="video/mp4">
+  Your browser does not support the video tag.
+</video>
+
+### isInvalid
+
+If isInvalid is set to true it will show an error no matter what the input is.
+
+## API
+
+See the documentation below for a complete reference to all props available to the datepicker component in Toolpad.
+
+- [`<datepicker />`](/toolpad/reference/components/date-picker/#properties)

docs/data/toolpad/components/list/List.js

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { List } from '@mui/toolpad-components';
+
+const TOOLPAD_PROPS = {
+  itemCount: 2,
+};
+
+export default function BasicList() {
+  return <List {...TOOLPAD_PROPS} />;
+}

docs/data/toolpad/components/list/list.md

@@ -0,0 +1,38 @@
+# List
+
+<p class="description">Learn about the list component and its usage in Toolpad.</p>
+
+## Demo
+
+List makes it easy to configure a recurring pattern of data.
+
+<!---
+Add demo
+-->
+
+## Usage
+
+A List is an essential component in an application. It had one key property that makes it usable:
+
+### itemCount
+
+It is the number of occurences that the list is supposed to render.
+
+<video controls width="100%" height="auto" style="contain" alt="button-onclick-js-expression">
+  <source src="/static/toolpad/docs/components/list/list.mp4" type="video/mp4">
+  Your browser does not support the video tag.
+</video>
+
+## Appearance
+
+The List component acts as a mini canvas for other components. Each component has its own styling. The first occurence decides the appearance for the entire list.
+
+### disablePadding
+
+There is a predefined padding that can be enabled or disabled. It is a boolean.
+
+## API
+
+See the documentation below for a complete reference to all props available to the list component in Toolpad.
+
+- [`<list />`](/toolpad/reference/components/list/#properties)

docs/data/toolpad/components/textfield/TextField.js

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { TextField } from '@mui/toolpad-components';
+
+const TOOLPAD_PROPS = {
+  label: 'Enter name',
+  size: 'small',
+  placeholder: 'This is a placeholder',
+};
+
+export default function BasicDatepicker() {
+  return <TextField {...TOOLPAD_PROPS} />;
+}

docs/data/toolpad/components/textfield/TextFieldDisabled.js

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { TextField } from '@mui/toolpad-components';
+import { Stack } from '@mui/material';
+
+const TOOLPAD_PROPS1 = {
+  variant: 'outlined',
+  size: 'small',
+  disabled: true,
+  label: 'Disabled',
+};
+
+const TOOLPAD_PROPS2 = {
+  variant: 'outlined',
+  label: 'Active',
+  size: 'small',
+  disabled: false,
+};
+
+export default function BasicButton() {
+  return (
+    <Stack spacing={2} direction="row" alignItems="center">
+      <TextField {...TOOLPAD_PROPS1} />
+      <TextField {...TOOLPAD_PROPS2} />
+    </Stack>
+  );
+}

docs/data/toolpad/components/textfield/TextFieldSize.js

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { TextField } from '@mui/toolpad-components';
+import { Stack } from '@mui/material';
+
+const TOOLPAD_PROPS1 = {
+  size: 'small',
+  variant: 'outlined',
+  label: 'Small',
+};
+
+const TOOLPAD_PROPS2 = {
+  size: 'medium',
+  variant: 'outlined',
+  label: 'Medium',
+};
+
+export default function BasicButton() {
+  return (
+    <Stack spacing={2} direction="row" alignItems="center">
+      <TextField {...TOOLPAD_PROPS1} />
+      <TextField {...TOOLPAD_PROPS2} />
+    </Stack>
+  );
+}

docs/data/toolpad/components/textfield/TextFieldVariant.js

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { TextField } from '@mui/toolpad-components';
+import { Stack } from '@mui/material';
+
+const TOOLPAD_PROPS1 = {
+  size: 'small',
+  variant: 'outlined',
+  label: 'Outlined',
+};
+
+const TOOLPAD_PROPS2 = {
+  size: 'small',
+  variant: 'filled',
+  label: 'Filled',
+};
+
+const TOOLPAD_PROPS3 = {
+  size: 'small',
+  variant: 'standard',
+  label: 'Standard',
+};
+
+export default function BasicButton() {
+  return (
+    <Stack spacing={2} direction="row" alignItems="center">
+      <TextField {...TOOLPAD_PROPS1} />
+      <TextField {...TOOLPAD_PROPS2} />
+      <TextField {...TOOLPAD_PROPS3} />
+    </Stack>
+  );
+}