feat(auth-components): Add oxygen react auth components

.vscode/settings.json

@@ -2,9 +2,14 @@
     "conventionalCommits.scopes": [
         "workspace",
         "core",
-        "react"
+        "react",
+        "auth-components"
     ],
     "editor.codeActionsOnSave": {
         "source.fixAll.eslint": "explicit"
-      },
+    },
+    "css.validate": false,
+    "less.validate": false,
+    "scss.validate": false,
+    "stylelint.validate": ["css", "scss"]
 }

packages/react/package.json

@@ -44,12 +44,14 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "sass": "^1.75.0",
-    "stylelint": "^16.4.0",
+    "stylelint": "15.1.0",
     "tslib": "^2.6.2",
     "typescript": "^5.4.5"
   },
   "dependencies": {
-    "@asgardeo/js-ui-core": "*"
+    "@asgardeo/js-ui-core": "*",
+    "@oxygen-ui/react": "^1.11.0",
+    "clsx": "^2.1.1"
   },
   "peerDependencies": {
     "react": ">=18.0.0",

packages/react/src/oxygen-ui-react-auth-components/SignIn/SignIn.tsx

@@ -0,0 +1,68 @@
+/**
+ * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com).
+ *
+ * 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 {Box, BoxProps} from '@oxygen-ui/react';
+import clsx from 'clsx';
+import {ElementType, ForwardRefExoticComponent, MutableRefObject, ReactElement, forwardRef} from 'react';
+import {WithWrapperProps} from '../models/component';
+import SignInAlert from '../SignInAlert/SignInAlert';
+import SignInButton from '../SignInButton/SignInButton';
+import SignInDivider from '../SignInDivider/SignInDivider';
+import SignInLink from '../SignInLink/SignInLink';
+import SignInPaper from '../SignInPaper/SignInPaper';
+import SignInTextField from '../SignInTextField/SignInTextField';
+import SignInTypography from '../SignInTypography/SignInTypography';
+
+export type SignInProps<C extends ElementType = ElementType> = {
+  component?: C;
+} & Omit<BoxProps, 'component'>;
+
+type SignInCompoundProps = {
+  Alert: typeof SignInAlert;
+  Button: typeof SignInButton;
+  Divider: typeof SignInDivider;
+  Link: typeof SignInLink;
+  Paper: typeof SignInPaper;
+  TextField: typeof SignInTextField;
+  Typography: typeof SignInTypography;
+};
+
+const COMPONENT_NAME: string = 'SignIn';
+
+const SignIn: ForwardRefExoticComponent<SignInProps> & WithWrapperProps & SignInCompoundProps = forwardRef(
+  <C extends ElementType>(props: SignInProps<C>, ref: MutableRefObject<HTMLHRElement>): ReactElement => {
+    const {className, ...rest} = props;
+
+    const classes: string = clsx(`Oxygen${COMPONENT_NAME}`, className);
+
+    return <Box ref={ref} className={classes} {...rest} />;
+  },
+) as ForwardRefExoticComponent<SignInProps> & WithWrapperProps & SignInCompoundProps;
+
+SignIn.displayName = COMPONENT_NAME;
+SignIn.muiName = COMPONENT_NAME;
+
+SignIn.Typography = SignInTypography;
+SignIn.Paper = SignInPaper;
+SignIn.Alert = SignInAlert;
+SignIn.Divider = SignInDivider;
+SignIn.Link = SignInLink;
+SignIn.Button = SignInButton;
+SignIn.TextField = SignInTextField;
+
+export default SignIn;

packages/react/src/oxygen-ui-react-auth-components/SignInAlert/SignInAlert.tsx

@@ -0,0 +1,68 @@
+/**
+ * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com).
+ *
+ * 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 {Alert} from '@oxygen-ui/react';
+import clsx from 'clsx';
+import {ElementType, ForwardRefExoticComponent, MutableRefObject, ReactElement, forwardRef} from 'react';
+import {WithWrapperProps} from '../models/component';
+import './sign-in-alert.scss';
+
+// TODO: AlertProps is not available in oxygen-ui/react
+export type SignInAlertProps<C extends ElementType = ElementType> = {
+  component?: C;
+} & (
+  | {error?: boolean; info?: never; warning?: never}
+  | {error?: never; info?: boolean; warning?: never}
+  | {error?: never; info?: never; warning?: boolean}
+);
+
+const COMPONENT_NAME: string = 'SignInAlert';
+
+enum Color {
+  Error = 'error',
+  Info = 'info',
+  Warning = 'warning',
+}
+
+const SignInAlert: ForwardRefExoticComponent<SignInAlertProps> & WithWrapperProps = forwardRef(
+  <C extends ElementType>(props: SignInAlertProps<C>, ref: MutableRefObject<HTMLHRElement>): ReactElement => {
+    const {className, error, info, warning, color, icon, ...rest} = props;
+
+    const classes: string = clsx(`Oxygen${COMPONENT_NAME}`, className);
+
+    let extendedColor: string = color;
+    if (!color) {
+      if (error) {
+        extendedColor = Color.Error;
+      } else if (warning) {
+        extendedColor = Color.Warning;
+      } else {
+        extendedColor = Color.Info;
+      }
+    }
+
+    const extendedIcon: Node | boolean = icon || false;
+
+    return <Alert ref={ref} className={classes} color={extendedColor} icon={extendedIcon} {...rest} />;
+  },
+) as ForwardRefExoticComponent<SignInAlertProps> & WithWrapperProps;
+
+SignInAlert.displayName = COMPONENT_NAME;
+SignInAlert.muiName = COMPONENT_NAME;
+
+export default SignInAlert;

packages/react/src/oxygen-ui-react-auth-components/SignInAlert/sign-in-alert.scss

@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com).
+ *
+ * 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.
+ */
+
+.OxygenSignInAlert {
+  border-radius: 12px;
+}

packages/react/src/oxygen-ui-react-auth-components/SignInButton/SignInButton.tsx

@@ -0,0 +1,48 @@
+/**
+ * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com).
+ *
+ * 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 {Button, ButtonProps} from '@oxygen-ui/react';
+import clsx from 'clsx';
+import {ElementType, ForwardRefExoticComponent, MutableRefObject, ReactElement, forwardRef} from 'react';
+import {WithWrapperProps} from '../models/component';
+import './sign-in-button.scss';
+
+export type SignInButtonProps<C extends ElementType = ElementType> = {
+  component?: C;
+  social?: boolean;
+} & Omit<ButtonProps, 'component'>;
+
+const COMPONENT_NAME: string = 'SignInButton';
+
+const SignInButton: ForwardRefExoticComponent<SignInButtonProps> & WithWrapperProps = forwardRef(
+  <C extends ElementType>(props: SignInButtonProps<C>, ref: MutableRefObject<HTMLButtonElement>): ReactElement => {
+    const {className, variant, social, ...rest} = props;
+
+    let classes: string = clsx(`Oxygen${COMPONENT_NAME}`, className);
+    if (social) {
+      classes = clsx(classes, `Oxygen${COMPONENT_NAME}Social`);
+    }
+
+    return <Button ref={ref} className={classes} fullWidth variant="contained" {...rest} />;
+  },
+) as ForwardRefExoticComponent<SignInButtonProps> & WithWrapperProps;
+
+SignInButton.displayName = COMPONENT_NAME;
+SignInButton.muiName = COMPONENT_NAME;
+
+export default SignInButton;

packages/react/src/oxygen-ui-react-auth-components/SignInButton/sign-in-button.scss

@@ -0,0 +1,38 @@
+/**
+ * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com).
+ *
+ * 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.
+ */
+
+.OxygenSignInButton {
+  margin: 16px 0;
+}
+
+.OxygenSignInButtonSocial {
+  background: white;
+  color: black;
+  margin: 0;
+  padding: 8px 0;
+  box-shadow: 0 1px 1px 2px rgb(0 0 0 / 12%), 0 1px 1px 0 rgb(0 0 0 / 24%);
+
+  &:hover {
+    background: rgb(213 212 212);
+    box-shadow: 0 1px 1px 2px rgb(0 0 0 / 12%), 0 1px 1px 0 rgb(0 0 0 / 24%);
+  }
+
+  &:not(:last-child) {
+    margin-bottom: 16px;
+  }
+}

packages/react/src/oxygen-ui-react-auth-components/SignInDivider/SignInDivider.tsx

@@ -0,0 +1,44 @@
+/**
+ * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com).
+ *
+ * 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 {Divider, DividerProps} from '@oxygen-ui/react';
+import clsx from 'clsx';
+import {ElementType, ForwardRefExoticComponent, MutableRefObject, ReactElement, forwardRef} from 'react';
+import {WithWrapperProps} from '../models/component';
+import './sign-in-divider.scss';
+
+export type SignInDividerProps<C extends ElementType = ElementType> = {
+  component?: C;
+} & Omit<DividerProps, 'component'>;
+
+const COMPONENT_NAME: string = 'SignInDivider';
+
+const SignInDivider: ForwardRefExoticComponent<SignInDividerProps> & WithWrapperProps = forwardRef(
+  <C extends ElementType>(props: SignInDividerProps<C>, ref: MutableRefObject<HTMLHRElement>): ReactElement => {
+    const {className, ...rest} = props;
+
+    const classes: string = clsx(`Oxygen${COMPONENT_NAME}`, className);
+
+    return <Divider ref={ref} className={classes} {...rest} />;
+  },
+) as ForwardRefExoticComponent<SignInDividerProps> & WithWrapperProps;
+
+SignInDivider.displayName = COMPONENT_NAME;
+SignInDivider.muiName = COMPONENT_NAME;
+
+export default SignInDivider;

packages/react/src/oxygen-ui-react-auth-components/SignInDivider/sign-in-divider.scss

@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com).
+ *
+ * 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.
+ */
+
+.OxygenSignInDivider {
+  margin: 16px 0;
+}

packages/react/src/oxygen-ui-react-auth-components/SignInLink/SignInLink.tsx

@@ -0,0 +1,43 @@
+/**
+ * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com).
+ *
+ * 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 {Link, LinkProps} from '@oxygen-ui/react';
+import clsx from 'clsx';
+import {ElementType, ForwardRefExoticComponent, MutableRefObject, ReactElement, forwardRef} from 'react';
+import {WithWrapperProps} from '../models/component';
+
+export type SignInLinkProps<C extends ElementType = ElementType> = {
+  component?: C;
+} & Omit<LinkProps, 'component'>;
+
+const COMPONENT_NAME: string = 'SignInLink';
+
+const SignInLink: ForwardRefExoticComponent<SignInLinkProps> & WithWrapperProps = forwardRef(
+  <C extends ElementType>(props: SignInLinkProps<C>, ref: MutableRefObject<HTMLAnchorElement>): ReactElement => {
+    const {className, ...rest} = props;
+
+    const classes: string = clsx(`Oxygen${COMPONENT_NAME}`, className);
+
+    return <Link ref={ref} className={classes} {...rest} />;
+  },
+) as ForwardRefExoticComponent<SignInLinkProps> & WithWrapperProps;
+
+SignInLink.displayName = COMPONENT_NAME;
+SignInLink.muiName = COMPONENT_NAME;
+
+export default SignInLink;