Components: Add graphql support to SyntaxHighlighter

[brendanrygus]

Background

I am currently working on an addon to display metadata about Apollo-connected components, building on the approach referenced in these docs: https://storybook.js.org/docs/react/workflows/build-pages-with-storybook#mocking-providers

This add-on leverages the SyntaxHighlighter Storybook component, but graphql highlighting is not exposed through the component library. As closely coupled Graphql integration becomes more common in React component development, it would be nice to treat this as a first-class language option.

(No issue, but I can file one if this requires further discussion)

What I did

• Add graphql syntax highlighting to Storybook SyntaxHighlighter component
• Add new Story example

How to test

• yarn storybook
• Navigate to new Story example under Basics -> SyntaxHighlighter
• Or directly: http://localhost:9011/?path=/story/basics-syntaxhighlighter--graphql

[shilman]

Is there any associated documentation that needs to be updated?

[brendanrygus]

@shilman Thanks for checking in on this, I could have been more explicit in the PR description.
I searched around the codebase and didn't see any additional documentation around the SyntaxHighlighter component specifically - I assumed the Stories for the Storybook components were meant to be self-documenting.

The language prop for the component is loosely typed and will accept any string, so it will also not require a matching update:

export interface SyntaxHighlighterProps {
  language: string;
  copyable?: boolean;
  bordered?: boolean;
  padded?: boolean;
  format?: boolean;
  className?: string;
  renderer?: (props: SyntaxHighlighterRendererProps) => React.ReactNode;
}

If there are any examples in the repo that I missed, or there is output from the failing Docs (Storybook) — TeamCity build failed step to address, I'd be happy to make a fix.