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

remigailard80 · 2022-03-21T16:21:09Z

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.

The text was updated successfully, but these errors were encountered:

remigailard80 · 2022-03-21T17:27:38Z

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 · 2022-03-21T17:40:53Z

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 · 2022-03-21T17:52:00Z

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 · 2022-03-22T03:07:19Z

thank you for this nice stuff!

remigailard80 · 2022-03-23T07:01:28Z

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 · 2022-03-23T07:05:24Z

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 · 2022-03-23T07:40:32Z

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 · 2022-03-23T13:58:32Z

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

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",
    },
  },
});

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)
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 · 2022-03-23T17:35:50Z

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

remigailard80 · 2022-03-25T15:40:37Z

Yes! sorry for late reply.

julrich · 2022-03-25T18:19:46Z

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

kenisteward · 2024-02-21T08:42:17Z

@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 · 2024-02-21T08:52:53Z

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 · 2024-02-21T11:14:57Z

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

kenisteward · 2024-02-21T17:33:05Z

@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 · 2024-02-27T11:57:19Z

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 #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 · 2024-04-10T12:43:31Z

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

kenisteward · 2024-04-13T06:55:47Z

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 <#16 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ADB4XNNGJZU2W6QPDKZNI53Y4UXYTAVCNFSM5RIGUIMKU5DIOJSWCZC7NNSXTN2JONZXKZKDN5WW2ZLOOQ5TEMBUG42DIMRXGM2Q> . You are receiving this because you were mentioned.Message ID: ***@***.***>

julrich · 2024-04-13T08:11:51Z

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

julrich self-assigned this Mar 21, 2022

julrich added the question Further information is requested label Mar 21, 2022

julrich added the bug Something isn't working label Mar 21, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

remigailard80 commented Mar 21, 2022 •

edited

Loading

remigailard80 commented Mar 21, 2022

julrich commented Mar 21, 2022

julrich commented Mar 21, 2022

remigailard80 commented Mar 22, 2022

remigailard80 commented Mar 23, 2022

remigailard80 commented Mar 23, 2022 •

edited

Loading

julrich commented Mar 23, 2022

remigailard80 commented Mar 23, 2022 •

edited

Loading

julrich commented Mar 23, 2022

remigailard80 commented Mar 25, 2022

julrich commented Mar 25, 2022

kenisteward commented Feb 21, 2024 •

edited

Loading

julrich commented Feb 21, 2024

julrich commented Feb 21, 2024

kenisteward commented Feb 21, 2024

lmestel commented Feb 27, 2024 •

edited

Loading

julrich commented Apr 10, 2024

kenisteward commented Apr 13, 2024 via email

julrich commented Apr 13, 2024

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

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

Comments

remigailard80 commented Mar 21, 2022 • edited Loading

remigailard80 commented Mar 21, 2022

julrich commented Mar 21, 2022

julrich commented Mar 21, 2022

remigailard80 commented Mar 22, 2022

remigailard80 commented Mar 23, 2022

remigailard80 commented Mar 23, 2022 • edited Loading

julrich commented Mar 23, 2022

remigailard80 commented Mar 23, 2022 • edited Loading

On the above test case

In my project

julrich commented Mar 23, 2022

remigailard80 commented Mar 25, 2022

julrich commented Mar 25, 2022

kenisteward commented Feb 21, 2024 • edited Loading

julrich commented Feb 21, 2024

julrich commented Feb 21, 2024

kenisteward commented Feb 21, 2024

lmestel commented Feb 27, 2024 • edited Loading

julrich commented Apr 10, 2024

kenisteward commented Apr 13, 2024 via email

julrich commented Apr 13, 2024

remigailard80 commented Mar 21, 2022 •

edited

Loading

remigailard80 commented Mar 23, 2022 •

edited

Loading

remigailard80 commented Mar 23, 2022 •

edited

Loading

kenisteward commented Feb 21, 2024 •

edited

Loading

lmestel commented Feb 27, 2024 •

edited

Loading