UI: Add stricter types to the language property of the SyntaxHighlighter

code/lib/codemod/src/transforms/__testfixtures__/mdx-to-csf/plaintext.input.mdx

@@ -1,3 +1,3 @@
 import { Story, Meta } from '@storybook/addon-docs';
 
-<Story name="plaintext">Plain text</Story>;
+<Story name="text">Plain text</Story>;

code/lib/codemod/src/transforms/__testfixtures__/mdx-to-csf/plaintext.output.snapshot

@@ -6,6 +6,6 @@ export default {};
 export const Plaintext = () => 'Plain text';
 
 Plaintext.story = {
-  name: 'plaintext',
+  name: 'text',
 };"
 `;

code/ui/blocks/src/blocks/mdx.tsx

@@ -1,6 +1,7 @@
 import type { FC, MouseEvent, PropsWithChildren, SyntheticEvent } from 'react';
 import React, { useContext } from 'react';
 import { NAVIGATE_URL } from '@storybook/core-events';
+import type { SupportedLanguage } from '@storybook/components';
 import { Code, components, nameSpaceClassNames } from '@storybook/components';
 import { global } from '@storybook/global';
 import { styled } from '@storybook/theming';
@@ -48,7 +49,7 @@ export const CodeOrSourceMdx: FC<PropsWithChildren<CodeOrSourceMdxProps>> = ({
   const language = className && className.split('-');
   return (
     <Source
-      language={(language && language[1]) || 'plaintext'}
+      language={((language && language[1]) as SupportedLanguage) || 'text'}
       format={false}
       code={children as string}
       {...rest}

code/ui/blocks/src/components/Source.tsx

@@ -9,8 +9,8 @@ import {
   useTheme,
 } from '@storybook/theming';
 
+import type { SupportedLanguage, SyntaxHighlighterProps } from '@storybook/components';
 import { SyntaxHighlighter } from '@storybook/components';
-import type { SyntaxHighlighterProps } from '@storybook/components';
 import { EmptyBlock } from './EmptyBlock';
 
 const StyledSyntaxHighlighter: React.FunctionComponent<SyntaxHighlighterProps> = styled(
@@ -38,7 +38,7 @@ export interface SourceCodeProps {
   /**
    * The language the syntax highlighter uses for your story’s code
    */
-  language?: string;
+  language?: SupportedLanguage;
   /**
    * Use this to override the content of the source block.
    */

code/ui/components/src/components/syntaxhighlighter/syntaxhighlighter-types.ts

@@ -1,5 +1,6 @@
 import type { BuiltInParserName } from 'prettier';
 import type { ReactNode } from 'react';
+import type { supportedLanguages } from './syntaxhighlighter';
 
 export interface SyntaxHighlighterRendererProps {
   rows: any[];
@@ -26,11 +27,14 @@ export type SyntaxHighlighterFormatTypes = boolean | 'dedent' | BuiltInParserNam
 // the reason these a COPIED is the types for this package are defining modules by filename
 // which will not match one we've localized type-definitions
 type LineTagPropsFunction = (lineNumber: number) => React.HTMLProps<HTMLElement>;
+
+export type SupportedLanguage = 'text' | keyof typeof supportedLanguages;
+
 export interface SyntaxHighlighterBaseProps {
   children?: React.ReactNode;
   codeTagProps?: React.HTMLProps<HTMLElement>;
   customStyle?: any;
-  language?: string;
+  language?: SupportedLanguage;
   lineNumberStyle?: any;
   lineProps?: LineTagPropsFunction | React.HTMLProps<HTMLElement>;
   showLineNumbers?: boolean;

code/ui/components/src/components/syntaxhighlighter/syntaxhighlighter.tsx

@@ -33,17 +33,23 @@ import type {
 
 const { navigator, document, window: globalWindow } = global;
 
-ReactSyntaxHighlighter.registerLanguage('jsextra', jsExtras);
-ReactSyntaxHighlighter.registerLanguage('jsx', jsx);
-ReactSyntaxHighlighter.registerLanguage('json', json);
-ReactSyntaxHighlighter.registerLanguage('yml', yml);
-ReactSyntaxHighlighter.registerLanguage('md', md);
-ReactSyntaxHighlighter.registerLanguage('bash', bash);
-ReactSyntaxHighlighter.registerLanguage('css', css);
-ReactSyntaxHighlighter.registerLanguage('html', html);
-ReactSyntaxHighlighter.registerLanguage('tsx', tsx);
-ReactSyntaxHighlighter.registerLanguage('typescript', typescript);
-ReactSyntaxHighlighter.registerLanguage('graphql', graphql);
+export const supportedLanguages = {
+  jsextra: jsExtras,
+  jsx,
+  json,
+  yml,
+  md,
+  bash,
+  css,
+  html,
+  tsx,
+  typescript,
+  graphql,
+};
+
+Object.entries(supportedLanguages).forEach(([key, val]) => {
+  ReactSyntaxHighlighter.registerLanguage(key, val);
+});
 
 const themedSyntax = memoize(2)((theme) =>
   Object.entries(theme.code || {}).reduce((acc, [key, val]) => ({ ...acc, [`* .${key}`]: val }), {})

code/ui/components/src/components/typography/elements/Code.tsx

@@ -4,6 +4,7 @@ import React, { Children } from 'react';
 import { SyntaxHighlighter } from '../../syntaxhighlighter/syntaxhighlighter';
 import { isReactChildString } from '../lib/isReactChildString';
 import { codeCommon } from '../lib/common';
+import type { SupportedLanguage } from '../../syntaxhighlighter/syntaxhighlighter-types';
 
 const isInlineCodeRegex = /[\n\r]/g;
 
@@ -60,7 +61,7 @@ export const Code = ({
     <StyledSyntaxHighlighter
       bordered
       copyable
-      language={language?.[1] ?? 'plaintext'}
+      language={(language?.[1] as SupportedLanguage) ?? 'text'}
       format={false}
       {...props}
     >

code/ui/components/src/index.ts

@@ -35,6 +35,7 @@ export type {
   SyntaxHighlighterFormatTypes,
   SyntaxHighlighterProps,
   SyntaxHighlighterRendererProps,
+  SupportedLanguage,
 } from './components/syntaxhighlighter/syntaxhighlighter-types';
 export { SyntaxHighlighter } from './components/syntaxhighlighter/lazy-syntaxhighlighter';
 export { createCopyToClipboardFunction } from './components/syntaxhighlighter/syntaxhighlighter';