Story function not found {} undefined

[cescoferraro]

Hi! Thanks for the amzing library.

I am having some issues implementing this on a project I currently working on.

// .storybook/src/stories/test.stories.tsx

import React from "react";

export default {
  title: "Storybook Controls",
};

export const controlsStory = ({ disabled, text }) => (
  <button disabled={disabled}>
    {text}
  </button>
);

controlsStory.story = {
  controls: {
    disabled: { type: 'boolean', value: false },
    text: { type: 'text', value: 'Hello Storybook' },
  }
}

module.exports = {
  addons: ['@storybook/addon-docs', '@component-controls/storybook'],
}


// .storybook/config.js

import { configure } from '@storybook/react';
// automatically import all files ending in *.stories.tsx
configure(require.context('./src/stories', true, /\.stories\.tsx?$/), module);


// .storybook/main.js
module.exports = {
  addons: ['@storybook/addon-docs', '@component-controls/storybook'],
}



// .storybook/webpack.config.js

module.exports = ({ config }) => {
  config.module.rules.push({
    test: /\.(ts|tsx)$/,
    loader: require.resolve('babel-loader'),
    options: {
      presets: [require.resolve('babel-preset-react-app')],
    },
  });

  config.resolve.extensions.push('.ts', '.tsx');
  return config;
};

[atanasster]

Thanks @cescoferraro - what version of storybook are you using? Currently trying the support v6rc.

If possible, i would recommend using the gatsby or nextjs versions becuase of performance reasons: https://component-controls.com/tutorial/getting-started/gatsby

[cescoferraro]

@atanasster i am using v5. :/
but it is a new next.js project.
was having issues upgrading to v6.
will give it a try again and report back

[atanasster]

Thanks - pls let me know. In the meantime i will also try to get the v5support up to speed if possible - v6 and v5 are getting further apart unfortunately.

Check my performance article as well, storybook doc sites are not performing very well in production: https://component-controls.com/blogs/gatsby-vs-nextjs-vs-storybook

[cescoferraro]

@atanasster

[cescoferraro]

but maybe

WARN We found no files matching any of the following globs:
WARN 
WARN ./**/*.stories.(tsx|mdx)
WARN 
WARN Maybe your glob was invalid?
WARN see: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#correct-globs-in-mainjs

[atanasster]

@cescoferraro - those seem all storybook errors. Do you have all your storybook and associated addons upgraded to 6?

[cescoferraro]

@atanasster I am not using any addon.
all I am doing is
yarn add --exact --dev @storybook/react@6
Am I missing something?

my main.js looks like

module.exports = {
  stories: ['./**/*.stories.@(ts|tsx)']
}

[cescoferraro]

running
npx sb@next upgrade --prerelease
leds to the same behaviour

[atanasster]

@cescoferraro - not sure how it works the way you are installing. For me, I just add "@storybook/react": "next",

On storybook 5, I found the incompatibility with global decorators - they are not exported the way they are exported in v6 and I am trying to find a way to cover both versions. I will post once I have some news. Are you using decorators in your preview.js config file?

Do you have github repo that I can try and make sure everything works?

[atanasster]

@cescoferraro - I got a workaround for storybook 5 and have downgraded one of my projects to sb5 for testing:

1. You need to declare all global decorators in a runtime.js configuration file (this is so component-controls can read it in a sb5 environment):
   https://github.com/atanasster/grommet-controls/blob/master/.storybook/runtime.js

2. link to live site https://atanasster.github.io/grommet-controls/?path=/page/controls-controls-avatar--main

[atanasster]

I uploaded a screencast on youtube, with proof it's under storybook 5 :)

https://twitter.com/atanasster/status/1285735535365980169

[atanasster]

@cescoferraro - I looked again at your initial post and it seems I have overcomplicated the issue with global decorators etc. Sorry about that - I was running errands during the day and It turns out just some of your storybook setups were a bit older-style ie require. context style loading of stories, which is not supported by component-controls. Also, you don't need the addon-docs if you are using component-controls.

So here is a repo with storybook 5 that roughly replicates your setup from the initial post: https://github.com/atanasster/storybook-5-controls-starter
Live demo: https://storybook-5-controls-starter.netlify.app/?path=/page/storybook-controls--controls-story

[cescoferraro]

@atanasster I finally managed to upgrade do version 6
but rc13 breaks things for me. i got it to work with rc0.
but did not really try anything else.

anyways, the storybook get stuck somewhy. https://5f17c105f82a080022345e52-vobmerjtwh.chromatic.com/?path=/story/checkoutpagelayout--full-checkout-cart

will try downgrading to version 5. and use the same config as your starter

[atanasster]

@cescoferraro the v6 rc are not very stable for me either. Also 6 is so far a bit slower than 5.

Let me know your progress so i can close this issue as soon as you are set up.

[cescoferraro]

@atanasster YAY! its working now!

[cescoferraro]

https://5f17c105f82a080022345e52-sojosmbqxn.chromatic.com/?path=/page/checkoutsummary--summary-component

[cescoferraro]

@atanasster one more thing.
where can I find docs about the the controls I can use

[cescoferraro]

is the a image field? it would be so cool if I could randomize the images on my components

[cescoferraro]

thanks for your support @atanasster

[atanasster]

Yes you can randomize images - check the video on my twitter post.

Here is a post on controls and it has sole more links inside https://component-controls.com/blogs/introduction-to-controls

Documentation is still wip so let me know if you miss some info - create a new issue.