@authing/react-ui-components 3.0.1-alpha.2 → 3.0.1-beta.2

package/lib/version/index.d.ts

@@ -0,0 +1,2 @@
+import version from './version';
+export default version;

package/lib/version/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _version = _interopRequireDefault(require("./version"));
+
+var _default = _version.default;
+exports.default = _default;

package/lib/version/version.d.ts

@@ -0,0 +1,2 @@
+declare const _default: "3.0.1-beta.2";
+export default _default;

package/lib/version/version.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _default = '3.0.1-beta.2';
+exports.default = _default;

package/package.json

@@ -1,28 +1,54 @@
 {
   "name": "@authing/react-ui-components",
-  "version": "3.0.1-alpha.2",
-  "framework": "React",
+  "version": "3.0.1-beta.2",
   "private": false,
-  "main": "lib/index.min.js",
+  "main": "lib/index.js",
   "typings": "lib/index.d.ts",
+  "module": "es/index.js",
+  "types": "react-app-env.d.ts",
+  "files": [
+    "dist",
+    "lib",
+    "es"
+  ],
+  "sideEffects": [
+    "dist/*",
+    "es/**/style/*",
+    "lib/**/style/*",
+    "*.less"
+  ],
   "dependencies": {
-    "antd": "^4.8.0",
-    "authing-js-sdk": "4.22.18",
+    "@babel/runtime-corejs3": "^7.0.0",
     "face-api.js": "^0.22.2",
+    "fastclick": "^1.0.6",
     "global": "^4.4.0",
+    "prop-types": "^15.7.2",
     "qs": "^6.9.4",
-    "react-use": "^17.3.1"
+    "react-use": "^17.3.1",
+    "authing-js-sdk": ">=4.23.3",
+    "i18next": "^20.1.0",
+    "i18next-browser-languagedetector": "^6.1.0",
+    "react-i18next": "^11.8.12"
   },
-  "types": "react-app-env.d.ts",
   "peerDependencies": {
-    "react": "16.14.0",
-    "react-dom": "16.14.0"
+    "react": ">=16.9.0",
+    "react-dom": ">=16.9.0"
   },
   "scripts": {
-    "start": "PORT=3006 node scripts/start.js",
-    "build": "node scripts/build.js",
-    "build:lib": "node scripts/lib.js",
-    "test": "node scripts/test.js"
+    "build": "npm run clean && npm run build:types && gulp",
+    "build:types": "tsc -p tsconfig.build.json && cpr lib es",
+    "build:dist": "node ./scripts/lib.js",
+    "build:lib": "npm run clean && npm run build:types && gulp && npm run build:dist",
+    "clean": "rimraf lib es dist",
+    "log-tag": "node ./scripts/tag.js",
+    "prebuild:lib": "npm run version",
+    "pretty-quick": "pretty-quick",
+    "prestart": "npm run log-tag && npm run version && npm run generate-examples",
+    "prepare": "cd ../.. && husky install packages/react-components/.husky",
+    "pub": "npm run build:lib && node ./scripts/publish.js",
+    "start": "PORT=1221 node ./scripts/start.js",
+    "version": "node ./scripts/generate-version",
+    "generate-examples": "node ./scripts/generate-examples.js"
   },
   "publishConfig": {
     "access": "public",
@@ -34,78 +60,14 @@
       "react-app/jest"
     ]
   },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  },
-  "jest": {
-    "roots": [
-      "<rootDir>/components"
-    ],
-    "collectCoverageFrom": [
-      "components/**/*.{js,jsx,ts,tsx}",
-      "!components/**/*.d.ts"
-    ],
-    "setupFiles": [
-      "react-app-polyfill/jsdom"
-    ],
-    "setupFilesAfterEnv": [
-      "<rootDir>/components/setupTests.ts"
-    ],
-    "testMatch": [
-      "<rootDir>/components/**/__tests__/**/*.{js,jsx,ts,tsx}",
-      "<rootDir>/components/**/*.{spec,test}.{js,jsx,ts,tsx}"
-    ],
-    "testEnvironment": "jsdom",
-    "testRunner": "/Users/lixpng/workspace/authing/ui-components/packages/react-components/node_modules/jest-circus/runner.js",
-    "transform": {
-      "^.+\\.(js|jsx|mjs|cjs|ts|tsx)$": "<rootDir>/node_modules/babel-jest",
-      "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
-      "^(?!.*\\.(js|jsx|mjs|cjs|ts|tsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
-    },
-    "transformIgnorePatterns": [
-      "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs|cjs|ts|tsx)$",
-      "^.+\\.module\\.(css|sass|scss)$"
-    ],
-    "modulePaths": [],
-    "moduleNameMapper": {
-      "^react-native$": "react-native-web",
-      "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy"
-    },
-    "moduleFileExtensions": [
-      "web.js",
-      "js",
-      "web.ts",
-      "ts",
-      "web.tsx",
-      "tsx",
-      "json",
-      "web.jsx",
-      "jsx",
-      "node"
-    ],
-    "watchPlugins": [
-      "jest-watch-typeahead/filename",
-      "jest-watch-typeahead/testname"
-    ],
-    "resetMocks": true
-  },
-  "babel": {
-    "presets": [
-      "react-app"
-    ]
-  },
   "devDependencies": {
     "@ant-design/icons": "^4.2.2",
-    "@babel/core": "7.12.3",
+    "@babel/core": "^7.0.0",
+    "@babel/plugin-proposal-class-properties": "^7.0.0",
+    "@babel/plugin-transform-runtime": "^7.0.0",
+    "@babel/preset-env": "^7.0.0",
+    "@babel/preset-react": "^7.0.0",
+    "@babel/preset-typescript": "^7.0.0",
     "@pmmmwh/react-refresh-webpack-plugin": "0.4.2",
     "@svgr/webpack": "5.4.0",
     "@testing-library/jest-dom": "^5.11.4",
@@ -120,6 +82,7 @@
     "@types/shortid": "^0.0.29",
     "@typescript-eslint/eslint-plugin": "^4.5.0",
     "@typescript-eslint/parser": "^4.5.0",
+    "@vitejs/plugin-react": "1.1.0",
     "babel-eslint": "^10.1.0",
     "babel-jest": "^26.6.0",
     "babel-loader": "8.1.0",
@@ -129,6 +92,9 @@
     "bfj": "^7.0.2",
     "camelcase": "^6.1.0",
     "case-sensitive-paths-webpack-plugin": "2.3.0",
+    "chalk": "^4.1.2",
+    "cpr": "^3.0.1",
+    "cross-env": "^7.0.3",
     "css-loader": "4.3.0",
     "dotenv": "8.2.0",
     "dotenv-expand": "5.1.0",
@@ -146,9 +112,18 @@
     "eslint-webpack-plugin": "^2.1.0",
     "file-loader": "6.1.1",
     "fs-extra": "^9.0.1",
+    "gulp": "^4.0.2",
+    "gulp-autoprefixer": "^8.0.0",
+    "gulp-babel": "^8.0.0",
+    "gulp-concat": "^2.6.1",
+    "gulp-cssnano": "^2.1.3",
+    "gulp-less": "^5.0.0",
+    "gulp-minify-css": "^1.2.4",
+    "gulp-rename": "^2.0.0",
+    "gulp-sourcemaps": "^3.0.0",
+    "gulp-uglify": "^3.0.2",
     "html-webpack-plugin": "4.5.0",
-    "i18next": "^20.1.0",
-    "i18next-browser-languagedetector": "^6.1.0",
+    "husky": "^7.0.4",
     "identity-obj-proxy": "3.0.0",
     "jest": "26.6.0",
     "jest-circus": "26.6.0",
@@ -167,26 +142,30 @@
     "postcss-rename-selector": "^0.1.1",
     "postcss-safe-parser": "5.0.2",
     "prettier": "^2.1.2",
+    "pretty-quick": "^3.0.0",
     "query-string": "^7.0.0",
     "react": "16.14.0",
     "react-app-polyfill": "^2.0.0",
     "react-dev-utils": "^11.0.0",
     "react-dom": "16.14.0",
-    "react-i18next": "^11.8.12",
     "react-refresh": "^0.8.3",
     "resolve": "1.18.1",
     "resolve-url-loader": "^3.1.2",
+    "rimraf": "^3.0.2",
     "sass-loader": "8.0.2",
     "semver": "7.3.2",
+    "shelljs": "^0.8.4",
     "shortid": "^2.2.16",
     "style-loader": "1.3.0",
     "terser-webpack-plugin": "4.2.3",
+    "through2": "^4.0.2",
     "ts-pnp": "1.2.0",
     "typescript": "^4.0.3",
     "url-loader": "4.1.1",
     "web-vitals": "^0.2.4",
     "webpack": "4.44.2",
     "webpack-bundle-analyzer": "^4.1.0",
+    "webpack-cli": "^4.9.1",
     "webpack-dev-server": "3.11.0",
     "webpack-manifest-plugin": "2.2.0",
     "workbox-webpack-plugin": "5.1.4"

package/.eslintignore

@@ -1,6 +0,0 @@
-# /node_modules/* and /bower_components/* ignored by default
-
-# Ignore built files except build/index.js
-build/*
-lib/*
-iconfont.js

package/.eslintrc.js

@@ -1,7 +0,0 @@
-module.exports = {
-  extends: ['react-app'],
-  plugins: ['prettier'],
-  rules: {
-    'prettier/prettier': 'error',
-  },
-}

package/.prettierrc

@@ -1,5 +0,0 @@
-{
-  "singleQuote": true,
-  "semi": false,
-  "trailingComma": "es5"
-}

package/.vscode/settings.json

@@ -1,31 +0,0 @@
-{
-  "eslint.validate": [
-    "javascript",
-    "javascriptreact",
-    "typescript",
-    "typescriptreact"
-  ],
-  "files.associations": {
-    "*.mw.json": "jsonc",
-    "*.icon": "xml"
-  },
-  "cssModules.camelCase": true,
-  "editor.snippetSuggestions": "top",
-  "emmet.showSuggestionsAsSnippets": true,
-  "editor.formatOnSave": true,
-  "editor.defaultFormatter": "esbenp.prettier-vscode",
-  "typescript.tsdk": "node_modules/typescript/lib",
-  "editor.codeActionsOnSave": {
-    "source.fixAll": true
-  },
-  "prettier.printWidth": 120,
-  "prettier.singleQuote": false,
-  "prettier.semi": true,
-  "i18n-ally.localesPaths": "components/_utils/locales",
-  "i18n-ally.displayLanguage": "zh",
-  "i18n-ally.keystyle": "nested",
-  "i18n-ally.annotations": true,
-  "i18n-ally.extract.targetPickingStrategy": "file-previous",
-  "i18n-ally.namespace": true,
-  "i18n-ally.sourceLanguage": "zh"
-}

package/components/AuthingDropdown/index.tsx

@@ -1,52 +0,0 @@
-import { DownOutlined } from '@ant-design/icons'
-import React, { FC, useState } from 'react'
-import { getClassnames } from '../_utils'
-
-import './style.less'
-
-/**
- * 不使用 antd 的 dropdown，因为里面会用 tooltip，体积过大
- */
-export const AuthingDropdown: FC<{
-  className?: string
-  menus: {
-    label: React.ReactNode
-    key: string | number
-    onClick?: (
-      key: string | number,
-      evt: React.MouseEvent<HTMLDivElement, MouseEvent>
-    ) => void
-  }[]
-}> = ({ menus, children, className }) => {
-  const [visible, setVisible] = useState(false)
-
-  return (
-    <div
-      className={getClassnames(['authing-dropdown', className])}
-      onMouseEnter={() => setVisible(true)}
-      onMouseLeave={() => setVisible(false)}
-    >
-      <div className="authing-dropdown-trigger">{children}</div>
-      <div
-        className={getClassnames([
-          'authing-dropdown-menu-container',
-          visible && 'authing-dropdown-menu-container__visible',
-        ])}
-      >
-        {menus.map((item) => (
-          <div
-            className="authing-dropdown-menu-item"
-            onClick={(evt) => {
-              setVisible(false)
-              item.onClick?.(item.key, evt)
-            }}
-            key={item.key}
-          >
-            {item.label}
-          </div>
-        ))}
-      </div>
-      <DownOutlined className="authing-dropdown-icon" />
-    </div>
-  )
-}

package/components/AuthingGuard/AppMFALayout/index.tsx

@@ -1,74 +0,0 @@
-import { message } from 'antd'
-import { User } from 'authing-js-sdk'
-import React, { FC, useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import { AuthingDropdown } from '../../AuthingDropdown'
-
-import {
-  EmailMfaVerifyForm,
-  SmsMfaVerifyForm,
-} from '../../../components/AuthingGuard/Forms'
-import { useGuardContext } from '../../context/global/context'
-import { ApplicationMfaType, ApplicationMfaTypeLabel } from '../api'
-
-import './style.less'
-
-export interface MfaLayoutProps {}
-
-export const AppMfaLayout: FC<MfaLayoutProps> = () => {
-  const { t } = useTranslation()
-  const {
-    state: { guardEvents, authClient, mfaData },
-  } = useGuardContext()
-
-  const [type, setType] = useState(ApplicationMfaType.SMS)
-
-  const onSuccess = (user: User) => {
-    message.success(t('common.LoginSuccess'))
-    guardEvents.onLogin?.(user, authClient)
-  }
-
-  const onFail = (error: any) => {
-    guardEvents.onLoginError?.(error, authClient)
-  }
-
-  const formProps = {
-    onSuccess,
-    onFail,
-  }
-
-  const formMap = {
-    [ApplicationMfaType.EMAIL]: <EmailMfaVerifyForm {...formProps} />,
-    [ApplicationMfaType.SMS]: <SmsMfaVerifyForm {...formProps} />,
-  }
-
-  const availableMfaType = mfaData.applicationMfa
-    ?.filter(
-      (item) =>
-        item.status && Object.keys(ApplicationMfaType).includes(item.mfaPolicy)
-    )
-    ?.sort((a, b) => a.sort - b.sort)
-    ?.map((item) => ({
-      label: ApplicationMfaTypeLabel()[item.mfaPolicy],
-      key: item.mfaPolicy,
-      onClick() {
-        setType(item.mfaPolicy)
-      },
-    }))
-
-  return (
-    <div className="authing-text-center">
-      {formMap[type]}
-      {(availableMfaType?.length || 0 > 1) && (
-        <AuthingDropdown
-          className="toggle-mfa-dropdown"
-          menus={availableMfaType!}
-        >
-          <span className="authing-toggle-mfa">
-            {t('login.otherVerifyWay')}
-          </span>
-        </AuthingDropdown>
-      )}
-    </div>
-  )
-}

package/components/AuthingGuard/CompleteUserInfoLayout/index.tsx

@@ -1,29 +0,0 @@
-import React, { FC } from 'react'
-import { useTranslation } from 'react-i18next'
-import { useGuardContext } from '../../context/global/context'
-import { CompleteUserInfoForm } from '../Forms/CompleteUserInfoForm'
-
-import './style.less'
-
-export const CompleteUserInfoLayout: FC = () => {
-  const {
-    state: { guardTitle },
-  } = useGuardContext()
-
-  const { t } = useTranslation()
-  return (
-    <div>
-      <h2 className="authing-guard-complete-info-title">
-        {t('common.perfectUserInfo')}
-      </h2>
-
-      <p className="authing-guard-complete-info-msg">
-        {t('common.welcomeDoc', {
-          name: guardTitle,
-        })}
-      </p>
-
-      <CompleteUserInfoForm />
-    </div>
-  )
-}

package/components/AuthingGuard/Forms/ADLoginForm/index.tsx

@@ -1,117 +0,0 @@
-import { Input, Form, message } from 'antd'
-import { FormInstance } from 'antd/lib/form'
-import { UserOutlined, LockOutlined } from '@ant-design/icons'
-import React, { forwardRef, useImperativeHandle, useState } from 'react'
-
-import { useGuardContext } from '../../../context/global/context'
-import {
-  ADLoginFormProps,
-  LoginMethods,
-} from '../../../../components/AuthingGuard/types'
-import { LoginFormFooter } from '../../../../components/AuthingGuard/Forms/LoginFormFooter'
-import { useTranslation } from 'react-i18next'
-import { getRequiredRules } from '../../../_utils'
-
-export const ADLoginForm = forwardRef<FormInstance, ADLoginFormProps>(
-  ({ onSuccess, onValidateFail, onFail }, ref) => {
-    const { t } = useTranslation()
-    const { state } = useGuardContext()
-    const { authClient, guardEvents } = state
-
-    const [loading, setLoading] = useState(false)
-
-    const onFinishFailed = (errorInfo: any) => {
-      setLoading(false)
-      onValidateFail && onValidateFail(errorInfo)
-    }
-
-    const [rawForm] = Form.useForm()
-
-    const onFinish = async (values: any) => {
-      if (guardEvents.onBeforeLogin) {
-        try {
-          const canLogin = await guardEvents.onBeforeLogin(
-            {
-              type: LoginMethods.AD,
-              data: {
-                identity: values.identity,
-                password: values.password,
-              },
-            },
-            authClient
-          )
-
-          if (!canLogin) {
-            setLoading(false)
-            return
-          }
-        } catch (e) {
-          if (typeof e === 'string') {
-            message.error(e)
-          } else {
-            message.error(e.message)
-          }
-          setLoading(false)
-          return
-        }
-      }
-
-      try {
-        const identity = values.identity && values.identity.trim()
-        const password = values.password && values.password.trim()
-        const user = await authClient.loginByAd(identity, password)
-        onSuccess && onSuccess(user)
-      } catch (error) {
-        if (typeof error.message === 'string') {
-          // js sdk httpclient 的报错，这里只有一种情况就是用户开启了 mfa 的报错
-          try {
-            const errorData = JSON.parse(error.message)
-            onFail && onFail(errorData)
-            return
-          } catch (_) {
-            // do nothing
-          }
-        }
-        onFail && onFail(error)
-      } finally {
-        setLoading(false)
-      }
-    }
-
-    useImperativeHandle(ref, () => rawForm)
-
-    return (
-      <Form
-        form={rawForm}
-        onSubmitCapture={() => setLoading(true)}
-        onFinishFailed={onFinishFailed}
-        onFinish={onFinish}
-      >
-        <Form.Item
-          name="identity"
-          rules={getRequiredRules(t('login.inputAdUsername'))}
-        >
-          <Input
-            autoComplete="email,username,tel"
-            size="large"
-            placeholder={t('login.inputAdUsername')}
-            prefix={<UserOutlined style={{ color: '#ddd' }} />}
-          />
-        </Form.Item>
-        <Form.Item
-          name="password"
-          rules={getRequiredRules(t('login.inputAdPwd'))}
-        >
-          <Input.Password
-            autoComplete="current-password"
-            size="large"
-            visibilityToggle={false}
-            placeholder={t('login.inputAdPwd')}
-            prefix={<LockOutlined style={{ color: '#ddd' }} />}
-          />
-        </Form.Item>
-        <LoginFormFooter loading={loading}></LoginFormFooter>
-      </Form>
-    )
-  }
-)

package/components/AuthingGuard/Forms/Agreements/index.tsx

@@ -1,81 +0,0 @@
-import React, { FC, useState, useMemo, useEffect } from 'react'
-import { Space, Checkbox } from 'antd'
-import { Agreement } from '../../api'
-import './style.less'
-import { getClassnames } from '../../../_utils'
-
-export interface AgreementsProps {
-  value?: boolean
-  onChange?: (value: boolean) => void
-  style?: React.CSSProperties
-  agreements: Agreement[]
-  showError?: boolean
-}
-
-export const Agreements: FC<AgreementsProps> = ({
-  showError,
-  onChange = () => {},
-  style,
-  agreements,
-}) => {
-  const [acceptList, setAcceptList] = useState<(string | number)[]>([])
-
-  const toggleItemCheck = (id: string | number) => {
-    setAcceptList((prev) => {
-      if (prev.includes(id)) {
-        return prev.filter((item) => item !== id)
-      }
-      return [...prev, id]
-    })
-  }
-
-  /** 是否可以注册 */
-  const isAccept = useMemo(() => {
-    /** 所有必须勾选的都勾了就可以通过 */
-    return agreements
-      .filter((item) => item.required)
-      .every((item) => acceptList.includes(item.id))
-  }, [acceptList, agreements])
-
-  useEffect(() => {
-    onChange(isAccept)
-  }, [isAccept, onChange])
-
-  return (
-    <div
-      className={getClassnames([
-        'authing-agreements',
-        showError && 'authing-agreements-error',
-      ])}
-    >
-      {agreements.map((item) => {
-        return (
-          <div
-            key={item.id}
-            style={{ ...style }}
-            className={getClassnames([
-              'authing-agreements-item',
-              item.required &&
-                !acceptList.includes(item.id) &&
-                'authing-agreements-item-invalid',
-            ])}
-            onClick={() => toggleItemCheck(item.id)}
-          >
-            <Space align="start" size={5}>
-              <Checkbox
-                className="authing-agreements-checkbox"
-                checked={acceptList.includes(item.id)}
-              />
-              <div
-                className="authing-agreements-item-content"
-                dangerouslySetInnerHTML={{
-                  __html: item.title,
-                }}
-              ></div>
-            </Space>
-          </div>
-        )
-      })}
-    </div>
-  )
-}