easemob-chat-uikit 1.0.0-beta

package/button/style/style.scss

@@ -0,0 +1,28 @@
+@import './mixin.scss';
+
+$btn-prefix-cls: #{$cui-prefix}-button;
+
+.#{$btn-prefix-cls} {
+    @include btn();
+    @include btn-default();
+
+    &-primary {
+        @include btn-primary()
+    }
+
+    &-ghost {
+        @include btn-ghost();
+    }
+
+    &-text {
+        @include btn-text();
+    }
+
+    &-round {
+        @include btn-round($btn-prefix-cls);
+    }
+
+    &-circle {
+        @include btn-circle($btn-prefix-cls);
+    }
+}

package/manifest.json

@@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

package/package.json

@@ -0,0 +1,29 @@
+{
+    "name": "easemob-chat-uikit",
+    "version": "1.0.0-beta",
+    "description": "easemob uikit",
+    "main": "ChatUI.umd.js",
+    "type": "commonjs",
+    "module": "ChatUI.esm.js",
+    "types": "types/ChatUI.d.ts",
+    "scripts": {},
+    "formats": [
+        "es",
+        "umd",
+        "iife"
+    ],
+    "keywords": [
+        "easemob",
+        "chat",
+        "UIkit",
+        "IM"
+    ],
+    "author": "",
+    "license": "ISC",
+    "devDependencies": {},
+    "dependencies": {},
+    "peerDependencies": {
+        "react": ">=16.0.0",
+        "react-dom": ">=16.0.0"
+    }
+}

package/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

package/style/color/color.scss

@@ -0,0 +1,75 @@
+@function adjusted-color($base-color, $percentage) {
+    $hue: hue($base-color);
+    $saturation: saturation($base-color);
+    $lightness: lightness($base-color) + $percentage;
+    $alpha: alpha($base-color);
+  
+    @return hsla($hue, $saturation, $lightness, $alpha);
+}
+  
+$blue-base: hsla(203, 100%, 60%, 1);
+$blue-1: adjusted-color($blue-base, -50%);
+$blue-2: adjusted-color($blue-base, -40%);
+$blue-3: adjusted-color($blue-base, -30%);
+$blue-4: adjusted-color($blue-base, -20%);
+$blue-5: adjusted-color($blue-base, -10%);
+$blue-6: $blue-base;
+$blue-7: adjusted-color($blue-base, 10%);
+$blue-8: adjusted-color($blue-base, 20%);
+$blue-9: adjusted-color($blue-base, 30%);
+$blue-95: adjusted-color($blue-base, 35%);
+$blue-98: adjusted-color($blue-base, 38%);
+$blue-10: adjusted-color($blue-base, 40%);
+
+
+$green-base: hsla(155, 100%, 60%, 1);
+$green-1: adjusted-color($green-base, -50);
+$green-2: adjusted-color($green-base, -40);
+$green-3: adjusted-color($green-base, -30);
+$green-4: adjusted-color($green-base, -20);
+$green-5: adjusted-color($green-base, -10);
+$green-6: $green-base;
+$green-5: adjusted-color($green-base, 10);
+$green-5: adjusted-color($green-base, 20);
+$green-5: adjusted-color($green-base, 30);
+$green-5: adjusted-color($green-base, 40);
+
+
+$red-base: hsla(350, 100%, 60%, 1);
+$red-1: adjusted-color($red-base, -50);
+$red-2: adjusted-color($red-base, -40);
+$red-3: adjusted-color($red-base, -30);
+$red-4: adjusted-color($red-base, -20);
+$red-5: adjusted-color($red-base, -10);
+$red-6: $red-base;
+$red-7: adjusted-color($red-base, 10);
+$red-8: adjusted-color($red-base, 20);
+$red-9: adjusted-color($red-base, 30);
+$red-10: adjusted-color($red-base, 40);
+
+
+$gray-base: hsla(203, 8%, 60%, 1);
+$gray-1: adjusted-color($gray-base, -50);
+$gray-2: adjusted-color($gray-base, -40);
+$gray-3: adjusted-color($gray-base, -30);
+$gray-4: adjusted-color($gray-base, -20);
+$gray-5: adjusted-color($gray-base, -10);
+$gray-6: $gray-base;
+$gray-7: adjusted-color($gray-base, 10);
+$gray-8: adjusted-color($gray-base, 20);
+$gray-9: adjusted-color($gray-base, 30);
+$gray-95: adjusted-color($gray-base, 35);
+$gray-98: adjusted-color($gray-base, 38);
+$gray-10: adjusted-color($gray-base, 40);
+
+$special-base: hsla(220, 36%, 60%, 1);
+$special-1: adjusted-color($special-base, -50);
+$special-2: adjusted-color($special-base, -40);
+$special-3: adjusted-color($special-base, -30);
+$special-4: adjusted-color($special-base, -20);
+$special-5: adjusted-color($special-base, -10);
+$special-6: $special-base;
+$special-7: adjusted-color($special-base, 10);
+$special-8: adjusted-color($special-base, -20);
+$special-9: adjusted-color($special-base, -30);
+$special-10: adjusted-color($special-base, -40);

package/style/core/base.scss

@@ -0,0 +1,10 @@
+// Config global less under cui
+[class^=#{$cui-prefix}-],
+[class*=' #{$cui-prefix}-'] {
+  // remove the clear button of a text input control in IE10+
+  &::-ms-clear,
+  input::-ms-clear,
+  input::-ms-reveal {
+    display: none;
+  }
+}

package/style/core/index.scss

@@ -0,0 +1,3 @@
+@import '../mixin/index';
+@import 'base';
+@import 'motion';

package/style/core/motion/fade.scss

@@ -0,0 +1,35 @@
+@mixin fade-motion($className, $keyframeName) {
+    $name: #{$cui-prefix}-#{$className};
+    @include make-motion($name, $keyframeName);
+    .#{$name}-enter,
+    .#{$name}-appear {
+      opacity: 0;
+      animation-timing-function: linear;
+    }
+    .#{$name}-leave {
+      animation-timing-function: linear;
+    }
+}
+  
+@include fade-motion(fade, cuiFade);
+  
+  @keyframes cuiFadeIn {
+    0% {
+      opacity: 0;
+    }
+  
+    100% {
+      opacity: 1;
+    }
+  }
+  
+  @keyframes cuiFadeOut {
+    0% {
+      opacity: 1;
+    }
+  
+    100% {
+      opacity: 0;
+    }
+  }
+  

package/style/core/motion/zoom.scss

@@ -0,0 +1,179 @@
+@mixin zoom-motion($className, $keyframeName, $duration: $animation-duration-base) {
+    $name: #{$cui-prefix}-#{$className};
+    @include make-motion($name, $keyframeName, $duration);
+    .#{$name}-enter,
+    .#{$name}-appear {
+      transform: scale(0);
+      opacity: 0;
+      animation-timing-function: $ease-out-circ;
+      &-prepare {
+        transform: none;
+      }
+    }
+    .#{$name}-leave {
+      animation-timing-function: $ease-in-out-circ;
+    }
+}
+  
+  // For Modal, Select choosen item
+  @include zoom-motion(zoom, cuiZoom);
+  // For Popover, Popconfirm, Dropdown
+  @include zoom-motion(zoom-big, cuiZoomBig);
+  // For Tooltip
+  @include zoom-motion(zoom-big-fast, cuiZoomBig, $animation-duration-fast);
+  
+  @include zoom-motion(zoom-up, cuiZoomUp);
+  @include zoom-motion(zoom-down, cuiZoomDown);
+  @include zoom-motion(zoom-left, cuiZoomLeft);
+  @include zoom-motion(zoom-right, cuiZoomRight);
+  
+  @keyframes cuiZoomIn {
+    0% {
+      transform: scale(0.2);
+      opacity: 0;
+    }
+  
+    100% {
+      transform: scale(1);
+      opacity: 1;
+    }
+  }
+  
+  @keyframes cuiZoomOut {
+    0% {
+      transform: scale(1);
+    }
+  
+    100% {
+      transform: scale(0.2);
+      opacity: 0;
+    }
+  }
+  
+  @keyframes cuiZoomBigIn {
+    0% {
+      transform: scale(0.8);
+      opacity: 0;
+    }
+  
+    100% {
+      transform: scale(1);
+      opacity: 1;
+    }
+  }
+  
+  @keyframes cuiZoomBigOut {
+    0% {
+      transform: scale(1);
+    }
+  
+    100% {
+      transform: scale(0.8);
+      opacity: 0;
+    }
+  }
+  
+  @keyframes cuiZoomUpIn {
+    0% {
+      transform: scale(0.8);
+      transform-origin: 50% 0%;
+      opacity: 0;
+    }
+  
+    100% {
+      transform: scale(1);
+      transform-origin: 50% 0%;
+    }
+  }
+  
+  @keyframes cuiZoomUpOut {
+    0% {
+      transform: scale(1);
+      transform-origin: 50% 0%;
+    }
+  
+    100% {
+      transform: scale(0.8);
+      transform-origin: 50% 0%;
+      opacity: 0;
+    }
+  }
+  
+  @keyframes cuiZoomLeftIn {
+    0% {
+      transform: scale(0.8);
+      transform-origin: 0% 50%;
+      opacity: 0;
+    }
+  
+    100% {
+      transform: scale(1);
+      transform-origin: 0% 50%;
+    }
+  }
+  
+  @keyframes cuiZoomLeftOut {
+    0% {
+      transform: scale(1);
+      transform-origin: 0% 50%;
+    }
+  
+    100% {
+      transform: scale(0.8);
+      transform-origin: 0% 50%;
+      opacity: 0;
+    }
+  }
+  
+  @keyframes cuiZoomRightIn {
+    0% {
+      transform: scale(0.8);
+      transform-origin: 100% 50%;
+      opacity: 0;
+    }
+  
+    100% {
+      transform: scale(1);
+      transform-origin: 100% 50%;
+    }
+  }
+  
+  @keyframes cuiZoomRightOut {
+    0% {
+      transform: scale(1);
+      transform-origin: 100% 50%;
+    }
+  
+    100% {
+      transform: scale(0.8);
+      transform-origin: 100% 50%;
+      opacity: 0;
+    }
+  }
+  
+  @keyframes cuiZoomDownIn {
+    0% {
+      transform: scale(0.8);
+      transform-origin: 50% 100%;
+      opacity: 0;
+    }
+  
+    100% {
+      transform: scale(1);
+      transform-origin: 50% 100%;
+    }
+  }
+  
+  @keyframes cuiZoomDownOut {
+    0% {
+      transform: scale(1);
+      transform-origin: 50% 100%;
+    }
+  
+    100% {
+      transform: scale(0.8);
+      transform-origin: 50% 100%;
+      opacity: 0;
+    }
+  }
+  

package/style/core/motion.scss

@@ -0,0 +1,17 @@
+@import 'motion/fade';
+@import 'motion/zoom';
+// For common/openAnimation
+.ant-motion-collapse-legacy {
+    overflow: hidden;
+  
+    &-active {
+      transition: height $animation-duration-base $ease-in-out,
+        opacity $animation-duration-base $ease-in-out !important;
+    }
+}
+  
+.ant-motion-collapse {
+    overflow: hidden;
+    transition: height $animation-duration-base $ease-in-out,
+      opacity $animation-duration-base $ease-in-out !important;
+}

package/style/index.scss

@@ -0,0 +1,3 @@
+@import './themes/default.scss';
+// @import './themes/dark.scss';
+@import './core/index';

package/style/mixin/index.scss

@@ -0,0 +1 @@
+@import 'motion';

package/style/mixin/motion.scss

@@ -0,0 +1,31 @@
+@mixin motion-common($duration: $animation-duration-base) {
+    animation-duration: $duration;
+    animation-fill-mode: both;
+}
+  
+@mixin motion-common-leave($duration: $animation-duration-base) {
+    animation-duration: $duration;
+    animation-fill-mode: both;
+}
+  
+@mixin make-motion($className, $keyframeName, $duration: $animation-duration-base) {
+    .#{$className}-enter,
+    .#{$className}-appear {
+      @include motion-common($duration);
+      animation-play-state: paused;
+    }
+    .#{$className}-leave {
+        @include motion-common-leave($duration);
+        animation-play-state: paused;
+    }
+    .#{$className}-enter.#{$className}-enter-active,
+    .#{$className}-appear.#{$className}-appear-active {
+      animation-name: #{$keyframeName}In;
+      animation-play-state: running;
+    }
+    .#{$className}-leave.#{$className}-leave-active {
+      animation-name: #{$keyframeName}Out;
+      animation-play-state: running;
+      pointer-events: none;
+    }
+}

package/style/themes/dark.scss

@@ -0,0 +1,93 @@
+@import '../color/color.scss';
+
+$theme: dark;
+// The prefix to use on all css classes from Chat UI.
+$cui-prefix: cui;
+
+$white: #fff;
+$black: #000;
+// Base background color for most components
+$component-background: #fff;
+
+// height rules
+$height-base: 36px;
+$height-lg: 48px;
+$height-sm: 28px;
+
+// vertical margins
+$margin-lg: 24px; // containers
+$margin-md: 16px; // small containers and buttons
+$margin-sm: 12px; // Form controls and items
+$margin-xs: 8px; // small items
+$margin-xss: 4px; // more small
+
+// vertical paddings
+$padding-lg: 24px; // containers
+$padding-md: 20px; // small containers and buttons
+$padding-sm: 16px; // Form controls and items
+$padding-s: 12px; // small items
+$padding-xs: 8px; // small items
+$padding-xss: 4px; // more small
+// font
+$font-size-base: 14px;
+$font-size-lg: $font-size-base + 2px;
+$font-size-sm: 12px;
+
+$line-height-base: 1.5715;
+
+$text-color: fade($black, 85%);
+
+// -------- Colors -----------
+// >>> Primary
+$primary-color: $blue-6;
+// $primary-color-hover: color(~`colorPalette('@{primary-color}', 5) `);
+// $primary-color-active: color(~`colorPalette('@{primary-color}', 7) `);
+// $primary-color-outline: fade(@primary-color, @outline-fade);
+
+
+
+// Animation
+$ease-base-out: cubic-bezier(0.7, 0.3, 0.1, 1);
+$ease-base-in: cubic-bezier(0.9, 0, 0.3, 0.7);
+$ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
+$ease-in: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+$ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
+$ease-out-back: cubic-bezier(0.12, 0.4, 0.29, 1.46);
+$ease-in-back: cubic-bezier(0.71, -0.46, 0.88, 0.6);
+$ease-in-out-back: cubic-bezier(0.71, -0.46, 0.29, 1.46);
+$ease-out-circ: cubic-bezier(0.08, 0.82, 0.17, 1);
+$ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.34);
+$ease-in-out-circ: cubic-bezier(0.78, 0.14, 0.15, 0.86);
+$ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
+$ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+$ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);
+
+/** Border */
+$border-width-base: 1px; // width of the border for a component
+$border-style-base: solid; // style of a components border
+$border-radius-base: 2px;
+$border-color-base: hsv(0, 0, 85%); // base border outline a component
+$border-color-split: hsv(0, 0, 94%); // split border inside a component
+$border-color-inverse: $white;
+
+$background-color-light: hsv(0, 0, 98%); // background of header and selected item
+$background-color-base: hsv(0, 0, 96%); // Default grey background color
+
+// Disabled states
+$disabled-color: $gray-7;
+$disabled-bg: $gray-95;
+$disabled-active-bg: $gray-95;
+$disabled-color-dark: fade(#fff, 35%);
+
+/** Button */
+$btn-shadow: 0 2px 0 rgba(0, 0, 0, 0.015);
+$btn-primary-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
+$btn-text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);
+$btn-default-bg: transparent;
+$btn-default-ghost-color: $text-color;
+$btn-default-ghost-border: fade($white, 25%);
+$btn-text-hover-bg: rgba(255, 255, 255, 0.03);
+
+$btn-default-color: $gray-98;
+$btn-default-bg: $black;
+$btn-default-border: $gray-4;