Merge pull request #37 from Angus2333/main

v10.6.0

.gitignore

@@ -28,14 +28,17 @@ coverage
 *.sw?
 
 
-react/node_modules
-react/.env.local
-react/.umirc.local.ts
-react/config/config.local.ts
-react/src/.umi
-react/src/.umi-production
-react/src/.umi-test
-react/dist
+react-demo/node_modules
+react-demo/.env.local
+react-demo/.umirc.local.ts
+react-demo/config/config.local.ts
+react-demo/src/.umi
+react-demo/src/.umi-production
+react-demo/src/.umi-test
+react-demo/dist
+
+im-kit-ui/lib
+im-kit-ui/es
 
 package-lock.json
 yarn.lock

README.md

@@ -2,12 +2,12 @@
 
 本仓库放置了云信 UIKit 的源码和相应的示例代码，可以帮助您快速集成 UIKit 以及深入了解 UIKit。
 
-- [React 用户点击这里](./react/)
-- [Vue 用户点击这里](./vue/)
+- [React 用户点击这里](./react-demo/)
+- [Vue 用户点击这里](./vue3-demo/)
 
 ## 运行效果
 
 Web（React 和 Vue）：<br>
 ![demo](./demo.png)
 
-想了解更多，[点击进入官网](https://doc.yunxin.163.com/messaging/docs/TExNjE0MzQ?platform=web)
+想了解更多，[点击进入官网](https://doc.yunxin.163.com/messaging/docs/TExNjE0MzQ?platform=web)

im-kit-ui/.storybook/_config.js

@@ -0,0 +1,62 @@
+const env = process.env.STORYBOOK_ENV || "dev"; // prod || dev
+
+module.exports = {
+  baseUrl: {
+    dev: "",
+    prod: "",
+  }[env],
+
+  appKey: {
+    dev: "",
+    prod: "",
+  }[env],
+
+  roomkitBaseUrl: {
+    dev: "",
+    prod: "",
+  }[env],
+
+  roomkitAppKey: {
+    dev: "",
+    prod: "",
+  }[env],
+
+  chatroomToken: {
+    dev: "",
+    prod: "",
+  }[env],
+
+  chatroomAccount: {
+    dev: "",
+    prod: "",
+  }[env],
+
+  stories: {
+    dev: ["./**/*.stories.mdx", "../**/*.stories.@(js|jsx|ts|tsx)"],
+    prod: ["./**/*.stories.prod.mdx", "./**/*.stories.prod.@(js|jsx|ts|tsx)"],
+  }[env],
+
+  initOptions: {
+    appkey: "",
+    token: "",
+    account: "",
+    debugLevel: "",
+    lbsUrls: ["https://lbs.netease.im/lbs/webconf.jsp"],
+    linkUrl: "weblink.netease.im",
+  },
+
+  loginOptions: {
+    dev: {
+      baseDomain: "",
+      appKey: "",
+      parentScope: 2,
+      scope: 7,
+    },
+    prod: {
+      baseDomain: "",
+      appKey: "",
+      parentScope: 2,
+      scope: 7,
+    },
+  }[env],
+};

im-kit-ui/.storybook/main.js

@@ -0,0 +1,102 @@
+const _config = require("./_config");
+const webpack = require("webpack");
+
+const env = process.env.STORYBOOK_ENV || "dev"; // prod || dev
+
+module.exports = {
+  reactOptions: {
+    fastRefresh: true,
+    strictMode: true,
+  },
+  core: {
+    builder: {
+      name: "webpack5",
+      options: {
+        fsCache: true,
+      },
+    },
+  },
+  env: (config) => ({
+    ...config,
+    APPKEY: _config.appKey,
+    BASEURL: _config.baseUrl,
+    ROOMKITAPPKEY: _config.roomkitAppKey,
+    ROOMKITBASEURL: _config.roomkitBaseUrl,
+    CHATROOMTOKEN: _config.chatroomToken,
+    CHATROOMACCOUNT: _config.chatroomAccount,
+    INIT_OPTIONS: _config.initOptions,
+    LOGIN_OPTIONS: _config.loginOptions,
+  }),
+  babel: async (options) => {
+    /*
+    options.plugins.push([
+      'import',
+      {
+        libraryName: '@xkit-yx/login-ui-kit',
+        libraryDirectory: 'lib/components',
+        style: true, // or 'css'
+      },
+    ])
+    */
+    return {
+      ...options,
+      plugins: options.plugins.filter(
+        (x) =>
+          !(typeof x === "string" && x.includes("plugin-transform-classes"))
+      ),
+      // any extra options you want to set
+    };
+  },
+  stories: _config.stories,
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+  ],
+  framework: "@storybook/react",
+  webpackFinal: async (config, { configType }) => {
+    config.plugins.push(
+      new webpack.DefinePlugin({
+        "process.env.PLATFORM": JSON.stringify("web"),
+      })
+    );
+
+    if (env === "dev") {
+      config.resolve.extensions = [...config.resolve.extensions, ".d.ts"];
+      config.module.rules.push({
+        test: /\.d.ts$/,
+        use: config.module.rules[0].use,
+        include: [
+          config.module.rules[0].include[0] +
+            "/node_modules/nim-web-sdk-ng/dist",
+        ],
+      });
+      config.resolve.alias = {
+        ...config.resolve.alias,
+      };
+    }
+    config.resolve.extensions = [...config.resolve.extensions, ".d.ts"];
+    config.module.rules.push({
+      test: /\.less$/,
+      use: [
+        "style-loader",
+        "css-loader",
+        {
+          loader: "less-loader",
+          options: {
+            lessOptions: {
+              javascriptEnabled: true,
+            },
+          },
+        },
+      ],
+    });
+    config.module.parser = {
+      ...config.module.parser,
+      javascript: {
+        reexportExportsPresence: "error",
+      },
+    };
+    return config;
+  },
+};

im-kit-ui/.storybook/preview.js

@@ -0,0 +1,9 @@
+export const parameters = {
+  actions: { argTypesRegex: '^on[A-Z].*' },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+}

im-kit-ui/README.md

@@ -0,0 +1,13 @@
+# IM-Kit-UI
+
+网易云信即时通讯 UI Kit
+
+## 运行
+
+执行 npm install 安装依赖 <br>
+在 nim-uikit-web/im-kit-ui/src/example/index.stories.tsx 路径下填写您的 appkey 和 account、token <br>
+执行 npm run storybook 启动开发环境 <br>
+
+## 打包
+
+执行 npm run build 打包，打包后会生成 es 目录，将 es 以及 package.json 放到您项目中后修改引用即可

im-kit-ui/copySourceCode.js

@@ -0,0 +1,100 @@
+const fs = require('fs')
+const readline = require('readline')
+const path = require('path')
+const os = require('os')
+
+const modules = [
+  'im-kit-ui',
+  //   'chat-kit-ui',
+  //   'common-ui',
+  //   'contact-kit-ui',
+  //   'conversation-kit-ui',
+  //   'search-kit-ui',
+]
+
+const getCopiedPath = function (moduleName) {
+  return `./node_modules/@xkit-yx/${moduleName}/`
+}
+
+const getResultPath = function (moduleName) {
+  return `./src/YXUIKit/${moduleName}/`
+}
+
+/*
+function replaceResolvePath(path, ccp) {
+  const relativePath = ccp.replace(__dirname + '/node_modules/@xkit-yx/', '')
+  const prefix = '../'.repeat(relativePath.split('/').length - 1)
+  if (ccp.endsWith('.less')) {
+    // 样式
+    path = path.replace(`'~@xkit-yx/common-ui/es`, `'${prefix}common-ui/src`)
+  }
+  modules.forEach((module) => {
+    // ts
+    path = path.replace(`'@xkit-yx/${module}'`, `'${prefix}${module}/src'`)
+    path = path.replace(`'@xkit-yx/${module}/es`, `'${prefix}${module}/src`)
+    path = path.replace(`'@xkit-yx/${module}/lib`, `'${prefix}${module}/src`)
+  })
+  return path
+}
+*/
+
+function copyFile(copiedPath, resultPath) {
+  copiedPath = path.join(__dirname, copiedPath)
+  resultPath = path.join(__dirname, resultPath)
+
+  fs.copyFileSync(copiedPath, resultPath)
+}
+
+function copyFolder(copiedPath, resultPath, direct) {
+  if (!direct) {
+    copiedPath = path.join(__dirname, copiedPath)
+    resultPath = path.join(__dirname, resultPath)
+  }
+  function createDir(dirPath) {
+    fs.mkdirSync(dirPath, { recursive: true })
+  }
+  if (fs.existsSync(copiedPath)) {
+    createDir(resultPath)
+    const files = fs.readdirSync(copiedPath, { withFileTypes: true })
+    for (let i = 0; i < files.length; i++) {
+      const cf = files[i]
+      const ccp = path.join(copiedPath, cf.name)
+      const crp = path.join(resultPath, cf.name)
+      if (cf.isFile()) {
+        // 过滤 storybook 文件
+        if (cf.name.includes('.stories.')) continue
+        /**
+         * @des 创建文件,使用流的形式可以读写大文件
+         */
+        const readStream = fs.createReadStream(ccp)
+        const writeStream = fs.createWriteStream(crp)
+        const readLine = readline.createInterface({
+          input: readStream,
+        })
+        readLine.on('line', (line) => {
+          //   line = replaceResolvePath(line, ccp)
+          writeStream.write(line + os.EOL)
+        })
+      } else {
+        try {
+          /**
+           * @des 判断读(R_OK | W_OK)写权限
+           */
+          fs.accessSync(path.join(crp, '..'), fs.constants.W_OK)
+          copyFolder(ccp, crp, true)
+        } catch (error) {
+          console.log('folder write error:', error)
+        }
+      }
+    }
+  }
+}
+modules.forEach((module) => {
+  // 复制 src
+  copyFolder(getCopiedPath(module) + 'src', getResultPath(module) + 'src')
+  // 复制 package.json，用于日志上报
+  copyFile(
+    getCopiedPath(module) + 'package.json',
+    getResultPath(module) + 'package.json'
+  )
+})