@telia-ace/widget-components-grid 0.0.1

package/grid-57a99fbe.mjs

@@ -0,0 +1,79 @@
+import { jsx as i } from "react/jsx-runtime";
+import { useChildren as c, useProperties as d } from "@telia-ace/widget-ui";
+import { css as o } from "@emotion/react";
+import p from "@emotion/styled";
+import { Component as g } from "@telia-ace/widget-types-grid";
+import { appendClassNames as l } from "@telia-ace/widget-utilities";
+import { useMemo as f } from "react";
+import { i as u } from "./index-bcd30e20.mjs";
+import "@telia-ace/widget-core";
+const x = (e) => {
+  const r = e.map((t) => "min-content").join(" "), n = e[0].split(" ").map((t) => "1fr").join(" "), a = e.map((t) => `'${t}'`).join(" ");
+  return o`
+    grid-template-columns: ${n};
+    grid-template-rows: ${r};
+    grid-template-areas: ${a};
+  `;
+}, $ = (e) => {
+  const r = c(), n = f(() => Object.entries(e.areas).map(([a, t]) => {
+    const s = r.find((m) => m.name === a);
+    return u(t) ? {
+      name: a,
+      componentDef: s,
+      context: t.context,
+      areaSettings: t.areaSettings,
+      template: t.template,
+      areas: t.areas,
+      gap: t.gap
+    } : {
+      name: a,
+      componentDef: s,
+      areaSettings: t.areaSettings,
+      child: t.child,
+      context: t.context
+    };
+  }), [e, r]);
+  return /* @__PURE__ */ i(
+    h,
+    {
+      "data-grid-area": e.gridArea,
+      gridArea: e.gridArea,
+      gap: e.gap,
+      template: e.template,
+      className: l(e.className, "humany-grid"),
+      children: n.map((a) => a.componentDef ? /* @__PURE__ */ i(
+        g,
+        {
+          id: a.componentDef.id,
+          branch: "default",
+          context: {}
+        },
+        a.componentDef.id
+      ) : null)
+    }
+  );
+}, h = p.div`
+  display: grid;
+  ${(e) => e.gridArea && o`
+      grid-area: ${e.gridArea};
+    `}
+  ${(e) => x(e.template)}
+  ${(e) => e.gap && o`
+      grid-gap: ${e.gap}rem;
+    `}
+`, _ = ({ className: e }) => {
+  const r = d();
+  return /* @__PURE__ */ i(
+    $,
+    {
+      template: r.template,
+      areas: r.areas,
+      gap: r.gap,
+      areaSettings: r.areaSettings,
+      context: r.context
+    }
+  );
+};
+export {
+  _ as default
+};

package/grid-62ef982a.js

@@ -0,0 +1,14 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),o=require("@telia-ace/widget-ui"),s=require("@emotion/react"),g=require("@emotion/styled"),m=require("@telia-ace/widget-types-grid"),l=require("@telia-ace/widget-utilities"),u=require("react"),p=require("./index-8baaae11.js");require("@telia-ace/widget-core");const x=e=>{const r=e.map(t=>"min-content").join(" "),a=e[0].split(" ").map(t=>"1fr").join(" "),n=e.map(t=>`'${t}'`).join(" ");return s.css`
+    grid-template-columns: ${a};
+    grid-template-rows: ${r};
+    grid-template-areas: ${n};
+  `},f=e=>{const r=o.useChildren(),a=u.useMemo(()=>Object.entries(e.areas).map(([n,t])=>{const c=r.find(d=>d.name===n);return p.isNestedGrid(t)?{name:n,componentDef:c,context:t.context,areaSettings:t.areaSettings,template:t.template,areas:t.areas,gap:t.gap}:{name:n,componentDef:c,areaSettings:t.areaSettings,child:t.child,context:t.context}}),[e,r]);return i.jsx($,{"data-grid-area":e.gridArea,gridArea:e.gridArea,gap:e.gap,template:e.template,className:l.appendClassNames(e.className,"humany-grid"),children:a.map(n=>n.componentDef?i.jsx(m.Component,{id:n.componentDef.id,branch:"default",context:{}},n.componentDef.id):null)})},$=g.div`
+  display: grid;
+  ${e=>e.gridArea&&s.css`
+      grid-area: ${e.gridArea};
+    `}
+  ${e=>x(e.template)}
+  ${e=>e.gap&&s.css`
+      grid-gap: ${e.gap}rem;
+    `}
+`,j=({className:e})=>{const r=o.useProperties();return i.jsx(f,{template:r.template,areas:r.areas,gap:r.gap,areaSettings:r.areaSettings,context:r.context})};exports.default=j;

package/grid-component.d.ts

@@ -0,0 +1,42 @@
+import { Container } from '@webprovisions/platform';
+
+type AreaWithChild = {
+    child: string;
+    areaSettings: {
+        [key: string]: string;
+    };
+    context: {
+        [key: string]: any;
+    };
+};
+export type NestedArea = {
+    context: {
+        [key: string]: any;
+    };
+    template: string[];
+    areaSettings: {
+        [key: string]: string;
+    };
+    gap: number;
+    areas: {
+        [key: string]: GridAreaProps;
+    };
+};
+export type GridAreaProps = NestedArea | AreaWithChild;
+export declare const isNestedGrid: (area: GridAreaProps) => area is NestedArea;
+export type GridComponentProps = {
+    gap: number;
+    template: string[];
+    areaSettings: {
+        [key: string]: string;
+    };
+    areas: {
+        [key: string]: GridAreaProps;
+    };
+    child: string;
+    context: {
+        [key: string]: any;
+    };
+};
+export declare const GridComponent: (container: Container) => Promise<void>;
+export default GridComponent;

package/grid.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+
+type Props = {
+    className?: string;
+};
+declare const Grid: React.FC<Props>;
+export default Grid;

package/handler.d.ts

@@ -0,0 +1,3 @@
+import { ComponentHandlerOptions, NormalizedComponentReference } from '../../../core/src/index.ts';
+
+export declare const gridComponentHandler: (childRef: NormalizedComponentReference, options: ComponentHandlerOptions) => void;

package/index-8baaae11.js

@@ -0,0 +1 @@
+"use strict";const N=require("@telia-ace/widget-ui"),C=require("@telia-ace/widget-core"),q=require("@telia-ace/widget-utilities"),G=o=>!!o.template,O=o=>N.createReactComponent(o,"grid",Promise.resolve().then(()=>require("./grid-62ef982a.js")),d=>{}),P=(o,d)=>{var g,m,l,u;const{platform:s,node:h,references:j,definitions:p,views:f,branch:w}=d,e=p[o.definitionId];if(process.env.NODE_ENV!=="production"&&!e){q.Logger.error(`No definition found for component type '${o.definitionId}'.`);return}const t=s.createNode(e.type);if(t.name=o.definitionId,t.tags=e.tags||[],e.properties&&t.writeProperties(e.properties),e.context&&t.writeContext(e.context),e.layout&&t.writeLayout(e.layout),h.appendChild(t,w),o.overrides.forEach(r=>{const n={breakpoints:r.breakpoints};r.properties&&t.writeProperties(r.properties,n),r.context&&t.writeContext(r.context,n),r.layout&&t.writeLayout(r.layout,n)}),(g=e.properties)!=null&&g.areas&&((m=e.properties)!=null&&m.areas)){const r=Object.entries(e.properties.areas).reduce((n,[c,i])=>{if(i.child){const a=Object.entries(i.areaSettings||{}).reduce((x,[y,b])=>(x[`css-${y}`]=b,x),{});n[c]={type:"area",context:i.context||{},children:[i.child],properties:{"css-grid-area":c,...a}}}else{const a={type:"grid",context:{},properties:{areaSettings:{},areas:i.areas,context:i.context,gap:i.gap,gridArea:i.gridArea,template:i.template}};n[c]=a}return n},p);C.createChildren(s,t,Object.keys(e.properties.areas),r,f)}else(l=e.properties)!=null&&l.child&&C.createChildren(s,t,[(u=e.properties)==null?void 0:u.child],p,f)};exports.GridComponent=O;exports.gridComponentHandler=P;exports.isNestedGrid=G;

package/index-bcd30e20.mjs

@@ -0,0 +1,77 @@
+import { createReactComponent as N } from "@telia-ace/widget-ui";
+import { createChildren as h } from "@telia-ace/widget-core";
+import { Logger as O } from "@telia-ace/widget-utilities";
+const I = (i) => !!i.template, L = (i) => N(
+  i,
+  "grid",
+  import("./grid-57a99fbe.mjs"),
+  (d) => {
+  }
+), P = (i, d) => {
+  var m, g, x, l;
+  const { platform: s, node: u, references: j, definitions: p, views: f, branch: b } = d, e = p[i.definitionId];
+  if (process.env.NODE_ENV !== "production" && !e) {
+    O.error(
+      `No definition found for component type '${i.definitionId}'.`
+    );
+    return;
+  }
+  const t = s.createNode(e.type);
+  if (t.name = i.definitionId, t.tags = e.tags || [], e.properties && t.writeProperties(e.properties), e.context && t.writeContext(e.context), e.layout && t.writeLayout(e.layout), u.appendChild(t, b), i.overrides.forEach((r) => {
+    const n = { breakpoints: r.breakpoints };
+    r.properties && t.writeProperties(r.properties, n), r.context && t.writeContext(r.context, n), r.layout && t.writeLayout(r.layout, n);
+  }), (m = e.properties) != null && m.areas && ((g = e.properties) != null && g.areas)) {
+    const r = Object.entries(
+      e.properties.areas
+    ).reduce((n, [a, o]) => {
+      if (o.child) {
+        const c = Object.entries(
+          o.areaSettings || {}
+        ).reduce((y, [w, C]) => (y[`css-${w}`] = C, y), {});
+        n[a] = {
+          type: "area",
+          context: o.context || {},
+          children: [o.child],
+          properties: {
+            "css-grid-area": a,
+            ...c
+          }
+        };
+      } else {
+        const c = {
+          type: "grid",
+          context: {},
+          properties: {
+            areaSettings: {},
+            areas: o.areas,
+            context: o.context,
+            gap: o.gap,
+            gridArea: o.gridArea,
+            template: o.template
+          }
+        };
+        n[a] = c;
+      }
+      return n;
+    }, p);
+    h(
+      s,
+      t,
+      Object.keys(e.properties.areas),
+      r,
+      f
+    );
+  } else
+    (x = e.properties) != null && x.child && h(
+      s,
+      t,
+      [(l = e.properties) == null ? void 0 : l.child],
+      p,
+      f
+    );
+};
+export {
+  L as G,
+  P as g,
+  I as i
+};

package/index.d.ts

@@ -0,0 +1,4 @@
+import { default as GridComponent } from './grid-component';
+
+export { gridComponentHandler } from './handler';
+export default GridComponent;

package/index.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./index-8baaae11.js");require("@telia-ace/widget-ui");require("@telia-ace/widget-core");require("@telia-ace/widget-utilities");exports.default=e.GridComponent;exports.gridComponentHandler=e.gridComponentHandler;

package/index.mjs

@@ -0,0 +1,8 @@
+import { G as a, g as e } from "./index-bcd30e20.mjs";
+import "@telia-ace/widget-ui";
+import "@telia-ace/widget-core";
+import "@telia-ace/widget-utilities";
+export {
+  a as default,
+  e as gridComponentHandler
+};

package/nested-grid-area.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+import { NestedArea } from './grid-component';
+
+type Props = {
+    className?: string;
+    gridArea?: string;
+} & NestedArea;
+declare const NestedGridArea: React.FC<Props>;
+export default NestedGridArea;

package/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "@telia-ace/widget-components-grid",
+  "version": "0.0.1",
+  "main": "./index.js",
+  "types": "./index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./index.mjs",
+      "require": "./index.js"
+    }
+  },
+  "dependencies": {
+    "@telia-ace/widget-core": "*",
+    "@telia-ace/widget-types-grid": "*",
+    "@telia-ace/widget-ui": "*",
+    "@telia-ace/widget-utilities": "*",
+    "@webprovisions/platform": "^1.1.4"
+  },
+  "peerDependencies": {
+    "@emotion/react": "11.11.1",
+    "@emotion/styled": "11.11.0",
+    "react": "18.2.0"
+  }
+}

package/utils.d.ts

@@ -0,0 +1 @@
+export declare const generateGridTemplateAreasValue: (template: string[]) => import('@emotion/react').SerializedStyles;