Infinite loop with 401 errors about addon-designs HOT 10 CLOSED

🤯

Given the world's movement toward more-privacy-focused-internet, I'll add a section of the third-party cookie stuff to docs.

from addon-designs.

Think this is #92. Try moving the token down to the component and removing design:{} from parameters

from addon-designs.

Tried moving accessToken from .storybook/preview.js to MyComponent.stories.js, it didn't help.

from addon-designs.

This helped fix my issues. I noticed you had:

import { withDesign } from 'storybook-addon-designs';

export const parameters = {
  actions: { argTypesRegex: '^on[A-Z].*' },
  controls: { expanded: true },
  decorators: [withDesign],
  design: { accessToken: '<private-access-token>' },
};

Instead I put withDesign on my individual components (not globally set like this)

Working repro is:

export default {
  decorators: [withDesign],
  title: 'Buttons',
  component: PrimaryButton,
}

const Template: Story<unknown> = args => <PrimaryButton {...args} />;

export const Primary = Template.bind({});
Primary.args = {
  text: 'Button',
  type: 'primary',
  onPress: () => null,
  disabled: false,
  isInProgress: false,
  compact: false
};
Primary.parameters = {
  design: {
    url: 'designURL'
  }
};

export const PrimaryDisabled = Template.bind({});
PrimaryDisabled.args = {
  ...Primary.args,
  disabled: true
};
PrimaryDisabled.parameters = {
  design: {
    url: 'designURL'
  }
};

and with this my #92 and #95 were resolved

from addon-designs.

So it's impossible to set withDesign globally? That's unfortunate. I would rather prefer to have less boilerplate code.

from addon-designs.

You only have to set it on the default stories, so it's not too bad IMO

from addon-designs.

I just tried this:

.storybook/preview.js

export const parameters = {
  actions: { argTypesRegex: '^on[A-Z].*' },
  controls: { expanded: true },
};

MyComponent.stories.js

import { withDesign } from 'storybook-addon-designs';

export default {
  title: 'MyComponent',
  decorators: [withDesign],
  argTypes: {
    // ...
  },
};

// ...

export const MyComponent = Template.bind({});

MyComponent.parameters = {
  design: {
    type: 'figma',
    url: 'https://www.figma.com/file/...',
    accessToken: '<private-access-token>',
  },
};

It did not help.

from addon-designs.

At first, this is nothing related to #92, as this issue is for type: "figma" and the Figma Live Embed Kit is loaded successfully. Also, the accessToken property is for type: "experimental-figspec", not type: "figma". Only type and url are required properties even if your file is private as loaded iframe takes care of the authentication process.

These errors are results of Figma Live Embed Kit (= scripts inside <iframe>) calling their internal(?) API and the API returns HTTP 401. From my experience, this is probably due to their API outage or session problem. If the latter, clearing cache/using private browsing/using a different browser would solve the problem.

If you believe the cause is at the addon instead of at the loaded iframe content, please provide an actual and expected behavior, not just errors.

from addon-designs.

At first, this is nothing related to #92, as this issue is for type: "figma" and the Figma Live Embed Kit is loaded successfully. Also, the accessToken property is for type: "experimental-figspec", not type: "figma". Only type and url are required properties even if your file is private as loaded iframe takes care of the authentication process.

That is very valuable information! It was not clear when I was reading the docs. I would appreciate it if you could add this information to the docs.

I figured it out. The 401 errors and the infinite loop were caused by the fact that I have the "Block third-party cookies" feature enabled in Google Chrome:

I added my Storybook host to exceptions and now it works:

Thank you!

from addon-designs.

Worth noting that this doesn't work with Safari still, but that's because Safari has a bit of an all or nothing approach to privacy so it's the browser not the plugin.

from addon-designs.