feat(react): add Drawer component

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

@@ -36,6 +36,7 @@ export type Stories =
   | 'Button'
   | 'ColorModeToggle'
   | 'Colors'
+  | 'Drawer'
   | 'Grid'
   | 'IconButton'
   | 'Icons'
@@ -94,6 +95,9 @@ const StoryConfig: StorybookConfig = {
   Colors: {
     hierarchy: `${StorybookCategories.Foundations}/Colors`,
   },
+  Drawer: {
+    hierarchy: `${StorybookCategories.Navigation}/Drawer`,
+  },
   Grid: {
     hierarchy: `${StorybookCategories.Layout}/Grid`,
   },

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

@@ -0,0 +1,84 @@
+import {Fragment} from 'react';
+import {ArgsTable, Source, Story, Canvas, Meta} from '@storybook/addon-docs';
+import {useArgs} from '@storybook/client-api';
+import dedent from 'ts-dedent';
+import StoryConfig from '../../../.storybook/story-config.ts';
+import Drawer from './Drawer.tsx';
+import Button from '../Button/Button.tsx';
+import List from '../List/List.tsx';
+import ListItem from '../ListItem/ListItem.tsx';
+import ListItemText from '../ListItemText/ListItemText.tsx';
+
+export const meta = {
+  component: Drawer,
+  title: StoryConfig.Drawer.hierarchy,
+};
+
+<Meta title={meta.title} component={meta.component} />
+
+export const Template = args => {
+  const [{open, anchor}, updateArgs] = useArgs();
+  return (
+    <div>
+      {(['left', 'right', 'top', 'bottom']).map((anchor) => (
+        <Fragment key={anchor}>
+          <Button onClick={() => updateArgs({ open: !open, anchor: anchor })}>{anchor}</Button>
+          <Drawer
+            anchor={anchor}
+            open={open}
+            onClose={() => updateArgs({ open: !open, anchor: anchor })}
+            {...args}
+          >
+            <List>
+              <ListItem><ListItemText>Drawer Item 01</ListItemText></ListItem>
+              <ListItem><ListItemText>Drawer Item 02</ListItemText></ListItem>
+              <ListItem><ListItemText>Drawer Item 03</ListItemText></ListItem>
+            </List>
+          </Drawer>
+        </Fragment>
+      ))}
+    </div>
+  );
+};
+
+# Drawer
+
+- [Overview](#overview)
+- [Props](#props)
+- [Usage](#usage)
+
+## Overview
+
+Navigation drawers provide access to destinations in your app. Side sheets are surfaces containing supplementary content
+that are anchored to the left or right edge of the screen.
+
+<Canvas>
+  <Story name="Overview">{Template.bind({})}</Story>
+</Canvas>
+
+## Props
+
+<ArgsTable story="Overview" />
+
+## Usage
+
+Import and use the `Drawer` component in your components as follows.
+
+<Source
+  language="jsx"
+  dark
+  format
+  code={dedent`
+import Drawer from '@oxygen-ui/react/Drawer';\n
+function Demo() {
+  return (
+    <Drawer
+      anchor={anchor}
+      open={state[anchor]}
+      onClose={toggleDrawer(anchor, false)}
+    >
+      {/* List */}
+    </Drawer>
+  );
+}`}
+/>

packages/react/src/components/Drawer/Drawer.tsx

@@ -0,0 +1,42 @@
+/**
+ * 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 MuiDrawer, {DrawerProps as MuiDrawerProps} from '@mui/material/Drawer';
+import clsx from 'clsx';
+import {FC, ReactElement} from 'react';
+import {WithWrapperProps} from '../../models';
+import {composeComponentDisplayName} from '../../utils';
+import './drawer.scss';
+
+export type DrawerProps = MuiDrawerProps;
+
+const COMPONENT_NAME: string = 'Drawer';
+
+const Drawer: FC<DrawerProps> & WithWrapperProps = (props: DrawerProps): ReactElement => {
+  const {className, ...rest} = props;
+
+  const classes: string = clsx('oxygen-drawer', className);
+
+  return <MuiDrawer className={classes} {...rest} />;
+};
+
+Drawer.displayName = composeComponentDisplayName(COMPONENT_NAME);
+Drawer.muiName = COMPONENT_NAME;
+Drawer.defaultProps = {};
+
+export default Drawer;

packages/react/src/components/Drawer/__tests__/Drawer.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 Drawer from '../Drawer';
+
+describe('Drawer', () => {
+  it('should render successfully', () => {
+    const {baseElement} = render(<Drawer />);
+    expect(baseElement).toBeTruthy();
+  });
+
+  it('should match the snapshot', () => {
+    const {baseElement} = render(<Drawer />);
+    expect(baseElement).toMatchSnapshot();
+  });
+});

packages/react/src/components/Drawer/drawer.scss

@@ -0,0 +1,21 @@
+/**
+ * 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-drawer {
+  /* Add Styles */
+}

packages/react/src/components/Drawer/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 './Drawer';
+export type {DrawerProps} from './Drawer';

packages/react/src/components/index.ts

@@ -28,6 +28,9 @@ export * from './Button';
 export {default as ColorModeToggle} from './ColorModeToggle';
 export * from './ColorModeToggle';
 
+export {default as Drawer} from './Drawer';
+export * from './Drawer';
+
 export {default as Grid} from './Grid';
 export * from './Grid';