feat(react): add TextField components

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

@@ -52,11 +52,15 @@ export type Stories =
   | 'Divider'
   | 'Drawer'
   | 'Footer'
+  | 'FormHelperText'
+  | 'FormControl'
   | 'Grid'
   | 'Header'
   | 'IconButton'
   | 'Icons'
   | 'Image'
+  | 'Input'
+  | 'InputLabel'
   | 'Link'
   | 'List'
   | 'ListItem'
@@ -68,6 +72,7 @@ export type Stories =
   | 'MenuItem'
   | 'UserDropdownMenu'
   | 'Navbar'
+  | 'OutlinedInput'
   | 'SignIn'
   | 'Stepper'
   | 'TextField'
@@ -157,6 +162,12 @@ const StoryConfig: StorybookConfig = {
   Footer: {
     hierarchy: `${StorybookCategories.Navigation}/Footer`,
   },
+  FormHelperText: {
+    hierarchy: `${StorybookCategories.Inputs}/Form Helper Text`,
+  },
+  FormControl: {
+    hierarchy: `${StorybookCategories.Inputs}/Form Control`,
+  },
   Grid: {
     hierarchy: `${StorybookCategories.Layout}/Grid`,
   },
@@ -174,6 +185,12 @@ const StoryConfig: StorybookConfig = {
   Image: {
     hierarchy: `${StorybookCategories.DataDisplay}/Image`,
   },
+  Input: {
+    hierarchy: `${StorybookCategories.Inputs}/Input`,
+  },
+  InputLabel: {
+    hierarchy: `${StorybookCategories.Inputs}/Input Label`,
+  },
   IconButton: {
     hierarchy: `${StorybookCategories.Inputs}/Icon Button`,
   },
@@ -192,6 +209,9 @@ const StoryConfig: StorybookConfig = {
   Navbar: {
     hierarchy: `${StorybookCategories.Navigation}/Navbar`,
   },
+  OutlinedInput: {
+    hierarchy: `${StorybookCategories.Inputs}/Outlined Input`,
+  },
   List: {
     hierarchy: `${StorybookCategories.DataDisplay}/List`,
   },

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

@@ -0,0 +1,99 @@
+import {ArgsTable, Source, Story, Canvas, Meta} from '@storybook/addon-docs';
+import dedent from 'ts-dedent';
+import StoryConfig from '../../../.storybook/story-config.ts';
+import FormControl from './FormControl.tsx';
+import InputLabel from '../InputLabel';
+import Input from '../Input';
+
+export const meta = {
+  component: FormControl,
+  title: StoryConfig.FormControl.hierarchy,
+};
+
+<Meta title={meta.title} component={meta.component} />
+
+export const Template = args => {
+  return (
+    <FormControl {...args}>
+      <InputLabel htmlFor="component-simple1">Form Input Label</InputLabel>
+      <Input id="component-simple1" defaultValue="TextField1" />
+      <Input id="component-simple1" defaultValue="TextField2" />
+    </FormControl>
+  )
+}
+
+# Form Control
+
+- [Overview](#overview)
+- [Props](#props)
+- [Usage](#usage)
+- [Variants](#variants)
+
+## Overview
+
+Used to apply a common state to form inputs; `FormLabel`, `FormHelperText`, `Input`, `InputLabel`.
+
+<Canvas>
+  <Story name="Overview" args={{margin: 'normal'}}>
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable story="Overview" />
+
+## Usage
+
+Import and use the `FormControl` component in your components as follows.
+
+<Source
+  language="jsx"
+  dark
+  format
+  code={dedent`import FormControl from '@oxygen-ui/react/FormControl';\n`}
+/>
+
+## Variants
+
+### Color
+
+#### Primary
+
+<Canvas>
+  <Story name="Primary" args={{color: 'primary', margin: 'normal'}} >
+    {Template.bind({})}
+    </Story>
+</Canvas>
+
+#### Secondary
+
+<Canvas>
+  <Story name="Secondary" args={{color: 'secondary', margin: 'normal'}} >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+### Error
+
+<Canvas>
+  <Story name="Error" args={{error: true, margin: 'normal'}} >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+### Focused
+
+<Canvas>
+  <Story name="Focused" args={{focused: true, margin: 'normal'}} >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+### Disabled
+
+<Canvas>
+  <Story name="Disabled" args={{disabled: true, margin: 'normal'}} >
+    {Template.bind({})}
+  </Story>
+</Canvas>

packages/react/src/components/FormControl/FormControl.tsx

@@ -0,0 +1,46 @@
+/**
+ * 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 MuiFormControl, {FormControlProps as MuiFormControlProps} from '@mui/material/FormControl';
+import clsx from 'clsx';
+import {ElementType, FC, ReactElement} from 'react';
+import {WithWrapperProps} from '../../models';
+import {composeComponentDisplayName} from '../../utils';
+import './form-control.scss';
+
+export type FormControlProps<C extends ElementType = ElementType> = {
+  component?: C;
+} & Omit<MuiFormControlProps<C>, 'component'>;
+
+const COMPONENT_NAME: string = 'FormControl';
+
+const FormControl: FC<FormControlProps> & WithWrapperProps = <C extends ElementType>(
+  props: FormControlProps<C>,
+): ReactElement => {
+  const {className, ...rest} = props;
+
+  const classes: string = clsx('oxygen-form-control', className);
+
+  return <MuiFormControl className={classes} {...rest} />;
+};
+
+FormControl.displayName = composeComponentDisplayName(COMPONENT_NAME);
+FormControl.muiName = COMPONENT_NAME;
+FormControl.defaultProps = {};
+
+export default FormControl;

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

packages/react/src/components/FormControl/__test__/__snapshots__/FormControl.test.tsx.snap

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

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

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