siam-ui-utils 2.2.10 → 2.2.12

package/eslint.config.mjs

@@ -17,6 +17,10 @@ export default defineConfig([
         ecmaFeatures: { jsx: true },
       },
     },
+    parser: '@typescript-eslint/parser',
+    parserOptions: {
+      ecmaVersion: 'latest',
+    },
     plugins: {
       react: pluginReact,
       'react-hooks': pluginReactHooks,

package/index.d.ts

@@ -1,3 +1,5 @@
+import { ItemSlot } from './src/view-layout/item-slot';
+
 declare module 'siam-ui-utils' {
   //BRIDGES
   export function withRouter(props);
@@ -85,4 +87,7 @@ declare module 'siam-ui-utils' {
 
   //COPY LINK
   export function CopyLink(props);
+
+  //VIEW LAYOUT
+  export function ViewLayout(props);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "siam-ui-utils",
-  "version": "2.2.10",
+  "version": "2.2.12",
   "keywords": [
     "ampf-react",
     "ampf-utils",
@@ -50,14 +50,16 @@
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@types/react-router-dom": "^5.3.3",
+    "@typescript-eslint/parser": "^8.42.0",
     "@vitejs/plugin-react": "^4.3.1",
     "copyfiles": "^2.4.1",
-    "eslint": "^9.31.0",
+    "eslint": "^9.35.0",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.20",
     "globals": "^16.3.0",
     "sass-embedded": "^1.79.4",
+    "typescript": "^5.5.3",
     "typescript-eslint": "^8.38.0",
     "vite": "^7.0.1",
     "vitest": "^3.2.4"

package/src/App.jsx

@@ -11,8 +11,26 @@ import './index.css';
 import './App.css';
 import './assets/css/vendor/bootstrap.min.css';
 import { WhereByRoom } from './where-by-room';
+import ViewLayout from './view-layout';
 import CopyLink from './copy-link';
 
+const slots = [
+  {
+    slot: 1,
+    x: 3,
+    y: 3,
+    w: 2,
+    h: 2,
+    legend: 'Prueba',
+    direction: 'column',
+    contentSize: 'medium',
+    align: 'stretch',
+    justify: 'flex-start',
+    component: null,
+    showBorder: true,
+  },
+];
+
 const App = () => {
   const [open, setOpen] = useState('0');
   const toggle = (id) => {
@@ -112,11 +130,17 @@ const App = () => {
           </AccordionBody>
         </AccordionItem>
         <AccordionItem>
-          <AccordionHeader targetId="2">Copy-Link</AccordionHeader>
-          <AccordionBody accordionId="2">
+          <AccordionHeader targetId="6">Copy-Link</AccordionHeader>
+          <AccordionBody accordionId="6">
             <CopyLink link="https://linkdepruebaparaelcopylink.com" />
           </AccordionBody>
         </AccordionItem>
+        <AccordionItem>
+          <AccordionHeader targetId="7">Reusable ViewLayout</AccordionHeader>
+          <AccordionBody accordionId="7">
+            <ViewLayout slots={slots} />
+          </AccordionBody>
+        </AccordionItem>
       </Accordion>
     </div>
   );

package/src/index.js

@@ -8,3 +8,4 @@ export * from './tomar-foto';
 export * as IntlMessages from './IntlMessages';
 export * from './where-by-room';
 export * from './copy-link';
+export * from './view-layout';

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

@@ -0,0 +1,18 @@
+import './styles.scss';
+
+const ButtonEditor = ({ activo, onClick }) => (
+  <button
+    className={`visualizador-editor-btn ${
+      activo
+        ? 'visualizador-editor-btn--activo'
+        : 'visualizador-editor-btn--inactivo'
+    }`}
+    onClick={onClick}
+  >
+    <span>
+      <i className="icon-eye" />
+    </span>
+  </button>
+);
+
+export default ButtonEditor;

package/src/view-layout/constants.js

@@ -0,0 +1,7 @@
+export const GRID_SIZES = {
+  sm: { cols: 18, rows: 18 },
+  md: { cols: 12, rows: 12 },
+  lg: { cols: 6, rows: 6 },
+};
+
+export const VERSION = import.meta?.env?.REACT_APP_VERSION || 'TLBD';

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

@@ -0,0 +1,27 @@
+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

@@ -0,0 +1,59 @@
+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, VERSION } 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,
+  ...props
+}) => {
+  const isVersionLetters = /^[A-Za-z]+$/.test(VERSION);
+  const [isEditorActivo, setEditorActivo] = useState(false);
+  const gridCols = GRID_SIZES[size].cols;
+  const gridRows = GRID_SIZES[size].rows;
+  return (
+    <div className="visualizador-container">
+      {isVersionLetters && (
+        <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 default ViewLayout;

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

@@ -0,0 +1,20 @@
+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

@@ -0,0 +1,44 @@
+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

@@ -0,0 +1,143 @@
+// 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/tsconfig.json

@@ -1,11 +1,7 @@
 {
   "compilerOptions": {
     "target": "es6",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
+    "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "esModuleInterop": true,
     "skipLibCheck": true,
@@ -17,10 +13,7 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "preserve",
+    "jsx": "preserve"
   },
-  "include": [
-    "src",
-    "index.d.ts"
-  ]
-}
+  "include": ["src", "index.d.ts"]
+}