Is it impossible to update view when I change nested object?

[remigailard80]

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.

[remigailard80]

oh, sorry

Prerequesite: Your components need to have JSON Schema files associated with them. Additionally schemas need to be dereferenced already, as $ref-resolution is not (a tested) part of this addon (yet? ... let us know in the issues if you need this).

Guess i have to use tools like https://github.com/APIDevTools/json-schema-ref-parser

[julrich]

Hey @remigailard80, exactly! That's the one we're using, too!

Not sure if this is immediately helpful to you, but this is what we're doing for our components:

/* eslint-disable import/no-dynamic-require */
const $RefParser = require('json-schema-ref-parser');
const merge = require('json-schema-merge-allof');
const { root } = require('./utils');

const { schemaResolver } = require(`${root}/scripts/schemaResolver`);

const schemaLoader = async (refParser, schemaPath) =>
  refParser.dereference(schemaPath, {
    resolve: {
      rm: {
        order: 1,
        ...schemaResolver,
      },
    },
  });

const dereference = async (schemaPath) => {
  const schema = await schemaLoader(new $RefParser(), schemaPath);
  return merge(schema, { ignoreAdditionalProperties: true });
};

module.exports = {
  dereference,
};

Let me know if this solves it for you! And if you have any other feedback, feel free to ping me (just create issues)! Always looking for ways to improve on the addon!

[julrich]

After having another look at our own example, I'm pretty sure there's something broken about the Array-handling, too! Will have a look at that! It's updating neither the component, nor the controls / args correctly in that case!

Works for activeNavId for example:

[remigailard80]

thank you for this nice stuff!

[remigailard80]

Guess pack of @kickstartds/core/lib/storybook/helpers caused errors.

When I change values on Json editor and saw it on console, the result look above.

But when i change the part

r = (e) =>
  Object.entries(e).reduce(
    (e, [t, n]) => (
      ((e) => "[object Object]" === Object.prototype.toString.call(e))(n) ||
      Array.isArray(n)
        ? Object.entries(r(n)).forEach(([n, r]) => {
            e[`${t}.${n}`] = r;
          })
        : (e[t] = n),
      e
    ),
    {}
  );

to

r = (e) => {
    return Object.entries(e).reduce((e, [t, n]) => {
          // e: reducer, t: key, n : value
        return (
          ((e) => "[object Object]" === Object.prototype.toString.call(e))(n) ||
          Array.isArray(n)
            ? (e[t] = n)
            : (e[t] = n),
          e
        );
    }, {});
  };

it works fine.

[remigailard80]

But strangely, when I reproduce same situation on https://github.com/remigailard80/storybook-addon-jsonschema/blob/main/stories/test.stories.jsx (in ~/storybook-addon-jsonschema/node_modules/@kickstartds/core/lib/storybook/helpers.js, manually edit helpers.js and run yarn install)

it didn't works fine, and on SchemaEditor.tsx, handleChange didn't works.

Although I'm not good at programming, I hope it helps a little bit.

[julrich]

Oh, it sure does! I wasn't actually aware that you were using the pack / unpack helpers, because these have some known gaps in them! The array not syncing back when being edited in the Monaco code editor is one such example, I think!

Do you use them for something specific? Because I think without those it probably should work! If that doesn't solve the problem, let me know! I'll have a look at your repository then!

[remigailard80]

I think I can organize the cases as follows.

On the above test case

adding test.stories.tsx to the cloned project of https://github.com/kickstartDS/storybook-addon-jsonschema

1. not modify ~/storybook-addon-jsonschema/node_modules/@kickstartds/core/lib/storybook/helpers.js and wrapping the args by pack => changing in object reflected on view (works fine)

   ex)
   Test.args = pack({
   title: "맛있는 고기예요",
   subTitle: "역삼동",
   price: 39000,
   counts: [
     {
       type: 3,
       value: 10,
       image: "",
     },
     {
       type: 2,
       value: 0,
       image: "",
     },
     {
       type: 1,
       value: 6,
       image: "",
     },
   ],
   image:
     "https://d1rb42tpk2uaws.cloudfront.net/origin/article/202006/ED9D54F7744525B5B5463915CF10F143D3FC2F128CE78703CE9CB7820C0CEB0F.jpg?q=82&s=300x300&t=crop",
   targetUri: "~~~~~~",
   publishedAt: 156789222,
   categoryId: 44,
   quickReportQuestion: {
     content: "구인구직 게시글인가요?",
     reportItemId: 63,
   },
   userId: 33,
   meta: {
     advertisement: {
       id: 1,
     },
   },
   }); 

   and other examples are wrapped by pack, too such as,

BoxHell.args = pack({
  height: "default",
  box: {
    enabled: true,
    horizontal: "left",
    vertical: "center",
    background: "light",
    headline: {
      level: "p",
      styleAs: "h2",
      align: "left",
      content: "Lorem Ipsum dolor",
      spaceAfter: "none",
      pageHeader: false
    },
    text: "Hic maxime sed eos non. Consequatur ut qui amet accusantium nesciunt.",
    link: {
      variant: "outline",
      fillAnimation: true,
    },
  },
  media: {
    mode: "image",
    image: {
      srcMobile: "https://picsum.photos/seed/kdsvisual/640/270",
      srcTablet: "https://picsum.photos/seed/kdsvisual/1280/540",
      srcDesktop: "https://picsum.photos/seed/kdsvisual/1920/810",
      indent: "none",
    },
  },
});

2. not modify ~/storybook-addon-jsonschema/node_modules/@kickstartds/core/lib/storybook/helpers.js and not wrapping the args by pack => changing in object not reflected on view (not works)

3. if modify ~/storybook-addon-jsonschema/node_modules/@kickstartds/core/lib/storybook/helpers.js to

r = (e) => {
    return Object.entries(e).reduce((e, [t, n]) => {
          // e: reducer, t: key, n : value
        return (
          ((e) => "[object Object]" === Object.prototype.toString.call(e))(n) ||
          Array.isArray(n)
            ? (e[t] = n)
            : (e[t] = n),
          e
        );
    }, {});
  };

not works neither wrapping case or not wrapping case.

In my project

my project means the project that uses @kickstartds/storybook-addon-jsonschema by yarn add @kickstartds/storybook-addon-jsonschema.

As you mentioned, wrapping the args by pack has no effect, so using pack method on my project is unnessessary, rather using pack caused bugs.

But changing ~/storybook-addon-jsonschema/node_modules/@kickstartds/core/lib/storybook/helpers.js to

r = (e) => {
    return Object.entries(e).reduce((e, [t, n]) => {
          // e: reducer, t: key, n : value
        return (
          ((e) => "[object Object]" === Object.prototype.toString.call(e))(n) ||
          Array.isArray(n)
            ? (e[t] = n)
            : (e[t] = n),
          e
        );
    }, {});
  };

has effects.

Conclusion : not wrapping the args by pack and modifying ~/storybook-addon-jsonschema/node_modules/@kickstartds/core/lib/storybook/helpers.js works.

[julrich]

Thanks a lot for the thorough analysis! Let me see if we can just change 3. That should work for you, then, right?

[remigailard80]

Yes! sorry for late reply.

[julrich]

Okay, I'll see to make that fix :)

[kenisteward]

@julrich WAs this ever fixed? I'm attempting to use this to format a storybook for a a complex dereferenced json schema based setup but whenever I try to change internal fields it doesn't end up working.

Doesn't work with simple objects or objects in arrays

[julrich]

Hey @kenisteward. I'll have to check in with a colleague of mine. But we did update this addon for Storybook 7 compatibility. Maybe we fixed something there!

@lmestel do you know? I'll have to re-read the issue convo myself, because it's been quite a while.

[julrich]

@kenisteward can you add which version you are currently on?

[kenisteward]

@julrich Looks like version 2.0.1 was resolved as a part of the npm install I used to get the lib

This shows as the currently marked latest on npm registry as well.

[lmestel]

Hi everyone 👋 we have decided to just remove the args transformation (pack and unpack) from the addon. This should solve your problems. We are currently testing the changes with some of our storybooks. If you like, feel free to do the same with the canaray release commented in https://github.com/kickstartDS/storybook-addon-jsonschema/pull/24. We have also updated the example storybook in this repo. The button story contains a minimal example without args transformation; the header story on the other hand shows the old behavior with pack and unpack. We would appreciate your feedback.

[julrich]

Let us know if anything remains, here. Happy to help the transition, if needed! Will close this in the near future, otherwise!

[kenisteward]

I'm sorry I'm just seeing these updates. Will update my stuff and get back to you

Thanks for your work!

On Wed, Apr 10, 2024, 7:43 AM Jonas Ulrich @.***> wrote:

Let us know if anything remains, here. Happy to help the transition, if needed! Will close this in the near future, otherwise!

— Reply to this email directly, view it on GitHub https://github.com/kickstartDS/storybook-addon-jsonschema/issues/16#issuecomment-2047442735, or unsubscribe https://github.com/notifications/unsubscribe-auth/ADB4XNNGJZU2W6QPDKZNI53Y4UXYTAVCNFSM5RIGUIMKU5DIOJSWCZC7NNSXTN2JONZXKZKDN5WW2ZLOOQ5TEMBUG42DIMRXGM2Q . You are receiving this because you were mentioned.Message ID: @.***>

[julrich]

@kenisteward no worries, and if there's something problematic... a new issue would probably be best anyways (could link this one, then).