https://github.com/krofdrakula/prop-docs
A tool to extract property type information from JSX components using TypeScript
https://github.com/krofdrakula/prop-docs
preact storybook types typescript
Last synced: about 1 month ago
JSON representation
A tool to extract property type information from JSX components using TypeScript
- Host: GitHub
- URL: https://github.com/krofdrakula/prop-docs
- Owner: KrofDrakula
- License: mit
- Created: 2022-12-31T10:28:56.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-03-01T10:33:08.000Z (about 2 years ago)
- Last Synced: 2025-04-20T02:38:20.776Z (about 1 month ago)
- Topics: preact, storybook, types, typescript
- Language: TypeScript
- Homepage:
- Size: 198 KB
- Stars: 4
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# prop-docs
A tool to extract property type information from JSX components using
TypeScript.
This library directly depends on [`ts-morph`](https://ts-morph.com/) and expects
to be passed a [`Project`](https://ts-morph.com/setup/) in order to leverage TS
type resolution. TypeScript is also expected to be available as a peer
dependency.
This ecosystem uses the [`Type`](https://ts-morph.com/details/types) object as
the intermediate representation to provide type extraction and translation for
multiple different libraries.
Unless you are consuming the `ts-morph` `Type` directly, you'll probably want to
pipe the output of the frontend parsing library (like Preact) to an output
function for a particular framework (like Storybook).
## Supported software
| ➡️ Inputs | Outputs ➡️ |
| ----------------- | ----------------------- |
| [Preact](#preact) | [Storybook](#storybook) |
---
## Preact
Install the `preact` package:
```
yarn add @krofdrakula/prop-docs-preact
```
Here's an example component file (`components.tsx`):
```ts
interface BadgeProps {
/** Name of person */
name: string;
/** Notification count */
count: number;
}
export const Badge: FunctionalComponent = ({ name, count }) => {
return (
{name} ({count})
);
};
interface ProfileProps {
/** Person's image URL */
image: string;
/** Person's name */
name: string;
}
export class Profile extends Component {
render() {
const { image, name } = this.props;
return 
;
}
}
```
To use the package, you'll need to instantiate the `Project` class and configure
it for your code base:
```ts
import { Project } from "ts-morph";
import { extractComponents } from "@krofdrakula/prop-docs-preact";
const project = new Project({
// Configure your tsconfig.json path and other options.
// You can opt to explicitly add your own source files instead and configure
// `compilerOptions` here if needed.
});
const { Badge, Profile } = extractComponents(project, "components.tsx");
// ^? { image: string; name: string; }
// ^? { name: string; count: number; }
```
The return types are instances of [`Type`](https://ts-morph.com/details/types)
which provides the description of the props object.
## Storybook
```
yarn add @krofdrakula/prop-docs-storybook
```
When provided with an extracted [`Type`](https://ts-morph.com/details/types)
this package will enable you to create an `ArgTypes` description for a specific
component.
For example, extracting a Preact component requires parsing the components using
`@krofdrakula/prop-docs-preact` and then using `convertType` to return the
correct description:
```ts
import { Project } from "ts-morph";
import { getPropsType } from "@krofdrakula/prop-docs-preact";
import { extractCSF, convertType } from "@krofdrakula/prop-docs-storybook";
const project = new Project();
// this project assumes that `components.tsx` exists as in the Preact example
const { Profile } = extractCSF(project, "components.tsx", getPropsType);
const profileArgTypes = convertType(Profile);
// ^? {
// name: {
// type: { name: "string", required: true },
// description: "Person's name"
// },
// image: {
// type: { name: "string", required: true },
// description: "Person's image URL"
// }
// }
```