From ee983d69d433afe0c3128e9464b3a1db2c2b7504 Mon Sep 17 00:00:00 2001 From: Sergei Maertens Date: Mon, 12 Feb 2024 23:30:12 +0100 Subject: [PATCH] :recycle: Split legacy MDX stories into CSF + MDX --- .storybook/main.ts | 2 +- package-lock.json | 1 + package.json | 1 + ...{0001-intro.stories.mdx => 0001-intro.mdx} | 2 +- src/ColorPreview.mdx | 34 ++++++++ src/ColorPreview.stories.mdx | 46 ---------- src/ColorPreview.stories.ts | 43 ++++++++++ src/ColorPreview.tsx | 2 +- src/TokenEditor.mdx | 27 ++++++ src/TokenEditor.stories.mdx | 86 ------------------- src/TokenEditor.stories.tsx | 82 ++++++++++++++++++ src/TokenEditor.tsx | 4 +- src/TokenFilter.mdx | 12 +++ src/TokenFilter.stories.mdx | 21 ----- src/TokenFilter.stories.ts | 22 +++++ src/TokenFilter.tsx | 2 +- src/TokenRow.mdx | 31 +++++++ src/TokenRow.stories.mdx | 75 ---------------- src/TokenRow.stories.tsx | 70 +++++++++++++++ src/TokenValueInput.tsx | 2 +- src/TokensBlock.mdx | 14 +++ src/TokensBlock.stories.mdx | 42 --------- src/TokensBlock.stories.tsx | 28 ++++++ src/TokensBlock.tsx | 2 +- src/TokensTable.mdx | 33 +++++++ src/TokensTable.stories.mdx | 81 ----------------- src/TokensTable.stories.ts | 51 +++++++++++ src/TokensTable.tsx | 2 +- tsconfig.json | 2 +- 29 files changed, 459 insertions(+), 361 deletions(-) rename src/{0001-intro.stories.mdx => 0001-intro.mdx} (98%) create mode 100644 src/ColorPreview.mdx delete mode 100644 src/ColorPreview.stories.mdx create mode 100644 src/ColorPreview.stories.ts create mode 100644 src/TokenEditor.mdx delete mode 100644 src/TokenEditor.stories.mdx create mode 100644 src/TokenEditor.stories.tsx create mode 100644 src/TokenFilter.mdx delete mode 100644 src/TokenFilter.stories.mdx create mode 100644 src/TokenFilter.stories.ts create mode 100644 src/TokenRow.mdx delete mode 100644 src/TokenRow.stories.mdx create mode 100644 src/TokenRow.stories.tsx create mode 100644 src/TokensBlock.mdx delete mode 100644 src/TokensBlock.stories.mdx create mode 100644 src/TokensBlock.stories.tsx create mode 100644 src/TokensTable.mdx delete mode 100644 src/TokensTable.stories.mdx create mode 100644 src/TokensTable.stories.ts diff --git a/.storybook/main.ts b/.storybook/main.ts index 0d90ace..ed0701b 100644 --- a/.storybook/main.ts +++ b/.storybook/main.ts @@ -9,7 +9,7 @@ const config: StorybookConfig = { name: '@storybook/react-webpack5', options: {}, }, - stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'], + stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'], addons: [ '@storybook/addon-links', '@storybook/addon-essentials', diff --git a/package-lock.json b/package-lock.json index cd184fc..59665fa 100644 --- a/package-lock.json +++ b/package-lock.json @@ -22,6 +22,7 @@ "@storybook/addon-essentials": "^7.6.14", "@storybook/addon-interactions": "^7.6.14", "@storybook/addon-links": "^7.6.14", + "@storybook/blocks": "^7.6.14", "@storybook/jest": "^0.2.3", "@storybook/react": "^7.6.14", "@storybook/react-webpack5": "^7.6.14", diff --git a/package.json b/package.json index 1eeb2d0..ec1642b 100644 --- a/package.json +++ b/package.json @@ -60,6 +60,7 @@ "@storybook/addon-essentials": "^7.6.14", "@storybook/addon-interactions": "^7.6.14", "@storybook/addon-links": "^7.6.14", + "@storybook/blocks": "^7.6.14", "@storybook/jest": "^0.2.3", "@storybook/react": "^7.6.14", "@storybook/react-webpack5": "^7.6.14", diff --git a/src/0001-intro.stories.mdx b/src/0001-intro.mdx similarity index 98% rename from src/0001-intro.stories.mdx rename to src/0001-intro.mdx index 106fa6b..a8de329 100644 --- a/src/0001-intro.stories.mdx +++ b/src/0001-intro.mdx @@ -1,4 +1,4 @@ -import {Meta} from '@storybook/addon-docs'; +import {Meta} from '@storybook/blocks'; import ownTokens from '../lib/tokens/tokens'; import TokensTable from './TokensTable'; diff --git a/src/ColorPreview.mdx b/src/ColorPreview.mdx new file mode 100644 index 0000000..52a73ee --- /dev/null +++ b/src/ColorPreview.mdx @@ -0,0 +1,34 @@ +import {Canvas, Meta, ArgsTable} from '@storybook/blocks'; +import * as ColorPreviewStories from './ColorPreview.stories'; + +import ColorPreview from './ColorPreview'; + + + +## Color preview + +Show a preview of what a color looks like. + +### Formats + +Any valid way to specify a CSS color is accepted. + + + + + + + + +### `isColor` utility + +Use the `isColor` utility to check if a value is a valid CSS color before rendering this +component. + +```jsx +import ColorPreview, {isColor} from './ColorPreview'; + +const MyComponent = () => { + return isColor('rgb(255, 0, 0)') ? : null; +}; +``` diff --git a/src/ColorPreview.stories.mdx b/src/ColorPreview.stories.mdx deleted file mode 100644 index b540d53..0000000 --- a/src/ColorPreview.stories.mdx +++ /dev/null @@ -1,46 +0,0 @@ -import {Canvas, Meta, Story, ArgsTable} from '@storybook/addon-docs'; -import ofDesignTokens from '@open-formulieren/design-tokens/dist/tokens.js'; - -import ColorPreview from './ColorPreview'; - - - -## Color preview - -Show a preview of what a color looks like. - -### Formats - -Any valid way to specify a CSS color is accepted. - -export const Template = ({color}) => ; - - - - {Template.bind({})} - - - {Template.bind({})} - - - {Template.bind({})} - - - {Template.bind({})} - - - - - -### `isColor` utility - -Use the `isColor` utility to check if a value is a valid CSS color before rendering this -component. - -```jsx -import ColorPreview, {isColor} from './ColorPreview'; - -const MyComponent = () => { - return isColor('rgb(255, 0, 0)') ? : null; -}; -``` diff --git a/src/ColorPreview.stories.ts b/src/ColorPreview.stories.ts new file mode 100644 index 0000000..4160a34 --- /dev/null +++ b/src/ColorPreview.stories.ts @@ -0,0 +1,43 @@ +import {Meta, StoryObj} from '@storybook/react'; + +import ColorPreview from './ColorPreview'; + +const meta = { + title: 'Private API/ColorPreview', + component: ColorPreview, +} satisfies Meta; +export default meta; + +type Story = StoryObj; + +export const HEX: Story = { + name: 'Hex', + + args: { + color: '#FF0000', + }, +}; + +export const RGB: Story = { + name: 'RGB', + + args: { + color: 'rgb(0, 255, 0)', + }, +}; + +export const RGBA: Story = { + name: 'RGBA', + + args: { + color: 'rgba(0, 0, 255, 0.5)', + }, +}; + +export const HSLA: Story = { + name: 'HSLA', + + args: { + color: 'hsla(20, 80%, 75%, 1)', + }, +}; diff --git a/src/ColorPreview.tsx b/src/ColorPreview.tsx index 80ddc1f..ece0fa6 100644 --- a/src/ColorPreview.tsx +++ b/src/ColorPreview.tsx @@ -1,6 +1,6 @@ import React from 'react'; -interface ColorPreviewProps { +export interface ColorPreviewProps { color: string; } diff --git a/src/TokenEditor.mdx b/src/TokenEditor.mdx new file mode 100644 index 0000000..cf956e9 --- /dev/null +++ b/src/TokenEditor.mdx @@ -0,0 +1,27 @@ +import {useState} from 'react'; +import {Canvas, Meta, ArgsTable} from '@storybook/blocks'; +import ofDesignTokens from '@open-formulieren/design-tokens/dist/tokens.js'; +import * as TokenEditorStories from './TokenEditor.stories'; + +import TokenEditor from './TokenEditor'; + + + +## Token editor + +Given a style-dictionary tokens output (resolved state of all token files), show an +editor to inspect and modify values of design tokens. + +The underlying components can be used to document components in your own storybook +instance or even expose controls for theme builders. + +When changes are made in the editor, the new style-dictionary tree of the tokens is +provided to the `onChange` callback prop. + + + + + +## With a callback function to capture edits + + diff --git a/src/TokenEditor.stories.mdx b/src/TokenEditor.stories.mdx deleted file mode 100644 index 431c500..0000000 --- a/src/TokenEditor.stories.mdx +++ /dev/null @@ -1,86 +0,0 @@ -import {useState} from 'react'; -import {Canvas, Meta, Story, ArgsTable} from '@storybook/addon-docs'; -import ofDesignTokens from '@open-formulieren/design-tokens/dist/tokens.js'; - -import TokenEditor from './TokenEditor'; - - - -## Token editor - -Given a style-dictionary tokens output (resolved state of all token files), show an -editor to inspect and modify values of design tokens. - -The underlying components can be used to document components in your own storybook -instance or even expose controls for theme builders. - -When changes are made in the editor, the new style-dictionary tree of the tokens is -provided to the `onChange` callback prop. - -export const Template = ({tokens, initialValues}) => ( - -); - - - - {Template.bind({})} - - - - - -## With a callback function to capture edits - -export const CallbackTemplate = ({tokens, initialValues}) => { - const [changeCounter, setChangeCounter] = useState(0); - const [values, setValues] = useState(initialValues); - const onChange = newValues => { - setValues(newValues); - setChangeCounter(changeCounter + 1); - }; - return ( - <> -
-
Changes received: {changeCounter}
- - 
{JSON.stringify(values, null, 2)}
- -
- - - ); -}; - - - - {CallbackTemplate.bind({})} - - diff --git a/src/TokenEditor.stories.tsx b/src/TokenEditor.stories.tsx new file mode 100644 index 0000000..932ae6a --- /dev/null +++ b/src/TokenEditor.stories.tsx @@ -0,0 +1,82 @@ +import {useState} from 'react'; +import {Meta, StoryObj, StoryFn} from '@storybook/react'; +// @ts-expect-error +import ofDesignTokens from '@open-formulieren/design-tokens/dist/tokens.js'; + +import TokenEditor from './TokenEditor'; +import type {TopLevelContainer} from './types'; + +const meta = { + title: 'Public API/TokenEditor', + component: TokenEditor, +} satisfies Meta; +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + name: 'Default', + + args: { + tokens: ofDesignTokens, + + initialValues: { + // TODO: look into better (recursive) type definitions + // @ts-expect-error + of: { + button: { + primary: { + bg: { + value: '#0177b2', + }, + }, + }, + }, + }, + }, +}; + +const callbackRender: StoryFn = ({tokens, initialValues}) => { + const [changeCounter, setChangeCounter] = useState(0); + const [values, setValues] = useState(initialValues); + + const onChange = (newValues: TopLevelContainer) => { + setValues(newValues); + setChangeCounter(changeCounter + 1); + }; + + return ( + <> +
+
Changes received: {changeCounter}
+ + 
{JSON.stringify(values, null, 2)}
+ +
+ + + ); +}; + +export const OnChangeCallback: Story = { + render: callbackRender, + name: 'onChange callback', + + args: { + tokens: ofDesignTokens, + + initialValues: { + // TODO: look into better (recursive) type definitions + // @ts-expect-error + of: { + button: { + primary: { + bg: { + value: '#0177b2', + }, + }, + }, + }, + }, + }, +}; diff --git a/src/TokenEditor.tsx b/src/TokenEditor.tsx index 66d7543..ef777f2 100644 --- a/src/TokenEditor.tsx +++ b/src/TokenEditor.tsx @@ -12,7 +12,7 @@ type StyleDictValue = { value: string; }; -type StyleDictValueMap = { +export type StyleDictValueMap = { [key: string]: StyleDictValue | StyleDictValueMap; }; @@ -166,7 +166,7 @@ const ViewModePicker = ({ ); }; -interface TokenEditorProps { +export interface TokenEditorProps { tokens: TopLevelContainer; initialValues?: TopLevelContainer; onChange?: (values: StyleDictValueMap) => void; diff --git a/src/TokenFilter.mdx b/src/TokenFilter.mdx new file mode 100644 index 0000000..9665f68 --- /dev/null +++ b/src/TokenFilter.mdx @@ -0,0 +1,12 @@ +import {Canvas, Meta} from '@storybook/blocks'; +import * as TokenFilterStories from './TokenFilter.stories'; + +import TokenFilter from './TokenFilter'; + + + +## Token filter + +Provide filter controls to limit the tokens displayed. + + diff --git a/src/TokenFilter.stories.mdx b/src/TokenFilter.stories.mdx deleted file mode 100644 index 3e643c7..0000000 --- a/src/TokenFilter.stories.mdx +++ /dev/null @@ -1,21 +0,0 @@ -import {Canvas, Meta, Story, ArgsTable} from '@storybook/addon-docs'; -import ofDesignTokens from '@open-formulieren/design-tokens/dist/tokens.js'; -import utrechtDesignTokens from '@utrecht/design-tokens/dist/tokens.js'; - -import TokenFilter from './TokenFilter'; - - - -## Token filter - -Provide filter controls to limit the tokens displayed. - -export const Template = ({onChange, ...args}) => ( - -); - - - - {Template.bind({})} - - diff --git a/src/TokenFilter.stories.ts b/src/TokenFilter.stories.ts new file mode 100644 index 0000000..80dcf38 --- /dev/null +++ b/src/TokenFilter.stories.ts @@ -0,0 +1,22 @@ +import {Meta, StoryObj} from '@storybook/react'; + +import TokenFilter from './TokenFilter'; + +const meta = { + title: 'Private API/TokenFilter', + component: TokenFilter, +} satisfies Meta; +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + name: 'Default', + + args: { + filters: { + query: 'a query', + mode: 'curated', + }, + }, +}; diff --git a/src/TokenFilter.tsx b/src/TokenFilter.tsx index 71c7b90..564e1c4 100644 --- a/src/TokenFilter.tsx +++ b/src/TokenFilter.tsx @@ -43,7 +43,7 @@ const FilterModeInput: React.FC = ({value, onChange}) => { ); }; -interface TokenFilterProps { +export interface TokenFilterProps { filters: TokenFilterState; onChange: (event: ChangeEvent) => void; } diff --git a/src/TokenRow.mdx b/src/TokenRow.mdx new file mode 100644 index 0000000..23271e3 --- /dev/null +++ b/src/TokenRow.mdx @@ -0,0 +1,31 @@ +import {Canvas, Meta, ArgsTable} from '@storybook/blocks'; +import * as TokenRowStories from './TokenRow.stories'; + +import TokenRow from './TokenRow'; + + + +## Token row + +The token row adapts its layout based on the container it is in - by default it's +displayed in 'mobile'/'narrow' view, but on wider containers the content is displayed in +a single row. + +_This relies on the `@container` queries, which are fairly new - not all browsers +support this yet!_ + +**Default** + + + +**Contained** + + + +**CSS color properties** + + + +## Props + + diff --git a/src/TokenRow.stories.mdx b/src/TokenRow.stories.mdx deleted file mode 100644 index bfcf0a9..0000000 --- a/src/TokenRow.stories.mdx +++ /dev/null @@ -1,75 +0,0 @@ -import {Canvas, Meta, Story, ArgsTable} from '@storybook/addon-docs'; -import ofDesignTokens from '@open-formulieren/design-tokens/dist/tokens.js'; - -import TokenRow from './TokenRow'; - - - -## Token row - -export const Template = ({designToken, contained = false}) => ( -
- -
-); - -The token row adapts its layout based on the container it is in - by default it's -displayed in 'mobile'/'narrow' view, but on wider containers the content is displayed in -a single row. - -_This relies on the `@container` queries, which are fairly new - not all browsers -support this yet!_ - -**Default** - - - - {Template.bind({})} - - - -**Contained** - - - - {Template.bind({})} - - - -**CSS color properties** - - - - {Template.bind({})} - - - -## Props - - diff --git a/src/TokenRow.stories.tsx b/src/TokenRow.stories.tsx new file mode 100644 index 0000000..e04419b --- /dev/null +++ b/src/TokenRow.stories.tsx @@ -0,0 +1,70 @@ +import {Meta, StoryObj, StoryFn} from '@storybook/react'; +// @ts-expect-errors +import ofDesignTokens from '@open-formulieren/design-tokens/dist/tokens.js'; + +import TokenRow from './TokenRow'; + +type TokenRowPropsAndCustomArgs = React.ComponentProps & { + contained?: boolean; +}; + +const meta = { + title: 'Private API/TokenRow', + component: TokenRow, + args: { + contained: false, + }, +} satisfies Meta; +export default meta; + +const render: StoryFn = ({ + designToken, + contained = false, +}) => ( +
+ +
+); + +type Story = StoryObj; + +export const Default: Story = { + render, + name: 'Default', + + args: { + designToken: ofDesignTokens.of['page-footer'].bg, + contained: false, + }, +}; + +export const Contained: Story = { + render, + name: 'Contained', + + args: { + designToken: ofDesignTokens.of['summary-row'].spacing, + contained: true, + }, +}; + +export const CssColorInherit: Story = { + render, + name: 'CSS color: inherit', + + args: { + designToken: { + name: 'ofColorFg', + value: 'inherit', + + original: { + value: 'inherit', + }, + + path: ['of', 'color', 'fg'], + attributes: {}, + }, + + contained: false, + }, +}; diff --git a/src/TokenValueInput.tsx b/src/TokenValueInput.tsx index 0568f6d..9c86400 100644 --- a/src/TokenValueInput.tsx +++ b/src/TokenValueInput.tsx @@ -1,4 +1,4 @@ -import React, {ChangeEvent, HTMLInputTypeAttribute} from 'react'; +import {ChangeEvent, HTMLInputTypeAttribute} from 'react'; interface TokenValueInputProps { name: string; diff --git a/src/TokensBlock.mdx b/src/TokensBlock.mdx new file mode 100644 index 0000000..286ffec --- /dev/null +++ b/src/TokensBlock.mdx @@ -0,0 +1,14 @@ +import {Canvas, Meta, ArgsTable} from '@storybook/blocks'; +import * as TokensBlockStories from './TokensBlock.stories'; + +import TokensBlock from './TokensBlock'; + + + +## Tokens block + +Displays a context header with the relevant tokens contained inside. + + + + diff --git a/src/TokensBlock.stories.mdx b/src/TokensBlock.stories.mdx deleted file mode 100644 index 9a7d53a..0000000 --- a/src/TokensBlock.stories.mdx +++ /dev/null @@ -1,42 +0,0 @@ -import {Canvas, Meta, Story, ArgsTable} from '@storybook/addon-docs'; -import ofDesignTokens from '@open-formulieren/design-tokens/dist/tokens.js'; - -import TokensBlock from './TokensBlock'; - - ( -
- -
- ), - ]} - parameters={{ - docs: { - source: { - type: 'dynamic', - excludeDecorators: true, - }, - }, - }} -/> - -## Tokens block - -Displays a context header with the relevant tokens contained inside. - -export const Template = ({path, tokens}) => ; - -export const colorTokens = Object.values(ofDesignTokens.of.color).filter( - potentialToken => 'value' in potentialToken -); - - - - {Template.bind({})} - - - - diff --git a/src/TokensBlock.stories.tsx b/src/TokensBlock.stories.tsx new file mode 100644 index 0000000..dbba90c --- /dev/null +++ b/src/TokensBlock.stories.tsx @@ -0,0 +1,28 @@ +import {Meta, StoryObj} from '@storybook/react'; +// @ts-expect-error +import ofDesignTokens from '@open-formulieren/design-tokens/dist/tokens.js'; + +import TokensBlock from './TokensBlock'; +import type {DesignToken} from './types'; + +const colorTokens = Object.values(ofDesignTokens.of.color).filter( + (potentialToken: DesignToken) => 'value' in potentialToken +) as DesignToken[]; + +const meta = { + title: 'Public API/TokensBlock', + component: TokensBlock, +} satisfies Meta; +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + name: 'Default', + + args: { + path: ['of', 'color'], + tokens: colorTokens, + container: {}, + }, +}; diff --git a/src/TokensBlock.tsx b/src/TokensBlock.tsx index ec44121..3c343b4 100644 --- a/src/TokensBlock.tsx +++ b/src/TokensBlock.tsx @@ -58,7 +58,7 @@ const TokensBlockTokenList = ({tokens}: TokensBlockTokenListProps): JSX.Element ); }; -interface TokensBlockProps { +export interface TokensBlockProps { path: string[]; tokens: DesignToken[]; onClick?: (event: React.MouseEvent) => void; diff --git a/src/TokensTable.mdx b/src/TokensTable.mdx new file mode 100644 index 0000000..4de7962 --- /dev/null +++ b/src/TokensTable.mdx @@ -0,0 +1,33 @@ +import {Canvas, Meta, ArgsTable} from '@storybook/blocks'; +import * as TokensTableStories from './TokensTable.stories'; + +import TokensTable from './TokensTable'; + + + +## Tokens table + +Displays a table with the (JSON) path of the token, the current value (which can be +edited) and where the current value is coming from (either a reference to another token, +or a literal value). + +## Rendering all tokens of a theme + + + +## Limit rendering to a component + + + + + +## Enable filters + + + +## 'Unexpected' token shapes + +Some style-dictionary configuration can result in additional properties being there but +the value key missing. + + diff --git a/src/TokensTable.stories.mdx b/src/TokensTable.stories.mdx deleted file mode 100644 index 3bd6385..0000000 --- a/src/TokensTable.stories.mdx +++ /dev/null @@ -1,81 +0,0 @@ -import {Canvas, Meta, Story, ArgsTable} from '@storybook/addon-docs'; -import ofDesignTokens from '@open-formulieren/design-tokens/dist/tokens.js'; -import utrechtDesignTokens from '@utrecht/design-tokens/dist/tokens.js'; - -import TokensTable from './TokensTable'; - - - -## Tokens table - -Displays a table with the (JSON) path of the token, the current value (which can be -edited) and where the current value is coming from (either a reference to another token, -or a literal value). - -export const Template = ({ - container, - limitTo = null, - autoExpand, - filterEnabled = false, -}) => ( - -); - -## Rendering all tokens of a theme - - - - {Template.bind({})} - - - -## Limit rendering to a component - - - - {Template.bind({})} - - - - - -## Enable filters - - - - {Template.bind({})} - - - -## 'Unexpected' token shapes - -Some style-dictionary configuration can result in additional properties being there but -the value key missing. - - - - {Template.bind({})} - - diff --git a/src/TokensTable.stories.ts b/src/TokensTable.stories.ts new file mode 100644 index 0000000..633da69 --- /dev/null +++ b/src/TokensTable.stories.ts @@ -0,0 +1,51 @@ +import {Meta, StoryObj} from '@storybook/react'; +// @ts-expect-error +import ofDesignTokens from '@open-formulieren/design-tokens/dist/tokens.js'; +import utrechtDesignTokens from '@utrecht/design-tokens/dist/tokens.js'; + +import TokensTable from './TokensTable'; + +const meta = { + title: 'Public API/TokensTable', + component: TokensTable, + args: { + limitTo: '', + filterEnabled: false, + container: ofDesignTokens, + }, +} satisfies Meta; +export default meta; + +type Story = StoryObj; + +export const Default = { + name: 'Default', +}; + +export const LimitedToComponent: Story = { + name: 'Limited to component', + + args: { + limitTo: 'of.button', + autoExpand: true, + }, +}; + +export const FiltersEnabled: Story = { + name: 'Filters enabled', + + args: { + filterEnabled: true, + autoExpand: true, + }, +}; + +export const UtrechtTokens: Story = { + name: 'Utrecht tokens', + + args: { + container: utrechtDesignTokens, + limitTo: 'utrecht.alert.', + autoExpand: false, + }, +}; diff --git a/src/TokensTable.tsx b/src/TokensTable.tsx index 56b7377..fce329e 100644 --- a/src/TokensTable.tsx +++ b/src/TokensTable.tsx @@ -134,7 +134,7 @@ const reducer = (state: TokenTableState, action: ReducerAction): TokenTableState } }; -interface TokensTableProps { +export interface TokensTableProps { container: TopLevelContainer; limitTo?: string; autoExpand?: boolean; diff --git a/tsconfig.json b/tsconfig.json index 634d811..1c425ed 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -4,7 +4,7 @@ "module": "esnext", "target": "es5", "lib": ["es6", "dom", "es2016", "es2017"], - "jsx": "react", + "jsx": "react-jsx", "declaration": true, "moduleResolution": "node", "noUnusedLocals": true,