README.md

TypeScript Props

Generate TypeScript props to use for your React (or other) components. Generate const values for looping through the possible props for Storybook.

Example output discussed

example

A single nested type is generated. You need to use Indexed Access to get the component you need. For example:

import React from 'react';
import type { GOVUKDesignSystemCommunityTypes } from './gov-uk-design-system-interfaces.ts';

type TagProps = GOVUKDesignSystemCommunityTypes["🗝️  Styles and Components"]["Tag"];

export const Tag: React.FC<TagProps> = ({
  children,
  colour,
}) => (
};

Figma doesn't define behaviour, so additional props may be required for interactive elements. Additional props may also be required to support accessibility. For example:

import React from 'react';
import type { GOVUKDesignSystemCommunityTypes } from './gov-uk-design-system-interfaces.ts';

interface ButtonProps extends GOVUKDesignSystemCommunityTypes["🗝️  Styles and Components"]["Button"] {
    onClick: () => void;
};

export const Button: React.FC<ButtonProps> = (props) => (
};

Some props may be better handled in CSS rather than JavaScript, so may not be wanted in your TypeScript interface. For example Hover and Focus from Button. Further extending the button example:

import React from 'react';
import type { GOVUKDesignSystemCommunityTypes } from './gov-uk-design-system-interfaces.ts';

interface ButtonProps extends Omit<
    GOVUKDesignSystemCommunityTypes["🗝️  Styles and Components"]["Button"],
    'hover' | 'focus'
> {
    onClick: () => void;
};

export const Button: React.FC<ButtonProps> = (props) => (
};

Formatting to your project's styleguide

The output can be piped through a formatter before saving to disk. For example

cargo run -- typescript-props < example-figma-files/gov-uk-design-system.json | npx prettier --parser typescript > gov-uk-design-system-props.ts