Skip to content

Commit

Permalink
Cleaned up typing, DRY props with interface extension, fix persistent…
Browse files Browse the repository at this point in the history
… type errors in Storybook
  • Loading branch information
thomasmost committed Nov 6, 2023
1 parent f814492 commit c7183b1
Show file tree
Hide file tree
Showing 9 changed files with 58 additions and 169 deletions.
2 changes: 1 addition & 1 deletion demo/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
2 changes: 1 addition & 1 deletion packages/gatsby-mdx/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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": [
Expand Down
3 changes: 1 addition & 2 deletions packages/react-code-blocks/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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": {
Expand Down
5 changes: 3 additions & 2 deletions packages/react-code-blocks/src/ThemedCode.tsx
Original file line number Diff line number Diff line change
@@ -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;
6 changes: 4 additions & 2 deletions packages/react-code-blocks/src/ThemedCopyBlock.tsx
Original file line number Diff line number Diff line change
@@ -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;
14 changes: 7 additions & 7 deletions packages/react-code-blocks/src/components/Code.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand All @@ -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, {}> {
Expand Down Expand Up @@ -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
Expand Down
36 changes: 3 additions & 33 deletions packages/react-code-blocks/src/components/CodeBlock.tsx
Original file line number Diff line number Diff line change
@@ -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';
Expand Down
36 changes: 9 additions & 27 deletions packages/react-code-blocks/src/components/CopyBlock.tsx
Original file line number Diff line number Diff line change
@@ -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 };
Expand Down Expand Up @@ -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);
Expand All @@ -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"
Expand Down
Loading

0 comments on commit c7183b1

Please sign in to comment.