diff --git a/packages/canon/.storybook/manager.ts b/packages/canon/.storybook/manager.ts new file mode 100644 index 0000000000..8557b339b0 --- /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 fc9736a6ed..bb0c497d2d 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 d2bda8cbf6..479834303a 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 0000000000..48cbd2e431 --- /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 0000000000..6e94c2c777 --- /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 0000000000..1a6f63ca79 --- /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 6acc4910cb..88a8cb0391 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 0000000000..63df601609 --- /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 0000000000..507bd05ca7 Binary files /dev/null and b/packages/canon/header.png differ diff --git a/packages/canon/package.json b/packages/canon/package.json index f1e2e5d759..4ec11b31fb 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 7106d5eedb..723e08859b 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 IconNames = - | 'ArrowDown' - | 'ArrowLeft' - | 'ArrowRight' - | 'ArrowUp' - | 'Cloud' - | 'CustomIcon'; +export type IconMap = Partial>; // @public (undocumented) -export const IconProvider: ({ - children, - overrides, -}: { - children: ReactNode; - overrides: Partial>; -}) => React_2.JSX.Element; +export type IconNames = + | 'arrowDown' + | 'arrowLeft' + | 'arrowRight' + | 'arrowUp' + | 'cloud' + | 'heart' + | 'plus' + | 'trash'; + +// @public (undocumented) +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 d1cb289506..960220a949 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 7d98576b0e..32b1eac1b9 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 589528cd1d..f275aa352c 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 ccf6849976..37cb53666c 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 12a8118316..36904cb2ab 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 0000000000..3f307bf2eb --- /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 7359d36f10..7dddbd033b 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 6b53ef66b2..61e837c5ed 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', + name: 'arrowDown', }, decorators: [ Story => ( -
Custom Icon
}}> +
Custom Icon
}}> - - ), - ], -}; - -export const WithCustomIconOverride: Story = { - args: { - name: 'CustomIcon', - }, - decorators: [ - Story => ( -
Custom Super Icon
}} - > - - + ), ], }; diff --git a/packages/canon/src/components/Icon/Icon.tsx b/packages/canon/src/components/Icon/Icon.tsx index 9bed7f1055..d7891c23cf 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 0000000000..8c6a1248cb --- /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 441dbe0c3b..3e7564c77e 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 27c3fd4517..6e16e627d4 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 48b0a14eb5..db9f4bd9c3 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 a2bc74d4c8..121ab1b176 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 0cfc6252d7..77f43927f2 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 0000000000..12cad81e95 --- /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 45aadcf5b4..507bd05ca7 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 0000000000..eb2b8aeaf2 --- /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 132103a0be..3075fcd983 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"