@fuf-stack/pixels 0.7.0 → 0.7.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/dist/Json/index.cjs +2 -2
  2. package/dist/Json/index.js +1 -1
  3. package/dist/{chunk-YQBT544X.js → chunk-4S2N2V4Y.js} +61 -3
  4. package/dist/chunk-4S2N2V4Y.js.map +1 -0
  5. package/dist/{chunk-M7IVIJEA.cjs → chunk-JFNPXLHM.cjs} +62 -4
  6. package/dist/chunk-JFNPXLHM.cjs.map +1 -0
  7. package/dist/index.cjs +2 -2
  8. package/dist/index.js +1 -1
  9. package/package.json +1 -1
  10. package/dist/chunk-M7IVIJEA.cjs.map +0 -1
  11. package/dist/chunk-YQBT544X.js.map +0 -1
package/dist/Json/index.cjs CHANGED
@@ -1,10 +1,10 @@
1
1
  "use strict";Object.defineProperty(exports, "__esModule", {value: true});
2
2
 
3
3
 
4
- var _chunkM7IVIJEAcjs = require('../chunk-M7IVIJEA.cjs');
4
+ var _chunkJFNPXLHMcjs = require('../chunk-JFNPXLHM.cjs');
5
5
  require('../chunk-ND4VZZVU.cjs');
6
6
 
7
7
 
8
8
 
9
- exports.Json = _chunkM7IVIJEAcjs.Json_default; exports.default = _chunkM7IVIJEAcjs.Json_default2;
9
+ exports.Json = _chunkJFNPXLHMcjs.Json_default; exports.default = _chunkJFNPXLHMcjs.Json_default2;
10
10
  //# sourceMappingURL=index.cjs.map
package/dist/Json/index.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import {
2
2
  Json_default,
3
3
  Json_default2
4
- } from "../chunk-YQBT544X.js";
4
+ } from "../chunk-4S2N2V4Y.js";
5
5
  import "../chunk-HYXTFS4R.js";
6
6
  export {
7
7
  Json_default as Json,
package/dist/{chunk-YQBT544X.js → chunk-4S2N2V4Y.js} RENAMED
@@ -7,9 +7,67 @@ import { useState } from "react";
7
7
  import { FaChevronDown, FaChevronUp, FaTimesCircle } from "react-icons/fa";
8
8
  import { HiOutlineClipboard, HiOutlineClipboardCheck } from "react-icons/hi";
9
9
  import JsonView from "@uiw/react-json-view";
10
- import { lightTheme } from "@uiw/react-json-view/light";
11
- import { vscodeTheme } from "@uiw/react-json-view/vscode";
12
10
  import cn from "classnames";
11
+
12
+ // src/Json/theme.ts
13
+ var lightTheme = {
14
+ "--w-rjv-font-family": "monospace",
15
+ "--w-rjv-color": "#002b36",
16
+ "--w-rjv-key-string": "#002b36",
17
+ "--w-rjv-background-color": "#ffffff",
18
+ "--w-rjv-line-color": "#ebebeb",
19
+ "--w-rjv-arrow-color": "var(--w-rjv-color)",
20
+ "--w-rjv-edit-color": "var(--w-rjv-color)",
21
+ "--w-rjv-info-color": "#0000004d",
22
+ "--w-rjv-update-color": "#ebcb8b",
23
+ "--w-rjv-copied-color": "#002b36",
24
+ "--w-rjv-copied-success-color": "#28a745",
25
+ "--w-rjv-curlybraces-color": "#236a7c",
26
+ "--w-rjv-colon-color": "#002b36",
27
+ "--w-rjv-brackets-color": "#236a7c",
28
+ "--w-rjv-quotes-color": "var(--w-rjv-key-string)",
29
+ "--w-rjv-quotes-string-color": "var(--w-rjv-type-string-color)",
30
+ "--w-rjv-type-string-color": "#cb4b16",
31
+ "--w-rjv-type-int-color": "#268bd2",
32
+ "--w-rjv-type-float-color": "#859900",
33
+ "--w-rjv-type-bigint-color": "#268bd2",
34
+ "--w-rjv-type-boolean-color": "#2aa198",
35
+ "--w-rjv-type-date-color": "#586e75",
36
+ "--w-rjv-type-url-color": "#0969da",
37
+ "--w-rjv-type-null-color": "#d33682",
38
+ "--w-rjv-type-nan-color": "#859900",
39
+ "--w-rjv-type-undefined-color": "#586e75"
40
+ };
41
+ var vscodeTheme = {
42
+ "--w-rjv-font-family": "monospace",
43
+ "--w-rjv-color": "#9cdcfe",
44
+ "--w-rjv-key-string": "#9cdcfe",
45
+ "--w-rjv-background-color": "#1e1e1e",
46
+ "--w-rjv-line-color": "#36334280",
47
+ "--w-rjv-arrow-color": "#838383",
48
+ "--w-rjv-edit-color": "var(--w-rjv-color)",
49
+ "--w-rjv-info-color": "#9c9c9c7a",
50
+ "--w-rjv-update-color": "#9cdcfe",
51
+ "--w-rjv-copied-color": "#9cdcfe",
52
+ "--w-rjv-copied-success-color": "#28a745",
53
+ "--w-rjv-curlybraces-color": "#d4d4d4",
54
+ "--w-rjv-colon-color": "#d4d4d4",
55
+ "--w-rjv-brackets-color": "#d4d4d4",
56
+ "--w-rjv-quotes-color": "var(--w-rjv-key-string)",
57
+ "--w-rjv-quotes-string-color": "var(--w-rjv-type-string-color)",
58
+ "--w-rjv-type-string-color": "#ce9178",
59
+ "--w-rjv-type-int-color": "#b5cea8",
60
+ "--w-rjv-type-float-color": "#b5cea8",
61
+ "--w-rjv-type-bigint-color": "#b5cea8",
62
+ "--w-rjv-type-boolean-color": "#569cd6",
63
+ "--w-rjv-type-date-color": "#b5cea8",
64
+ "--w-rjv-type-url-color": "#3b89cf",
65
+ "--w-rjv-type-null-color": "#569cd6",
66
+ "--w-rjv-type-nan-color": "#859900",
67
+ "--w-rjv-type-undefined-color": "#569cd6"
68
+ };
69
+
70
+ // src/Json/Json.tsx
13
71
  import { Fragment, jsx, jsxs } from "react/jsx-runtime";
14
72
  var getValue = (value) => {
15
73
  if (typeof value === "string") {
@@ -124,4 +182,4 @@ export {
124
182
  Json_default,
125
183
  Json_default2
126
184
  };
127
- //# sourceMappingURL=chunk-YQBT544X.js.map
185
+ //# sourceMappingURL=chunk-4S2N2V4Y.js.map
package/dist/chunk-4S2N2V4Y.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/Json/Json.tsx","../src/Json/theme.ts","../src/Json/index.ts"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { useState } from 'react';\nimport { FaChevronDown, FaChevronUp, FaTimesCircle } from 'react-icons/fa';\nimport { HiOutlineClipboard, HiOutlineClipboardCheck } from 'react-icons/hi';\n\nimport JsonView from '@uiw/react-json-view';\nimport cn from 'classnames';\n\nimport { Button } from '../Button';\nimport { lightTheme, vscodeTheme } from './theme';\n\n/**\n * returns the value (JSON string or object) as object\n */\nconst getValue = (value: string | object) => {\n if (typeof value === 'string') {\n return JSON.parse(value);\n }\n if (typeof value === 'object') {\n return value;\n }\n throw new Error(`${typeof value} can not be visualized`);\n};\n\nexport interface JsonProps {\n /** CSS class name */\n className?: string | string[] | null;\n /** When set to true, all nodes will be collapsed by default. Use an integer value to collapse at a particular depth. */\n collapsed?: boolean | number;\n /** Object to be visualized JSON string or object */\n value: string | object;\n}\n\n/**\n * Json renderer based on [react-json-view](https://mac-s-g.github.io/react-json-view/demo/dist/)\n */\nconst Json = ({ className = null, collapsed = false, value }: JsonProps) => {\n const isDarkMode = document.body.classList.contains('dark');\n\n let content: ReactNode = null;\n let error: ReactNode = null;\n\n const [showDetails, setShowDetails] = useState(false);\n\n try {\n content = (\n <JsonView\n className=\"pr-5\"\n collapsed={collapsed}\n displayDataTypes={false}\n style={{\n ...(isDarkMode ? vscodeTheme : lightTheme),\n backgroundColor: 'unset',\n }}\n value={getValue(value)}\n >\n {/* FIX: overwrite Copied component to fix flickering copy button */}\n <JsonView.Copied\n render={({\n // @ts-expect-error this should be fine\n 'data-copied': copied,\n style,\n ...elmProps\n }) => {\n const elmClasses = cn(\n elmProps.className,\n 'absolute -right-4 -top-[2px] h-4 w-4 !fill-transparent pl-1',\n { 'text-success': copied },\n );\n return (\n <span className=\"relative !ml-0 !h-[1em] !w-0\" style={style}>\n {copied ? (\n <HiOutlineClipboardCheck\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...elmProps}\n className={elmClasses}\n />\n ) : (\n // eslint-disable-next-line react/jsx-props-no-spreading\n <HiOutlineClipboard {...elmProps} className={elmClasses} />\n )}\n </span>\n );\n }}\n />\n </JsonView>\n );\n } catch (err) {\n error = (\n <div\n className=\"mb-4 flex flex-col items-center rounded-lg border border-danger bg-danger-50 p-4 text-sm text-danger\"\n role=\"alert\"\n >\n <div className=\"flex w-full justify-between gap-6\">\n <div className=\"flex items-center\">\n <FaTimesCircle className=\"mr-2\" />\n <span className=\"font-medium\">Failed to parse JSON data</span>\n </div>\n <Button\n color=\"danger\"\n size=\"sm\"\n variant=\"light\"\n onClick={() => setShowDetails(!showDetails)}\n >\n {showDetails ? (\n <>\n <FaChevronUp /> Hide Details\n </>\n ) : (\n <>\n <FaChevronDown /> Show Details\n </>\n )}\n </Button>\n </div>\n {showDetails && (\n <div className=\"mt-4 w-full text-left\">\n <div>\n <strong>Error:</strong>\n <pre>\n {/* @ts-expect-error is ok */}\n {err?.name}: {err?.message}\n </pre>\n </div>\n <div className=\"mt-4\">\n <strong>Data:</strong>\n <pre>\n {typeof value !== 'string'\n ? JSON.stringify(value, null, 2)\n : value}\n </pre>\n </div>\n </div>\n )}\n </div>\n );\n }\n return <div className={cn(className)}>{error || content}</div>;\n};\n\nexport default Json;\n","// see: https://github.com/uiwjs/react-json-view/blob/main/core/src/theme/light.ts\nexport const lightTheme = {\n '--w-rjv-font-family': 'monospace',\n '--w-rjv-color': '#002b36',\n '--w-rjv-key-string': '#002b36',\n '--w-rjv-background-color': '#ffffff',\n '--w-rjv-line-color': '#ebebeb',\n '--w-rjv-arrow-color': 'var(--w-rjv-color)',\n '--w-rjv-edit-color': 'var(--w-rjv-color)',\n '--w-rjv-info-color': '#0000004d',\n '--w-rjv-update-color': '#ebcb8b',\n '--w-rjv-copied-color': '#002b36',\n '--w-rjv-copied-success-color': '#28a745',\n\n '--w-rjv-curlybraces-color': '#236a7c',\n '--w-rjv-colon-color': '#002b36',\n '--w-rjv-brackets-color': '#236a7c',\n '--w-rjv-quotes-color': 'var(--w-rjv-key-string)',\n '--w-rjv-quotes-string-color': 'var(--w-rjv-type-string-color)',\n\n '--w-rjv-type-string-color': '#cb4b16',\n '--w-rjv-type-int-color': '#268bd2',\n '--w-rjv-type-float-color': '#859900',\n '--w-rjv-type-bigint-color': '#268bd2',\n '--w-rjv-type-boolean-color': '#2aa198',\n '--w-rjv-type-date-color': '#586e75',\n '--w-rjv-type-url-color': '#0969da',\n '--w-rjv-type-null-color': '#d33682',\n '--w-rjv-type-nan-color': '#859900',\n '--w-rjv-type-undefined-color': '#586e75',\n} as React.CSSProperties;\n\n// see: https://github.com/uiwjs/react-json-view/blob/main/core/src/theme/vscode.ts\nexport const vscodeTheme = {\n '--w-rjv-font-family': 'monospace',\n '--w-rjv-color': '#9cdcfe',\n '--w-rjv-key-string': '#9cdcfe',\n '--w-rjv-background-color': '#1e1e1e',\n '--w-rjv-line-color': '#36334280',\n '--w-rjv-arrow-color': '#838383',\n '--w-rjv-edit-color': 'var(--w-rjv-color)',\n '--w-rjv-info-color': '#9c9c9c7a',\n '--w-rjv-update-color': '#9cdcfe',\n '--w-rjv-copied-color': '#9cdcfe',\n '--w-rjv-copied-success-color': '#28a745',\n\n '--w-rjv-curlybraces-color': '#d4d4d4',\n '--w-rjv-colon-color': '#d4d4d4',\n '--w-rjv-brackets-color': '#d4d4d4',\n '--w-rjv-quotes-color': 'var(--w-rjv-key-string)',\n '--w-rjv-quotes-string-color': 'var(--w-rjv-type-string-color)',\n\n '--w-rjv-type-string-color': '#ce9178',\n '--w-rjv-type-int-color': '#b5cea8',\n '--w-rjv-type-float-color': '#b5cea8',\n '--w-rjv-type-bigint-color': '#b5cea8',\n '--w-rjv-type-boolean-color': '#569cd6',\n '--w-rjv-type-date-color': '#b5cea8',\n '--w-rjv-type-url-color': '#3b89cf',\n '--w-rjv-type-null-color': '#569cd6',\n '--w-rjv-type-nan-color': '#859900',\n '--w-rjv-type-undefined-color': '#569cd6',\n} as React.CSSProperties;\n","import Json from './Json';\n\nexport type { JsonProps } from './Json';\n\nexport { Json };\n\nexport default Json;\n"],"mappings":"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","names":["Json_default"]}
package/dist/{chunk-M7IVIJEA.cjs → chunk-JFNPXLHM.cjs} RENAMED
@@ -7,9 +7,67 @@ var _react = require('react');
7
7
  var _fa = require('react-icons/fa');
8
8
  var _hi = require('react-icons/hi');
9
9
  var _reactjsonview = require('@uiw/react-json-view'); var _reactjsonview2 = _interopRequireDefault(_reactjsonview);
10
- var _light = require('@uiw/react-json-view/light');
11
- var _vscode = require('@uiw/react-json-view/vscode');
12
10
  var _classnames = require('classnames'); var _classnames2 = _interopRequireDefault(_classnames);
11
+
12
+ // src/Json/theme.ts
13
+ var lightTheme = {
14
+ "--w-rjv-font-family": "monospace",
15
+ "--w-rjv-color": "#002b36",
16
+ "--w-rjv-key-string": "#002b36",
17
+ "--w-rjv-background-color": "#ffffff",
18
+ "--w-rjv-line-color": "#ebebeb",
19
+ "--w-rjv-arrow-color": "var(--w-rjv-color)",
20
+ "--w-rjv-edit-color": "var(--w-rjv-color)",
21
+ "--w-rjv-info-color": "#0000004d",
22
+ "--w-rjv-update-color": "#ebcb8b",
23
+ "--w-rjv-copied-color": "#002b36",
24
+ "--w-rjv-copied-success-color": "#28a745",
25
+ "--w-rjv-curlybraces-color": "#236a7c",
26
+ "--w-rjv-colon-color": "#002b36",
27
+ "--w-rjv-brackets-color": "#236a7c",
28
+ "--w-rjv-quotes-color": "var(--w-rjv-key-string)",
29
+ "--w-rjv-quotes-string-color": "var(--w-rjv-type-string-color)",
30
+ "--w-rjv-type-string-color": "#cb4b16",
31
+ "--w-rjv-type-int-color": "#268bd2",
32
+ "--w-rjv-type-float-color": "#859900",
33
+ "--w-rjv-type-bigint-color": "#268bd2",
34
+ "--w-rjv-type-boolean-color": "#2aa198",
35
+ "--w-rjv-type-date-color": "#586e75",
36
+ "--w-rjv-type-url-color": "#0969da",
37
+ "--w-rjv-type-null-color": "#d33682",
38
+ "--w-rjv-type-nan-color": "#859900",
39
+ "--w-rjv-type-undefined-color": "#586e75"
40
+ };
41
+ var vscodeTheme = {
42
+ "--w-rjv-font-family": "monospace",
43
+ "--w-rjv-color": "#9cdcfe",
44
+ "--w-rjv-key-string": "#9cdcfe",
45
+ "--w-rjv-background-color": "#1e1e1e",
46
+ "--w-rjv-line-color": "#36334280",
47
+ "--w-rjv-arrow-color": "#838383",
48
+ "--w-rjv-edit-color": "var(--w-rjv-color)",
49
+ "--w-rjv-info-color": "#9c9c9c7a",
50
+ "--w-rjv-update-color": "#9cdcfe",
51
+ "--w-rjv-copied-color": "#9cdcfe",
52
+ "--w-rjv-copied-success-color": "#28a745",
53
+ "--w-rjv-curlybraces-color": "#d4d4d4",
54
+ "--w-rjv-colon-color": "#d4d4d4",
55
+ "--w-rjv-brackets-color": "#d4d4d4",
56
+ "--w-rjv-quotes-color": "var(--w-rjv-key-string)",
57
+ "--w-rjv-quotes-string-color": "var(--w-rjv-type-string-color)",
58
+ "--w-rjv-type-string-color": "#ce9178",
59
+ "--w-rjv-type-int-color": "#b5cea8",
60
+ "--w-rjv-type-float-color": "#b5cea8",
61
+ "--w-rjv-type-bigint-color": "#b5cea8",
62
+ "--w-rjv-type-boolean-color": "#569cd6",
63
+ "--w-rjv-type-date-color": "#b5cea8",
64
+ "--w-rjv-type-url-color": "#3b89cf",
65
+ "--w-rjv-type-null-color": "#569cd6",
66
+ "--w-rjv-type-nan-color": "#859900",
67
+ "--w-rjv-type-undefined-color": "#569cd6"
68
+ };
69
+
70
+ // src/Json/Json.tsx
13
71
  var _jsxruntime = require('react/jsx-runtime');
14
72
  var getValue = (value) => {
15
73
  if (typeof value === "string") {
@@ -33,7 +91,7 @@ var Json = ({ className = null, collapsed = false, value }) => {
33
91
  collapsed,
34
92
  displayDataTypes: false,
35
93
  style: {
36
- ...isDarkMode ? _vscode.vscodeTheme : _light.lightTheme,
94
+ ...isDarkMode ? vscodeTheme : lightTheme,
37
95
  backgroundColor: "unset"
38
96
  },
39
97
  value: getValue(value),
@@ -124,4 +182,4 @@ var Json_default2 = Json_default;
124
182
 
125
183
 
126
184
  exports.Json_default = Json_default; exports.Json_default2 = Json_default2;
127
- //# sourceMappingURL=chunk-M7IVIJEA.cjs.map
185
+ //# sourceMappingURL=chunk-JFNPXLHM.cjs.map
package/dist/chunk-JFNPXLHM.cjs.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/Json/Json.tsx","../src/Json/theme.ts","../src/Json/index.ts"],"names":["Json_default"],"mappings":"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","sourcesContent":["import type { ReactNode } from 'react';\n\nimport { useState } from 'react';\nimport { FaChevronDown, FaChevronUp, FaTimesCircle } from 'react-icons/fa';\nimport { HiOutlineClipboard, HiOutlineClipboardCheck } from 'react-icons/hi';\n\nimport JsonView from '@uiw/react-json-view';\nimport cn from 'classnames';\n\nimport { Button } from '../Button';\nimport { lightTheme, vscodeTheme } from './theme';\n\n/**\n * returns the value (JSON string or object) as object\n */\nconst getValue = (value: string | object) => {\n if (typeof value === 'string') {\n return JSON.parse(value);\n }\n if (typeof value === 'object') {\n return value;\n }\n throw new Error(`${typeof value} can not be visualized`);\n};\n\nexport interface JsonProps {\n /** CSS class name */\n className?: string | string[] | null;\n /** When set to true, all nodes will be collapsed by default. Use an integer value to collapse at a particular depth. */\n collapsed?: boolean | number;\n /** Object to be visualized JSON string or object */\n value: string | object;\n}\n\n/**\n * Json renderer based on [react-json-view](https://mac-s-g.github.io/react-json-view/demo/dist/)\n */\nconst Json = ({ className = null, collapsed = false, value }: JsonProps) => {\n const isDarkMode = document.body.classList.contains('dark');\n\n let content: ReactNode = null;\n let error: ReactNode = null;\n\n const [showDetails, setShowDetails] = useState(false);\n\n try {\n content = (\n <JsonView\n className=\"pr-5\"\n collapsed={collapsed}\n displayDataTypes={false}\n style={{\n ...(isDarkMode ? vscodeTheme : lightTheme),\n backgroundColor: 'unset',\n }}\n value={getValue(value)}\n >\n {/* FIX: overwrite Copied component to fix flickering copy button */}\n <JsonView.Copied\n render={({\n // @ts-expect-error this should be fine\n 'data-copied': copied,\n style,\n ...elmProps\n }) => {\n const elmClasses = cn(\n elmProps.className,\n 'absolute -right-4 -top-[2px] h-4 w-4 !fill-transparent pl-1',\n { 'text-success': copied },\n );\n return (\n <span className=\"relative !ml-0 !h-[1em] !w-0\" style={style}>\n {copied ? (\n <HiOutlineClipboardCheck\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...elmProps}\n className={elmClasses}\n />\n ) : (\n // eslint-disable-next-line react/jsx-props-no-spreading\n <HiOutlineClipboard {...elmProps} className={elmClasses} />\n )}\n </span>\n );\n }}\n />\n </JsonView>\n );\n } catch (err) {\n error = (\n <div\n className=\"mb-4 flex flex-col items-center rounded-lg border border-danger bg-danger-50 p-4 text-sm text-danger\"\n role=\"alert\"\n >\n <div className=\"flex w-full justify-between gap-6\">\n <div className=\"flex items-center\">\n <FaTimesCircle className=\"mr-2\" />\n <span className=\"font-medium\">Failed to parse JSON data</span>\n </div>\n <Button\n color=\"danger\"\n size=\"sm\"\n variant=\"light\"\n onClick={() => setShowDetails(!showDetails)}\n >\n {showDetails ? (\n <>\n <FaChevronUp /> Hide Details\n </>\n ) : (\n <>\n <FaChevronDown /> Show Details\n </>\n )}\n </Button>\n </div>\n {showDetails && (\n <div className=\"mt-4 w-full text-left\">\n <div>\n <strong>Error:</strong>\n <pre>\n {/* @ts-expect-error is ok */}\n {err?.name}: {err?.message}\n </pre>\n </div>\n <div className=\"mt-4\">\n <strong>Data:</strong>\n <pre>\n {typeof value !== 'string'\n ? JSON.stringify(value, null, 2)\n : value}\n </pre>\n </div>\n </div>\n )}\n </div>\n );\n }\n return <div className={cn(className)}>{error || content}</div>;\n};\n\nexport default Json;\n","// see: https://github.com/uiwjs/react-json-view/blob/main/core/src/theme/light.ts\nexport const lightTheme = {\n '--w-rjv-font-family': 'monospace',\n '--w-rjv-color': '#002b36',\n '--w-rjv-key-string': '#002b36',\n '--w-rjv-background-color': '#ffffff',\n '--w-rjv-line-color': '#ebebeb',\n '--w-rjv-arrow-color': 'var(--w-rjv-color)',\n '--w-rjv-edit-color': 'var(--w-rjv-color)',\n '--w-rjv-info-color': '#0000004d',\n '--w-rjv-update-color': '#ebcb8b',\n '--w-rjv-copied-color': '#002b36',\n '--w-rjv-copied-success-color': '#28a745',\n\n '--w-rjv-curlybraces-color': '#236a7c',\n '--w-rjv-colon-color': '#002b36',\n '--w-rjv-brackets-color': '#236a7c',\n '--w-rjv-quotes-color': 'var(--w-rjv-key-string)',\n '--w-rjv-quotes-string-color': 'var(--w-rjv-type-string-color)',\n\n '--w-rjv-type-string-color': '#cb4b16',\n '--w-rjv-type-int-color': '#268bd2',\n '--w-rjv-type-float-color': '#859900',\n '--w-rjv-type-bigint-color': '#268bd2',\n '--w-rjv-type-boolean-color': '#2aa198',\n '--w-rjv-type-date-color': '#586e75',\n '--w-rjv-type-url-color': '#0969da',\n '--w-rjv-type-null-color': '#d33682',\n '--w-rjv-type-nan-color': '#859900',\n '--w-rjv-type-undefined-color': '#586e75',\n} as React.CSSProperties;\n\n// see: https://github.com/uiwjs/react-json-view/blob/main/core/src/theme/vscode.ts\nexport const vscodeTheme = {\n '--w-rjv-font-family': 'monospace',\n '--w-rjv-color': '#9cdcfe',\n '--w-rjv-key-string': '#9cdcfe',\n '--w-rjv-background-color': '#1e1e1e',\n '--w-rjv-line-color': '#36334280',\n '--w-rjv-arrow-color': '#838383',\n '--w-rjv-edit-color': 'var(--w-rjv-color)',\n '--w-rjv-info-color': '#9c9c9c7a',\n '--w-rjv-update-color': '#9cdcfe',\n '--w-rjv-copied-color': '#9cdcfe',\n '--w-rjv-copied-success-color': '#28a745',\n\n '--w-rjv-curlybraces-color': '#d4d4d4',\n '--w-rjv-colon-color': '#d4d4d4',\n '--w-rjv-brackets-color': '#d4d4d4',\n '--w-rjv-quotes-color': 'var(--w-rjv-key-string)',\n '--w-rjv-quotes-string-color': 'var(--w-rjv-type-string-color)',\n\n '--w-rjv-type-string-color': '#ce9178',\n '--w-rjv-type-int-color': '#b5cea8',\n '--w-rjv-type-float-color': '#b5cea8',\n '--w-rjv-type-bigint-color': '#b5cea8',\n '--w-rjv-type-boolean-color': '#569cd6',\n '--w-rjv-type-date-color': '#b5cea8',\n '--w-rjv-type-url-color': '#3b89cf',\n '--w-rjv-type-null-color': '#569cd6',\n '--w-rjv-type-nan-color': '#859900',\n '--w-rjv-type-undefined-color': '#569cd6',\n} as React.CSSProperties;\n","import Json from './Json';\n\nexport type { JsonProps } from './Json';\n\nexport { Json };\n\nexport default Json;\n"]}
package/dist/index.cjs CHANGED
@@ -24,7 +24,7 @@ var _chunkXGHRKDIMcjs = require('./chunk-XGHRKDIM.cjs');
24
24
  var _chunkGIM2W4JHcjs = require('./chunk-GIM2W4JH.cjs');
25
25
 
26
26
 
27
- var _chunkM7IVIJEAcjs = require('./chunk-M7IVIJEA.cjs');
27
+ var _chunkJFNPXLHMcjs = require('./chunk-JFNPXLHM.cjs');
28
28
 
29
29
 
30
30
 
@@ -57,5 +57,5 @@ var _chunkX2MUU2ZIcjs = require('./chunk-X2MUU2ZI.cjs');
57
57
 
58
58
 
59
59
 
60
- exports.Avatar = _chunkXGHRKDIMcjs.Avatar_default; exports.AvatarGroup = _chunkEJSTUBPUcjs.AvatarGroup_default; exports.Button = _chunkND4VZZVUcjs.Button_default; exports.Card = _chunkGIM2W4JHcjs.Card_default; exports.Json = _chunkM7IVIJEAcjs.Json_default; exports.Label = _chunkBMKGS5PKcjs.Label_default; exports.Menu = _chunkHHTTNYDCcjs.Menu_default; exports.Modal = _chunkX2MUU2ZIcjs.Modal_default; exports.Popover = _chunkB35F4645cjs.Popover_default; exports.Tooltip = _chunkBSBPQXNGcjs.Tooltip_default; exports.buttonVariants = _chunkND4VZZVUcjs.buttonVariants; exports.cardVariants = _chunkGIM2W4JHcjs.cardVariants; exports.modalVariants = _chunkX2MUU2ZIcjs.modalVariants; exports.nextui = _chunk64K2TRGLcjs.nextui; exports.tooltipPlacementOptions = _chunkBSBPQXNGcjs.tooltipPlacementOptions; exports.useDebounce = _chunkMWNBYTRNcjs.useDebounce; exports.useLocalStorage = _chunkMWNBYTRNcjs.useLocalStorage;
60
+ exports.Avatar = _chunkXGHRKDIMcjs.Avatar_default; exports.AvatarGroup = _chunkEJSTUBPUcjs.AvatarGroup_default; exports.Button = _chunkND4VZZVUcjs.Button_default; exports.Card = _chunkGIM2W4JHcjs.Card_default; exports.Json = _chunkJFNPXLHMcjs.Json_default; exports.Label = _chunkBMKGS5PKcjs.Label_default; exports.Menu = _chunkHHTTNYDCcjs.Menu_default; exports.Modal = _chunkX2MUU2ZIcjs.Modal_default; exports.Popover = _chunkB35F4645cjs.Popover_default; exports.Tooltip = _chunkBSBPQXNGcjs.Tooltip_default; exports.buttonVariants = _chunkND4VZZVUcjs.buttonVariants; exports.cardVariants = _chunkGIM2W4JHcjs.cardVariants; exports.modalVariants = _chunkX2MUU2ZIcjs.modalVariants; exports.nextui = _chunk64K2TRGLcjs.nextui; exports.tooltipPlacementOptions = _chunkBSBPQXNGcjs.tooltipPlacementOptions; exports.useDebounce = _chunkMWNBYTRNcjs.useDebounce; exports.useLocalStorage = _chunkMWNBYTRNcjs.useLocalStorage;
61
61
  //# sourceMappingURL=index.cjs.map
package/dist/index.js CHANGED
@@ -24,7 +24,7 @@ import {
24
24
  } from "./chunk-IEZVKZFP.js";
25
25
  import {
26
26
  Json_default
27
- } from "./chunk-YQBT544X.js";
27
+ } from "./chunk-4S2N2V4Y.js";
28
28
  import {
29
29
  Button_default,
30
30
  buttonVariants
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@fuf-stack/pixels",
3
3
  "description": "fuf react component library",
4
4
  "author": "Hannes Tiede",
5
- "version": "0.7.0",
5
+ "version": "0.7.1",
6
6
  "type": "module",
7
7
  "main": "./dist/index.cjs",
8
8
  "module": "./dist/index.js",
package/dist/chunk-M7IVIJEA.cjs.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/Json/Json.tsx","../src/Json/index.ts"],"names":["Json_default"],"mappings":"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","sourcesContent":["import type { ReactNode } from 'react';\n\nimport { useState } from 'react';\nimport { FaChevronDown, FaChevronUp, FaTimesCircle } from 'react-icons/fa';\nimport { HiOutlineClipboard, HiOutlineClipboardCheck } from 'react-icons/hi';\n\nimport JsonView from '@uiw/react-json-view';\nimport { lightTheme } from '@uiw/react-json-view/light';\nimport { vscodeTheme } from '@uiw/react-json-view/vscode';\nimport cn from 'classnames';\n\nimport { Button } from '../Button';\n\n/**\n * returns the value (JSON string or object) as object\n */\nconst getValue = (value: string | object) => {\n if (typeof value === 'string') {\n return JSON.parse(value);\n }\n if (typeof value === 'object') {\n return value;\n }\n throw new Error(`${typeof value} can not be visualized`);\n};\n\nexport interface JsonProps {\n /** CSS class name */\n className?: string | string[] | null;\n /** When set to true, all nodes will be collapsed by default. Use an integer value to collapse at a particular depth. */\n collapsed?: boolean | number;\n /** Object to be visualized JSON string or object */\n value: string | object;\n}\n\n/**\n * Json renderer based on [react-json-view](https://mac-s-g.github.io/react-json-view/demo/dist/)\n */\nconst Json = ({ className = null, collapsed = false, value }: JsonProps) => {\n const isDarkMode = document.body.classList.contains('dark');\n\n let content: ReactNode = null;\n let error: ReactNode = null;\n\n const [showDetails, setShowDetails] = useState(false);\n\n try {\n content = (\n <JsonView\n className=\"pr-5\"\n collapsed={collapsed}\n displayDataTypes={false}\n style={{\n ...(isDarkMode ? vscodeTheme : lightTheme),\n backgroundColor: 'unset',\n }}\n value={getValue(value)}\n >\n {/* FIX: overwrite Copied component to fix flickering copy button */}\n <JsonView.Copied\n render={({\n // @ts-expect-error this should be fine\n 'data-copied': copied,\n style,\n ...elmProps\n }) => {\n const elmClasses = cn(\n elmProps.className,\n 'absolute -right-4 -top-[2px] h-4 w-4 !fill-transparent pl-1',\n { 'text-success': copied },\n );\n return (\n <span className=\"relative !ml-0 !h-[1em] !w-0\" style={style}>\n {copied ? (\n <HiOutlineClipboardCheck\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...elmProps}\n className={elmClasses}\n />\n ) : (\n // eslint-disable-next-line react/jsx-props-no-spreading\n <HiOutlineClipboard {...elmProps} className={elmClasses} />\n )}\n </span>\n );\n }}\n />\n </JsonView>\n );\n } catch (err) {\n error = (\n <div\n className=\"mb-4 flex flex-col items-center rounded-lg border border-danger bg-danger-50 p-4 text-sm text-danger\"\n role=\"alert\"\n >\n <div className=\"flex w-full justify-between gap-6\">\n <div className=\"flex items-center\">\n <FaTimesCircle className=\"mr-2\" />\n <span className=\"font-medium\">Failed to parse JSON data</span>\n </div>\n <Button\n color=\"danger\"\n size=\"sm\"\n variant=\"light\"\n onClick={() => setShowDetails(!showDetails)}\n >\n {showDetails ? (\n <>\n <FaChevronUp /> Hide Details\n </>\n ) : (\n <>\n <FaChevronDown /> Show Details\n </>\n )}\n </Button>\n </div>\n {showDetails && (\n <div className=\"mt-4 w-full text-left\">\n <div>\n <strong>Error:</strong>\n <pre>\n {/* @ts-expect-error is ok */}\n {err?.name}: {err?.message}\n </pre>\n </div>\n <div className=\"mt-4\">\n <strong>Data:</strong>\n <pre>\n {typeof value !== 'string'\n ? JSON.stringify(value, null, 2)\n : value}\n </pre>\n </div>\n </div>\n )}\n </div>\n );\n }\n return <div className={cn(className)}>{error || content}</div>;\n};\n\nexport default Json;\n","import Json from './Json';\n\nexport type { JsonProps } from './Json';\n\nexport { Json };\n\nexport default Json;\n"]}
package/dist/chunk-YQBT544X.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/Json/Json.tsx","../src/Json/index.ts"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { useState } from 'react';\nimport { FaChevronDown, FaChevronUp, FaTimesCircle } from 'react-icons/fa';\nimport { HiOutlineClipboard, HiOutlineClipboardCheck } from 'react-icons/hi';\n\nimport JsonView from '@uiw/react-json-view';\nimport { lightTheme } from '@uiw/react-json-view/light';\nimport { vscodeTheme } from '@uiw/react-json-view/vscode';\nimport cn from 'classnames';\n\nimport { Button } from '../Button';\n\n/**\n * returns the value (JSON string or object) as object\n */\nconst getValue = (value: string | object) => {\n if (typeof value === 'string') {\n return JSON.parse(value);\n }\n if (typeof value === 'object') {\n return value;\n }\n throw new Error(`${typeof value} can not be visualized`);\n};\n\nexport interface JsonProps {\n /** CSS class name */\n className?: string | string[] | null;\n /** When set to true, all nodes will be collapsed by default. Use an integer value to collapse at a particular depth. */\n collapsed?: boolean | number;\n /** Object to be visualized JSON string or object */\n value: string | object;\n}\n\n/**\n * Json renderer based on [react-json-view](https://mac-s-g.github.io/react-json-view/demo/dist/)\n */\nconst Json = ({ className = null, collapsed = false, value }: JsonProps) => {\n const isDarkMode = document.body.classList.contains('dark');\n\n let content: ReactNode = null;\n let error: ReactNode = null;\n\n const [showDetails, setShowDetails] = useState(false);\n\n try {\n content = (\n <JsonView\n className=\"pr-5\"\n collapsed={collapsed}\n displayDataTypes={false}\n style={{\n ...(isDarkMode ? vscodeTheme : lightTheme),\n backgroundColor: 'unset',\n }}\n value={getValue(value)}\n >\n {/* FIX: overwrite Copied component to fix flickering copy button */}\n <JsonView.Copied\n render={({\n // @ts-expect-error this should be fine\n 'data-copied': copied,\n style,\n ...elmProps\n }) => {\n const elmClasses = cn(\n elmProps.className,\n 'absolute -right-4 -top-[2px] h-4 w-4 !fill-transparent pl-1',\n { 'text-success': copied },\n );\n return (\n <span className=\"relative !ml-0 !h-[1em] !w-0\" style={style}>\n {copied ? (\n <HiOutlineClipboardCheck\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...elmProps}\n className={elmClasses}\n />\n ) : (\n // eslint-disable-next-line react/jsx-props-no-spreading\n <HiOutlineClipboard {...elmProps} className={elmClasses} />\n )}\n </span>\n );\n }}\n />\n </JsonView>\n );\n } catch (err) {\n error = (\n <div\n className=\"mb-4 flex flex-col items-center rounded-lg border border-danger bg-danger-50 p-4 text-sm text-danger\"\n role=\"alert\"\n >\n <div className=\"flex w-full justify-between gap-6\">\n <div className=\"flex items-center\">\n <FaTimesCircle className=\"mr-2\" />\n <span className=\"font-medium\">Failed to parse JSON data</span>\n </div>\n <Button\n color=\"danger\"\n size=\"sm\"\n variant=\"light\"\n onClick={() => setShowDetails(!showDetails)}\n >\n {showDetails ? (\n <>\n <FaChevronUp /> Hide Details\n </>\n ) : (\n <>\n <FaChevronDown /> Show Details\n </>\n )}\n </Button>\n </div>\n {showDetails && (\n <div className=\"mt-4 w-full text-left\">\n <div>\n <strong>Error:</strong>\n <pre>\n {/* @ts-expect-error is ok */}\n {err?.name}: {err?.message}\n </pre>\n </div>\n <div className=\"mt-4\">\n <strong>Data:</strong>\n <pre>\n {typeof value !== 'string'\n ? JSON.stringify(value, null, 2)\n : value}\n </pre>\n </div>\n </div>\n )}\n </div>\n );\n }\n return <div className={cn(className)}>{error || content}</div>;\n};\n\nexport default Json;\n","import Json from './Json';\n\nexport type { JsonProps } from './Json';\n\nexport { Json };\n\nexport default Json;\n"],"mappings":"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","names":["Json_default"]}