Merge pull request #12 from brionmario/feat-app-shells

feat(react): Add `List` components.

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

@@ -27,35 +27,55 @@ enum StorybookCategories {
   Patterns = 'Patterns',
   Theme = 'Theme',
   Typography = 'Typography',
-  Surfaces = 'Surfaces'
+  Surfaces = 'Surfaces',
 }
 
-export type Stories = 'AppBar' | 'Button' | 'ColorModeToggle' | 'Colors' | 'Grid' | 'Icons' | 'Link' | 'SignIn' | 'TextField' | 'Tooltip' | 'Typography' | 'Welcome';
-export type StorybookConfig = Record<Stories, {
-  hierarchy: string;
-  design?: {
-    type: 'figma';
-    url: string;
-  };
-  story?: {
-    [key: string]: {
-      design?: {
-        type: 'figma';
-        url: string;
+export type Stories =
+  | 'AppBar'
+  | 'Button'
+  | 'ColorModeToggle'
+  | 'Colors'
+  | 'Grid'
+  | 'Icons'
+  | 'Link'
+  | 'List'
+  | 'ListItem'
+  | 'ListItemButton'
+  | 'ListItemIcon'
+  | 'ListItemText'
+  | 'SignIn'
+  | 'TextField'
+  | 'Tooltip'
+  | 'Typography'
+  | 'Welcome';
+export type StorybookConfig = Record<
+  Stories,
+  {
+    hierarchy: string;
+    design?: {
+      type: 'figma';
+      url: string;
+    };
+    story?: {
+      [key: string]: {
+        design?: {
+          type: 'figma';
+          url: string;
+        };
       };
-    }
+    };
   }
-}>;
+>;
 
 const StoryConfig: StorybookConfig = {
   AppBar: {
     story: {
       Overview: {
         design: {
           type: 'figma',
-          url: 'https://www.figma.com/file/HyEVOfDBGyXsvPSbNdgquW/Navigation%2FHeader?node-id=120%3A1437&t=NT0uoPAY3qLFlkmN-0'
+          url: 'https://www.figma.com/file/HyEVOfDBGyXsvPSbNdgquW/Navigation%2FHeader?node-id=120%3A1437&t=NT0uoPAY3qLFlkmN-0',
         },
-      }
+      },
     },
     hierarchy: `${StorybookCategories.Surfaces}/AppBar`,
   },
@@ -77,6 +97,21 @@ const StoryConfig: StorybookConfig = {
   Link: {
     hierarchy: `${StorybookCategories.Navigation}/Link`,
   },
+  List: {
+    hierarchy: `${StorybookCategories.DataDisplay}/List`,
+  },
+  ListItem: {
+    hierarchy: `${StorybookCategories.DataDisplay}/List Item`,
+  },
+  ListItemButton: {
+    hierarchy: `${StorybookCategories.DataDisplay}/List Item Button`,
+  },
+  ListItemIcon: {
+    hierarchy: `${StorybookCategories.DataDisplay}/List Item Icon`,
+  },
+  ListItemText: {
+    hierarchy: `${StorybookCategories.DataDisplay}/List Item Text`,
+  },
   SignIn: {
     hierarchy: `${StorybookCategories.Patterns}/Sign In`,
   },

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

@@ -0,0 +1,82 @@
+import {ArgsTable, Source, Story, Canvas, Meta} from '@storybook/addon-docs';
+import {LockIcon} from '@oxygen-ui/react-icons';
+import {PowerIcon} from '@oxygen-ui/react-icons';
+import dedent from 'ts-dedent';
+import StoryConfig from '../../../.storybook/story-config.ts';
+import {withDesign} from '../../../.storybook/utils.ts';
+import List from './List.tsx';
+import ListItem from '../ListItem/ListItem.tsx';
+import ListItemButton from '../ListItemButton/ListItemButton.tsx';
+import ListItemText from '../ListItemText/ListItemText.tsx';
+import ListItemIcon from '../ListItemIcon/ListItemIcon.tsx';
+
+export const meta = {
+  component: List,
+  title: StoryConfig.List.hierarchy,
+};
+
+<Meta title={meta.title} component={meta.component} />
+
+export const Template = args => (
+  <List {...args} />
+);
+
+# List
+
+- [Overview](#overview)
+- [Props](#props)
+- [Usage](#usage)
+
+## Overview
+
+Lists are continuous, vertical indexes of text or images.
+
+<Canvas>
+  <Story name="Overview" args={{
+    children: (
+      <>
+        <ListItem disablePadding>
+          <ListItemButton>
+            <ListItemIcon>
+              <LockIcon />
+            </ListItemIcon>
+            <ListItemText primary="Security" />
+          </ListItemButton>
+        </ListItem>
+        <ListItem disablePadding>
+          <ListItemButton>
+            <ListItemIcon>
+              <PowerIcon />
+            </ListItemIcon>
+            <ListItemText primary="Logout" />
+          </ListItemButton>
+        </ListItem>
+      </>
+    )
+  }}>
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable story="Overview" />
+
+## Usage
+
+Import and use the `List` component in your components as follows.
+
+<Source
+  language="jsx"
+  dark
+  format
+  code={dedent`
+import List from '@oxygen-ui/react/List';\n
+function Demo() {
+  return (
+    <List>
+      {/* List Items */}
+    </List>
+  );
+}`}
+/>

packages/react/src/components/List/List.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 MuiList, {ListProps as MuiListProps} from '@mui/material/List';
+import clsx from 'clsx';
+import {FC, ReactElement} from 'react';
+import {WithWrapperProps} from '../../models';
+import {composeComponentDisplayName} from '../../utils';
+
+export type ListProps = MuiListProps;
+
+const COMPONENT_NAME: string = 'List';
+
+const List: FC<ListProps> & WithWrapperProps = (props: ListProps): ReactElement => {
+  const {className, ...rest} = props;
+
+  const classes: string = clsx('oxygen-list', className);
+
+  return <MuiList className={classes} {...rest} />;
+};
+
+List.displayName = composeComponentDisplayName(COMPONENT_NAME);
+List.muiName = COMPONENT_NAME;
+List.defaultProps = {};
+
+export default List;

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

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

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

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

packages/react/src/components/List/list.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-list {}

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

@@ -0,0 +1,53 @@
+import {ArgsTable, Source, Story, Canvas, Meta} from '@storybook/addon-docs';
+import dedent from 'ts-dedent';
+import StoryConfig from '../../../.storybook/story-config.ts';
+import {withDesign} from '../../../.storybook/utils.ts';
+import ListItem from './ListItem.tsx';
+
+export const meta = {
+  component: ListItem,
+  title: StoryConfig.ListItem.hierarchy,
+};
+
+<Meta title={meta.title} component={meta.component} />
+
+export const Template = args => <ListItem {...args} />;
+
+# ListItem
+
+- [Overview](#overview)
+- [Props](#props)
+- [Usage](#usage)
+
+## Overview
+
+`ListItem` is used to represent an item in a list.
+
+<Canvas>
+  <Story name="Overview" args={{children: 'List Item'}}>
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable story="Overview" />
+
+## Usage
+
+Import and use the `ListItem` component in your components as follows.
+
+<Source
+  language="jsx"
+  dark
+  format
+  code={dedent`
+import ListItem from '@oxygen-ui/react/ListItem';\n
+function Demo() {
+  return (
+    <ListItem>
+      {/* List Item Content */}
+    </ListItem>
+  );
+}`}
+/>