@shelf/global-renderer 1.0.3-beta.0 → 1.0.4-beta.0

package/CHANGELOG.md

@@ -3,6 +3,21 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+### [0.31.1](https://github.com/shelfio/libs-frontend/compare/@shelf/global-renderer@0.31.0...@shelf/global-renderer@0.31.1) (2023-11-01)
+
+**Note:** Version bump only for package @shelf/global-renderer
+
+## [0.31.0](https://github.com/shelfio/libs-frontend/compare/@shelf/global-renderer@0.30.53...@shelf/global-renderer@0.31.0) (2023-11-01)
+
+### Features
+
+- REACT-547 run codemod + manual fixes ([99837b2](https://github.com/shelfio/libs-frontend/commit/99837b2c178ad694f1c7da48b5fb8555be05a5d2))
+
+### Bug Fixes
+
+- REACT-547 add colors to deps ([e92c132](https://github.com/shelfio/libs-frontend/commit/e92c132aa4bf97867be4f866a8b8cf38c76a04db))
+- REACT-547 remove client-helpers from deps if not used ([ca73471](https://github.com/shelfio/libs-frontend/commit/ca734719ec5c1b739ba8db5c651dbc2a038d9617))
+
 ### [0.30.53](https://github.com/shelfio/libs-frontend/compare/@shelf/global-renderer@0.30.52...@shelf/global-renderer@0.30.53) (2023-10-31)
 
 **Note:** Version bump only for package @shelf/global-renderer

package/lib/DecisionTreeContent/DecisionTreeContent.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { RenderDTContentData } from './types';
-declare const DecisionTreeContent: ({ title, description, tree, exportedBy, exportedAt, createdBy, fields, variables, }: RenderDTContentData) => JSX.Element;
+declare const DecisionTreeContent: ({ title, description, tree, exportedBy, exportedAt, createdBy, fields, variables, }: RenderDTContentData) => React.JSX.Element;
 export default DecisionTreeContent;

package/lib/DecisionTreeContent/DecisionTreeContent.js

@@ -1,84 +1,89 @@
-import { DecisionTree as a } from "@shelf/icons";
-import { colors as u } from "@shelf/client-helpers";
+import { $white as u } from "../packages/colors/lib/colors.js";
+import C from "../packages/icons/lib/Icons/DecisionTree.js";
 import { I18nextProvider as D } from "react-i18next";
-import { isEmpty as s } from "lodash";
-import { DTContentContainer as C, DTMeta as x, DTIcon as F, DTInternalMeta as S, DTTitle as y, DTDescription as I, CustomFields as M, CustomField as j, FieldName as k, FieldValue as E, DTContent as L } from "./DecisionTreeContent.styled.js";
+import s from "lodash";
+import { DTContentContainer as x, DTMeta as F, DTIcon as S, DTInternalMeta as y, DTTitle as I, DTDescription as M, CustomFields as j, CustomField as k, FieldName as v, FieldValue as E, DTContent as L } from "./DecisionTreeContent.styled.js";
 import R from "../i18next/index.js";
 import { convertStepToRenderFormat as $ } from "./helpers.js";
-import v from "./components/Question.js";
-import w from "./components/Condition.js";
-import z from "./components/Solution.js";
-import N from "./components/Link.js";
-import P from "./components/ContentTable.js";
-import Q from "./components/ExportedMeta.js";
-import { jsx as o, jsxs as e } from "react/jsx-runtime";
-const V = ({
+import w from "./components/Question.js";
+import z from "./components/Condition.js";
+import N from "./components/Solution.js";
+import P from "./components/Link.js";
+import Q from "./components/ContentTable.js";
+import V from "./components/ExportedMeta.js";
+import { jsx as o, jsxs as t } from "react/jsx-runtime";
+const _ = ({
   step: r,
-  variables: t
-}) => r.type === "Link" ? /* @__PURE__ */ o(N, {
+  variables: n
+}) => r.type === "Link" ? /* @__PURE__ */ o(P, {
   step: r
-}) : r.type === "Solution" ? /* @__PURE__ */ o(z, {
+}) : r.type === "Solution" ? /* @__PURE__ */ o(N, {
   step: r
-}) : r.type === "Condition" ? /* @__PURE__ */ o(w, {
+}) : r.type === "Condition" ? /* @__PURE__ */ o(z, {
   step: r,
-  variables: t
-}) : /* @__PURE__ */ o(v, {
+  variables: n
+}) : /* @__PURE__ */ o(w, {
   step: r,
-  variables: t
+  variables: n
 }), b = ({
   title: r,
-  description: t,
+  description: n,
   tree: d,
   exportedBy: l,
   exportedAt: p,
   createdBy: f,
   fields: m,
-  variables: T
+  variables: h
 }) => {
-  const c = $(d);
-  return /* @__PURE__ */ o(D, {
-    i18n: R,
-    children: /* @__PURE__ */ e(C, {
-      id: "dt-content-container",
-      children: [/* @__PURE__ */ o(Q, {
-        exportedBy: l,
-        exportedAt: p,
-        createdBy: f
-      }), /* @__PURE__ */ e(x, {
-        children: [/* @__PURE__ */ o(F, {
-          children: /* @__PURE__ */ o(a, {
-            iconSize: 20,
-            color: u.$white
-          })
-        }), /* @__PURE__ */ e(S, {
-          children: [/* @__PURE__ */ o(y, {
-            children: r
-          }), /* @__PURE__ */ o(I, {
-            children: t
+  const {
+    isEmpty: T
+  } = s, c = $(d);
+  return (
+    // @ts-expect-error: TODO: upgrade i18n
+    /* @__PURE__ */ o(D, {
+      i18n: R,
+      children: /* @__PURE__ */ t(x, {
+        id: "dt-content-container",
+        children: [/* @__PURE__ */ o(V, {
+          exportedBy: l,
+          exportedAt: p,
+          createdBy: f
+        }), /* @__PURE__ */ t(F, {
+          children: [/* @__PURE__ */ o(S, {
+            children: /* @__PURE__ */ o(C, {
+              iconSize: 20,
+              color: u
+            })
+          }), /* @__PURE__ */ t(y, {
+            children: [/* @__PURE__ */ o(I, {
+              children: r
+            }), /* @__PURE__ */ o(M, {
+              children: n
+            })]
           })]
+        }), !T(m) && /* @__PURE__ */ o(j, {
+          children: m?.map(({
+            name: e,
+            value: i
+          }, a) => /* @__PURE__ */ t(k, {
+            children: [/* @__PURE__ */ t(v, {
+              children: [e, ": "]
+            }), /* @__PURE__ */ o(E, {
+              children: i
+            })]
+          }, a))
+        }), /* @__PURE__ */ o(Q, {
+          tree: c
+        }), /* @__PURE__ */ o(L, {
+          children: c.map((e, i) => /* @__PURE__ */ o(_, {
+            step: e,
+            variables: h
+          }, i))
         })]
-      }), !s(m) && /* @__PURE__ */ o(M, {
-        children: m?.map(({
-          name: n,
-          value: i
-        }, h) => /* @__PURE__ */ e(j, {
-          children: [/* @__PURE__ */ e(k, {
-            children: [n, ": "]
-          }), /* @__PURE__ */ o(E, {
-            children: i
-          })]
-        }, h))
-      }), /* @__PURE__ */ o(P, {
-        tree: c
-      }), /* @__PURE__ */ o(L, {
-        children: c.map((n, i) => /* @__PURE__ */ o(V, {
-          step: n,
-          variables: T
-        }, i))
-      })]
+      })
     })
-  });
-}, _ = b;
+  );
+}, oo = b;
 export {
-  _ as default
+  oo as default
 };

package/lib/DecisionTreeContent/DecisionTreeContent.styled.js

@@ -1,85 +1,85 @@
+import { $dark as e, $colorDecisionTree as o, $catchyBlue as d, $greyBlue as a, $deepBlue as i, $white as p, $greyThemeText as r } from "../packages/colors/lib/colors.js";
 import t from "styled-components";
-import { colors as i } from "@shelf/client-helpers";
-const d = t.div`
+const c = t.div`
   margin: 0;
   font-family: 'Open Sans', Arial, sans-serif;
-  color: ${i.$dark};
+  color: ${e};
   font-size: 14px;
-`, a = t.div`
+`, x = t.div`
   display: flex;
-`, p = t.div`
+`, g = t.div`
   min-width: 40px;
   width: 40px;
   height: 40px;
-  background-color: ${i.$colorDecisionTree};
+  background-color: ${o};
   display: flex;
   align-items: center;
   justify-content: center;
   margin-right: 10px;
-`, r = t.div`
+`, h = t.div`
   display: flex;
   flex-direction: column;
-`, s = t.div`
+`, m = t.div`
   font-size: 20px;
   line-height: 1.25;
   padding: 0 5px 5px;
-`, l = t.div`
+`, v = t.div`
   font-size: 14px;
   padding: 0 0 10px 5px;
-`, c = t.div`
+`, f = t.div`
   float: right;
   max-width: 100%;
   width: 100%;
-`, x = t.div`
+`, b = t.div`
   padding-top: 20px;
-`, g = t.div`
+`, w = t.div`
   font-size: 14px;
   font-weight: 700;
   display: flex;
   justify-content: center;
-`, h = t.div`
+`, u = t.div`
   display: flex;
   padding: 10px 0;
-`, m = t.div`
+`, k = t.div`
   page-break-inside: avoid;
-`, v = t.div`
+`, y = t.div`
   display: flex;
   width: 20%;
-`, f = t.div`
+`, $ = t.div`
   width: 20px;
   height: 20px;
   min-width: 20px;
-  background-color: ${(e) => e.color || i.$catchyBlue};
+  background-color: ${(n) => n.color || d};
   border-radius: 5px;
-`, b = t.div`
+`, T = t.div`
   line-height: 20px;
   font-weight: 700;
   padding-left: 10px;
   margin-bottom: 10px;
   margin-right: 50px;
-`, u = t.div`
+`, C = t.div`
   font-size: 20px;
   padding-bottom: 10px;
   page-break-inside: avoid;
-`, w = t.div`
+`, D = t.div`
   font-size: 14px;
-`, k = t.div`
-  background-color: ${i.$greyBlue};
-  border-left: 1px solid ${i.$deepBlue};
+`, L = t.div`
+  background-color: ${a};
+  border-left: 1px solid ${i};
   padding: 20px 15px 15px;
   margin: 10px 0;
-`, $ = t.div`
+`, S = t.div`
   font-weight: bold;
   padding-bottom: 15px;
   line-height: 20px;
-`, y = t.div`
+`, A = t.div`
   padding-bottom: 10px;
-`, T = t.div`
+`, I = t.div`
   display: flex;
   page-break-inside: avoid;
   padding-bottom: 5px;
-`, C = t.div`
-  background-color: ${i.$white};
+`, z = t.div`
+  background-color: ${p};
   padding: 10px 10px 5px;
   border-radius: 5px;
   margin-bottom: 10px;
@@ -87,56 +87,56 @@ const d = t.div`
   page-break-inside: avoid;
 `, B = t.div`
   padding-right: 5px;
-`, D = t.div`
+`, N = t.div`
   display: flex;
   padding-right: 5px;
   align-items: center;
-`, L = t.img`
+`, F = t.img`
   width: 14px;
   height: 14px;
-`, S = t.a`
+`, M = t.a`
   text-decoration: none;
-  color: ${i.$deepBlue};
+  color: ${i};
   page-break-inside: avoid;
   max-width: 90%;
   word-wrap: break-word;
-`, A = t.span`
+`, Q = t.span`
   ${({
-  isDeleted: e
-}) => e ? "text-decoration: line-through" : ""}
-`, I = t.div``, z = t.div`
+  isDeleted: n
+}) => n ? "text-decoration: line-through" : ""}
+`, j = t.div``, H = t.div`
   padding-bottom: 5px;
   &:last-child {
     padding-bottom: 0;
   }
-`, N = t.a`
-  color: ${i.$greyThemeText};
+`, P = t.a`
+  color: ${r};
   margin-right: 0;
   margin-left: auto;
   text-decoration: none;
-`, F = t.div`
-  color: ${i.$deepBlue};
+`, V = t.div`
+  color: ${i};
   margin-right: 0;
   margin-left: auto;
   word-break: break-all;
   align-items: flex-end;
   max-width: 80%;
-`, M = t.a`
+`, O = t.a`
   padding: 0 5px;
   text-decoration: none;
-  color: ${i.$deepBlue};
+  color: ${i};
   line-height: 20px;
-`, Q = t.a`
+`, R = t.a`
   text-decoration: none;
-  color: ${i.$deepBlue};
+  color: ${i};
   page-break-inside: avoid;
   word-break: break-all;
-`, j = t.div`
-  color: ${i.$dark};
+`, U = t.div`
+  color: ${e};
   line-height: 20px;
   margin-right: 0;
   margin-left: auto;
-`, H = t.div`
+`, W = t.div`
   display: flex;
   flex-direction: column;
   padding-bottom: 15px;
@@ -144,82 +144,82 @@ const d = t.div`
   max-width: 100%;
   width: 100%;
   margin-top: 10px;
-`, P = t.div`
+`, q = t.div`
   line-height: 20px;
   padding-bottom: 5px;
   display: flex;
   page-break-inside: avoid;
-`, V = t.a`
+`, E = t.a`
   text-decoration: none;
-  color: ${i.$deepBlue};
+  color: ${i};
   line-height: 20px;
-`, O = t.div`
+`, G = t.div`
   margin-right: 5px;
-`, R = t.div`
+`, J = t.div`
   min-height: 19px;
   min-width: 20px;
   line-height: 20px;
-`, U = t.div`
+`, K = t.div`
   padding-bottom: 25px;
-`, W = t.div`
+`, X = t.div`
   line-height: 20px;
   padding-bottom: 5px;
   page-break-inside: avoid;
-`, q = t.div`
+`, Y = t.div`
   margin-bottom: 5px;
   margin-left: 55px;
-`, E = t.div`
+`, Z = t.div`
   line-height: 24px;
   display: flex;
   padding-bottom: 5px;
-`, G = t.div`
+`, _ = t.div`
   font-weight: 700;
-`, J = t.div`
+`, tt = t.div`
   padding-left: 5px;
 `;
 export {
-  T as Answer,
+  I as Answer,
   B as AnswerNumber,
-  S as AnswerTitle,
-  A as AnswerVariable,
-  C as AnswerWithAssignments,
-  L as AssignmentIcon,
-  D as AssignmentIconBlock,
-  I as Condition,
-  w as Content,
-  H as ContentList,
-  R as ContentListIcon,
-  P as ContentListItem,
-  V as ContentListLink,
-  O as ContentListNumber,
-  u as ContentTitle,
-  E as CustomField,
-  q as CustomFields,
-  c as DTContent,
-  d as DTContentContainer,
-  l as DTDescription,
-  p as DTIcon,
-  r as DTInternalMeta,
-  a as DTMeta,
-  s as DTTitle,
-  G as FieldName,
-  J as FieldValue,
-  Q as LinkUrl,
-  W as MataInfo,
-  U as MetaBlock,
-  j as NoLinks,
-  M as ParentLink,
-  k as Question,
-  y as QuestionDescription,
-  $ as QuestionTitle,
-  z as Rule,
-  x as StepContainer,
-  v as StepHeader,
-  m as StepHeaderBlock,
-  N as StepLink,
-  g as StepNumber,
-  F as StepParents,
-  f as StepType,
-  h as StepTypeContainer,
-  b as StepTypeTitle
+  M as AnswerTitle,
+  Q as AnswerVariable,
+  z as AnswerWithAssignments,
+  F as AssignmentIcon,
+  N as AssignmentIconBlock,
+  j as Condition,
+  D as Content,
+  W as ContentList,
+  J as ContentListIcon,
+  q as ContentListItem,
+  E as ContentListLink,
+  G as ContentListNumber,
+  C as ContentTitle,
+  Z as CustomField,
+  Y as CustomFields,
+  f as DTContent,
+  c as DTContentContainer,
+  v as DTDescription,
+  g as DTIcon,
+  h as DTInternalMeta,
+  x as DTMeta,
+  m as DTTitle,
+  _ as FieldName,
+  tt as FieldValue,
+  R as LinkUrl,
+  X as MataInfo,
+  K as MetaBlock,
+  U as NoLinks,
+  O as ParentLink,
+  L as Question,
+  A as QuestionDescription,
+  S as QuestionTitle,
+  H as Rule,
+  b as StepContainer,
+  y as StepHeader,
+  k as StepHeaderBlock,
+  P as StepLink,
+  w as StepNumber,
+  V as StepParents,
+  $ as StepType,
+  u as StepTypeContainer,
+  T as StepTypeTitle
 };

package/lib/DecisionTreeContent/components/Condition.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
+import React from 'react';
 import type { DecisionTree } from '@shelf/types-ddb';
 import { DTStep } from '../types';
 declare const _default: ({ step, variables, }: {
     step: DTStep;
     variables: Pick<DecisionTree.ContextualVariableDefaults, 'name' | 'id' | 'isDeleted'>[];
-}) => JSX.Element;
+}) => React.JSX.Element;
 export default _default;

package/lib/DecisionTreeContent/components/Condition.js

@@ -1,67 +1,71 @@
-import P from "./StepHeader.js";
-import { StepContainer as A, ContentTitle as C, Question as N, AnswerWithAssignments as f, Answer as x, AnswerNumber as m, Condition as u, Rule as D, AnswerTitle as o, AnswerVariable as g, StepLink as v } from "../DecisionTreeContent.styled.js";
+import A from "./StepHeader.js";
+import { StepContainer as C, ContentTitle as N, Question as g, AnswerWithAssignments as x, Answer as m, AnswerNumber as D, Condition as u, Rule as v, AnswerTitle as o, AnswerVariable as j, StepLink as w } from "../DecisionTreeContent.styled.js";
 import i from "../../i18next/index.js";
-import { jsxs as t, jsx as e, Fragment as j } from "react/jsx-runtime";
+import { jsxs as r, jsx as e, Fragment as s } from "react/jsx-runtime";
 const I = ({
   step: n,
-  variables: w
+  variables: S
 }) => {
-  const s = {
+  const a = {
     eq: "=",
-    neq: "\u2260",
+    neq: "≠",
     contains: i.t("pdf-viewer.exportDTPDF.contains"),
     not_contains: i.t("pdf-viewer.exportDTPDF.notContains")
-  }, a = [...n?.conditions || []];
-  return /* @__PURE__ */ t(A, {
-    children: [/* @__PURE__ */ e(P, {
+  }, p = [...n?.conditions || []];
+  return /* @__PURE__ */ r(C, {
+    children: [/* @__PURE__ */ e(A, {
       step: n
-    }), /* @__PURE__ */ e(C, {
+    }), /* @__PURE__ */ e(N, {
       children: n.title
-    }), /* @__PURE__ */ t(N, {
-      children: [a?.map((r, S) => {
-        const l = r?.expression?.rules, $ = r?.expression?.joiner;
-        return l ? /* @__PURE__ */ e(f, {
-          children: /* @__PURE__ */ t(x, {
-            children: [/* @__PURE__ */ t(m, {
-              children: [S + 1, "."]
+    }), /* @__PURE__ */ r(g, {
+      children: [p?.map((t, $) => {
+        const l = t?.expression?.rules, b = t?.expression?.joiner;
+        return l ? /* @__PURE__ */ e(x, {
+          children: /* @__PURE__ */ r(m, {
+            children: [/* @__PURE__ */ r(D, {
+              children: [$ + 1, "."]
             }), /* @__PURE__ */ e(u, {
               children: l.map((d) => {
-                const p = w?.find((F) => F.id === d.variableId), c = p?.name, h = p?.isDeleted, b = d?.id === l[l.length - 1]?.id, T = h ? ` (${i.t("pdf-viewer.exportDTPDF.deleted")}) [${s[d.operator]}] ${d?.value}` : ` [${s[d.operator]}] ${d?.value}`;
-                return /* @__PURE__ */ t(j, {
-                  children: [/* @__PURE__ */ e(D, {
-                    children: c && /* @__PURE__ */ t(o, {
-                      href: `#${r?.nextStep?.id}`,
-                      children: [/* @__PURE__ */ e(g, {
-                        isDeleted: h,
-                        children: c
-                      }), T]
+                const c = S?.find((P) => P.id === d.variableId), h = c?.name, f = c?.isDeleted, T = d?.id === l[l.length - 1]?.id, F = f ? ` (${i.t("pdf-viewer.exportDTPDF.deleted")}) [${a[d.operator]}] ${d?.value}` : ` [${a[d.operator]}] ${d?.value}`;
+                return /* @__PURE__ */ r(s, {
+                  children: [/* @__PURE__ */ e(v, {
+                    children: h && /* @__PURE__ */ r(o, {
+                      href: `#${t?.nextStep?.id}`,
+                      children: [/* @__PURE__ */ e(j, {
+                        isDeleted: f,
+                        children: h
+                      }), F]
                     })
-                  }), $ && !b && /* @__PURE__ */ e(o, {
-                    href: `#${r?.nextStep?.id}`,
+                  }), b && !T && /* @__PURE__ */ e(o, {
+                    href: `#${t?.nextStep?.id}`,
                     children: i.t("pdf-viewer.exportDTPDF.andOperator")
                   })]
                 });
               })
-            }), r?.nextStep?.number && /* @__PURE__ */ t(v, {
-              href: `#${r.nextStep?.id}`,
-              children: [i.t("pdf-viewer.exportDTPDF.step"), " ", r.nextStep.number]
+            }), t?.nextStep?.number && /* @__PURE__ */ e(w, {
+              href: `#${t.nextStep?.id}`,
+              children: /* @__PURE__ */ r(s, {
+                children: [i.t("pdf-viewer.exportDTPDF.step"), " ", t.nextStep.number]
+              })
             })]
           })
-        }, r.id) : null;
-      }), /* @__PURE__ */ e(f, {
-        children: /* @__PURE__ */ t(x, {
-          children: [/* @__PURE__ */ t(m, {
-            children: [a.length + 1, "."]
+        }, t.id) : null;
+      }), /* @__PURE__ */ e(x, {
+        children: /* @__PURE__ */ r(m, {
+          children: [/* @__PURE__ */ r(D, {
+            children: [p.length + 1, "."]
           }), /* @__PURE__ */ e(u, {
-            children: /* @__PURE__ */ e(D, {
+            children: /* @__PURE__ */ e(v, {
               children: /* @__PURE__ */ e(o, {
                 href: `#${n?.defaultNextStep?.id}`,
                 children: i.t("pdf-viewer.exportDTPDF.default")
               })
             })
-          }), n?.defaultNextStep?.id && /* @__PURE__ */ t(v, {
+          }), n?.defaultNextStep?.id && /* @__PURE__ */ e(w, {
             href: `#${n.defaultNextStep?.id}`,
-            children: [i.t("pdf-viewer.exportDTPDF.step"), " ", n.defaultNextStep?.number]
+            children: /* @__PURE__ */ r(s, {
+              children: [i.t("pdf-viewer.exportDTPDF.step"), " ", n.defaultNextStep?.number]
+            })
           })]
         })
       })]

package/lib/DecisionTreeContent/components/ContentTable.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
+import React from 'react';
 import { DTStep } from '../types';
 declare const _default: ({ tree }: {
     tree: DTStep[];
-}) => JSX.Element;
+}) => React.JSX.Element;
 export default _default;