@dao42/d42paas-front 0.4.5 → 0.4.6

package/src/stories/page.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import { Meta } from '@storybook/react';
+import Index from '~/pages';
+import { ArgsTable, Story } from '@storybook/addon-docs';
+import '../styles/index.scss';
+
+export default {
+  title: '组件/Page',
+  component: Index,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  argTypes: {
+    playgroundId: {
+      description: 'playgroundInfo获取hook',
+      // default: 1,
+      // control: 'string',
+      table: {
+        category: '初始化参数',
+      },
+    },
+    // backgroundColor: {
+    //   description: 'hi',
+    //   control: 'color',
+    //   //   table: {
+    //   //     category: '初始化参数',
+    //   //   },
+    // },
+    primary: {
+      table: {
+        category: 'Colors',
+      },
+    },
+    // borderWidth: { control: { type: 'number', min: 0, max: 10 } },
+
+    //     backgroundColor: {
+    //       control: 'color',
+    //       table: {
+    //         category: 'Colors',
+    //         // Assigns the argTypes to a specific subcategory
+    //         subcategory: 'Button colors',
+    //       },
+    //     },
+    // primary: {
+    //   table: {
+    //     category: 'Colors',
+    //     subcategory: 'Button style',
+    //   },
+    // },
+    // // Assigns the argType to the Events category
+    // onClick: {
+    //   table: {
+    //     category: 'Events',
+    //     subcategory: 'Button Events',
+    //   },
+    // },
+    // // Assigns the argType to the Sizes category
+    // size: {
+    //   table: {
+    //     category: 'Sizes',
+    //   },
+    // },
+  },
+} as Meta;
+
+export const Primary = (args) => <Index {...args} />;
+
+Primary.args = {
+  playgroundId: '329382550470393856',
+  // users: []
+};

package/src/styles/collections/iconfont.scss

@@ -0,0 +1 @@
+@import url(//at.alicdn.com/t/font_2833282_wku3pmhjs9.css);

package/src/styles/collections/tabs-costumers.scss

@@ -0,0 +1,20 @@
+.rs-nav.rs-nav-tabs.rs-nav-horizontal {
+  border: none;
+  .rs-nav-item {
+    border: none;
+    &.rs-nav-item-active {
+      border: 0;
+      border-radius: 0;
+      border-bottom-width: 1px;
+      background-color: #1e1e1e;
+      color: #eaeaea;
+    }
+    &:hover, &:focus {
+      border-radius: 0;
+      background-color: #1a1a1a;
+    }
+  }
+  .rs-nav-bar {
+    border: none;
+  }
+}

package/src/styles/collections/tailwind.scss

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/src/styles/collections/tree-costumers.scss

@@ -0,0 +1,53 @@
+div.rct-tree-root {
+  width: 100%;
+  height: 100%;
+  background-color: #15171c;
+  color: #ffffff;
+  overflow: auto;
+
+  .rct-tree-item-li {
+    .rct-tree-item-title-container {
+      .rct-tree-item-arrow {
+        flex-shrink: 0;
+      }
+      .rct-tree-item-avatar {
+        width: 20px;
+        height: 20px;
+        margin-left: 10px;
+        background-color: white;
+        right: 5px;
+      }
+    }
+  }
+
+  &.rct-tree-root-focus {
+    outline: none;
+    .rct-tree-item-li-selected {
+      .rct-tree-item-title-container-selected {
+        background-color: #4b6eaf;
+      }
+    }
+  }
+
+  &:not(.rct-tree-root-focus) {
+    .rct-tree-item-title-container-focused {
+      border: none;
+    }
+
+    .rct-tree-item-li-selected {
+      .rct-tree-item-title-container-selected {
+        background-color: #4b6eaf;
+      }
+    }
+  }
+  &::-webkit-scrollbar {
+    background-color: #1e1e1e;
+    width: 6px;
+    height: 6px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: #575757;
+    border-radius: 4px;
+  }
+}

package/src/styles/collections/utility.scss

@@ -0,0 +1,10 @@
+.nested-sample {
+    p {
+        color: red;
+    }
+}
+.avatar-hover:hover {
+    z-index: 10;
+    transform: scale(1.2);
+    transition: all 0.5s ease;
+}

package/src/styles/collections/xterm-costumers.scss

@@ -0,0 +1,47 @@
+.xterm {
+  width: 100%;
+  height: 100%;
+
+  .xterm-viewport {
+    width: calc(100% + 10px) !important;
+    //height: 100%;
+    overflow-y: hidden;
+
+    &::-webkit-scrollbar {
+      background-color: #1e1e1e;
+      width: 6px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background-color: #575757;
+      border-radius: 4px;
+    }
+  }
+
+  .xterm-screen {
+    width: 100% !important;
+    height: 100% !important;
+    overflow-y: auto;
+    overflow-x: hidden;
+
+    .xterm-helpers {
+      .xterm-helper-user-label {
+        position: absolute;
+        height: 20px;
+        padding: 0 4px;
+        transform: translateY(-20px);
+        color: #ffffff;
+      }
+    }
+
+    &::-webkit-scrollbar {
+      background-color: #1e1e1e;
+      width: 6px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background-color: #575757;
+      border-radius: 4px;
+    }
+  }
+}

package/src/styles/index.scss

@@ -0,0 +1,19 @@
+@import "./collections/tailwind.scss";
+@import 'rsuite/dist/rsuite.min.css';
+@import 'xterm/css/xterm.css';
+@import 'react-complex-tree/lib/style.css';
+
+@import "./collections/utility.scss";
+@import "./collections/iconfont.scss";
+@import "./collections/tabs-costumers.scss";
+@import "./collections/tree-costumers.scss";
+@import "./collections/xterm-costumers.scss";
+
+// $black: #15171C;
+
+
+.editor-layout {
+    height: 100%;
+    flex-flow: 1;
+    min-height: 300px;
+}

package/src/types/editor.d.ts

@@ -0,0 +1,31 @@
+// export = DaoPaaS;
+// export as namespace DaoPaaS;
+
+interface TConstructor {
+  ticket: string;
+  playgroundId: string;
+  userId: string;
+  tenantId: string;
+  username?: string;
+  avatar?: string;
+  avatarUrl?: string;
+}
+
+type TReplay = 'stop' | 'disabled' | 'pause';
+
+interface TComponentArgs {
+  container: string | HTMLElement | Element;
+  props?: any;
+}
+
+export class DaoPaaS {
+  constructor(args: TConstructor): void;
+  replay(args: TReplay): void;
+  record(arg: boolean): void;
+  switchLspServer(arg: boolean): void;
+
+  /* Components */
+  Editor(args: TComponentArgs): void;
+  Page(args: TComponentArgs): void;
+  Tree(args: TComponentArgs): void;
+}

package/src/types/index.d.ts

@@ -0,0 +1,158 @@
+/// <reference types="@emotion/react/types/css-prop" />
+/// <reference types="socket.io-client/build/typed-events" />
+
+import { Socket } from 'socket.io-client';
+import { TreeItemIndex } from 'react-complex-tree/lib/esm/types';
+import { TextOperation } from 'ot';
+
+type WindowType = typeof window;
+// type FileExtraType = 'Add' | 'Get';
+// type EvtType = 'file' | 'editor';
+
+export type UserInfo = {
+  avatar?: string;
+  name?: string;
+  uuid?: string;
+  role?: string;
+};
+
+declare global {
+  interface Window extends WindowType {
+    xtermFitAddon: { fit: () => void };
+    io: unknown;
+    clearCache: () => void;
+    Toast: unknown;
+    ot: unknown;
+    MonacoEnvironment: any;
+  }
+  interface D42 extends Window {
+    log: typeof window.log;
+  }
+
+  declare let LOCAL_IP_HOST: string;
+
+  declare let d42: D42;
+  declare module 'lottie-web';
+  // declare module TreeItemIndex;
+  namespace D42_FrontType {
+    const io: unknown;
+    interface SocketType {
+      Socket: Socket<DefaultEventsMap, DefaultEventsMap>;
+    }
+
+    /*
+     *
+     */
+
+    // CRDT
+
+    /*
+     *
+     */
+
+    type FileExtraType = 'Add' | 'Get' | 'Update' | 'Edit';
+    type EvtType = 'File' | 'Editor' | 'Selection' | 'Position';
+
+    interface CRDT {
+      timestamp: string | number;
+      userInfo: Pick<UserInfo, 'uuid' | 'role'>;
+      editor?: {
+        operation?: TextOperation[];
+        // selection?: TextSelection;
+        selection?: any;
+        revision?: number;
+        evtType?: EvtType;
+        // doc?: {
+        //   action: FileExtraType;
+        //   path: string | number;
+        //   redisKey?: string;
+        //   value?: string;
+        // };
+        extraInfo?: any;
+      };
+      file?: {
+        action?: FileExtraType;
+        path: string;
+        redisKey?: string;
+        value?: string;
+      };
+      selection?: array[];
+      terminal?: {
+        doc?: {
+          action: FileExtraType;
+          value?: string;
+        };
+        extraInfo?: any;
+      };
+      console?: {
+        doc?: {
+          action: FileExtraType;
+          value?: string;
+        };
+        extraInfo?: any;
+      };
+      media?: {
+        extraInfo?: {
+          segmentId: string;
+        };
+      };
+    }
+
+    interface ReplaySource {
+      timestamp: string | number;
+      userInfo?: Pick<UserInfo, 'uuid' | 'role'>;
+      editor?: {
+        [key: string]: {
+          operation?: TextOperation[];
+          // selection?: TextSelection;
+          selection?: any;
+          revision?: number;
+          evtType?: EvtType;
+          // doc?: {
+          //   action: FileExtraType;
+          //   path: string | number;
+          //   redisKey?: string;
+          //   value?: string;
+          // };
+          extraInfo?: any;
+        };
+      };
+      file?: {
+        [key: string]: {
+          action: FileExtraType;
+          path: string | number;
+          redisKey?: string;
+          value?: string;
+        };
+      };
+      selection?: {
+        [key: string]: [][];
+      };
+      terminal?: {
+        [key: string]: {
+          doc?: {
+            action: FileExtraType;
+            value?: string;
+          };
+          extraInfo?: any;
+        };
+      };
+      console?: {
+        [key: string]: {
+          doc?: {
+            action: FileExtraType;
+            value?: string;
+          };
+          extraInfo?: any;
+        };
+      };
+      media?: {
+        [key: string]: {
+          extraInfo?: {
+            segmentId: string;
+          };
+        };
+      };
+    }
+  }
+}