@weavy/uikit-react 11.2.0 → 12.1.0

package/src/components/Preview.tsx

@@ -0,0 +1,294 @@
+import React, { useEffect, useState, useCallback } from "react";
+import Icon from "../ui/Icon";
+import classNames from "classnames";
+import PdfViewer from "./PdfViewer";
+import { checkImageLoad, imageLoaded } from "./Image";
+
+const getStream = (response: Response) => {
+    if (response && response.ok && response.body) {
+        const reader = response.body.getReader();
+        return new ReadableStream({
+            start(controller) {
+                let pump: any = () => {
+                    return reader.read().then(({ done, value }) => {
+                        // When no more data needs to be consumed, close the stream
+                        if (done) {
+                            controller.close();
+                            return;
+                        }
+                        // Enqueue the next data chunk into our target stream
+                        controller.enqueue(value);
+                        return pump();
+                    });
+                }
+
+                return pump();
+            }
+        })
+    }
+};
+
+type ImageProps = {
+    src: string,
+    width?: number,
+    height?: number
+}
+
+export const PreviewImage = ({ src, width, height }: ImageProps) => {
+    const imageRef = useCallback((element: HTMLImageElement) => {
+        if (element) {
+            checkImageLoad(element);
+        }
+    }, [])
+
+    return (
+        <>
+            {width && height ?
+                <div className="wy-content-image wy-responsive-image" style={{ ["--width" as any]: width, ["--height" as any]: height }}>
+                    <img ref={imageRef} src={src} onLoad={imageLoaded} width={width} height={height} decoding="async" />
+                    {/* TODO: spinner here */}
+                </div>
+                :
+                <div className="wy-content-image wy-responsive-image wy-intrinsic-image">
+                    <img ref={imageRef} src={src} onLoad={imageLoaded} decoding="async" />
+                </div>
+            }
+        </>
+    );
+}
+
+type DocumentProps = {
+    src: string
+}
+
+export const PreviewDocument = ({ src }: DocumentProps) => {
+    return (
+        <PdfViewer src={src} />
+    );
+}
+
+function mediaFallback(media: HTMLVideoElement | HTMLAudioElement) {
+    if (media.classList.contains("wy-loading")) {
+        media.classList.add("wy-loaded");
+    }
+    media.classList.add("wy-error");
+    // TODO: replace with react way
+    media.outerHTML = media.outerHTML.replace(/<(video|audio)/, "<div").replace(/(video|audio)>/, "div>");
+}
+
+function mediaLoaded(event: any) {
+    var src = event.target;
+    if (src.tagName === 'VIDEO' || src.tagName === 'AUDIO') {
+        if (src.classList.contains("wy-loading")) {
+            console.log("loaded")
+            src.classList.add("wy-loaded");
+        }
+    }
+}
+
+function mediaError(event: any) {
+    var src = event.target;
+    var media;
+    if (src.tagName === 'SOURCE') {
+        media = src.parentNode;
+        media.dataset.errors = (media.dataset.errors || 0) + 1;
+
+        if (media.querySelectorAll("source").length >= media.dataset.errors) {
+            console.warn(media.tagName.toLowerCase() + " source error, switching to fallback");
+            mediaFallback(media);
+        }
+    }
+}
+
+function codecError(event: any) {
+    var src = event.target;
+    if (src.tagName === 'VIDEO' || src.tagName === 'AUDIO') {
+        // Capture codec-error for video in firefox
+        if (src.tagName === 'VIDEO' && !src.videoWidth || src.tagName === 'AUDIO' && !src.duration) {
+            console.warn(src.tagName.toLowerCase() + " track not available, switching to fallback");
+            mediaFallback(src);
+        }
+    }
+}
+
+type VideoProps = {
+    src: string,
+    name: string,
+    mediaType?: string
+}
+
+export const PreviewVideo = ({ src, name, mediaType }: VideoProps) => {
+    /* TODO: loading, error handling and stopping */
+
+    return (
+        <>
+            <video className="wy-content-video" controls crossOrigin="use-credentials" autoPlay>
+                <source src={src} type={mediaType} />
+                <PreviewIcon src={src} name={name} icon="file-video" download />
+            </video>
+            {/* TODO: spinner here */}
+        </>
+    );
+}
+
+type AudioProps = {
+    src: string,
+    name: string,
+    mediaType?: string
+}
+
+export const PreviewAudio = ({ src, name, mediaType }: AudioProps) => {
+    /* TODO: loading, error handling and stopping */
+    return (
+        <>
+            <PreviewIcon src={src} name={name} icon="file-music" download>
+                <audio className="wy-content-audio" controls crossOrigin="use-credentials" autoPlay>
+                    <source src={src} type={mediaType} />
+                </audio>
+            </PreviewIcon>
+        </>
+    );
+}
+
+type TextProps = {
+    src: string,
+    html?: boolean,
+    code?: boolean
+}
+
+export const PreviewText = ({ src, html = false, code = false }: TextProps) => {
+    const [textContent, setTextContent] = useState("");
+
+    useEffect(() => {
+        fetch(src)
+            .then(getStream)
+            // Create a new response out of the stream
+            .then(stream => new Response(stream))
+            // Create an object URL for the response
+            .then(response => response.text())
+            .then(text => {
+                setTextContent(text)
+            })
+    }, [src]);
+
+    return (
+        <>
+            {html ?
+                code ?
+                    <div className="wy-content-code" dangerouslySetInnerHTML={{ __html: textContent }}></div>
+                    :
+                    <div className="wy-content-text">
+                        <pre className="wy-document" dangerouslySetInnerHTML={{ __html: textContent }}></pre>
+                    </div>
+                :
+                code ?
+                    <div className="wy-content-code">{textContent}</div>
+                    :
+                    <div className="wy-content-text">
+                        <pre className="wy-document">{textContent}</pre>
+                    </div>
+            }
+        </>
+    );
+}
+
+type EmbedProps = {
+    src: string,
+    name: string,
+    icon: string,
+    provider?: string
+}
+
+export const PreviewEmbed = ({ src, name, icon, provider }: EmbedProps) => {
+    /* TODO: add loading and error handling */
+    return (
+        <>
+            {/* iframe needs to be object to not render error pages when content is blocked */}
+            <object className="wy-content-iframe" data={src}></object>
+
+            {/* TODO: add spinner here */}
+
+            <PreviewIcon src={src} name={name} icon={icon} provider={provider} className="wy-content-iframe-fallback" />
+        </>
+    );
+}
+
+type IconProps = {
+    children?: React.ReactNode,
+    src: string,
+    icon: string,
+    name: string,
+    provider?: string,
+    download?: boolean,
+    className?: string
+}
+
+export const PreviewIcon = ({ children, src, icon, name, provider, download = false, className }: IconProps) => {
+    return (
+        <div className={classNames("wy-content-media", className)}>
+            <div className="wy-content-icon">
+                <Icon.UI name={icon} />
+            </div>
+            <div className="wy-content-name">
+                {provider ?
+                    <a href={src} target="_blank" title={`Open in ${provider}`}>{name} <Icon.UI name="open-in-new" size={1} /></a>
+                    : download ?
+                        <a href={src} target="_top" download>{name}</a>
+                        :
+                        <a href={src} target="_blank">{name} <Icon.UI name="open-in-new" size={1} /></a>
+                }
+            </div>
+            {children}
+        </div>
+    );
+}
+
+type PreviewProps = {
+    src: string,
+    format: PreviewFormatType,
+    name: string,
+    icon: string,
+    width?: number,
+    height?: number,
+    mediaType?: string,
+    provider?: string
+}
+
+export const Preview = ({ src, format, name, icon, width, height, mediaType, provider }: PreviewProps) => {
+    return (
+        <>
+            {format === "image" &&
+                <PreviewImage src={src} width={width} height={height} />
+            }
+            {format === "document" &&
+                <PreviewDocument src={src} />
+            }
+            {format === "video" &&
+                <PreviewVideo src={src} name={name} mediaType={mediaType} />
+            }
+            {format === "audio" &&
+                <PreviewAudio src={src} name={name} mediaType={mediaType} />
+            }
+            {format === "text" &&
+                <PreviewText src={src} />
+            }
+            {format === "code" &&
+                <PreviewText src={src} html code />
+            }
+            {format === "markup" &&
+                <PreviewText src={src} html />
+            }
+            {format === "embed" &&
+                <PreviewEmbed src={src} name={name} icon={icon} provider={provider} />
+            }
+            {format === "link" &&
+                <PreviewIcon src={src} name={name} icon={icon} provider={provider} />
+            }
+            {format === "download" &&
+                <PreviewIcon src={src} name={name} icon={icon} download />
+            }
+        </>
+    )
+}
+
+export default Preview;

package/src/components/Reactions.tsx

@@ -5,7 +5,6 @@ import Button from "../ui/Button";
 import { MessengerContext } from "../contexts/MessengerContext";
 import classNames from "classnames";
 
-import { prefix as wy } from "../utils/styles";
 import useReactions from "../hooks/useReactions";
 import useMutateDeleteReaction from "../hooks/useMutateDeleteReaction";
 import { WeavyContext } from "../contexts/WeavyContext";
@@ -69,12 +68,12 @@ export const ReactionsMenu = ({ id, reactions }: ReactionMenuProps) => {
     }
 
     return (
-        <div className={wy(classNames("", { "active": visible }))} style={{ position: 'relative' }}>
-            <Button.UI onClick={toggleReactionMenu}><Icon.UI name="emoticon-outline" size={1} /></Button.UI>
-            <div className={wy('reaction-menu dropdown-menu')} style={{ display: visible ? 'block' : 'none', position: 'absolute', top: '-3.25rem' }}>
-                <div className={wy('reaction-picker')}>
+        <div className={classNames({ "wy-active": visible })} style={{ position: 'relative' }}>
+            <Button.UI onClick={toggleReactionMenu}><Icon.UI name="emoticon-plus" size={1} /></Button.UI>
+            <div className="wy-reaction-menu wy-dropdown-menu" style={{ display: visible ? 'block' : 'none', position: 'absolute', top: '-3.25rem' }}>
+                <div className="wy-reaction-picker">
                     {emojis?.map((r: string, i: number) => {
-                        return <Button.UI key={i} onClick={handleReaction} className={wy(classNames("button-icon reaction-button", { "active": reactedEmoji === r }))} data-emoji={r}>{r}</Button.UI> //reactedEmoji
+                        return <Button.UI key={i} onClick={handleReaction} className={classNames("wy-button-icon wy-reaction-button", { "wy-active": reactedEmoji === r })} data-emoji={r}>{r}</Button.UI> //reactedEmoji
                     })}
                 </div>
             </div>
@@ -89,7 +88,7 @@ export const ReactionsList = ({ id, reactions }: ReactionsProps) => {
     return (
         <>
             {reactionsList && reactionsList.map((r: ReactionGroup, i: number) => {
-                return <span key={i} className={wy('reaction')} title={r.count.toString()}>{r.content}</span> //r.has_reacted
+                return <span key={i} className="wy-reaction" title={r.count.toString()}>{r.content}</span> //r.has_reacted
             })}
         </>
     )

package/src/components/SearchUsers.tsx

@@ -4,7 +4,6 @@ import useSearchUsers from "../hooks/useSearchUsers";
 import Avatar from './Avatar';
 import Button from '../ui/Button';
 import Icon from '../ui/Icon';
-import { prefix as wy } from "../utils/styles";
 
 type SearchUsersProps = {
     handleSubmit: any,
@@ -42,33 +41,33 @@ const SearchUsers = ({handleSubmit, buttonTitle}: SearchUsersProps) => {
     }
 
     return (
-        <div className={wy('search scroll-y')}>
-            <div className={wy('search-form pane-group')}>
+        <div className="wy-search wy-scroll-y">
+            <div className="wy-search-form wy-pane-group">
                 <Button.UI><Icon.UI name="magnify" /></Button.UI>
-                <input className={wy('search-input')} value={text} onChange={(e) => setText(e.target.value)} name="text" placeholder='Search...' />
+                <input className="wy-search-input" value={text} onChange={(e) => setText(e.target.value)} name="text" placeholder='Search...' />
             </div>
 
-            <div className={wy('pane-group')}>
+            <div className="wy-pane-group">
                 {data && data.data.length === 0 &&
-                    <div className={wy('search-no-result')}>Your search did not match any people.</div>
+                    <div className="wy-search-no-result">Your search did not match any people.</div>
                 }
-                <table className={wy('search-result-table')}>
+                <table className="wy-search-result-table">
                     <tbody>
                         {data && data.data.length > 0 && data.data.map((user: MemberType) => {
                             return (
-                                <tr key={user.id} className={wy('search-result-table-checkbox')}>
-                                    <td className={wy('search-result-table-icon')}>
+                                <tr key={user.id} className="wy-search-result-table-checkbox">
+                                    <td className="wy-search-result-table-icon">
                                         <Avatar src={user.avatar_url} size={24} id={user.id} presence={user.presence} name={user.display_name} />
                                     </td>
                                     <td><label htmlFor={'chk' + user.id}>{user.display_name}</label></td>
-                                    <td className={wy('search-result-table-icon')}><input type="checkbox" id={'chk' + user.id} checked={isChecked(user.id)} onChange={(e) => handleSelected(e, user)} /></td>
+                                    <td className="wy-search-result-table-icon"><input type="checkbox" id={'chk' + user.id} checked={isChecked(user.id)} onChange={(e) => handleSelected(e, user)} /></td>
                                 </tr>
                             )
                         })}
-                    </tbody>
+                    </tbody> 
                 </table>
             </div>
-            {/*<div className={wy('search-group')}>
+            {/*<div className="wy-search-group">
                 <h2>Selected people</h2>
                 <ul>
                     {selected && selected.length > 0 && selected.map((user: UserType) => {
@@ -76,10 +75,12 @@ const SearchUsers = ({handleSubmit, buttonTitle}: SearchUsersProps) => {
                     })}
                 </ul>
                 </div>*/}
-            <div className={wy('footerbars')}>
-                <div className={wy('footerbar')}>
-                    <div className={wy('pane-group')}>
-                        <button className={wy('button-primary')} type="button" onClick={() => {handleSubmit(selected); clear();}} disabled={selected.length === 0}>{buttonTitle}</button>
+            <div className="wy-footerbars">
+                <div className="wy-footerbar">
+                    <div className="wy-pane-group">
+                        <div className="wy-buttons">
+                            <button className="wy-button wy-button-primary" type="button" onClick={() => {handleSubmit(selected); clear();}} disabled={selected.length === 0}>{buttonTitle}</button>
+                        </div>
                     </div>
                 </div>
             </div>

package/src/components/SeenBy.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 import Avatar from "./Avatar";
 import dayjs  from 'dayjs';
-import { prefix as wy } from "../utils/styles";
 
 type Props = {
     id: number,
@@ -13,7 +12,7 @@ type Props = {
 const SeenBy = ({ seenBy }: Props) => {
    
     return (
-        <div className={wy('readby-status')}>
+        <div className="wy-readby-status">
             {seenBy && seenBy.length > 0 && seenBy.map((member: MemberType) => {
                 const date = dayjs.utc(member.read_at).tz(dayjs.tz.guess());
                 return (<Avatar name={`Seen by ${member.name} at ${date.format('LLLL')}`} src={member.avatar_url} size={16} key={member.id}/>)})

package/src/contexts/PreviewContext.tsx

@@ -2,7 +2,6 @@ import React, { createContext, useEffect, useState } from "react";
 import Overlay from '../ui/Overlay';
 import Button from '../ui/Button';
 import Icon from '../ui/Icon';
-import { prefix as wy } from "../utils/styles";
 
 export const PreviewContext = createContext<PreviewContextProps>({
     openPreview: Function,
@@ -64,11 +63,11 @@ const PreviewProvider = ({ children }: Props) => {
                 {children}
             </PreviewContext.Provider>
 
-            <Overlay.UI isOpen={modalPreviewOpen} className={wy('dark')}>
-                <header className={wy('appbars')}>
-                    <nav className={wy('appbar')}>
+            <Overlay.UI isOpen={modalPreviewOpen} className={'wy-dark'}>
+                <header className={'wy-appbars'}>
+                    <nav className={'wy-appbar'}>
                         <Button.UI onClick={closePreview}><Icon.UI name='close' /></Button.UI>
-                        <div className={wy('appbar-text')}>
+                        <div className={'wy-appbar-text'}>
                             {activeAttachment &&
                                 <span>{activeAttachment.name}</span>
                             }
@@ -102,4 +101,3 @@ const PreviewProvider = ({ children }: Props) => {
 };
 
 export default PreviewProvider;
-

package/src/hooks/useConversation.ts

@@ -1,5 +1,4 @@
 import { useContext } from "react";
-
 import { useQuery } from "react-query";
 import { WeavyContext } from "../contexts/WeavyContext";
 

package/src/hooks/usePresence.ts

@@ -1,6 +1,5 @@
 import { useContext, useEffect } from "react";
 import { WeavyContext } from "../contexts/WeavyContext";
-import { prefix as wy } from "../utils/styles";
 
 export default function usePresence() {
 
@@ -17,18 +16,18 @@ export default function usePresence() {
     const handlePresenceChange = (data: any) => {        
         
         if (Array.isArray(data)) {
-            document.querySelectorAll(wy(".presence")).forEach(function (item) {
-                item.classList.remove(wy("presence-active"));
+            document.querySelectorAll(".wy-presence").forEach(function (item) {
+                item.classList.remove("wy-presence-active");
             });
 
             data.forEach(function (id) {
                 document.querySelectorAll("[data-presence-id='" + id + "']").forEach(function (item) {
-                    item.classList.add(wy("presence-active"));
+                    item.classList.add("wy-presence-active");
                 });
             });
         } else {
             document.querySelectorAll("[data-presence-id='" + data + "']").forEach(function (item) {
-                item.classList.add(wy("presence-active"));
+                item.classList.add("wy-presence-active");
             });
         }
     }

package/src/hooks/useReactions.ts

@@ -2,7 +2,6 @@ import { useCallback, useContext, useEffect, useLayoutEffect, useState } from "r
 import { UserContext } from "../contexts/UserContext";
 import useEvents from "./useEvents";
 
-
 export default function useReactions(id: number, reactions: ReactableType[]) {
     const { on, off } = useEvents();
     const { user } = useContext(UserContext);

package/src/scss/theme/_alert.scss

@@ -0,0 +1,73 @@
+@use "config" as *;
+
+// Global alerts
+
+.wy-alert-message {
+    padding: .25rem .5rem;
+    background-color: $client-alert-background;
+    text-align: center;
+    width: $client-panel-width;
+    color: $client-alert-color;
+    border-radius: .1875rem;
+    margin: 0 auto;
+    margin-top: 1rem;
+    font-family: $font-family-base;
+    position: relative;
+    z-index: 10;
+    box-shadow: $md-shadow-8dp;
+    max-width: calc(100% - 3rem);
+    pointer-events: none;
+    user-select: none;
+
+    a {
+        color: darken($client-alert-color, 10%);
+        text-decoration: $link-decoration;
+        font-weight: $alert-link-font-weight;
+        pointer-events: auto;
+    }
+
+    &.wy-fade {
+        transition: all $md-animation-duration $md-animation-curve-default;
+        opacity: 0;
+        height: 0;
+        padding-top: 0;
+        padding-bottom: 0;
+        margin-top: 0;
+
+        &.wy-in {
+            transition: opacity $md-animation-duration $md-animation-curve-default;
+            opacity: 1;
+            height: auto;
+            padding-top: .5rem;
+            padding-bottom: .5rem;
+            margin-top: 1rem;
+        }
+    }
+
+    .wy-button {
+        cursor: pointer;
+        display: inline-flex;
+        flex-shrink: 0;
+        flex-grow: 0;
+
+        > * {
+            display: inline-flex;
+        }
+
+        font-weight: 400;
+        text-align: center;
+        white-space: nowrap;
+        vertical-align: middle;
+        user-select: none;
+        border: 1px solid transparent;
+        padding: .3125rem .75rem;
+        font-size: 1rem;
+        line-height: 1.5;
+        border-radius: .1875rem;
+        color: $white;
+        background-color: $primary;
+        border-color: $primary;
+        box-shadow: $btn-box-shadow;
+        margin-top: .5rem;
+    }
+}

package/src/scss/theme/_appbar.scss

@@ -0,0 +1,112 @@
+@use "config" as *;
+@use "mixins/backdrop";
+@use "mixins/position";
+
+.wy-appbars {
+  @include position.sticky-top;
+
+  @include backdrop.filter {
+    > .wy-appbar {
+      backdrop-filter: none;
+    }
+  }
+}
+
+.wy-appbar {
+  display: grid;
+  align-items: center;
+  justify-content: space-between;
+  height: $appbar-height;
+  padding: $navbar-padding-y $navbar-padding-x;
+  flex: 0 0 $appbar-height;
+  grid-template-columns: minmax(2rem, max-content) minmax(0, max-content) minmax(2rem, max-content);
+  column-gap: .5rem;
+
+  @include backdrop.filter;
+
+  .wy-badge {
+    align-self: center;
+  }
+
+  .wy-button {
+    max-height: 2rem;
+  }
+}
+
+.wy-appbar-buttons {
+  display: flex;
+  flex: 0 0 1rem;
+}
+
+.wy-appbar-text {
+  @include text-truncate();
+  color: inherit !important;
+  user-select: none;
+
+  a {
+    color: inherit;
+
+    &:hover {
+      color: inherit;
+    }
+  }
+}
+
+.wy-appbar {
+  // light theme (default)
+  &, .wy-light &, &.wy-light {
+    background-color: rgba($gray-50, $opacity-backdrop);
+    color: $navbar-light-color;
+    border-bottom: $border-width solid rgba($gray-200, $opacity-backdrop);
+  }
+  // dark theme
+  .wy-dark &, &.wy-dark {
+    background-color: rgba($dark, $opacity-backdrop);
+    color: $navbar-dark-color;
+    border-bottom: $border-width solid rgba($gray-800, $opacity-backdrop);
+  }
+}
+
+.wy-footerbars {
+  padding-bottom: $footerbar-height;
+}
+
+.wy-footerbar {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: $zindex-sticky;
+
+  &::after {
+    content: "";
+    position: absolute;
+    width: 100vw;
+    left: 0;
+    bottom: 0;
+    height: $footerbar-height;
+    border-top: $border-width solid rgba($gray-200, $opacity-backdrop);
+    background: rgba($gray-50, $opacity-backdrop);
+    z-index: -1;
+
+    @include backdrop.filter;
+  }
+
+  .wy-buttons {
+    flex-direction: row-reverse;
+
+    > :not(:last-child) {
+      margin: 0 0 0 .5rem;
+    }
+  }
+}
+
+.wy-footerbars-fixed {
+  .wy-footerbar {
+    position: fixed;
+
+    &::after {
+      position: fixed;
+    }
+  }
+}