diff --git a/packages/canon/.storybook/main.ts b/packages/canon/.storybook/main.ts index cf7921268e..8bf24a7e23 100644 --- a/packages/canon/.storybook/main.ts +++ b/packages/canon/.storybook/main.ts @@ -9,11 +9,7 @@ function getAbsolutePath(value: string): any { return dirname(require.resolve(join(value, 'package.json'))); } const config: StorybookConfig = { - stories: [ - '../docs/**/*.mdx', - '../src/components/**/*.mdx', - '../src/components/**/*.stories.@(js|jsx|mjs|ts|tsx)', - ], + stories: ['../src/components/**/*.stories.@(js|jsx|mjs|ts|tsx)'], staticDirs: ['../static'], addons: [ getAbsolutePath('@storybook/addon-webpack5-compiler-swc'), diff --git a/packages/canon/.storybook/preview.tsx b/packages/canon/.storybook/preview.tsx index 1ac53acd86..867461818b 100644 --- a/packages/canon/.storybook/preview.tsx +++ b/packages/canon/.storybook/preview.tsx @@ -2,9 +2,6 @@ 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/css/core.css'; import '../src/css/components.css'; diff --git a/packages/canon/docs/Home.mdx b/packages/canon/docs/Home.mdx deleted file mode 100644 index 5b85ab15ad..0000000000 --- a/packages/canon/docs/Home.mdx +++ /dev/null @@ -1,91 +0,0 @@ -import { Unstyled } from '@storybook/blocks'; -import { - Columns, - Text, - ComponentStatus, - Banner, - Title, - Roadmap, -} from './components'; -import { list } from './components/Roadmap/list'; - - - - - - - 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 - plugins across Backstage. This new library will take time to build but we are - building it incrementally with not conflict with the existing theming system. - - - - This library is still under heavy construction. Please be aware that the API - will change until we reach a stable release. - - - - Component 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. - - - - - - - - - - - - - - - - - - - - - - Roadmap - - - - - diff --git a/packages/canon/docs/Iconography.mdx b/packages/canon/docs/Iconography.mdx deleted file mode 100644 index 83d181af12..0000000000 --- a/packages/canon/docs/Iconography.mdx +++ /dev/null @@ -1,22 +0,0 @@ -import { Unstyled, Source, Meta } 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/Layout.mdx b/packages/canon/docs/Layout.mdx deleted file mode 100644 index 9145f71aed..0000000000 --- a/packages/canon/docs/Layout.mdx +++ /dev/null @@ -1,54 +0,0 @@ -import { Unstyled, Source, Meta } from '@storybook/blocks'; -import { Title, Text, LayoutComponents } from './components'; -import * as Table from './components/Table'; - - - - - -Layout - - Canon is made for extensibility. We built this library to make it easy for any - Backstage plugin creator to be able to build their ideas at speed ensuring - consistency across the rest of your ecosystem. Each component is designed to - be editable to match your need but sometimes you want to have more control - over the layout of your page. To help you with that, we created a set of - layout components that you can use to build your own layouts. All of these - components are built to extend on our theming system, making it easy for you - to build your own layouts. Sometimes these components are not enough so we - created a set of helpers to be used with any CSS-in-JS library. - - -Layout Components - - - We built a couple of layout components to help you build responsive elements - that will be consistent with the rest of your Backstage instance. These - components are opinionated and use TypeScript to ensure that the props you - provide are the ones coming from the theme. - - - - Hello World - - Project 1 - Project 2 - -`} - language="tsx" - dark -/> - - - -Layout Helpers - - - Sometimes you want to use global tokens dynamically outside of React - components. To help you with that we would like to provide a set of helpers - that you can use in your code. These helpers are not available just yet but we - are working on it. - - - diff --git a/packages/canon/docs/Responsive.mdx b/packages/canon/docs/Responsive.mdx deleted file mode 100644 index 85292ee555..0000000000 --- a/packages/canon/docs/Responsive.mdx +++ /dev/null @@ -1,150 +0,0 @@ -import { Unstyled, Meta, Canvas, Source } from '@storybook/blocks'; -import { - Columns, - Text, - ComponentStatus, - Banner, - Title, - Roadmap, -} from './components'; -import { list } from './components/Roadmap/list'; -import * as HeadingStories from '../src/components/Heading/Heading.stories'; -import * as TextStories from '../src/components/Text/Text.stories'; -import * as Table from './components/Table'; -import { Chip } from './components/Chip'; - - - - - -Responsive - - Canon is built on a responsive design system, meaning that the components are - designed to adapt to different screen sizes. By default we offer a set of - breakpoints that you can use to create responsive components. - - - - Breakpoints - - - - - - Breakpoint prefix - Minimum width - CSS - - - - - - xs - - - 0px - - - {`{ ... }`} - - - - - sm - - - 640px - - - {`@media (min-width: 640px) { ... }`} - - - - - md - - - 768px - - - {`@media (min-width: 768px) { ... }`} - - - - - lg - - - 1024px - - - {`@media (min-width: 1024px) { ... }`} - - - - - xl - - - 1280px - - - {`@media (min-width: 1280px) { ... }`} - - - - - 2xl - - - 1536px - - - {`@media (min-width: 1536px) { ... }`} - - - - - -Responsive components - - - Canon components are designed to be responsive, meaning that they will adapt - to different screen sizes. Not every component is responsive, but the ones - that are will have a prop to control the responsive behavior. - - - - The behaviour is the same for each component. For each prop, instead of adding - the value, you add an object with the value and the breakpoint prefix. - - -Button - -// Responsive value - -`} dark /> - -How to update breakpoints - - - The set of keys are not to be changed, but you can update the minimum width of - each breakpoint in the theme provider. - - -`} - dark -/> - - diff --git a/packages/canon/docs/Theme.mdx b/packages/canon/docs/Theme.mdx deleted file mode 100644 index 1ea7c5c4c6..0000000000 --- a/packages/canon/docs/Theme.mdx +++ /dev/null @@ -1,231 +0,0 @@ -import { Unstyled, Source, Meta } from '@storybook/blocks'; -import { Title, Text, Chip } from './components'; -import * as Table from './components/Table'; - -{' '} - - - -Theming - - Backstage ships with a default theme with a light and dark mode variant. The - themes are provided as a part of the `@backstage/canon` package, which also - includes utilities for customizing the default theme, or creating completely - new themes. - - -Light & Dark modes - - By default we are supporting both light and dark modes. Each user can opt to - choose what theme they want to use or to use their system decide what theme to - use. If you want to create your own theme, you will have to set both light and - dark themes following the instructions below. If you only set one of them, the - other mode will fallback to the default theme. - - -How to create your own theme - - To create your own theme, you will have to define the variables below. To do - that, create a theme.css file and import it in your application. Here's an - example below on how to set your light and dark mode. - - - -Colors - - We provide a set of generic colours tokens that we use across Canon. By - changing these colours you can easily change the look and feel of your - application to match your brand. - - - - - Prop - Description - - - - - - --canon-accent - - The accent color for the theme. - - - - --canon-bg - - The background color for the theme. - - - - --canon-surface-1 - - The first surface color for the theme. - - - - --canon-surface-2 - - The second surface color for the theme. - - - - --canon-outline - - The outline color for the theme. - - - - --canon-outline-focus - - The outline focus color for the theme. - - - - --canon-text-primary - - The primary text color for the theme. - - - - --canon-text-secondary - - The secondary text color for the theme. - - - - -Typography - - We have two fonts that we use across Canon. The first one is the sans-serif - font that we use for the body of the application. The second one is the - monospace font that we use for code blocks and tables. - - - - - - Prop - Description - - - - - - --canon-font-regular - - The sans-serif font for the theme. - - - - --canon-font-mono - - The monospace font for the theme. - - - - -Spacing - - Our default spacing system is made to work in most scenarios. We have 7 scale - values from `xxs` to `xxl`. We use the values on padding and margin in our - layout components mostly. If you prefer to use a different spacing system, you - can do that by changing the values below. - - - - - - Prop - Description - - - - - - --canon-space-unit - - - The base unit for the spacing system. Default value is `1em` - - - - - --canon-space-xxs - - Default value is `0.25 x space unit` - - - - --canon-space-xs - - Default value is `0.5 x space unit` - - - - --canon-space-sm - - Default value is `0.75 x space unit` - - - - --canon-space-md - - Default value is `1.25 x space unit` - - - - --canon-space-lg - - Default value is `2 x space unit` - - - - --canon-space-xl - - Default value is `3.25 x space unit` - - - - --canon-space-xxl - - Default value is `5.25 x space unit` - - - - - diff --git a/packages/canon/docs/Typography.mdx b/packages/canon/docs/Typography.mdx deleted file mode 100644 index 802b9881be..0000000000 --- a/packages/canon/docs/Typography.mdx +++ /dev/null @@ -1,48 +0,0 @@ -import { Unstyled, Meta, Canvas } from '@storybook/blocks'; -import { - Columns, - Text, - ComponentStatus, - Banner, - Title, - Roadmap, -} from './components'; -import { list } from './components/Roadmap/list'; -import * as HeadingStories from '../src/components/Heading/Heading.stories'; -import * as TextStories from '../src/components/Text/Text.stories'; - - - - - -Typography - - Canon offers a suite of typography components designed to seamlessly align - with the rest of your Backstage instance. While you can customize their - appearance to match your brand, the underlying API remains consistent and - unchanged. Each component is built on a responsive structure, allowing you to - define different typography values for various breakpoints. - - -Heading - - Headings are used to structure the content of your page. They are used to - create a hierarchy of information and to make the content more readable. The - best way to use add these headings to your page is to import the [Heading - component](?path=/docs/components-heading--docs). - - - - -Text - - Canon provides four distinct text variants, each offering different font sizes - carefully designed to cover the majority of use cases. These variants are - versatile and can be paired with regular and bold of font weights. You can use - the [Text component](?path=/docs/components-text--docs) to add text to your - page. - - - - - diff --git a/packages/canon/docs/components/Banner/Banner.tsx b/packages/canon/docs/components/Banner/Banner.tsx deleted file mode 100644 index 3199e65bc0..0000000000 --- a/packages/canon/docs/components/Banner/Banner.tsx +++ /dev/null @@ -1,41 +0,0 @@ -/* - * 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'; - -export const Banner = ({ - children, - variant = 'info', -}: { - children: React.ReactNode; - variant?: 'info' | 'warning'; -}) => { - return ( -
-
- - - -
- {children} -
- ); -}; diff --git a/packages/canon/docs/components/Banner/index.ts b/packages/canon/docs/components/Banner/index.ts deleted file mode 100644 index 31f4aa88b0..0000000000 --- a/packages/canon/docs/components/Banner/index.ts +++ /dev/null @@ -1,16 +0,0 @@ -/* - * Copyright 2024 The Backstage Authors - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ -export { Banner } from './Banner'; diff --git a/packages/canon/docs/components/Banner/styles.css b/packages/canon/docs/components/Banner/styles.css deleted file mode 100644 index d20e14ce0b..0000000000 --- a/packages/canon/docs/components/Banner/styles.css +++ /dev/null @@ -1,37 +0,0 @@ -.banner { - display: flex; - align-items: center; - font-size: 16px; - line-height: 28px; - padding: 16px; - border-radius: 6px; - margin-bottom: 16px; - border: 1px solid #e0e0e0; - - & > p { - margin: 0; - } - - &.info { - background-color: #f2f2f2; - border-color: #cdcdcd; - color: #888888; - } - - &.warning { - background-color: #fff2b9; - border-color: #ffd000; - color: #d79927; - } - - & .icon { - width: 32px; - height: 32px; - background-color: rgba(215, 153, 39, 0.2); - border-radius: 6px; - margin-right: 16px; - display: flex; - align-items: center; - justify-content: center; - } -} diff --git a/packages/canon/docs/components/Chip/Chip.tsx b/packages/canon/docs/components/Chip/Chip.tsx deleted file mode 100644 index e6e1d1b1c4..0000000000 --- a/packages/canon/docs/components/Chip/Chip.tsx +++ /dev/null @@ -1,27 +0,0 @@ -/* - * 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'; - -export const Chip = ({ - children, - head = false, -}: { - children: React.ReactNode; - head?: boolean; -}) => { - return {children}; -}; diff --git a/packages/canon/docs/components/Chip/index.ts b/packages/canon/docs/components/Chip/index.ts deleted file mode 100644 index ff9e4794c5..0000000000 --- a/packages/canon/docs/components/Chip/index.ts +++ /dev/null @@ -1,16 +0,0 @@ -/* - * Copyright 2024 The Backstage Authors - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ -export { Chip } from './Chip'; diff --git a/packages/canon/docs/components/Chip/styles.css b/packages/canon/docs/components/Chip/styles.css deleted file mode 100644 index 95cf7cef34..0000000000 --- a/packages/canon/docs/components/Chip/styles.css +++ /dev/null @@ -1,33 +0,0 @@ -/* - * 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. - */ - -.chip { - display: inline-flex; - align-items: center; - font-family: monospace; - font-size: 13px; - border-radius: 6px; - padding: 0px 8px; - height: 24px; - margin-right: 4px; - background-color: #f0f0f0; - color: #5d5d5d; - - &.head { - background-color: #eaf2fd; - color: #2563eb; - } -} diff --git a/packages/canon/docs/components/Columns/Columns.tsx b/packages/canon/docs/components/Columns/Columns.tsx deleted file mode 100644 index 115ec50010..0000000000 --- a/packages/canon/docs/components/Columns/Columns.tsx +++ /dev/null @@ -1,31 +0,0 @@ -/* - * 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'; - -export const Columns = ({ - children, - style, -}: { - children: React.ReactNode; - style?: React.CSSProperties; -}) => { - return ( -
- {children} -
- ); -}; diff --git a/packages/canon/docs/components/Columns/index.ts b/packages/canon/docs/components/Columns/index.ts deleted file mode 100644 index 05de0850be..0000000000 --- a/packages/canon/docs/components/Columns/index.ts +++ /dev/null @@ -1,16 +0,0 @@ -/* - * Copyright 2024 The Backstage Authors - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ -export { Columns } from './Columns'; diff --git a/packages/canon/docs/components/Columns/styles.css b/packages/canon/docs/components/Columns/styles.css deleted file mode 100644 index c34acfc406..0000000000 --- a/packages/canon/docs/components/Columns/styles.css +++ /dev/null @@ -1,22 +0,0 @@ -/* - * 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. - */ - -.columns { - display: grid; - grid-template-columns: repeat(3, 1fr); - row-gap: 20px; - column-gap: 80px; -} diff --git a/packages/canon/docs/components/ComponentStatus/ComponentStatus.tsx b/packages/canon/docs/components/ComponentStatus/ComponentStatus.tsx deleted file mode 100644 index 0159e27b32..0000000000 --- a/packages/canon/docs/components/ComponentStatus/ComponentStatus.tsx +++ /dev/null @@ -1,48 +0,0 @@ -/* - * 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'; - -export const ComponentStatus = ({ - name, - status = 'notStarted', - style, - link, -}: { - name: string; - status: 'notStarted' | 'inProgress' | 'alpha' | 'beta' | 'stable'; - style?: React.CSSProperties; - link?: string; -}) => { - return ( -
- {link ? ( - - {name} - - ) : ( - {name} - )} - - {status === 'notStarted' && 'Not Started'} - {status === 'inProgress' && 'In Progress'} - {status === 'alpha' && 'Alpha'} - {status === 'beta' && 'Beta'} - {status === 'stable' && 'Stable'} - -
- ); -}; diff --git a/packages/canon/docs/components/ComponentStatus/index.ts b/packages/canon/docs/components/ComponentStatus/index.ts deleted file mode 100644 index 238c001289..0000000000 --- a/packages/canon/docs/components/ComponentStatus/index.ts +++ /dev/null @@ -1,16 +0,0 @@ -/* - * Copyright 2024 The Backstage Authors - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ -export { ComponentStatus } from './ComponentStatus'; diff --git a/packages/canon/docs/components/ComponentStatus/styles.css b/packages/canon/docs/components/ComponentStatus/styles.css deleted file mode 100644 index 6ef02ccf3f..0000000000 --- a/packages/canon/docs/components/ComponentStatus/styles.css +++ /dev/null @@ -1,71 +0,0 @@ -/* - * 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. - */ - -.component-status { - display: flex; - justify-content: space-between; - - & .title { - color: #3b59ff; - font-size: 16px; - font-weight: 400; - text-decoration: none; - } - - & .pill { - display: inline-flex; - align-items: center; - color: #000; - border-radius: 40px; - padding: 0px 8px; - height: 24px; - font-size: 12px; - font-weight: 600; - border-style: solid; - border-width: 1px; - margin-left: 8px; - - &.notStarted { - background-color: #f2f2f2; - border-color: #cdcdcd; - color: #888888; - } - - &.inProgress { - background-color: #fff2b9; - border-color: #ffd000; - color: #d79927; - } - - &.alpha { - background-color: #d7f9d7; - border-color: #4ed14a; - color: #3a9837; - } - - &.beta { - background-color: #d7f9d7; - border-color: #4ed14a; - color: #3a9837; - } - - &.stable { - background-color: #d7f9d7; - border-color: #4ed14a; - color: #3a9837; - } - } -} diff --git a/packages/canon/docs/components/IconLibrary/IconLibrary.tsx b/packages/canon/docs/components/IconLibrary/IconLibrary.tsx deleted file mode 100644 index 1d517f7a98..0000000000 --- a/packages/canon/docs/components/IconLibrary/IconLibrary.tsx +++ /dev/null @@ -1,37 +0,0 @@ -/* - * 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 { icons } from '../../../src/components/Icon/icons'; -import { Text } from '../Text/Text'; - -export const IconLibrary = () => { - const iconsList = Object.keys(icons); - - return ( -
- {iconsList.map(icon => ( -
-
- -
- {icon} -
- ))} -
- ); -}; diff --git a/packages/canon/docs/components/IconLibrary/index.ts b/packages/canon/docs/components/IconLibrary/index.ts deleted file mode 100644 index 071c80db85..0000000000 --- a/packages/canon/docs/components/IconLibrary/index.ts +++ /dev/null @@ -1,16 +0,0 @@ -/* - * Copyright 2024 The Backstage Authors - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ -export { IconLibrary } from './IconLibrary'; diff --git a/packages/canon/docs/components/IconLibrary/styles.css b/packages/canon/docs/components/IconLibrary/styles.css deleted file mode 100644 index 1a6f63ca79..0000000000 --- a/packages/canon/docs/components/IconLibrary/styles.css +++ /dev/null @@ -1,22 +0,0 @@ -.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/LayoutComponents/LayoutComponents.tsx b/packages/canon/docs/components/LayoutComponents/LayoutComponents.tsx deleted file mode 100644 index 56f389a389..0000000000 --- a/packages/canon/docs/components/LayoutComponents/LayoutComponents.tsx +++ /dev/null @@ -1,64 +0,0 @@ -/* - * 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 { BoxSvg } from './svgs/box'; -import { StackSvg } from './svgs/stack'; -import { GridSvg } from './svgs/grid'; -import { InlineSvg } from './svgs/inline'; -import { ContainerSvg } from './svgs/container'; - -export const LayoutComponents = () => { - return ( -
-
- - - -
Box
-
The most basic layout component
-
-
- - - -
Stack
-
Arrange your components vertically
-
-
- - - -
Grid
-
Arrange your components in a grid
-
-
- - - -
Inline
-
Arrange your components in a row
-
-
- - - -
Container
-
A container for your components
-
-
- ); -}; diff --git a/packages/canon/docs/components/LayoutComponents/index.ts b/packages/canon/docs/components/LayoutComponents/index.ts deleted file mode 100644 index 55cc9f25ef..0000000000 --- a/packages/canon/docs/components/LayoutComponents/index.ts +++ /dev/null @@ -1,16 +0,0 @@ -/* - * Copyright 2024 The Backstage Authors - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ -export { LayoutComponents } from './LayoutComponents'; diff --git a/packages/canon/docs/components/LayoutComponents/styles.css b/packages/canon/docs/components/LayoutComponents/styles.css deleted file mode 100644 index 9319121224..0000000000 --- a/packages/canon/docs/components/LayoutComponents/styles.css +++ /dev/null @@ -1,58 +0,0 @@ -/* - * 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. - */ - -.layout-components { - display: flex; - justify-content: flex-start; - gap: 1rem; - flex-wrap: wrap; - - & .box { - display: flex; - flex-direction: column; - width: calc(33.33% - 0.67rem); - margin-bottom: 1rem; - align-items: flex-start; - } - - & .content { - flex: none; - background: linear-gradient(180deg, #f3f3f3 0%, #fff 100%); - border-radius: 4px; - width: 100%; - height: 180px; - transition: all 0.2s ease-in-out; - margin-bottom: 0.75rem; - display: flex; - align-items: center; - justify-content: center; - - &:hover { - transform: translateY(-4px); - } - } - - & .title { - font-size: 16px; - transition: color 0.2s ease-in-out; - margin-bottom: 0.25rem; - } - - & .description { - font-size: 16px; - color: #9e9e9e; - } -} diff --git a/packages/canon/docs/components/LayoutComponents/svgs/box.tsx b/packages/canon/docs/components/LayoutComponents/svgs/box.tsx deleted file mode 100644 index 1749b38c6f..0000000000 --- a/packages/canon/docs/components/LayoutComponents/svgs/box.tsx +++ /dev/null @@ -1,54 +0,0 @@ -/* - * 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'; - -export const BoxSvg = () => { - return ( - - - - - - - - ); -}; diff --git a/packages/canon/docs/components/LayoutComponents/svgs/container.tsx b/packages/canon/docs/components/LayoutComponents/svgs/container.tsx deleted file mode 100644 index 62fe4ce266..0000000000 --- a/packages/canon/docs/components/LayoutComponents/svgs/container.tsx +++ /dev/null @@ -1,373 +0,0 @@ -/* - * 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'; - -export const ContainerSvg = () => { - return ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ); -}; diff --git a/packages/canon/docs/components/LayoutComponents/svgs/grid.tsx b/packages/canon/docs/components/LayoutComponents/svgs/grid.tsx deleted file mode 100644 index 5527d1f3e2..0000000000 --- a/packages/canon/docs/components/LayoutComponents/svgs/grid.tsx +++ /dev/null @@ -1,91 +0,0 @@ -/* - * 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'; - -export const GridSvg = () => { - return ( - - - - - - - - - - - - ); -}; diff --git a/packages/canon/docs/components/LayoutComponents/svgs/inline.tsx b/packages/canon/docs/components/LayoutComponents/svgs/inline.tsx deleted file mode 100644 index fadb9bfc1b..0000000000 --- a/packages/canon/docs/components/LayoutComponents/svgs/inline.tsx +++ /dev/null @@ -1,92 +0,0 @@ -/* - * 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'; - -export const InlineSvg = () => { - return ( - - - - - - - - - - - - ); -}; diff --git a/packages/canon/docs/components/LayoutComponents/svgs/stack.tsx b/packages/canon/docs/components/LayoutComponents/svgs/stack.tsx deleted file mode 100644 index aeda998d2e..0000000000 --- a/packages/canon/docs/components/LayoutComponents/svgs/stack.tsx +++ /dev/null @@ -1,82 +0,0 @@ -/* - * 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'; - -export const StackSvg = () => { - return ( - - - - - - - - - - - - ); -}; diff --git a/packages/canon/docs/components/PropsTable/PropsTable.tsx b/packages/canon/docs/components/PropsTable/PropsTable.tsx deleted file mode 100644 index a3dc9e271c..0000000000 --- a/packages/canon/docs/components/PropsTable/PropsTable.tsx +++ /dev/null @@ -1,57 +0,0 @@ -/* - * 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 * as Table from '..'; -import { Chip } from '..'; - -// Modify the PropsTable component to accept a generic type -export const PropsTable = >({ - data, -}: { - data: T; -}) => { - return ( - - - - Prop - Type - Responsive - - - - {Object.keys(data).map(n => ( - - - {n} - - - {Array.isArray(data[n].type) ? ( - data[n].type.map((t: any) => {t}) - ) : ( - {data[n].type} - )} - - - {data[n].responsive ? 'Yes' : 'No'} - - - ))} - - - ); -}; diff --git a/packages/canon/docs/components/PropsTable/getProps.ts b/packages/canon/docs/components/PropsTable/getProps.ts deleted file mode 100644 index 5773eaeb27..0000000000 --- a/packages/canon/docs/components/PropsTable/getProps.ts +++ /dev/null @@ -1,43 +0,0 @@ -/* - * Copyright 2024 The Backstage Authors - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ -export function getProps(styles: Record) { - return Object.keys(styles).reduce( - (acc: Record, n) => { - const style = styles[n]; - - let values: string[] = []; - - if (style.values) { - // If values exist, use them - values = Object.keys(style.values); - } else if (style.mappings && style.mappings.length > 0) { - // If mappings exist, use the first mapping's values - const firstMapping = style.mappings[0]; - values = Object.keys(styles[firstMapping].values); - } else { - // Default to an empty array if neither values nor mappings exist - values = []; - } - - acc[n] = { - type: values, - responsive: true, - }; - return acc; - }, - {} as Record, - ); -} diff --git a/packages/canon/docs/components/PropsTable/index.ts b/packages/canon/docs/components/PropsTable/index.ts deleted file mode 100644 index 181933f0f8..0000000000 --- a/packages/canon/docs/components/PropsTable/index.ts +++ /dev/null @@ -1,17 +0,0 @@ -/* - * Copyright 2024 The Backstage Authors - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ -export { PropsTable } from './PropsTable'; -export { getProps } from './getProps'; diff --git a/packages/canon/docs/components/Roadmap/Roadmap.tsx b/packages/canon/docs/components/Roadmap/Roadmap.tsx deleted file mode 100644 index 2177ea558f..0000000000 --- a/packages/canon/docs/components/Roadmap/Roadmap.tsx +++ /dev/null @@ -1,53 +0,0 @@ -/* - * 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 { RoadmapItem } from './list'; - -export const Roadmap = ({ list }: { list: RoadmapItem[] }) => { - const orderList = ['inProgress', 'notStarted', 'completed']; - return ( -
- {list - .sort( - (a, b) => orderList.indexOf(a.status) - orderList.indexOf(b.status), - ) - .map(Item)} -
- ); -}; - -const Item = ({ - title, - status = 'notStarted', -}: { - title: string; - status: 'notStarted' | 'inProgress' | 'inReview' | 'completed'; -}) => { - return ( -
-
-
-
{title}
-
- - {status === 'notStarted' && 'Not Started'} - {status === 'inProgress' && 'In Progress'} - {status === 'inReview' && 'Ready for Review'} - {status === 'completed' && 'Completed'} - -
- ); -}; diff --git a/packages/canon/docs/components/Roadmap/index.ts b/packages/canon/docs/components/Roadmap/index.ts deleted file mode 100644 index ac51dfa1ed..0000000000 --- a/packages/canon/docs/components/Roadmap/index.ts +++ /dev/null @@ -1,16 +0,0 @@ -/* - * Copyright 2024 The Backstage Authors - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ -export { Roadmap } from './Roadmap'; diff --git a/packages/canon/docs/components/Roadmap/list.ts b/packages/canon/docs/components/Roadmap/list.ts deleted file mode 100644 index d5f436281a..0000000000 --- a/packages/canon/docs/components/Roadmap/list.ts +++ /dev/null @@ -1,62 +0,0 @@ -/* - * Copyright 2024 The Backstage Authors - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ -export type RoadmapItem = { - title: string; - status: 'notStarted' | 'inProgress' | 'inReview' | 'completed'; -}; - -export const list: RoadmapItem[] = [ - { - title: 'Remove Vanilla Extract and use pure CSS instead', - status: 'inProgress', - }, - { - title: 'Add collapsing across breakpoints for the Inline component', - status: 'notStarted', - }, - { - title: 'Add reversing the order for the Inline component', - status: 'notStarted', - }, - { - title: 'Set up Storybook', - status: 'completed', - }, - { - title: 'Set up iconography', - status: 'completed', - }, - { - title: 'Set up global tokens', - status: 'inProgress', - }, - { - title: 'Set up theming system', - status: 'inProgress', - }, - { - title: 'Create first pass at box component', - status: 'completed', - }, - { - title: 'Create first pass at stack component', - status: 'completed', - }, - { - title: 'Create first pass at inline component', - status: 'completed', - }, -]; diff --git a/packages/canon/docs/components/Roadmap/styles.css b/packages/canon/docs/components/Roadmap/styles.css deleted file mode 100644 index 63f32312e7..0000000000 --- a/packages/canon/docs/components/Roadmap/styles.css +++ /dev/null @@ -1,100 +0,0 @@ -.roadmap { - display: flex; - flex-direction: column; -} - -.roadmap .roadmap-item { - display: flex; - align-items: center; - justify-content: space-between; - border-bottom: 1px solid #e0e0e0; - padding: 8px 0px; -} - -.roadmap .roadmap-item .left { - display: flex; - align-items: center; - padding-left: 12px; - gap: 12px; -} - -.roadmap .roadmap-item .dot { - width: 8px; - height: 8px; - border-radius: 50%; - background-color: #e0e0e0; -} - -.roadmap .roadmap-item.notStarted { - color: #000; -} - -.roadmap .roadmap-item.inProgress { - color: #000; -} - -.roadmap .roadmap-item.inReview { - color: #000; -} - -.roadmap .roadmap-item.completed .title { - color: #a2a2a2; - text-decoration: line-through; -} - -.roadmap .roadmap-item.notStarted .dot { - background-color: #d1d1d1; -} - -.roadmap .roadmap-item.inProgress .dot { - background-color: #ffd000; -} - -.roadmap .roadmap-item.inReview .dot { - background-color: #4ed14a; -} - -.roadmap .roadmap-item.completed .dot { - background-color: #4ed14a; -} - -.roadmap .roadmap-item .title { - font-size: 16px; -} - -.roadmap .roadmap-item .pill { - display: inline-flex; - align-items: center; - height: 24px; - padding: 0px 8px; - border-radius: 40px; - font-size: 12px; - font-weight: 600; - margin-left: 8px; - border-style: solid; - border-width: 1px; -} - -.roadmap .roadmap-item.notStarted .pill { - background-color: #f2f2f2; - border-color: #cdcdcd; - color: #888888; -} - -.roadmap .roadmap-item.inProgress .pill { - background-color: #fff2b9; - border-color: #ffd000; - color: #d79927; -} - -.roadmap .roadmap-item.inReview .pill { - background-color: #d7f9d7; - border-color: #4ed14a; - color: #3a9837; -} - -.roadmap .roadmap-item.completed .pill { - background-color: #d7f9d7; - border-color: #4ed14a; - color: #3a9837; -} diff --git a/packages/canon/docs/components/Table/Table.tsx b/packages/canon/docs/components/Table/Table.tsx deleted file mode 100644 index 74a26a89af..0000000000 --- a/packages/canon/docs/components/Table/Table.tsx +++ /dev/null @@ -1,49 +0,0 @@ -/* - * 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'; - -export const Root = ({ children }: { children: React.ReactNode }) => { - return ( -
- {children}
-
- ); -}; - -export const Header = ({ children }: { children: React.ReactNode }) => { - return {children}; -}; - -export const Body = ({ children }: { children: React.ReactNode }) => { - return {children}; -}; - -export const HeaderRow = ({ children }: { children: React.ReactNode }) => { - return {children}; -}; - -export const HeaderCell = ({ children }: { children: React.ReactNode }) => { - return {children}; -}; - -export const Row = ({ children }: { children: React.ReactNode }) => { - return {children}; -}; - -export const Cell = ({ children }: { children: React.ReactNode }) => { - return {children}; -}; diff --git a/packages/canon/docs/components/Table/index.ts b/packages/canon/docs/components/Table/index.ts deleted file mode 100644 index 7419aa83a8..0000000000 --- a/packages/canon/docs/components/Table/index.ts +++ /dev/null @@ -1,16 +0,0 @@ -/* - * Copyright 2024 The Backstage Authors - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ -export { Root, Header, Body, Row, Cell, HeaderRow, HeaderCell } from './Table'; diff --git a/packages/canon/docs/components/Table/styles.css b/packages/canon/docs/components/Table/styles.css deleted file mode 100644 index ed56774a85..0000000000 --- a/packages/canon/docs/components/Table/styles.css +++ /dev/null @@ -1,72 +0,0 @@ -/* - * 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. - */ - -.sb-table-wrapper { - border: 1px solid #e7e7e7; - border-radius: 4px; - overflow: hidden; - - & .sb-table { - width: 100%; - margin: 0 !important; - padding: 0 !important; - border-spacing: 0px; - border-collapse: collapse; - } - - & .sb-table-cell { - padding: 12px 16px !important; - border: none !important; - text-align: left; - background-color: white !important; - font-size: 16px; - - & p { - margin: 0; - } - } - - & .sb-table-header-cell { - background-color: #f5f5f5 !important; - border-bottom: 1px solid #e7e7e7 !important; - font-weight: 500; - font-size: 14px; - } - - & .sb-table-row { - border: none; - border-bottom: 1px solid #e7e7e7; - &:last-child { - border-bottom: none; - } - } - - & .sb-table-chip { - display: inline-block; - font-size: 14px !important; - border: 1px solid #e7e7e7; - border-radius: 6px; - padding: 0px 6px; - height: 24px; - } - - & .sb-table-type { - display: flex; - flex-wrap: wrap; - flex-direction: row; - gap: 8px; - } -} diff --git a/packages/canon/docs/components/Text/Text.tsx b/packages/canon/docs/components/Text/Text.tsx deleted file mode 100644 index 90804b7da7..0000000000 --- a/packages/canon/docs/components/Text/Text.tsx +++ /dev/null @@ -1,31 +0,0 @@ -/* - * 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'; - -export const Text = ({ - children, - style, -}: { - children: React.ReactNode; - style?: React.CSSProperties; -}) => { - return ( -
- {children} -
- ); -}; diff --git a/packages/canon/docs/components/Text/index.ts b/packages/canon/docs/components/Text/index.ts deleted file mode 100644 index 873fca2c76..0000000000 --- a/packages/canon/docs/components/Text/index.ts +++ /dev/null @@ -1,16 +0,0 @@ -/* - * Copyright 2024 The Backstage Authors - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ -export { Text } from './Text'; diff --git a/packages/canon/docs/components/Text/styles.css b/packages/canon/docs/components/Text/styles.css deleted file mode 100644 index b1bc40a1ac..0000000000 --- a/packages/canon/docs/components/Text/styles.css +++ /dev/null @@ -1,43 +0,0 @@ -/* - * 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. - */ - -.sb-text { - font-size: 16px; - line-height: 28px; - margin: 0; - margin-bottom: 16px; - color: #4f4f4f; - - & p { - font-size: 16px; - line-height: 28px; - margin: 0; - } - - & code { - font-size: 13px; - color: #215cff; - background-color: #f1f3fc; - padding: 4px 4px; - border-radius: 4px; - } - - & a { - color: #215cff; - text-decoration: none; - border-bottom: 1px solid #215cff; - } -} diff --git a/packages/canon/docs/components/Title/Title.tsx b/packages/canon/docs/components/Title/Title.tsx deleted file mode 100644 index 59fefad8f9..0000000000 --- a/packages/canon/docs/components/Title/Title.tsx +++ /dev/null @@ -1,38 +0,0 @@ -/* - * 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'; - -export const Title = ({ - children, - style, - type = 'h1', -}: { - children: React.ReactNode; - style?: React.CSSProperties; - type?: 'h1' | 'h2' | 'h3'; -}) => { - let Component = 'h1'; - if (type === 'h1') Component = 'h1'; - if (type === 'h2') Component = 'h2'; - if (type === 'h3') Component = 'h3'; - - return React.createElement(Component, { - className: `sb-title ${type}`, - style, - children, - }); -}; diff --git a/packages/canon/docs/components/Title/index.ts b/packages/canon/docs/components/Title/index.ts deleted file mode 100644 index 998dc81882..0000000000 --- a/packages/canon/docs/components/Title/index.ts +++ /dev/null @@ -1,16 +0,0 @@ -/* - * Copyright 2024 The Backstage Authors - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ -export { Title } from './Title'; diff --git a/packages/canon/docs/components/Title/styles.css b/packages/canon/docs/components/Title/styles.css deleted file mode 100644 index 61e99e20b3..0000000000 --- a/packages/canon/docs/components/Title/styles.css +++ /dev/null @@ -1,42 +0,0 @@ -/* - * 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. - */ - -.sb-title { - margin: 0; - font-weight: 500; - border: none; - - &.h1 { - font-size: 36px; - line-height: 44px; - margin-bottom: 24px; - margin-top: 0px; - } - - &.h2 { - font-size: 24px; - line-height: 32px; - margin-bottom: 12px; - margin-top: 52px; - } - - &.h3 { - font-size: 20px; - line-height: 28px; - margin-bottom: 12px; - margin-top: 40px; - } -} diff --git a/packages/canon/docs/components/index.ts b/packages/canon/docs/components/index.ts deleted file mode 100644 index 0e5ff2e325..0000000000 --- a/packages/canon/docs/components/index.ts +++ /dev/null @@ -1,27 +0,0 @@ -/* - * Copyright 2024 The Backstage Authors - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -export * from './Banner'; -export * from './Chip'; -export * from './Columns'; -export * from './ComponentStatus'; -export * from './IconLibrary'; -export * from './LayoutComponents'; -export * from './PropsTable'; -export * from './Roadmap'; -export * from './Table'; -export * from './Text'; -export * from './Title'; diff --git a/packages/canon/docs/components/styles.css b/packages/canon/docs/components/styles.css deleted file mode 100644 index 706b1626b3..0000000000 --- a/packages/canon/docs/components/styles.css +++ /dev/null @@ -1,15 +0,0 @@ -.sbdocs-content { - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, - Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; -} - -@import './Banner/styles.css'; -@import './Chip/styles.css'; -@import './Columns/styles.css'; -@import './ComponentStatus/styles.css'; -@import './IconLibrary/styles.css'; -@import './LayoutComponents/styles.css'; -@import './Roadmap/styles.css'; -@import './Table/styles.css'; -@import './Text/styles.css'; -@import './Title/styles.css'; diff --git a/packages/canon/docs/spaceProps.ts b/packages/canon/docs/spaceProps.ts deleted file mode 100644 index 3eb6961bc1..0000000000 --- a/packages/canon/docs/spaceProps.ts +++ /dev/null @@ -1,41 +0,0 @@ -/* - * Copyright 2024 The Backstage Authors - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -export const spacePropsList = [ - 'margin', - 'marginBottom', - 'marginLeft', - 'marginRight', - 'marginTop', - 'marginX', - 'marginY', - 'padding', - 'paddingBottom', - 'paddingLeft', - 'paddingRight', - 'paddingTop', - 'paddingX', - 'paddingY', -].reduce( - (acc: { [key: string]: { type: string[]; responsive: boolean } }, prop) => { - acc[prop] = { - type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'], - responsive: true, - }; - return acc; - }, - {}, -); diff --git a/packages/canon/package.json b/packages/canon/package.json index 0dfea024cc..eb2cfff709 100644 --- a/packages/canon/package.json +++ b/packages/canon/package.json @@ -39,22 +39,22 @@ "test": "backstage-cli package test" }, "dependencies": { - "@base-ui-components/react": "^1.0.0-alpha.4", + "@base-ui-components/react": "^1.0.0-alpha.5", "@remixicon/react": "^4.5.0", "clsx": "^2.1.1" }, "devDependencies": { "@backstage/cli": "workspace:^", "@chromatic-com/storybook": "^3.2.2", - "@storybook/addon-essentials": "^8.4.7", - "@storybook/addon-interactions": "^8.4.7", + "@storybook/addon-essentials": "^8.5.0", + "@storybook/addon-interactions": "^8.5.0", "@storybook/addon-styling-webpack": "^1.0.1", - "@storybook/addon-themes": "^8.4.7", - "@storybook/addon-webpack5-compiler-swc": "^1.0.5", - "@storybook/blocks": "^8.4.7", - "@storybook/react": "^8.4.7", - "@storybook/react-webpack5": "^8.4.7", - "@storybook/test": "^8.4.7", + "@storybook/addon-themes": "^8.5.0", + "@storybook/addon-webpack5-compiler-swc": "^2.0.0", + "@storybook/blocks": "^8.5.0", + "@storybook/react": "^8.5.0", + "@storybook/react-webpack5": "^8.5.0", + "@storybook/test": "^8.5.0", "@testing-library/jest-dom": "^6.0.0", "@types/react": "^18.0.0", "@types/react-dom": "^18.0.0", @@ -67,7 +67,7 @@ "react": "^18.0.2", "react-dom": "^18.0.2", "react-router-dom": "^6.3.0", - "storybook": "^8.4.7" + "storybook": "^8.5.0" }, "peerDependencies": { "@types/react": "^16.13.1 || ^17.0.0 || ^18.0.0", diff --git a/packages/canon/src/components/Box/Docs.mdx b/packages/canon/src/components/Box/Docs.mdx deleted file mode 100644 index ee30e17305..0000000000 --- a/packages/canon/src/components/Box/Docs.mdx +++ /dev/null @@ -1,112 +0,0 @@ -import { Meta, Unstyled, Source, Canvas } from '@storybook/blocks'; -import * as BoxStories from './Box.stories'; -import { Title, Text } from '../../../docs/components'; -import { PropsTable } from '../../../docs/components'; -import { spacePropsList } from '../../../docs/spaceProps'; - - - - - -Box - - Box is the lowest-level component in Canon. We use it internally to build all - of our components. It provides a consistent API for styling and layout. - - -Usage -Hello World! -`} language="tsx" dark /> - -API reference - -Box - - This is the Box component, our lowest-level component. Here are all the - available properties. - - - - - - Padding and margin are used to create space around your component using our - predefined spacing tokens. We would recommend to use padding over margin to - avoid collapsing margins but both are available. - - - - - - -Examples -Here are some examples of how you can use the Box component. - -Simple example -A simple example of how to use the Box component. -Hello World`} - language="tsx" - dark -/> - -Responsive - - Most of the values can be defined per breakpoint, making it easy to create - responsive designs. - -Hello World`} - language="tsx" - dark -/> - - diff --git a/packages/canon/src/components/Button/Docs.mdx b/packages/canon/src/components/Button/Docs.mdx deleted file mode 100644 index ae90b5fd80..0000000000 --- a/packages/canon/src/components/Button/Docs.mdx +++ /dev/null @@ -1,135 +0,0 @@ -import { Canvas, Meta, Unstyled, Source } from '@storybook/blocks'; -import * as ButtonStories from './Button.stories'; -import { Title, Text } from '../../../docs/components'; -import { PropsTable } from '../../../docs/components/PropsTable/PropsTable'; - - - - - -Button -A button component that can be used to trigger actions. - - - -Usage -Click me -`} language="tsx" dark /> - - - API reference - - - - -Examples - -Variants -Here's a view when buttons have different variants. - - - - - - - -`} - language="tsx" - dark -/> - -Sizes -Here's a view when buttons have different sizes. - - - - - - -`} - language="tsx" - dark -/> - -With Icons -Here's a view when buttons have icons. - - - - - - - -`} - language="tsx" - dark -/> - -Full width -Here's a view when buttons are full width. - - - - - - - -`} - language="tsx" - dark -/> - -Disabled -Here's a view when buttons are disabled. - - - -Button`} language="tsx" dark /> - -Responsive -Here's a view when buttons are responsive. - - - - - Button -`} - language="tsx" - dark -/> - - diff --git a/packages/canon/src/components/Checkbox/Docs.mdx b/packages/canon/src/components/Checkbox/Docs.mdx deleted file mode 100644 index 9826708888..0000000000 --- a/packages/canon/src/components/Checkbox/Docs.mdx +++ /dev/null @@ -1,70 +0,0 @@ -import { Canvas, Meta, Unstyled, Source } from '@storybook/blocks'; -import * as CheckboxStories from './Checkbox.stories'; -import { Title, Text } from '../../../docs/components'; -import { PropsTable } from '../../../docs/components/PropsTable'; - - - - - -Checkbox -A checkbox component that can be used to trigger actions. - - - -Usage - -`} language="tsx" dark /> - - - API reference - - - void", - responsive: false, - }, - disabled: { - type: 'boolean', - responsive: false, - }, - required: { - type: 'boolean', - responsive: false, - }, - name: { - type: 'string', - responsive: false, - }, - value: { - type: 'string', - responsive: false, - }, - className: { - type: 'string', - responsive: false, - }, - style: { - type: 'CSSProperties', - responsive: false, - }, - }} -/> - - diff --git a/packages/canon/src/components/Container/Docs.mdx b/packages/canon/src/components/Container/Docs.mdx deleted file mode 100644 index 05a0600813..0000000000 --- a/packages/canon/src/components/Container/Docs.mdx +++ /dev/null @@ -1,99 +0,0 @@ -import { Meta, Unstyled, Source } from '@storybook/blocks'; -import * as ContainerStories from './Container.stories'; -import { Title, Text, PropsTable, getProps } from '../../../docs/components'; -import { spacePropsList } from '../../../docs/spaceProps'; - - - - - -Container - - - The container component let you use our default max-width and center the - content on the page. - - -Usage -Hello World! -`} language="tsx" dark /> - - - API reference - - - - -Examples - -Simple -A simple example of how to use the Container component. - - - Hello World - Hello World - Hello World -`} - language="tsx" - dark -/> - -Responsive padding & margin - - The Container component also supports responsive values, making it easy to - create responsive designs. - - - Hello World - Hello World - Hello World -`} - language="tsx" - dark -/> - - diff --git a/packages/canon/src/components/Grid/Docs.mdx b/packages/canon/src/components/Grid/Docs.mdx deleted file mode 100644 index c1a0237279..0000000000 --- a/packages/canon/src/components/Grid/Docs.mdx +++ /dev/null @@ -1,199 +0,0 @@ -import { Canvas, Meta, Unstyled, Source } from '@storybook/blocks'; -import * as GridStories from './Grid.stories'; -import { Title, Text, PropsTable } from '../../../docs/components'; -import { spacePropsList } from '../../../docs/spaceProps'; - - - - - -Grid - - A layout component that helps to create simple column-based layouts as well as - more complex ones. - - -Usage - - Hello World - -`} language="tsx" dark /> - -API reference - -Grid - - This is the grid container component. It will help to define the number of - columns that will be used in the grid. You can also define the gap between the - columns. All values are responsive. - - - - - - The grid component also accepts all the spacing props from the Box component. - - - - -Grid Item - - If you need more control over the columns, you can use the grid item - component. This will give you access to `rowSpan`, `colSpan`, `start` and - `end`. All values are responsive. This component is optional, you can use any - elements directly if you prefer. - - - - -Examples - -Simple grid -This is a simple grid with 3 columns and a gap of md. - - Hello World - Hello World - Hello World - -`} - language="tsx" - dark -/> - -Complex grid - - You can also use the grid item to create more complex layouts. In this example - the first column will span 1 column and the second column will span 2 columns. - - - - - Hello World - - - Hello World - - -`} - language="tsx" - dark -/> - -Mixing rows and columns - - The grid item component also supports the `rowSpan` prop, which allows you to - span multiple rows within the grid layout. In this example, the first item - will span 2 rows to achieve a dynamic and flexible grid structure. - - - - - Hello World - - - Hello World - - - Hello World - - -`} - language="tsx" - dark -/> - -Responsive - - The grid component also supports responsive values. In this example the grid - will have 1 column on small screens and 3 on large screens, with a gap of xs - on small screens and md on large screens. - - - - Hello World - - - Hello World - - -`} - language="tsx" - dark -/> - -Start and End - - The start and end props can be used to position the item in the grid. - - - - Hello World - - -`} - language="tsx" - dark -/> - - diff --git a/packages/canon/src/components/Heading/Docs.mdx b/packages/canon/src/components/Heading/Docs.mdx deleted file mode 100644 index dd64bd59b2..0000000000 --- a/packages/canon/src/components/Heading/Docs.mdx +++ /dev/null @@ -1,83 +0,0 @@ -import { Canvas, Meta, Unstyled, Source } from '@storybook/blocks'; -import * as HeadingStories from './Heading.stories'; -import { Title, Text } from '../../../docs/components'; -import { PropsTable } from '../../../docs/components/PropsTable/PropsTable'; - - - - - -Heading - -Headings are used to structure the content of your page. - - - -Usage -Hello World! -`} language="tsx" dark /> - - - API reference - - - - -Examples -Here are some examples of how you can use the Heading component. - -All variants - - The `Heading` component has a `variant` prop that can be used to change the - appearance of the heading. - - - - - - Title 1 Lorem ipsum dolor sit amet consectetur... - Title 2 Lorem ipsum dolor sit amet consectetur... - Title 3 Lorem ipsum dolor sit amet consectetur... - Title 4 Lorem ipsum dolor sit amet consectetur... - Title 5 Lorem ipsum dolor sit amet consectetur... - Display Lorem ipsum dolor sit amet consectetur... -`} - language="tsx" - dark -/> - -Responsive - - You can also use the `variant` prop to change the appearance of the text based - on the screen size. - - -Responsive Lorem ipsum dolor sit amet consectetur...`} - language="tsx" - dark -/> - - diff --git a/packages/canon/src/components/Icon/Docs.mdx b/packages/canon/src/components/Icon/Docs.mdx deleted file mode 100644 index 41c296424c..0000000000 --- a/packages/canon/src/components/Icon/Docs.mdx +++ /dev/null @@ -1,48 +0,0 @@ -import { Canvas, Meta, Unstyled, Source } from '@storybook/blocks'; -import * as IconStories from './Icon.stories'; -import { Title, Text } from '../../../docs/components'; -import { PropsTable } from '../../../docs/components/PropsTable/PropsTable'; -import { icons } from './icons'; - - - - - -Icon - -Icons are used to represent an action or a state. - - - -Usage - -`} language="tsx" dark /> - - - API reference - - - - - diff --git a/packages/canon/src/components/Inline/Docs.mdx b/packages/canon/src/components/Inline/Docs.mdx deleted file mode 100644 index 7671122966..0000000000 --- a/packages/canon/src/components/Inline/Docs.mdx +++ /dev/null @@ -1,124 +0,0 @@ -import { Meta, Unstyled, Source } from '@storybook/blocks'; -import * as InlineStories from './Inline.stories'; -import { Title, Text, PropsTable, getProps } from '../../../docs/components'; -import { spacePropsList } from '../../../docs/spaceProps'; - - - - - -Inline - - - The Inline component is used to create a horizontal layout of elements. By - default it uses flex and flexWrap to make sure that your content always flows - responsively. - - -Usage - - Hello World - Hello World - Hello World - -`} language="tsx" dark /> - - - API reference - - - - - - The grid component also accepts all the spacing props from the Box component. - - - - -Examples - -Simple -A simple example of how to use the Inline component. - - - Hello World - Hello World - Hello World -`} - language="tsx" - dark -/> - -Responsive - - The Inline component also supports responsive values, making it easy to create - responsive designs. - - - Hello World - Hello World - Hello World -`} - language="tsx" - dark -/> - -Align - - The Inline component also supports responsive alignment, making it easy to - create responsive designs. - - - Hello World - Hello World - Hello World -`} - language="tsx" - dark -/> - -Align vertically - - The Inline component also supports responsive vertical alignment, making it - easy to create responsive designs. - - - Hello World - Hello World - Hello World -`} - language="tsx" - dark -/> - - diff --git a/packages/canon/src/components/Stack/Docs.mdx b/packages/canon/src/components/Stack/Docs.mdx deleted file mode 100644 index 921618f49f..0000000000 --- a/packages/canon/src/components/Stack/Docs.mdx +++ /dev/null @@ -1,126 +0,0 @@ -import { Meta, Unstyled, Source } from '@storybook/blocks'; -import * as StackStories from './Stack.stories'; -import { Title, Text, PropsTable, getProps } from '../../../docs/components'; -import { spacePropsList } from '../../../docs/spaceProps'; - - - - - -Stack - - - This is the stack container component. It will help to define the number of - columns that will be used in the grid. You can also define the gap between the - columns. All values are responsive. - - -Usage - - Hello World - Hello World - Hello World - -`} language="tsx" dark /> - - - API reference - - - - - - The grid component also accepts all the spacing props from the Box component. - - - - -Common questions - -Can I stack horizontally? - - The Stack component only allows for stacking elements vertically. If you want - to create a column layout, please use the Grid component. - - - - Hello World - Hello World - Hello World - -`} - language="tsx" - dark -/> - -Examples - -Simple - - A simple example of how to use the Stack component with a medium gap. - - - - Hello World - Hello World - Hello World -`} - language="tsx" - dark -/> - -Responsive - - The Stack component also supports responsive values, making it easy to create - responsive designs. - - - Hello World - Hello World - Hello World -`} - language="tsx" - dark -/> - -Align - - The Stack component also supports responsive alignment, making it easy to - create responsive designs. - - - Hello World - Hello World - Hello World -`} - language="tsx" - dark -/> - - diff --git a/packages/canon/src/components/Table/Docs.mdx b/packages/canon/src/components/Table/Docs.mdx deleted file mode 100644 index 6a6e9c8a59..0000000000 --- a/packages/canon/src/components/Table/Docs.mdx +++ /dev/null @@ -1,5 +0,0 @@ -import { Meta, Controls } from '@storybook/blocks'; - - - -# Table diff --git a/packages/canon/src/components/Text/Docs.mdx b/packages/canon/src/components/Text/Docs.mdx deleted file mode 100644 index 685a00a33f..0000000000 --- a/packages/canon/src/components/Text/Docs.mdx +++ /dev/null @@ -1,101 +0,0 @@ -import { Canvas, Meta, Unstyled, Source } from '@storybook/blocks'; -import * as TextStories from './Text.stories'; -import { Title, Text } from '../../../docs/components'; -import { PropsTable } from '../../../docs/components/PropsTable/PropsTable'; - - - - - -Text - -The `Text` component is used to display content on your page. - - - -Usage -Hello World!`} language="tsx" dark /> - - - API reference - - - - -Examples -Here are some examples of how you can use the Text component. - -All variants - - The `Text` component has a `variant` prop that can be used to change the - appearance of the text. - - - - - - Subtitle Lorem ipsum dolor sit amet consectetur... - Body Lorem ipsum dolor sit amet consectetur... - Caption Lorem ipsum dolor sit amet consectetur... - Label Lorem ipsum dolor sit amet consectetur... -`} - language="tsx" - dark -/> - -All weights - - The `Text` component has a `weight` prop that can be used to change the - appearance of the text. - - - - - - Regular Lorem ipsum dolor sit amet consectetur... - Bold Lorem ipsum dolor sit amet consectetur... -`} - language="tsx" - dark -/> - -Responsive - - You can also use the `variant` prop to change the appearance of the text based - on the screen size. - - -Responsive Lorem ipsum dolor sit amet consectetur...`} - language="tsx" - dark -/> - - diff --git a/yarn.lock b/yarn.lock index 7ff2e44e23..3a442cf601 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3787,18 +3787,18 @@ __metadata: resolution: "@backstage/canon@workspace:packages/canon" dependencies: "@backstage/cli": "workspace:^" - "@base-ui-components/react": ^1.0.0-alpha.4 + "@base-ui-components/react": ^1.0.0-alpha.5 "@chromatic-com/storybook": ^3.2.2 "@remixicon/react": ^4.5.0 - "@storybook/addon-essentials": ^8.4.7 - "@storybook/addon-interactions": ^8.4.7 + "@storybook/addon-essentials": ^8.5.0 + "@storybook/addon-interactions": ^8.5.0 "@storybook/addon-styling-webpack": ^1.0.1 - "@storybook/addon-themes": ^8.4.7 - "@storybook/addon-webpack5-compiler-swc": ^1.0.5 - "@storybook/blocks": ^8.4.7 - "@storybook/react": ^8.4.7 - "@storybook/react-webpack5": ^8.4.7 - "@storybook/test": ^8.4.7 + "@storybook/addon-themes": ^8.5.0 + "@storybook/addon-webpack5-compiler-swc": ^2.0.0 + "@storybook/blocks": ^8.5.0 + "@storybook/react": ^8.5.0 + "@storybook/react-webpack5": ^8.5.0 + "@storybook/test": ^8.5.0 "@testing-library/jest-dom": ^6.0.0 "@types/react": ^18.0.0 "@types/react-dom": ^18.0.0 @@ -3812,7 +3812,7 @@ __metadata: react: ^18.0.2 react-dom: ^18.0.2 react-router-dom: ^6.3.0 - storybook: ^8.4.7 + storybook: ^8.5.0 peerDependencies: "@types/react": ^16.13.1 || ^17.0.0 || ^18.0.0 react: ^16.13.1 || ^17.0.0 || ^18.0.0 @@ -8470,7 +8470,7 @@ __metadata: languageName: node linkType: hard -"@base-ui-components/react@npm:^1.0.0-alpha.4": +"@base-ui-components/react@npm:^1.0.0-alpha.5": version: 1.0.0-alpha.5 resolution: "@base-ui-components/react@npm:1.0.0-alpha.5" dependencies: @@ -17134,9 +17134,9 @@ __metadata: languageName: node linkType: hard -"@storybook/addon-actions@npm:8.4.7": - version: 8.4.7 - resolution: "@storybook/addon-actions@npm:8.4.7" +"@storybook/addon-actions@npm:8.5.0": + version: 8.5.0 + resolution: "@storybook/addon-actions@npm:8.5.0" dependencies: "@storybook/global": ^5.0.0 "@types/uuid": ^9.0.1 @@ -17144,121 +17144,121 @@ __metadata: polished: ^4.2.2 uuid: ^9.0.0 peerDependencies: - storybook: ^8.4.7 - checksum: 7cc48f1ebd137f815b907255e8201e49df5a5fa37fade9fa1a8d2bcaeaf4922e777a20e5e2b84500b85a4976a95b81ab960d6208e1c1d44be1e6fb7a6b93fc6c + storybook: ^8.5.0 + checksum: 88c279bf90edd818017f18925efcaf2b2ccd42f9247832a26dc36a7e73db012b9784889f64986527a55ed9a3746fc5fe229d26de8c2b2dbfb670494213bf688b languageName: node linkType: hard -"@storybook/addon-backgrounds@npm:8.4.7": - version: 8.4.7 - resolution: "@storybook/addon-backgrounds@npm:8.4.7" +"@storybook/addon-backgrounds@npm:8.5.0": + version: 8.5.0 + resolution: "@storybook/addon-backgrounds@npm:8.5.0" dependencies: "@storybook/global": ^5.0.0 memoizerific: ^1.11.3 ts-dedent: ^2.0.0 peerDependencies: - storybook: ^8.4.7 - checksum: 67cf32c3f9d2797158679156fb7250b94e72d692375505aa641d856b89c6340501d8c62653c1bb613aa1920d9115ae56566e1d2866a454515d2a6b639df94856 + storybook: ^8.5.0 + checksum: 6a9b1f1b4d5db5c2f9a21477c3708f4d80e4dae4a33acee0c3130d698664ed180da4ae426708f0a929ba5b4a7daa9ed3d9d9273ca21b898abd535d56e39d701c languageName: node linkType: hard -"@storybook/addon-controls@npm:8.4.7": - version: 8.4.7 - resolution: "@storybook/addon-controls@npm:8.4.7" +"@storybook/addon-controls@npm:8.5.0": + version: 8.5.0 + resolution: "@storybook/addon-controls@npm:8.5.0" dependencies: "@storybook/global": ^5.0.0 dequal: ^2.0.2 ts-dedent: ^2.0.0 peerDependencies: - storybook: ^8.4.7 - checksum: 5d91916bfc767c119b4d938bf8ecaee8a8d661068f11b5f8d73027626340a972eaa503d8ef75c64aa61da4e8b846c3bc3f66529e75f76d830811ce04b17bc367 + storybook: ^8.5.0 + checksum: 8e370b6add3dbbe430f2f72fa9383d872ecbe9e88f0190b560c545620fc21292417d9a042c0aa496640f98b2e5621a46a34da23406848d86c25bf0638812a2de languageName: node linkType: hard -"@storybook/addon-docs@npm:8.4.7": - version: 8.4.7 - resolution: "@storybook/addon-docs@npm:8.4.7" +"@storybook/addon-docs@npm:8.5.0": + version: 8.5.0 + resolution: "@storybook/addon-docs@npm:8.5.0" dependencies: "@mdx-js/react": ^3.0.0 - "@storybook/blocks": 8.4.7 - "@storybook/csf-plugin": 8.4.7 - "@storybook/react-dom-shim": 8.4.7 + "@storybook/blocks": 8.5.0 + "@storybook/csf-plugin": 8.5.0 + "@storybook/react-dom-shim": 8.5.0 react: ^16.8.0 || ^17.0.0 || ^18.0.0 react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 ts-dedent: ^2.0.0 peerDependencies: - storybook: ^8.4.7 - checksum: b4442198f6931b8d1be15b3846898d1e1bda7c36f331f7f5b75dd36b69c1f22eee755633343ba78b7decc5aec45dd50a88375686b10462c0dc79fead9cf66309 + storybook: ^8.5.0 + checksum: 47f46a80929485a3941e69dfd3079cb7d43702e9a5080f788f0971637fc906af5b353446a89f2ebdaa501739a7e778803ad93fec8787de8ba493ebe6e802a725 languageName: node linkType: hard -"@storybook/addon-essentials@npm:^8.4.7": - version: 8.4.7 - resolution: "@storybook/addon-essentials@npm:8.4.7" +"@storybook/addon-essentials@npm:^8.5.0": + version: 8.5.0 + resolution: "@storybook/addon-essentials@npm:8.5.0" dependencies: - "@storybook/addon-actions": 8.4.7 - "@storybook/addon-backgrounds": 8.4.7 - "@storybook/addon-controls": 8.4.7 - "@storybook/addon-docs": 8.4.7 - "@storybook/addon-highlight": 8.4.7 - "@storybook/addon-measure": 8.4.7 - "@storybook/addon-outline": 8.4.7 - "@storybook/addon-toolbars": 8.4.7 - "@storybook/addon-viewport": 8.4.7 + "@storybook/addon-actions": 8.5.0 + "@storybook/addon-backgrounds": 8.5.0 + "@storybook/addon-controls": 8.5.0 + "@storybook/addon-docs": 8.5.0 + "@storybook/addon-highlight": 8.5.0 + "@storybook/addon-measure": 8.5.0 + "@storybook/addon-outline": 8.5.0 + "@storybook/addon-toolbars": 8.5.0 + "@storybook/addon-viewport": 8.5.0 ts-dedent: ^2.0.0 peerDependencies: - storybook: ^8.4.7 - checksum: d8731c18935fbc130beee7236b4e80c1621c6964a4109741512b50f065cd8d322446f8ecd84b4120ad1ce2ea829d0d3b5b764cca19c1bd8b73fc77d04dc13f17 + storybook: ^8.5.0 + checksum: 704f626070eeeb52029798eb5a191408fb87e4e284a97b4b17918cb7a945f25d805b2e704978829d5a3b5a4853b78aab068a18bbd5696ce8a80559fe778e0867 languageName: node linkType: hard -"@storybook/addon-highlight@npm:8.4.7": - version: 8.4.7 - resolution: "@storybook/addon-highlight@npm:8.4.7" +"@storybook/addon-highlight@npm:8.5.0": + version: 8.5.0 + resolution: "@storybook/addon-highlight@npm:8.5.0" dependencies: "@storybook/global": ^5.0.0 peerDependencies: - storybook: ^8.4.7 - checksum: 8b4ad5df3227441e3442d6c49a0be7b14b9b12f722897d45d90ee405ac791e549a41b30f9f6ab3c89f39c89294f7933449338ddcf3c4bdc1e6f3f42a48093826 + storybook: ^8.5.0 + checksum: f29f39e13d798da0f1ddf4f80d1853e44435380a2d1b5e9e4097dbd3ff948ac4fa45ae1f1f95605a7eaa8da5c972bda20dfe6696e989413e8f0449bb98ab3b80 languageName: node linkType: hard -"@storybook/addon-interactions@npm:^8.4.7": - version: 8.4.7 - resolution: "@storybook/addon-interactions@npm:8.4.7" +"@storybook/addon-interactions@npm:^8.5.0": + version: 8.5.0 + resolution: "@storybook/addon-interactions@npm:8.5.0" dependencies: "@storybook/global": ^5.0.0 - "@storybook/instrumenter": 8.4.7 - "@storybook/test": 8.4.7 + "@storybook/instrumenter": 8.5.0 + "@storybook/test": 8.5.0 polished: ^4.2.2 ts-dedent: ^2.2.0 peerDependencies: - storybook: ^8.4.7 - checksum: 9130d38a49cfc858b262faf19214eee83c1a89c012477821bd8371fa0ea952e3de0317d7e1bab78e4945a64b977bbf1b4092bbfe1d1d29bed5d6a117861cdba8 + storybook: ^8.5.0 + checksum: e34efa2baeb02728ddb8d878aff0d3c8f1f6c5f03db21224ad1710d62722aeef7155d828dfc37aa4edce8da2aafef7e824d0755e76f3fe432cc80a2abcc26bb8 languageName: node linkType: hard -"@storybook/addon-measure@npm:8.4.7": - version: 8.4.7 - resolution: "@storybook/addon-measure@npm:8.4.7" +"@storybook/addon-measure@npm:8.5.0": + version: 8.5.0 + resolution: "@storybook/addon-measure@npm:8.5.0" dependencies: "@storybook/global": ^5.0.0 tiny-invariant: ^1.3.1 peerDependencies: - storybook: ^8.4.7 - checksum: 16bc6a5ece783a99eb14cfd705c7664582b640dc81c0226d7f8e649c611082c00b348cc834b43cb5be26b478afc16f3673607f07cccdd04b6dfde7faae99c220 + storybook: ^8.5.0 + checksum: e0d976318b809fdd9573f323d43e4551fd3079c5f74f61dc666a9f2da00350b68e76a0f78c523d308c0165226f1721a41059abb4d9c650be2a002784a165ea59 languageName: node linkType: hard -"@storybook/addon-outline@npm:8.4.7": - version: 8.4.7 - resolution: "@storybook/addon-outline@npm:8.4.7" +"@storybook/addon-outline@npm:8.5.0": + version: 8.5.0 + resolution: "@storybook/addon-outline@npm:8.5.0" dependencies: "@storybook/global": ^5.0.0 ts-dedent: ^2.0.0 peerDependencies: - storybook: ^8.4.7 - checksum: caea4da246bca6d31a217b2f004daa416998c505648f9ed3768d094d4950d1b9f014da70e0f31b92cb6851e92e171cec55ebccf80600902019102c8c997c1228 + storybook: ^8.5.0 + checksum: 8d5323168932700a06e115c74c1c2a867bd32acbfc41d1cb2d0bde5fc4b0beaed5848136d8f2f9e7c4577c1a482cc88f6ddf312b842cea12eb8cc4b13f910018 languageName: node linkType: hard @@ -17273,73 +17273,72 @@ __metadata: languageName: node linkType: hard -"@storybook/addon-themes@npm:^8.4.7": - version: 8.4.7 - resolution: "@storybook/addon-themes@npm:8.4.7" +"@storybook/addon-themes@npm:^8.5.0": + version: 8.5.0 + resolution: "@storybook/addon-themes@npm:8.5.0" dependencies: ts-dedent: ^2.0.0 peerDependencies: - storybook: ^8.4.7 - checksum: a9ba38e765564b20691525d78354ee135c3722ffffb8735df21da8afa33a529f82dd59ae1041f21c3572bf066784f58529ab0a96e1414b2eb61d7916528f9ba1 + storybook: ^8.5.0 + checksum: bdfdd1813bcefe50873fa1d39aa53811596197ade52710cd3abeec0b2bcc2187b38b549ed1be8b7cddd7abf25c63fd00967439cba013c08720560dd3176c1380 languageName: node linkType: hard -"@storybook/addon-toolbars@npm:8.4.7": - version: 8.4.7 - resolution: "@storybook/addon-toolbars@npm:8.4.7" +"@storybook/addon-toolbars@npm:8.5.0": + version: 8.5.0 + resolution: "@storybook/addon-toolbars@npm:8.5.0" peerDependencies: - storybook: ^8.4.7 - checksum: e94f2a47d7c59f19f43b2f345a39e7a0071f80e2b9c636e82b814707b92c86578dba8e0b82a31a8f62806bbfb16d5491f3e784b6ed27a9b5af76c6723bcdfd59 + storybook: ^8.5.0 + checksum: 467d7914411b8be08591c6f91e3fb603ec3cd49eabb1a604cc3d9197337b17aad02d82a46d1b90d749b22066d49ec78c2b889ea4aa9e2e86e81b6af67851c993 languageName: node linkType: hard -"@storybook/addon-viewport@npm:8.4.7": - version: 8.4.7 - resolution: "@storybook/addon-viewport@npm:8.4.7" +"@storybook/addon-viewport@npm:8.5.0": + version: 8.5.0 + resolution: "@storybook/addon-viewport@npm:8.5.0" dependencies: memoizerific: ^1.11.3 peerDependencies: - storybook: ^8.4.7 - checksum: 87c4384293d2adea8a3267560fd72070d2185dfa5e4dc3c5325ccb412d6d5c0bcc6d2c825d92c83e099a8187bddcb7db7f635107308952ad120b057f1a099443 + storybook: ^8.5.0 + checksum: 974c28ce0a6ce69972192cbd2d0f62fd170e638804bc0680ab2045034491eee25877190033138e970d406dd3408a79f5a49c792a97d72cd8dac7fdc25559e25d languageName: node linkType: hard -"@storybook/addon-webpack5-compiler-swc@npm:^1.0.5": - version: 1.0.6 - resolution: "@storybook/addon-webpack5-compiler-swc@npm:1.0.6" +"@storybook/addon-webpack5-compiler-swc@npm:^2.0.0": + version: 2.0.0 + resolution: "@storybook/addon-webpack5-compiler-swc@npm:2.0.0" dependencies: "@swc/core": ^1.7.3 swc-loader: ^0.2.3 - checksum: c70389a664f1862d4939dca645e0f5680f759bcd15d629004a7a7186e2a96993a84f41535f63a610b753c1a625427bc5af5a0a7976f31f0aac81fb80f47523af + checksum: abc904d79fc0ddf1e9207d6012ebc4c9288f966a3821edd6c20732ee6c3c3a4cad44010090bd0d354386089fd59ff0f668e4305e2493ab582a1200b75a67baab languageName: node linkType: hard -"@storybook/blocks@npm:8.4.7, @storybook/blocks@npm:^8.4.7": - version: 8.4.7 - resolution: "@storybook/blocks@npm:8.4.7" +"@storybook/blocks@npm:8.5.0, @storybook/blocks@npm:^8.5.0": + version: 8.5.0 + resolution: "@storybook/blocks@npm:8.5.0" dependencies: - "@storybook/csf": ^0.1.11 + "@storybook/csf": 0.1.12 "@storybook/icons": ^1.2.12 ts-dedent: ^2.0.0 peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta - storybook: ^8.4.7 + storybook: ^8.5.0 peerDependenciesMeta: react: optional: true react-dom: optional: true - checksum: 4fd794e48efd809dd7588c65f721f3d3674554d18ffef380a0b8431af654e995f54a4a2ab6e7a1b6f092ddf614a4701db361175912d61ece9599a1e1cbce6c83 + checksum: 6b0288254d4411320f79bdcc26719413e8bc71a63c0333af5cafb526a104c9b25b254ed65fc51760f6efe05120d846ae71b1b4a76b00262579440afa948e9155 languageName: node linkType: hard -"@storybook/builder-webpack5@npm:8.4.7": - version: 8.4.7 - resolution: "@storybook/builder-webpack5@npm:8.4.7" +"@storybook/builder-webpack5@npm:8.5.0": + version: 8.5.0 + resolution: "@storybook/builder-webpack5@npm:8.5.0" dependencies: - "@storybook/core-webpack": 8.4.7 - "@types/node": ^22.0.0 + "@storybook/core-webpack": 8.5.0 "@types/semver": ^7.3.4 browser-assert: ^1.2.1 case-sensitive-paths-webpack-plugin: ^2.4.0 @@ -17364,40 +17363,39 @@ __metadata: webpack-hot-middleware: ^2.25.1 webpack-virtual-modules: ^0.6.0 peerDependencies: - storybook: ^8.4.7 + storybook: ^8.5.0 peerDependenciesMeta: typescript: optional: true - checksum: e1a48c3b03a4bac12ec99d41de3107246f4940bf7c67f2294db49b3b4e92cb65166bfde32184372bde758a4386206b2013b2b56683e684a2f2d096814bd4120a + checksum: 21cc74a46e5bb70126e44df09173ae6d01756e7d4cb86ff70da72066f8543c73d424560ee47cec5b46157c487fb6e7c63220f48a133cef2088f3a32ef313dd7e languageName: node linkType: hard -"@storybook/components@npm:8.4.7": - version: 8.4.7 - resolution: "@storybook/components@npm:8.4.7" +"@storybook/components@npm:8.5.0": + version: 8.5.0 + resolution: "@storybook/components@npm:8.5.0" peerDependencies: storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0 - checksum: e39fb81e8386db4f3f76cbf4f82e50512fed2f65a581951c0b61e00c9834c20cfff7f717e936353275dadfe6a25ffaac5d47151adbe1e3be85e709f8a64f6a15 + checksum: 2436cd632134a5e6e1733d2081898d41bd7ff328f30a4173d80a27f27b8e989d2b29ee70df4caae54040122381b376d461d9bbfc372d72e98cfceeaf60d0b724 languageName: node linkType: hard -"@storybook/core-webpack@npm:8.4.7": - version: 8.4.7 - resolution: "@storybook/core-webpack@npm:8.4.7" +"@storybook/core-webpack@npm:8.5.0": + version: 8.5.0 + resolution: "@storybook/core-webpack@npm:8.5.0" dependencies: - "@types/node": ^22.0.0 ts-dedent: ^2.0.0 peerDependencies: - storybook: ^8.4.7 - checksum: 9b89842f51f391502e8e466747f68bcfb285691d958b8cbf6e57e691108c9c199430d43be90a558987c88e95bff6daa5129af6ad0b785752e2538c09f0d1a438 + storybook: ^8.5.0 + checksum: 18e3551a3503316a738390f76bd68a6d119ab3bedf57d0ffa008d0d5823958856b2ed5f29e5a86d869202b10f9d78b7fcb5346c8c6a9c5950cf7f3571b7802c7 languageName: node linkType: hard -"@storybook/core@npm:8.4.7": - version: 8.4.7 - resolution: "@storybook/core@npm:8.4.7" +"@storybook/core@npm:8.5.0": + version: 8.5.0 + resolution: "@storybook/core@npm:8.5.0" dependencies: - "@storybook/csf": ^0.1.11 + "@storybook/csf": 0.1.12 better-opn: ^3.0.2 browser-assert: ^1.2.1 esbuild: ^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0 || ^0.24.0 @@ -17413,27 +17411,27 @@ __metadata: peerDependenciesMeta: prettier: optional: true - checksum: 969cde2203c9c2c744f2a1d2858b2adeb7d57fc75e703f64187fcf0056eb7da48d0507d919718c0866952dda084eb51d79e65a90abec8bb0dcb404b542a6872f + checksum: 362e48c30c4b08505d40d605fcf490a42b73069b1d297ef385ccadc16a481582d4a28c1518a50ced649a957cbc561d09e19be7d9cd5c69172a33e8012f99643d languageName: node linkType: hard -"@storybook/csf-plugin@npm:8.4.7": - version: 8.4.7 - resolution: "@storybook/csf-plugin@npm:8.4.7" +"@storybook/csf-plugin@npm:8.5.0": + version: 8.5.0 + resolution: "@storybook/csf-plugin@npm:8.5.0" dependencies: unplugin: ^1.3.1 peerDependencies: - storybook: ^8.4.7 - checksum: d9006d1a506796717528ee81948be89c8ca7e4a4ad463e024936d828b8e91e12940a41f054db4d5b1f1b058146113aaeb415eca87ca94142c3ef1ef501aead17 + storybook: ^8.5.0 + checksum: 4d81e94dbd7aea3dd7da36c9ec80559d5c5d3597aae3f3a59472b803fda3eb8a33c35dcc6a4d238f1daf1d39d1f135e0daa26d3d1b29feabf942b6138d3b5054 languageName: node linkType: hard -"@storybook/csf@npm:^0.1.11": - version: 0.1.11 - resolution: "@storybook/csf@npm:0.1.11" +"@storybook/csf@npm:0.1.12, @storybook/csf@npm:^0.1.11": + version: 0.1.12 + resolution: "@storybook/csf@npm:0.1.12" dependencies: type-fest: ^2.19.0 - checksum: ba2a265f62ad82a2853b069f77e974efe31bed263a640ca1dd8e6d7e194022018a67ad4a2587ae928f33ae45aaf6ffedd5925ba3fcf3fe5b7996667a918e22eb + checksum: 85ef7d481a2d3329b481013a7c16e847aa732b96aea74efd40f95a84a2692d19ab4260f9603028cd3369303d95210497ff1dfc8cd9d6a26ad76f82e676f34a80 languageName: node linkType: hard @@ -17454,24 +17452,24 @@ __metadata: languageName: node linkType: hard -"@storybook/instrumenter@npm:8.4.7": - version: 8.4.7 - resolution: "@storybook/instrumenter@npm:8.4.7" +"@storybook/instrumenter@npm:8.5.0": + version: 8.5.0 + resolution: "@storybook/instrumenter@npm:8.5.0" dependencies: "@storybook/global": ^5.0.0 "@vitest/utils": ^2.1.1 peerDependencies: - storybook: ^8.4.7 - checksum: 8e3316a42c172099b3a27bedbfde4da45e76d2f7508ff20e9a259322a35a52c69cc0fb74a3611d10f5963ff165e83c6ae0b78b1e0e5f77a1aa0d70ac16f7be83 + storybook: ^8.5.0 + checksum: a5d4fc43f797db0654b5207f4dd2512b2cbca02ca3d31872ced05955d4568d01e58adaaebf44db5c03414bfacf83b4de26fd1cd4dda00d20d2981cd526a098a2 languageName: node linkType: hard -"@storybook/manager-api@npm:8.4.7": - version: 8.4.7 - resolution: "@storybook/manager-api@npm:8.4.7" +"@storybook/manager-api@npm:8.5.0": + version: 8.5.0 + resolution: "@storybook/manager-api@npm:8.5.0" peerDependencies: storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0 - checksum: 2b826ec55de7ea0b5b5151dfa896f3e7eddfd36ede61f8a7ad14a37733d5d5645565f863dbde7e2272f1e9b5717f26de7802ae60e297a2647ee2c4c072ed3069 + checksum: d0e343579430e1896b6cf5fe5a81d5784a9fcad2725d6cc3012d05f6195c45cbe39bc5fcae21b334dd701cf6ab4d805261f513394687734e3a987906449f18d4 languageName: node linkType: hard @@ -17484,14 +17482,13 @@ __metadata: languageName: node linkType: hard -"@storybook/preset-react-webpack@npm:8.4.7": - version: 8.4.7 - resolution: "@storybook/preset-react-webpack@npm:8.4.7" +"@storybook/preset-react-webpack@npm:8.5.0": + version: 8.5.0 + resolution: "@storybook/preset-react-webpack@npm:8.5.0" dependencies: - "@storybook/core-webpack": 8.4.7 - "@storybook/react": 8.4.7 + "@storybook/core-webpack": 8.5.0 + "@storybook/react": 8.5.0 "@storybook/react-docgen-typescript-plugin": 1.0.6--canary.9.0c3f3b7.0 - "@types/node": ^22.0.0 "@types/semver": ^7.3.4 find-up: ^5.0.0 magic-string: ^0.30.5 @@ -17503,20 +17500,20 @@ __metadata: peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta - storybook: ^8.4.7 + storybook: ^8.5.0 peerDependenciesMeta: typescript: optional: true - checksum: 0e2a3934e0b1b225adaa12ab1a44822a8dd3b0ce23be0fbcf923bdf555e6ff3008123f55d31825548cbc4a5f76a7adadd3b4d933289aaa94f7d2e2404d761f51 + checksum: f14ebe8281e3a1296359fa59e0feff93bf9d2f67d9e6e16bdba1e00f3f979dc9abffdef1c3dc152b673e5edf6246f8613a5f27ad8ecf26cfcbfd0d9b594c3f99 languageName: node linkType: hard -"@storybook/preview-api@npm:8.4.7": - version: 8.4.7 - resolution: "@storybook/preview-api@npm:8.4.7" +"@storybook/preview-api@npm:8.5.0": + version: 8.5.0 + resolution: "@storybook/preview-api@npm:8.5.0" peerDependencies: storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0 - checksum: 1c467bb2c16c5998b9bc4c2c013e6786936d5f6a373ad8d8ab1beb626616c3187329fdfc3a709663b4af963c7e5789a1401166c6e2a3a66a12f66e858aa94e91 + checksum: 8e13270e970a36c935eb4ee926cfc8d187f33d55fc121793845c0b6e37eba7e2581b2dba5dea6bffb843d202f61f20aed71e6e9dceae3e5438b017acdb32609a languageName: node linkType: hard @@ -17538,86 +17535,85 @@ __metadata: languageName: node linkType: hard -"@storybook/react-dom-shim@npm:8.4.7": - version: 8.4.7 - resolution: "@storybook/react-dom-shim@npm:8.4.7" +"@storybook/react-dom-shim@npm:8.5.0": + version: 8.5.0 + resolution: "@storybook/react-dom-shim@npm:8.5.0" peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta - storybook: ^8.4.7 - checksum: 4de29cbb990bfb2f310440aa995b024faa93fd1d5c7c942d6d661d590693eb56e0567a141c14faca63e8b24fc2f6b6b44c02af37cd2d5b469c1129b0e78fc79d + storybook: ^8.5.0 + checksum: d41521f4d965c954fd9a6517ee334801db98c6558ca985d80ae6586bab07aa5f73986711d49429d329fdcb835dc04417b8721600df77a2341b7524e5e2cab9ab languageName: node linkType: hard -"@storybook/react-webpack5@npm:^8.4.7": - version: 8.4.7 - resolution: "@storybook/react-webpack5@npm:8.4.7" +"@storybook/react-webpack5@npm:^8.5.0": + version: 8.5.0 + resolution: "@storybook/react-webpack5@npm:8.5.0" dependencies: - "@storybook/builder-webpack5": 8.4.7 - "@storybook/preset-react-webpack": 8.4.7 - "@storybook/react": 8.4.7 - "@types/node": ^22.0.0 + "@storybook/builder-webpack5": 8.5.0 + "@storybook/preset-react-webpack": 8.5.0 + "@storybook/react": 8.5.0 peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta - storybook: ^8.4.7 + storybook: ^8.5.0 typescript: ">= 4.2.x" peerDependenciesMeta: typescript: optional: true - checksum: 5be2491f5fe2525dee96a86d1fe7775bbaaf5352cfb538aa8e91bab7bdbea47597670761921436ea7041fc6277cb33ee680bad6efd7bfd84fc38d66942aa4001 + checksum: ea50f906c8f7ee2a786f25a41d1f29d624239447c0183e54641a361ac37b51e0423fdaa9807fdb488b3aa7518fcd41924766219b02c23112e6ce7bd8d49053b1 languageName: node linkType: hard -"@storybook/react@npm:8.4.7, @storybook/react@npm:^8.4.7": - version: 8.4.7 - resolution: "@storybook/react@npm:8.4.7" +"@storybook/react@npm:8.5.0, @storybook/react@npm:^8.5.0": + version: 8.5.0 + resolution: "@storybook/react@npm:8.5.0" dependencies: - "@storybook/components": 8.4.7 + "@storybook/components": 8.5.0 "@storybook/global": ^5.0.0 - "@storybook/manager-api": 8.4.7 - "@storybook/preview-api": 8.4.7 - "@storybook/react-dom-shim": 8.4.7 - "@storybook/theming": 8.4.7 + "@storybook/manager-api": 8.5.0 + "@storybook/preview-api": 8.5.0 + "@storybook/react-dom-shim": 8.5.0 + "@storybook/theming": 8.5.0 peerDependencies: - "@storybook/test": 8.4.7 + "@storybook/test": 8.5.0 react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta - storybook: ^8.4.7 + storybook: ^8.5.0 typescript: ">= 4.2.x" peerDependenciesMeta: "@storybook/test": optional: true typescript: optional: true - checksum: 5ad2137f8f5f0a34cb90e2582fd574aff888c544f0f9907472d930d4fb1f444124aa84188a0b5d661cc6c4c0bf7210b1e616a53b4be3f2df2479165571fa9085 + checksum: 8f37ce63666b85193acd61dc5dd1b8464445a7d5841e99c1887de287865a455868545eba78647a1c28a52c8b1232bdd1fdebfa2a339e6d027f723aa360d6c0bd languageName: node linkType: hard -"@storybook/test@npm:8.4.7, @storybook/test@npm:^8.4.7": - version: 8.4.7 - resolution: "@storybook/test@npm:8.4.7" +"@storybook/test@npm:8.5.0, @storybook/test@npm:^8.5.0": + version: 8.5.0 + resolution: "@storybook/test@npm:8.5.0" dependencies: - "@storybook/csf": ^0.1.11 + "@storybook/csf": 0.1.12 "@storybook/global": ^5.0.0 - "@storybook/instrumenter": 8.4.7 + "@storybook/instrumenter": 8.5.0 "@testing-library/dom": 10.4.0 "@testing-library/jest-dom": 6.5.0 "@testing-library/user-event": 14.5.2 "@vitest/expect": 2.0.5 "@vitest/spy": 2.0.5 peerDependencies: - storybook: ^8.4.7 - checksum: ef1147edb55be9770004d3194dcbeef650768659af0704cd50e9d14f3c647f28855270e5151e609775770c30bf5d42fbd33ad3bc383d25846bc1e5e9e4f490f7 + storybook: ^8.5.0 + checksum: 26b4978a93baf1e31deab709179c2c4181d2019eb249db55f8d48f387861cb48a7235a73dea90dece30491cc31067f51c5601f6d7227b2519b42db30c1cf648c languageName: node linkType: hard -"@storybook/theming@npm:8.4.7": - version: 8.4.7 - resolution: "@storybook/theming@npm:8.4.7" +"@storybook/theming@npm:8.5.0": + version: 8.5.0 + resolution: "@storybook/theming@npm:8.5.0" peerDependencies: storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0 - checksum: 47d29993c33bb29994d227af30e099579b7cf760652ed743020f5d7e5a5974f59a6ebeb1cc8995e6158da9cf768a8d2f559d1d819cc082d0bcdb056d85fdcb29 + checksum: d93b5d104c500b674353b53ba6d5b0ad86e83206e84587a44c2eac561713bccaf53017cbb6d498d540e8eb4a21781e6494a86a0d22246404bad2dc78f1f99df6 languageName: node linkType: hard @@ -43553,11 +43549,11 @@ __metadata: languageName: node linkType: hard -"storybook@npm:^8.4.7": - version: 8.4.7 - resolution: "storybook@npm:8.4.7" +"storybook@npm:^8.5.0": + version: 8.5.0 + resolution: "storybook@npm:8.5.0" dependencies: - "@storybook/core": 8.4.7 + "@storybook/core": 8.5.0 peerDependencies: prettier: ^2 || ^3 peerDependenciesMeta: @@ -43567,7 +43563,7 @@ __metadata: getstorybook: ./bin/index.cjs sb: ./bin/index.cjs storybook: ./bin/index.cjs - checksum: 6cd44f8d51b68f2c2363d5e996bc8bf1e47a5acc2050da351d0fb49acd3d99ed093eef1b148145a1af9c08ead8592a87ee569c4456941a37dc374f9f21ea45c3 + checksum: 1557e9397a663b21221cdbea616461897cd6a6a3387d8e5f8c0a6dd7a1b6c0f73ba358fbed9d5aa747375546be1694bf7b860d1240f10951c08bd5915fca3a12 languageName: node linkType: hard