// extra variables that are used inside stories
const extraVariable = 1;
const MyCustomComponent = () => null

export default {
  title: 'Example/Button',
  component: Button,
  parameters: {
    scope: {
      // all variables that are used inside stories must be defined inside the scope
      Button,
      extraVariable,
      MyCustomComponent
    },
  },
} as ComponentMeta<typeof Button>;

export const Primary = (args) => {
  return (
    <MyCustomComponent> // <-- MyCustomComponent must be defined
      <Button {...args}> // <-- Button must be defined
        {extraVariable} // <-- extraVariable must be defined
      </Button>
    </MyCustomComponent>
  )
};

Primary.args = {
  primary: true,
  label: 'Button',
};