Merge pull request #163 from brionmario/feat-add-components

feat(react): add `Skeleton` & `InputAdornment` components

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

@@ -80,6 +80,7 @@ export type Stories =
   | 'Icons'
   | 'Image'
   | 'Input'
+  | 'InputAdornment'
   | 'InputLabel'
   | 'LinearProgress'
   | 'Link'
@@ -102,6 +103,7 @@ export type Stories =
   | 'RadioGroup'
   | 'Select'
   | 'SignIn'
+  | 'Skeleton'
   | 'Snackbar'
   | 'Stepper'
   | 'Tab'
@@ -274,6 +276,9 @@ const StoryConfig: StorybookConfig = {
   Input: {
     hierarchy: `${StorybookCategories.Inputs}/Input`,
   },
+  InputAdornment: {
+    hierarchy: `${StorybookCategories.ComponentAPI}/Input Adornment`,
+  },
   InputLabel: {
     hierarchy: `${StorybookCategories.Inputs}/Input Label`,
   },
@@ -343,6 +348,9 @@ const StoryConfig: StorybookConfig = {
   SignIn: {
     hierarchy: `${StorybookCategories.Patterns}/Sign In`,
   },
+  Skeleton: {
+    hierarchy: `${StorybookCategories.Feedback}/Skeleton`,
+  },
   Snackbar: {
     hierarchy: `${StorybookCategories.Feedback}/Snackbar`,
   },

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

@@ -0,0 +1,48 @@
+import {ArgsTable, Source, Story, Canvas, Meta} from '@storybook/addon-docs';
+import dedent from 'ts-dedent';
+import StoryConfig from '../../../.storybook/story-config.ts';
+import InputAdornment from './InputAdornment.tsx';
+import TextField from '../TextField/TextField.tsx';
+import LinkTo from '@storybook/addon-links/react';
+
+export const meta = {
+  component: InputAdornment,
+  title: StoryConfig.InputAdornment.hierarchy,
+};
+
+<Meta title={meta.title} component={meta.component} />
+
+export const Template = args => <InputAdornment {...args} />;
+
+# Input Adornment
+
+- [Overview](#overview)
+- [Props](#props)
+- [Usage](#usage)
+
+## Overview
+
+Display a prefix, a suffix, or an action to an input. For instance, you can use an icon button to hide or reveal the password.
+
+For examples and details on the usage of this React component, visit the component demo pages:
+
+- <LinkTo kind="?path=/docs/inputs-text-field--overview">Text Field</LinkTo>
+
+## Props
+
+<ArgsTable  />
+
+## Usage
+
+Import and use the `InputAdornment` component in your components as follows.
+
+<Source
+  language="jsx"
+  dark
+  format
+  code={dedent`
+import InputAdornment from '@oxygen-ui/react/InputAdornment';\n
+function Demo() {
+  return <InputAdornment />;
+}`}
+/>

packages/react/src/components/InputAdornment/InputAdornment.tsx

@@ -0,0 +1,45 @@
+/**
+ * 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 MuiInputAdornment, {InputAdornmentProps as MuiInputAdornmentProps} from '@mui/material/InputAdornment';
+import clsx from 'clsx';
+import {ElementType, FC, ReactElement} from 'react';
+import {WithWrapperProps} from '../../models';
+import {composeComponentDisplayName} from '../../utils';
+
+export type InputAdornmentProps<C extends ElementType = ElementType> = {
+  component?: C;
+} & Omit<MuiInputAdornmentProps<C>, 'component'>;
+
+const COMPONENT_NAME: string = 'InputAdornment';
+
+const InputAdornment: FC<InputAdornmentProps> & WithWrapperProps = <C extends ElementType>(
+  props: InputAdornmentProps<C>,
+): ReactElement => {
+  const {className, position, ...rest} = props;
+
+  const classes: string = clsx('oxygen-input-adornment', className);
+
+  return <MuiInputAdornment position={position} className={classes} {...rest} />;
+};
+
+InputAdornment.displayName = composeComponentDisplayName(COMPONENT_NAME);
+InputAdornment.muiName = COMPONENT_NAME;
+InputAdornment.defaultProps = {};
+
+export default InputAdornment;

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

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

@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`InputAdornment should match the snapshot 1`] = `
+<body>
+  <div>
+    <div
+      class="MuiInputAdornment-root MuiInputAdornment-positionStart oxygen-input-adornment css-1ju4t5z-MuiInputAdornment-root"
+    >
+      <span
+        class="notranslate"
+      >
+        ​
+      </span>
+    </div>
+  </div>
+</body>
+`;

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

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

@@ -0,0 +1,48 @@
+import {ArgsTable, Source, Story, Canvas, Meta} from '@storybook/addon-docs';
+import dedent from 'ts-dedent';
+import StoryConfig from '../../../.storybook/story-config.ts';
+import Skeleton from './Skeleton.tsx';
+
+export const meta = {
+  component: Skeleton,
+  title: StoryConfig.Skeleton.hierarchy,
+};
+
+<Meta title={meta.title} component={meta.component} />
+
+export const Template = args => <Skeleton {...args} />;
+
+# Skeleton
+
+- [Overview](#overview)
+- [Props](#props)
+- [Usage](#usage)
+
+## Overview
+
+Display a placeholder preview of your content before the data gets loaded to reduce load-time frustration.
+
+<Canvas>
+  <Story name="Overview">
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable story="Overview" />
+
+## Usage
+
+Import and use the `Skeleton` component in your components as follows.
+
+<Source
+  language="jsx"
+  dark
+  format
+  code={dedent`
+import Skeleton from '@oxygen-ui/react/Skeleton';\n
+function Demo() {
+  return <Skeleton />;
+}`}
+/>

packages/react/src/components/Skeleton/Skeleton.tsx

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

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

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

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

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

packages/react/src/components/index.ts

@@ -130,6 +130,9 @@ export * from './Image';
 export {default as Input} from './Input';
 export * from './Input';
 
+export {default as InputAdornment} from './InputAdornment';
+export * from './InputAdornment';
+
 export {default as InputLabel} from './InputLabel';
 export * from './InputLabel';
 
@@ -190,6 +193,9 @@ export * from './Select';
 export {default as SignIn} from './SignIn';
 export * from './SignIn';
 
+export {default as Skeleton} from './Skeleton';
+export * from './Skeleton';
+
 export {default as Stepper} from './Stepper';
 export * from './Stepper';