import React from 'react';
import { storiesOf as storybookStoriesOf } from '@storybook/react';
import { StylesProvider } from '@material-ui/styles';

const generateClassName = (rule, styleSheet) => `${styleSheet.options.classNamePrefix}-${rule.key}`;

export default function storiesOf(kind, module) {
  let stories = storybookStoriesOf(kind, module)
  let _add = stories.add
  //add: (storyName: string, storyFn: StoryFn<StoryFnReturnType>, parameters?: Parameters) => StoryApi<StoryFnReturnType>;
  stories.add = (storyName, storyFn, parameters) =>
    _add(storyName, () => (
      <StylesProvider generateClassName={generateClassName}>
        {storyFn()}
      </StylesProvider>
    ), parameters)

  return stories
}