siam-ui-utils 2.2.25 → 2.2.27

package/src/view-layout/editor-layer.jsx

@@ -1,27 +0,0 @@
-import './styles.scss';
-
-const EditorLayer = ({ gridCols, gridRows }) => {
-  return (
-    <div
-      className="editor-layer"
-      style={{
-        gridTemplateColumns: `repeat(${gridCols}, 1fr)`,
-        gridTemplateRows: `repeat(${gridRows}, 1fr)`,
-      }}
-    >
-      {Array.from({ length: gridRows * gridCols }).map((_, idx) => {
-        const x = idx % gridCols;
-        const y = Math.floor(idx / gridCols);
-        return (
-          <div key={`cell-${x}-${y}`} className="editor-layer-cell">
-            <div className="editor-layer-cell-coord">
-              x:{x};y:{y}
-            </div>
-          </div>
-        );
-      })}
-    </div>
-  );
-};
-
-export default EditorLayer;

package/src/view-layout/index.tsx

@@ -1,62 +0,0 @@
-import React, { FC, useState } from 'react';
-import SlotWrapper from './slot-wrapper';
-import { ItemSlot } from './item-slot';
-import EditorLayer from './editor-layer.jsx';
-import { GRID_SIZES, LOCALHOST } from './constants';
-import ButtonEditor from './button-editor.jsx';
-import './styles.scss';
-
-interface LayoutProps {
-  slots: ItemSlot[];
-  alto?: number;
-  ancho?: number;
-  size?: 'sm' | 'md' | 'lg';
-  [key: string]: any;
-}
-
-const ViewLayout: FC<LayoutProps> = ({
-  slots = [],
-  size = 'md',
-  alto = 80,
-  ancho = 90,
-  server = window?.location?.hostname,
-  ...props
-}) => {
-  
-  const isLocalhost=LOCALHOST.includes(server);
-
-  const [isEditorActivo, setEditorActivo] = useState(false);
-  const gridCols = GRID_SIZES[size].cols;
-  const gridRows = GRID_SIZES[size].rows;
-  return (
-    <div className="visualizador-container">
-      {isLocalhost && (
-        <ButtonEditor
-          activo={isEditorActivo}
-          onClick={() => setEditorActivo((prev) => !prev)}
-        />
-      )}
-
-      <div
-        className="visualizador-grid-css"
-        style={{
-          maxWidth: `${ancho}vw`,
-          height: `${alto}vh`,
-          gridTemplateColumns: `repeat(${gridCols}, 1fr)`,
-          gridTemplateRows: `repeat(${gridRows}, 1fr)`,
-        }}
-        {...props}
-      >
-        {isEditorActivo && (
-          <EditorLayer gridCols={gridCols} gridRows={gridRows} />
-        )}
-        {slots.map((slot) => {
-          const { x, y, w, h, legend } = slot;
-          return <SlotWrapper {...slot} legend={legend} key={slot.slot} />;
-        })}
-      </div>
-    </div>
-  );
-};
-
-export { ViewLayout };

package/src/view-layout/item-slot.tsx

@@ -1,20 +0,0 @@
-export interface ItemSlot {
-  slot: number;
-  component: React.ReactElement;
-  x: number;
-  y: number;
-  w?: number;
-  h?: number;
-  align?: 'start' | 'center' | 'end' | 'stretch';
-  contentSize?: 'small' | 'medium' | 'large';
-  direction?: 'row' | 'column';
-  justify?:
-    | 'start'
-    | 'center'
-    | 'end'
-    | 'space-between'
-    | 'space-around'
-    | 'space-evenly';
-  legend?: string;
-  showBorder?: boolean;
-}

package/src/view-layout/slot-wrapper.tsx

@@ -1,44 +0,0 @@
-import React, { FC } from 'react';
-import { ItemSlot } from './item-slot';
-
-const SlotWrapper: FC<ItemSlot> = ({
-  slot = 1,
-  component = null,
-  x = 0,
-  y = 0,
-  w = 2,
-  h = 2,
-  align = 'stretch',
-  contentSize = 'medium',
-  direction = 'column',
-  justify = 'flex-start',
-  legend,
-  showBorder = false,
-}) => {
-  return (
-    <fieldset
-      key={slot}
-      className={
-        `visualizador-slot ` +
-        `visualizador-slot-content--${contentSize} ` +
-        `visualizador-slot--${direction} ` +
-        `visualizador-slot-align--${align} ` +
-        `visualizador-slot-justify--${justify} ` +
-        (!showBorder ? 'visualizador-slot--no-border' : '')
-      }
-      style={{
-        position: 'relative',
-        gridColumn: `${x + 1} / span ${w}`,
-        gridRow: `${y + 1} / span ${h}`,
-        display: 'flex',
-        overflow: 'hidden',
-        border: showBorder ? undefined : 'none',
-      }}
-    >
-      <legend className="slot-legend">{legend}</legend>
-      <div className="slot-content">{component}</div>
-    </fieldset>
-  );
-};
-
-export default SlotWrapper;

package/src/view-layout/styles.scss

@@ -1,143 +0,0 @@
-// Container
-.visualizador-container {
-  position: relative;
-}
-
-// Grid
-.visualizador-grid,
-.visualizador-grid-css {
-  width: 100%;
-  height: 100%;
-  min-width: 90vh;
-  min-height: 80vh;
-  background: #ffffff;
-  border-radius: 12px;
-  display: grid;
-  border: solid 2px #900604;
-  position: relative;
-  gap: 1px;
-  box-sizing: content-box;
-}
-
-// Slot
-.visualizador-slot {
-  display: flex;
-  border: 1px solid #900604;
-  border-radius: 7px;
-  background: #fff;
-
-  // Direction
-  &--row,
-  &-row {
-    flex-direction: row;
-  }
-  &--column,
-  &-column,
-  &-column-col {
-    flex-direction: column;
-  }
-
-  // Content size
-  &-content--small {
-    font-size: 0.85rem;
-  }
-  &-content--medium {
-    font-size: 1rem;
-  }
-  &-content--large {
-    font-size: 1.5rem;
-  }
-
-  // Alignment
-  &-align--start {
-    align-items: flex-start;
-  }
-  &-align--center {
-    align-items: center;
-  }
-  &-align--end {
-    align-items: flex-end;
-  }
-  &-align--stretch {
-    align-items: stretch;
-  }
-
-  // Justification
-  &-justify--start {
-    justify-content: flex-start;
-  }
-  &-justify--center {
-    justify-content: center;
-  }
-  &-justify--end {
-    justify-content: flex-end;
-  }
-  &-justify--space-between {
-    justify-content: space-between;
-  }
-  &-justify--space-around {
-    justify-content: space-around;
-  }
-  &-justify--space-evenly {
-    justify-content: space-evenly;
-  }
-  &--no-border {
-    border: none !important;
-  }
-}
-
-// Legend
-.slot-legend {
-  width: auto;
-  font-size: 0.75rem;
-  margin-bottom: 0px !important;
-  margin-left: -20px !important;
-  font-weight: 700;
-  color: #900604;
-  white-space: nowrap;
-}
-
-// Editor Layer
-.editor-layer {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
-  z-index: 20;
-  display: grid;
-}
-.editor-layer-cell-coord {
-  font-size: 0.75rem;
-  justify-self: center;
-}
-.editor-layer-cell {
-  font-size: 0.7em;
-  color: #797979;
-  align-content: center;
-  padding: 2px;
-  text-align: left;
-  pointer-events: none;
-  box-sizing: border-box;
-  border: 1px dashed #bbb;
-}
-
-// Editor Button
-.visualizador-editor-btn {
-  position: absolute;
-  top: 8px;
-  right: 8px;
-  z-index: 100;
-  padding: 6px 12px;
-  font-size: 1em;
-  color: #fff;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-
-  &--activo {
-    background: #900604;
-  }
-  &--inactivo {
-    background: #bbb;
-  }
-}

package/src/where-by-room/constants.js

@@ -1,2 +0,0 @@
-export const ALERT_TIMEOUT = 5; //5 MINUTOS (alerta de tiempo restante)
-export const SESSION_TIMEOUT = 30; //30 MINUTOS

package/src/where-by-room/index.jsx

@@ -1,17 +0,0 @@
-import { WherebyProvider } from '@whereby.com/browser-sdk/react';
-import '@whereby.com/browser-sdk/embed';
-import Room from './room';
-
-export const WhereByRoom = ({ src, onEvent, onActions, iframeClass }) => {
-  return (
-    <WherebyProvider>
-      <Room
-        src={src}
-        onEvent={onEvent}
-        onActions={onActions}
-        iframeClass={iframeClass}
-      />
-    </WherebyProvider>
-  );
-};
-export default WhereByRoom;

package/src/where-by-room/room.jsx

@@ -1,79 +0,0 @@
-import { useEffect, useRef } from 'react';
-import '@whereby.com/browser-sdk/embed';
-
-export const Room = ({ src, onEvent, onActions, iframeClass }) => {
-  const wherebyRef = useRef(null);
-
-  useEffect(() => {
-    const elm = wherebyRef.current;
-    if (!elm) return;
-
-    if (onActions) {
-      onActions({
-        endMeeting: () => elm.endMeeting(),
-        knock: () => elm.knock(),
-        cancelKnock: () => elm.cancelKnock(),
-        leaveRoom: () => elm.leaveRoom(),
-        startRecording: () => elm.startRecording(),
-        stopRecording: () => elm.stopRecording(),
-        startStreaming: () => elm.startStreaming(),
-        stopStreaming: () => elm.stopStreaming(),
-        startLiveTranscription: () => elm.startLiveTranscription(),
-        stopLiveTranscription: () => elm.stopLiveTranscription(),
-        toggleCamera: (enabled) => elm.toggleCamera(enabled),
-        toggleMicrophone: (enabled) => elm.toggleMicrophone(enabled),
-        toggleScreenshare: (enabled) => elm.toggleScreenshare(enabled),
-        toggleChat: (enabled) => elm.toggleChat(enabled),
-      });
-    }
-
-    const events = [
-      'ready',
-      'grant_device_permission',
-      'deny_device_permission',
-      'precall_check_completed',
-      'precall_check_skipped',
-      'knock',
-      'cancel_knock',
-      'join',
-      'leave',
-      'meeting_end',
-      'participantupdate',
-      'participant_join',
-      'participant_leave',
-      'microphone_toggle',
-      'camera_toggle',
-      'screenshare_toggle',
-      'chat_toggle',
-      'people_toggle',
-      'pip_toggle',
-      'streaming_status_change',
-      'recording_status_change',
-      'transcription_status_change',
-      'connection_status_change',
-    ];
-    function handleEvent(e) {
-      if (onEvent) onEvent(e.type, e.detail);
-    }
-    events.forEach((ev) => elm.addEventListener(ev, handleEvent));
-    return () => {
-      events.forEach((ev) => elm.removeEventListener(ev, handleEvent));
-    };
-  }, [onEvent, onActions]);
-
-  return (
-    <div className={iframeClass}>
-      <whereby-embed
-        ref={wherebyRef}
-        class={iframeClass}
-        room={src}
-        chat="on"
-        screenshare="on"
-        audio="on"
-        video="on"
-        allow="camera; microphone; fullscreen"
-      />
-    </div>
-  );
-};
-export default Room;

package/tsconfig.json

@@ -1,19 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "es6",
-    "lib": ["dom", "dom.iterable", "esnext"],
-    "allowJs": true,
-    "esModuleInterop": true,
-    "skipLibCheck": true,
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "module": "commonjs",
-    "moduleResolution": "node",
-    "noImplicitReturns": true,
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "preserve"
-  },
-  "include": ["src", "index.d.ts"]
-}

package/vite.config.ts

@@ -1,22 +0,0 @@
-import react from '@vitejs/plugin-react';
-import { defineConfig } from 'vitest/config';
-import commonjs from 'vite-plugin-commonjs';
-
-export default defineConfig({
-  define: {
-    'process.env': {},
-  },
-  plugins: [react(), commonjs()],
-  server: {
-    port: 5173,
-    open: true,
-    hmr: true,
-  },
-  css: {
-    preprocessorOptions: {
-      scss: {
-        silenceDeprecations: ['legacy-js-api'],
-      },
-    },
-  },
-});