@plumile/backoffice-react 0.1.103 → 0.1.105

package/lib/esm/BackofficeHubTemplate-C6K55egX.js

@@ -0,0 +1,82 @@
+import { Link as e } from "@plumile/router";
+import { BackofficeEmptyState as t, GlobalSearchInput as n, SidebarTasksSvg as r } from "@plumile/ui";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/components/backoffice/hub/backofficeHubTemplate.css.ts
+var o = "txvbqb9ip txvbqbai7 txvbqbaoy", s = "txvbqb9ip txvbqbai7 txvbqbap7", c = "txvbqb9ip txvbqbai7 txvbqbaog", l = "txvbqb9ip txvbqbcg txvbqbaog", u = "txvbqb9ip txvbqbai7 txvbqbany txvbqbk5y", d = "txvbqb9g txvbqbamp txvbqbv9z txvbqbfcp", f = "txvbqb9iy txvbqbc1g txvbqbaog", p = "u4nszr1 txvbqb9ip txvbqbcg txvbqbaog txvbqblb7 txvbqb1rg txvbqb1cp txvbqb1qg txvbqbwp txvbqbv41 txvbqbv9z txvbqb3b txvbqbk5y txvbqb77 txvbqb6x txvbqb7k", m = "txvbqb9jg txvbqbcp txvbqbdoy txvbqbtyg txvbqbc7g txvbqb1rg txvbqbv45 txvbqbva1 txvbqbaj7", h = "txvbqb9ip txvbqbai7 txvbqbany txvbqbk5y", g = "txvbqbamp txvbqbv9z txvbqbl87", _ = /* @__PURE__ */ i(r, {
+	width: 20,
+	height: 20,
+	"aria-hidden": "true"
+}), v = ({ groups: r, search: v, emptyState: y }) => {
+	let b;
+	return b = r.length === 0 ? /* @__PURE__ */ i(t, {
+		title: y.title,
+		description: y.description,
+		icon: y.icon ?? _
+	}) : /* @__PURE__ */ i("div", {
+		className: s,
+		children: r.map((t) => /* @__PURE__ */ a("section", {
+			className: c,
+			children: [/* @__PURE__ */ a("div", {
+				className: l,
+				children: [t.icon != null && /* @__PURE__ */ i("span", {
+					className: "u4nszr0 txvbqb9jg txvbqbcp txvbqbdoy txvbqbty7 txvbqbc77 txvbqb1rg txvbqbv45 txvbqb1cp txvbqb1qg txvbqbwp txvbqbva1 txvbqbaj7",
+					"aria-hidden": "true",
+					children: t.icon
+				}), /* @__PURE__ */ a("span", {
+					className: u,
+					children: [/* @__PURE__ */ i("h2", {
+						className: d,
+						children: t.title
+					}), t.description != null && /* @__PURE__ */ i("span", {
+						className: "txvbqbva3 txvbqb8y",
+						children: t.description
+					})]
+				})]
+			}), /* @__PURE__ */ i("div", {
+				className: f,
+				children: t.items.map((t) => {
+					let n = t.icon ?? _, r = t.description != null && t.description !== "", o = t.metaLabel != null && t.metaLabel !== "";
+					return /* @__PURE__ */ a(e, {
+						to: t.href,
+						className: p,
+						children: [/* @__PURE__ */ i("span", {
+							className: m,
+							"aria-hidden": "true",
+							children: n
+						}), /* @__PURE__ */ a("span", {
+							className: h,
+							children: [
+								/* @__PURE__ */ i("span", {
+									className: g,
+									children: t.label
+								}),
+								r && /* @__PURE__ */ i("span", {
+									className: "txvbqbva3 txvbqb8y txvbqbfb7 txvbqbl87",
+									children: t.description
+								}),
+								o && /* @__PURE__ */ i("span", {
+									className: "txvbqbva3 txvbqb8p txvbqbamg txvbqb66 txvbqbeep",
+									children: t.metaLabel
+								})
+							]
+						})]
+					}, `${t.kind}-${t.id}`);
+				})
+			})]
+		}, t.id))
+	}), /* @__PURE__ */ a("div", {
+		className: o,
+		children: [v != null && /* @__PURE__ */ i("div", {
+			className: "txvbqbjbp",
+			children: /* @__PURE__ */ i(n, {
+				value: v.value,
+				onChange: v.onChange,
+				placeholder: v.placeholder
+			})
+		}), b]
+	});
+};
+//#endregion
+export { v as t };
+
+//# sourceMappingURL=BackofficeHubTemplate-C6K55egX.js.map

package/lib/esm/BackofficeHubTemplate-C6K55egX.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BackofficeHubTemplate-C6K55egX.js","names":[],"sources":["../../src/components/backoffice/hub/backofficeHubTemplate.css.ts","../../src/components/backoffice/hub/BackofficeHubTemplate.tsx"],"sourcesContent":["import { style } from '@vanilla-extract/css';\n\nimport { sprinkles, vars } from '@plumile/ui';\n\nexport const content = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 5,\n});\n\nexport const search = sprinkles({\n  maxWidth: '2xl',\n});\n\nexport const groups = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 6,\n});\n\nexport const group = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 3,\n});\n\nexport const groupHeader = sprinkles({\n  display: 'flex',\n  alignItems: 'flex-start',\n  gap: 3,\n});\n\nexport const groupIcon = style([\n  sprinkles({\n    display: 'inline-flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    width: 8,\n    height: 8,\n    borderRadius: 'md',\n    backgroundColor: 'surfaceMuted',\n    borderWidth: 'default',\n    borderStyle: 'solid',\n    borderColor: 'borderSubtle',\n    color: 'textSecondary',\n    flexShrink: 0,\n  }),\n  {\n    marginTop: '1px',\n  },\n]);\n\nexport const groupHeading = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 1,\n  minWidth: 0,\n});\n\nexport const groupTitle = sprinkles({\n  fontSize: 'lg',\n  fontWeight: 'semibold',\n  color: 'text',\n  margin: 0,\n});\n\nexport const groupDescription = sprinkles({\n  color: 'textMuted',\n  fontSize: 'sm',\n});\n\nexport const grid = sprinkles({\n  display: 'grid',\n  gridTemplateColumns: 'autoFitMinmax260',\n  gap: 3,\n});\n\nexport const item = style([\n  sprinkles({\n    display: 'flex',\n    alignItems: 'flex-start',\n    gap: 3,\n    padding: 3,\n    borderRadius: 'md',\n    borderWidth: 'default',\n    borderStyle: 'solid',\n    borderColor: 'borderSubtle',\n    backgroundColor: 'surface',\n    color: 'text',\n    textDecoration: 'none',\n    minWidth: 0,\n    transitionProperty: 'default',\n    transitionDuration: 150,\n    transitionTimingFunction: 'ease',\n  }),\n  {\n    minHeight: '92px',\n    selectors: {\n      '&:hover': {\n        borderColor: vars.colors.border,\n        backgroundColor: vars.colors.surfaceMuted,\n        transform: 'translateY(-1px)',\n      },\n      '&:focus-visible': {\n        outline: `2px solid ${vars.colors.primary}`,\n        outlineOffset: '2px',\n      },\n    },\n  },\n]);\n\nexport const itemIcon = sprinkles({\n  display: 'inline-flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  width: 9,\n  height: 9,\n  borderRadius: 'md',\n  backgroundColor: 'surfaceMuted',\n  color: 'textSecondary',\n  flexShrink: 0,\n});\n\nexport const itemContent = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 1,\n  minWidth: 0,\n});\n\nexport const itemTitle = sprinkles({\n  fontWeight: 'semibold',\n  color: 'text',\n  overflowWrap: 'anywhere',\n});\n\nexport const itemDescription = sprinkles({\n  color: 'textMuted',\n  fontSize: 'sm',\n  lineHeight: 'normal',\n  overflowWrap: 'anywhere',\n});\n\nexport const itemMeta = sprinkles({\n  color: 'textMuted',\n  fontSize: 'xs',\n  fontWeight: 'medium',\n  textTransform: 'uppercase',\n  letterSpacing: 'wide',\n});\n","import { type JSX, type ReactNode } from 'react';\nimport { Link } from '@plumile/router';\nimport {\n  BackofficeEmptyState,\n  GlobalSearchInput,\n  SidebarTasksSvg,\n} from '@plumile/ui';\n\nimport * as styles from './backofficeHubTemplate.css.js';\n\nexport type BackofficeHubTemplateItemKind = 'entity' | 'tool';\n\nexport type BackofficeHubTemplateItem = {\n  id: string;\n  kind: BackofficeHubTemplateItemKind;\n  label: string;\n  href: string;\n  icon?: ReactNode;\n  description?: string | null;\n  metaLabel?: string | null;\n};\n\nexport type BackofficeHubTemplateGroup = {\n  id: string;\n  title: string;\n  description?: string | null;\n  icon?: ReactNode;\n  items: readonly BackofficeHubTemplateItem[];\n};\n\nexport type BackofficeHubTemplateEmptyState = {\n  title: string;\n  description: string;\n  icon?: ReactNode;\n};\n\nexport type BackofficeHubTemplateSearch = {\n  value: string;\n  onChange: (value: string) => void;\n  placeholder: string;\n};\n\nexport type BackofficeHubTemplateProps = {\n  groups: readonly BackofficeHubTemplateGroup[];\n  search?: BackofficeHubTemplateSearch;\n  emptyState: BackofficeHubTemplateEmptyState;\n};\n\nconst fallbackIcon = (\n  <SidebarTasksSvg width={20} height={20} aria-hidden=\"true\" />\n);\n\nexport const BackofficeHubTemplate = ({\n  groups,\n  search,\n  emptyState,\n}: BackofficeHubTemplateProps): JSX.Element => {\n  let body: JSX.Element;\n\n  if (groups.length === 0) {\n    body = (\n      <BackofficeEmptyState\n        title={emptyState.title}\n        description={emptyState.description}\n        icon={emptyState.icon ?? fallbackIcon}\n      />\n    );\n  } else {\n    body = (\n      <div className={styles.groups}>\n        {groups.map((group) => {\n          return (\n            <section key={group.id} className={styles.group}>\n              <div className={styles.groupHeader}>\n                {group.icon != null && (\n                  <span className={styles.groupIcon} aria-hidden=\"true\">\n                    {group.icon}\n                  </span>\n                )}\n                <span className={styles.groupHeading}>\n                  <h2 className={styles.groupTitle}>{group.title}</h2>\n                  {group.description != null && (\n                    <span className={styles.groupDescription}>\n                      {group.description}\n                    </span>\n                  )}\n                </span>\n              </div>\n              <div className={styles.grid}>\n                {group.items.map((item) => {\n                  const icon = item.icon ?? fallbackIcon;\n                  const hasDescription =\n                    item.description != null && item.description !== '';\n                  const hasMetaLabel =\n                    item.metaLabel != null && item.metaLabel !== '';\n\n                  return (\n                    <Link\n                      key={`${item.kind}-${item.id}`}\n                      to={item.href}\n                      className={styles.item}\n                    >\n                      <span className={styles.itemIcon} aria-hidden=\"true\">\n                        {icon}\n                      </span>\n                      <span className={styles.itemContent}>\n                        <span className={styles.itemTitle}>{item.label}</span>\n                        {hasDescription && (\n                          <span className={styles.itemDescription}>\n                            {item.description}\n                          </span>\n                        )}\n                        {hasMetaLabel && (\n                          <span className={styles.itemMeta}>\n                            {item.metaLabel}\n                          </span>\n                        )}\n                      </span>\n                    </Link>\n                  );\n                })}\n              </div>\n            </section>\n          );\n        })}\n      </div>\n    );\n  }\n\n  return (\n    <div className={styles.content}>\n      {search != null && (\n        <div className={styles.search}>\n          <GlobalSearchInput\n            value={search.value}\n            onChange={search.onChange}\n            placeholder={search.placeholder}\n          />\n        </div>\n      )}\n      {body}\n    </div>\n  );\n};\n\nexport default BackofficeHubTemplate;\n"],"mappings":";;;;4mBCgDM,IACJ,kBAAC,GAAD;CAAiB,OAAO;CAAI,QAAQ;CAAI,eAAY;CAAS,CAAA,EAGlD,KAAyB,EACpC,QAAA,GACA,QAAA,GACA,oBAC6C;CAC7C,IAAI;CAwEJ,OAtEA,AASE,IATE,EAAO,WAAW,IAElB,kBAAC,GAAD;EACE,OAAO,EAAW;EAClB,aAAa,EAAW;EACxB,MAAM,EAAW,QAAQ;EACzB,CAAA,GAIF,kBAAC,OAAD;EAAK,WAAW;YACb,EAAO,KAAK,MAET,kBAAC,WAAD;GAAwB,WAAW;aAAnC,CACE,kBAAC,OAAD;IAAK,WAAW;cAAhB,CACG,EAAM,QAAQ,QACb,kBAAC,QAAD;KAAM,WAAW;KAAkB,eAAY;eAC5C,EAAM;KACF,CAAA,EAET,kBAAC,QAAD;KAAM,WAAW;eAAjB,CACE,kBAAC,MAAD;MAAI,WAAW;gBAAoB,EAAM;MAAW,CAAA,EACnD,EAAM,eAAe,QACpB,kBAAC,QAAD;MAAM,WAAW;gBACd,EAAM;MACF,CAAA,CAEJ;OACH;OACN,kBAAC,OAAD;IAAK,WAAW;cACb,EAAM,MAAM,KAAK,MAAS;KACzB,IAAM,IAAO,EAAK,QAAQ,GACpB,IACJ,EAAK,eAAe,QAAQ,EAAK,gBAAgB,IAC7C,IACJ,EAAK,aAAa,QAAQ,EAAK,cAAc;KAE/C,OACE,kBAAC,GAAD;MAEE,IAAI,EAAK;MACT,WAAW;gBAHb,CAKE,kBAAC,QAAD;OAAM,WAAW;OAAiB,eAAY;iBAC3C;OACI,CAAA,EACP,kBAAC,QAAD;OAAM,WAAW;iBAAjB;QACE,kBAAC,QAAD;SAAM,WAAW;mBAAmB,EAAK;SAAa,CAAA;QACrD,KACC,kBAAC,QAAD;SAAM,WAAW;mBACd,EAAK;SACD,CAAA;QAER,KACC,kBAAC,QAAD;SAAM,WAAW;mBACd,EAAK;SACD,CAAA;QAEJ;SACF;QApBA,GAAG,EAAK,KAAK,GAAG,EAAK,KAoBrB;MAET;IACE,CAAA,CACE;KAlDI,EAAM,GAkDV,CAEZ;EACE,CAAA,EAKR,kBAAC,OAAD;EAAK,WAAW;YAAhB,CACG,KAAU,QACT,kBAAC,OAAD;GAAK,WAAW;aACd,kBAAC,GAAD;IACE,OAAO,EAAO;IACd,UAAU,EAAO;IACjB,aAAa,EAAO;IACpB,CAAA;GACE,CAAA,EAEP,EACG"}