@kit-data-manager/pid-component
Version:
The PID-Component is a web component that can be used to evaluate and display FAIR Digital Objects, PIDs, ORCiDs, and possibly other identifiers in a user-friendly way. It is easily extensible to support other identifier types.
351 lines (350 loc) • 10.3 kB
JavaScript
/*!
*
* Copyright 2024 Karlsruhe Institute of Technology.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* https://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/
const meta = {
title: 'Renderer/JSON Viewer',
component: 'json-viewer',
tags: ['autodocs'],
argTypes: {
data: {
description: 'The JSON data to display (string or object)',
control: 'object',
table: {
type: { summary: 'string | object' },
},
},
expanded: {
description: 'Whether all nodes should be expanded by default',
control: { type: 'boolean' },
table: {
defaultValue: { summary: 'false' },
type: { summary: 'boolean' },
},
},
rootName: {
description: 'The name of the root node',
control: { type: 'text' },
table: {
defaultValue: { summary: 'root' },
type: { summary: 'string' },
},
},
sortKeys: {
description: 'Whether to sort object keys alphabetically',
control: { type: 'boolean' },
table: {
defaultValue: { summary: 'false' },
type: { summary: 'boolean' },
},
},
theme: {
description: 'The color theme to use',
control: {
type: 'select',
options: ['light', 'dark'],
},
table: {
defaultValue: { summary: 'light' },
type: { summary: 'string' },
},
},
viewMode: {
description: 'The view mode to use (tree or code)',
control: {
type: 'select',
options: ['tree', 'code'],
},
table: {
defaultValue: { summary: 'tree' },
type: { summary: 'string' },
},
},
maxHeight: {
description: 'Maximum height of the viewer in pixels',
control: { type: 'number' },
table: {
type: { summary: 'number' },
},
},
expandAll: {
description: 'Whether to expand all nodes (alternative to expanded)',
control: { type: 'boolean' },
table: {
defaultValue: { summary: 'false' },
type: { summary: 'boolean' },
},
},
showLineNumbers: {
description: 'Whether to show line numbers in code view',
control: { type: 'boolean' },
table: {
defaultValue: { summary: 'true' },
type: { summary: 'boolean' },
},
},
},
args: {
data: {
string: 'Hello, world!',
number: 42,
boolean: true,
null: null,
array: [1, 2, 3],
object: {
a: 1,
b: 2,
c: 3,
nested: {
x: 'nested value',
y: [4, 5, 6],
},
},
},
expanded: false,
rootName: 'root',
sortKeys: false,
theme: 'light',
viewMode: 'tree',
maxHeight: 500,
expandAll: false,
showLineNumbers: true,
},
};
export default meta;
export const Default = {
render: args => {
const jsonData = typeof args.data === 'object' ? JSON.stringify(args.data) : args.data;
const jsonViewer = document.createElement('json-viewer');
jsonViewer.setAttribute('data', jsonData);
if (args.expanded) {
jsonViewer.setAttribute('expanded', '');
}
if (args.rootName) {
jsonViewer.setAttribute('root-name', args.rootName);
}
if (args.sortKeys) {
jsonViewer.setAttribute('sort-keys', '');
}
if (args.theme) {
jsonViewer.setAttribute('theme', args.theme);
}
if (args.viewMode) {
jsonViewer.setAttribute('view-mode', args.viewMode);
}
if (args.maxHeight) {
jsonViewer.setAttribute('max-height', args.maxHeight.toString());
}
if (args.expandAll) {
jsonViewer.setAttribute('expand-all', '');
}
if (args.showLineNumbers !== undefined) {
jsonViewer.setAttribute('show-line-numbers', args.showLineNumbers.toString());
}
const container = document.createElement('div');
container.className = 'p-4 border rounded';
container.appendChild(jsonViewer);
return container;
},
parameters: {
docs: {
source: {
code: `
<json-viewer
data='{"string":"Hello, world!","number":42,"boolean":true,"null":null,"array":[1,2,3],"object":{"a":1,"b":2,"c":3,"nested":{"x":"nested value","y":[4,5,6]}}}'
root-name="root"
theme="light"
view-mode="tree"
></json-viewer>
`,
},
},
},
};
export const ExpandedByDefault = {
args: {
expanded: true,
},
parameters: {
docs: {
source: {
code: `
<json-viewer
data='{"string":"Hello, world!","number":42,"boolean":true,"null":null,"array":[1,2,3],"object":{"a":1,"b":2,"c":3,"nested":{"x":"nested value","y":[4,5,6]}}}'
expanded
root-name="root"
theme="light"
></json-viewer>
`,
},
},
},
};
export const CustomRootName = {
args: {
rootName: 'config',
},
parameters: {
docs: {
source: {
code: `
<json-viewer
data='{"string":"Hello, world!","number":42,"boolean":true,"null":null,"array":[1,2,3],"object":{"a":1,"b":2,"c":3,"nested":{"x":"nested value","y":[4,5,6]}}}'
root-name="config"
theme="light"
></json-viewer>
`,
},
},
},
};
export const SortedKeys = {
args: {
sortKeys: true,
},
parameters: {
docs: {
source: {
code: `
<json-viewer
data='{"string":"Hello, world!","number":42,"boolean":true,"null":null,"array":[1,2,3],"object":{"a":1,"b":2,"c":3,"nested":{"x":"nested value","y":[4,5,6]}}}'
sort-keys
root-name="root"
theme="light"
></json-viewer>
`,
},
},
},
};
export const DarkTheme = {
args: {
theme: 'dark',
},
parameters: {
docs: {
source: {
code: `
<json-viewer
data='{"string":"Hello, world!","number":42,"boolean":true,"null":null,"array":[1,2,3],"object":{"a":1,"b":2,"c":3,"nested":{"x":"nested value","y":[4,5,6]}}}'
theme="dark"
root-name="root"
></json-viewer>
`,
},
},
},
};
export const CodeView = {
args: {
viewMode: 'code',
},
parameters: {
docs: {
source: {
code: `
<json-viewer
data='{"string":"Hello, world!","number":42,"boolean":true,"null":null,"array":[1,2,3],"object":{"a":1,"b":2,"c":3,"nested":{"x":"nested value","y":[4,5,6]}}}'
view-mode="code"
theme="light"
root-name="root"
></json-viewer>
`,
},
},
},
};
export const NoLineNumbers = {
args: {
viewMode: 'code',
showLineNumbers: false,
},
parameters: {
docs: {
source: {
code: `
<json-viewer
data='{"string":"Hello, world!","number":42,"boolean":true,"null":null,"array":[1,2,3],"object":{"a":1,"b":2,"c":3,"nested":{"x":"nested value","y":[4,5,6]}}}'
view-mode="code"
show-line-numbers="false"
theme="light"
root-name="root"
></json-viewer>
`,
},
},
},
};
export const ComplexData = {
args: {
data: {
id: '12345',
created: '2023-06-15T10:00:00Z',
user: {
id: 'user_789',
name: 'John Smith',
email: 'john@example.com',
preferences: {
theme: 'dark',
notifications: true,
timezone: 'America/New_York',
},
},
items: [
{
id: 'item_1',
name: 'Product A',
price: 19.99,
tags: ['electronics', 'sale'],
},
{
id: 'item_2',
name: 'Product B',
price: 29.99,
tags: ['home', 'new'],
},
{
id: 'item_3',
name: 'Product C',
price: 14.99,
tags: ['electronics', 'new'],
},
],
metadata: {
source: 'web',
processingTime: 125.4,
version: '1.0.3',
},
},
expanded: true,
rootName: 'order',
},
parameters: {
docs: {
source: {
code: `
<json-viewer
data='{"id":"12345","created":"2023-06-15T10:00:00Z","user":{"id":"user_789","name":"John Smith","email":"john@example.com","preferences":{"theme":"dark","notifications":true,"timezone":"America/New_York"}},"items":[{"id":"item_1","name":"Product A","price":19.99,"tags":["electronics","sale"]},{"id":"item_2","name":"Product B","price":29.99,"tags":["home","new"]},{"id":"item_3","name":"Product C","price":14.99,"tags":["electronics","new"]}],"metadata":{"source":"web","processingTime":125.4,"version":"1.0.3"}}'
expanded
root-name="order"
theme="light"
></json-viewer>
`,
},
},
},
};
//# sourceMappingURL=json-viewer.stories.js.map