Add tabs and container components

packages/toolpad-app/src/toolpad/AppEditor/PageEditor/ComponentCatalog/ComponentCatalog.tsx

@@ -20,7 +20,6 @@ interface FutureComponentSpec {
 const FUTURE_COMPONENTS = new Map<string, FutureComponentSpec>([
   ['Form', { url: 'https://github.com/mui/mui-toolpad/issues/749', displayName: 'Form' }],
   ['Card', { url: 'https://github.com/mui/mui-toolpad/issues/748', displayName: 'Card' }],
-  ['Tabs', { url: 'https://github.com/mui/mui-toolpad/issues/747', displayName: 'Tabs' }],
   ['Slider', { url: 'https://github.com/mui/mui-toolpad/issues/746', displayName: 'Slider' }],
   ['Switch', { url: 'https://github.com/mui/mui-toolpad/issues/745', displayName: 'Switch' }],
   ['Radio', { url: 'https://github.com/mui/mui-toolpad/issues/744', displayName: 'Radio' }],

packages/toolpad-app/src/toolpad/AppEditor/PageEditor/ComponentCatalog/ComponentCatalogItem.tsx

@@ -18,6 +18,7 @@ import CheckBoxIcon from '@mui/icons-material/CheckBox';
 import DashboardCustomizeSharpIcon from '@mui/icons-material/DashboardCustomizeSharp';
 import AddIcon from '@mui/icons-material/Add';
 import NotesIcon from '@mui/icons-material/Notes';
+import AutoAwesomeMosaicIcon from '@mui/icons-material/AutoAwesomeMosaic';
 import { SvgIconProps } from '@mui/material/SvgIcon';
 
 const iconMap = new Map<string, React.ComponentType<SvgIconProps>>([
@@ -38,6 +39,8 @@ const iconMap = new Map<string, React.ComponentType<SvgIconProps>>([
   ['Checkbox', CheckBoxIcon],
   ['CodeComponent', DashboardCustomizeSharpIcon],
   ['CreateNew', AddIcon],
+  ['Tabs', TabIcon],
+  ['Container', AutoAwesomeMosaicIcon],
 ]);
 
 type ComponentItemKind = 'future' | 'builtIn' | 'create' | 'custom';

packages/toolpad-app/src/toolpadComponents/index.tsx

@@ -36,6 +36,8 @@ const INTERNAL_COMPONENTS = new Map<string, ToolpadComponentDefinition>([
   ['Text', { displayName: 'Text', builtIn: 'Text' }],
   ['Select', { displayName: 'Select', builtIn: 'Select' }],
   ['Paper', { displayName: 'Paper', builtIn: 'Paper' }],
+  ['Tabs', { displayName: 'Tabs', builtIn: 'Tabs' }],
+  ['Container', { displayName: 'Container', builtIn: 'Container' }],
 ]);
 
 function createCodeComponent(domNode: appDom.CodeComponentNode): ToolpadComponentDefinition {

packages/toolpad-components/src/Container.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { Container as MUIContainer, ContainerProps } from '@mui/material';
+import { createComponent } from '@mui/toolpad-core';
+import { SX_PROP_HELPER_TEXT } from './constants';
+
+interface Props extends ContainerProps {
+  visible: boolean;
+}
+
+function Container({ children, visible, sx, ...props }: Props) {
+  return visible ? (
+    <MUIContainer disableGutters sx={sx} {...props}>
+      {children}
+    </MUIContainer>
+  ) : null;
+}
+
+export default createComponent(Container, {
+  argTypes: {
+    children: {
+      typeDef: { type: 'element' },
+      control: { type: 'layoutSlot' },
+    },
+    visible: {
+      typeDef: { type: 'boolean' },
+      defaultValue: true,
+      helperText: 'Control whether container element is visible.',
+    },
+    sx: {
+      helperText: SX_PROP_HELPER_TEXT,
+      typeDef: { type: 'object' },
+      defaultValue: { padding: 1, border: 'solid 1px' },
+    },
+  },
+});

packages/toolpad-components/src/Tabs.tsx

@@ -0,0 +1,60 @@
+import * as React from 'react';
+import { Tabs as MUITabs, Tab } from '@mui/material';
+import { createComponent } from '@mui/toolpad-core';
+
+interface TabProps {
+  title: string;
+  name: string;
+}
+
+interface Props {
+  active: string;
+  onChange: (value: number) => void;
+  tabs: TabProps[];
+  defaultValue: string;
+}
+
+function Tabs({ active, onChange, tabs, defaultValue }: Props) {
+  return (
+    <MUITabs
+      value={active || defaultValue}
+      onChange={(event, value) => {
+        onChange(value);
+      }}
+    >
+      {tabs.map(({ title, name }) => (
+        <Tab label={title} value={name} key={name} />
+      ))}
+    </MUITabs>
+  );
+}
+
+export default createComponent(Tabs, {
+  layoutDirection: 'horizontal',
+  argTypes: {
+    active: {
+      typeDef: { type: 'string' },
+      onChangeProp: 'onChange',
+      defaultValueProp: 'defaultValue',
+      helperText: 'Currently active tab.',
+    },
+    defaultValue: {
+      label: 'Default active tab',
+      typeDef: { type: 'string' },
+      defaultValue: 'tab-one',
+      helperText: 'The tab which will be active by default.',
+    },
+    tabs: {
+      typeDef: { type: 'array' },
+      defaultValue: [
+        {
+          title: 'Tab one',
+          name: 'tab-one',
+        },
+        { title: 'Tab two', name: 'tab-two' },
+        { title: 'Tab three', name: 'tab-three' },
+      ],
+      helperText: 'Tabs configuration object.',
+    },
+  },
+});

packages/toolpad-components/src/index.tsx

@@ -20,5 +20,9 @@ export { default as Image } from './Image.js';
 
 export { default as DatePicker } from './DatePicker.js';
 
+export { default as Tabs } from './Tabs.js';
+
+export { default as Container } from './Container.js';
+
 export { CUSTOM_COLUMN_TYPES, NUMBER_FORMAT_PRESETS, inferColumns, parseColumns } from './DataGrid';
 export type { SerializableGridColumn, SerializableGridColumns, NumberFormat } from './DataGrid';