Add tabs and container components (#1549)

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';