mantine-json-view
Advanced tools
Comparing version 0.3.0 to 0.4.2
import type { Props } from './Text.types'; | ||
declare function Text({ sx, ...props }: Props): import("react/jsx-runtime").JSX.Element; | ||
declare function Text({ styles, ...props }: Props): import("react/jsx-runtime").JSX.Element; | ||
export { Text }; |
import type { TextProps } from '@mantine/core'; | ||
import type { ReactNode } from 'react'; | ||
export interface Props extends TextProps { | ||
children: ReactNode; | ||
} |
@@ -1,4 +0,4 @@ | ||
import { jsx as n, jsxs as i } from "react/jsx-runtime"; | ||
import { createContext as T, useContext as u, useMemo as y, useState as g } from "react"; | ||
import { Text as j, createStyles as z, Flex as s } from "@mantine/core"; | ||
import { jsx as t, jsxs as c } from "react/jsx-runtime"; | ||
import { createContext as T, useContext as u, useMemo as f, useState as g } from "react"; | ||
import { Text as j, Flex as s } from "@mantine/core"; | ||
const p = T({ | ||
@@ -9,11 +9,13 @@ collapseComponent: void 0, | ||
}); | ||
function a({ sx: e, ...r }) { | ||
const { theme: t } = u(p); | ||
return /* @__PURE__ */ n( | ||
function a({ styles: r, ...e }) { | ||
const { theme: o } = u(p); | ||
return /* @__PURE__ */ t( | ||
j, | ||
{ | ||
...r, | ||
sx: { | ||
...e, | ||
fontFamily: t == null ? void 0 : t.fontFamily | ||
...e, | ||
styles: { | ||
root: { | ||
...r, | ||
fontFamily: o == null ? void 0 : o.fontFamily | ||
} | ||
} | ||
@@ -23,4 +25,4 @@ } | ||
} | ||
const J = z((e, { literal: r, theme: t }) => { | ||
const { key: o, literals: c = {} } = (t == null ? void 0 : t.colors) || {}; | ||
function z({ literal: r, theme: e }) { | ||
const { key: o, literals: n = {} } = (e == null ? void 0 : e.colors) || {}; | ||
return { | ||
@@ -36,8 +38,8 @@ key: { | ||
value: { | ||
color: c[r.type] | ||
color: n[r.type] | ||
} | ||
}; | ||
}); | ||
function S(e) { | ||
switch (e.type) { | ||
} | ||
function J(r) { | ||
switch (r.type) { | ||
case "null": | ||
@@ -48,20 +50,20 @@ return "null"; | ||
case "string": | ||
return `"${e.value}"`; | ||
return `"${r.value}"`; | ||
default: | ||
return e.value.toString(); | ||
return r.value.toString(); | ||
} | ||
} | ||
function x({ literal: e }) { | ||
const { clipboardComponent: r, theme: t } = u(p), { classes: o } = J({ literal: e, theme: t }), c = y(() => S(e), [e]); | ||
return /* @__PURE__ */ i(s, { className: o.root, children: [ | ||
/* @__PURE__ */ i(a, { fz: "md", children: [ | ||
/* @__PURE__ */ i("span", { className: o.key, children: [ | ||
function C({ literal: r }) { | ||
const { clipboardComponent: e, theme: o } = u(p), n = f(() => z({ literal: r, theme: o }), []), l = f(() => J(r), [r]); | ||
return /* @__PURE__ */ c(s, { styles: { root: n.root }, children: [ | ||
/* @__PURE__ */ c(a, { fz: "md", children: [ | ||
/* @__PURE__ */ c("span", { style: n.key, children: [ | ||
'"', | ||
e.key, | ||
r.key, | ||
'":' | ||
] }), | ||
" ", | ||
/* @__PURE__ */ n("span", { className: o.value, children: c }) | ||
/* @__PURE__ */ t("span", { style: n.value, children: l }) | ||
] }), | ||
r !== void 0 && /* @__PURE__ */ n(r, { value: c }) | ||
e !== void 0 && /* @__PURE__ */ t(e, { value: l }) | ||
] }); | ||
@@ -80,70 +82,93 @@ } | ||
}; | ||
function f({ object: e }) { | ||
const { collapseComponent: r, theme: t } = u(p), [o, c] = g(!1); | ||
return /* @__PURE__ */ i(s, { sx: h.root, children: [ | ||
/* @__PURE__ */ i(s, { align: "center", direction: "column", gap: 4, children: [ | ||
r !== void 0 && /* @__PURE__ */ n( | ||
r, | ||
{ | ||
collapsed: o, | ||
setCollapsed: c | ||
} | ||
), | ||
!o && /* @__PURE__ */ n( | ||
s, | ||
{ | ||
sx: { | ||
backgroundColor: t == null ? void 0 : t.colors.collapse, | ||
flexGrow: 1, | ||
width: 1 | ||
function y({ object: r }) { | ||
const { collapseComponent: e, theme: o } = u(p), [n, l] = g(!1); | ||
return /* @__PURE__ */ c( | ||
s, | ||
{ | ||
styles: { | ||
root: h.root | ||
}, | ||
children: [ | ||
/* @__PURE__ */ c(s, { align: "center", direction: "column", gap: 4, children: [ | ||
e !== void 0 && /* @__PURE__ */ t( | ||
e, | ||
{ | ||
collapsed: n, | ||
setCollapsed: l | ||
} | ||
), | ||
!n && /* @__PURE__ */ t( | ||
s, | ||
{ | ||
styles: { | ||
root: { | ||
backgroundColor: o == null ? void 0 : o.colors.collapse, | ||
flexGrow: 1, | ||
width: 1 | ||
} | ||
} | ||
} | ||
) | ||
] }), | ||
/* @__PURE__ */ c(s, { direction: "column", children: [ | ||
/* @__PURE__ */ c(s, { align: "center", gap: "xs", children: [ | ||
/* @__PURE__ */ t(a, { fz: "md", children: `"${r.key || "object"}": {` }), | ||
/* @__PURE__ */ t(a, { c: "dimmed", fz: "xs", children: r.children.length === 1 ? "1 item" : `${r.children.length} items` }), | ||
n && /* @__PURE__ */ t(a, { fz: "md", children: "}" }) | ||
] }), | ||
!n && r.children.map((i, d) => { | ||
switch (i.type) { | ||
case "array": | ||
return /* @__PURE__ */ t(m, { array: i }, d); | ||
case "object": | ||
return /* @__PURE__ */ t(y, { object: i }, d); | ||
default: | ||
return /* @__PURE__ */ t(C, { literal: i }, d); | ||
} | ||
}) | ||
] }), | ||
!n && /* @__PURE__ */ t( | ||
a, | ||
{ | ||
fz: "md", | ||
styles: { | ||
root: h.closeBracket | ||
}, | ||
children: "}" | ||
} | ||
} | ||
) | ||
] }), | ||
/* @__PURE__ */ i(s, { direction: "column", children: [ | ||
/* @__PURE__ */ i(s, { align: "center", gap: "xs", children: [ | ||
/* @__PURE__ */ n(a, { fz: "md", children: `"${e.key || "object"}": {` }), | ||
/* @__PURE__ */ n(a, { c: "dimmed", fz: "xs", children: e.children.length === 1 ? "1 item" : `${e.children.length} items` }), | ||
o && /* @__PURE__ */ n(a, { fz: "md", children: "}" }) | ||
] }), | ||
!o && e.children.map((l, d) => { | ||
switch (l.type) { | ||
case "array": | ||
return /* @__PURE__ */ n(m, { array: l }, d); | ||
case "object": | ||
return /* @__PURE__ */ n(f, { object: l }, d); | ||
default: | ||
return /* @__PURE__ */ n(x, { literal: l }, d); | ||
} | ||
}) | ||
] }), | ||
!o && /* @__PURE__ */ n(a, { fz: "md", sx: h.closeBracket, children: "}" }) | ||
] }); | ||
) | ||
] | ||
} | ||
); | ||
} | ||
function m({ array: e }) { | ||
const { collapseComponent: r, theme: t } = u(p), [o, c] = g(!1); | ||
return /* @__PURE__ */ i( | ||
function m({ array: r }) { | ||
const { collapseComponent: e, theme: o } = u(p), [n, l] = g(!1); | ||
return /* @__PURE__ */ c( | ||
s, | ||
{ | ||
sx: { | ||
display: "grid", | ||
gridTemplateColumns: "auto 1fr", | ||
gap: 2 | ||
styles: { | ||
root: { | ||
display: "grid", | ||
gridTemplateColumns: "auto 1fr", | ||
gap: 2 | ||
} | ||
}, | ||
children: [ | ||
/* @__PURE__ */ i(s, { align: "center", direction: "column", gap: 4, children: [ | ||
r !== void 0 && /* @__PURE__ */ n( | ||
r, | ||
/* @__PURE__ */ c(s, { align: "center", direction: "column", gap: 4, children: [ | ||
e !== void 0 && /* @__PURE__ */ t( | ||
e, | ||
{ | ||
collapsed: o, | ||
setCollapsed: c | ||
collapsed: n, | ||
setCollapsed: l | ||
} | ||
), | ||
!o && /* @__PURE__ */ n( | ||
!n && /* @__PURE__ */ t( | ||
s, | ||
{ | ||
sx: { | ||
backgroundColor: t == null ? void 0 : t.colors.collapse, | ||
flexGrow: 1, | ||
width: 1 | ||
styles: { | ||
root: { | ||
backgroundColor: o == null ? void 0 : o.colors.collapse, | ||
flexGrow: 1, | ||
width: 1 | ||
} | ||
} | ||
@@ -153,26 +178,28 @@ } | ||
] }), | ||
/* @__PURE__ */ i(s, { direction: "column", children: [ | ||
/* @__PURE__ */ i(s, { align: "center", gap: "xs", children: [ | ||
/* @__PURE__ */ n(a, { fz: "md", children: `"${e.key || "array"}": [` }), | ||
/* @__PURE__ */ n(a, { c: "dimmed", fz: "xs", children: e.children.length === 1 ? "1 item" : `${e.children.length} items` }), | ||
o && /* @__PURE__ */ n(a, { fz: "md", children: "]" }) | ||
/* @__PURE__ */ c(s, { direction: "column", children: [ | ||
/* @__PURE__ */ c(s, { align: "center", gap: "xs", children: [ | ||
/* @__PURE__ */ t(a, { fz: "md", children: `"${r.key || "array"}": [` }), | ||
/* @__PURE__ */ t(a, { c: "dimmed", fz: "xs", children: r.children.length === 1 ? "1 item" : `${r.children.length} items` }), | ||
n && /* @__PURE__ */ t(a, { fz: "md", children: "]" }) | ||
] }), | ||
!o && e.children.map((l, d) => { | ||
switch (l.type) { | ||
!n && r.children.map((i, d) => { | ||
switch (i.type) { | ||
case "array": | ||
return /* @__PURE__ */ n(m, { array: l }, d); | ||
return /* @__PURE__ */ t(m, { array: i }, d); | ||
case "object": | ||
return /* @__PURE__ */ n(f, { object: l }, d); | ||
return /* @__PURE__ */ t(y, { object: i }, d); | ||
default: | ||
return /* @__PURE__ */ n(x, { literal: l }, d); | ||
return /* @__PURE__ */ t(C, { literal: i }, d); | ||
} | ||
}) | ||
] }), | ||
!o && /* @__PURE__ */ n( | ||
!n && /* @__PURE__ */ t( | ||
a, | ||
{ | ||
fz: "md", | ||
sx: { | ||
textAlign: "center", | ||
width: "100%" | ||
styles: { | ||
root: { | ||
textAlign: "center", | ||
width: "100%" | ||
} | ||
}, | ||
@@ -186,12 +213,12 @@ children: "]" | ||
} | ||
function C(e) { | ||
return typeof e == "object" && !Array.isArray(e) && e !== null; | ||
function w(r) { | ||
return typeof r == "object" && !Array.isArray(r) && r !== null; | ||
} | ||
function $(e) { | ||
function S(r) { | ||
try { | ||
const r = JSON.parse(e); | ||
if (Array.isArray(r)) | ||
return b("", r); | ||
if (C(r)) | ||
return w("", r); | ||
const e = JSON.parse(r); | ||
if (Array.isArray(e)) | ||
return x("", e); | ||
if (w(e)) | ||
return b("", e); | ||
throw new Error("Invalid json"); | ||
@@ -202,79 +229,79 @@ } catch { | ||
} | ||
function w(e, r) { | ||
function b(r, e) { | ||
return { | ||
children: Object.entries(r).map( | ||
([t, o]) => A(t, o) | ||
children: Object.entries(e).map( | ||
([o, n]) => A(o, n) | ||
), | ||
key: e, | ||
key: r, | ||
type: "object" | ||
}; | ||
} | ||
function b(e, r) { | ||
function x(r, e) { | ||
return { | ||
children: Object.entries(r).map( | ||
([t, o]) => A(t, o) | ||
children: Object.entries(e).map( | ||
([o, n]) => A(o, n) | ||
), | ||
key: e, | ||
key: r, | ||
type: "array" | ||
}; | ||
} | ||
function A(e, r) { | ||
if (C(r)) | ||
return w(e, r); | ||
if (Array.isArray(r)) | ||
return b(e, r); | ||
if (typeof r == "boolean") | ||
function A(r, e) { | ||
if (w(e)) | ||
return b(r, e); | ||
if (Array.isArray(e)) | ||
return x(r, e); | ||
if (typeof e == "boolean") | ||
return { | ||
type: "boolean", | ||
key: e, | ||
value: r | ||
key: r, | ||
value: e | ||
}; | ||
if (typeof r == "number") | ||
if (typeof e == "number") | ||
return { | ||
type: "number", | ||
key: e, | ||
value: r | ||
key: r, | ||
value: e | ||
}; | ||
if (typeof r == "string") | ||
if (typeof e == "string") | ||
return { | ||
type: "string", | ||
key: e, | ||
value: r | ||
key: r, | ||
value: e | ||
}; | ||
if (r === void 0) | ||
if (e === void 0) | ||
return { | ||
type: "undefined", | ||
key: e, | ||
value: r | ||
key: r, | ||
value: e | ||
}; | ||
if (r === null) | ||
if (e === null) | ||
return { | ||
type: "null", | ||
key: e, | ||
value: r | ||
key: r, | ||
value: e | ||
}; | ||
throw new Error(`Unable to parse value: ${r}`); | ||
throw new Error(`Unable to parse value: ${e}`); | ||
} | ||
const k = { | ||
parse: $ | ||
const $ = { | ||
parse: S | ||
}; | ||
function E(e) { | ||
const r = y(() => k.parse(e), [e]); | ||
return console.log(r), { | ||
ast: r, | ||
json: e | ||
function k(r) { | ||
const e = f(() => $.parse(r), [r]); | ||
return console.log(e), { | ||
ast: e, | ||
json: r | ||
}; | ||
} | ||
function O({ | ||
collapseComponent: e, | ||
clipboardComponent: r, | ||
json: t, | ||
theme: o | ||
collapseComponent: r, | ||
clipboardComponent: e, | ||
json: o, | ||
theme: n | ||
}) { | ||
const { ast: c } = E(t); | ||
return /* @__PURE__ */ n( | ||
const { ast: l } = k(o); | ||
return /* @__PURE__ */ t( | ||
p.Provider, | ||
{ | ||
value: { collapseComponent: e, clipboardComponent: r, theme: o }, | ||
children: c.type === "object" ? /* @__PURE__ */ n(f, { object: c }) : /* @__PURE__ */ n(m, { array: c }) | ||
value: { collapseComponent: r, clipboardComponent: e, theme: n }, | ||
children: l.type === "object" ? /* @__PURE__ */ t(y, { object: l }) : /* @__PURE__ */ t(m, { array: l }) | ||
} | ||
@@ -285,3 +312,3 @@ ); | ||
O as JsonView, | ||
E as useJsonParser | ||
k as useJsonParser | ||
}; |
@@ -1,1 +0,1 @@ | ||
(function(c,n){typeof exports=="object"&&typeof module<"u"?n(exports,require("react/jsx-runtime"),require("react"),require("@mantine/core")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react","@mantine/core"],n):(c=typeof globalThis<"u"?globalThis:c||self,n(c.index={},c["react/jsx-runtime"],c.React,c["@mantine/core"]))})(this,function(c,n,i,s){"use strict";const f=i.createContext({collapseComponent:void 0,clipboardComponent:void 0,theme:void 0});function a({sx:e,...r}){const{theme:t}=i.useContext(f);return n.jsx(s.Text,{...r,sx:{...e,fontFamily:t==null?void 0:t.fontFamily}})}const T=s.createStyles((e,{literal:r,theme:t})=>{const{key:o,literals:l={}}=(t==null?void 0:t.colors)||{};return{key:{color:o},root:{alignItems:"center",gap:8,width:"100%"},value:{color:l[r.type]}}});function m(e){switch(e.type){case"null":return"null";case"undefined":return"undefined";case"string":return`"${e.value}"`;default:return e.value.toString()}}function y({literal:e}){const{clipboardComponent:r,theme:t}=i.useContext(f),{classes:o}=T({literal:e,theme:t}),l=i.useMemo(()=>m(e),[e]);return n.jsxs(s.Flex,{className:o.root,children:[n.jsxs(a,{fz:"md",children:[n.jsxs("span",{className:o.key,children:['"',e.key,'":']})," ",n.jsx("span",{className:o.value,children:l})]}),r!==void 0&&n.jsx(r,{value:l})]})}const h={closeBracket:{textAlign:"center",width:"100%"},root:{display:"grid",gridTemplateColumns:"auto 1fr",gap:2}};function u({object:e}){const{collapseComponent:r,theme:t}=i.useContext(f),[o,l]=i.useState(!1);return n.jsxs(s.Flex,{sx:h.root,children:[n.jsxs(s.Flex,{align:"center",direction:"column",gap:4,children:[r!==void 0&&n.jsx(r,{collapsed:o,setCollapsed:l}),!o&&n.jsx(s.Flex,{sx:{backgroundColor:t==null?void 0:t.colors.collapse,flexGrow:1,width:1}})]}),n.jsxs(s.Flex,{direction:"column",children:[n.jsxs(s.Flex,{align:"center",gap:"xs",children:[n.jsx(a,{fz:"md",children:`"${e.key||"object"}": {`}),n.jsx(a,{c:"dimmed",fz:"xs",children:e.children.length===1?"1 item":`${e.children.length} items`}),o&&n.jsx(a,{fz:"md",children:"}"})]}),!o&&e.children.map((d,p)=>{switch(d.type){case"array":return n.jsx(x,{array:d},p);case"object":return n.jsx(u,{object:d},p);default:return n.jsx(y,{literal:d},p)}})]}),!o&&n.jsx(a,{fz:"md",sx:h.closeBracket,children:"}"})]})}function x({array:e}){const{collapseComponent:r,theme:t}=i.useContext(f),[o,l]=i.useState(!1);return n.jsxs(s.Flex,{sx:{display:"grid",gridTemplateColumns:"auto 1fr",gap:2},children:[n.jsxs(s.Flex,{align:"center",direction:"column",gap:4,children:[r!==void 0&&n.jsx(r,{collapsed:o,setCollapsed:l}),!o&&n.jsx(s.Flex,{sx:{backgroundColor:t==null?void 0:t.colors.collapse,flexGrow:1,width:1}})]}),n.jsxs(s.Flex,{direction:"column",children:[n.jsxs(s.Flex,{align:"center",gap:"xs",children:[n.jsx(a,{fz:"md",children:`"${e.key||"array"}": [`}),n.jsx(a,{c:"dimmed",fz:"xs",children:e.children.length===1?"1 item":`${e.children.length} items`}),o&&n.jsx(a,{fz:"md",children:"]"})]}),!o&&e.children.map((d,p)=>{switch(d.type){case"array":return n.jsx(x,{array:d},p);case"object":return n.jsx(u,{object:d},p);default:return n.jsx(y,{literal:d},p)}})]}),!o&&n.jsx(a,{fz:"md",sx:{textAlign:"center",width:"100%"},children:"]"})]})}function g(e){return typeof e=="object"&&!Array.isArray(e)&&e!==null}function F(e){try{const r=JSON.parse(e);if(Array.isArray(r))return w("",r);if(g(r))return C("",r);throw new Error("Invalid json")}catch{throw new Error("Error parsing json")}}function C(e,r){return{children:Object.entries(r).map(([t,o])=>b(t,o)),key:e,type:"object"}}function w(e,r){return{children:Object.entries(r).map(([t,o])=>b(t,o)),key:e,type:"array"}}function b(e,r){if(g(r))return C(e,r);if(Array.isArray(r))return w(e,r);if(typeof r=="boolean")return{type:"boolean",key:e,value:r};if(typeof r=="number")return{type:"number",key:e,value:r};if(typeof r=="string")return{type:"string",key:e,value:r};if(r===void 0)return{type:"undefined",key:e,value:r};if(r===null)return{type:"null",key:e,value:r};throw new Error(`Unable to parse value: ${r}`)}const A={parse:F};function j(e){const r=i.useMemo(()=>A.parse(e),[e]);return console.log(r),{ast:r,json:e}}function S({collapseComponent:e,clipboardComponent:r,json:t,theme:o}){const{ast:l}=j(t);return n.jsx(f.Provider,{value:{collapseComponent:e,clipboardComponent:r,theme:o},children:l.type==="object"?n.jsx(u,{object:l}):n.jsx(x,{array:l})})}c.JsonView=S,c.useJsonParser=j,Object.defineProperty(c,Symbol.toStringTag,{value:"Module"})}); | ||
(function(l,n){typeof exports=="object"&&typeof module<"u"?n(exports,require("react/jsx-runtime"),require("react"),require("@mantine/core")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react","@mantine/core"],n):(l=typeof globalThis<"u"?globalThis:l||self,n(l.index={},l["react/jsx-runtime"],l.React,l["@mantine/core"]))})(this,function(l,n,c,s){"use strict";const f=c.createContext({collapseComponent:void 0,clipboardComponent:void 0,theme:void 0});function d({styles:e,...r}){const{theme:o}=c.useContext(f);return n.jsx(s.Text,{...r,styles:{root:{...e,fontFamily:o==null?void 0:o.fontFamily}}})}function T({literal:e,theme:r}){const{key:o,literals:t={}}=(r==null?void 0:r.colors)||{};return{key:{color:o},root:{alignItems:"center",gap:8,width:"100%"},value:{color:t[e.type]}}}function F(e){switch(e.type){case"null":return"null";case"undefined":return"undefined";case"string":return`"${e.value}"`;default:return e.value.toString()}}function h({literal:e}){const{clipboardComponent:r,theme:o}=c.useContext(f),t=c.useMemo(()=>T({literal:e,theme:o}),[]),i=c.useMemo(()=>F(e),[e]);return n.jsxs(s.Flex,{styles:{root:t.root},children:[n.jsxs(d,{fz:"md",children:[n.jsxs("span",{style:t.key,children:['"',e.key,'":']})," ",n.jsx("span",{style:t.value,children:i})]}),r!==void 0&&n.jsx(r,{value:i})]})}const x={closeBracket:{textAlign:"center",width:"100%"},root:{display:"grid",gridTemplateColumns:"auto 1fr",gap:2}};function u({object:e}){const{collapseComponent:r,theme:o}=c.useContext(f),[t,i]=c.useState(!1);return n.jsxs(s.Flex,{styles:{root:x.root},children:[n.jsxs(s.Flex,{align:"center",direction:"column",gap:4,children:[r!==void 0&&n.jsx(r,{collapsed:t,setCollapsed:i}),!t&&n.jsx(s.Flex,{styles:{root:{backgroundColor:o==null?void 0:o.colors.collapse,flexGrow:1,width:1}}})]}),n.jsxs(s.Flex,{direction:"column",children:[n.jsxs(s.Flex,{align:"center",gap:"xs",children:[n.jsx(d,{fz:"md",children:`"${e.key||"object"}": {`}),n.jsx(d,{c:"dimmed",fz:"xs",children:e.children.length===1?"1 item":`${e.children.length} items`}),t&&n.jsx(d,{fz:"md",children:"}"})]}),!t&&e.children.map((a,p)=>{switch(a.type){case"array":return n.jsx(y,{array:a},p);case"object":return n.jsx(u,{object:a},p);default:return n.jsx(h,{literal:a},p)}})]}),!t&&n.jsx(d,{fz:"md",styles:{root:x.closeBracket},children:"}"})]})}function y({array:e}){const{collapseComponent:r,theme:o}=c.useContext(f),[t,i]=c.useState(!1);return n.jsxs(s.Flex,{styles:{root:{display:"grid",gridTemplateColumns:"auto 1fr",gap:2}},children:[n.jsxs(s.Flex,{align:"center",direction:"column",gap:4,children:[r!==void 0&&n.jsx(r,{collapsed:t,setCollapsed:i}),!t&&n.jsx(s.Flex,{styles:{root:{backgroundColor:o==null?void 0:o.colors.collapse,flexGrow:1,width:1}}})]}),n.jsxs(s.Flex,{direction:"column",children:[n.jsxs(s.Flex,{align:"center",gap:"xs",children:[n.jsx(d,{fz:"md",children:`"${e.key||"array"}": [`}),n.jsx(d,{c:"dimmed",fz:"xs",children:e.children.length===1?"1 item":`${e.children.length} items`}),t&&n.jsx(d,{fz:"md",children:"]"})]}),!t&&e.children.map((a,p)=>{switch(a.type){case"array":return n.jsx(y,{array:a},p);case"object":return n.jsx(u,{object:a},p);default:return n.jsx(h,{literal:a},p)}})]}),!t&&n.jsx(d,{fz:"md",styles:{root:{textAlign:"center",width:"100%"}},children:"]"})]})}function g(e){return typeof e=="object"&&!Array.isArray(e)&&e!==null}function A(e){try{const r=JSON.parse(e);if(Array.isArray(r))return w("",r);if(g(r))return C("",r);throw new Error("Invalid json")}catch{throw new Error("Error parsing json")}}function C(e,r){return{children:Object.entries(r).map(([o,t])=>b(o,t)),key:e,type:"object"}}function w(e,r){return{children:Object.entries(r).map(([o,t])=>b(o,t)),key:e,type:"array"}}function b(e,r){if(g(r))return C(e,r);if(Array.isArray(r))return w(e,r);if(typeof r=="boolean")return{type:"boolean",key:e,value:r};if(typeof r=="number")return{type:"number",key:e,value:r};if(typeof r=="string")return{type:"string",key:e,value:r};if(r===void 0)return{type:"undefined",key:e,value:r};if(r===null)return{type:"null",key:e,value:r};throw new Error(`Unable to parse value: ${r}`)}const m={parse:A};function j(e){const r=c.useMemo(()=>m.parse(e),[e]);return console.log(r),{ast:r,json:e}}function J({collapseComponent:e,clipboardComponent:r,json:o,theme:t}){const{ast:i}=j(o);return n.jsx(f.Provider,{value:{collapseComponent:e,clipboardComponent:r,theme:t},children:i.type==="object"?n.jsx(u,{object:i}):n.jsx(y,{array:i})})}l.JsonView=J,l.useJsonParser=j,Object.defineProperty(l,Symbol.toStringTag,{value:"Module"})}); |
import type { CSSProperties } from 'react'; | ||
import type { CSSObject } from '@mantine/core'; | ||
import type { JsonLiteralValue } from './json'; | ||
@@ -10,3 +9,3 @@ export interface Theme { | ||
}; | ||
fontFamily?: CSSObject['fontFamily']; | ||
fontFamily?: string; | ||
} |
{ | ||
"name": "mantine-json-view", | ||
"version": "0.3.0", | ||
"version": "0.4.2", | ||
"engines": { | ||
"node": "18", | ||
"pnpm": "8.6.12" | ||
"node": "20", | ||
"pnpm": "8" | ||
}, | ||
@@ -23,3 +23,3 @@ "files": [ | ||
"peerDependencies": { | ||
"@mantine/core": ">=6.0.19", | ||
"@mantine/core": ">=7.0.0", | ||
"react": ">=18", | ||
@@ -29,28 +29,27 @@ "react-dom": ">=18" | ||
"devDependencies": { | ||
"@emotion/react": "^11.11.1", | ||
"@mantine/core": "^6.0.19", | ||
"@storybook/addon-essentials": "^7.3.2", | ||
"@storybook/addon-interactions": "^7.3.2", | ||
"@storybook/addon-links": "^7.3.2", | ||
"@storybook/blocks": "^7.3.2", | ||
"@storybook/react": "^7.3.2", | ||
"@storybook/react-vite": "^7.3.2", | ||
"@storybook/testing-library": "^0.2.0", | ||
"@tabler/icons-react": "^2.32.0", | ||
"@types/react": "^18.2.21", | ||
"@types/react-dom": "^18.2.7", | ||
"@typescript-eslint/eslint-plugin": "^6.4.1", | ||
"@typescript-eslint/parser": "^6.4.1", | ||
"@vitejs/plugin-react-swc": "^3.3.2", | ||
"eslint": "^8.48.0", | ||
"@mantine/core": "^7.2.2", | ||
"@storybook/addon-essentials": "^7.5.3", | ||
"@storybook/addon-interactions": "^7.5.3", | ||
"@storybook/addon-links": "^7.5.3", | ||
"@storybook/blocks": "^7.5.3", | ||
"@storybook/react": "^7.5.3", | ||
"@storybook/react-vite": "^7.5.3", | ||
"@storybook/testing-library": "^0.2.2", | ||
"@tabler/icons-react": "^2.42.0", | ||
"@types/react": "^18.2.38", | ||
"@types/react-dom": "^18.2.17", | ||
"@typescript-eslint/eslint-plugin": "^6.12.0", | ||
"@typescript-eslint/parser": "^6.12.0", | ||
"@vitejs/plugin-react-swc": "^3.5.0", | ||
"eslint": "^8.54.0", | ||
"eslint-plugin-react-hooks": "^4.6.0", | ||
"eslint-plugin-react-refresh": "^0.4.3", | ||
"eslint-plugin-storybook": "^0.6.13", | ||
"eslint-plugin-react-refresh": "^0.4.4", | ||
"eslint-plugin-storybook": "^0.6.15", | ||
"react": "^18.2.0", | ||
"react-dom": "^18.2.0", | ||
"storybook": "^7.3.2", | ||
"typescript": "^5.2.2", | ||
"vite": "^4.4.9", | ||
"vite-plugin-dts": "^3.5.2", | ||
"vitest": "^0.34.3" | ||
"storybook": "^7.5.3", | ||
"typescript": "^5.3.2", | ||
"vite": "^5.0.2", | ||
"vite-plugin-dts": "^3.6.3", | ||
"vitest": "^0.34.6" | ||
}, | ||
@@ -63,4 +62,5 @@ "scripts": { | ||
"preview": "vite preview", | ||
"test": "vitest" | ||
"test": "vitest", | ||
"typecheck": "tsc --noEmit" | ||
} | ||
} |
@@ -5,4 +5,4 @@ # Mantine JSON View | ||
Mantine JSON View depends on `@mantine/core` and `@emotion/react`, so make sure to install | ||
those dependencies as well. | ||
Mantine JSON View depends on `@mantine/core`, so make sure to install | ||
that dependency as well. | ||
@@ -12,3 +12,3 @@ #### npm | ||
``` | ||
npm install --save @mantine/core @emotion/react mantine-json-view | ||
npm install --save @mantine/core mantine-json-view | ||
``` | ||
@@ -19,3 +19,3 @@ | ||
``` | ||
pnpm install --save @mantine/core @emotion/react mantine-json-view | ||
pnpm install --save @mantine/core mantine-json-view | ||
``` | ||
@@ -22,0 +22,0 @@ |
Minified code
QualityThis package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.
Found 1 instance in 1 package
25
461
3
19423
30