Cleaned up typing, DRY props with interface extension, fix persistent type errors in Storybook

Author: thomasmost

demo/package.json

@@ -20,7 +20,7 @@
 		"react-dom": "16.13.1",
 		"react-github-corner": "^2.3.0",
 		"react-scripts": "2.1.8",
-		"styled-components": "^6.0.5"
+		"styled-components": "^6.1.0"
 	},
 	"scripts": {
 		"start": "react-scripts start",

packages/gatsby-mdx/package.json

@@ -24,7 +24,7 @@
 		"react-code-blocks": "*",
 		"react-dom": "^16.11.0",
 		"react-helmet": "^5.2.0",
-		"styled-components": "^6.0.5",
+		"styled-components": "^6.1.0",
 		"styled-system": "^4.2.2"
 	},
 	"keywords": [

packages/react-code-blocks/package.json

@@ -69,7 +69,6 @@
     "@types/react": "^16.9.34",
     "@types/react-dom": "^16.9.7",
     "@types/react-syntax-highlighter": "^15.5.7",
-    "@types/styled-components": "^5.1.0",
     "enzyme": "^3.11.0",
     "react": "^16.13.1",
     "react-docgen-typescript-loader": "^3.7.2",
@@ -84,7 +83,7 @@
     "@babel/runtime": "^7.10.4",
     "@types/react-syntax-highlighter": "^15.5.7",
     "react-syntax-highlighter": "^15.5.0",
-    "styled-components": "^6.0.5",
+		"styled-components": "^6.1.0",
     "tslib": "^2.6.0"
   },
   "pnpm": {

packages/react-code-blocks/src/ThemedCode.tsx

@@ -1,4 +1,5 @@
 import { withTheme } from 'styled-components';
-import Code from './components/Code';
+import Code, { CodeProps } from './components/Code';
 
-export default withTheme(Code);
+// HELP WANTED: I don't understand why this forced typing is necessary for CopyBlock and Code, but not CodeBlock
+export default withTheme(Code) as (props: CodeProps) => JSX.Element;

packages/react-code-blocks/src/ThemedCopyBlock.tsx

@@ -1,3 +1,5 @@
 import { withTheme } from 'styled-components';
-import CopyBlock from './components/CopyBlock';
-export default withTheme(CopyBlock);
+import CopyBlock, { CopyBlockProps } from './components/CopyBlock';
+
+// HELP WANTED: I don't understand why this forced typing is necessary for CopyBlock and Code, but not CodeBlock
+export default withTheme(CopyBlock) as (props: CopyBlockProps) => JSX.Element;

packages/react-code-blocks/src/components/Code.tsx

@@ -12,24 +12,24 @@ export interface CodeProps {
   /** The language in which the code is written. [See LANGUAGES.md](https://github.com/rajinwonderland/react-code-blocks/blob/master/LANGUAGES.md) */
   language: string;
   /** The style object that will be combined with the top level style on the pre tag, styles here will overwrite earlier styles. */
-  customStyle?: {};
+  customStyle?: Record<string,string>;
 
   /** The style object to apply to the container that shows line number */
   lineNumberContainerStyle?: {};
 
   /** The element or custom react component to use in place of the default span tag */
-  preTag: keyof JSX.IntrinsicElements | React.ComponentType<any> | undefined;
+  preTag?: keyof JSX.IntrinsicElements | React.ComponentType<any> | undefined;
   /** Indicates whether or not to show line numbers */
-  showLineNumbers: boolean;
+  showLineNumbers?: boolean;
   /**For choosing starting line**/
-  startingLineNumber :number;
+  startingLineNumber?: number;
   /** The code to be formatted */
   text: string;
   /** A custom theme to be applied, implements the `CodeBlockTheme` interface. You can also pass pass a precomposed theme into here. For available themes. [See THEMES.md](https://github.com/rajinwonderland/react-code-blocks/blob/master/THEMES.md) */
   theme?: Theme;
 
   /** If true, wrap long lines */
-  wrapLongLines: boolean;
+  wrapLongLines?: boolean;
 
   /**
    * Lines to highlight comma delimited.
@@ -39,7 +39,7 @@ export interface CodeProps {
    * - To highlight a group of lines `highlight="1-5"`
    * - To highlight multiple groups `highlight="1-5,7,10,15-20"`
    */
-  highlight: string;
+  highlight?: string;
 }
 
 export default class Code extends PureComponent<CodeProps, {}> {
@@ -116,7 +116,7 @@ export default class Code extends PureComponent<CodeProps, {}> {
         {...props}
         // Wrap lines is needed to set styles on the line.
         // We use this to set opacity if highlight specific lines.
-        wrapLines={this.props.highlight.length > 0}
+        wrapLines={!!this.props.highlight}
         customStyle={this.props.customStyle}
         // Types are incorrect.
         // @ts-ignore

packages/react-code-blocks/src/components/CodeBlock.tsx

@@ -1,44 +1,14 @@
 import React, { PureComponent } from 'react';
 import { applyTheme } from '../utils/themeBuilder';
-import { Theme } from '../types';
-import Code from './Code';
+import Code, { CodeProps } from './Code';
 
-export interface CodeBlockProps {
-  /** The code to be formatted */
-  text: string;
-  /** The language in which the code is written. [See LANGUAGES.md](https://github.com/rajinwonderland/react-code-blocks/blob/master/LANGUAGES.md) */
-  language: string;
-  /** Indicates whether or not to show line numbers */
-  showLineNumbers?: boolean;
+type BaseProps = Omit<CodeProps, 'codeStyle' | 'preTag'>;
 
-  /**startingLineNumber - if showLineNumbers is enabled the line numbering will start from here.**/
-  startingLineNumber :number;
-
-  /** A custom theme to be applied, implements the `CodeBlockTheme` interface. You can also pass pass a precomposed theme into here. For available themes. [See THEMES.md](https://github.com/rajinwonderland/react-code-blocks/blob/master/THEMES.md) */
-  theme?: Theme;
-  /** The element or custom react component to use in place of the default `span` tag */
-  lineNumberContainerStyle?: {};
+export interface CodeBlockProps extends BaseProps {
   /** The style object to apply to the `CodeBlock` text directly i.e `fontSize` and such */
-
   codeBlockStyle?: {};
   /** The style object that accesses the style parameter on the `codeTagProps` property on the `Code` component */
   codeContainerStyle?: {};
-
-  /** The style object that will be combined with the top level style on the pre tag, styles here will overwrite earlier styles. */
-  customStyle?: {};
-
-  /** If true, wrap long lines */
-  wrapLongLines: boolean;
-
-  /**
-   * Lines to highlight comma delimited.
-   * Example uses:
-
-   * - To highlight one line `highlight="3"`
-   * - To highlight a group of lines `highlight="1-5"`
-   * - To highlight multiple groups `highlight="1-5,7,10,15-20"`
-   */
-  highlight?: string;
 }
 
 const LANGUAGE_FALLBACK = 'text';

packages/react-code-blocks/src/components/CopyBlock.tsx

@@ -1,37 +1,18 @@
 import React, { useState } from 'react';
 import Code from './Code';
-import CodeBlock from './CodeBlock';
+import CodeBlock, { CodeBlockProps } from './CodeBlock';
 import Copy from './CopyIcon';
 import styled from 'styled-components';
 import { Theme } from '../types';
 import useClipboard from '../hooks/use-clipboard';
 
-export interface CopyBlockProps {
-  /** A custom theme to be applied, implements the `CodeBlockTheme` interface. You can also pass pass a precomposed theme into here. For available themes. [See THEMES.md](https://github.com/rajinwonderland/react-code-blocks/blob/master/THEMES.md) */
-  theme: Theme;
-
-  /** The code to be formatted */
-  text: string;
-
-  /** If true, the component render a `CodeBlock` instead of a `Code` component */
-
-  codeBlock: boolean;
-
+export interface CopyBlockProps extends CodeBlockProps {
   /** This is a prop used internally by the `CopyBlock`'s button component to toggle the icon to a success icon */
-  copied: boolean;
-
-  /** If true, wrap long lines */
-  wrapLongLines: boolean;
-
+  copied?: boolean;
+  /** If true, the component render a `CodeBlock` instead of a `Code` component */
+  codeBlock?: boolean;
   /** The onCopy function is called if the copy icon is clicked. This enables you to add a custom message that the code block is copied. */
-  onCopy: (event: React.MouseEvent<HTMLButtonElement>) => void;
-
-  /** The language in which the code is written. [See LANGUAGES.md](https://github.com/rajinwonderland/react-code-blocks/blob/master/LANGUAGES.md) */
-
-  language: string;
-  customStyle?: {};
-  /** I know it's lazy, but I'll extend the interfaces later */
-  [x: string]: any;
+  onCopy?: (event: React.MouseEvent<HTMLButtonElement>) => void;
 }
 
 type CascadedProps = Partial<CopyBlockProps> & { theme: Theme };
@@ -76,9 +57,10 @@ export default function CopyBlock({
   codeBlock = false,
   customStyle = {},
   onCopy,
+  copied: startingCopied,
   ...rest
 }: CopyBlockProps) {
-  const [copied, toggleCopy] = useState(false);
+  const [copied, toggleCopy] = useState(!!startingCopied);
   const { copy } = useClipboard();
   const handler = (event: React.MouseEvent<HTMLButtonElement>) => {
     copy(text);
@@ -96,7 +78,7 @@ export default function CopyBlock({
       )}
       <Button aria-label="Copy Code" type="button" onClick={handler} {...{ theme, copied }}>
         <Copy
-          color={copied ? theme.stringColor : theme.textColor}
+          color={copied ? theme?.stringColor : theme?.textColor}
           copied={copied}
           className="icon"
           size="16pt"