@weavy/uikit-react 11.0.1 → 12.1.0

package/src/scss/theme/fonts/_fontmapping-segoe-ui.scss

@@ -0,0 +1,127 @@
+// Normal
+@font-face {
+  font-family: 'Segoe UI';
+  font-style: normal;
+  font-weight: 100;
+  src: local('Segoe UI Thin'), local('Segoe UI Light');
+}
+
+@font-face {
+  font-family: 'Segoe UI';
+  font-style: normal;
+  font-weight: 200;
+  src: local('Segoe UI Light');
+}
+
+@font-face {
+  font-family: 'Segoe UI';
+  font-style: normal;
+  font-weight: 300;
+  src: local('Segoe UI Semilight');
+}
+
+@font-face {
+  font-family: 'Segoe UI';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Segoe UI');
+}
+
+@font-face {
+  font-family: 'Segoe UI';
+  font-style: normal;
+  font-weight: 500;
+  src: local('Segoe UI Medium'), local('Segoe UI Semibold');
+}
+
+@font-face {
+  font-family: 'Segoe UI';
+  font-style: normal;
+  font-weight: 600;
+  src: local('Segoe UI Semibold');
+}
+
+@font-face {
+  font-family: 'Segoe UI';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Segoe UI Bold');
+}
+
+@font-face {
+  font-family: 'Segoe UI';
+  font-style: normal;
+  font-weight: 800;
+  src: local('Segoe UI Semiblack'), local('Segoe UI Black');
+}
+
+@font-face {
+  font-family: 'Segoe UI';
+  font-style: normal;
+  font-weight: 900;
+  src: local('Segoe UI Black');
+}
+
+// Italic
+@font-face {
+  font-family: 'Segoe UI';
+  font-style: italic;
+  font-weight: 100;
+  src: local('Segoe UI Thin Italic'), local('Segoe UI Light Italic');
+}
+
+@font-face {
+  font-family: 'Segoe UI';
+  font-style: italic;
+  font-weight: 200;
+  src: local('Segoe UI Light Italic');
+}
+
+@font-face {
+  font-family: 'Segoe UI';
+  font-style: italic;
+  font-weight: 300;
+  src: local('Segoe UI Semilight Italic');
+}
+
+@font-face {
+  font-family: 'Segoe UI';
+  font-style: italic;
+  font-weight: 400;
+  src: local('Segoe UI Italic');
+}
+
+@font-face {
+  font-family: 'Segoe UI';
+  font-style: italic;
+  font-weight: 500;
+  src: local('Segoe UI Medium Italic'), local('Segoe UI Semibold Italic');
+}
+
+@font-face {
+  font-family: 'Segoe UI';
+  font-style: italic;
+  font-weight: 600;
+  src: local('Segoe UI Semibold Italic');
+}
+
+@font-face {
+  font-family: 'Segoe UI';
+  font-style: italic;
+  font-weight: 700;
+  src: local('Segoe UI Bold Italic');
+}
+
+@font-face {
+  font-family: 'Segoe UI';
+  font-style: italic;
+  font-weight: 800;
+  src: local('Segoe UI Semiblack Italic'), local('Segoe UI Black Italic');
+}
+
+@font-face {
+  font-family: 'Segoe UI';
+  font-style: italic;
+  font-weight: 900;
+  src: local('Segoe UI Black Italic');
+}

package/src/scss/theme/fonts/_index.scss

@@ -0,0 +1,2 @@
+@import 'fontmapping-roboto';
+@import 'fontmapping-segoe-ui'; // Needed by Firefox

package/src/scss/theme/mixins/_backdrop.scss

@@ -0,0 +1,13 @@
+$enable-backdrop-filter: true !default;
+$backdrop-filter: blur(.5rem) !default;
+
+@mixin filter($backdrop-filter: $backdrop-filter) {
+  backface-visibility: hidden;
+
+  @if($enable-backdrop-filter) {
+    @supports(backdrop-filter: $backdrop-filter) {
+      backdrop-filter: $backdrop-filter;
+      @content;
+    }
+  }
+}

package/src/scss/theme/mixins/_palette.scss

@@ -0,0 +1,165 @@
+@use "sass:map";
+@use "sass:list";
+@use "sass:string";
+@use "sass:math";
+@use "sass:color";
+
+// RYB COLOR WHEEL
+// HSL mapping based on http://computergraphics.stackexchange.com/questions/1748/function-to-convert-hsv-angle-to-ryb-angle
+// Matching bootstrap and MD colors
+$color-names: (
+    "red": null,
+    "deep-orange": null,
+    "orange": null,
+    "amber": null,
+    "yellow": null,
+    "lime": null,
+    "light-green": null,
+    "green": null,
+    "teal": null,
+    "cyan": null,
+    "light-blue": null,
+    "blue": null,
+    "indigo": null,
+    "deep-purple": null,
+    "purple": null,
+    "pink": null
+) !default;
+
+// Matching MD shades
+// Added 950 for dark theme compatibility
+$color-shades: (
+    "50": 95,
+    "100": 90,
+    "200": 80,
+    "300": 70,
+    "400": 60,
+    "500": 50,
+    "600": 42,
+    "700": 36,
+    "800": 28,
+    "900": 22,
+    "950": 16
+) !default;
+
+// color mapping
+$ryb-rgb-mapping: (
+  (0, 0) // Red
+  (50, 35) // Orange
+  (110, 60) // Yellow
+  (165, 120) // Green
+  (210, 180) // Cyan
+  (285, 240) // Blue
+  (330, 300) // Purple
+  (360, 360) // Red (same as 0)
+) !default;
+
+// saturation mapping
+$hue-sat-mapping: (
+  (0, 85) // Red
+  (110, 100) // Yellow
+  (165, 60) // Green
+  (210, 88) // Cyan
+  (285, 97) // Blue
+  (330, 65) // Purple
+  (360, 85) // Red (same as 0)
+) !default;
+
+@function ryb-hue($h, $reverse: false) {
+  $deg: $h % 360;
+
+  $from: 1;
+  $to: 2;
+
+  @if $reverse {
+      $from: 2;
+      $to: 1;
+  }
+
+  $lower: 1;
+  $upper: 2;
+
+  @while $deg > list.nth(list.nth($ryb-rgb-mapping, $upper), $from) {
+      $lower: $upper;
+      $upper: $upper + 1;
+  }
+
+  $lower-from: list.nth(list.nth($ryb-rgb-mapping, $lower), $from);
+  $lower-to: list.nth(list.nth($ryb-rgb-mapping, $lower), $to);
+  $upper-from: list.nth(list.nth($ryb-rgb-mapping, $upper), $from);
+  $upper-to: list.nth(list.nth($ryb-rgb-mapping, $upper), $to);
+
+  $percent: math.div(($deg - $lower-from), ($upper-from - $lower-from));
+  $hue: $lower-to + ($upper-to - $lower-to) * $percent;
+
+  @return $hue;
+}
+
+@function ryb-saturation($rybHue, $saturation, $reverse: false) {
+  $deg: $rybHue % 360;
+  $sat: math.clamp(0, $saturation, 100);
+
+  $index: 1;
+  $value: 2;
+
+  $lower: 1;
+  $upper: 2;
+
+  @while $deg > list.nth(list.nth($hue-sat-mapping, $upper), $index) {
+      $lower: $upper;
+      $upper: $upper + 1;
+  }
+
+  $lower-index: list.nth(list.nth($hue-sat-mapping, $lower), $index);
+  $upper-index: list.nth(list.nth($hue-sat-mapping, $upper), $index);
+  $lower-value: list.nth(list.nth($hue-sat-mapping, $lower), $value);
+  $upper-value: list.nth(list.nth($hue-sat-mapping, $upper), $value);
+
+  $percent: math.div(($deg - $lower-index), ($upper-index - $lower-index));
+  $interpolation: math.div(($lower-value + ($upper-value - $lower-value) * $percent), 100);
+
+  @if $reverse {
+    @return math.div($sat, $interpolation);
+  } @else {
+    @return $sat * $interpolation;
+  }
+
+}
+
+@function hsl-to-ryb-as-hsl($h, $s, $l) {
+    $hue: math.floor(ryb-hue($h));
+    $saturation: ryb-saturation($h, $s) * 1%;
+    $lightness: $l * 1%;
+    @return hsl($hue, $saturation, $lightness);
+}
+
+@function generate-colors($base-color) {
+    $h: ryb-hue(math.div(hue($base-color), 1deg), true);
+    $divisions: list.length($color-names);
+
+    // 33% is minimum threshold to not get all colors gray
+    $normalizedS: math.clamp(ryb-saturation($h, 33), math.div(saturation($base-color), 1%), ryb-saturation($h, 100));
+    $s: ryb-saturation($h, $normalizedS, true);
+
+    $distance: math.div(360, $divisions);
+
+    $start-offset: $h % $distance;
+
+    // Clone
+    $generated-colors: map.merge($color-names, ());
+
+    @for $i from 1 through $divisions  {
+      $ih: $start-offset + ($i - 1) * $distance;
+      $il: map.get($color-shades, "500");
+      $iname: list.nth(map.keys($color-names), $i);
+      $icolor: hsl-to-ryb-as-hsl($ih, $s, $il);
+      //@debug $iname $icolor;
+      $generated-colors: map.set($generated-colors, $iname, $icolor);
+    }
+
+    @return $generated-colors;
+}
+
+@function color-shade($color, $shade, $shades: $color-shades) {
+  @return color.change($color, $lightness: map.get($shades, $shade) * 1%)
+}

package/src/scss/theme/mixins/_position.scss

@@ -0,0 +1,33 @@
+@use "../variables";
+
+@mixin fixed-top {
+  position: fixed;
+  top: 0;
+  right: 0;
+  left: 0;
+  z-index: variables.$zindex-fixed;
+}
+
+@mixin fixed-bottom {
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: variables.$zindex-fixed;
+}
+
+@mixin sticky-top {
+  @supports (position: sticky) {
+    position: sticky;
+    top: 0;
+    z-index: variables.$zindex-sticky;
+  }
+}
+
+@mixin sticky-bottom {
+  @supports (position: sticky) {
+    position: sticky;
+    bottom: 0;
+    z-index: variables.$zindex-sticky;
+  }
+}

package/src/scss/theme/mixins/_scrollbar.scss

@@ -0,0 +1,110 @@
+@use "../colors";
+
+@mixin scroll-y {
+  overflow-y: auto;
+  touch-action: pan-y, pan-x;
+
+  // to enable HW acceleration and not cause repaint on scroll
+  // opacity needed for custom scrollbar to paint
+  will-change: scroll-position, opacity;
+  backface-visibility: hidden;
+
+  // ios momentum scrolling on iOS <= 12, cannot be used on the <body> element!
+  &:not(body) {
+    -webkit-overflow-scrolling: touch;
+  }
+
+  max-height: 100%;
+}
+
+@mixin scroll-x {
+  overflow-x: auto;
+  touch-action: pan-y, pan-x;
+
+  // to enable HW acceleration and not cause repaint on scroll
+  will-change: scroll-position, opacity;
+  backface-visibility: hidden;
+  max-width: 100%;
+}
+
+// custom scrollbar styling
+@mixin custom-scrollbar {
+  // custom scrollbar for webkit browsers
+  // reference https://webkit.org/blog/363/styling-scrollbars/
+
+  &::-webkit-scrollbar {
+    height: .625rem;
+    width: .625rem;
+    background: transparent;
+    z-index: 999;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: rgba(colors.$gray-500, 0.75);
+    border: .125rem solid transparent;
+    border-radius: .5rem;
+    background-clip: padding-box;
+
+    &:hover {
+      background-color: rgba(colors.$gray-700, 0.75);
+    }
+
+    &:window-inactive {
+      background-color: rgba(colors.$gray-500, 0.5);
+    }
+  }
+
+  // custom scrollbar for firefox
+  scrollbar-width: thin;
+  scrollbar-color: rgba(colors.$gray-500, 0.75) transparent;
+}
+
+// custom scrollbar styling
+@mixin thin-scrollbar {
+  // custom scrollbar for webkit browsers
+  &::-webkit-scrollbar {
+    height: .375rem;
+    width: .375rem;
+    background: transparent;
+    z-index: 999;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: rgba(colors.$gray-700, 0.75);
+    border: 0 solid transparent;
+    border-radius: 0;
+    background-clip: padding-box;
+
+    &:hover {
+      background-color: rgba(colors.$gray-500, 0.75);
+    }
+
+    &:window-inactive {
+      background-color: rgba(colors.$gray-500, 0.5);
+    }
+  }
+  
+  // custom scrollbar for firefox
+  scrollbar-width: thin;
+  scrollbar-color: rgba(colors.$gray-700, 0.75) transparent;
+}
+
+@mixin scrollbar-top-padding($scrollbar-padding) {
+  &::-webkit-scrollbar-button:vertical:start {
+    height: $scrollbar-padding;
+  }
+}
+
+@mixin scrollbar-bottom-padding($scrollbar-padding) {
+  &::-webkit-scrollbar-button:vertical:end {
+    height: $scrollbar-padding;
+  }
+}

package/src/scss/weavy-chat.scss

@@ -0,0 +1,31 @@
+// weavy reboot
+@use "theme/reboot";
+// weavy ui components 
+@use "theme/attachments";
+@use "theme/avatar";
+@use "theme/buttons";
+@use "theme/code";
+@use "theme/content";
+@use "theme/dropdown";
+@use "theme/emoji";
+@use "theme/icons";
+@use "theme/image-grid";
+@use "theme/messages";
+@use "theme/message-editor";
+@use "theme/overlays";
+@use "theme/pager";
+@use "theme/pane";
+@use "theme/panels";
+@use "theme/picker-list";
+@use "theme/preview";
+@use "theme/preview-embed";
+@use "theme/preview-html";
+@use "theme/preview-icon";
+@use "theme/preview-image";
+@use "theme/preview-media";
+@use "theme/preview-pdf";
+@use "theme/preview-text";
+@use "theme/reactions";
+@use "theme/scroll";
+@use "theme/spinner";
+@use "theme/typing";

package/src/scss/weavy-messenger.scss

@@ -0,0 +1,60 @@
+// weavy reboot
+@use "theme/reboot";
+
+// weavy ui components 
+@use "theme/appbar";
+@use "theme/attachments";
+@use "theme/avatar";
+@use "theme/badge";
+@use "theme/buttons";
+@use "theme/checkbox";
+@use "theme/code";
+@use "theme/content";
+@use "theme/conversations";
+@use "theme/dropdown";
+@use "theme/emoji";
+@use "theme/icons";
+@use "theme/image-grid";
+@use "theme/inputs";
+@use "theme/messages";
+@use "theme/message-editor";
+@use "theme/overlays";
+@use "theme/pager";
+@use "theme/pane";
+@use "theme/panels";
+@use "theme/picker-list";
+@use "theme/preview";
+@use "theme/preview-embed";
+@use "theme/preview-html";
+@use "theme/preview-icon";
+@use "theme/preview-image";
+@use "theme/preview-media";
+@use "theme/preview-pdf";
+@use "theme/preview-text";
+@use "theme/reactions";
+@use "theme/search";
+@use "theme/scroll";
+@use "theme/spinner";
+@use "theme/typing";
+
+// layout
+.wy-messenger-provider {
+    display: flex;
+    min-height: 0;
+    min-width: 0;
+    flex: 1 1 0;
+  }
+  
+  .wy-messenger-sidebar {
+    width: 300px;
+    border-right: 1px solid #ccc;
+  }
+  
+  .wy-messenger-conversation{
+    overflow-anchor: none;
+    display: flex;
+    flex-direction: column;                    
+    flex: 1 1 0;
+  }
+  
+  

package/src/scss/weavy.scss

@@ -0,0 +1,2 @@
+@use "weavy-chat";
+@use "weavy-messenger";

package/src/types/Messenger.ts

@@ -1,3 +1,3 @@
 export interface Messenger {
-    options?: MessengerContextOptions
+    
 }

package/src/types/types.ts

@@ -1,10 +1,17 @@
+interface WeavyClient {
+    url: string,
+    tokenFactory: (() => string | Promise<string>),
+    subscribe: Function,
+    unsubscribe: Function,
+}
+
 type WeavyClientOptions = {
-    uri: string,
+    url: string,
     tokenFactory: (() => string | Promise<string>)
 }
 
 type WeavyContextProps = {
-    client: any,
+    client: WeavyClient | null,
     options?: WeavyContextOptions  
 };
 
@@ -12,11 +19,12 @@ type WeavyContextOptions = {
     zoomAuthenticationUrl?: string,
     teamsAuthenticationUrl?: string,
     enableCloudFiles?: boolean,
-    filebrowserUrl?: string
+    enableScrollbarDetection?: boolean,
+    filebrowserUrl?: string,
+    reactions?: string[]
 }
 
 type MessengerContextProps = {    
-    options?: MessengerContextOptions,    
     selectedConversationId: null | number,
     setSelectedConversationId: Function    
 };
@@ -25,11 +33,6 @@ type UserContextProps = {
     user: UserType    
 };
 
-
-type MessengerContextOptions = {
-    reactions?: string[]
-}
-
 type PreviewContextProps = {
     openPreview: Function,
     closePreview: Function
@@ -134,6 +137,8 @@ type AttachmentType = {
     external_url: string
 }
 
+type PreviewFormatType = "text"|"code"|"markup"|"image"|"video"|"audio"|"document"|"embed"|"link"|"download"|"none";
+
 type ReactionType = {    
     id: number,
     parent: MessageType, 

package/src/ui/Button.tsx

@@ -1,7 +1,6 @@
 import React, { Children } from "react";
 import Icon from "./Icon";
 import classNames from "classnames";
-import { prefix as wy } from "../utils/styles";
 
 type Props = {
     active?: boolean,
@@ -16,11 +15,11 @@ const Button: any = ({ active = false, type = "button", onClick, className = "",
     let singleChild: any = Children.count(children) === 1 && Children.toArray(children).pop();
 
     let buttonClassNames = classNames(
-        wy('button'), 
+        "wy-button", 
         className,
         {
-            [wy('active')]: active,
-            [wy('button-icon')]: singleChild?.type === Icon.UI
+            "wy-active": active,
+            "wy-button-icon": singleChild?.type === Icon.UI
         }
     );
 

package/src/ui/Dropdown.tsx

@@ -2,7 +2,6 @@ import React, { useEffect, useState } from "react";
 import classNames from 'classnames';
 import Icon from "./Icon";
 import Button from "./Button";
-import { prefix as wy } from "../utils/styles";
 
 type DropdownProps = {
     directionX?: "left" | "right";
@@ -30,12 +29,12 @@ const Dropdown = ({ directionX = "right", directionY = "down", children, classNa
     }
 
     return (
-        <span className={classNames(wy("dropdown"), { [wy("dropup")]: directionY === "up" }, className)} {...props}>
-            <Button.UI onClick={(e: any) => handleMenuClick(e)} className={wy(classNames({ "active": visible }))}>
+        <span className={classNames("wy-dropdown", { "wy-dropup": directionY === "up" }, className)} {...props}>
+            <Button.UI onClick={(e: any) => handleMenuClick(e)} className={classNames({ "wy-active": visible })}>
                 <Icon.UI name="dots-vertical" />
             </Button.UI>
 
-            <div className={wy(classNames("dropdown-menu", { "dropdown-menu-end": directionX === "left" }))} hidden={!visible}>
+            <div className={classNames("wy-dropdown-menu", { "wy-dropdown-menu-end": directionX === "left" })} hidden={!visible}>
                 {children}
             </div>
         </span>
@@ -50,7 +49,7 @@ type ItemProps = {
     props?: React.HTMLAttributes<HTMLDivElement>
 }
 const DropdownItem = ({ children, className = "", onClick, ...props }: ItemProps) => {
-    return <div className={classNames(wy("dropdown-item"), className)} onClick={onClick} {...props}>{children}</div>
+    return <div className={classNames("wy-dropdown-item", className)} onClick={onClick} {...props}>{children}</div>
 }
 
 // Export as replacable UI component