Finish docs for now

docs/data/toolpad/core/components/crud/CrudCreate.js

@@ -0,0 +1,135 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { createTheme } from '@mui/material/styles';
+import PersonIcon from '@mui/icons-material/Person';
+import { AppProvider } from '@toolpad/core/AppProvider';
+import { DashboardLayout } from '@toolpad/core/DashboardLayout';
+import { PageContainer } from '@toolpad/core/PageContainer';
+import { Create } from '@toolpad/core/Crud';
+import { useDemoRouter } from '@toolpad/core/internal';
+
+const NAVIGATION = [
+  {
+    segment: 'people',
+    title: 'People',
+    icon: <PersonIcon />,
+    pattern: 'people{/:personId}*',
+  },
+];
+
+const demoTheme = createTheme({
+  cssVariables: {
+    colorSchemeSelector: 'data-toolpad-color-scheme',
+  },
+  colorSchemes: { light: true, dark: true },
+  breakpoints: {
+    values: {
+      xs: 0,
+      sm: 600,
+      md: 600,
+      lg: 1200,
+      xl: 1536,
+    },
+  },
+});
+
+let people = [
+  { id: 1, lastName: 'Snow', firstName: 'Jon', age: 14 },
+  { id: 2, lastName: 'Lannister', firstName: 'Cersei', age: 31 },
+  { id: 3, lastName: 'Lannister', firstName: 'Jaime', age: 31 },
+  { id: 4, lastName: 'Stark', firstName: 'Arya', age: 11 },
+  { id: 5, lastName: 'Clifford', firstName: 'Ferrara', age: 44 },
+  { id: 6, lastName: 'Frances', firstName: 'Rossini', age: 36 },
+  { id: 7, lastName: 'Roxie', firstName: 'Harvey', age: 65 },
+];
+
+export const peopleDataSource = {
+  fields: [
+    { field: 'id', headerName: 'ID' },
+    {
+      field: 'firstName',
+      headerName: 'First name',
+    },
+    {
+      field: 'lastName',
+      headerName: 'Last name',
+    },
+    {
+      field: 'age',
+      headerName: 'Age',
+      type: 'number',
+    },
+  ],
+  createOne: (data) => {
+    return new Promise((resolve) => {
+      setTimeout(() => {
+        const newPerson = { id: people.length + 1, ...data };
+
+        people = [...people, newPerson];
+
+        resolve(newPerson);
+      }, 750);
+    });
+  },
+  validate: (formValues) => {
+    const errors = {};
+
+    if (!formValues.firstName) {
+      errors.firstName = 'First name is required';
+    }
+    if (!formValues.lastName) {
+      errors.lastName = 'Last name is required';
+    }
+    if (!formValues.age) {
+      errors.age = 'Age is required';
+    } else if (formValues.age <= 0) {
+      errors.age = 'Must be at least 1 year old';
+    }
+
+    return errors;
+  },
+};
+
+function CrudCreate(props) {
+  const { window } = props;
+
+  const router = useDemoRouter('/people/new');
+
+  // Remove this const when copying and pasting into your project.
+  const demoWindow = window !== undefined ? window() : undefined;
+
+  const handleSubmitSuccess = React.useCallback(() => {
+    console.log('Person created successfully');
+  }, []);
+
+  return (
+    <AppProvider
+      navigation={NAVIGATION}
+      router={router}
+      theme={demoTheme}
+      window={demoWindow}
+    >
+      <DashboardLayout defaultSidebarCollapsed>
+        <PageContainer title="New Person">
+          {/* preview-start */}
+          <Create
+            dataSource={peopleDataSource}
+            initialValues={{ age: 18 }}
+            onSubmitSuccess={handleSubmitSuccess}
+          />
+          {/* preview-end */}
+        </PageContainer>
+      </DashboardLayout>
+    </AppProvider>
+  );
+}
+
+CrudCreate.propTypes = {
+  /**
+   * Injected by the documentation to work in an iframe.
+   * Remove this when copying and pasting into your project.
+   */
+  window: PropTypes.func,
+};
+
+export default CrudCreate;

docs/data/toolpad/core/components/crud/CrudCreate.tsx

@@ -0,0 +1,140 @@
+import * as React from 'react';
+import { createTheme } from '@mui/material/styles';
+import PersonIcon from '@mui/icons-material/Person';
+import { AppProvider, type Navigation } from '@toolpad/core/AppProvider';
+import { DashboardLayout } from '@toolpad/core/DashboardLayout';
+import { PageContainer } from '@toolpad/core/PageContainer';
+import { DataModel, DataSource, Create } from '@toolpad/core/Crud';
+import { useDemoRouter } from '@toolpad/core/internal';
+
+const NAVIGATION: Navigation = [
+  {
+    segment: 'people',
+    title: 'People',
+    icon: <PersonIcon />,
+    pattern: 'people{/:personId}*',
+  },
+];
+
+const demoTheme = createTheme({
+  cssVariables: {
+    colorSchemeSelector: 'data-toolpad-color-scheme',
+  },
+  colorSchemes: { light: true, dark: true },
+  breakpoints: {
+    values: {
+      xs: 0,
+      sm: 600,
+      md: 600,
+      lg: 1200,
+      xl: 1536,
+    },
+  },
+});
+
+export interface Person extends DataModel {
+  id: number;
+  firstName: string;
+  lastName: string;
+  age: number;
+}
+
+let people: Person[] = [
+  { id: 1, lastName: 'Snow', firstName: 'Jon', age: 14 },
+  { id: 2, lastName: 'Lannister', firstName: 'Cersei', age: 31 },
+  { id: 3, lastName: 'Lannister', firstName: 'Jaime', age: 31 },
+  { id: 4, lastName: 'Stark', firstName: 'Arya', age: 11 },
+  { id: 5, lastName: 'Clifford', firstName: 'Ferrara', age: 44 },
+  { id: 6, lastName: 'Frances', firstName: 'Rossini', age: 36 },
+  { id: 7, lastName: 'Roxie', firstName: 'Harvey', age: 65 },
+];
+
+export const peopleDataSource: DataSource<Person> &
+  Required<Pick<DataSource<Person>, 'createOne'>> = {
+  fields: [
+    { field: 'id', headerName: 'ID' },
+    {
+      field: 'firstName',
+      headerName: 'First name',
+    },
+    {
+      field: 'lastName',
+      headerName: 'Last name',
+    },
+    {
+      field: 'age',
+      headerName: 'Age',
+      type: 'number',
+    },
+  ],
+  createOne: (data) => {
+    return new Promise<Person>((resolve) => {
+      setTimeout(() => {
+        const newPerson = { id: people.length + 1, ...data } as Person;
+
+        people = [...people, newPerson];
+
+        resolve(newPerson);
+      }, 750);
+    });
+  },
+  validate: (formValues) => {
+    const errors: Record<keyof Person, string> = {};
+
+    if (!formValues.firstName) {
+      errors.firstName = 'First name is required';
+    }
+    if (!formValues.lastName) {
+      errors.lastName = 'Last name is required';
+    }
+    if (!formValues.age) {
+      errors.age = 'Age is required';
+    } else if (formValues.age <= 0) {
+      errors.age = 'Must be at least 1 year old';
+    }
+
+    return errors;
+  },
+};
+
+interface DemoProps {
+  /**
+   * Injected by the documentation to work in an iframe.
+   * Remove this when copying and pasting into your project.
+   */
+  window?: () => Window;
+}
+
+export default function CrudCreate(props: DemoProps) {
+  const { window } = props;
+
+  const router = useDemoRouter('/people/new');
+
+  // Remove this const when copying and pasting into your project.
+  const demoWindow = window !== undefined ? window() : undefined;
+
+  const handleSubmitSuccess = React.useCallback(() => {
+    console.log('Person created successfully');
+  }, []);
+
+  return (
+    <AppProvider
+      navigation={NAVIGATION}
+      router={router}
+      theme={demoTheme}
+      window={demoWindow}
+    >
+      <DashboardLayout defaultSidebarCollapsed>
+        <PageContainer title="New Person">
+          {/* preview-start */}
+          <Create<Person>
+            dataSource={peopleDataSource}
+            initialValues={{ age: 18 }}
+            onSubmitSuccess={handleSubmitSuccess}
+          />
+          {/* preview-end */}
+        </PageContainer>
+      </DashboardLayout>
+    </AppProvider>
+  );
+}

docs/data/toolpad/core/components/crud/CrudCreate.tsx.preview

@@ -0,0 +1,5 @@
+<Create<Person>
+  dataSource={peopleDataSource}
+  initialValues={{ age: 18 }}
+  onSubmitSuccess={handleSubmitSuccess}
+/>