paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 48 Packages Projects Releases Wiki Activity

Continue working with props

Browse Source 
Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
This commit is contained in:
Charles de Dreuille
2025-03-18 16:49:04 +00:00
parent 8078d0376c
commit 8bcd634141
18 changed files with 246 additions and 225 deletions
Download Patch File Download Diff File Expand all files Collapse all files
canon-docs/src/app/(docs)/components/button/page.mdx
+1 -1
View File
@@ -11,7 +11,7 @@ import {
ButtonResponsive,
} from '@/snippets/button';
import { buttonVariants } from '@/snippets/_snippets';
import { buttonPropDefs } from '../../../../../../packages/canon/src/components/Button/Button.props';
import { buttonPropDefs } from './props';
# Button
canon-docs/src/app/(docs)/components/button/props.ts
+19
View File
@@ -0,0 +1,19 @@
import { classNamePropDefs, stylePropDefs } from '../../../../utils/propDefs';
import type { PropDef } from '../../../../utils/propDefs';
export const boxPropDefs: Record<string, PropDef> = {
variant: {
type: 'enum',
values: ['primary', 'secondary'],
default: 'primary',
responsive: true,
},
size: {
type: 'enum',
values: ['small', 'medium'],
default: 'medium',
responsive: true,
},
...classNamePropDefs,
...stylePropDefs,
};
canon-docs/src/app/(docs)/components/checkbox/page.mdx
+2 -44
View File
@@ -4,6 +4,7 @@ import { Snippet } from '@/components/Snippet';
import { Tabs } from '@/components/Tabs';
import { CodeBlock } from '@/components/CodeBlock';
import { BaseUI } from '@/components/HeadlessBanners/BaseUI';
import { checkboxPropDefs } from './props';
# Checkbox
@@ -42,50 +43,7 @@ A checkbox component that can be used to trigger actions.
<BaseUI href="https://base-ui.com/react/components/checkbox" />
<PropsTable
data={{
label: {
type: 'string',
responsive: false,
},
defaultChecked: {
type: ['boolean', "'indeterminate'"],
responsive: false,
},
checked: {
type: ['boolean', "'indeterminate'"],
responsive: false,
},
onChange: {
type: "(checked: boolean | 'indeterminate') => void",
responsive: false,
},
disabled: {
type: 'boolean',
responsive: false,
},
required: {
type: 'boolean',
responsive: false,
},
name: {
type: 'string',
responsive: false,
},
value: {
type: 'string',
responsive: false,
},
className: {
type: 'string',
responsive: false,
},
style: {
type: 'CSSProperties',
responsive: false,
},
}}
/>
<PropsTable data={checkboxPropDefs} />
## Examples
canon-docs/src/app/(docs)/components/checkbox/props.ts
+44
View File
@@ -0,0 +1,44 @@
import { classNamePropDefs, stylePropDefs } from '../../../../utils/propDefs';
import type { PropDef } from '../../../../utils/propDefs';
export const checkboxPropDefs: Record<string, PropDef> = {
label: {
type: 'string',
responsive: false,
},
defaultChecked: {
type: 'enum',
values: ['boolean', "'indeterminate'"],
responsive: false,
},
checked: {
type: 'enum',
values: ['boolean', "'indeterminate'"],
responsive: false,
},
onChange: {
type: 'enum',
values: ["(checked: boolean | 'indeterminate') => void"],
responsive: false,
},
disabled: {
type: 'enum',
values: ['boolean'],
responsive: false,
},
required: {
type: 'enum',
values: ['boolean'],
responsive: false,
},
name: {
type: 'string',
responsive: false,
},
value: {
type: 'string',
responsive: false,
},
...classNamePropDefs,
...stylePropDefs,
};
canon-docs/src/app/(docs)/components/field/page.mdx
+10 -92
View File
@@ -4,6 +4,12 @@ import { Tabs } from '@/components/Tabs';
import { CodeBlock } from '@/components/CodeBlock';
import { FieldPreview } from '@/snippets/field';
import { BaseUI } from '@/components/HeadlessBanners/BaseUI';
import {
fieldRootPropDefs,
fieldLabelPropDefs,
fieldDescriptionPropDefs,
fieldErrorPropDefs,
} from './props';
# Field
@@ -49,113 +55,25 @@ A wrapper around `Input` or `Select` component to add label, description and err
Groups all parts of the field. Renders a `<div>` element.
<PropsTable
data={{
name: {
type: 'string',
responsive: false,
},
disabled: {
type: 'boolean',
responsive: false,
},
invalid: {
type: 'boolean',
responsive: false,
},
validate: {
type: '(value) => string | string[] | null | Promise',
responsive: false,
},
validationMode: {
type: ['onBlur', 'onChange'],
responsive: false,
},
validationDebounceTime: {
type: 'number',
responsive: false,
},
className: {
type: 'string',
responsive: false,
},
style: {
type: 'CSSProperties',
responsive: false,
},
}}
/>
<PropsTable data={fieldRootPropDefs} />
### Field.Label
An accessible label that is automatically associated with the field control. Renders a `<label>` element.
<PropsTable
data={{
className: {
type: 'string',
responsive: false,
},
style: {
type: 'CSSProperties',
responsive: false,
},
}}
/>
<PropsTable data={fieldLabelPropDefs} />
### Field.Description
A paragraph with additional information about the field. Renders a `<p>` element.
<PropsTable
data={{
className: {
type: 'string',
responsive: false,
},
style: {
type: 'CSSProperties',
responsive: false,
},
}}
/>
<PropsTable data={fieldDescriptionPropDefs} />
### Field.Error
An error message displayed if the field control fails validation. Renders a `<div>` element.
<PropsTable
data={{
match: {
type: [
'badInput',
'customError',
'patternMismatch',
'rangeOverflow',
'rangeUnderflow',
'stepMismatch',
'tooLong',
'tooShort',
'typeMismatch',
'valid',
'valueMissing',
],
responsive: false,
},
forceShow: {
type: 'boolean',
responsive: false,
},
className: {
type: 'string',
responsive: false,
},
style: {
type: 'CSSProperties',
responsive: false,
},
}}
/>
<PropsTable data={fieldErrorPropDefs} />
## Examples
canon-docs/src/app/(docs)/components/field/props.ts
+69
View File
@@ -0,0 +1,69 @@
import { classNamePropDefs, stylePropDefs } from '../../../../utils/propDefs';
import type { PropDef } from '../../../../utils/propDefs';
export const fieldRootPropDefs: Record<string, PropDef> = {
name: {
type: 'string',
responsive: false,
},
disabled: {
type: 'boolean',
responsive: false,
},
invalid: {
type: 'boolean',
responsive: false,
},
validate: {
type: 'enum',
values: ['(value) => string | string[] | null | Promise'],
responsive: false,
},
validationMode: {
type: 'enum',
values: ['onBlur', 'onChange'],
responsive: false,
},
validationDebounceTime: {
type: 'number',
responsive: false,
},
...classNamePropDefs,
...stylePropDefs,
};
export const fieldLabelPropDefs: Record<string, PropDef> = {
...classNamePropDefs,
...stylePropDefs,
};
export const fieldDescriptionPropDefs: Record<string, PropDef> = {
...classNamePropDefs,
...stylePropDefs,
};
export const fieldErrorPropDefs: Record<string, PropDef> = {
match: {
type: 'enum',
values: [
'badInput',
'customError',
'patternMismatch',
'rangeOverflow',
'rangeUnderflow',
'stepMismatch',
'tooLong',
'tooShort',
'typeMismatch',
'valid',
'valueMissing',
],
responsive: false,
},
forceShow: {
type: 'boolean',
responsive: false,
},
...classNamePropDefs,
...stylePropDefs,
};
canon-docs/src/app/(docs)/components/heading/page.mdx
+2 -20
View File
@@ -7,6 +7,7 @@ import {
import { Snippet } from '@/components/Snippet';
import { Tabs } from '@/components/Tabs';
import { CodeBlock } from '@/components/CodeBlock';
import { headingPropDefs } from './props';
# Heading
@@ -43,26 +44,7 @@ Headings are used to structure the content of your page.
## API reference
<PropsTable
data={{
variant: {
type: ['display', 'title1', 'title2', 'title3', 'title4', 'title5'],
responsive: true,
},
children: {
type: 'ReactNode',
responsive: false,
},
className: {
type: 'string',
responsive: false,
},
style: {
type: 'CSSProperties',
responsive: false,
},
}}
/>
<PropsTable data={headingPropDefs} />
## Examples
canon-docs/src/app/(docs)/components/heading/props.ts
+17
View File
@@ -0,0 +1,17 @@
import { classNamePropDefs, stylePropDefs } from '../../../../utils/propDefs';
import type { PropDef } from '../../../../utils/propDefs';
export const headingPropDefs: Record<string, PropDef> = {
variant: {
type: 'enum',
values: ['display', 'title1', 'title2', 'title3', 'title4', 'title5'],
responsive: true,
},
children: {
type: 'enum',
values: ['ReactNode'],
responsive: false,
},
...classNamePropDefs,
...stylePropDefs,
};
canon-docs/src/app/(docs)/components/icon-button/page.mdx
+2 -7
View File
@@ -9,7 +9,7 @@ import {
IconButtonResponsive,
} from '@/snippets/icon-button';
import { iconButtonVariants } from '@/snippets/_snippets';
import { iconButtonPropDefs } from '../../../../../../packages/canon/src/components/IconButton/IconButton.props';
import { iconButtonPropDefs } from './props';
# Icon Button
@@ -50,12 +50,7 @@ A button component with a single icon that can be used to trigger actions.
## API reference
<PropsTable
data={{
...iconButtonPropDefs,
icon: { values: 'icon', responsive: false },
}}
/>
<PropsTable data={iconButtonPropDefs} />
## Examples
canon-docs/src/app/(docs)/components/icon-button/props.ts
+20
View File
@@ -0,0 +1,20 @@
import { classNamePropDefs, stylePropDefs } from '../../../../utils/propDefs';
import type { PropDef } from '../../../../utils/propDefs';
export const iconButtonPropDefs: Record<string, PropDef> = {
variant: {
type: 'enum',
values: ['primary', 'secondary'],
default: 'primary',
responsive: true,
},
size: {
type: 'enum',
values: ['small', 'medium'],
default: 'medium',
responsive: true,
},
icon: { type: 'enum', values: 'icon', responsive: false },
...classNamePropDefs,
...stylePropDefs,
};
canon-docs/src/app/(docs)/components/icon/page.mdx
+2 -20
View File
@@ -3,6 +3,7 @@ import { IconPreview } from '@/snippets/icon';
import { Snippet } from '@/components/Snippet';
import { Tabs } from '@/components/Tabs';
import { CodeBlock } from '@/components/CodeBlock';
import { iconPropDefs } from './props';
# Icon
@@ -40,23 +41,4 @@ Icons are used to represent an action or a state.
## API reference
<PropsTable
data={{
name: {
type: 'icon',
responsive: false,
},
size: {
type: 'number',
responsive: false,
},
className: {
type: 'string',
responsive: false,
},
style: {
type: 'CSSProperties',
responsive: false,
},
}}
/>
<PropsTable data={iconPropDefs} />
canon-docs/src/app/(docs)/components/icon/props.ts
+16
View File
@@ -0,0 +1,16 @@
import { classNamePropDefs, stylePropDefs } from '../../../../utils/propDefs';
import type { PropDef } from '../../../../utils/propDefs';
export const iconPropDefs: Record<string, PropDef> = {
name: {
type: 'enum',
values: 'icon',
responsive: false,
},
size: {
type: 'number',
responsive: false,
},
...classNamePropDefs,
...stylePropDefs,
};
canon-docs/src/app/(docs)/components/input/page.mdx
+2 -16
View File
@@ -4,6 +4,7 @@ import { Tabs } from '@/components/Tabs';
import { CodeBlock } from '@/components/CodeBlock';
import { InputPreview, InputSizes } from '@/snippets/input';
import { BaseUI } from '@/components/HeadlessBanners/BaseUI';
import { inputPropDefs } from './props';
# Input
@@ -42,22 +43,7 @@ A input component tfor your forms.
<BaseUI href="https://base-ui.com/react/components/input" />
<PropsTable
data={{
size: {
type: ['sm', 'md'],
responsive: false,
},
className: {
type: 'string',
responsive: false,
},
style: {
type: 'CSSProperties',
responsive: false,
},
}}
/>
<PropsTable data={inputPropDefs} />
## Examples
canon-docs/src/app/(docs)/components/input/props.ts
+13
View File
@@ -0,0 +1,13 @@
import { classNamePropDefs, stylePropDefs } from '../../../../utils/propDefs';
import type { PropDef } from '../../../../utils/propDefs';
export const inputPropDefs: Record<string, PropDef> = {
size: {
type: 'enum',
values: ['sm', 'md'],
default: 'md',
responsive: false,
},
...classNamePropDefs,
...stylePropDefs,
};
canon-docs/src/app/(docs)/components/text/page.mdx
+2 -24
View File
@@ -8,6 +8,7 @@ import {
import { Snippet } from '@/components/Snippet';
import { Tabs } from '@/components/Tabs';
import { CodeBlock } from '@/components/CodeBlock';
import { textPropDefs } from './props';
# Text
@@ -48,30 +49,7 @@ The `Text` component is used to display content on your page.
## API reference
<PropsTable
data={{
variant: {
type: ['display', 'title1', 'title2', 'title3', 'title4', 'title5'],
responsive: true,
},
weight: {
type: ['regular', 'bold'],
responsive: true,
},
children: {
type: 'ReactNode',
responsive: false,
},
className: {
type: 'string',
responsive: false,
},
style: {
type: 'CSSProperties',
responsive: false,
},
}}
/>
<PropsTable data={textPropDefs} />
## Examples
canon-docs/src/app/(docs)/components/text/props.ts
+22
View File
@@ -0,0 +1,22 @@
import {
childrenPropDefs,
classNamePropDefs,
stylePropDefs,
} from '../../../../utils/propDefs';
import type { PropDef } from '../../../../utils/propDefs';
export const textPropDefs: Record<string, PropDef> = {
variant: {
type: 'enum',
values: ['display', 'title1', 'title2', 'title3', 'title4', 'title5'],
responsive: true,
},
weight: {
type: 'enum',
values: ['regular', 'bold'],
responsive: true,
},
...childrenPropDefs,
...classNamePropDefs,
...stylePropDefs,
};
canon-docs/src/components/PropsTable/PropsTable.tsx
+2
View File
@@ -50,6 +50,8 @@ export const PropsTable = <T extends Record<string, PropData>>({
style={{ display: 'flex', flexWrap: 'wrap', gap: '0.375rem' }}
>
{data[n].type === 'string' && <Chip>string</Chip>}
{data[n].type === 'number' && <Chip>number</Chip>}
{data[n].type === 'boolean' && <Chip>boolean</Chip>}
{data[n].type === 'enum' && enumValues}
{data[n].type === 'enum | string' && (
<>
canon-docs/src/utils/propDefs.ts
+1 -1
View File
@@ -3,7 +3,7 @@ import type { Breakpoint } from '@backstage/canon/src/types';
const breakpoints = ['initial', 'xs', 'sm', 'md', 'lg', 'xl'] as Breakpoint[];
export type PropDef = {
type: 'string' | 'enum' | 'enum | string';
type: 'string' | 'enum' | 'enum | string' | 'number' | 'boolean';
values?: string | string[];
default?: string;
required?: boolean;