diff --git a/packages/canon/.storybook/manager.ts b/packages/canon/.storybook/manager.ts new file mode 100644 index 0000000000000..8557b339b09ed --- /dev/null +++ b/packages/canon/.storybook/manager.ts @@ -0,0 +1,14 @@ +import { addons } from '@storybook/manager-api'; +import { create } from '@storybook/theming'; + +const theme = create({ + base: 'light', + brandTitle: 'My custom Storybook', + brandUrl: 'https://example.com', + brandImage: 'logo.svg', + brandTarget: '_self', +}); + +addons.setConfig({ + theme, +}); diff --git a/packages/canon/.storybook/preview.tsx b/packages/canon/.storybook/preview.tsx index fc9736a6ed4e2..bb0c497d2d762 100644 --- a/packages/canon/.storybook/preview.tsx +++ b/packages/canon/.storybook/preview.tsx @@ -2,6 +2,10 @@ import React from 'react'; import type { Preview, ReactRenderer } from '@storybook/react'; import { withThemeByDataAttribute } from '@storybook/addon-themes'; +// Storybook specific styles +import '../docs/components/styles.css'; + +// Canon specific styles import '../src/theme/styles.css'; const preview: Preview = { diff --git a/packages/canon/docs/Home.mdx b/packages/canon/docs/Home.mdx index d2bda8cbf6473..479834303a51d 100644 --- a/packages/canon/docs/Home.mdx +++ b/packages/canon/docs/Home.mdx @@ -1,11 +1,11 @@ import { Unstyled } from '@storybook/blocks'; -import { Columns, Text, ComponentStatus, Banner } from './components'; +import { Columns, Text, ComponentStatus, Banner, Title } from './components'; - + Welcome to the Canon, the new design library for Backstage plugins. This project is still under active development but we will make sure to document the API as we go. We are aiming to improve the general UI of Backstage and @@ -18,32 +18,62 @@ import { Columns, Text, ComponentStatus, Banner } from './components'; will change until we reach a stable release. - + + Project Status + + + We are still in the process of documenting the API and building the + components. You can use the statuses below to see what is ready and what is + coming soon. If there is a component missing that you need, please let us know + by opening an issue on GitHub. + + + + + + - - + + - - - - - - - - + + + + + + + + + diff --git a/packages/canon/docs/Iconography.mdx b/packages/canon/docs/Iconography.mdx new file mode 100644 index 0000000000000..48cbd2e431f75 --- /dev/null +++ b/packages/canon/docs/Iconography.mdx @@ -0,0 +1,20 @@ +import { Unstyled, Source } from '@storybook/blocks'; +import { Title, Text, IconLibrary } from './components'; + + + +Iconography + + + All our default icons are provided by [Remix Icon](https://remixicon.com/). We + don't import all icons to reduce the bundle size but we cherry pick a nice + selection for you to use in your application. The list of names is set down + below. To use an icon, you can use the `Icon` component and pass the name of + the icon you want to use. + + +`} language="tsx" dark /> + + + + diff --git a/packages/canon/docs/components/IconLibrary/index.tsx b/packages/canon/docs/components/IconLibrary/index.tsx new file mode 100644 index 0000000000000..6e94c2c77753b --- /dev/null +++ b/packages/canon/docs/components/IconLibrary/index.tsx @@ -0,0 +1,37 @@ +/* + * 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 { Icon } from '@backstage/canon'; +import type { IconNames } from '@backstage/canon'; +import { defaultIcons } from '../../../src/components/Icon/icons'; +import { Text } from '../Text'; + +export const IconLibrary = () => { + const icons = Object.keys(defaultIcons); + + return ( +
+ {icons.map(icon => ( +
+
+ +
+ {icon} +
+ ))} +
+ ); +}; diff --git a/packages/canon/docs/components/IconLibrary/styles.css b/packages/canon/docs/components/IconLibrary/styles.css new file mode 100644 index 0000000000000..1a6f63ca793d8 --- /dev/null +++ b/packages/canon/docs/components/IconLibrary/styles.css @@ -0,0 +1,22 @@ +.icon-library { + display: grid; + grid-template-columns: repeat(6, 1fr); + gap: 1rem; +} + +.icon-library-item { + display: flex; + flex-direction: column; + align-items: center; + gap: 8px; +} + +.icon-library-item-icon { + display: flex; + width: 100%; + justify-content: center; + align-items: center; + height: 80px; + border: 1px solid #d3d3d3; + border-radius: 0.5rem; +} diff --git a/packages/canon/docs/components/index.ts b/packages/canon/docs/components/index.ts index 6acc4910cb85f..88a8cb0391af5 100644 --- a/packages/canon/docs/components/index.ts +++ b/packages/canon/docs/components/index.ts @@ -22,3 +22,4 @@ export * from './Columns'; export * from './ComponentStatus'; export * from './LayoutComponents'; export * from './Banner'; +export * from './IconLibrary'; diff --git a/packages/canon/docs/components/styles.css b/packages/canon/docs/components/styles.css new file mode 100644 index 0000000000000..63df6016094a3 --- /dev/null +++ b/packages/canon/docs/components/styles.css @@ -0,0 +1 @@ +@import './IconLibrary/styles.css'; diff --git a/packages/canon/header.png b/packages/canon/header.png new file mode 100644 index 0000000000000..507bd05ca7c82 Binary files /dev/null and b/packages/canon/header.png differ diff --git a/packages/canon/package.json b/packages/canon/package.json index f1e2e5d759d8e..4ec11b31fb7d6 100644 --- a/packages/canon/package.json +++ b/packages/canon/package.json @@ -38,11 +38,11 @@ }, "dependencies": { "@base_ui/react": "^1.0.0-alpha.3", + "@remixicon/react": "^4.5.0", "@vanilla-extract/css": "^1.16.0", "@vanilla-extract/dynamic": "^2.1.2", "@vanilla-extract/recipes": "^0.5.5", - "@vanilla-extract/sprinkles": "^1.6.3", - "lucide-react": "^0.460.0" + "@vanilla-extract/sprinkles": "^1.6.3" }, "devDependencies": { "@backstage/cli": "workspace:^", diff --git a/packages/canon/report.api.md b/packages/canon/report.api.md index 7106d5eedbdc4..723e08859b39e 100644 --- a/packages/canon/report.api.md +++ b/packages/canon/report.api.md @@ -9,8 +9,34 @@ import { CSSProperties } from 'react'; import { JSXElementConstructor } from 'react'; import { default as React_2 } from 'react'; import { ReactElement } from 'react'; -import { ReactNode } from 'react'; -import { ResponsiveArray } from '@vanilla-extract/sprinkles'; + +// @public (undocumented) +export type AlignItems = + | 'stretch' + | 'flex-start' + | 'center' + | 'flex-end' + | Partial< + Record + >; + +// @public (undocumented) +export type Background = + | 'background' + | 'elevation1' + | 'elevation2' + | 'transparent' + | Partial< + Record + >; + +// @public (undocumented) +export type BorderRadius = + | 'none' + | 'small' + | 'medium' + | 'full' + | Partial>; // @public (undocumented) export const Box: (props: BoxProps) => ReactElement< @@ -21,1450 +47,85 @@ export const Box: (props: BoxProps) => ReactElement< string | JSXElementConstructor >; -// @public -export type BoxProps = Parameters[0] & - Omit< - React.AllHTMLAttributes, - keyof Parameters[0] - > & { - as?: keyof JSX.IntrinsicElements; - }; +// @public (undocumented) +export interface BoxProps { + // (undocumented) + alignItems?: AlignItems; + // (undocumented) + as?: keyof JSX.IntrinsicElements; + // (undocumented) + background?: Background; + // (undocumented) + borderRadius?: BorderRadius; + // (undocumented) + children?: React.ReactNode; + // (undocumented) + className?: string; + // (undocumented) + color?: Color; + // (undocumented) + display?: Display; + // (undocumented) + flexDirection?: FlexDirection; + // (undocumented) + flexWrap?: FlexWrap; + // (undocumented) + gap?: Gap; + // (undocumented) + justifyContent?: JustifyContent; + // (undocumented) + margin?: Margin; + // (undocumented) + marginBottom?: MarginBottom; + // (undocumented) + marginLeft?: MarginLeft; + // (undocumented) + marginRight?: MarginRight; + // (undocumented) + marginTop?: MarginTop; + // (undocumented) + marginX?: MarginX; + // (undocumented) + marginY?: MarginY; + // (undocumented) + padding?: Padding; + // (undocumented) + paddingBottom?: PaddingBottom; + // (undocumented) + paddingLeft?: PaddingLeft; + // (undocumented) + paddingRight?: PaddingRight; + // (undocumented) + paddingTop?: PaddingTop; + // (undocumented) + paddingX?: PaddingX; + // (undocumented) + paddingY?: PaddingY; + // (undocumented) + style?: React.CSSProperties; +} // @public (undocumented) -export const boxSprinkles: (( - props: { - flexDirection?: - | ( - | 'column' - | 'row' - | { - xs?: 'column' | 'row' | undefined; - sm?: 'column' | 'row' | undefined; - md?: 'column' | 'row' | undefined; - lg?: 'column' | 'row' | undefined; - xl?: 'column' | 'row' | undefined; - '2xl'?: 'column' | 'row' | undefined; - } - | undefined - ) - | ResponsiveArray<2 | 1 | 3 | 4 | 5 | 6, 'column' | 'row' | null>; - justifyContent?: - | ( - | 'center' - | 'space-around' - | 'space-between' - | 'stretch' - | 'flex-end' - | 'flex-start' - | { - xs?: - | 'center' - | 'space-around' - | 'space-between' - | 'stretch' - | 'flex-end' - | 'flex-start' - | undefined; - sm?: - | 'center' - | 'space-around' - | 'space-between' - | 'stretch' - | 'flex-end' - | 'flex-start' - | undefined; - md?: - | 'center' - | 'space-around' - | 'space-between' - | 'stretch' - | 'flex-end' - | 'flex-start' - | undefined; - lg?: - | 'center' - | 'space-around' - | 'space-between' - | 'stretch' - | 'flex-end' - | 'flex-start' - | undefined; - xl?: - | 'center' - | 'space-around' - | 'space-between' - | 'stretch' - | 'flex-end' - | 'flex-start' - | undefined; - '2xl'?: - | 'center' - | 'space-around' - | 'space-between' - | 'stretch' - | 'flex-end' - | 'flex-start' - | undefined; - } - | undefined - ) - | ResponsiveArray< - 2 | 1 | 3 | 4 | 5 | 6, - | 'center' - | 'space-around' - | 'space-between' - | 'stretch' - | 'flex-end' - | 'flex-start' - | null - >; - alignItems?: - | ( - | 'center' - | 'stretch' - | 'flex-end' - | 'flex-start' - | { - xs?: 'center' | 'stretch' | 'flex-end' | 'flex-start' | undefined; - sm?: 'center' | 'stretch' | 'flex-end' | 'flex-start' | undefined; - md?: 'center' | 'stretch' | 'flex-end' | 'flex-start' | undefined; - lg?: 'center' | 'stretch' | 'flex-end' | 'flex-start' | undefined; - xl?: 'center' | 'stretch' | 'flex-end' | 'flex-start' | undefined; - '2xl'?: - | 'center' - | 'stretch' - | 'flex-end' - | 'flex-start' - | undefined; - } - | undefined - ) - | ResponsiveArray< - 2 | 1 | 3 | 4 | 5 | 6, - 'center' | 'stretch' | 'flex-end' | 'flex-start' | null - >; - borderRadius?: - | ( - | 'small' - | 'none' - | 'medium' - | 'full' - | { - xs?: 'small' | 'none' | 'medium' | 'full' | undefined; - sm?: 'small' | 'none' | 'medium' | 'full' | undefined; - md?: 'small' | 'none' | 'medium' | 'full' | undefined; - lg?: 'small' | 'none' | 'medium' | 'full' | undefined; - xl?: 'small' | 'none' | 'medium' | 'full' | undefined; - '2xl'?: 'small' | 'none' | 'medium' | 'full' | undefined; - } - | undefined - ) - | ResponsiveArray< - 2 | 1 | 3 | 4 | 5 | 6, - 'small' | 'none' | 'medium' | 'full' | null - >; - boxShadow?: - | ( - | 'small' - | 'medium' - | 'large' - | { - xs?: 'small' | 'medium' | 'large' | undefined; - sm?: 'small' | 'medium' | 'large' | undefined; - md?: 'small' | 'medium' | 'large' | undefined; - lg?: 'small' | 'medium' | 'large' | undefined; - xl?: 'small' | 'medium' | 'large' | undefined; - '2xl'?: 'small' | 'medium' | 'large' | undefined; - } - | undefined - ) - | ResponsiveArray< - 2 | 1 | 3 | 4 | 5 | 6, - 'small' | 'medium' | 'large' | null - >; - border?: - | ( - | 'none' - | 'error' - | 'thin' - | { - xs?: 'none' | 'error' | 'thin' | undefined; - sm?: 'none' | 'error' | 'thin' | undefined; - md?: 'none' | 'error' | 'thin' | undefined; - lg?: 'none' | 'error' | 'thin' | undefined; - xl?: 'none' | 'error' | 'thin' | undefined; - '2xl'?: 'none' | 'error' | 'thin' | undefined; - } - | undefined - ) - | ResponsiveArray< - 2 | 1 | 3 | 4 | 5 | 6, - 'none' | 'error' | 'thin' | null - >; - display?: - | ( - | 'flex' - | 'inline' - | 'none' - | 'block' - | { - xs?: 'flex' | 'inline' | 'none' | 'block' | undefined; - sm?: 'flex' | 'inline' | 'none' | 'block' | undefined; - md?: 'flex' | 'inline' | 'none' | 'block' | undefined; - lg?: 'flex' | 'inline' | 'none' | 'block' | undefined; - xl?: 'flex' | 'inline' | 'none' | 'block' | undefined; - '2xl'?: 'flex' | 'inline' | 'none' | 'block' | undefined; - } - | undefined - ) - | ResponsiveArray< - 2 | 1 | 3 | 4 | 5 | 6, - 'flex' | 'inline' | 'none' | 'block' | null - >; - paddingTop?: - | ( - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | { - xs?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - sm?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - md?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - lg?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - xl?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - '2xl'?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - } - | undefined - ) - | ResponsiveArray< - 2 | 1 | 3 | 4 | 5 | 6, - 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxs' | 'xxl' | null - >; - paddingBottom?: - | ( - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | { - xs?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - sm?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - md?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - lg?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - xl?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - '2xl'?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - } - | undefined - ) - | ResponsiveArray< - 2 | 1 | 3 | 4 | 5 | 6, - 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxs' | 'xxl' | null - >; - paddingLeft?: - | ( - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | { - xs?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - sm?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - md?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - lg?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - xl?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - '2xl'?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - } - | undefined - ) - | ResponsiveArray< - 2 | 1 | 3 | 4 | 5 | 6, - 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxs' | 'xxl' | null - >; - paddingRight?: - | ( - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | { - xs?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - sm?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - md?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - lg?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - xl?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - '2xl'?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - } - | undefined - ) - | ResponsiveArray< - 2 | 1 | 3 | 4 | 5 | 6, - 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxs' | 'xxl' | null - >; - marginTop?: - | ( - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | { - xs?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - sm?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - md?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - lg?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - xl?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - '2xl'?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - } - | undefined - ) - | ResponsiveArray< - 2 | 1 | 3 | 4 | 5 | 6, - 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxs' | 'xxl' | null - >; - marginBottom?: - | ( - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | { - xs?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - sm?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - md?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - lg?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - xl?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - '2xl'?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - } - | undefined - ) - | ResponsiveArray< - 2 | 1 | 3 | 4 | 5 | 6, - 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxs' | 'xxl' | null - >; - marginLeft?: - | ( - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | { - xs?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - sm?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - md?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - lg?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - xl?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - '2xl'?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - } - | undefined - ) - | ResponsiveArray< - 2 | 1 | 3 | 4 | 5 | 6, - 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxs' | 'xxl' | null - >; - marginRight?: - | ( - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | { - xs?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - sm?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - md?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - lg?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - xl?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - '2xl'?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - } - | undefined - ) - | ResponsiveArray< - 2 | 1 | 3 | 4 | 5 | 6, - 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxs' | 'xxl' | null - >; - gap?: - | ( - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | { - xs?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - sm?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - md?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - lg?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - xl?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - '2xl'?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - } - | undefined - ) - | ResponsiveArray< - 2 | 1 | 3 | 4 | 5 | 6, - 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxs' | 'xxl' | null - >; - flexWrap?: - | ( - | 'nowrap' - | 'wrap' - | { - xs?: 'nowrap' | 'wrap' | undefined; - sm?: 'nowrap' | 'wrap' | undefined; - md?: 'nowrap' | 'wrap' | undefined; - lg?: 'nowrap' | 'wrap' | undefined; - xl?: 'nowrap' | 'wrap' | undefined; - '2xl'?: 'nowrap' | 'wrap' | undefined; - } - | undefined - ) - | ResponsiveArray<2 | 1 | 3 | 4 | 5 | 6, 'nowrap' | 'wrap' | null>; - padding?: - | ( - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | { - xs?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - sm?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - md?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - lg?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - xl?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - '2xl'?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - } - | undefined - ) - | ResponsiveArray< - 2 | 1 | 3 | 4 | 5 | 6, - 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxs' | 'xxl' | null - >; - paddingX?: - | ( - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | { - xs?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - sm?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - md?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - lg?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - xl?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - '2xl'?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - } - | undefined - ) - | ResponsiveArray< - 2 | 1 | 3 | 4 | 5 | 6, - 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxs' | 'xxl' | null - >; - paddingY?: - | ( - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | { - xs?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - sm?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - md?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - lg?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - xl?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - '2xl'?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - } - | undefined - ) - | ResponsiveArray< - 2 | 1 | 3 | 4 | 5 | 6, - 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxs' | 'xxl' | null - >; - margin?: - | ( - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | { - xs?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - sm?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - md?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - lg?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - xl?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - '2xl'?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - } - | undefined - ) - | ResponsiveArray< - 2 | 1 | 3 | 4 | 5 | 6, - 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxs' | 'xxl' | null - >; - marginX?: - | ( - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | { - xs?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - sm?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - md?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - lg?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - xl?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - '2xl'?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - } - | undefined - ) - | ResponsiveArray< - 2 | 1 | 3 | 4 | 5 | 6, - 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxs' | 'xxl' | null - >; - marginY?: - | ( - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | { - xs?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - sm?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - md?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - lg?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - xl?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - '2xl'?: - | 'none' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'xxs' - | 'xxl' - | undefined; - } - | undefined - ) - | ResponsiveArray< - 2 | 1 | 3 | 4 | 5 | 6, - 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxs' | 'xxl' | null - >; - } & { - color?: - | 'error' - | 'primary' - | 'secondary' - | { - light?: 'error' | 'primary' | 'secondary' | undefined; - dark?: 'error' | 'primary' | 'secondary' | undefined; - } - | undefined; - background?: - | 'transparent' - | 'background' - | 'elevation1' - | 'elevation2' - | { - light?: - | 'transparent' - | 'background' - | 'elevation1' - | 'elevation2' - | undefined; - dark?: - | 'transparent' - | 'background' - | 'elevation1' - | 'elevation2' - | undefined; - } - | undefined; - }, -) => string) & { - properties: Set< - | 'alignItems' - | 'background' - | 'border' - | 'borderRadius' - | 'boxShadow' - | 'color' - | 'display' - | 'flexDirection' - | 'flexWrap' - | 'gap' - | 'justifyContent' - | 'margin' - | 'marginBottom' - | 'marginLeft' - | 'marginRight' - | 'marginTop' - | 'padding' - | 'paddingBottom' - | 'paddingLeft' - | 'paddingRight' - | 'paddingTop' - | 'marginX' - | 'marginY' - | 'paddingX' - | 'paddingY' - >; +export type Breakpoint = keyof typeof breakpoints; + +// @public (undocumented) +export const breakpoints: { + xs: {}; + sm: { + '@media': string; + }; + md: { + '@media': string; + }; + lg: { + '@media': string; + }; + xl: { + '@media': string; + }; + '2xl': { + '@media': string; + }; }; // @public (undocumented) @@ -1494,24 +155,140 @@ export interface ButtonProps { variant?: 'primary' | 'secondary'; } +// @public (undocumented) +export type Color = + | 'primary' + | 'secondary' + | 'error' + | Partial>; + +// @public (undocumented) +export type Display = + | 'flex' + | 'none' + | 'inline' + | 'block' + | Partial>; + +// @public (undocumented) +export type FlexDirection = + | 'row' + | 'column' + | Partial>; + +// @public (undocumented) +export type FlexWrap = + | 'wrap' + | 'nowrap' + | Partial>; + +// @public (undocumented) +export type Gap = Space | Partial>; + // @public (undocumented) export const Icon: ({ name }: { name: IconNames }) => React_2.JSX.Element; +// @public (undocumented) +export type IconMap = Partial>; + // @public (undocumented) export type IconNames = - | 'ArrowDown' - | 'ArrowLeft' - | 'ArrowRight' - | 'ArrowUp' - | 'Cloud' - | 'CustomIcon'; + | 'arrowDown' + | 'arrowLeft' + | 'arrowRight' + | 'arrowUp' + | 'cloud' + | 'heart' + | 'plus' + | 'trash'; // @public (undocumented) -export const IconProvider: ({ - children, - overrides, -}: { - children: ReactNode; - overrides: Partial>; -}) => React_2.JSX.Element; +export type JustifyContent = + | 'stretch' + | 'flex-start' + | 'center' + | 'flex-end' + | 'space-around' + | 'space-between' + | Partial< + Record< + Breakpoint, + | 'stretch' + | 'flex-start' + | 'center' + | 'flex-end' + | 'space-around' + | 'space-between' + > + >; + +// @public (undocumented) +export type Margin = Space | Partial>; + +// @public (undocumented) +export type MarginBottom = Space | Partial>; + +// @public (undocumented) +export type MarginLeft = Space | Partial>; + +// @public (undocumented) +export type MarginRight = Space | Partial>; + +// @public (undocumented) +export type MarginTop = Space | Partial>; + +// @public (undocumented) +export type MarginX = Space | Partial>; + +// @public (undocumented) +export type MarginY = Space | Partial>; + +// @public (undocumented) +export type Padding = Space | Partial>; + +// @public (undocumented) +export type PaddingBottom = Space | Partial>; + +// @public (undocumented) +export type PaddingLeft = Space | Partial>; + +// @public (undocumented) +export type PaddingRight = Space | Partial>; + +// @public (undocumented) +export type PaddingTop = Space | Partial>; + +// @public (undocumented) +export type PaddingX = Space | Partial>; + +// @public (undocumented) +export type PaddingY = Space | Partial>; + +// @public (undocumented) +export type Space = keyof typeof space; + +// @public (undocumented) +export const space: { + none: number; + xxs: string; + xs: string; + sm: string; + md: string; + lg: string; + xl: string; + xxl: string; +}; + +// @public (undocumented) +export type Theme = keyof typeof themes; + +// @public (undocumented) +export const themes: { + light: { + selector: string; + }; + dark: { + selector: string; + }; +}; ``` diff --git a/packages/canon/src/components/Box/Box.tsx b/packages/canon/src/components/Box/Box.tsx index d1cb2895064b0..960220a949397 100644 --- a/packages/canon/src/components/Box/Box.tsx +++ b/packages/canon/src/components/Box/Box.tsx @@ -17,19 +17,7 @@ import { createElement } from 'react'; import { boxSprinkles } from './sprinkles.css'; import { base } from './box.css'; - -/** - * Properties for {@link Box} - * - * @public - */ -export type BoxProps = Parameters[0] & - Omit< - React.AllHTMLAttributes, - keyof Parameters[0] - > & { - as?: keyof JSX.IntrinsicElements; - }; +import { BoxProps } from './types'; /** @public */ export const Box = (props: BoxProps) => { diff --git a/packages/canon/src/components/Box/box.mdx b/packages/canon/src/components/Box/Docs.mdx similarity index 100% rename from packages/canon/src/components/Box/box.mdx rename to packages/canon/src/components/Box/Docs.mdx diff --git a/packages/canon/src/components/Box/docs/spacing-table.tsx b/packages/canon/src/components/Box/docs/spacing-table.tsx index 7d98576b0e820..32b1eac1b9614 100644 --- a/packages/canon/src/components/Box/docs/spacing-table.tsx +++ b/packages/canon/src/components/Box/docs/spacing-table.tsx @@ -20,8 +20,6 @@ import { Chip } from '../../../../docs/components'; import { listResponsiveValues } from '../../../utils/list-values'; import { responsiveProperties } from '../sprinkles.css'; -console.log(responsiveProperties.styles); - export const SpacingTable = () => { return ( diff --git a/packages/canon/src/components/Box/index.tsx b/packages/canon/src/components/Box/index.tsx index 589528cd1d467..f275aa352c527 100644 --- a/packages/canon/src/components/Box/index.tsx +++ b/packages/canon/src/components/Box/index.tsx @@ -14,5 +14,5 @@ * limitations under the License. */ export { Box } from './Box'; -export type { BoxProps } from './Box'; -export { boxSprinkles } from './sprinkles.css'; +export type * from './types'; +export { breakpoints, space, themes } from './properties'; diff --git a/packages/canon/src/components/Box/properties.ts b/packages/canon/src/components/Box/properties.ts index ccf6849976f87..37cb53666c7af 100644 --- a/packages/canon/src/components/Box/properties.ts +++ b/packages/canon/src/components/Box/properties.ts @@ -14,6 +14,7 @@ * limitations under the License. */ +/** @public */ export const breakpoints = { xs: {}, sm: { '@media': 'screen and (min-width: 640px)' }, @@ -23,6 +24,13 @@ export const breakpoints = { '2xl': { '@media': 'screen and (min-width: 1536px)' }, }; +/** @public */ +export const themes = { + light: { selector: '[data-theme="light"] &' }, + dark: { selector: '[data-theme="dark"] &' }, +}; + +/** @public */ export const space = { none: 0, xxs: 'var(--canon-space-xxs)', diff --git a/packages/canon/src/components/Box/sprinkles.css.ts b/packages/canon/src/components/Box/sprinkles.css.ts index 12a8118316049..36904cb2ab3d6 100644 --- a/packages/canon/src/components/Box/sprinkles.css.ts +++ b/packages/canon/src/components/Box/sprinkles.css.ts @@ -97,7 +97,6 @@ export const colorProperties = defineProperties({ }, }); -/** @public */ export const boxSprinkles = createSprinkles( responsiveProperties, colorProperties, diff --git a/packages/canon/src/components/Box/types.ts b/packages/canon/src/components/Box/types.ts new file mode 100644 index 0000000000000..3f307bf2ebbb4 --- /dev/null +++ b/packages/canon/src/components/Box/types.ts @@ -0,0 +1,176 @@ +/* + * 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 { breakpoints, space, themes } from './properties'; + +/** @public */ +export type Breakpoint = keyof typeof breakpoints; + +/** @public */ +export type Space = keyof typeof space; + +/** @public */ +export type Theme = keyof typeof themes; + +/** @public */ +export type Display = + | 'flex' + | 'none' + | 'inline' + | 'block' + | Partial>; + +/** @public */ +export type FlexDirection = + | 'row' + | 'column' + | Partial>; + +/** @public */ +export type FlexWrap = + | 'wrap' + | 'nowrap' + | Partial>; + +/** @public */ +export type JustifyContent = + | 'stretch' + | 'flex-start' + | 'center' + | 'flex-end' + | 'space-around' + | 'space-between' + | Partial< + Record< + Breakpoint, + | 'stretch' + | 'flex-start' + | 'center' + | 'flex-end' + | 'space-around' + | 'space-between' + > + >; + +/** @public */ +export type AlignItems = + | 'stretch' + | 'flex-start' + | 'center' + | 'flex-end' + | Partial< + Record + >; + +/** @public */ +export type BorderRadius = + | 'none' + | 'small' + | 'medium' + | 'full' + | Partial>; + +/** @public */ +export type Gap = Space | Partial>; + +/** @public */ +export type PaddingLeft = Space | Partial>; + +/** @public */ +export type PaddingRight = Space | Partial>; + +/** @public */ +export type PaddingTop = Space | Partial>; + +/** @public */ +export type PaddingBottom = Space | Partial>; + +/** @public */ +export type Padding = Space | Partial>; + +/** @public */ +export type PaddingX = Space | Partial>; + +/** @public */ +export type PaddingY = Space | Partial>; + +/** @public */ +export type MarginLeft = Space | Partial>; + +/** @public */ +export type MarginRight = Space | Partial>; + +/** @public */ +export type MarginTop = Space | Partial>; + +/** @public */ +export type MarginBottom = Space | Partial>; + +/** @public */ +export type Margin = Space | Partial>; + +/** @public */ +export type MarginX = Space | Partial>; + +/** @public */ +export type MarginY = Space | Partial>; + +/** @public */ +export type Background = + | 'background' + | 'elevation1' + | 'elevation2' + | 'transparent' + | Partial< + Record + >; + +/** @public */ +export type Color = + | 'primary' + | 'secondary' + | 'error' + | Partial>; + +/** @public */ +export interface BoxProps { + as?: keyof JSX.IntrinsicElements; + background?: Background; + children?: React.ReactNode; + color?: Color; + display?: Display; + flexDirection?: FlexDirection; + flexWrap?: FlexWrap; + justifyContent?: JustifyContent; + alignItems?: AlignItems; + borderRadius?: BorderRadius; + gap?: Gap; + padding?: Padding; + paddingLeft?: PaddingLeft; + paddingRight?: PaddingRight; + paddingTop?: PaddingTop; + paddingBottom?: PaddingBottom; + paddingX?: PaddingX; + paddingY?: PaddingY; + margin?: Margin; + marginLeft?: MarginLeft; + marginRight?: MarginRight; + marginTop?: MarginTop; + marginBottom?: MarginBottom; + marginX?: MarginX; + marginY?: MarginY; + className?: string; + style?: React.CSSProperties; +} diff --git a/packages/canon/src/components/Button/Button.stories.tsx b/packages/canon/src/components/Button/Button.stories.tsx index 7359d36f101b6..7dddbd033b1e0 100644 --- a/packages/canon/src/components/Button/Button.stories.tsx +++ b/packages/canon/src/components/Button/Button.stories.tsx @@ -71,9 +71,9 @@ export const WithIcons: Story = { }, render: args => (
-
), }; @@ -84,9 +84,9 @@ export const FullWidth: Story = { }, render: args => ( - ); }; diff --git a/packages/canon/src/components/Icon/Icon.stories.tsx b/packages/canon/src/components/Icon/Icon.stories.tsx index 6b53ef66b2c71..61e837c5ed60e 100644 --- a/packages/canon/src/components/Icon/Icon.stories.tsx +++ b/packages/canon/src/components/Icon/Icon.stories.tsx @@ -17,8 +17,8 @@ import React from 'react'; import { Meta, StoryObj } from '@storybook/react'; import { Icon } from './Icon'; -import { IconProvider } from './context'; -import * as LucideIcons from 'lucide-react'; +import { ThemeProvider } from '../../theme/context'; +import { defaultIcons } from './icons'; const meta = { title: 'Components/Icon', @@ -26,15 +26,14 @@ const meta = { parameters: { layout: 'centered', }, - tags: ['autodocs'], argTypes: { name: { control: 'select', - options: Object.keys(LucideIcons), + options: Object.keys(defaultIcons), }, }, args: { - name: 'ArrowDown', + name: 'heart', }, } satisfies Meta; @@ -43,40 +42,19 @@ type Story = StoryObj; export const Primary: Story = { args: { - name: 'ArrowDown', - }, -}; - -export const CustomIcon: Story = { - args: { - name: 'CustomIcon', + name: 'heart', }, }; export const WithCustomIcon: Story = { args: { - name: 'ArrowDown', - }, - decorators: [ - Story => ( -
Custom Icon
}}> - - - ), - ], -}; - -export const WithCustomIconOverride: Story = { - args: { - name: 'CustomIcon', + name: 'arrowDown', }, decorators: [ Story => ( -
Custom Super Icon
}} - > +
Custom Icon
}}> - + ), ], }; diff --git a/packages/canon/src/components/Icon/Icon.tsx b/packages/canon/src/components/Icon/Icon.tsx index 9bed7f10552e5..d7891c23cfef7 100644 --- a/packages/canon/src/components/Icon/Icon.tsx +++ b/packages/canon/src/components/Icon/Icon.tsx @@ -15,18 +15,19 @@ */ import React from 'react'; -import { useIcons, IconNames } from './context'; +import { useTheme } from '../../theme/context'; +import type { IconNames } from './types'; /** @public */ export const Icon = ({ name }: { name: IconNames }) => { - const { icons } = useIcons(); + const { icons } = useTheme(); - const LucideIcon = icons[name]; + const RemixIcon = icons[name]; - if (!LucideIcon) { + if (!RemixIcon) { console.error(`Icon "${name}" not found.`); return ; // Return default icon perhaps? } - return ; + return ; }; diff --git a/packages/canon/src/components/Icon/icons.ts b/packages/canon/src/components/Icon/icons.ts new file mode 100644 index 0000000000000..8c6a1248cb361 --- /dev/null +++ b/packages/canon/src/components/Icon/icons.ts @@ -0,0 +1,41 @@ +/* + * 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. + */ + +// We can add custom icons to the list outside of Remix + +import type { IconMap } from './types'; +import { + RiHeartFill, + RiArrowDownFill, + RiCloudFill, + RiArrowLeftFill, + RiArrowRightFill, + RiArrowUpFill, + RiDeleteBin6Line, + RiAddLine, +} from '@remixicon/react'; + +// List of default icons +export const defaultIcons: IconMap = { + arrowDown: RiArrowDownFill, + arrowLeft: RiArrowLeftFill, + arrowRight: RiArrowRightFill, + arrowUp: RiArrowUpFill, + cloud: RiCloudFill, + heart: RiHeartFill, + plus: RiAddLine, + trash: RiDeleteBin6Line, +}; diff --git a/packages/canon/src/components/Icon/index.tsx b/packages/canon/src/components/Icon/index.tsx index 441dbe0c3bafb..3e7564c77ee09 100644 --- a/packages/canon/src/components/Icon/index.tsx +++ b/packages/canon/src/components/Icon/index.tsx @@ -15,5 +15,4 @@ */ export * from './Icon'; -export { IconProvider } from './context'; -export type { IconNames } from './context'; +export type * from './types'; diff --git a/packages/canon/src/components/Icon/custom-icon.tsx b/packages/canon/src/components/Icon/types.ts similarity index 68% rename from packages/canon/src/components/Icon/custom-icon.tsx rename to packages/canon/src/components/Icon/types.ts index 27c3fd45175e3..6e16e627d4341 100644 --- a/packages/canon/src/components/Icon/custom-icon.tsx +++ b/packages/canon/src/components/Icon/types.ts @@ -14,10 +14,16 @@ * limitations under the License. */ -import React from 'react'; +/** @public */ +export type IconNames = + | 'arrowDown' + | 'arrowLeft' + | 'arrowRight' + | 'arrowUp' + | 'cloud' + | 'heart' + | 'plus' + | 'trash'; -export const CustomIcon = () => ( - - - -); +/** @public */ +export type IconMap = Partial>; diff --git a/packages/canon/src/components/Inline/Inline.tsx b/packages/canon/src/components/Inline/Inline.tsx index 48b0a14eb5cda..db9f4bd9c3cb3 100644 --- a/packages/canon/src/components/Inline/Inline.tsx +++ b/packages/canon/src/components/Inline/Inline.tsx @@ -15,8 +15,9 @@ */ import React from 'react'; -import { Box, BoxProps } from '../Box/Box'; +import { Box } from '../Box/Box'; import { alignToFlexAlign } from '../../utils/align'; +import type { BoxProps } from '../Box/types'; export const validInlineComponents = [ 'div', diff --git a/packages/canon/src/components/Stack/Stack.tsx b/packages/canon/src/components/Stack/Stack.tsx index a2bc74d4c84f5..121ab1b1767ce 100644 --- a/packages/canon/src/components/Stack/Stack.tsx +++ b/packages/canon/src/components/Stack/Stack.tsx @@ -15,9 +15,9 @@ */ import React from 'react'; -import { Box, BoxProps } from '../Box/Box'; +import { Box } from '../Box/Box'; import { alignToFlexAlign } from '../../utils/align'; - +import type { BoxProps } from '../Box/types'; const validStackComponents = [ 'div', 'span', diff --git a/packages/canon/src/components/Icon/context.tsx b/packages/canon/src/theme/context.tsx similarity index 54% rename from packages/canon/src/components/Icon/context.tsx rename to packages/canon/src/theme/context.tsx index 0cfc6252d79c1..77f43927f20e6 100644 --- a/packages/canon/src/components/Icon/context.tsx +++ b/packages/canon/src/theme/context.tsx @@ -15,39 +15,19 @@ */ import React, { createContext, useContext, ReactNode } from 'react'; -import { ArrowUp, ArrowDown, ArrowLeft, ArrowRight, Cloud } from 'lucide-react'; -import { CustomIcon } from './custom-icon'; +import { IconMap, IconNames } from '../components/Icon/types'; +import { defaultIcons } from '../components/Icon/icons'; -// List of icons available that can also be overridden. -/** @public */ -export type IconNames = - | 'ArrowDown' - | 'ArrowLeft' - | 'ArrowRight' - | 'ArrowUp' - | 'Cloud' - | 'CustomIcon'; - -type IconMap = Partial>; - -interface IconContextProps { +interface ThemeContextProps { icons: IconMap; } -// Create a default icon map with only the necessary icons -const defaultIcons: IconMap = { - ArrowDown, - ArrowLeft, - ArrowRight, - ArrowUp, - Cloud, - CustomIcon, -}; - -const IconContext = createContext({ icons: defaultIcons }); +const ThemeContext = createContext({ + icons: defaultIcons, +}); /** @public */ -export const IconProvider = ({ +export const ThemeProvider = ({ children, overrides, }: { @@ -58,11 +38,11 @@ export const IconProvider = ({ const combinedIcons = { ...defaultIcons, ...overrides }; return ( - + {children} - + ); }; /** @public */ -export const useIcons = () => useContext(IconContext); +export const useTheme = () => useContext(ThemeContext); diff --git a/packages/canon/static/favicon.svg b/packages/canon/static/favicon.svg new file mode 100644 index 0000000000000..12cad81e95316 --- /dev/null +++ b/packages/canon/static/favicon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/packages/canon/static/header.png b/packages/canon/static/header.png index 45aadcf5b4c25..507bd05ca7c82 100644 Binary files a/packages/canon/static/header.png and b/packages/canon/static/header.png differ diff --git a/packages/canon/static/logo.svg b/packages/canon/static/logo.svg new file mode 100644 index 0000000000000..eb2b8aeaf29a7 --- /dev/null +++ b/packages/canon/static/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index 132103a0be0f9..3075fcd983830 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3823,6 +3823,7 @@ __metadata: "@backstage/cli": "workspace:^" "@base_ui/react": ^1.0.0-alpha.3 "@chromatic-com/storybook": ^3.2.2 + "@remixicon/react": ^4.5.0 "@storybook/addon-essentials": ^8.4.5 "@storybook/addon-interactions": ^8.4.5 "@storybook/addon-styling-webpack": ^1.0.1 @@ -3843,7 +3844,6 @@ __metadata: "@vanilla-extract/webpack-plugin": ^2.3.14 eslint-plugin-storybook: ^0.11.1 globals: ^15.11.0 - lucide-react: ^0.460.0 mini-css-extract-plugin: ^2.9.2 react: ^18.0.2 react-dom: ^18.0.2 @@ -15458,6 +15458,15 @@ __metadata: languageName: node linkType: hard +"@remixicon/react@npm:^4.5.0": + version: 4.5.0 + resolution: "@remixicon/react@npm:4.5.0" + peerDependencies: + react: ">=18.2.0" + checksum: e37b61090954954601d35367a740b7be30c105a49f67eaa5a697db16d4668d71d9fd94b339da6d449a254736d5af3b567d3694021b79d3c82fe28afb818830bc + languageName: node + linkType: hard + "@repeaterjs/repeater@npm:^3.0.4": version: 3.0.5 resolution: "@repeaterjs/repeater@npm:3.0.5" @@ -35193,15 +35202,6 @@ __metadata: languageName: node linkType: hard -"lucide-react@npm:^0.460.0": - version: 0.460.0 - resolution: "lucide-react@npm:0.460.0" - peerDependencies: - react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0-rc - checksum: 6106dc16dd7ce7928d6136e81c9e84e87e1b6b0910a0c78777a387c795c0512755e8bf4c602ab8f09518919999a494ed86ba7190863e8e7aec6c82665147ead3 - languageName: node - linkType: hard - "lunr@npm:^2.3.9": version: 2.3.9 resolution: "lunr@npm:2.3.9"