import { storiesOf } from '@storybook/react-native';
import * as React from 'react';

import { StoryScreen, Story, UseCase } from '~/storybook/views';
import { color, palette } from '~/theme/colors';

import { Colors } from './colors';

const colorWithoutPalette = { ...color };
delete colorWithoutPalette.palette;

storiesOf('Colors', module)
  .addDecorator((fn) => <StoryScreen>{fn()}</StoryScreen>)
  .add('Palette', () => (
    <Story>
      <UseCase text="Palette" usage="Click on a color to see its information">
        <Colors colors={palette} />
      </UseCase>
    </Story>
  ))
  .add('Colors', () => (
    <Story>
      <UseCase text="Color" usage="Click on a color to see its information">
        <Colors colors={colorWithoutPalette} />
      </UseCase>
    </Story>
  ));
