@focus-reactive/graphql-content-layer/dist/content.stories.js

[](https://badge.fury.io/js/%40focus-reactive%2Fgraphql-content-layer) # GitNation GraphQL Content Layer

const React = require('react');

const ReactJson = require('react-json-view').default;

const {
  QueryParams,
  withGraphCMS
} = require('@focus-reactive/storybook-addon-graphcms');

const {
  storiesOf
} = require('@storybook/react');

const {
  withThemes
} = require('@react-theming/storybook-addon');

const {
  credentials
  /* conferenceTitle, eventYear */

} = require('./config');

const {
  queriesData,
  getContent
} = require('./index');

const ThemeProvider = ({
  children
}) => React.createElement(React.Fragment, null, children);

const AwaitForData = ({
  content
}) => {
  if (!content) return 'Loading data from GraphCMS';
  return React.createElement(ReactJson, {
    src: content,
    name: "content",
    collapsed: 2
  });
};

const TagColor = ({
  title,
  tag
}) => React.createElement("div", {
  style: {
    margin: 16,
    padding: 8,
    color: tag.color,
    backgroundColor: tag.tagBG,
    display: 'flex',
    justifyContent: 'space-between',
    fontSize: 18,
    fontFamily: 'sans-serif'
  }
}, React.createElement("b", null, title), React.createElement("span", null, `[color: ${tag.color}, bg: ${tag.tagBG}]`));

const passConferenceSettings = async conferenceSettings => {
  const {
    conferenceTitle,
    eventYear
  } = conferenceSettings;
  const content = await getContent(conferenceSettings);
  const {
    tagColors
  } = content.conferenceSettings;
  storiesOf('Content Layer', module).addDecorator(withThemes(ThemeProvider, [tagColors])).add('content', () => React.createElement(AwaitForData, {
    content: content
  })).add('tag colors', () => {
    const tags = Object.keys(tagColors);
    return React.createElement("div", null, tags.map(tag => React.createElement(TagColor, {
      key: tag,
      title: tag,
      tag: tagColors[tag]
    })));
  });
  const cmsStories = storiesOf('CMS Layer', module).addDecorator(withGraphCMS(credentials));
  queriesData.forEach(({
    queryPages,
    getData,
    story,
    vars
  }) => {
    cmsStories.add(story, () => null, QueryParams({
      name: story,
      query: queryPages,
      vars: {
        conferenceTitle,
        eventYear,
        ...vars
      },
      searchVars: {
        search: ''
      },
      getData,
      isConnected: true
    }));
  });
};

module.exports = {
  passConferenceSettings
};