@cloudflare/realtimekit-ui 0.0.0 → 1.0.0-staging.11

package/dist/collection/lib/render/utils.js

@@ -0,0 +1,115 @@
+/**
+ * Computes selectors and returns them based on their priority.
+ */
+export const computeSelectors = ({ element, size, states = {}, config = {}, }) => {
+    let selectors = [];
+    const data = config === null || config === void 0 ? void 0 : config.root[element];
+    const add = (selector) => {
+        selectors.push(selector);
+        if (typeof size === 'string') {
+            selectors.push(`${selector}.${size}`);
+        }
+    };
+    add(element);
+    if (typeof data === 'object' && !Array.isArray(data) && data !== null) {
+        // check if the data variable is an object, strictly and not an array or just null
+        const { state, states: elementStates } = data;
+        let selector = element;
+        let activeStates = [];
+        if (Array.isArray(elementStates)) {
+            activeStates = elementStates.filter((state) => states[state]);
+            activeStates.sort();
+            for (const state of activeStates) {
+                add(`${selector}.${state}`);
+            }
+            if (activeStates.length > 1) {
+                const booleanStateSelector = [selector, ...activeStates].join('.');
+                add(booleanStateSelector);
+            }
+        }
+        if (typeof state === 'string') {
+            // rtk-meeting[meeting=joined]
+            const keyValueSelector = `${element}[${state}=${states[state]}]`;
+            add(keyValueSelector);
+            for (const state of activeStates) {
+                add(`${keyValueSelector}.${state}`);
+            }
+            if (activeStates.length > 1) {
+                const withBooleanStateSelector = [keyValueSelector, ...activeStates].join('.');
+                add(withBooleanStateSelector);
+            }
+        }
+    }
+    return selectors;
+};
+/**
+ * Returns the computed styles - styles obtained from combining styles from all computed selectors
+ * on the basis of their priorities.
+ */
+export const getComputedStyles = ({ selectors, styles }) => {
+    if (!Array.isArray(selectors) || styles == null)
+        return {};
+    const computedStyles = {};
+    for (const selector of selectors) {
+        const style = styles[selector];
+        if (style != null) {
+            Object.assign(computedStyles, style);
+        }
+    }
+    return computedStyles;
+};
+/**
+ * Returns the computed children which are to be rendered inside an element
+ */
+export const getComputedChildren = ({ selectors, root }) => {
+    if (!root || !Array.isArray(selectors))
+        return [];
+    let children = [];
+    for (const selector of selectors) {
+        const el = root[selector];
+        if (Array.isArray(el)) {
+            children = [...el];
+        }
+        else if (el) {
+            if (el.children) {
+                children = [...el.children];
+            }
+            if (Array.isArray(el.remove)) {
+                for (const toRemove of el.remove) {
+                    children = children.filter((child) => {
+                        if (typeof child === 'string') {
+                            return child !== toRemove;
+                        }
+                        else if (Array.isArray(child)) {
+                            return child[0] !== toRemove;
+                        }
+                        return true;
+                    });
+                }
+            }
+            if (el.addBefore) {
+                for (const [beforeEl, toAdd] of Object.entries(el.addBefore)) {
+                    const idx = children.findIndex((child) => {
+                        if (typeof child === 'string') {
+                            return child === beforeEl;
+                        }
+                        else if (Array.isArray(child)) {
+                            return child[0] === beforeEl;
+                        }
+                        return false;
+                    });
+                    if (idx >= 0) {
+                        children.splice(idx, 0, ...toAdd);
+                    }
+                }
+            }
+            if (Array.isArray(el.add)) {
+                children = children.concat(el.add);
+            }
+            if (Array.isArray(el.prepend)) {
+                children = el.prepend.concat(children);
+            }
+        }
+    }
+    return children;
+};

package/dist/collection/lib/visualizer.js

@@ -0,0 +1,42 @@
+/**
+ * Draws audio visualizer of variant `bars`
+ * @param canvas Canvas element
+ * @param volume Current volume
+ */
+export const drawBarsVisualizer = (canvas, volume) => {
+    if (canvas == null) {
+        return;
+    }
+    const nSlices = 3;
+    const halfwaySlice = Math.round(nSlices / 2);
+    const sample = [...Array(nSlices)].map((_, i) => {
+        let index = i;
+        if (index > halfwaySlice - 1) {
+            index = nSlices - index - 1;
+        }
+        return Math.round(((index + 1) / (halfwaySlice + 1)) * volume);
+    });
+    const { width, height } = canvas;
+    const context = canvas.getContext('2d');
+    let x = 2;
+    const sliceGraphicWidth = 4;
+    const sliceWidth = (width * 1.0) / sample.length;
+    const slicePadding = sliceWidth - sliceGraphicWidth;
+    context.clearRect(0, 0, width, height);
+    context.fillStyle = 'rgb(0,0,0,0.0)';
+    context.fillRect(0, 0, width, height);
+    const color = getComputedStyle(canvas).getPropertyValue('color');
+    context.fillStyle = color;
+    context.strokeStyle = color;
+    context.lineCap = 'round';
+    context.lineWidth = 4;
+    context.beginPath();
+    for (const item of sample) {
+        const y = Math.min(-Math.abs(((item * 1.2) / 10) * height) + height / 2, height / 2 - 2.5);
+        const sliceHeight = Math.max((height / 2 - y) * 2, 5);
+        context.moveTo(x + slicePadding / 2, y);
+        context.lineTo(x + slicePadding / 2, y + sliceHeight);
+        x += sliceWidth;
+    }
+    context.stroke();
+};

package/dist/collection/theme/colors.js

@@ -0,0 +1,130 @@
+/**
+ * Converts Hex color codes to RGB strings for use in the design system
+ * @param {string} hex The hex code of the color
+ * @returns Space separated RGB values
+ */
+const hexToRGB = (hex) => {
+  const r = parseInt(hex.slice(1, 3), 16);
+  const g = parseInt(hex.slice(3, 5), 16);
+  const b = parseInt(hex.slice(5, 7), 16);
+
+  return `${r} ${g} ${b}`;
+};
+
+const defaultColors = {
+  brand: {
+    300: '#497CFD',
+    400: '#356EFD',
+    500: '#2160FD',
+    600: '#0D51FD',
+    700: '#0246FD',
+  },
+  background: {
+    1000: '#080808',
+    900: '#1A1A1A',
+    800: '#1E1E1E',
+    700: '#2C2C2C',
+    600: '#3C3C3C',
+  },
+  'video-bg': '#181818',
+  success: '#62A504',
+  danger: '#FF2D2D',
+  warning: '#FFCD07',
+};
+
+/**
+ * Function which adds support for adding any opacity value to colors from CSS Variables
+ * @param {string} varName The CSS variable name of the color
+ * @param {string} color The color code in Hex
+ * @param {number} opacityValue The opacity value - [0,100]
+ * @returns Parsed string to be used in Tailwind CSS config
+ */
+const getColorWithOpacity = (varName, color, opacityValue) => {
+  if (opacityValue !== undefined) {
+    return `rgba(var(${varName}, ${hexToRGB(color)}) / ${opacityValue})`;
+  }
+  return `rgb(var(${varName}, ${hexToRGB(color)}))`;
+};
+
+module.exports = ({ colors }) => ({
+  inherit: colors.inherit,
+  current: colors.current,
+  transparent: colors.transparent,
+  brand: {
+    DEFAULT: ({ opacityValue }) =>
+      getColorWithOpacity('--rtk-colors-brand-500', defaultColors.brand[500], opacityValue),
+    300: ({ opacityValue }) =>
+      getColorWithOpacity('--rtk-colors-brand-300', defaultColors.brand[300], opacityValue),
+    400: ({ opacityValue }) =>
+      getColorWithOpacity('--rtk-colors-brand-400', defaultColors.brand[400], opacityValue),
+    500: ({ opacityValue }) =>
+      getColorWithOpacity('--rtk-colors-brand-500', defaultColors.brand[500], opacityValue),
+    600: ({ opacityValue }) =>
+      getColorWithOpacity('--rtk-colors-brand-600', defaultColors.brand[600], opacityValue),
+    700: ({ opacityValue }) =>
+      getColorWithOpacity('--rtk-colors-brand-700', defaultColors.brand[700], opacityValue),
+  },
+  background: {
+    DEFAULT: ({ opacityValue }) =>
+      getColorWithOpacity(
+        '--rtk-colors-background-1000',
+        defaultColors.background[1000],
+        opacityValue
+      ),
+    1000: ({ opacityValue }) =>
+      getColorWithOpacity(
+        '--rtk-colors-background-1000',
+        defaultColors.background[1000],
+        opacityValue
+      ),
+    900: ({ opacityValue }) =>
+      getColorWithOpacity(
+        '--rtk-colors-background-900',
+        defaultColors.background[900],
+        opacityValue
+      ),
+    800: ({ opacityValue }) =>
+      getColorWithOpacity(
+        '--rtk-colors-background-800',
+        defaultColors.background[800],
+        opacityValue
+      ),
+    700: ({ opacityValue }) =>
+      getColorWithOpacity(
+        '--rtk-colors-background-700',
+        defaultColors.background[700],
+        opacityValue
+      ),
+    600: ({ opacityValue }) =>
+      getColorWithOpacity(
+        '--rtk-colors-background-600',
+        defaultColors.background[600],
+        opacityValue
+      ),
+  },
+  text: {
+    DEFAULT: 'rgb(var(--rtk-colors-text-1000, 255 255 255))',
+    1000: 'rgb(var(--rtk-colors-text-1000, 255 255 255))',
+    900: 'rgb(var(--rtk-colors-text-900, 255 255 255 / 0.88))',
+    800: 'rgb(var(--rtk-colors-text-800, 255 255 255 / 0.76))',
+    700: 'rgb(var(--rtk-colors-text-700, 255 255 255 / 0.64))',
+    600: 'rgb(var(--rtk-colors-text-600, 255 255 255 / 0.52))',
+  },
+  'text-on-brand': {
+    DEFAULT:
+      'rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)))',
+    1000: 'rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)))',
+    900: 'rgb(var(--rtk-colors-text-on-brand-900, var(--rtk-colors-text-900, 255 255 255 / 0.88)))',
+    800: 'rgb(var(--rtk-colors-text-on-brand-800, var(--rtk-colors-text-800, 255 255 255 / 0.76)))',
+    700: 'rgb(var(--rtk-colors-text-on-brand-700, var(--rtk-colors-text-700, 255 255 255 / 0.64)))',
+    600: 'rgb(var(--rtk-colors-text-on-brand-600, var(--rtk-colors-text-600, 255 255 255 / 0.52)))',
+  },
+  'video-bg': ({ opacityValue }) =>
+    getColorWithOpacity('--rtk-colors-video-bg', defaultColors['video-bg'], opacityValue),
+  danger: ({ opacityValue }) =>
+    getColorWithOpacity('--rtk-colors-danger', defaultColors.danger, opacityValue),
+  success: ({ opacityValue }) =>
+    getColorWithOpacity('--rtk-colors-success', defaultColors.success, opacityValue),
+  warning: ({ opacityValue }) =>
+    getColorWithOpacity('--rtk-colors-warning', defaultColors.warning, opacityValue),
+});

package/dist/collection/theme/index.js

@@ -0,0 +1,65 @@
+/**
+ * Reference
+ * https://github.dev/tailwindlabs/tailwindcss/blob/master/defaultTheme.js
+ */
+
+const colors = require('./colors');
+const breakpoints = require('./breakpoints.json');
+const { getSpacingConfig } = require('./space');
+
+const spacing = getSpacingConfig();
+
+module.exports = {
+  spacing,
+  colors,
+  fontFamily: {
+    sans: ['var(--rtk-font-family, sans-serif)'],
+  },
+  screens: Object.fromEntries(
+    Object.entries(breakpoints).map(([screen, width]) => [screen, `${width}px`])
+  ),
+  fontSize: {
+    'heading-lg': ['28px'],
+    'heading-md': ['24px'],
+    'heading-sm': ['20px'],
+    'button-lg': ['16px'],
+    'button-md': ['14px'],
+    'button-sm': ['12px'],
+    'text-lg': ['16px'],
+    'text-md': ['14px'],
+    'text-sm': ['12px'],
+    'text-xs': ['10px'],
+  },
+  borderWidth: {
+    none: 'var(--rtk-border-width-none, 0)',
+    sm: 'var(--rtk-border-width-sm, 1px)',
+    md: 'var(--rtk-border-width-md, 2px)',
+    lg: 'var(--rtk-border-width-lg, 4px)',
+  },
+  borderRadius: {
+    none: 'var(--rtk-border-radius-none, 0)',
+    sm: 'var(--rtk-border-radius-sm, 4px)',
+    md: 'var(--rtk-border-radius-md, 8px)',
+    lg: 'var(--rtk-border-radius-lg, 12px)',
+    xl: 'var(--rtk-border-radius-xl, 40px)',
+    full: '9999px',
+  },
+  maxWidth: (theme, { breakpoints }) => ({
+    ...spacing,
+    full: '100%',
+    min: 'min-content',
+    max: 'max-content',
+    fit: 'fit-content',
+    prose: '65ch',
+    ...breakpoints(theme('screens')),
+  }),
+  minWidth: (theme, { breakpoints }) => ({
+    ...spacing,
+    full: '100%',
+    min: 'min-content',
+    max: 'max-content',
+    fit: 'fit-content',
+    prose: '65ch',
+    ...breakpoints(theme('screens')),
+  }),
+};

package/dist/collection/theme/presets/border.js

@@ -0,0 +1,46 @@
+export const BORDER_WIDTHS = {
+    none: {
+        none: 0,
+        sm: 0,
+        md: 0,
+        lg: 0,
+    },
+    thin: {
+        none: 0,
+        sm: 1,
+        md: 2,
+        lg: 4,
+    },
+    fat: {
+        none: 0,
+        sm: 2,
+        md: 4,
+        lg: 8,
+    },
+};
+export const BORDER_RADII = {
+    sharp: {
+        none: 0,
+        sm: 0,
+        md: 0,
+        lg: 0,
+    },
+    rounded: {
+        none: 0,
+        sm: 4,
+        md: 8,
+        lg: 12,
+    },
+    'extra-rounded': {
+        none: 0,
+        sm: 8,
+        md: 16,
+        lg: 24,
+    },
+    circular: {
+        none: 9999,
+        sm: 9999,
+        md: 9999,
+        lg: 9999,
+    },
+};

package/dist/collection/theme/presets/themes.js

@@ -0,0 +1,35 @@
+export const THEMES = {
+    darkest: {
+        background: {
+            1000: '#080808',
+            900: '#1A1A1A',
+            800: '#1E1E1E',
+            700: '#2C2C2C',
+            600: '#393939',
+        },
+        text: '#FFFFFF',
+    },
+    dark: {
+        background: {
+            1000: '#252525',
+            900: '#2F2F2F',
+            800: '#323232',
+            700: '#3E3E3E',
+            600: '#4A4A4A',
+        },
+        text: '#F5F5F5',
+        'video-bg': '#1C1C1C',
+    },
+    light: {
+        background: {
+            1000: '#FFFFFF',
+            900: '#F5F5F5',
+            800: '#EBEBEB',
+            700: '#E0E0E0',
+            600: '#D6D6D6',
+        },
+        text: '#111111',
+        'text-on-brand': '#ffffff',
+        'video-bg': '#DADADA',
+    },
+};

package/dist/collection/theme/space.js

@@ -0,0 +1,17 @@
+const spacingScale = require('./spacing-scale.json');
+
+/**
+ * Get spacing config for tailwindcss from a base
+ * @param {number} [base=4] Base for spacing, default is 4
+ */
+const getSpacingConfig = (base = 4) => {
+  const spacing = {};
+  spacingScale.forEach((multiplier) => {
+    spacing[multiplier] = `var(--rtk-space-${multiplier.toString().replace('.', '\\.')}, ${
+      multiplier * base
+    }px)`;
+  });
+  return spacing;
+};
+
+module.exports = { spacingScale, getSpacingConfig };

package/dist/collection/theme/tests/space.spec.js

@@ -0,0 +1,17 @@
+const { getSpacingConfig } = require('../space.js');
+
+describe('spacing config for tailwindcss', () => {
+  it('normal scale values are generated with default base: 4', () => {
+    const spacing = getSpacingConfig();
+    expect(spacing[0]).toBe('var(--rtk-space-0, 0px)');
+    expect(spacing[10]).toBe('var(--rtk-space-10, 40px)');
+    expect(spacing[0.5]).toBe('var(--rtk-space-0\\.5, 2px)');
+  });
+
+  it('normal scale values are generated with a custom base: 3', () => {
+    const spacing = getSpacingConfig(3);
+    expect(spacing[0]).toBe('var(--rtk-space-0, 0px)');
+    expect(spacing[10]).toBe('var(--rtk-space-10, 30px)');
+    expect(spacing[0.5]).toBe('var(--rtk-space-0\\.5, 1.5px)');
+  });
+});

package/dist/collection/types/floating-ui.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/types/props.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/types/rtk-ai.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/types/rtk-client.js

@@ -0,0 +1,10 @@
+// eslint-disable-next-line @stencil-community/ban-exported-const-enums
+export var RemoteUpdateType;
+(function (RemoteUpdateType) {
+    RemoteUpdateType["REQUEST_RECEIVED"] = "REQUEST_RECEIVED";
+    RemoteUpdateType["REQUEST_SENT"] = "REQUEST_SENT";
+    RemoteUpdateType["INCOMING_REQUEST_ACCEPTED"] = "INCOMING_REQUEST_ACCEPTED";
+    RemoteUpdateType["OUTGOING_REQUEST_ACCEPTED"] = "OUTGOING_REQUEST_ACCEPTED";
+    RemoteUpdateType["INCOMING_REQUEST_ENDED"] = "INCOMING_REQUEST_ENDED";
+    RemoteUpdateType["OUTGOING_REQUEST_ENDED"] = "OUTGOING_REQUEST_ENDED";
+})(RemoteUpdateType || (RemoteUpdateType = {}));

package/dist/collection/types/ui-config/config.js

@@ -0,0 +1,35 @@
+export const DEFAULT_NOTIFICATION_DURATION = 2000;
+export const DEFAULT_NOTIFICATION_CONFIG = Object.freeze({
+    notifications: {
+        participant_joined: true,
+        participant_left: true,
+        participant_joined_waitlist: true,
+        chat: true,
+        polls: true,
+        webinar: true,
+        tab_sync: true,
+        recording_started: true,
+        recording_stopped: true,
+    },
+    notification_sounds: {
+        participant_joined: true,
+        participant_left: true,
+        chat: true,
+        polls: true,
+        webinar: true,
+        participant_joined_waitlist: true,
+    },
+    notification_duration: {
+        participant_joined: 2100,
+        participant_left: 2100,
+        participant_joined_waitlist: 4000,
+        chat: DEFAULT_NOTIFICATION_DURATION,
+        polls: DEFAULT_NOTIFICATION_DURATION,
+        webinar: DEFAULT_NOTIFICATION_DURATION,
+        tab_sync: DEFAULT_NOTIFICATION_DURATION,
+        recording_started: DEFAULT_NOTIFICATION_DURATION,
+        recording_stopped: DEFAULT_NOTIFICATION_DURATION,
+    },
+    participant_joined_sound_notification_limit: 10,
+    participant_chat_message_sound_notification_limit: 10,
+});

package/dist/collection/types/ui-config/design-tokens.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/types/ui-config/index.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/types/ui-config/root.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/utils/assets.js

@@ -0,0 +1,13 @@
+const EMOJI_ASSET_URL = 'https://cdn.dyte.in/assets/emojis-data.json';
+let cachedEmojis;
+/**
+ * fetches the latest emoji list from CDN
+ * @returns list of emojis
+ */
+export const fetchEmojis = async () => {
+    if (!cachedEmojis) {
+        const emojis = await fetch(EMOJI_ASSET_URL);
+        cachedEmojis = emojis.json();
+    }
+    return cachedEmojis;
+};