@dao42/d42paas-front 0.4.5 → 0.4.6

package/src/stores/oTStore.tsx

@@ -0,0 +1,288 @@
+import { Client } from 'ot';
+import qs from 'qs';
+import create from 'zustand';
+import { daopaasDB, GenerateDB, SetDB } from '~/helpers/collections/idb';
+import { persist } from 'zustand/middleware';
+// import { get, set } from 'idb-keyval';
+
+// Web-worker 待补充
+export interface T_UserInfo {
+  playgroundId?: string;
+  operation?: any;
+  uuid?: string;
+  color?: string;
+  name?: string;
+  username?: string;
+  role?: string;
+  avatar?: string;
+  onlineCount?: number;
+  userId?: string;
+  // [x: string]:
+  //   | string
+  //   | number
+  //   | qs.ParsedQs
+  //   | string[]
+  //   | number[]
+  //   | qs.ParsedQs[];
+  // [x: string]: string | qs.ParsedQs | string[] | qs.ParsedQs[];
+}
+
+export interface T_File {
+  valueAndPos?: string;
+  path?: string;
+  value?: string;
+}
+
+export interface T_Query {
+  playgroundId?: string;
+}
+
+export type T_PlaygroundStatus = 'EMPTY' | 'ACTIVE' | 'INACTIVE';
+export type T_DockerStatus = 'RUNNING' | 'STOP';
+
+export interface T_PlaygroundInfo {
+  fileTree?: unknown;
+  framework?: string;
+  frameworkVersion?: string;
+  language?: string;
+  languageVersion?: string;
+  needBrowser?: boolean;
+  needConsole?: boolean;
+  needRunButton?: boolean;
+  url?: string;
+  version?: string;
+  frameWork?: string;
+  frameWorkVersion?: string;
+  status?: string;
+  runStatus?: string;
+  terminalHistory?: string;
+  messageId?: string;
+  playgroundId?: string;
+  result?: string;
+  lspUrl?: string;
+  ticket?: string;
+}
+
+// const IDBStorage = {
+//   getItem: async (name: string): Promise<string | null> => {
+//     // Exit early on server
+//     if (typeof indexedDB === 'undefined') {
+//       return null;
+//     }
+
+//     return (await get(name)) || null;
+//   },
+//   setItem: async (name: string, value: string): Promise<void> => {
+//     // Exit early on server
+//     if (typeof indexedDB === 'undefined') {
+//       return null;
+//     }
+//     set(name, value);
+//   },
+// };
+
+export type StateType = {
+  appStatus: 'code' | 'replay' | 'recording' | 'pause';
+  isRecording: boolean;
+  lspServerDisabled: boolean;
+  setAppStatus: (arg: StateType['appStatus']) => void;
+  setGlobalData: (arg: Pick<StateType, 'isRecording'>) => void;
+  switchLspServer: (arg: boolean) => void;
+  client?: Client;
+  userInfo: T_UserInfo;
+  senders: T_UserInfo[];
+  doc?: T_File;
+  // TODO :FIXED any
+  fileTree?: any;
+  CRDTInfo: D42_FrontType.CRDT;
+  serverAck: number;
+  customAck: number;
+  revision: number;
+  // TO FIXED any
+  dockerInfo: any;
+  globalData: Pick<StateType, 'isRecording'>;
+
+  playgroundInfo: T_PlaygroundInfo;
+  playgroundStatus: T_PlaygroundStatus;
+  dockerStatus: T_DockerStatus;
+  fromServer: boolean;
+  setFromServer: (arg: boolean) => void;
+  queryObject: T_Query;
+  setIsRecording: (arg: boolean) => void;
+  fileSaved: boolean;
+  setFileSaved: (arg: boolean) => void;
+  switchDoc?: (arg: T_File) => void;
+  switchDocTree?: (arg: any) => void;
+  setUserInfo: (arg: T_UserInfo) => void;
+  setSenders: (arg: T_UserInfo[]) => void;
+  setCRDTInfo: (arg: D42_FrontType.CRDT) => void;
+  setServerAck: () => void;
+  setCustomAck: () => void;
+  setVersion: (arg: number) => void;
+  setPlaygroundInfo: (arg: unknown) => void;
+  setDockerInfo: (arg: unknown) => void;
+  setPlaygroundStatus: (arg: T_PlaygroundStatus) => void;
+  setDockerStatus: (arg: T_DockerStatus) => void;
+  setQueryObject: (arg: unknown) => void;
+  setClientInstance: (arg: number) => void;
+};
+
+// console.log();
+
+const QUERY_ARGUMENTS = (qs.parse(location.search.slice(1)) as unknown) as any;
+const user = localStorage.getItem('userInfo');
+// const localUser = user ? JSON.parse(user) : {};
+
+export const oTStore = create<Omit<StateType, 'userInfo' | 'setUserInfo'>>(
+  (set) => ({
+    appStatus: 'code',
+    setAppStatus: (arg) => set(() => ({ appStatus: arg })),
+    fromServer: false,
+    setFromServer: (arg: boolean) => set(() => ({ fromServer: arg })),
+    client: null,
+    senders: [],
+    doc: {},
+    fileTree: {
+      data: {
+        type: 'DIRECTORY',
+        name: '/',
+        children: [],
+      },
+    },
+    isRecording: false,
+    CRDTInfo: ({
+      operation: [],
+      userInfo: {},
+      evtType: '',
+      timestamp: '',
+    } as unknown) as D42_FrontType.CRDT,
+    serverAck: 0,
+    customAck: 0,
+    revision: 0,
+    dockerInfo: {},
+    playgroundInfo: {
+      data: {
+        fileTree: {},
+        framework: '',
+        frameworkVersion: null,
+        language: '',
+        languageVersion: null,
+        needBrowser: true,
+        needConsole: true,
+        needRunButton: true,
+        url: '',
+        version: '',
+        terminalHistory: '',
+      },
+      messageId: '',
+      playgroundId: QUERY_ARGUMENTS.playgroundId,
+      result: '',
+    },
+    playgroundStatus: 'EMPTY',
+    dockerStatus: 'STOP',
+    queryObject: {},
+    globalData: {
+      isRecording: false,
+    },
+    fileSaved: true,
+    lspServerDisabled: false,
+    switchLspServer: (arg) => set(() => ({ lspServerDisabled: arg })),
+    setIsRecording: (arg) => set(() => ({ isRecording: arg })),
+    setFileSaved: (arg) => set(() => ({ fileSaved: arg })),
+    switchDoc: (arg) => set(() => ({ doc: arg })),
+    switchDocTree: (arg) => set(() => ({ fileTree: arg })),
+
+    setSenders: (arg) => set(() => ({ senders: arg })),
+    setCRDTInfo: (arg) => set(() => ({ CRDTInfo: arg })),
+    setServerAck: () =>
+      set(({ serverAck }) => {
+        return {
+          serverAck: serverAck + 1,
+        };
+      }),
+    setCustomAck: () =>
+      set(({ customAck }) => {
+        return {
+          customAck: customAck + 1,
+        };
+      }),
+    setGlobalData: (arg) =>
+      set(({ appStatus }) => {
+        if (
+          arg.hasOwnProperty('isRecording') &&
+          arg.isRecording &&
+          (appStatus === 'replay' || appStatus === 'pause')
+        ) {
+          throw 'dError: 回放中无法录制！';
+          // throw '录制过程中无法回放！';
+        }
+        return {
+          globalData: arg,
+        };
+      }),
+    setVersion: (arg) => set(() => ({ revision: arg })),
+    setPlaygroundInfo: (arg) => set(() => ({ playgroundInfo: arg })),
+    setDockerInfo: (arg) => set(() => ({ dockerInfo: arg })),
+    setPlaygroundStatus: (arg) => set(() => ({ playgroundStatus: arg })),
+    setDockerStatus: (arg) => set(() => ({ dockerStatus: arg })),
+    setQueryObject: (arg) => set(() => ({ queryObject: arg })),
+    setClientInstance: (arg) => set(() => ({ client: new Client(arg) })),
+  }),
+);
+
+export const userStore = create<Pick<StateType, 'userInfo' | 'setUserInfo'>>(
+  persist(
+    (set) => ({
+      userInfo: {
+        ...QUERY_ARGUMENTS,
+      },
+      setUserInfo: (arg) => set(() => ({ userInfo: arg })),
+    }),
+    {
+      name: 'userInfo',
+      getStorage: () => localStorage,
+    },
+  ),
+);
+
+export const userListStore = create<{
+  userList: T_UserInfo[];
+  setUserList: (arg: T_UserInfo[]) => void;
+}>(
+  persist(
+    (set) => ({
+      userList: [],
+      setUserList: (arg) => set(() => ({ userList: arg })),
+    }),
+    {
+      name: 'userList',
+      getStorage: () => ({
+        getItem: async (name: string): Promise<any> => {
+          // Exit early on server
+          if (typeof indexedDB === 'undefined') {
+            return null;
+          }
+          // (await daopaasDB).getAll(name);
+          // const john = await get(name);
+          // debugger;
+          return (await daopaasDB).getAll(name) || null;
+        },
+        setItem: async (name: string, value: string): Promise<void> => {
+          // Exit early on server
+          if (typeof indexedDB === 'undefined') {
+            return null;
+          }
+          (await daopaasDB).put(
+            'users',
+            JSON.parse(value).state[name],
+            'userList',
+          );
+          // set(name, value);
+        },
+        removeItem: async () => {
+          console.log();
+        },
+      }),
+    },
+  ),
+);

package/src/stories/BrowserWindow.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+
+import { Meta } from '@storybook/react';
+
+import BrowserWindow from '~/components/OutputBrowser';
+
+export default {
+  title: '组件/BrowserWindow',
+  component: BrowserWindow,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  argTypes: {
+    url: {
+      description: '输出窗口预览链接',
+      defaultValue: 'http://',
+      type: 'string',
+    },
+  },
+} as Meta;
+
+export const Primary = (args) => (
+  <div style={{ backgroundColor: '#b4e0df', height: '100%' }}>
+    <BrowserWindow {...args} />
+  </div>
+);
+
+Primary.args = {
+  url: 'http://localhost:8080',
+};

package/src/stories/Console.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+
+import { Meta } from '@storybook/react';
+
+import Console from '~/components/Console';
+
+export default {
+  title: '组件/Console',
+  component: Console,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  argTypes: {
+    options: {
+      description: 'Console 配置',
+      type: 'ITerminalOptions',
+    },
+  },
+} as Meta;
+
+export const Primary = (args) => (
+  <div
+    style={{
+      height: '70vh',
+      width: '80vw',
+    }}
+  >
+    <Console {...args} />
+  </div>
+);
+
+Primary.args = {
+  options: {
+    convertEol: true,
+    fontSize: 12,
+    fontFamily: 'Monaco, Menlo, monospace',
+    lineHeight: 1,
+    cursorBlink: true,
+    cursorWidth: 1,
+    cursorStyle: 'block',
+    rightClickSelectsWord: true,
+    theme: {
+      background: '#1E1E1E',
+    },
+  },
+};

package/src/stories/Editor.tsx

@@ -0,0 +1,37 @@
+// Button.stories.js | Button.stories.jsx
+
+import React from 'react';
+
+import { Meta } from '@storybook/react';
+
+import { Editor } from '~/components';
+
+import '../styles/index.scss';
+
+export default {
+  title: '组件/Editor',
+  component: Editor,
+  parameters: {
+    layout: 'fullscreen',
+  },
+} as Meta;
+
+export const Primary = (args) => <Editor {...args} />;
+// export const Primary = (args) => <FileTree {...args} />;
+Primary.args = {
+  doc: '',
+  // users: []
+};
+
+// Primary.storyName = 'Editor';
+// export const LoggedIn = Primary.bind({
+//   // user: {},
+//   doc: '',
+// });
+
+// LoggedIn.args = {
+//   user: {},
+// };
+
+// export const LoggedOut = Template.bind({});
+// LoggedOut.args = {};

package/src/stories/FileTree.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+
+import { Meta } from '@storybook/react';
+
+import { FileTree } from '~/components/FileTree';
+
+export default {
+  title: '组件/FileTree',
+  component: FileTree,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  argTypes: {
+    onCustomSelect: {
+      description: '用户自定义选择操作方法',
+      defaultValue: `null`,
+      type: 'Function',
+    },
+    onCustomExpand: {
+      description: '用户自定义展开操作方法',
+      defaultValue: `null`,
+      type: 'Function',
+    },
+    onCustomCollapse: {
+      description: '用户自定义折叠操作方法',
+      defaultValue: `null`,
+      type: 'Function',
+    },
+    onCustomFocus: {
+      description: '用户自定义聚焦操作方法',
+      defaultValue: `null`,
+      type: 'Function',
+    },
+    onCustomUpload: {
+      description: '用户自定义上传操作方法',
+      defaultValue: `null`,
+      type: 'Function',
+    },
+  },
+} as Meta;
+
+export const Primary = (args) => <FileTree {...args} />;
+
+Primary.args = {
+  onCustomSelect: null,
+  onCustomExpand: null,
+  onCustomCollapse: null,
+  onCustomFocus: null,
+  onCustomUpload: null,
+};

package/src/stories/Shell.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+
+import { Meta } from '@storybook/react';
+import Shell from '~/components/Terminal';
+
+export default {
+  title: '组件/Shell',
+  component: Shell,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  argTypes: {
+    options: {
+      description: 'Shell 配置',
+      type: 'ITerminalOptions',
+    },
+    postUser: {
+      description: '当前操作者',
+      type: 'T_UserInfo',
+    },
+    corTime: {
+      description: '操作发生时的时间戳',
+      type: 'number',
+    },
+  },
+} as Meta;
+
+export const Primary = (args) => (
+  <div
+    style={{
+      height: '70vh',
+      width: '80vw',
+    }}
+  >
+    <Shell {...args} />
+  </div>
+);
+
+Primary.args = {
+  options: {
+    convertEol: true,
+    fontSize: 12,
+    fontFamily: 'Monaco, Menlo, monospace',
+    lineHeight: 1,
+    cursorBlink: true,
+    cursorWidth: 1,
+    cursorStyle: 'block',
+    rightClickSelectsWord: true,
+    theme: {
+      background: '#1E1E1E',
+    },
+  },
+};

package/src/stories/introduction.stories.mdx

@@ -0,0 +1,193 @@
+import { Meta } from '@storybook/addon-docs';
+import Code from '../assets/code-brackets.svg';
+import Colors from '../assets/colors.svg';
+import Comments from '../assets/comments.svg';
+import Direction from '../assets/direction.svg';
+import Flow from '../assets/flow.svg';
+import Plugin from '../assets/plugin.svg';
+import Repo from '../assets/repo.svg';
+import StackAlt from '../assets/stackalt.svg';
+import '../styles/index.scss';
+// import { LottieAnim } from '../components/LottieAnim';
+// import * as LottiePlayer from "@lottiefiles/lottie-player";
+// require("@lottiefiles/lottie-player");
+
+
+<Meta title="使用说明/Introduction" />
+
+<style>{`
+  .subheading {
+    --mediumdark: '#999999';
+    font-weight: 900;
+    font-size: 13px;
+    color: #999;
+    letter-spacing: 6px;
+    line-height: 24px;
+    text-transform: uppercase;
+    margin-bottom: 12px;
+    margin-top: 40px;
+  }
+
+  .link-list {
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr 1fr;
+    row-gap: 10px;
+  }
+
+  @media (min-width: 620px) {
+    .link-list {
+      row-gap: 20px;
+      column-gap: 20px;
+      grid-template-columns: 1fr 1fr;
+    }
+  }
+
+  @media all and (-ms-high-contrast:none) {
+  .link-list {
+      display: -ms-grid;
+      -ms-grid-columns: 1fr 1fr;
+      -ms-grid-rows: 1fr 1fr;
+    }
+  }
+
+  .link-item {
+    display: block;
+    padding: 20px 30px 20px 15px;
+    border: 1px solid #00000010;
+    border-radius: 5px;
+    transition: background 150ms ease-out, border 150ms ease-out, transform 150ms ease-out;
+    color: #333333;
+    display: flex;
+    align-items: flex-start;
+  }
+
+  .link-item:hover {
+    border-color: #1EA7FD50;
+    transform: translate3d(0, -3px, 0);
+    box-shadow: rgba(0, 0, 0, 0.08) 0 3px 10px 0;
+  }
+
+  .link-item:active {
+    border-color: #1EA7FD;
+    transform: translate3d(0, 0, 0);
+  }
+
+  .link-item strong {
+    font-weight: 700;
+    display: block;
+    margin-bottom: 2px;
+  }
+
+  .link-item img {
+    height: 40px;
+    width: 40px;
+    margin-right: 15px;
+    flex: none;
+  }
+
+  .link-item span {
+    font-size: 14px;
+    line-height: 20px;
+  }
+
+  .tip {
+    display: inline-block;
+    border-radius: 1em;
+    font-size: 11px;
+    line-height: 12px;
+    font-weight: 700;
+    background: #E7FDD8;
+    color: #66BF3C;
+    padding: 4px 12px;
+    margin-right: 10px;
+    vertical-align: top;
+  }
+
+  .tip-wrapper {
+    font-size: 13px;
+    line-height: 20px;
+    margin-top: 40px;
+    margin-bottom: 40px;
+  }
+
+  .tip-wrapper code {
+    font-size: 12px;
+    display: inline-block;
+  }
+
+
+`}</style>
+
+
+# PaaS SDK
+<!-- ## 使用示例 -->
+### 依赖安装
+
+#### yarn
+yarn add @dao42/d42paas-front
+
+#### npm
+npm install @dao42/d42paas-front
+
+### 初始化
+```javascript
+  import DaoPaaS from '@dao42/d42paas-front';
+  var dao_paas = new DaoPaaS({
+    ticket,
+    playgroundId,
+    userId,
+    tenantId,
+    username
+  });
+```
+Editor 组件
+
+
+<div className="link-list">
+  <a className="link-item" href="?path=/story/组件-editor--primary">
+    <img src={Direction} alt="direction" />
+    <span>
+      <strong>Editor</strong>
+      {/* 核心编辑功能 */}
+      dao_paas.Editor()
+    </span>
+  </a>
+  <a className="link-item" href="?path=/story/组件-fileTree--primary">
+    <img src={Direction} alt="direction" />
+    <span>
+      <strong>FileTree</strong>
+      {/* 核心编辑功能 */}
+      dao_paas.FileTree()
+    </span>
+  </a>
+  <a className="link-item" href="?path=/story/组件-browserWindow--primary">
+    <img src={Direction} alt="direction" />
+    <span>
+      <strong>BrowserWindow</strong>
+      {/* 核心编辑功能 */}
+      dao_paas.BrowserWindow()
+    </span>
+  </a>
+  <a className="link-item" href="?path=/story/组件-shell--primary">
+    <img src={Direction} alt="direction" />
+    <span>
+      <strong>Shell</strong>
+      {/* 核心编辑功能 */}
+      dao_paas.Shell()
+    </span>
+  </a>
+  <a className="link-item" href="?path=/story/组件-console--primary">
+    <img src={Direction} alt="direction" />
+    <span>
+      <strong>Console</strong>
+      {/* 核心编辑功能 */}
+      dao_paas.Console()
+    </span>
+  </a>
+</div>
+
+<div className="tip-wrapper">
+  <span className="tip">Tip</span>Edit the Markdown in{' '}
+  <code>src/client/PaaS/stories/Introduction.stories.mdx</code>
+</div>