Displays associated JSON Schema documentation using a rich schema explorer interface, and adds a validating JSON Code Editor with semantic auto-complete to interact with your components, and copy configurations with ease.
Home Page: https://www.kickstartDS.com/docs/integration/storybook/schema
License: MIT License
Some stories still have german naming / wording as a part of them. This should all be replaced with english text!
The typings for @kickstartds/core (where helper.js is missing such types) done manually in src/typings.d.ts need to be improved. They are too lax / general right now.
See here: https://github.com/kickstartDS/storybook-addon-jsonschema/blob/main/src/typings.d.ts#L3-L8
https://www.kickstartds.com/storybook/?path=/story/base-header--default
in this example, when I change
"items": [
{
"label": "Sanity",
"href": "/sanity",
"id": "sanity"
},
{
"label": "Integrations",
"href": "/integrations",
"id": "integrations"
},
{
"label": "Blog",
"href": "/blog",
"id": "blog"
}
]
to
"items": [
{
"label": "ABC TEST",
"href": "/sanity",
"id": "sanity"
},
{
"label": "Integrations",
"href": "/integrations",
"id": "integrations"
},
{
"label": "Blog",
"href": "/blog",
"id": "blog"
}
]
it looks like there's not any changes.
{
"$schema": "http://json-schema.org/draft-07/schema#",
"$ref": "#/definitions/AdvertisementDataOverviewType",
"definitions": {
"AdvertisementOverviewViewType.Data.AsObject": {
"type": "object",
"properties": {
"title": {
"type": "string"
},
"subTitle": {
"type": "string"
},
"price": {
"type": "number"
},
"countsList": {
"type": "array",
"items": {
"$ref": "#/definitions/Count.AsObject"
}
},
"image": {
"type": "string"
},
"targetUri": {
"type": "string"
},
"publishedAt": {
"type": "number"
},
"categoryId": {
"type": "number"
},
"quickReportQuestion": {
"$ref": "#/definitions/QuickReportQuestion.AsObject"
},
"userId": {
"type": "number"
},
"meta": {
"$ref": "#/definitions/AdvertisementOverviewViewType.Meta.AsObject"
}
},
"required": [
"title",
"subTitle",
"price",
"countsList",
"image",
"targetUri",
"publishedAt",
"categoryId",
"userId"
],
"additionalProperties": false
},
"Count.AsObject": {
"type": "object",
"properties": {
"type": {
"$ref": "#/definitions/CountType"
},
"value": {
"type": "number"
},
"image": {
"type": "string"
}
},
"required": [
"type",
"value",
"image"
],
"additionalProperties": false
},
"CountType": {
"type": "number",
"enum": [
0,
1,
2,
3,
4,
5,
6,
7
]
},
"QuickReportQuestion.AsObject": {
"type": "object",
"properties": {
"content": {
"type": "string"
},
"reportItemId": {
"type": "number"
}
},
"required": [
"content",
"reportItemId"
],
"additionalProperties": false
},
"AdvertisementOverviewViewType.Meta.AsObject": {
"type": "object",
"properties": {
"advertisement": {
"$ref": "#/definitions/Advertisement.AsObject"
}
},
"additionalProperties": false
},
"Advertisement.AsObject": {
"type": "object",
"properties": {
"id": {
"type": "number"
}
},
"required": [
"id"
],
"additionalProperties": false
}
}
}
generated schema, and It looks like every ref objects read as anything.
We should add Circle CI jobs for automatic release (auto is already used as a part of the storybookjs/addon-kit) and publishing of the example Storybook on Netlify.
The deploy preview / configured url on Netlify can then be used for the Show me the demo page.
Currently it's next to impossible to read some of the text we display in the addon, when the Storybook itself is themed to be dark, e.g.:
We should either a) make this dynamic in the addon, or use the correct token contextually, or b) just remove custom theming, isolating the views and always displaying them in light mode
When trying to install this add-on to storybook, I am getting this error when running up or building
Module not found: Error: Can't resolve 'crypto' in ".../node_modules/@kickstartds/json-schema-viewer/dist"
There were actually several packages but by installing them in my project node_modules I was able to resolve most of them. However, it looks like this one needs to be polyfilled according to webpack
I am using webpack5, i have installed crypto-browserify and my storybook main looks like this:
const path = require('path');
const rootMain = require('../../../.storybook/main');
const toPath = (filePath) => path.join(process.cwd(), filePath);
module.exports = {
...rootMain,
typescript:{
check: false,
checkOptions: {},
reactDocgen: 'react-docgen-typescript',
reactDocgenTypescriptOptions: {
compilerOptions: {
allowSyntheticDefaultImports: false,
esModuleInterop: false,
}
// propFilter: (prop) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true),
},
},
core: {
...rootMain.core,
builder: 'webpack5',
enableCrashReports: true, // 👈 Appends the crash reports to the telemetry events
},
stories: [
...rootMain.stories,
'../src/app/**/*.stories.@(js|jsx|ts|tsx)',
'../src/app/**/*.stories.mdx',
],
staticDirs: [
"../src/assets",
"../src/public"
],
addons: [...rootMain.addons, '@nrwl/react/plugins/storybook', '@kickstartds/storybook-addon-jsonschema'],
webpackFinal: async (config, { configType }) => {
console.log('THIS IS THE STORYBOOK WEBPACK FINAL')
// apply any global webpack configs that might have been specified in .storybook/main.js
if (rootMain.webpackFinal)
config = await rootMain.webpackFinal(config, { configType });
// add your own webpack tweaks if needed
//added for material-ui theme font
config.module.rules.push({
test: /\.(woff(2)?|ttf|eot)(\?v=\d+\.\d+\.\d+)?$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'assets/'
}
}
]
});
const value = {
...config,
resolve: {
...config.resolve,
fallback: {
crypto: require.resolve('crypto-browserify')
},
alias: {
...config.resolve.alias,
'@emotion/core': toPath('node_modules/@emotion/react'),
'emotion-theming': toPath('node_modules/@emotion/react'),
},
},
};
console.log('THIS IS THE WEBPACK FINAL VALUE')
console.log(JSON.stringify(value, null, 2))
return value
},
}; The logs show that the fallback is added to the config.
Im wondering
Right now we just re-use the JSON Schema logo. Somewhat uncleanly hot-linking it, too (from here: https://opencollective-production.s3.us-west-1.amazonaws.com/1e445ca0-fca9-11e9-a830-c36c137aded5.png).
We should design a small addon icon with some kickstartDS flavour 🍋 added into the mix!
In the Controls panel you can reset the state of the story by clicking a small "Refresh"-Icon.
We should add something similar to the addon, to reset the state to its initial values. Handy if you're just tinkering with values, and don't feel like backtracking your changes made.
The package currently only declares a peer dependency React 16 and 17 so when installing for React 18 repos, I get this following error. Can a peer for React 18 be added? Thank you!
npm ERR! While resolving: XXXXXXXX
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR! dev react@"^18.2.0" from XXXXXXXX
npm ERR! packages/XXXXXXXX
npm ERR! XXXXXXXX
npm ERR! node_modules/XXXXXXXX
npm ERR! workspace packages/XXXXXXXX from the root project
npm ERR! 1 more (XXXXXXXX)
npm ERR! peer react@"^16.8.0 || ^17.0.0 || ^18.0.0" from @storybook/[email protected]
npm ERR! node_modules/@storybook/addons
npm ERR! peer @storybook/addons@"^6.3.6" from @kickstartds/[email protected]
npm ERR! node_modules/@kickstartds/storybook-addon-jsonschema
npm ERR! dev @kickstartds/storybook-addon-jsonschema@"^1.0.6" from [email protected]
npm ERR! XXXXXXXX
npm ERR! [email protected]
npm ERR! XXXXXXXX
npm ERR! 4 more (react-dom, @storybook/api, @storybook/components, @storybook/theming)
npm ERR!
Currently you can copy the JSON / YML example generated as part of the JSON Schema Explorer, but you can't actually copy the synchronized JSON Code Editor object, yet. You can just highlight and Ctrl+C, but it should additionally be possible to copy with mouse / browser clipboard integration.
See e.g.: https://www.npmjs.com/package/react-copy-to-clipboard
I generate a schema of this type,
export type ViewTypeReducerType =
AdvertisementOverviewViewType.AsObject
| ButtonTextViewType.AsObject
| FleaMarketOverviewViewType.AsObject
| EventOverviewViewType.AsObject
| GeneralBusinessOverviewViewType.AsObject
| GeneralOverviewViewType.AsObject
| GeneralProgressviewViewType.AsObject
| GeneralWatchOverviewViewType.AsObject
| ImageBannerViewType.AsObject
| NoticeOverviewViewType.AsObject
| PopupOverviewViewType.AsObject
| QuestionViewType.AsObject
| RegionCheckInViewType.AsObject
and generated stuff was
"ViewTypeReducerType": {
"anyOf": [
{
"type": "object",
"required": [
"type"
],
.....
, the anyOf of objects.
and generated result on storybook was,
is there any method to resolve anyof schema correctly?
Should contain a correct link to the page you're viewing currently.
Because of an incompatibility, this is currently not working with the 2.0.0 release of kickstartDS.
It's already mentioned in the README.md, but should also be called out explicitly as a part of the displayed addon panel.
Right now I've added the most basic screenshot of one component (Visual) in action.
We should demonstrate some more functionality, take inspiration here: https://github.com/UX-and-I/storybook-design-token
Add some kickstartDS flavour, too 🍋.
Sometimes, when editing the JSON in the JSON Code Editor, the component props / story args are not updated immediately.
You have to actively change from a non-validating state to a validating state to get a component re-render with the updated props / args.
Should link the Logo to our landing page.
For inspiration: https://meta.stackexchange.com/a/38917
Would ideally use MIT here, but definitely need to check the ramifications of using parts of Atlassians JSON Schema Viewer (https://github.com/atlassian-labs/json-schema-viewer).
They use Apache License 2.0 themselves: https://github.com/atlassian-labs/json-schema-viewer/blob/master/LICENSE
Think this means we will have to use at least Apache License 2.0 ourselves to be compliant. But I'll need to re-check!
LICENSE has to be added to package.json, too!
Currently we're only showing our Visual, should display some more to better show the range of the addon.
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.