Merge pull request #59 from savindi7/feat-select

feat(react): add `Select` component

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

@@ -77,6 +77,7 @@ export type Stories =
   | 'UserDropdownMenu'
   | 'Navbar'
   | 'OutlinedInput'
+  | 'Select'
   | 'SignIn'
   | 'Stepper'
   | 'Tab'
@@ -249,6 +250,9 @@ const StoryConfig: StorybookConfig = {
   ListItemText: {
     hierarchy: `${StorybookCategories.DataDisplay}/List Item Text`,
   },
+  Select: {
+    hierarchy: `${StorybookCategories.Inputs}/Select`,
+  },
   SignIn: {
     hierarchy: `${StorybookCategories.Patterns}/Sign In`,
   },

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

@@ -0,0 +1,69 @@
+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 Select from './Select.tsx';
+import MenuItem from '../MenuItem';
+
+export const meta = {
+  component: Select,
+  title: StoryConfig.Select.hierarchy,
+};
+
+<Meta title={meta.title} component={meta.component} />
+
+export const Template = args => {
+  const [{open, anchor, onChange, label}, updateArgs] = useArgs();
+  return (
+    <Select label="Select WSO2 Product" defaultValue='Asgardeo' onChange={() => updateArgs({value: anchor})} {...args}>
+      {['Asgardeo', 'Identity Server', 'Choreo', 'APIM'].map(anchor => (
+        <MenuItem key={anchor} value={anchor}>
+          {anchor}
+        </MenuItem>
+      ))}
+    </Select>
+  )
+};
+
+# Select
+
+- [Overview](#overview)
+- [Props](#props)
+- [Usage](#usage)
+
+## Overview
+
+The `Select` component is used to create a select input.
+
+<Canvas>
+  <Story
+    name="Overview"
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable story="Overview" />
+
+## Usage
+
+Import and use the `Select` component in your components as follows.
+
+<Source
+  language="jsx"
+  dark
+  format
+  code={dedent`
+import Select from '@oxygen-ui/react/Select';\n
+function Demo() {
+  return (
+    <Select>
+      <MenuItem value={10}>Ten</MenuItem>
+      <MenuItem value={20}>Twenty</MenuItem>
+      <MenuItem value={30}>Thirty</MenuItem> 
+    </Select>
+  );
+}`}
+/>

packages/react/src/components/Select/Select.tsx

@@ -0,0 +1,57 @@
+/**
+ * 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 MuiSelect, {SelectProps as MuiSelectProps} from '@mui/material/Select';
+import clsx from 'clsx';
+import {forwardRef, ForwardRefExoticComponent, MutableRefObject, ReactElement} from 'react';
+import {WithWrapperProps} from '../../models';
+import {composeComponentDisplayName} from '../../utils';
+import Box from '../Box';
+import InputLabel, {InputLabelProps as MuiInputLabelProps} from '../InputLabel';
+import './select.scss';
+
+export interface SelectProps extends MuiSelectProps {
+  InputLabelProps?: MuiInputLabelProps;
+}
+
+const COMPONENT_NAME: string = 'Select';
+
+const Select: ForwardRefExoticComponent<SelectProps> & WithWrapperProps = forwardRef(
+  (props: SelectProps, ref: MutableRefObject<HTMLDivElement>): ReactElement => {
+    const {className, InputLabelProps, label, id, ...rest} = props;
+
+    const classes: string = clsx('oxygen-select', className);
+
+    return (
+      <Box className={classes}>
+        {label && (
+          <InputLabel id={id} {...InputLabelProps}>
+            {label}
+          </InputLabel>
+        )}
+        <MuiSelect ref={ref} labelId={id} {...rest} />
+      </Box>
+    );
+  },
+) as ForwardRefExoticComponent<SelectProps> & WithWrapperProps;
+
+Select.displayName = composeComponentDisplayName(COMPONENT_NAME);
+Select.muiName = COMPONENT_NAME;
+Select.defaultProps = {};
+
+export default Select;

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

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

@@ -0,0 +1,60 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Select should match the snapshot 1`] = `
+<body>
+  <div>
+    <div
+      class="oxygen-box oxygen-select MuiBox-root css-0"
+    >
+      <div
+        class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary  css-saqlya-MuiInputBase-root-MuiOutlinedInput-root-MuiSelect-root"
+      >
+        <div
+          aria-expanded="false"
+          aria-haspopup="listbox"
+          class="MuiSelect-select MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input css-1d3lhbp-MuiSelect-select-MuiInputBase-input-MuiOutlinedInput-input"
+          role="button"
+          tabindex="0"
+        >
+          <span
+            class="notranslate"
+          >
+            ​
+          </span>
+        </div>
+        <input
+          aria-hidden="true"
+          class="MuiSelect-nativeInput css-yf8vq0-MuiSelect-nativeInput"
+          tabindex="-1"
+          value=""
+        />
+        <svg
+          aria-hidden="true"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiSelect-icon MuiSelect-iconOutlined css-j9wse9-MuiSvgIcon-root-MuiSelect-icon"
+          data-testid="ArrowDropDownIcon"
+          focusable="false"
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M7 10l5 5 5-5z"
+          />
+        </svg>
+        <fieldset
+          aria-hidden="true"
+          class="MuiOutlinedInput-notchedOutline css-116asjz-MuiOutlinedInput-notchedOutline"
+        >
+          <legend
+            class="css-ihdtdm"
+          >
+            <span
+              class="notranslate"
+            >
+              ​
+            </span>
+          </legend>
+        </fieldset>
+      </div>
+    </div>
+  </div>
+</body>
+`;

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

packages/react/src/components/Select/select.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-select {
+  /* Add Styles */
+}