@authing/react-ui-components 3.0.0-alpha → 3.0.0-rc.3

package/components/_utils/popupCenter.ts

@@ -1,48 +0,0 @@
-/**
- * 在屏幕中心弹出新窗口加载 url
- * @param url
- * @param param1
- */
-export const popupCenter = (
-  url: string,
-  { w, h }: { w: number; h: number } = { w: 585, h: 649 }
-) => {
-  // Fixes dual-screen position                             Most browsers      Firefox
-  const dualScreenLeft =
-    window.screenLeft !== undefined ? window.screenLeft : window.screenX
-  const dualScreenTop =
-    window.screenTop !== undefined ? window.screenTop : window.screenY
-
-  const width = window.innerWidth
-    ? window.innerWidth
-    : document.documentElement.clientWidth
-    ? document.documentElement.clientWidth
-    : window.screen.width
-  const height = window.innerHeight
-    ? window.innerHeight
-    : document.documentElement.clientHeight
-    ? document.documentElement.clientHeight
-    : window.screen.height
-
-  const systemZoom = width / window.screen.availWidth
-  const left = (width - w) / 2 / systemZoom + dualScreenLeft
-  const top = (height - h) / 2 / systemZoom + dualScreenTop
-  const newWindow = window.open(
-    url,
-    '_blank',
-    `
-        toolbar=no,
-        menubar=no,
-        scrollbars=no,
-        resizable=no,
-        location=no,
-        status=no
-        width=${w / systemZoom}, 
-        height=${h / systemZoom}, 
-        top=${top}, 
-        left=${left}
-        `
-  )
-
-  newWindow?.focus()
-}

package/components/context/base.tsx

@@ -1,28 +0,0 @@
-import React from 'react'
-
-// create context with no upfront defaultValue
-// without having to do undefined check all the time
-export function createBaseContext<C>() {
-  const ctx = React.createContext<C | undefined>(undefined)
-  function useBaseContext() {
-    const ctxConst = React.useContext(ctx)
-    if (!ctxConst)
-      throw new Error('useBaseContext must be inside a Provider with a value')
-    return ctxConst
-  }
-  // make TypeScript infer a tuple, not an array of union types
-  return [ctx, useBaseContext] as const
-}
-
-export interface IBaseAction<ActionType = string> {
-  type: ActionType & string
-  payload?: any
-  [key: string]: string
-}
-
-export interface IBaseContext<S> {
-  state: S
-  [k: string]: any
-}
-
-export type BaseContextComponent<Props> = React.PropsWithChildren<Props>

package/components/context/global/context.tsx

@@ -1,39 +0,0 @@
-import React, { useCallback, useReducer } from 'react'
-import { createBaseContext, IBaseContext, BaseContextComponent } from '../base'
-import { reducer, IState } from './reducer'
-
-// 页面上下文，除了状态外还有公开的方法
-export interface IGuardContext extends IBaseContext<IState> {
-  dispatch: Function
-  getValue: (key: keyof IState) => any
-  setValue: (key: keyof IState, value: any) => void
-}
-
-// 实例化上下文，这里避免了为空检查
-const [Context, useBaseContext] = createBaseContext<IGuardContext>()
-
-export function useGuardContext(): IGuardContext {
-  const guardContext = useBaseContext()
-  // TODO: custom some
-  return guardContext
-}
-
-export function GuardContext({
-  children = null,
-  value,
-}: BaseContextComponent<Record<string, any>>) {
-  const [state, dispatch] = useReducer(reducer, value)
-  const getValue = (key: keyof IState) => state[key]
-  const setValue = useCallback((key: keyof IState, value: any) => {
-    dispatch({ type: 'SET_VALUE', key, value })
-  }, [])
-
-  let ctx: IGuardContext = {
-    state,
-    dispatch,
-    getValue,
-    setValue,
-  }
-
-  return <Context.Provider value={ctx}>{children}</Context.Provider>
-}

package/components/context/global/reducer.tsx

@@ -1,56 +0,0 @@
-import {
-  GuardConfig,
-  ActiveTabs,
-  GuardScenes,
-  UserConfig,
-  GuardEventsHandler,
-  LocalesConfig,
-  Lang,
-} from '../../AuthingGuard/types'
-import { AuthenticationClient } from 'authing-js-sdk'
-import { IBaseAction } from '../base'
-import { ApplicationMfaType } from '../../AuthingGuard/api/appConfig'
-
-export type IState = {
-  config: GuardConfig // 处理后的 Guard 配置
-  userConfig: UserConfig // 用户传入的配置
-  authClient: AuthenticationClient
-  activeTabs: ActiveTabs // 登录、注册方式
-  guardScenes: GuardScenes // 当前在哪个界面
-  guardTitle: string
-  // 需要 mfa 登录时后端返回的错误信息
-  mfaData: {
-    mfaToken: string
-    phone?: string
-    email?: string
-    applicationMfa?: {
-      status: 0 | 1
-      mfaPolicy: ApplicationMfaType
-      sort: number
-    }[]
-  }
-  userPoolId: string
-  appId: string
-  guardEvents: GuardEventsHandler
-  localesConfig: LocalesConfig
-  lang?: Lang
-  realHost: string
-}
-
-const handlers: any = {
-  // eslint-disable-next-line
-  ['SET_VALUE']: (state: IState, payloads: any) => {
-    return {
-      ...state,
-      [payloads.key]: payloads.value,
-    }
-  },
-}
-
-export const reducer = (state: IState, { type, ...payloads }: IBaseAction) => {
-  const handler = handlers[type]
-  if (handler) {
-    return handler(state, payloads)
-  }
-  return state
-}

package/components/context/module/context.tsx

@@ -1,23 +0,0 @@
-import React, { FC } from 'react'
-import { GuardModuleType } from '../../Guard/module'
-import { createBaseContext } from '../base'
-
-export interface IModuleContext {
-  module: string
-  changeModule: React.Dispatch<GuardModuleType>
-  setInitData: React.Dispatch<any>
-}
-
-const [Context, useBaseContext] = createBaseContext<IModuleContext>()
-
-export const useModule: () => IModuleContext = () => {
-  const guardContext = useBaseContext()
-
-  return guardContext
-}
-
-export const ModuleContext: FC<{
-  value: IModuleContext
-}> = ({ children = null, value }) => {
-  return <Context.Provider value={value}>{children}</Context.Provider>
-}

package/components/index.ts

@@ -1,10 +0,0 @@
-import { AuthingGuard } from './AuthingGuard'
-
-export * from './AuthingGuard/types'
-export * from './AuthingGuard/hooks'
-export type { AuthenticationClientOptions } from 'authing-js-sdk'
-
-export { AuthingGuard }
-
-export type { GuardProps } from './Guard'
-export { default as Guard } from './Guard'

package/config/antdReplacer.js

@@ -1,51 +0,0 @@
-/**
- * 全面提高 antd 样式优先级
- * https://juejin.cn/post/6844904116288749581#heading-8
- * https://github.com/fi3ework/postcss-rename-selector/blob/master/src/presets/antd.ts
- *  */
-
-const parser = require('postcss-selector-parser')
-
-function antdScopeReplacerFn(node) {
-  if (node.type !== 'selector') return
-
-  const firstAntClassNodeIndex = node.nodes.findIndex((n) => {
-    return n.type === 'class' && n.value.startsWith('authing-')
-  })
-  if (firstAntClassNodeIndex < 0) return
-
-  const firstAntClassNode = node.nodes[firstAntClassNodeIndex]
-  const prevNode = node.nodes[firstAntClassNodeIndex - 1]
-
-  // preserve line break
-  const spaces = {
-    before: firstAntClassNode.rawSpaceBefore,
-    after: firstAntClassNode.rawSpaceAfter,
-  }
-
-  firstAntClassNode.setPropertyWithoutEscape('rawSpaceBefore', '')
-  const toInsert = []
-
-  if (firstAntClassNodeIndex === 0 || prevNode.type === 'combinator') {
-    const universal = parser.universal({
-      value: '*',
-    })
-    toInsert.push(universal)
-  }
-
-  const attr = parser.attribute({
-    attribute: 'class',
-    operator: '*=',
-    value: `"authing-"`,
-    raws: {},
-  })
-
-  toInsert.push(attr)
-  toInsert[0].spaces = spaces
-
-  firstAntClassNode.parent.nodes.splice(firstAntClassNodeIndex, 0, ...toInsert)
-}
-
-module.exports = {
-  antdScopeReplacerFn,
-}

package/config/env.js

@@ -1,104 +0,0 @@
-const fs = require('fs')
-const path = require('path')
-const paths = require('./paths')
-
-// Make sure that including paths.js after env.js will read .env variables.
-delete require.cache[require.resolve('./paths')]
-
-const NODE_ENV = process.env.NODE_ENV
-if (!NODE_ENV) {
-  throw new Error(
-    'The NODE_ENV environment variable is required but was not specified.'
-  )
-}
-
-// https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use
-const dotenvFiles = [
-  `${paths.dotenv}.${NODE_ENV}.local`,
-  // Don't include `.env.local` for `test` environment
-  // since normally you expect tests to produce the same
-  // results for everyone
-  NODE_ENV !== 'test' && `${paths.dotenv}.local`,
-  `${paths.dotenv}.${NODE_ENV}`,
-  paths.dotenv,
-].filter(Boolean)
-
-// Load environment variables from .env* files. Suppress warnings using silent
-// if this file is missing. dotenv will never modify any environment variables
-// that have already been set.  Variable expansion is supported in .env files.
-// https://github.com/motdotla/dotenv
-// https://github.com/motdotla/dotenv-expand
-dotenvFiles.forEach((dotenvFile) => {
-  if (fs.existsSync(dotenvFile)) {
-    require('dotenv-expand')(
-      require('dotenv').config({
-        path: dotenvFile,
-      })
-    )
-  }
-})
-
-// We support resolving modules according to `NODE_PATH`.
-// This lets you use absolute paths in imports inside large monorepos:
-// https://github.com/facebook/create-react-app/issues/253.
-// It works similar to `NODE_PATH` in Node itself:
-// https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders
-// Note that unlike in Node, only *relative* paths from `NODE_PATH` are honored.
-// Otherwise, we risk importing Node.js core modules into an app instead of webpack shims.
-// https://github.com/facebook/create-react-app/issues/1023#issuecomment-265344421
-// We also resolve them to make sure all tools using them work consistently.
-const appDirectory = fs.realpathSync(process.cwd())
-process.env.NODE_PATH = (process.env.NODE_PATH || '')
-  .split(path.delimiter)
-  .filter((folder) => folder && !path.isAbsolute(folder))
-  .map((folder) => path.resolve(appDirectory, folder))
-  .join(path.delimiter)
-
-// Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be
-// injected into the application via DefinePlugin in webpack configuration.
-const REACT_APP = /^REACT_APP_/i
-
-function getClientEnvironment(publicUrl) {
-  const raw = Object.keys(process.env)
-    .filter((key) => REACT_APP.test(key))
-    .reduce(
-      (env, key) => {
-        env[key] = process.env[key]
-        return env
-      },
-      {
-        // Useful for determining whether we’re running in production mode.
-        // Most importantly, it switches React into the correct mode.
-        NODE_ENV: process.env.NODE_ENV || 'development',
-        // Useful for resolving the correct path to static assets in `public`.
-        // For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
-        // This should only be used as an escape hatch. Normally you would put
-        // images into the `src` and `import` them in code to get their paths.
-        PUBLIC_URL: publicUrl,
-        // We support configuring the sockjs pathname during development.
-        // These settings let a developer run multiple simultaneous projects.
-        // They are used as the connection `hostname`, `pathname` and `port`
-        // in webpackHotDevClient. They are used as the `sockHost`, `sockPath`
-        // and `sockPort` options in webpack-dev-server.
-        WDS_SOCKET_HOST: process.env.WDS_SOCKET_HOST,
-        WDS_SOCKET_PATH: process.env.WDS_SOCKET_PATH,
-        WDS_SOCKET_PORT: process.env.WDS_SOCKET_PORT,
-        // Whether or not react-refresh is enabled.
-        // react-refresh is not 100% stable at this time,
-        // which is why it's disabled by default.
-        // It is defined here so it is available in the webpackHotDevClient.
-        FAST_REFRESH: process.env.FAST_REFRESH !== 'false',
-      }
-    )
-  // Stringify all values so we can feed into webpack DefinePlugin
-  const stringified = {
-    'process.env': Object.keys(raw).reduce((env, key) => {
-      env[key] = JSON.stringify(raw[key])
-      return env
-    }, {}),
-  }
-
-  return { raw, stringified }
-}
-
-module.exports = getClientEnvironment

package/config/getHttpsConfig.js

@@ -1,66 +0,0 @@
-'use strict';
-
-const fs = require('fs');
-const path = require('path');
-const crypto = require('crypto');
-const chalk = require('react-dev-utils/chalk');
-const paths = require('./paths');
-
-// Ensure the certificate and key provided are valid and if not
-// throw an easy to debug error
-function validateKeyAndCerts({ cert, key, keyFile, crtFile }) {
-  let encrypted;
-  try {
-    // publicEncrypt will throw an error with an invalid cert
-    encrypted = crypto.publicEncrypt(cert, Buffer.from('test'));
-  } catch (err) {
-    throw new Error(
-      `The certificate "${chalk.yellow(crtFile)}" is invalid.\n${err.message}`
-    );
-  }
-
-  try {
-    // privateDecrypt will throw an error with an invalid key
-    crypto.privateDecrypt(key, encrypted);
-  } catch (err) {
-    throw new Error(
-      `The certificate key "${chalk.yellow(keyFile)}" is invalid.\n${
-        err.message
-      }`
-    );
-  }
-}
-
-// Read file and throw an error if it doesn't exist
-function readEnvFile(file, type) {
-  if (!fs.existsSync(file)) {
-    throw new Error(
-      `You specified ${chalk.cyan(
-        type
-      )} in your env, but the file "${chalk.yellow(file)}" can't be found.`
-    );
-  }
-  return fs.readFileSync(file);
-}
-
-// Get the https config
-// Return cert files if provided in env, otherwise just true or false
-function getHttpsConfig() {
-  const { SSL_CRT_FILE, SSL_KEY_FILE, HTTPS } = process.env;
-  const isHttps = HTTPS === 'true';
-
-  if (isHttps && SSL_CRT_FILE && SSL_KEY_FILE) {
-    const crtFile = path.resolve(paths.appPath, SSL_CRT_FILE);
-    const keyFile = path.resolve(paths.appPath, SSL_KEY_FILE);
-    const config = {
-      cert: readEnvFile(crtFile, 'SSL_CRT_FILE'),
-      key: readEnvFile(keyFile, 'SSL_KEY_FILE'),
-    };
-
-    validateKeyAndCerts({ ...config, keyFile, crtFile });
-    return config;
-  }
-  return isHttps;
-}
-
-module.exports = getHttpsConfig;

package/config/jest/cssTransform.js

@@ -1,14 +0,0 @@
-'use strict';
-
-// This is a custom Jest transformer turning style imports into empty objects.
-// http://facebook.github.io/jest/docs/en/webpack.html
-
-module.exports = {
-  process() {
-    return 'module.exports = {};';
-  },
-  getCacheKey() {
-    // The output is always the same.
-    return 'cssTransform';
-  },
-};

package/config/jest/fileTransform.js

@@ -1,40 +0,0 @@
-'use strict';
-
-const path = require('path');
-const camelcase = require('camelcase');
-
-// This is a custom Jest transformer turning file imports into filenames.
-// http://facebook.github.io/jest/docs/en/webpack.html
-
-module.exports = {
-  process(src, filename) {
-    const assetFilename = JSON.stringify(path.basename(filename));
-
-    if (filename.match(/\.svg$/)) {
-      // Based on how SVGR generates a component name:
-      // https://github.com/smooth-code/svgr/blob/01b194cf967347d43d4cbe6b434404731b87cf27/packages/core/src/state.js#L6
-      const pascalCaseFilename = camelcase(path.parse(filename).name, {
-        pascalCase: true,
-      });
-      const componentName = `Svg${pascalCaseFilename}`;
-      return `const React = require('react');
-      module.exports = {
-        __esModule: true,
-        default: ${assetFilename},
-        ReactComponent: React.forwardRef(function ${componentName}(props, ref) {
-          return {
-            $$typeof: Symbol.for('react.element'),
-            type: 'svg',
-            ref: ref,
-            key: null,
-            props: Object.assign({}, props, {
-              children: ${assetFilename}
-            })
-          };
-        }),
-      };`;
-    }
-
-    return `module.exports = ${assetFilename};`;
-  },
-};

package/config/modules.js

@@ -1,134 +0,0 @@
-'use strict';
-
-const fs = require('fs');
-const path = require('path');
-const paths = require('./paths');
-const chalk = require('react-dev-utils/chalk');
-const resolve = require('resolve');
-
-/**
- * Get additional module paths based on the baseUrl of a compilerOptions object.
- *
- * @param {Object} options
- */
-function getAdditionalModulePaths(options = {}) {
-  const baseUrl = options.baseUrl;
-
-  if (!baseUrl) {
-    return '';
-  }
-
-  const baseUrlResolved = path.resolve(paths.appPath, baseUrl);
-
-  // We don't need to do anything if `baseUrl` is set to `node_modules`. This is
-  // the default behavior.
-  if (path.relative(paths.appNodeModules, baseUrlResolved) === '') {
-    return null;
-  }
-
-  // Allow the user set the `baseUrl` to `appSrc`.
-  if (path.relative(paths.appSrc, baseUrlResolved) === '') {
-    return [paths.appSrc];
-  }
-
-  // If the path is equal to the root directory we ignore it here.
-  // We don't want to allow importing from the root directly as source files are
-  // not transpiled outside of `src`. We do allow importing them with the
-  // absolute path (e.g. `src/Components/Button.js`) but we set that up with
-  // an alias.
-  if (path.relative(paths.appPath, baseUrlResolved) === '') {
-    return null;
-  }
-
-  // Otherwise, throw an error.
-  throw new Error(
-    chalk.red.bold(
-      "Your project's `baseUrl` can only be set to `src` or `node_modules`." +
-        ' Create React App does not support other values at this time.'
-    )
-  );
-}
-
-/**
- * Get webpack aliases based on the baseUrl of a compilerOptions object.
- *
- * @param {*} options
- */
-function getWebpackAliases(options = {}) {
-  const baseUrl = options.baseUrl;
-
-  if (!baseUrl) {
-    return {};
-  }
-
-  const baseUrlResolved = path.resolve(paths.appPath, baseUrl);
-
-  if (path.relative(paths.appPath, baseUrlResolved) === '') {
-    return {
-      src: paths.appSrc,
-    };
-  }
-}
-
-/**
- * Get jest aliases based on the baseUrl of a compilerOptions object.
- *
- * @param {*} options
- */
-function getJestAliases(options = {}) {
-  const baseUrl = options.baseUrl;
-
-  if (!baseUrl) {
-    return {};
-  }
-
-  const baseUrlResolved = path.resolve(paths.appPath, baseUrl);
-
-  if (path.relative(paths.appPath, baseUrlResolved) === '') {
-    return {
-      '^src/(.*)$': '<rootDir>/src/$1',
-    };
-  }
-}
-
-function getModules() {
-  // Check if TypeScript is setup
-  const hasTsConfig = fs.existsSync(paths.appTsConfig);
-  const hasJsConfig = fs.existsSync(paths.appJsConfig);
-
-  if (hasTsConfig && hasJsConfig) {
-    throw new Error(
-      'You have both a tsconfig.json and a jsconfig.json. If you are using TypeScript please remove your jsconfig.json file.'
-    );
-  }
-
-  let config;
-
-  // If there's a tsconfig.json we assume it's a
-  // TypeScript project and set up the config
-  // based on tsconfig.json
-  if (hasTsConfig) {
-    const ts = require(resolve.sync('typescript', {
-      basedir: paths.appNodeModules,
-    }));
-    config = ts.readConfigFile(paths.appTsConfig, ts.sys.readFile).config;
-    // Otherwise we'll check if there is jsconfig.json
-    // for non TS projects.
-  } else if (hasJsConfig) {
-    config = require(paths.appJsConfig);
-  }
-
-  config = config || {};
-  const options = config.compilerOptions || {};
-
-  const additionalModulePaths = getAdditionalModulePaths(options);
-
-  return {
-    additionalModulePaths: additionalModulePaths,
-    webpackAliases: getWebpackAliases(options),
-    jestAliases: getJestAliases(options),
-    hasTsConfig,
-  };
-}
-
-module.exports = getModules();

package/config/paths.js

@@ -1,71 +0,0 @@
-const path = require('path')
-const fs = require('fs')
-const getPublicUrlOrPath = require('react-dev-utils/getPublicUrlOrPath')
-
-// Make sure any symlinks in the project folder are resolved:
-// https://github.com/facebook/create-react-app/issues/637
-const appDirectory = fs.realpathSync(process.cwd())
-const resolveApp = (relativePath) => path.resolve(appDirectory, relativePath)
-
-// We use `PUBLIC_URL` environment variable or "homepage" field to infer
-// "public path" at which the app is served.
-// webpack needs to know it to put the right <script> hrefs into HTML even in
-// single-page apps that may serve index.html for nested URLs like /todos/42.
-// We can't use a relative path in HTML because we don't want to load something
-// like /todos/42/static/js/bundle.7289d.js. We have to know the root.
-const publicUrlOrPath = getPublicUrlOrPath(
-  process.env.NODE_ENV === 'development',
-  require(resolveApp('package.json')).homepage,
-  process.env.PUBLIC_URL
-)
-
-const moduleFileExtensions = [
-  'web.mjs',
-  'mjs',
-  'web.js',
-  'js',
-  'web.ts',
-  'ts',
-  'web.tsx',
-  'tsx',
-  'json',
-  'web.jsx',
-  'jsx',
-]
-
-// Resolve file paths in the same order as webpack
-const resolveModule = (resolveFn, filePath) => {
-  const extension = moduleFileExtensions.find((extension) =>
-    fs.existsSync(resolveFn(`${filePath}.${extension}`))
-  )
-
-  if (extension) {
-    return resolveFn(`${filePath}.${extension}`)
-  }
-
-  return resolveFn(`${filePath}.js`)
-}
-
-// config after eject: we're in ./config/
-module.exports = {
-  dotenv: resolveApp('.env'),
-  appPath: resolveApp('.'),
-  appBuild: resolveApp('build'),
-  appPublic: resolveApp('public'),
-  appHtml: resolveApp('public/index.html'),
-  appIndexJs: resolveModule(resolveApp, 'examples'),
-  appPackageJson: resolveApp('package.json'),
-  appSrc: resolveApp(''),
-  appTsConfig: resolveApp('tsconfig.json'),
-  appJsConfig: resolveApp('jsconfig.json'),
-  yarnLockFile: resolveApp('yarn.lock'),
-  testsSetup: resolveModule(resolveApp, 'src/setupTests'),
-  proxySetup: resolveApp('src/setupProxy.js'),
-  appNodeModules: resolveApp('node_modules'),
-  swSrc: resolveModule(resolveApp, 'src/service-worker'),
-  componentsIndexJs: resolveApp('components/index'),
-  libBuild: resolveApp('lib'),
-  publicUrlOrPath,
-}
-
-module.exports.moduleFileExtensions = moduleFileExtensions