We are currently using Docz to document our type definitions. While it works well for interfaces, we've run into an issue where rendering anything other than interfaces as props in Docz components doesn't seem to display properly.
I'm seeking guidance on how to render an enum or union type and have it show up correctly in the mdx file.
The usage of these types in the Docz file looks like this:
interface.tsx:
import {
UserOrganisation,
UserLevel
} from "~/packages/database-interfaces/src";
export const UserLevelC = (props: UserLevel) => {};
export const UserOrganisationC = (props: UserOrganisation) => {};
index.mdx:
---
name: users
menu: Database/Realtime
---
import { Props } from "docz";
import {
UserLevelC,
UserOrganisationC
} from "./Interface.tsx";
# Interface
## Properties
### Type UserOrganisation
<Props of={UserOrganisationC} />
### Type UserLevel
<Props of={UserLevelC} />
Examples of these types are:
export const enum UserLevel {
"employee",
"owner",
"admin",
"disabled"
}
export interface UserOrganisation {
level: UserLevel;
name: string;
}
This results in the following output with a 'UserLevel' type that only shows as a horizontal line:
https://i.stack.imgur.com/zysci.png
We've also attempted defining/exporting types in different ways:
export type foo = 'option1' | 'option2';
export enum foo = 'option1' | 'option2';
export const enum foo = 'option1' | 'option2';
While interfaces render correctly, the issue arises when trying to display such custom types/enums.
If the same enumerated strings/union types are declared within an interface rather than separately, Docz displays them correctly:
export interface UserOrganisation {
level: 'employee' | 'owner' | 'admin' | 'disabled';
name: string;
}
However, when attempting to extract them into their own type for reuse across multiple interfaces, the rendering fails.
Any assistance on resolving this would be highly appreciated. Thank you!