diff --git a/.vscode/settings.json b/.vscode/settings.json index fe8912e5..522634ab 100644 --- a/.vscode/settings.json +++ b/.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"] } diff --git a/packages/react/package.json b/packages/react/package.json index e8425fc0..43c060cd 100644 --- a/packages/react/package.json +++ b/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", diff --git a/packages/react/src/oxygen-ui-react-auth-components/SignIn/SignIn.tsx b/packages/react/src/oxygen-ui-react-auth-components/SignIn/SignIn.tsx new file mode 100644 index 00000000..726e995a --- /dev/null +++ b/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 = { + component?: C; +} & Omit; + +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 & WithWrapperProps & SignInCompoundProps = forwardRef( + (props: SignInProps, ref: MutableRefObject): ReactElement => { + const {className, ...rest} = props; + + const classes: string = clsx(`Oxygen${COMPONENT_NAME}`, className); + + return ; + }, +) as ForwardRefExoticComponent & 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; diff --git a/packages/react/src/oxygen-ui-react-auth-components/SignInAlert/SignInAlert.tsx b/packages/react/src/oxygen-ui-react-auth-components/SignInAlert/SignInAlert.tsx new file mode 100644 index 00000000..0cef75cd --- /dev/null +++ b/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 = { + 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 & WithWrapperProps = forwardRef( + (props: SignInAlertProps, ref: MutableRefObject): 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 ; + }, +) as ForwardRefExoticComponent & WithWrapperProps; + +SignInAlert.displayName = COMPONENT_NAME; +SignInAlert.muiName = COMPONENT_NAME; + +export default SignInAlert; diff --git a/packages/react/src/oxygen-ui-react-auth-components/SignInAlert/sign-in-alert.scss b/packages/react/src/oxygen-ui-react-auth-components/SignInAlert/sign-in-alert.scss new file mode 100644 index 00000000..10154369 --- /dev/null +++ b/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; +} diff --git a/packages/react/src/oxygen-ui-react-auth-components/SignInButton/SignInButton.tsx b/packages/react/src/oxygen-ui-react-auth-components/SignInButton/SignInButton.tsx new file mode 100644 index 00000000..acfe8b4a --- /dev/null +++ b/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 = { + component?: C; + social?: boolean; +} & Omit; + +const COMPONENT_NAME: string = 'SignInButton'; + +const SignInButton: ForwardRefExoticComponent & WithWrapperProps = forwardRef( + (props: SignInButtonProps, ref: MutableRefObject): 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