@weavy/uikit-react 13.0.0 → 14.0.0

package/src/hooks/useReactions.ts

@@ -9,7 +9,7 @@ export default function useReactions(id: number, reactions: ReactableType[]) {
 
     const groupReactions = useCallback((data: ReactableType[]) => {
         var group = [...new Map<string, ReactableType>(data.map((item: ReactableType) => [item.content, item])).values()];
-        
+
         return group.map((item: ReactableType): ReactionGroup => {
             return {
                 content: item.content,
@@ -19,17 +19,17 @@ export default function useReactions(id: number, reactions: ReactableType[]) {
         });
     }, [reactionsList]);
 
-    const handleRealtimeReactionInserted = useCallback((reaction: ReactionType) => {
-        if (reaction.parent.id === id) {
+    const handleRealtimeReactionInserted = useCallback((reaction: RealtimeReaction) => {        
+        if (reaction.entity.id === id) {            
             setReactionsList((oldList) => {
-                return [...oldList || [], { content: reaction.content, created_by_id: reaction.created_by.id }];
+                return [...oldList || [], { content: reaction.reaction, created_by_id: reaction.actor.id }];
             });
         }
     }, [id, reactionsList]);
 
-    const handleRealtimeReactionDeleted = useCallback((reaction: ReactionType) => {
-        if (reaction.parent.id === id) {
-            setReactionsList(oldList => oldList.filter(item => item.created_by_id !== reaction.created_by.id));
+    const handleRealtimeReactionDeleted = useCallback((reaction: RealtimeReaction) => {        
+        if (reaction.entity.id === id) {
+            setReactionsList(oldList => oldList.filter(item => item.created_by_id !== reaction.actor.id));
         }
     }, [id, reactionsList]);
 
@@ -38,13 +38,12 @@ export default function useReactions(id: number, reactions: ReactableType[]) {
     }, [reactions]);
 
     useEffect(() => {
-
-        on('reaction-inserted', handleRealtimeReactionInserted);
-        on('reaction-deleted', handleRealtimeReactionDeleted);
+        on('reaction_added_' + id, handleRealtimeReactionInserted);
+        on('reaction_deleted_' + id, handleRealtimeReactionDeleted);
 
         return () => {
-            off('reaction-inserted', handleRealtimeReactionInserted);
-            off('reaction-deleted', handleRealtimeReactionDeleted);
+            off('reaction_added_' + id, handleRealtimeReactionInserted);
+            off('reaction_deleted_' + id, handleRealtimeReactionDeleted);
         }
     }, [id]);
 

package/src/scss/theme/_alert.scss

@@ -1,73 +1,71 @@
-@use "config" as *;
+@use "sass:map";
+@use "base/vars";
+@use "base/colors";
 
-// Global alerts
+.wy-alerts {
+  position: fixed;
+  left: 0;
+  top: 4rem;
+  right: 0;
+  pointer-events: none;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  z-index: vars.$zindex-fixed;
+  gap: 1rem;
+}
 
-.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;
+.wy-alert {
+  background: colors.$surface-1;
+  color: colors.$on-surface;
+  margin: 0 0 1rem;
+  //max-width: calc(100% - 3rem);
+  gap: .5rem;
+  display: flex;
+  flex-direction:row;
+  flex-wrap: wrap;
+  align-items: baseline;
+  cursor: pointer;
+  border-radius: vars.$border-radius;
+  margin-left: auto;
+  margin-right: auto;
+  margin-bottom: 1rem;
+  padding: .5rem 1rem;
+  user-select: none;
+  //box-shadow: vars.$shadow-level2;
+  position: relative;
+  overflow: hidden;
+  height: auto;
+  gap: .5rem;
 
-    a {
-        color: darken($client-alert-color, 10%);
-        text-decoration: $link-decoration;
-        font-weight: $alert-link-font-weight;
-        pointer-events: auto;
+  &.wy-fade {
+    transition: all vars.$transition;
+    
+    &:not(.wy-show) {
+      opacity: 0;
+      height: 0;
+      padding-top: 0;
+      padding-bottom: 0;
+      margin-top: 0;
+      margin-bottom: 0;
     }
+  }
 
-    &.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-text {
+    line-height: 1.5;
+    padding: .5rem;
+  }
 
-        &.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 {
+    margin-left: auto;
+    pointer-events: auto;
+  }
+}
 
-    .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;
-    }
+.wy-alert-primary {
+  background: colors.$primary-container;
+  color: colors.$on-primary-container;
 }

package/src/scss/theme/_appbar.scss

@@ -1,6 +1,9 @@
-@use "config" as *;
-@use "mixins/backdrop";
-@use "mixins/position";
+@use "sass:math";
+@use "base/vars";
+@use "base/colors";
+@use "base/backdrop";
+@use "base/position";
+@use "base/text";
 
 .wy-appbars {
   @include position.sticky-top;
@@ -10,38 +13,63 @@
       backdrop-filter: none;
     }
   }
+
+  --wy-component-background-color: #{colors.$surface-1};
+  background-color: var(--wy-component-background-color);
+
+  box-shadow: #{colors.$outline-variant} 0px -1px 0px 0px inset;
+
+  > .wy-appbar, > .wy-toolbar {
+    background-color: transparent;
+    box-shadow: none;
+  }
 }
 
 .wy-appbar {
+  --wy-component-color: #{colors.$on-surface};
+  --wy-component-background-color: #{colors.$surface-1};
+
   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);
+  justify-items: center;
+  height: vars.$appbar-height;
+  padding: .25rem;
+  flex: 0 0 vars.$appbar-height;
+  grid-template-columns: minmax(2.5rem, max-content) minmax(0, max-content) minmax(2.5rem, max-content);
   column-gap: .5rem;
-  font-family: $font-family-base;
-  line-height: $line-height-base;
+  //font-family: vars.$font-family-base;
+  line-height: vars.$line-height-base;
 
-  @include backdrop.filter;
+  background-color: var(--wy-component-background-color);
+  color: var(--wy-component-color);
+  box-shadow: #{colors.$outline-variant} 0px -1px 0px 0px inset;
 
   .wy-badge {
     align-self: center;
   }
 
   .wy-button {
-    max-height: 2rem;
+    max-height: 2.5rem;
   }
 }
 
-.wy-appbar-buttons {
+
+
+.wy-appbar-buttons, .wy-toolbar-buttons {
   display: flex;
-  flex: 0 0 1rem;
+  flex: 0 0 auto;
+  align-items: center;
+}
+
+.wy-toolbar-buttons-last {
+  margin-inline-start: auto;
 }
 
 .wy-appbar-text {
-  @include text-truncate();
+  @include text.truncate;
+  max-width: 100%;
+  
   color: inherit !important;
   user-select: none;
 
@@ -54,41 +82,83 @@
   }
 }
 
-.wy-appbar {
-  // light theme (default)
-  &, .wy-light &, &.wy-light {
-    background-color: rgba($gray-50, $opacity-backdrop);
-    color: $navbar-light-color;
-    box-shadow: rgba($gray-200, $opacity-backdrop) 0px -1px 0px 0px inset;
+// floating toolbars (mainly for pdf preview, but can be also be used for other things)
+.wy-toolbars-bottom {
+  position: absolute;
+  z-index: vars.$zindex-fixed;
+  bottom: math.div(vars.$footerbar-height, 2);
+  left: 0;
+  right: 0;
+  min-height: vars.$appbar-height;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  justify-items: center;
+}
+
+.wy-toolbar {
+  --wy-component-color: #{colors.$on-surface};
+  --wy-component-background-color: #{colors.$surface-1};
+
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-start;
+  justify-items: center;
+  min-height: vars.$appbar-height;
+  padding: .25rem;
+  flex: 1 0 vars.$appbar-height;
+  column-gap: .25rem;
+  //font-family: vars.$font-family-base;
+  line-height: vars.$line-height-base;
+
+  background-color: var(--wy-component-background-color);
+  color: var(--wy-component-color);
+  box-shadow: #{colors.$outline-variant} 0px -1px 0px 0px inset;
+
+  span {
+    margin-left: .25rem;
   }
-  // dark theme
-  .wy-dark &, &.wy-dark {
-    background-color: rgba($dark, $opacity-backdrop);
-    color: $navbar-dark-color;
-    box-shadow: rgba($gray-800, $opacity-backdrop) 0px -1px 0px 0px inset;
+}
+
+.wy-toolbar-center {
+  margin: 0 auto;
+  border-radius: vars.$border-radius;
+  
+  .wy-input {
+    text-align: center;
+    //border-color: transparent;
   }
 }
 
 .wy-footerbars {
-  padding-bottom: $footerbar-height;
+  padding-bottom: vars.$footerbar-height;
+
+  > .wy-toolbar {
+    box-shadow: none;
+  }
 }
 
 .wy-footerbar {
+  --wy-component-background-color: #{colors.$surface-1};
+  --wy-component-color: #{colors.$on-surface};
+  
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
-  z-index: $zindex-sticky;
+  z-index: vars.$zindex-sticky;
 
   &::after {
     content: "";
+    background-color: var(--wy-component-background-color);
+    color: var(--wy-component-color);
+    box-shadow: #{colors.$outline-variant} 0px 1px 0px 0px inset;
     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);
+    height: 100%;
     z-index: -1;
 
     @include backdrop.filter;
@@ -103,12 +173,17 @@
   }
 }
 
+.wy-footerbar-sticky {
+  position: sticky;
+}
+
 .wy-footerbars-fixed {
   .wy-footerbar {
     position: fixed;
 
     &::after {
       position: fixed;
+      height: vars.$footerbar-height;
     }
   }
 }

package/src/scss/theme/_avatar.scss

@@ -1,5 +1,9 @@
-@use "config" as *;
-@use "bs/forms";
+@use "base/vars";
+@use "base/colors";
+
+:where(:root, :host > *) {
+  --wy-presence-active: #{colors.$green};
+}
 
 .wy-avatar {
   border-radius: 50%;
@@ -12,43 +16,34 @@
   text-align: center;
 }
 
-.wy-avatar-input {
-  @extend %form-control, %form-control-sm;
-  background: $light;
-  border-color: transparent;
-  text-align: center;
-  margin-left: auto;
-  margin-right: auto;
-  margin-bottom: 1.5rem;
-}
-
 .wy-avatar-presence {
   position: relative;
+  display: inline-flex;
 }
 
-.wy-avatar-display-name {
-  font-size: $h4-font-size;
-  font-weight: $display-font-weight;
-  line-height: $display-line-height;
-  text-align: center;
-}
-
-
 // presence indicator
 .wy-presence {
-  display: none; // initially hidden
-  background-color: $gray-100;
+  &:not(.wy-presence-active) {
+    display: none; // initially hidden
+  }
+
+  background-color: var(--wy-component-background-color, transparent);
   width: .75rem;
   height: .75rem;
   border-radius: 50%;
-  outline: .125rem solid $white;
+  //outline: .125rem solid ;
   position: absolute;
   bottom: 0;
   right: -5%;
-}
 
-// online
-.wy-presence-active {
-  background-color: $green-400;
-  display: block;
+  &::after {
+    content: "";
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    border-radius: inherit;
+    background-color: var(--wy-presence-active);
+    background-clip: content-box;
+    padding: .125rem;
+  }
 }

package/src/scss/theme/_badge.scss

@@ -1,23 +1,30 @@
-@use "config" as *;
-@use "bs/badge";
+@use "base/vars";
+@use "base/colors";
+@use "base/text";
 
+$badge-padding-y: .35em !default;
+$badge-padding-x: .65em !default;
+$badge-font-size: .75em !default;
+$badge-font-weight: vars.$font-weight-bold !default;
 
 .wy-badge {
-  @extend %badge;
-  border-radius: 50rem;
-  background-color: $primary;
-}
-
-.wy-badge-success {
-  background-color: $success;
-}
-
-.wy-badge-warning {
-  background-color: $warning;
-}
+  display: inline-block;
+  padding: $badge-padding-y $badge-padding-x;
+  font-size: $badge-font-size;
+  font-weight: $badge-font-weight;
+  line-height: 1;
+  color: colors.$on-primary;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: baseline;
+
+  // Empty badges collapse automatically
+  &:empty {
+    display: none;
+  }
 
-.wy-badge-danger {
-  background-color: $danger;
+  border-radius: vars.$border-radius-pill;
+  background-color: colors.$primary;
 }
 
 .wy-button {
@@ -25,7 +32,7 @@
 
   // badge, e.g. notification count
   .wy-badge {
-    font-size: $font-size-xs;
+    font-size: vars.$font-size-xs;
     position: absolute;
     right: 0;
     top: 0;
@@ -38,7 +45,8 @@
     line-height: .5rem;
     display: block;
     text-align: center;
-    @include text-truncate();
+    
+    @include text.truncate;
 
     &:empty {
       display: none;