feat(react): add Box component

packages/react/.storybook/story-config.ts

@@ -32,6 +32,7 @@ enum StorybookCategories {
 
 export type Stories =
   | 'AppBar'
+  | 'Box'
   | 'Button'
   | 'ColorModeToggle'
   | 'Colors'
@@ -79,6 +80,9 @@ const StoryConfig: StorybookConfig = {
     },
     hierarchy: `${StorybookCategories.Surfaces}/AppBar`,
   },
+  Box: {
+    hierarchy: `${StorybookCategories.Layout}/Box`,
+  },
   Button: {
     hierarchy: `${StorybookCategories.Inputs}/Button`,
   },

packages/react/src/components/Box/Box.stories.mdx

@@ -0,0 +1,73 @@
+import {ArgsTable, Source, Story, Canvas, Meta} from '@storybook/addon-docs';
+import dedent from 'ts-dedent';
+import StoryConfig from '../../../.storybook/story-config.ts';
+import Box from './Box.tsx';
+
+export const meta = {
+  component: Box,
+  title: StoryConfig.Box.hierarchy,
+};
+
+<Meta title={meta.title} component={meta.component} />
+
+export const Template = args => <Box {...args} />;
+
+# Box
+
+- [Overview](#overview)
+- [Props](#props)
+- [Usage](#usage)
+
+## Overview
+
+The `Box` component serves as a wrapper component for most of the CSS utility needs.
+
+<Canvas>
+  <Story
+    name="Overview"
+    args={{
+      sx: {
+        width: 300,
+        height: 300,
+        backgroundColor: 'primary.dark',
+        '&:hover': {
+          backgroundColor: 'primary.main',
+          opacity: [0.9, 0.8, 0.7],
+        },
+      },
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable story="Overview" />
+
+## Usage
+
+Import and use the `Box` component in your components as follows.
+
+<Source
+  language="jsx"
+  dark
+  format
+  code={dedent`
+import Box from '@oxygen-ui/react/Box';\n
+function Demo() {
+  return (
+    <Box
+      sx={{
+        width: 300,
+        height: 300,
+        backgroundColor: 'primary.dark',
+        '&:hover': {
+          backgroundColor: 'primary.main',
+          opacity: [0.9, 0.8, 0.7],
+        },
+      }}
+    />
+  );
+}`}
+/>

packages/react/src/components/Box/Box.tsx

@@ -0,0 +1,41 @@
+/**
+ * Copyright (c) 2023, WSO2 LLC. (https://www.wso2.com). All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import MuiBox, {BoxProps as MuiBoxProps} from '@mui/material/Box';
+import clsx from 'clsx';
+import {FC, ReactElement} from 'react';
+import {WithWrapperProps} from '../../models';
+import {composeComponentDisplayName} from '../../utils';
+
+export type BoxProps = MuiBoxProps;
+
+const COMPONENT_NAME: string = 'Box';
+
+const Box: FC<BoxProps> & WithWrapperProps = (props: BoxProps): ReactElement => {
+  const {className, ...rest} = props;
+
+  const classes: string = clsx('oxygen-box', className);
+
+  return <MuiBox className={classes} {...rest} />;
+};
+
+Box.displayName = composeComponentDisplayName(COMPONENT_NAME);
+Box.muiName = COMPONENT_NAME;
+Box.defaultProps = {};
+
+export default Box;

packages/react/src/components/Box/__tests__/Box.test.tsx

@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) 2023, WSO2 LLC. (https://www.wso2.com). All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import {render} from '@unit-testing';
+import Box from '../Box';
+
+describe('Box', () => {
+  it('should render successfully', () => {
+    const {baseElement} = render(<Box />);
+    expect(baseElement).toBeTruthy();
+  });
+
+  it('should match the snapshot', () => {
+    const {baseElement} = render(<Box />);
+    expect(baseElement).toMatchSnapshot();
+  });
+});

packages/react/src/components/Box/__tests__/__snapshots__/Box.test.tsx.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Box should match the snapshot 1`] = `
+<body>
+  <div>
+    <div
+      class="oxygen-box MuiBox-root css-0"
+    />
+  </div>
+</body>
+`;

packages/react/src/components/Box/box.scss

@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) 2023, WSO2 LLC. (https://www.wso2.com). All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+.oxygen-box {}

packages/react/src/components/Box/index.ts

@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) 2023, WSO2 LLC. (https://www.wso2.com). All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+export {default} from './Box';
+export type {BoxProps} from './Box';

packages/react/src/components/ListItemIcon/index.ts

@@ -17,4 +17,4 @@
  */
 
 export {default} from './ListItemIcon';
-export type {ListItemButtonProps} from './ListItemIcon';
+export type {ListItemIconProps} from './ListItemIcon';

packages/react/src/components/index.ts

@@ -19,6 +19,9 @@
 export {default as AppBar} from './AppBar';
 export * from './AppBar';
 
+export {default as Box} from './Box';
+export * from './Box';
+
 export {default as Button} from './Button';
 export * from './Button';
 
@@ -31,6 +34,21 @@ export * from './Grid';
 export {default as Link} from './Link';
 export * from './Link';
 
+export {default as List} from './List';
+export * from './List';
+
+export {default as ListItem} from './ListItem';
+export * from './ListItem';
+
+export {default as ListItemButton} from './ListItemButton';
+export * from './ListItemButton';
+
+export {default as ListItemIcon} from './ListItemIcon';
+export * from './ListItemIcon';
+
+export {default as ListItemText} from './ListItemText';
+export * from './ListItemText';
+
 export {default as SignIn} from './SignIn';
 export * from './SignIn';
 

packages/react/src/index.ts

@@ -26,7 +26,6 @@ export {
   ToggleButton,
   ToggleButtonGroup,
   IconButton,
-  Box,
   Dialog,
   DialogTitle,
   DialogContent,