diff --git a/canon-docs/src/app/(docs)/components/box/page.mdx b/canon-docs/src/app/(docs)/components/box/page.mdx index 2e1d00a274..c1413dbe19 100644 --- a/canon-docs/src/app/(docs)/components/box/page.mdx +++ b/canon-docs/src/app/(docs)/components/box/page.mdx @@ -1,9 +1,10 @@ import { CodeBlock } from '@/components/CodeBlock'; import { PropsTable } from '@/components/PropsTable'; -import { spacePropsList } from '@/utils/spaceProps'; import { Tabs } from '@/components/Tabs'; import { Snippet } from '@/components/Snippet'; import { BoxPreview } from '@/snippets/box'; +import { boxPropDefs } from './props'; +import { spacingPropDefs } from '../../../../utils/propDefs'; # Box @@ -36,60 +37,13 @@ Box is the lowest-level component in Canon. It provides a consistent API for sty This is the Box component, our lowest-level component. Here are all the available properties. - + Padding and margin are used to create space around your component using our predefined spacing tokens. We would recommend to use padding over margin to avoid collapsing margins but both are available. - + ## Examples diff --git a/canon-docs/src/app/(docs)/components/box/props.ts b/canon-docs/src/app/(docs)/components/box/props.ts new file mode 100644 index 0000000000..f3e38984dd --- /dev/null +++ b/canon-docs/src/app/(docs)/components/box/props.ts @@ -0,0 +1,24 @@ +import { + classNamePropDefs, + displayPropDefs, + heightPropDefs, + positionPropDefs, + stylePropDefs, + widthPropDefs, +} from '../../../../utils/propDefs'; +import type { PropDef } from '../../../../utils/propDefs'; + +export const boxPropDefs: Record = { + as: { + type: 'enum', + values: ['div', 'span'], + default: 'div', + responsive: true, + }, + ...widthPropDefs, + ...heightPropDefs, + ...positionPropDefs, + ...displayPropDefs, + ...classNamePropDefs, + ...stylePropDefs, +}; diff --git a/canon-docs/src/app/(docs)/components/container/page.mdx b/canon-docs/src/app/(docs)/components/container/page.mdx index ace3bdcaeb..c598fa9225 100644 --- a/canon-docs/src/app/(docs)/components/container/page.mdx +++ b/canon-docs/src/app/(docs)/components/container/page.mdx @@ -4,6 +4,7 @@ import { spacePropsList } from '@/utils/spaceProps'; import { Tabs } from '@/components/Tabs'; import { Snippet } from '@/components/Snippet'; import { ContainerPreview } from '@/snippets/container'; +import { containerPropDefs } from './props'; # Container @@ -32,46 +33,7 @@ content on the page. ## API reference - + ## Examples diff --git a/canon-docs/src/app/(docs)/components/container/props.ts b/canon-docs/src/app/(docs)/components/container/props.ts new file mode 100644 index 0000000000..4a3410ec12 --- /dev/null +++ b/canon-docs/src/app/(docs)/components/container/props.ts @@ -0,0 +1,12 @@ +import { + classNamePropDefs, + stylePropDefs, + gapPropDefs, +} from '../../../../utils/propDefs'; +import type { PropDef } from '../../../../utils/propDefs'; + +export const containerPropDefs: Record = { + ...gapPropDefs, + ...classNamePropDefs, + ...stylePropDefs, +}; diff --git a/canon-docs/src/app/(docs)/components/grid/page.mdx b/canon-docs/src/app/(docs)/components/grid/page.mdx index 4e38fe39ec..f4c3a4142d 100644 --- a/canon-docs/src/app/(docs)/components/grid/page.mdx +++ b/canon-docs/src/app/(docs)/components/grid/page.mdx @@ -5,6 +5,8 @@ import { Tabs } from '@/components/Tabs'; import { grid } from '@/snippets/_snippets'; import { Snippet } from '@/components/Snippet'; import { GridPreview } from '@/snippets/grid'; +import { spacingPropDefs } from '../../../../utils/propDefs'; +import { gridPropDefs } from './props'; # Grid @@ -38,34 +40,11 @@ This is the grid container component. It will help to define the number of columns that will be used in the grid. You can also define the gap between the columns. All values are responsive. - + The grid component also accepts all the spacing props from the Box component. - + ### Grid.Item diff --git a/canon-docs/src/app/(docs)/components/grid/props.ts b/canon-docs/src/app/(docs)/components/grid/props.ts new file mode 100644 index 0000000000..b5329cc9ae --- /dev/null +++ b/canon-docs/src/app/(docs)/components/grid/props.ts @@ -0,0 +1,36 @@ +import { + PropDef, + classNamePropDefs, + displayPropDefs, + stylePropDefs, +} from '../../../../utils/propDefs'; + +export const gridPropDefs: Record = { + columns: { + type: 'enum | string', + values: [ + '1', + '2', + '3', + '4', + '5', + '6', + '7', + '8', + '9', + '10', + '11', + '12', + 'auto', + ], + responsive: true, + default: 'auto', + }, + children: { + type: 'enum', + values: ['ReactNode'], + required: true, + }, + ...classNamePropDefs, + ...stylePropDefs, +}; diff --git a/canon-docs/src/components/PropsTable/PropsTable.tsx b/canon-docs/src/components/PropsTable/PropsTable.tsx index 62917eaeed..f288bcd033 100644 --- a/canon-docs/src/components/PropsTable/PropsTable.tsx +++ b/canon-docs/src/components/PropsTable/PropsTable.tsx @@ -9,6 +9,7 @@ type PropData = { values?: string | string[]; responsive?: boolean; default?: string; + type?: string; }; // Modify the PropsTable component to use the new type @@ -17,57 +18,56 @@ export const PropsTable = >({ }: { data: T; }) => { - const completeData = { - ...data, - className: { - values: 'string', - responsive: false, - }, - style: { - values: 'CSSProperties', - responsive: false, - }, - }; + if (!data) return null; return ( - Prop - Type - Default - Responsive + Prop + Type + Default + + Responsive + - {Object.keys(completeData).map(n => ( - - - {n} - - -
- {completeData[n].values === 'icon' ? ( - Object.keys(icons).map(icon => {icon}) - ) : Array.isArray(completeData[n].values) ? ( - completeData[n].values.map(t => {t}) - ) : ( - {completeData[n].values} - )} -
- - - - {completeData[n].default ? completeData[n].default : '-'} - - - - {completeData[n].responsive ? 'Yes' : 'No'} - - - ))} + {Object.keys(data).map(n => { + const enumValues = + data[n].values === 'icon' + ? Object.keys(icons).map(icon => {icon}) + : Array.isArray(data[n].values) && + data[n].values.map(t => {t}); + + return ( + + + {n} + + +
+ {data[n].type === 'string' && string} + {data[n].type === 'enum' && enumValues} + {data[n].type === 'enum | string' && ( + <> + {enumValues} + string + + )} +
+ + + {data[n].default ? data[n].default : '-'} + + + {data[n].responsive ? 'Yes' : 'No'} + + + ); + })} ); diff --git a/canon-docs/src/components/Table/Table.tsx b/canon-docs/src/components/Table/Table.tsx index 19ae69822e..d817ce3b1b 100644 --- a/canon-docs/src/components/Table/Table.tsx +++ b/canon-docs/src/components/Table/Table.tsx @@ -1,19 +1,3 @@ -/* - * Copyright 2024 The Backstage Authors - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - import React from 'react'; import styles from './styles.module.css'; @@ -37,9 +21,18 @@ export const HeaderRow = ({ children }: { children: React.ReactNode }) => { return {children}; }; -export const HeaderCell = ({ children }: { children: React.ReactNode }) => { +export const HeaderCell = ({ + children, + style, +}: { + children: React.ReactNode; + style?: React.CSSProperties; +}) => { return ( - + {children} ); @@ -49,6 +42,16 @@ export const Row = ({ children }: { children: React.ReactNode }) => { return {children}; }; -export const Cell = ({ children }: { children: React.ReactNode }) => { - return {children}; +export const Cell = ({ + children, + style, +}: { + children: React.ReactNode; + style?: React.CSSProperties; +}) => { + return ( + + {children} + + ); }; diff --git a/canon-docs/src/components/Table/styles.module.css b/canon-docs/src/components/Table/styles.module.css index b05ee2c039..3381f39e58 100644 --- a/canon-docs/src/components/Table/styles.module.css +++ b/canon-docs/src/components/Table/styles.module.css @@ -1,19 +1,3 @@ -/* - * Copyright 2024 The Backstage Authors - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - .wrapper { border: 1px solid var(--border); border-radius: 4px; diff --git a/canon-docs/src/utils/propDefs.ts b/canon-docs/src/utils/propDefs.ts new file mode 100644 index 0000000000..42ad44ba66 --- /dev/null +++ b/canon-docs/src/utils/propDefs.ts @@ -0,0 +1,196 @@ +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'; + values?: string | string[]; + default?: string; + required?: boolean; + responsive?: boolean; +}; + +export { breakpoints }; +export type { Breakpoint }; + +export const spacingValues = [ + '0.5', + '1', + '1.5', + '2', + '3', + '4', + '5', + '6', + '7', + '8', + '9', + '10', + '11', + '12', + '13', + '14', +]; + +export const paddingPropDefs = ( + spacingValues: string[], +): Record => ({ + p: { + type: 'enum | string', + values: spacingValues, + responsive: true, + }, + px: { + type: 'enum | string', + values: spacingValues, + responsive: true, + }, + py: { + type: 'enum | string', + values: spacingValues, + responsive: true, + }, + pt: { + type: 'enum | string', + values: spacingValues, + responsive: true, + }, + pr: { + type: 'enum | string', + values: spacingValues, + responsive: true, + }, + pb: { + type: 'enum | string', + values: spacingValues, + responsive: true, + }, + pl: { + type: 'enum | string', + values: spacingValues, + responsive: true, + }, +}); + +export const marginPropDefs = ( + spacingValues: string[], +): Record => ({ + m: { + type: 'enum | string', + values: spacingValues, + responsive: true, + }, + mx: { + type: 'enum | string', + values: spacingValues, + responsive: true, + }, + my: { + type: 'enum | string', + values: spacingValues, + responsive: true, + }, + mt: { + type: 'enum | string', + values: spacingValues, + responsive: true, + }, + mr: { + type: 'enum | string', + values: spacingValues, + responsive: true, + }, + mb: { + type: 'enum | string', + values: spacingValues, + responsive: true, + }, + ml: { + type: 'enum | string', + values: spacingValues, + responsive: true, + }, +}); + +export const spacingPropDefs = { + ...paddingPropDefs(spacingValues), + ...marginPropDefs(spacingValues), +}; + +export const displayPropDefs: Record = { + display: { + type: 'enum', + values: ['none', 'inline', 'inline-block', 'block'], + default: 'block', + responsive: true, + }, +}; + +export const gapPropDefs: Record = { + gap: { + type: 'enum | string', + values: spacingValues, + responsive: true, + default: '4', + }, +}; + +export const widthPropDefs: Record = { + width: { + type: 'string', + default: '0', + responsive: true, + }, + minWidth: { + type: 'string', + default: '0', + responsive: true, + }, + maxWidth: { + type: 'string', + default: '0', + responsive: true, + }, +}; + +export const heightPropDefs: Record = { + height: { + type: 'string', + default: '0', + responsive: true, + }, + minHeight: { + type: 'string', + default: '0', + responsive: true, + }, + maxHeight: { + type: 'string', + default: '0', + responsive: true, + }, +}; + +export const positionPropDefs: Record = { + position: { + type: 'enum', + values: ['static', 'relative', 'absolute', 'fixed', 'sticky'], + default: 'static', + responsive: true, + }, +}; + +export const classNamePropDefs: Record = { + className: { + type: 'string', + responsive: false, + }, +}; + +export const stylePropDefs: Record = { + style: { + type: 'enum', + values: ['CSSProperties'], + responsive: false, + }, +}; diff --git a/canon-docs/src/utils/spaceProps.ts b/canon-docs/src/utils/spaceProps.ts index 3eb6961bc1..5df5da15b8 100644 --- a/canon-docs/src/utils/spaceProps.ts +++ b/canon-docs/src/utils/spaceProps.ts @@ -1,19 +1,3 @@ -/* - * Copyright 2024 The Backstage Authors - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - export const spacePropsList = [ 'margin', 'marginBottom',