[Stack][joy] Add new component (#33800)

packages/mui-joy/src/Stack/Stack.test.js

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { describeConformance, createRenderer } from 'test/utils';
+import { ThemeProvider } from '@mui/joy/styles';
+import Stack, { stackClasses as classes } from '@mui/joy/Stack';
+
+describe('Joy <Stack />', () => {
+  const { render } = createRenderer();
+
+  const defaultProps = {
+    children: <div />,
+  };
+
+  describeConformance(<Stack {...defaultProps} />, () => ({
+    classes,
+    inheritComponent: 'div',
+    render,
+    ThemeProvider,
+    refInstanceof: window.HTMLElement,
+    muiName: 'JoyStack',
+    skip: ['componentsProp', 'rootClass'],
+    testVariantProps: { direction: 'row' },
+  }));
+});

packages/mui-joy/src/Stack/Stack.tsx

@@ -0,0 +1,61 @@
+import { createStack } from '@mui/system';
+import PropTypes from 'prop-types';
+import { OverridableComponent } from '@mui/types';
+import { StackTypeMap } from './StackProps';
+import styled from '../styles/styled';
+import { useThemeProps } from '../styles';
+
+const Stack = createStack({
+  componentName: 'JoyStack',
+  createStyledComponent: styled('div', {
+    name: 'JoyStack',
+    slot: 'Root',
+    overridesResolver: (props, styles) => styles.root,
+  }),
+  useThemeProps: (inProps) => useThemeProps({ props: inProps, name: 'JoyStack' }),
+}) as OverridableComponent<StackTypeMap>;
+
+Stack.propTypes /* remove-proptypes */ = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * The content of the component.
+   */
+  children: PropTypes.node,
+  /**
+   * Defines the `flex-direction` style property.
+   * It is applied for all screen sizes.
+   * @default 'column'
+   */
+  direction: PropTypes.oneOfType([
+    PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row']),
+    PropTypes.arrayOf(PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row'])),
+    PropTypes.object,
+  ]),
+  /**
+   * Add an element between each child.
+   */
+  divider: PropTypes.node,
+  /**
+   * Defines the space between immediate children.
+   * @default 0
+   */
+  spacing: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),
+    PropTypes.number,
+    PropTypes.object,
+    PropTypes.string,
+  ]),
+  /**
+   * The system prop, which allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])),
+    PropTypes.func,
+    PropTypes.object,
+  ]),
+} as any;
+
+export default Stack;

packages/mui-joy/src/Stack/StackProps.ts

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { OverrideProps } from '@mui/types';
+import { ResponsiveStyleValue } from '@mui/system';
+import { SxProps } from '../styles/types';
+
+export type StackSlot = 'root';
+
+export interface StackTypeMap<P = {}, D extends React.ElementType = 'div'> {
+  props: P & {
+    /**
+     * The content of the component.
+     */
+    children?: React.ReactNode;
+    /**
+     * Defines the `flex-direction` style property.
+     * It is applied for all screen sizes.
+     * @default 'column'
+     */
+    direction?: ResponsiveStyleValue<'row' | 'row-reverse' | 'column' | 'column-reverse'>;
+    /**
+     * Defines the space between immediate children.
+     * @default 0
+     */
+    spacing?: ResponsiveStyleValue<number | string>;
+    /**
+     * Add an element between each child.
+     */
+    divider?: React.ReactNode;
+    /**
+     * The system prop, which allows defining system overrides as well as additional CSS styles.
+     */
+    sx?: SxProps;
+  };
+  defaultComponent: D;
+}
+
+export type StackProps<
+  D extends React.ElementType = StackTypeMap['defaultComponent'],
+  P = {},
+> = OverrideProps<StackTypeMap<P, D>, D>;

packages/mui-joy/src/Stack/index.ts

@@ -0,0 +1,5 @@
+export { default } from './Stack';
+export * from './StackProps';
+
+export { default as stackClasses } from './stackClasses';
+export * from './stackClasses';

packages/mui-joy/src/Stack/stackClasses.ts

@@ -0,0 +1,13 @@
+import { StackClasses } from '@mui/system';
+import { generateUtilityClass, generateUtilityClasses } from '../className';
+
+export type { StackClassKey } from '@mui/system';
+export type { StackClasses };
+
+export function getStackUtilityClass(slot: string): string {
+  return generateUtilityClass('JoyStack', slot);
+}
+
+const stackClasses: StackClasses = generateUtilityClasses('JoyStack', ['root']);
+
+export default stackClasses;

packages/mui-joy/src/index.ts

@@ -72,6 +72,7 @@ export * from './Box';
 
 export { default as Container } from './Container';
 export * from './Container';
+
 export { default as Badge } from './Badge';
 export * from './Badge';
 
@@ -93,6 +94,9 @@ export * from './MenuItem';
 export { default as MenuList } from './MenuList';
 export * from './MenuList';
 
+export { default as Stack } from './Stack';
+export * from './Stack';
+
 export { default as Tabs } from './Tabs';
 export * from './Tabs';