diff --git a/package.json b/package.json index fa2c7bd7d..f9ad5bd3e 100644 --- a/package.json +++ b/package.json @@ -94,6 +94,7 @@ "traverse": "^0.6.8", "ts-jest": "^29.1.5", "typescript": "^5.3.3", + "typescript-plugin-css-modules": "^5.1.0", "vite": "^5.3.1", "vite-plugin-dts": "^3.7.3", "vite-plugin-svgr": "^3.3.0", diff --git a/src/components/Breadcrumb/Breadcrumb.Collapsed.tsx b/src/components/Breadcrumb/Breadcrumb.Collapsed.tsx new file mode 100644 index 000000000..b60c03033 --- /dev/null +++ b/src/components/Breadcrumb/Breadcrumb.Collapsed.tsx @@ -0,0 +1,90 @@ +/** + * Copyright 2024 Mia srl + * + * 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. + * + * SPDX-License-Identifier: Apache-2.0 + */ + +import { Dropdown, Menu, Skeleton } from 'antd' +import { ReactElement, useMemo } from 'react' +import { ItemType } from 'antd/es/menu/hooks/useItems' +import classNames from 'classnames' + +import { BodyS } from '../Typography/BodyX/BodyS' +import { BreadcrumbItemType } from './Breadcrumb.types' +import { BreadcrumbSeparator } from './Breadcrumb.Separator' +import { Icon } from '../Icon' +import { buildItemKey } from './Breadcrumb.utils' +import styles from './Breadcrumb.module.css' + +type Props = { + isLoading?: boolean + getDropdownContainer: () => HTMLElement | undefined + items: BreadcrumbItemType[] +} + +export const BREADCRUMB_COLLAPSED_WIDTH = 32 + +export const BreadcrumbCollapsed = ({ isLoading, getDropdownContainer, items }: Props): ReactElement => { + const menuItems = useMemo(() => { + return items.map((item, idx) => { + const maybeSubItem = item.menu?.items?.find(({ key }) => key && key === item.menu?.activeKey) + const labelText = maybeSubItem?.label ?? item.label + const labelIcon = maybeSubItem?.icon ?? item.icon + + return { + className: !item.onClick ? styles.noInteraction : '', + key: buildItemKey(item, idx), + label: ( + + {labelText} + + ), + icon: labelIcon ?
{labelIcon}
: undefined, + onClick: ({ domEvent }) => item.onClick?.(domEvent as React.MouseEvent), + } + }) + }, [items]) + + const dropdown = useMemo(() => { + return ( +
+
+ +
+
+ ) + }, [menuItems]) + + return isLoading + ? + : ( + <> + dropdown} + getPopupContainer={(trigger) => getDropdownContainer() ?? trigger} + placement="bottomRight" + trigger={['click']} + > +
+ +
+ + + + ) +} diff --git a/src/components/Breadcrumb/Breadcrumb.Dropdown.tsx b/src/components/Breadcrumb/Breadcrumb.Dropdown.tsx new file mode 100644 index 000000000..0c54b2fe8 --- /dev/null +++ b/src/components/Breadcrumb/Breadcrumb.Dropdown.tsx @@ -0,0 +1,113 @@ +/** + * Copyright 2024 Mia srl + * + * 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. + * + * SPDX-License-Identifier: Apache-2.0 + */ + +import { Input, Menu } from 'antd' +import { ReactElement, useMemo, useState } from 'react' +import { ItemType } from 'antd/es/menu/hooks/useItems' +import { debounce } from 'lodash-es' + +import { BreadcrumbItemMenu, BreadcrumbItemMenuItem, BreadcrumbItemType, SearchOptions } from './Breadcrumb.types' +import { BodyS } from '../Typography/BodyX/BodyS' +import { Icon } from '../Icon' +import { buildMenuItemKey } from './Breadcrumb.utils' +import styles from './Breadcrumb.module.css' + +type Props = { + item: BreadcrumbItemType + setOpen: (next: boolean) => void +} + +export const getSearchOption = (search: BreadcrumbItemMenu['search'], opt: K): SearchOptions[K] | undefined => { + return typeof search === 'boolean' ? undefined : search?.[opt] +} + +export const BreadcrumbItemMenuDropdown = ({ item, setOpen }: Props): ReactElement => { + const [searchValue, setSearchValue] = useState('') + + const filteredItems = useMemo(() => { + if (!item.menu?.items) { return [] } + + if (searchValue === '') { return item.menu.items } + + return item.menu.items.filter((subItem) => subItem.label?.toLowerCase().includes(searchValue.toLowerCase())) + }, [item, searchValue]) + + const menuItems = useMemo(() => filteredItems.map((menuItemData, currentIndex) => { + return { + key: buildMenuItemKey(menuItemData, currentIndex), + icon: menuItemData?.icon, + label: ( + + {menuItemData?.label} + + ), + } + }), [filteredItems]) + + return ( +
+ { + Boolean(item.menu?.search) && ( +
+ } + onChange={(event) => { + const onChange = getSearchOption(item.menu?.search, 'onChange') + + if (onChange) { + onChange(event) + } else { + debounce(() => setSearchValue(event.target.value), 300)() + } + }} + /> +
+ ) + } + { + filteredItems.length > 0 + ? ( +
+ { + item.menu?.onClick?.(key, domEvent) + + if (item.menu?.isOpen === undefined) { + setOpen(false) + } + }} + /> +
+ ) + : ( +
+ + {item.menu?.emptyText ?? 'No items'} + +
+ ) + } +
+ ) +} diff --git a/src/components/Breadcrumb/Breadcrumb.Item.tsx b/src/components/Breadcrumb/Breadcrumb.Item.tsx new file mode 100644 index 000000000..db77300ca --- /dev/null +++ b/src/components/Breadcrumb/Breadcrumb.Item.tsx @@ -0,0 +1,166 @@ +/** + * Copyright 2024 Mia srl + * + * 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. + * + * SPDX-License-Identifier: Apache-2.0 + */ + +import { Dropdown, DropdownProps, Skeleton } from 'antd' +import { ReactElement, useCallback, useMemo, useState } from 'react' +import classNames from 'classnames' + +import { BodyL } from '../Typography/BodyX/BodyL' +import { BreadcrumbItemMenuDropdown } from './Breadcrumb.Dropdown' +import { BreadcrumbItemType } from './Breadcrumb.types' +import { BreadcrumbSeparator } from './Breadcrumb.Separator' +import CaretFullDownSvg from './assets/caret-full-down.svg' +import styles from './Breadcrumb.module.css' + +type Props = { + item: BreadcrumbItemType + getDropdownContainer: () => HTMLElement | undefined + isLoading?: boolean; + isHidden?: boolean; + isLastItem: boolean +} + +export const BreadcrumbItem = ({ + item, + getDropdownContainer, + isLoading, + isHidden, + isLastItem, +}: Props): ReactElement => { + const [dropdownOpen, setDropdownOpen] = useState(false) + + const hasMenu = useMemo(() => Boolean(item.menu?.items), [item]) + + const label = useMemo(() => { + const maybeSubItem = item.menu?.items?.find(({ key }) => key && key === item.menu?.activeKey) + const labelText = maybeSubItem?.label ?? item.label + const labelIcon = maybeSubItem?.icon ?? item.icon + + return (!labelText && !labelIcon) + ? undefined + : ( + <> + {labelIcon} + { + labelText && ( +
+ + {labelText} + +
+ ) + } + + ) + }, [item]) + + const onItemClick = useCallback>((...args) => { + if (isHidden) { return } + + return item.onClick?.(...args) + }, [isHidden, item]) + + const itemButton = useMemo(() => { + if (!label && !hasMenu) { + return ( +
+
+
+ ) + } + + const dropdownProps: DropdownProps = { + destroyPopupOnHide: true, + dropdownRender: () => , + getPopupContainer: (trigger) => getDropdownContainer() ?? trigger, + open: !isHidden && hasMenu && (item.menu?.isOpen !== undefined ? item.menu.isOpen : dropdownOpen), + placement: 'bottomLeft', + trigger: ['click'], + onOpenChange: (next: boolean): void => { + if (isHidden) { return } + + item.menu?.onDropdownVisibleChange?.(next) + + if (item.menu?.isOpen === undefined) { + setDropdownOpen(next) + } + }, + } + + const isButtonConnected = Boolean(!item.onClick && label && hasMenu) + if (isButtonConnected) { + return ( + +
+
+ {label} + +
+
+ + ) + } + + return ( +
+
+ { + label && ( +
+ {label} +
+ ) + } + { + hasMenu && ( + +
+ +
+ + ) + } +
+
+ ) + }, [label, hasMenu, isHidden, item, dropdownOpen, isLastItem, onItemClick, getDropdownContainer]) + + return ( + <> + {isLoading ? : itemButton} + {!isLastItem && !isHidden && } + + ) +} diff --git a/src/components/Breadcrumb/Breadcrumb.Separator.tsx b/src/components/Breadcrumb/Breadcrumb.Separator.tsx new file mode 100644 index 000000000..a2566e795 --- /dev/null +++ b/src/components/Breadcrumb/Breadcrumb.Separator.tsx @@ -0,0 +1,40 @@ +/** + * Copyright 2024 Mia srl + * + * 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. + * + * SPDX-License-Identifier: Apache-2.0 + */ + +import { ReactElement } from 'react' + +import { Icon } from '../Icon' +import { useTheme } from '../../hooks/useTheme' + +export const BREADCRUMB_SEPARATOR_SIZE = 16 +export const BREADCRUMB_SEPARATOR_PADDING = 4 + +const separatorStyle: React.CSSProperties = { + width: BREADCRUMB_SEPARATOR_SIZE, + height: BREADCRUMB_SEPARATOR_SIZE, +} + +export const BreadcrumbSeparator = (): ReactElement => { + const { palette } = useTheme() + + return ( +
+ +
+ ) +} diff --git a/src/components/Breadcrumb/Breadcrumb.mocks.tsx b/src/components/Breadcrumb/Breadcrumb.mocks.tsx new file mode 100644 index 000000000..7f9f6a2d2 --- /dev/null +++ b/src/components/Breadcrumb/Breadcrumb.mocks.tsx @@ -0,0 +1,178 @@ +/** + * Copyright 2024 Mia srl + * + * 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. + * + * SPDX-License-Identifier: Apache-2.0 + */ + +import { action } from '@storybook/addon-actions' + +import { BreadcrumbProps } from './Breadcrumb.props' +import { Icon } from '../Icon' + +export const breadcrumbIcon = +export const breadcrumbLabel = 'Text' + +export const defaultProps: BreadcrumbProps = { + items: [ + { + onClick: action('click'), + label: 'Orders', + icon: , + }, + { + menu: { + onClick: action('click'), + activeKey: '1', + items: [ + { key: '1', label: 'Order #1', icon: }, + { key: '2', label: 'Order #2', icon: }, + { key: '3', label: 'Order #3', icon: }, + ], + }, + }, + { label: 'Details' }, + ], +} + +export const withoutMenuProps: BreadcrumbProps = { + items: [ + { onClick: action('click'), label: 'Text only' }, + { onClick: action('click'), icon: breadcrumbIcon }, + { onClick: action('click'), label: 'Text & icon', icon: breadcrumbIcon }, + { onClick: action('click'), label: 'Very long text that should be ellipsed at some point' }, + { label: 'Not clickable' }, + { onClick: action('click'), label: 'Last item' }, + ], +} + +export const withMenuProps: BreadcrumbProps = { + items: [ + { + onClick: action('click'), + icon: breadcrumbIcon, + label: 'Clickable button', + menu: { + items: [ + { key: 'sibling-1', label: 'Sibling 1', icon: breadcrumbIcon }, + { key: 'sibling-2', label: 'Sibling 2' }, + { key: 'sibling-3', label: 'Sibling 3 with a very long text that should be ellipsed at some point' }, + ], + onDropdownVisibleChange: action('dropdown open'), + onClick: action('click'), + }, + }, + { + icon: breadcrumbIcon, + label: 'Not clickable button', + menu: { + items: [ + { key: 'sibling-1', label: 'Sibling 1', icon: breadcrumbIcon }, + { key: 'sibling-2', label: 'Sibling 2' }, + ], + onDropdownVisibleChange: action('dropdown open'), + onClick: action('click'), + }, + }, + { + label: 'With search', + menu: { + items: [ + { key: 'orders', label: 'Orders', icon: breadcrumbIcon }, + { key: 'shipping', label: 'Shipping', icon: breadcrumbIcon }, + { key: 'refunds', label: 'Refunds', icon: breadcrumbIcon }, + { key: 'packaging', label: 'Packaging', icon: breadcrumbIcon }, + ], + onDropdownVisibleChange: action('dropdown open'), + onClick: action('click'), + search: { allowClear: true }, + }, + }, + { + menu: { + activeKey: 'sibling-1', + items: [ + { key: 'sibling-1', label: 'Sibling 1', icon: breadcrumbIcon }, + { key: 'sibling-2', label: 'Sibling 2' }, + ], + onDropdownVisibleChange: action('dropdown open'), + onClick: action('click'), + }, + }, + ], +} + +export const uncontrolledProps: BreadcrumbProps = { + items: [ + { + label: 'Fallback label', + menu: { + onClick: action('click'), + items: [ + { key: 'orders', label: 'Orders', icon: breadcrumbIcon }, + { key: 'shipping', label: 'Shipping', icon: breadcrumbIcon }, + { key: 'refunds', label: 'Refunds', icon: breadcrumbIcon }, + { key: 'packaging', label: 'Packaging', icon: breadcrumbIcon }, + ], + search: true, + }, + }, + ], +} + +export const controlledProps: BreadcrumbProps = { + items: [ + { + label: 'Fallback label', + menu: { + activeKey: 'orders', + items: [ + { key: 'orders', label: 'Orders', icon: breadcrumbIcon }, + { key: 'shipping', label: 'Shipping', icon: breadcrumbIcon }, + { key: 'refunds', label: 'Refunds', icon: breadcrumbIcon }, + { key: 'packaging', label: 'Packaging', icon: breadcrumbIcon }, + ], + onClick: action('click'), + isOpen: true, + onDropdownVisibleChange: action('dropdown open'), + search: { + onChange: action('search'), + }, + }, + }, + ], +} + +export const loadingProps: BreadcrumbProps = { + isLoading: true, + items: [ + { onClick: action('click'), label: 'Text' }, + { onClick: action('click'), label: 'Text' }, + { onClick: action('click'), label: 'Text' }, + ], +} + +export const collapsedProps: BreadcrumbProps = { + items: [ + { onClick: action('click'), label: 'Text' }, + { onClick: action('click'), icon: breadcrumbIcon, label: 'Text' }, + { onClick: action('click'), label: 'Text' }, + { onClick: action('click'), icon: breadcrumbIcon, label: 'Text' }, + { onClick: action('click'), icon: breadcrumbIcon, label: 'Text' }, + { onClick: action('click'), icon: breadcrumbIcon, label: 'Text' }, + { onClick: action('click'), label: 'Text' }, + { onClick: action('click'), label: 'Text' }, + { onClick: action('click'), label: 'Text' }, + ], +} diff --git a/src/components/Breadcrumb/Breadcrumb.module.css b/src/components/Breadcrumb/Breadcrumb.module.css new file mode 100644 index 000000000..abb09ba35 --- /dev/null +++ b/src/components/Breadcrumb/Breadcrumb.module.css @@ -0,0 +1,253 @@ +/** + * Copyright 2024 Mia srl + * + * 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. + * + * SPDX-License-Identifier: Apache-2.0 + */ + +.breadcrumb { + /* TODO: these CSS variables are missing in DS */ + --item-bg: var(--palette-background-neutral, #89898914); + --item-bg-hover: var(--palette-action-alternate-secondary-hover, #8989891F); + --item-bg-active: var(--palette-action-alternate-secondary-selected, #8989893D); + --item-bg-transition: background-color 0.25s ease-in-out; + + width: 100%; + overflow: hidden; + + & .breadcrumbItems { + display: flex; + justify-content: flex-start; + align-items: center; + gap: var(--spacing-gap-xs, 4px); + + & .breadcrumbItemLast { + & .breadcrumbItemLabelText { + font-weight: var(--typography-bodyLBold-fontWeight, 600); + } + } + + & .breadcrumbItemButton { + display: flex; + align-items: center; + justify-content: flex-start; + cursor: pointer; + height: var(--shape-size-xl, 32px); + box-sizing: border-box; + + & .breadcrumbItemButtonEmpty { + background-color: var(--item-bg); + transition: var(--item-bg-transition); + border-radius: var(--shape-border-radius-md, 4px); + width: var(--shape-size-xl, 32px); + height: var(--shape-size-xl, 32px); + + &.breadcrumbItemButtonNoInteraction { + cursor: auto; + } + + &:not(.breadcrumbItemButtonNoInteraction) { + &:hover { + background-color: var(--item-bg-hover); + } + + &:active { + background-color: var(--item-bg-active); + } + } + } + + &.breadcrumbItemButtonSegmented { + gap: 1px; + + &.breadcrumbItemButtonNoInteraction { + cursor: default; + + & .breadcrumbItemLabel { + &:hover { + background-color: var(--item-bg); + } + + &:active { + background-color: var(--item-bg); + } + } + } + + & .breadcrumbItemLabel { + display: flex; + align-items: center; + gap: var(--spacing-gap-xs, 4px); + background-color: var(--item-bg); + padding: var(--spacing-padding-xs, 4px) var(--spacing-padding-sm, 8px); + border-radius: var(--shape-border-radius-md, 4px); + transition: var(--item-bg-transition); + height: 100%; + box-sizing: border-box; + + &:hover { + background-color: var(--item-bg-hover); + } + + &:active { + background-color: var(--item-bg-active); + } + + &.withMenu { + border-radius: var(--shape-border-radius-md, 4px) 0 0 var(--shape-border-radius-md, 4px); + } + } + + & .breadcrumbMenuIcon { + display: flex; + align-items: center; + background-color: var(--item-bg); + padding: var(--spacing-padding-sm, 8px) var(--spacing-padding-xs, 4px); + border-radius: var(--shape-border-radius-md, 4px); + transition: var(--item-bg-transition); + cursor: pointer; + + &:hover { + background-color: var(--item-bg-hover); + } + + &:active { + background-color: var(--item-bg-active); + } + + &.withLabel { + border-radius: 0 var(--shape-border-radius-md, 4px) var(--shape-border-radius-md, 4px) 0; + } + } + } + + &.breadcrumbItemButtonConnected { + gap: 4px; + background-color: var(--item-bg); + padding: var(--spacing-padding-xs, 4px) var(--spacing-padding-sm, 8px); + border-radius: var(--shape-border-radius-md, 4px); + cursor: pointer; + transition: var(--item-bg-transition); + + &:hover { + background-color: var(--item-bg-hover); + } + + &:active { + background-color: var(--item-bg-active); + } + } + + & .breadcrumbItemLabelText { + max-width: 250px; + } + } + } + + & .breadcrumbHidden { + visibility: hidden; + position: absolute; + top: 0; + left: 0; + white-space: nowrap; + } +} + +.dropdownMenuContainer { + width: 300px; + max-height: 224px; + overflow: auto; + display: flex; + flex-direction: column; + gap: var(--spacing-gap-xs, 4px); + padding: var(--spacing-padding-xs, 4px); + background-color: var(--palette-common-white, #ffffff); + border-radius: var(--shape-border-radius-lg, 8px); + box-shadow: 0 2px 4px 0 #0000000D, 0 1px 6px -1px #0000000D, 0 1px 2px 0 #00000014; + + &.dropdownCollapseMenuContainer { + width: 200px; + } + + & .noItemsContainer { + width: 100%; + display: flex; + align-items: center; + justify-content: center; + padding: var(--spacing-padding-sm, 8px); + box-sizing: border-box; + + & > div { + color: var(--palette-common-grey-400, #ACACAC); + } + } + + & .dropdownMenuSearch { + display: flex; + justify-content: center; + + & :global(.mia-platform-input-affix-wrapper) { + &:hover { + border: 1px solid var(--palette-action-primary-hover, #1890FF); + } + + &:global(.mia-platform-input-affix-wrapper-focused) { + border: 1px solid var(--palette-action-primary-active, #005dc9); + box-shadow: 0px 0px 0px 2px #005DC940; + } + } + } + + & .dropdownMenu { + & :global(.mia-platform-dropdown-menu) { + border-radius: 0; + box-shadow: none; + padding: 0; + + & :global(.mia-platform-dropdown-menu-item) { + padding: var(--spacing-padding-sm, 8px) !important; + gap: var(--spacing-gap-sm, 8px); + + &:hover { + background-color: var(--palette-action-alternate-secondary-hover, #00000014) !important; + cursor: pointer; + } + + &:global(.mia-platform-dropdown-menu-item-selected) { + background-color: var(--palette-action-alternate-primary-active, #1890ff14) !important; + + &:hover { + background-color: var(--palette-action-alternate-primary-active, #1890ff14) !important; + } + } + + &.noInteraction { + cursor: default !important; + background-color: white !important; + } + + & :global(.mia-platform-dropdown-menu-title-content) { + width: 100%; + } + + & :global(.mia-platform-dropdown-menu-item-icon) { + width: 16px; + height: 16px; + min-width: unset; + margin-inline-end: unset; + } + } + } + } +} diff --git a/src/components/Breadcrumb/Breadcrumb.props.ts b/src/components/Breadcrumb/Breadcrumb.props.ts new file mode 100644 index 000000000..968967521 --- /dev/null +++ b/src/components/Breadcrumb/Breadcrumb.props.ts @@ -0,0 +1,67 @@ +/** + * Copyright 2024 Mia srl + * + * 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. + * + * SPDX-License-Identifier: Apache-2.0 + */ + +import { BreadcrumbItemType } from './Breadcrumb.types' + +export type BreadcrumbProps = { + + /** + * Indicates whether the component is loading. + */ + isLoading?: boolean; + + /** + * The list of breadcrumb items. + * + * `object`: + * - icon: icon to be displayed alongside the breadcrumb item.
`ReactNode` + * - key: unique key for the breadcrumb item. Defaults to item index.
`string` + * - label: the label of the breadcrumb item.
`ReactNode` + * - onClick: callback function to handle click events on the breadcrumb item.
+ * `(event: React.MouseEvent) => void` + * - menu: menu associated with the breadcrumb item.
+ * `object`: + * - activeKey: the key of the currently active menu item.
`string` + * - onClick: callback function to handle click events on the menu item.
+ * `(key: string, event: React.MouseEvent | React.KeyboardEvent) => void` + * - isOpen: indicates whether the menu is open for a controlled behavior.
`boolean` + * - onDropdownVisibleChange: callback function to handle changes in dropdown visibility.
+ * `(open: boolean) => void` + * - emptyText: text to show if menu is empty or search matched no elements. Defaults to "No items"
+ * `string` + * - search: searchbar visibility and options.
+ * `boolean | object`: + * - onChange: callback function to handle search operations.
+ * `React.ChangeEventHandler` + * - allowClear: if true, allows clearing of the search input.
`boolean` + * - placeholder: placeholder text for the search input.
`string` + * - items: list of menu items in the breadcrumb.
+ * `object[]`: + * - icon: icon to be displayed alongside the menu item.
`ReactNode` + * - key: unique key for the menu item. Defaults to item index.
`string` + * - label: label of the menu item.
`string` + */ + items: BreadcrumbItemType[]; + + /** + * The DOM element where menu and collapse dropdowns are attached. Defaults to the Breadcrumb component itself. + * + * @param containerNode - The Breadcrumb HTML element. + */ + getPopupContainer?: (containerNode: HTMLElement) => HTMLElement; +} diff --git a/src/components/Breadcrumb/Breadcrumb.stories.tsx b/src/components/Breadcrumb/Breadcrumb.stories.tsx new file mode 100644 index 000000000..3cd8eb86b --- /dev/null +++ b/src/components/Breadcrumb/Breadcrumb.stories.tsx @@ -0,0 +1,130 @@ +/** + * Copyright 2024 Mia srl + * + * 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. + * + * SPDX-License-Identifier: Apache-2.0 + */ + +import type { Meta, StoryObj } from '@storybook/react' +import { cloneDeep, set } from 'lodash-es' +import { useCallback, useMemo, useState } from 'react' +import { action } from '@storybook/addon-actions' + +import { collapsedProps, controlledProps, defaultProps, loadingProps, uncontrolledProps, withMenuProps, withoutMenuProps } from './Breadcrumb.mocks' +import { Breadcrumb } from './Breadcrumb' +import { BreadcrumbItemMenu } from './Breadcrumb.types' + +const meta = { + component: Breadcrumb, +} satisfies Meta + +export default meta +type Story = StoryObj + +export const Default: Story = { + args: defaultProps, + decorators: [ + (_, { args, id }) => { + return ( + window.document.getElementById(`anchor--${id}`) ?? document.body} + /> + ) + }, + ], +} + +export const WithoutMenu: Story = { + args: withoutMenuProps, +} + +export const WithMenu: Story = { + args: withMenuProps, + decorators: [ + (_, { args, id }) => { + return ( + window.document.getElementById(`anchor--${id}`) ?? document.body} + /> + ) + }, + ], +} + +export const Uncontrolled: Story = { + args: uncontrolledProps, + decorators: [ + (_, { args, id }) => { + const [activeKey, setActiveKey] = useState() + + const onSubItemClick = useCallback>((key, event) => { + action('click')(key, event) + setActiveKey(key) + }, []) + + const items = useMemo(() => { + let nextItems = cloneDeep(args.items!) + + nextItems = set(nextItems, [0, 'menu', 'activeKey'], activeKey) + nextItems = set(nextItems, [0, 'menu', 'onClick'], onSubItemClick) + + return nextItems + }, [activeKey, args, onSubItemClick]) + + return ( + window.document.getElementById(`anchor--${id}`) ?? document.body} + items={items} + /> + ) + }, + ], +} + +export const Controlled: Story = { + args: controlledProps, + decorators: [ + (_, { args }) => { + return ( + window.document.getElementById('storybook-root') ?? document.body} + /> + ) + }, + ], +} + +export const Loading: Story = { + args: loadingProps, +} + +export const Collapsed: Story = { + args: collapsedProps, + decorators: [ + (_, { args, id }) => { + return ( +
+ window.document.getElementById(`anchor--${id}`) ?? document.body} + /> +
+ ) + }, + ], +} diff --git a/src/components/Breadcrumb/Breadcrumb.test.tsx b/src/components/Breadcrumb/Breadcrumb.test.tsx new file mode 100644 index 000000000..aa8ebefc0 --- /dev/null +++ b/src/components/Breadcrumb/Breadcrumb.test.tsx @@ -0,0 +1,248 @@ +/** + * Copyright 2024 Mia srl + * + * 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. + * + * SPDX-License-Identifier: Apache-2.0 + */ + +import { fireEvent, render, screen, waitFor, waitForElementToBeRemoved } from '../../test-utils' +import { Breadcrumb } from '.' +import { BreadcrumbProps } from './Breadcrumb.props' +import { breadcrumbIcon } from './Breadcrumb.mocks' + +describe('Breadcrumb Component', () => { + beforeEach(() => { + jest.resetAllMocks() + }) + + test('renders a breadcrumb with empty items', () => { + const { asFragment } = render() + expect(asFragment()).toMatchSnapshot() + }) + + test('renders a breadcrumb with different button types', () => { + const props: BreadcrumbProps = { + items: [ + { }, + { label: 'Text' }, + { label: 'Very long text that should be ellipsed at some point' }, + { icon: breadcrumbIcon }, + { label: 'Text', icon: breadcrumbIcon }, + { menu: { items: [] } }, + { label: 'Text', menu: { items: [] } }, + { icon: breadcrumbIcon, label: 'Text', menu: { items: [] } }, + { onClick: jest.fn, icon: breadcrumbIcon, label: 'Text', menu: { items: [] } }, + ], + } + + const { asFragment } = render() + expect(asFragment()).toMatchSnapshot() + }) + + test('renders a breadcrumb in loading state', () => { + const props: BreadcrumbProps = { + isLoading: true, + items: [ + { label: 'Text' }, + { label: 'Text' }, + { label: 'Text' }, + ], + } + + const { asFragment } = render() + + expect(asFragment()).toMatchSnapshot() + + // Fire a resize to trigger hidden items computation + fireEvent(window, new Event('resize')) + expect(asFragment()).toMatchSnapshot() + }) + + test('renders item menu correctly', async() => { + const buttonClickMock = jest.fn() + const menuItemClickMock = jest.fn() + const onDropdownVisibleChangeMock = jest.fn() + + const props: BreadcrumbProps = { + items: [ + { + key: 'root', + onClick: buttonClickMock, + label: 'Text', + icon: breadcrumbIcon, + menu: { + onClick: menuItemClickMock, + onDropdownVisibleChange: onDropdownVisibleChangeMock, + search: true, + items: [ + { key: 'item-1', label: 'Item 1' }, + { key: 'item-2', label: 'Item 2', icon: breadcrumbIcon }, + ], + }, + }, + { + menu: { + activeKey: 'sub-item', + items: [{ key: 'sub-item', label: 'Sub item', icon: breadcrumbIcon }], + }, + }, + ], + getPopupContainer: (containerNode) => containerNode, + } + + const { asFragment } = render() + expect(asFragment()).toMatchSnapshot() + + const [button] = screen.getAllByText('Text') + fireEvent.click(button) + expect(buttonClickMock).toHaveBeenCalledTimes(1) + + const [dropdownTrigger1, dropdownTrigger2] = screen.getAllByLabelText('caret-full-down') + + fireEvent.click(dropdownTrigger1) + expect(buttonClickMock).toHaveBeenCalledTimes(1) + expect(onDropdownVisibleChangeMock).toHaveBeenCalledTimes(1) + expect(onDropdownVisibleChangeMock).toHaveBeenCalledWith(true) + + expect(asFragment()).toMatchSnapshot() + + fireEvent.click(screen.getByText('Item 1')) + expect(menuItemClickMock).toHaveBeenCalledTimes(1) + expect(menuItemClickMock).toHaveBeenCalledWith('item-1', expect.any(Object)) + + fireEvent.click(dropdownTrigger1) + fireEvent.click(screen.getByText('Item 2')) + expect(menuItemClickMock).toHaveBeenNthCalledWith(2, 'item-2', expect.any(Object)) + + fireEvent.click(dropdownTrigger1) + fireEvent.change(screen.getByPlaceholderText('Search...'), { target: { value: 'foo' } }) + await waitFor(() => expect(screen.getByText('No items')).toBeInTheDocument()) + + fireEvent.click(dropdownTrigger1) + expect(screen.queryByText('No items')).not.toBeInTheDocument() + + fireEvent.click(dropdownTrigger1) + expect(screen.queryByText('No items')).not.toBeInTheDocument() + expect(screen.getByText('Item 1')).toBeInTheDocument() + expect(screen.getByText('Item 2')).toBeInTheDocument() + fireEvent.change(screen.getByPlaceholderText('Search...'), { target: { value: '1' } }) + await waitFor(() => expect(screen.getByText('Item 1')).toBeInTheDocument()) + await waitForElementToBeRemoved(() => screen.queryByText('Item 2')) + + fireEvent.click(dropdownTrigger2) + expect(asFragment()).toMatchSnapshot() + }) + + test('renders controlled item menu correctly', () => { + const onSearchMock = jest.fn() + const menuItemClickMock = jest.fn() + const onDropdownVisibleChangeMock = jest.fn() + + const props: BreadcrumbProps = { + items: [ + { + key: 'root', + label: 'Text', + icon: breadcrumbIcon, + menu: { + isOpen: true, + onClick: menuItemClickMock, + onDropdownVisibleChange: onDropdownVisibleChangeMock, + search: { + onChange: onSearchMock, + }, + items: [ + { key: 'item-1', label: 'Item 1' }, + { key: 'item-2', label: 'Item 2', icon: breadcrumbIcon }, + ], + }, + }, + ], + } + + const { asFragment } = render() + expect(asFragment()).toMatchSnapshot() + + expect(screen.getByText('Item 1')).toBeInTheDocument() + expect(screen.getByText('Item 2')).toBeInTheDocument() + + const [button] = screen.getAllByText('Text') + fireEvent.click(button) + expect(onDropdownVisibleChangeMock).toHaveBeenNthCalledWith(1, false) + expect(screen.getByText('Item 1')).toBeInTheDocument() + expect(screen.getByText('Item 2')).toBeInTheDocument() + + fireEvent.change(screen.getByPlaceholderText('Search...'), { target: { value: 'foo' } }) + expect(onSearchMock).toHaveBeenNthCalledWith(1, expect.any(Object)) + expect(screen.getByText('Item 1')).toBeInTheDocument() + expect(screen.getByText('Item 2')).toBeInTheDocument() + }) + + test('renders a breadcrumb with collapsed items', () => { + const onClickMock = jest.fn() + const onDropdownVisibleChangeMock = jest.fn() + + const props: BreadcrumbProps = { + items: [ + { label: 'Text 1' }, + { label: 'Text 2' }, + { label: 'Text 3', onClick: jest.fn }, + { label: 'Text 4', icon: breadcrumbIcon }, + { label: 'Text 5', menu: { items: [{ label: 'Item 1' }] } }, + { + menu: { + activeKey: '1', + items: [{ key: '1', label: 'Item 1', icon: breadcrumbIcon }], + }, + }, + { label: 'Text 7', onClick: onClickMock }, + { + label: 'Text 8', + menu: { + onDropdownVisibleChange: onDropdownVisibleChangeMock, + items: [{ label: 'Item 2' }], + }, + }, + ], + } + + const { asFragment } = render() + + // Fire a resize to trigger hidden items computation + fireEvent(window, new Event('resize')) + + expect(asFragment()).toMatchSnapshot() + + expect(screen.getAllByText('Text 2')).toHaveLength(1) + + const collapseButton = screen.getByLabelText('PiDotsThree') + fireEvent.click(collapseButton) + + expect(asFragment()).toMatchSnapshot() + + expect(screen.getAllByText('Text 2')).toHaveLength(2) + + fireEvent.click(screen.getAllByText('Text 7')[1]) + expect(onClickMock).toHaveBeenCalledTimes(1) + + fireEvent.click(screen.getAllByText('Text 7')[0]) + expect(onClickMock).toHaveBeenCalledTimes(1) + + fireEvent.click(screen.getAllByText('Text 8')[0]) + expect(onDropdownVisibleChangeMock).toHaveBeenCalledTimes(1) + + fireEvent.click(screen.getAllByText('Text 8')[1]) + expect(onDropdownVisibleChangeMock).toHaveBeenCalledTimes(1) + }) +}) diff --git a/src/components/Breadcrumb/Breadcrumb.tsx b/src/components/Breadcrumb/Breadcrumb.tsx new file mode 100644 index 000000000..47668244c --- /dev/null +++ b/src/components/Breadcrumb/Breadcrumb.tsx @@ -0,0 +1,99 @@ +/** + * Copyright 2024 Mia srl + * + * 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. + * + * SPDX-License-Identifier: Apache-2.0 + */ + +import { ReactElement, useCallback, useEffect, useRef, useState } from 'react' +import classNames from 'classnames' + +import { getItemsFittingInParent, renderItem } from './Breadcrumb.utils' +import { BreadcrumbButton } from './Breadcrumb.types' +import { BreadcrumbProps } from './Breadcrumb.props' +import styles from './Breadcrumb.module.css' + +/** + * UI component for displaying the current location within an hierarchy. + * + * @returns {Breadcrumb} Breadcrumb component + */ +export const Breadcrumb = ({ isLoading, items, getPopupContainer }: BreadcrumbProps): ReactElement => { + const [visibleItems, setVisibleItems] = useState([]) + + const breadcrumbRef = useRef(null) + const hiddenContainerRef = useRef(null) + + const getDropdownContainer = useCallback(() => { + /* istanbul ignore next */ + if (!breadcrumbRef.current) { return } + + return getPopupContainer?.(breadcrumbRef.current) ?? breadcrumbRef.current + }, [getPopupContainer]) + + // Computes visible and collapsed items + useEffect(() => { + if (!items || items.length <= 2) { + setVisibleItems(items ?? []) + return + } + + const container = breadcrumbRef.current + const hiddenContainer = hiddenContainerRef.current + /* istanbul ignore if */ + if (!container || !hiddenContainer) { + setVisibleItems([]) + return + } + + const setItems = (): void => { + const nextItems = getItemsFittingInParent(items, container, hiddenContainer) + setVisibleItems(nextItems) + } + + setTimeout(() => setItems()) + + window.addEventListener('resize', setItems) + + return () => window.removeEventListener('resize', setItems) + }, [items]) + + return ( +
+
+ { + visibleItems.map((breadcrumbItem, index, itemList) => renderItem( + breadcrumbItem, + index, + itemList, + { isHidden: false, isLoading, getDropdownContainer } + )) + } +
+
+ { + items?.map((breadcrumbItem, index, itemList) => renderItem( + breadcrumbItem, + index, + itemList, + { isHidden: true, isLoading, getDropdownContainer } + )) + } +
+
+ ) +} diff --git a/src/components/Breadcrumb/Breadcrumb.types.ts b/src/components/Breadcrumb/Breadcrumb.types.ts new file mode 100644 index 000000000..b688e395a --- /dev/null +++ b/src/components/Breadcrumb/Breadcrumb.types.ts @@ -0,0 +1,135 @@ +/** + * Copyright 2024 Mia srl + * + * 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. + * + * SPDX-License-Identifier: Apache-2.0 + */ + +import { ReactNode } from 'react' + +export type BreadcrumbItemMenuItem = { + + /** + * Icon to be displayed alongside the menu item. + */ + icon?: ReactNode; + + /** + * Unique key for the menu item. + */ + key?: string; + + /** + * The label of the menu item. + */ + label?: string; +} + +export type SearchOptions = { + + /** + * If true, allows clearing of the search input. + */ + allowClear?: boolean; + + /** + * Placeholder text for the search input. + */ + placeholder?: string; + + /** + * Callback function to handle search operations. + */ + onChange?: React.ChangeEventHandler; +} + +export type BreadcrumbItemMenu = { + + /** + * List of menu items in the breadcrumb. + */ + items?: BreadcrumbItemMenuItem[]; + + /** + * The key of the currently active menu item. + */ + activeKey?: string; + + /** + * Callback function to handle click events on menu items. + * + * @param key - The key of the clicked item. + * @param event - The click event. + */ + onClick?: (key: string, event: React.MouseEvent | React.KeyboardEvent) => void; + + /** + * Indicates whether the menu is open for a controlled behavior. + */ + isOpen?: boolean; + + /** + * Callback function to handle changes in dropdown visibility. + * + * @param open - Indicates whether the dropdown is open. + */ + onDropdownVisibleChange?: (open: boolean) => void; + + /** + * Searchbar visibility and options. + */ + search?: boolean | SearchOptions; + + /** + * Text to show if menu is empty or search matched no elements. Defaults to "No items". + */ + emptyText?: string +} + +export type BreadcrumbItemType = { + + /** + * Icon to be displayed alongside the breadcrumb item. + */ + icon?: ReactNode; + + /** + * Unique key for the breadcrumb item. + */ + key?: string; + + /** + * The label of the breadcrumb item. + */ + label?: ReactNode; + + /** + * Menu associated with the breadcrumb item. + */ + menu?: BreadcrumbItemMenu; + + /** + * Callback function to handle click events on the breadcrumb item. + * + * @param event - The click event. + */ + onClick?: (event: React.MouseEvent) => void; +} + +export type BreadcrumbCollapsedItem = { + type: 'collapsed' + items: BreadcrumbItemType[] +} + +export type BreadcrumbButton = BreadcrumbItemType | BreadcrumbCollapsedItem diff --git a/src/components/Breadcrumb/Breadcrumb.utils.tsx b/src/components/Breadcrumb/Breadcrumb.utils.tsx new file mode 100644 index 000000000..2d6cd81e8 --- /dev/null +++ b/src/components/Breadcrumb/Breadcrumb.utils.tsx @@ -0,0 +1,100 @@ +/** + * Copyright 2024 Mia srl + * + * 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. + * + * SPDX-License-Identifier: Apache-2.0 + */ + +import { ReactElement } from 'react' + +import { BREADCRUMB_COLLAPSED_WIDTH, BreadcrumbCollapsed } from './Breadcrumb.Collapsed' +import { BREADCRUMB_SEPARATOR_PADDING, BREADCRUMB_SEPARATOR_SIZE } from './Breadcrumb.Separator' +import { BreadcrumbButton, BreadcrumbItemMenuItem, BreadcrumbItemType } from './Breadcrumb.types' +import { BreadcrumbItem } from './Breadcrumb.Item' + +export const renderItem = ( + item: BreadcrumbButton, + idx: number, + itemList: BreadcrumbButton[], + ctx: { isHidden?: boolean, isLoading?: boolean, getDropdownContainer: () => HTMLElement | undefined } +): ReactElement => { + if ('type' in item && item.type === 'collapsed') { + return ( + + ) + } + + // SAFETY: we can infer the type given the if statement above + const typedItem = item as BreadcrumbItemType + + return ( + + ) +} + +export const getItemsFittingInParent = ( + items: BreadcrumbItemType[], + container: HTMLDivElement, + hiddenContainer: HTMLDivElement +): BreadcrumbButton[] => { + const maxWidth = container.getBoundingClientRect().width + + const separatorWidth = BREADCRUMB_SEPARATOR_SIZE + (BREADCRUMB_SEPARATOR_PADDING * 2) + + const elements = Array.from(hiddenContainer.children) + const nextVisibleItems: BreadcrumbButton[] = [] + + if (!elements.length || !items.length) { + return nextVisibleItems + } + + const nextCollapsedItems = items.slice(1, items.length - 1) + nextVisibleItems.push(items[items.length - 1]) + + let currWidth = 0 + currWidth += elements[elements.length - 1].getBoundingClientRect().width + currWidth += elements[0].getBoundingClientRect().width + separatorWidth + currWidth += BREADCRUMB_COLLAPSED_WIDTH + separatorWidth + + for (let i = elements.length - 2; i > 0; i--) { + currWidth += elements[i].getBoundingClientRect().width + separatorWidth + if (currWidth > maxWidth) { + break + } + + nextVisibleItems.unshift(nextCollapsedItems.pop()!) + } + + if (nextCollapsedItems.length > 0) { + nextVisibleItems.unshift({ type: 'collapsed', items: nextCollapsedItems }) + } + nextVisibleItems.unshift(items[0]) + + return nextVisibleItems +} + +export const buildItemKey = (item: BreadcrumbItemType, idx: number): string => item.key || `breadcrumb-item-${idx}` +export const buildMenuItemKey = (item: BreadcrumbItemMenuItem, idx: number): string => item.key || `breadcrumb-menu-item-${idx}` diff --git a/src/components/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap b/src/components/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap new file mode 100644 index 000000000..d84024145 --- /dev/null +++ b/src/components/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap @@ -0,0 +1,2225 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Breadcrumb Component renders a breadcrumb in loading state 1`] = ` + +
+
+
+
+ +
+
+ +
+
+ +
+
+
+ +`; + +exports[`Breadcrumb Component renders a breadcrumb in loading state 2`] = ` + +
+
+
+ +
+
+ + + +
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+ +
+
+
+ +`; + +exports[`Breadcrumb Component renders a breadcrumb with collapsed items 1`] = ` + +
+
+
+
+
+
+
+ Text 1 +
+
+
+
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+
+
+ Text 8 +
+
+ +
+
+
+
+
+
+
+
+
+ Text 1 +
+
+
+
+
+
+
+
+
+
+ Text 2 +
+
+
+
+
+
+
+
+
+
+ Text 3 +
+
+
+
+
+
+
+
+ + + +
+
+ Text 4 +
+
+
+
+
+
+
+
+
+ Text 5 +
+
+ +
+
+
+
+ + + +
+
+ Item 1 +
+
+ +
+
+
+
+
+
+
+ Text 7 +
+
+
+
+
+
+
+
+
+ Text 8 +
+
+ +
+
+
+
+ +`; + +exports[`Breadcrumb Component renders a breadcrumb with collapsed items 2`] = ` + +
+
+
+
+
+
+
+ Text 1 +
+
+
+
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+
+
+ Text 8 +
+
+ +
+
+
+
+
+
+
+
+
+ Text 1 +
+
+
+
+
+
+
+
+
+
+ Text 2 +
+
+
+
+
+
+
+
+
+
+ Text 3 +
+
+
+
+
+
+
+
+ + + +
+
+ Text 4 +
+
+
+
+
+
+
+
+
+ Text 5 +
+
+ +
+
+
+
+ + + +
+
+ Item 1 +
+
+ +
+
+
+
+
+
+
+ Text 7 +
+
+
+
+
+
+
+
+
+ Text 8 +
+
+ +
+
+
+
+
+
+ + +
+
+
+ +`; + +exports[`Breadcrumb Component renders a breadcrumb with different button types 1`] = ` + +
+
+
+
+
+
+
+
+
+
+
+ Text +
+
+
+
+
+
+
+
+
+
+ Very long text that should be ellipsed at some point +
+
+
+
+
+
+
+
+ + + +
+
+
+
+
+
+ + + +
+
+ Text +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+ Text +
+
+ +
+
+
+
+ + + +
+
+ Text +
+
+ +
+
+
+
+
+ + + +
+
+ Text +
+
+
+
+ +
+
+
+
+
+ +`; + +exports[`Breadcrumb Component renders a breadcrumb with empty items 1`] = ` + +
+
+
+
+ +`; + +exports[`Breadcrumb Component renders controlled item menu correctly 1`] = ` + +
+
+
+
+ + + +
+
+ Text +
+
+ +
+
+
+
+
+
+ + + +
+
+ Text +
+
+ +
+
+
+
+
+
+ + + + + + + + +
+
+ + +
+
+
+ +`; + +exports[`Breadcrumb Component renders item menu correctly 1`] = ` + +
+
+
+
+
+ + + +
+
+ Text +
+
+
+
+ +
+
+
+
+ + + +
+
+
+ + + +
+
+ Sub item +
+
+ +
+
+
+
+
+
+
+ + + +
+
+ Text +
+
+
+
+ +
+
+
+
+
+ + + +
+
+ Sub item +
+
+ +
+
+
+
+ +`; + +exports[`Breadcrumb Component renders item menu correctly 2`] = ` + +
+
+
+
+
+ + + +
+
+ Text +
+
+
+
+ +
+
+
+
+ + + +
+
+
+ + + +
+
+ Sub item +
+
+ +
+
+
+
+
+
+
+ + + +
+
+ Text +
+
+
+
+ +
+
+
+
+
+ + + +
+
+ Sub item +
+
+ +
+
+
+
+
+
+ + + + + + + + +
+
+ + +
+
+
+ +`; + +exports[`Breadcrumb Component renders item menu correctly 3`] = ` + +
+
+
+
+
+ + + +
+
+ Text +
+
+
+
+ +
+
+
+
+ + + +
+
+
+ + + +
+
+ Sub item +
+
+ +
+
+
+
+
+
+
+ + + +
+
+ Text +
+
+
+
+ +
+
+
+
+
+ + + +
+
+ Sub item +
+
+ +
+
+
+
+
+
+ + +
+
+
+ +`; diff --git a/src/components/Breadcrumb/assets/caret-full-down.svg b/src/components/Breadcrumb/assets/caret-full-down.svg new file mode 100644 index 000000000..c39a65956 --- /dev/null +++ b/src/components/Breadcrumb/assets/caret-full-down.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/Breadcrumb/index.ts b/src/components/Breadcrumb/index.ts new file mode 100644 index 000000000..4d25fe71e --- /dev/null +++ b/src/components/Breadcrumb/index.ts @@ -0,0 +1,19 @@ +/** + * Copyright 2024 Mia srl + * + * 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. + * + * SPDX-License-Identifier: Apache-2.0 + */ + +export { Breadcrumb } from './Breadcrumb' diff --git a/src/index.ts b/src/index.ts index 6e0964e8a..263def8b8 100644 --- a/src/index.ts +++ b/src/index.ts @@ -17,6 +17,7 @@ */ import * as testUtils from './test-utils' +import { Breadcrumb } from './components/Breadcrumb' import { Button } from './components/Button' import { Card } from './components/Card' import { Divider } from './components/Divider' @@ -32,6 +33,7 @@ import hooks from './hooks' import themes from './themes' export { + Breadcrumb, Button, Card, Divider, diff --git a/tsconfig.json b/tsconfig.json index 71df02a94..a1ed1e8c0 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -20,11 +20,14 @@ "strictNullChecks": true, "noUnusedLocals": true, "noUnusedParameters": true, - "noFallthroughCasesInSwitch": true + "noFallthroughCasesInSwitch": true, + + /* Plugins */ + "plugins": [{ "name": "typescript-plugin-css-modules" }] }, "include": [ "src", - "vite.config.ts", + "vite.config.ts", "package.json" ], "references": [{ "path": "./tsconfig.node.json" }] diff --git a/yarn.lock b/yarn.lock index a4854decb..7488154e9 100644 --- a/yarn.lock +++ b/yarn.lock @@ -12,6 +12,13 @@ __metadata: languageName: node linkType: hard +"@adobe/css-tools@npm:~4.3.1": + version: 4.3.3 + resolution: "@adobe/css-tools@npm:4.3.3" + checksum: 10/0e77057efb4e18182560855503066b75edca98671be327d3f8a7ae89ec3da6821e693114b55225909fca00d7e7ed8422f3d79d71fe95dd4d5df1f2026a9fda02 + languageName: node + linkType: hard + "@ampproject/remapping@npm:^2.2.0": version: 2.3.0 resolution: "@ampproject/remapping@npm:2.3.0" @@ -2527,6 +2534,7 @@ __metadata: traverse: "npm:^0.6.8" ts-jest: "npm:^29.1.5" typescript: "npm:^5.3.3" + typescript-plugin-css-modules: "npm:^5.1.0" vite: "npm:^5.3.1" vite-plugin-dts: "npm:^3.7.3" vite-plugin-svgr: "npm:^3.3.0" @@ -5103,6 +5111,24 @@ __metadata: languageName: node linkType: hard +"@types/postcss-modules-local-by-default@npm:^4.0.2": + version: 4.0.2 + resolution: "@types/postcss-modules-local-by-default@npm:4.0.2" + dependencies: + postcss: "npm:^8.0.0" + checksum: 10/c4a50f0fab1bacbf2968a05156f0acf10225a605b021dcfb4e39892429507089a91919609111c79d1ed5902c55f9b4ee35c00aa75d98bb18d5415b3cd1223239 + languageName: node + linkType: hard + +"@types/postcss-modules-scope@npm:^3.0.4": + version: 3.0.4 + resolution: "@types/postcss-modules-scope@npm:3.0.4" + dependencies: + postcss: "npm:^8.0.0" + checksum: 10/4249ace34023dc797b47a1041c844d6a772d6339a96e7a45fdacc70d03db8fb2917ac90728c390a743ecf2da821f921761ad2bdb57f4d6936ad4690bc572ad5c + languageName: node + linkType: hard + "@types/pretty-hrtime@npm:^1.0.0": version: 1.0.3 resolution: "@types/pretty-hrtime@npm:1.0.3" @@ -6572,7 +6598,7 @@ __metadata: languageName: node linkType: hard -"chokidar@npm:^3.6.0": +"chokidar@npm:>=3.0.0 <4.0.0, chokidar@npm:^3.6.0": version: 3.6.0 resolution: "chokidar@npm:3.6.0" dependencies: @@ -6909,6 +6935,15 @@ __metadata: languageName: node linkType: hard +"copy-anything@npm:^2.0.1": + version: 2.0.6 + resolution: "copy-anything@npm:2.0.6" + dependencies: + is-what: "npm:^3.14.1" + checksum: 10/3b41be8f6322c2c13e93cde62a64d532f138f31d44ab85a3405d88601134afccc068be06534c162ed5c06b209788c423d7aaa50f1c34a92db81a1f8560d199eb + languageName: node + linkType: hard + "copy-to-clipboard@npm:^3.3.3": version: 3.3.3 resolution: "copy-to-clipboard@npm:3.3.3" @@ -6993,6 +7028,15 @@ __metadata: languageName: node linkType: hard +"cssesc@npm:^3.0.0": + version: 3.0.0 + resolution: "cssesc@npm:3.0.0" + bin: + cssesc: bin/cssesc + checksum: 10/0e161912c1306861d8f46e1883be1cbc8b1b2879f0f509287c0db71796e4ddfb97ac96bdfca38f77f452e2c10554e1bb5678c99b07a5cf947a12778f73e47e12 + languageName: node + linkType: hard + "cssom@npm:^0.5.0": version: 0.5.0 resolution: "cssom@npm:0.5.0" @@ -7464,7 +7508,7 @@ __metadata: languageName: node linkType: hard -"dotenv@npm:^16.0.0": +"dotenv@npm:^16.0.0, dotenv@npm:^16.4.2": version: 16.4.5 resolution: "dotenv@npm:16.4.5" checksum: 10/55a3134601115194ae0f924e54473459ed0d9fc340ae610b676e248cca45aa7c680d86365318ea964e6da4e2ea80c4514c1adab5adb43d6867fb57ff068f95c8 @@ -7605,6 +7649,17 @@ __metadata: languageName: node linkType: hard +"errno@npm:^0.1.1": + version: 0.1.8 + resolution: "errno@npm:0.1.8" + dependencies: + prr: "npm:~1.0.1" + bin: + errno: cli.js + checksum: 10/93076ed11bedb8f0389cbefcbdd3445f66443159439dccbaac89a053428ad92147676736235d275612dc0296d3f9a7e6b7177ed78a566b6cd15dacd4fa0d5888 + languageName: node + linkType: hard + "error-ex@npm:^1.3.1": version: 1.3.2 resolution: "error-ex@npm:1.3.2" @@ -9367,7 +9422,7 @@ __metadata: languageName: node linkType: hard -"iconv-lite@npm:0.6.3, iconv-lite@npm:^0.6.2": +"iconv-lite@npm:0.6.3, iconv-lite@npm:^0.6.2, iconv-lite@npm:^0.6.3": version: 0.6.3 resolution: "iconv-lite@npm:0.6.3" dependencies: @@ -9376,6 +9431,15 @@ __metadata: languageName: node linkType: hard +"icss-utils@npm:^5.0.0, icss-utils@npm:^5.1.0": + version: 5.1.0 + resolution: "icss-utils@npm:5.1.0" + peerDependencies: + postcss: ^8.1.0 + checksum: 10/5c324d283552b1269cfc13a503aaaa172a280f914e5b81544f3803bc6f06a3b585fb79f66f7c771a2c052db7982c18bf92d001e3b47282e3abbbb4c4cc488d68 + languageName: node + linkType: hard + "identity-obj-proxy@npm:^3.0.0": version: 3.0.0 resolution: "identity-obj-proxy@npm:3.0.0" @@ -9399,6 +9463,22 @@ __metadata: languageName: node linkType: hard +"image-size@npm:~0.5.0": + version: 0.5.5 + resolution: "image-size@npm:0.5.5" + bin: + image-size: bin/image-size.js + checksum: 10/f41ec6cfccfa6471980e83568033a66ec53f84d1bcb70033e946a7db9c1b6bbf5645ec90fa5a8bdcdc84d86af0032014eff6fa078a60c2398dfce6676c46bdb7 + languageName: node + linkType: hard + +"immutable@npm:^4.0.0": + version: 4.3.6 + resolution: "immutable@npm:4.3.6" + checksum: 10/59fedb67f26e265035616b27e33ef90b53b434cf76fb09212ec2d6ae32ee8d2fe2641e6dc32dbc78498c521fbf5f72c6740d39affba63a0a36a3884272371857 + languageName: node + linkType: hard + "import-fresh@npm:^3.2.1, import-fresh@npm:^3.3.0": version: 3.3.0 resolution: "import-fresh@npm:3.3.0" @@ -9884,6 +9964,13 @@ __metadata: languageName: node linkType: hard +"is-what@npm:^3.14.1": + version: 3.14.1 + resolution: "is-what@npm:3.14.1" + checksum: 10/249beb4a8c1729c80ed24fa8527835301c8c70d2fa99706a301224576e0650df61edd7a0a8853999bf5fbe2c551f07148d2c3535260772e05a4c373d3d5362e1 + languageName: node + linkType: hard + "is-windows@npm:^0.2.0": version: 0.2.0 resolution: "is-windows@npm:0.2.0" @@ -10834,7 +10921,7 @@ __metadata: languageName: node linkType: hard -"json5@npm:^2.2.3": +"json5@npm:^2.2.2, json5@npm:^2.2.3": version: 2.2.3 resolution: "json5@npm:2.2.3" bin: @@ -10928,6 +11015,41 @@ __metadata: languageName: node linkType: hard +"less@npm:^4.2.0": + version: 4.2.0 + resolution: "less@npm:4.2.0" + dependencies: + copy-anything: "npm:^2.0.1" + errno: "npm:^0.1.1" + graceful-fs: "npm:^4.1.2" + image-size: "npm:~0.5.0" + make-dir: "npm:^2.1.0" + mime: "npm:^1.4.1" + needle: "npm:^3.1.0" + parse-node-version: "npm:^1.0.1" + source-map: "npm:~0.6.0" + tslib: "npm:^2.3.0" + dependenciesMeta: + errno: + optional: true + graceful-fs: + optional: true + image-size: + optional: true + make-dir: + optional: true + mime: + optional: true + needle: + optional: true + source-map: + optional: true + bin: + lessc: bin/lessc + checksum: 10/98200dce570cdc396e03cafc95fb7bbbecdbe3ae28e456a6dcf7a1ac75c3b1979aa56749ac7581ace1814f8a03c9d3456b272280cc098a6e1e24295c4b7caddb + languageName: node + linkType: hard + "leven@npm:^3.1.0": version: 3.1.0 resolution: "leven@npm:3.1.0" @@ -10945,6 +11067,13 @@ __metadata: languageName: node linkType: hard +"lilconfig@npm:^2.0.5": + version: 2.1.0 + resolution: "lilconfig@npm:2.1.0" + checksum: 10/b1314a2e55319013d5e7d7d08be39015829d2764a1eaee130129545d40388499d81b1c31b0f9b3417d4db12775a88008b72ec33dd06e0184cf7503b32ca7cc0b + languageName: node + linkType: hard + "lines-and-columns@npm:^1.1.6": version: 1.2.4 resolution: "lines-and-columns@npm:1.2.4" @@ -11018,6 +11147,13 @@ __metadata: languageName: node linkType: hard +"lodash.camelcase@npm:^4.3.0": + version: 4.3.0 + resolution: "lodash.camelcase@npm:4.3.0" + checksum: 10/c301cc379310441dc73cd6cebeb91fb254bea74e6ad3027f9346fc43b4174385153df420ffa521654e502fd34c40ef69ca4e7d40ee7129a99e06f306032bfc65 + languageName: node + linkType: hard + "lodash.debounce@npm:^4.0.8": version: 4.0.8 resolution: "lodash.debounce@npm:4.0.8" @@ -11315,7 +11451,7 @@ __metadata: languageName: node linkType: hard -"mime@npm:1.6.0": +"mime@npm:1.6.0, mime@npm:^1.4.1": version: 1.6.0 resolution: "mime@npm:1.6.0" bin: @@ -11552,6 +11688,18 @@ __metadata: languageName: node linkType: hard +"needle@npm:^3.1.0": + version: 3.3.1 + resolution: "needle@npm:3.3.1" + dependencies: + iconv-lite: "npm:^0.6.3" + sax: "npm:^1.2.4" + bin: + needle: bin/needle + checksum: 10/31925ec72b93ffd1f5614a4f381878e7c31f1838cd36055aa4148c49a3a9d16429987fc64b509538f61fccbb49aac9ec2e91b1ed028aafb16f943f1993097d96 + languageName: node + linkType: hard + "negotiator@npm:0.6.3, negotiator@npm:^0.6.3": version: 0.6.3 resolution: "negotiator@npm:0.6.3" @@ -12064,6 +12212,13 @@ __metadata: languageName: node linkType: hard +"parse-node-version@npm:^1.0.1": + version: 1.0.1 + resolution: "parse-node-version@npm:1.0.1" + checksum: 10/ac9b40c6473035ec2dd0afe793b226743055f8119b50853be2022c817053c3377d02b4bb42e0735d9dcb6c32d16478086934b0a8de570a5f5eebacbfc1514ccd + languageName: node + linkType: hard + "parse-passwd@npm:^1.0.0": version: 1.0.0 resolution: "parse-passwd@npm:1.0.0" @@ -12280,7 +12435,75 @@ __metadata: languageName: node linkType: hard -"postcss@npm:^8.4.38": +"postcss-load-config@npm:^3.1.4": + version: 3.1.4 + resolution: "postcss-load-config@npm:3.1.4" + dependencies: + lilconfig: "npm:^2.0.5" + yaml: "npm:^1.10.2" + peerDependencies: + postcss: ">=8.0.9" + ts-node: ">=9.0.0" + peerDependenciesMeta: + postcss: + optional: true + ts-node: + optional: true + checksum: 10/75fa409d77b96e6f53e99f680c550f25ca8922c1150d3d368ded1f6bd8e0d4d67a615fe1f1c5d409aefb6e66fb4b5e48e86856d581329913de84578def078b19 + languageName: node + linkType: hard + +"postcss-modules-extract-imports@npm:^3.0.0": + version: 3.1.0 + resolution: "postcss-modules-extract-imports@npm:3.1.0" + peerDependencies: + postcss: ^8.1.0 + checksum: 10/00bfd3aff045fc13ded8e3bbfd8dfc73eff9a9708db1b2a132266aef6544c8d2aee7a5d7e021885f6f9bbd5565a9a9ab52990316e21ad9468a2534f87df8e849 + languageName: node + linkType: hard + +"postcss-modules-local-by-default@npm:^4.0.4": + version: 4.0.5 + resolution: "postcss-modules-local-by-default@npm:4.0.5" + dependencies: + icss-utils: "npm:^5.0.0" + postcss-selector-parser: "npm:^6.0.2" + postcss-value-parser: "npm:^4.1.0" + peerDependencies: + postcss: ^8.1.0 + checksum: 10/b08b01aa7f3d1a80bb1a5508ba3a208578fdd2fb6e54e5613fac244a4e014aa7ca639a614859fec93b399e5a6f86938f7690ca60f7e57c4e35b75621d3c07734 + languageName: node + linkType: hard + +"postcss-modules-scope@npm:^3.1.1": + version: 3.2.0 + resolution: "postcss-modules-scope@npm:3.2.0" + dependencies: + postcss-selector-parser: "npm:^6.0.4" + peerDependencies: + postcss: ^8.1.0 + checksum: 10/17c293ad13355ba456498aa5815ddb7a4a736f7b781d89b294e1602a53b8d0e336131175f82460e290a0d672642f9039540042edc361d9000b682c44e766925b + languageName: node + linkType: hard + +"postcss-selector-parser@npm:^6.0.2, postcss-selector-parser@npm:^6.0.4": + version: 6.1.0 + resolution: "postcss-selector-parser@npm:6.1.0" + dependencies: + cssesc: "npm:^3.0.0" + util-deprecate: "npm:^1.0.2" + checksum: 10/2f9e5045b8bbe674fed3b79dbcd3daf21f5188cd7baf179beac513710ec3d75a8fc8184a262c3aec1c628ad3fd8bdb29c5d8530f1c9c5a61a18e1980bb000945 + languageName: node + linkType: hard + +"postcss-value-parser@npm:^4.1.0": + version: 4.2.0 + resolution: "postcss-value-parser@npm:4.2.0" + checksum: 10/e4e4486f33b3163a606a6ed94f9c196ab49a37a7a7163abfcd469e5f113210120d70b8dd5e33d64636f41ad52316a3725655421eb9a1094f1bcab1db2f555c62 + languageName: node + linkType: hard + +"postcss@npm:^8.0.0, postcss@npm:^8.4.35, postcss@npm:^8.4.38": version: 8.4.38 resolution: "postcss@npm:8.4.38" dependencies: @@ -12428,6 +12651,13 @@ __metadata: languageName: node linkType: hard +"prr@npm:~1.0.1": + version: 1.0.1 + resolution: "prr@npm:1.0.1" + checksum: 10/3bca2db0479fd38f8c4c9439139b0c42dcaadcc2fbb7bb8e0e6afaa1383457f1d19aea9e5f961d5b080f1cfc05bfa1fe9e45c97a1d3fd6d421950a73d3108381 + languageName: node + linkType: hard + "psl@npm:^1.1.33": version: 1.9.0 resolution: "psl@npm:1.9.0" @@ -13515,6 +13745,13 @@ __metadata: languageName: node linkType: hard +"reserved-words@npm:^0.1.2": + version: 0.1.2 + resolution: "reserved-words@npm:0.1.2" + checksum: 10/72e80f71dcde1e2d697e102473ad6d597e1659118836092c63cc4db68a64857f07f509176d239c8675b24f7f03574336bf202a780cc1adb39574e2884d1fd1fa + languageName: node + linkType: hard + "resize-observer-polyfill@npm:^1.5.1": version: 1.5.1 resolution: "resize-observer-polyfill@npm:1.5.1" @@ -13849,6 +14086,33 @@ __metadata: languageName: node linkType: hard +"sass@npm:^1.70.0": + version: 1.77.4 + resolution: "sass@npm:1.77.4" + dependencies: + chokidar: "npm:>=3.0.0 <4.0.0" + immutable: "npm:^4.0.0" + source-map-js: "npm:>=0.6.2 <2.0.0" + bin: + sass: sass.js + checksum: 10/04e31ce4961a7b90238c274a268945cd67177d992273073e6fa5df09fe7a03ff378f1608fe646ec512c8691038ac9487e06ef5abb2185f56eb36204952538eea + languageName: node + linkType: hard + +"sax@npm:^1.2.4": + version: 1.4.1 + resolution: "sax@npm:1.4.1" + checksum: 10/b1c784b545019187b53a0c28edb4f6314951c971e2963a69739c6ce222bfbc767e54d320e689352daba79b7d5e06d22b5d7113b99336219d6e93718e2f99d335 + languageName: node + linkType: hard + +"sax@npm:~1.3.0": + version: 1.3.0 + resolution: "sax@npm:1.3.0" + checksum: 10/bb571b31d30ecb0353c2ff5f87b117a03e5fb9eb4c1519141854c1a8fbee0a77ddbe8045f413259e711833aa03da210887df8527d19cdc55f299822dbf4b34de + languageName: node + linkType: hard + "saxes@npm:^6.0.0": version: 6.0.0 resolution: "saxes@npm:6.0.0" @@ -14097,7 +14361,7 @@ __metadata: languageName: node linkType: hard -"source-map-js@npm:^1.2.0": +"source-map-js@npm:>=0.6.2 <2.0.0, source-map-js@npm:^1.0.2, source-map-js@npm:^1.2.0": version: 1.2.0 resolution: "source-map-js@npm:1.2.0" checksum: 10/74f331cfd2d121c50790c8dd6d3c9de6be21926de80583b23b37029b0f37aefc3e019fa91f9a10a5e120c08135297e1ecf312d561459c45908cb1e0e365f49e5 @@ -14124,14 +14388,14 @@ __metadata: languageName: node linkType: hard -"source-map@npm:^0.6.0, source-map@npm:^0.6.1, source-map@npm:~0.6.1": +"source-map@npm:^0.6.0, source-map@npm:^0.6.1, source-map@npm:~0.6.0, source-map@npm:~0.6.1": version: 0.6.1 resolution: "source-map@npm:0.6.1" checksum: 10/59ef7462f1c29d502b3057e822cdbdae0b0e565302c4dd1a95e11e793d8d9d62006cdc10e0fd99163ca33ff2071360cf50ee13f90440806e7ed57d81cba2f7ff languageName: node linkType: hard -"source-map@npm:^0.7.4": +"source-map@npm:^0.7.3, source-map@npm:^0.7.4": version: 0.7.4 resolution: "source-map@npm:0.7.4" checksum: 10/a0f7c9b797eda93139842fd28648e868a9a03ea0ad0d9fa6602a0c1f17b7fb6a7dcca00c144476cccaeaae5042e99a285723b1a201e844ad67221bf5d428f1dc @@ -14485,6 +14749,21 @@ __metadata: languageName: node linkType: hard +"stylus@npm:^0.62.0": + version: 0.62.0 + resolution: "stylus@npm:0.62.0" + dependencies: + "@adobe/css-tools": "npm:~4.3.1" + debug: "npm:^4.3.2" + glob: "npm:^7.1.6" + sax: "npm:~1.3.0" + source-map: "npm:^0.7.3" + bin: + stylus: bin/stylus + checksum: 10/a2d975e619c622a6646fec43489f4a7d0fe824e5dab6343295bca381dd9f1ae9f9d32710c0ca28219eebeb1609448112ba99a246c215824369aec3dc4652b6cf + languageName: node + linkType: hard + "supports-color@npm:^5.3.0": version: 5.5.0 resolution: "supports-color@npm:5.5.0" @@ -14829,6 +15108,17 @@ __metadata: languageName: node linkType: hard +"tsconfig-paths@npm:^4.2.0": + version: 4.2.0 + resolution: "tsconfig-paths@npm:4.2.0" + dependencies: + json5: "npm:^2.2.2" + minimist: "npm:^1.2.6" + strip-bom: "npm:^3.0.0" + checksum: 10/5e55cc2fb6b800eb72011522e10edefccb45b1f9af055681a51354c9b597d1390c6fa9cc356b8c7529f195ac8a90a78190d563159f3a1eed10e01bbd4d01a8ab + languageName: node + linkType: hard + "tslib@npm:^1.13.0, tslib@npm:^1.8.1": version: 1.14.1 resolution: "tslib@npm:1.14.1" @@ -14843,6 +15133,13 @@ __metadata: languageName: node linkType: hard +"tslib@npm:^2.3.0": + version: 2.6.3 + resolution: "tslib@npm:2.6.3" + checksum: 10/52109bb681f8133a2e58142f11a50e05476de4f075ca906d13b596ae5f7f12d30c482feb0bff167ae01cfc84c5803e575a307d47938999246f5a49d174fc558c + languageName: node + linkType: hard + "tsutils@npm:^3.21.0": version: 3.21.0 resolution: "tsutils@npm:3.21.0" @@ -15011,6 +15308,32 @@ __metadata: languageName: node linkType: hard +"typescript-plugin-css-modules@npm:^5.1.0": + version: 5.1.0 + resolution: "typescript-plugin-css-modules@npm:5.1.0" + dependencies: + "@types/postcss-modules-local-by-default": "npm:^4.0.2" + "@types/postcss-modules-scope": "npm:^3.0.4" + dotenv: "npm:^16.4.2" + icss-utils: "npm:^5.1.0" + less: "npm:^4.2.0" + lodash.camelcase: "npm:^4.3.0" + postcss: "npm:^8.4.35" + postcss-load-config: "npm:^3.1.4" + postcss-modules-extract-imports: "npm:^3.0.0" + postcss-modules-local-by-default: "npm:^4.0.4" + postcss-modules-scope: "npm:^3.1.1" + reserved-words: "npm:^0.1.2" + sass: "npm:^1.70.0" + source-map-js: "npm:^1.0.2" + stylus: "npm:^0.62.0" + tsconfig-paths: "npm:^4.2.0" + peerDependencies: + typescript: ">=4.0.0" + checksum: 10/a87487f88262ea9b21108a00a68ccdc1f86f59c73c5faed432e834593679d973a4c7a72479b3a7556913ede1a1527e2f47cada282236194de0a44ee1581c4e81 + languageName: node + linkType: hard + "typescript@npm:5.4.2": version: 5.4.2 resolution: "typescript@npm:5.4.2" @@ -15884,6 +16207,13 @@ __metadata: languageName: node linkType: hard +"yaml@npm:^1.10.2": + version: 1.10.2 + resolution: "yaml@npm:1.10.2" + checksum: 10/e088b37b4d4885b70b50c9fa1b7e54bd2e27f5c87205f9deaffd1fb293ab263d9c964feadb9817a7b129a5bf30a06582cb08750f810568ecc14f3cdbabb79cb3 + languageName: node + linkType: hard + "yargs-parser@npm:^18.1.2": version: 18.1.3 resolution: "yargs-parser@npm:18.1.3"