-
Notifications
You must be signed in to change notification settings - Fork 99
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
merge: pull request #15092 from ovh/develop
Merge develop to master.
- Loading branch information
Showing
53 changed files
with
1,136 additions
and
246 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,6 +1,64 @@ | ||
| export function debug(...args: any[]) { | ||
| if (!window.test && //temporarily fix jest bug | ||
| window.localStorage?.getItem('MANAGER_TRACKING_DEBUG')) { | ||
| if ( | ||
| !window.test && // temporarily fix jest bug | ||
| window.localStorage?.getItem('MANAGER_TRACKING_DEBUG') | ||
| ) { | ||
| console.debug(...args); | ||
| } | ||
| } | ||
|
|
||
| /** | ||
| * Replacement of `isEmpty` function from `lodash`. | ||
| * Checks if value is an empty object, collection, map, or set. | ||
| * @param {any} obj - the object, collection map or set to check. | ||
| * @return {boolean} wether or not it is empty. | ||
| */ | ||
| export const isEmpty = (obj: any) => { | ||
| if (obj?.length || obj?.size) return false; | ||
| if (typeof obj !== 'object') return true; | ||
| return !Object.values(obj).length; | ||
| }; | ||
|
|
||
| /** | ||
| * Replacement of `capitalize` function from `lodash`. | ||
| * Capitalize the first character of a string, and lowercase the rest. | ||
| * @param {string} str - string to capitalize. | ||
| * @return {string} capitalized string | ||
| */ | ||
| export const capitalize = (str: string): string => { | ||
| return `${str.charAt(0).toUpperCase()}${str.slice(1).toLowerCase()}`; | ||
| }; | ||
|
|
||
| /** | ||
| * Replacement of `mapValues` function from `lodash`. | ||
| * Maps over values of an object, applies a predicate and return a new object | ||
| * from the result. | ||
| * @param {object} obj - the object to map values over. | ||
| * @param {function} fn - the predicate to run on each value of the object. | ||
| * @return {object} new object from the iterations | ||
| */ | ||
| export const mapValues = ( | ||
| obj: Record<string, unknown>, | ||
| fn: (val: unknown, key: string, obj: Record<string, unknown>) => unknown, | ||
| ): Record<string, unknown> => | ||
| Object.fromEntries( | ||
| Object.entries(obj).map(([key, val]) => [key, fn(val, key, obj)]), | ||
| ); | ||
|
|
||
| export const getRandomString = (len: number): string => { | ||
| const alphabet = | ||
| 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789'; | ||
| return new Array(len) | ||
| .map(() => alphabet.charAt(Math.floor(Math.random() * alphabet.length))) | ||
| .join(''); | ||
| }; | ||
|
|
||
| /** | ||
| * Returns an unique ID (used by orders and carts) | ||
| * To ensure that the ID is unique, we generate it from current milliseconds | ||
| * and concat a random string to avoid any collisions. | ||
| */ | ||
| export const getUniqueId = (): string => { | ||
| // unique key : current milliseconds in base 36 concatenated with 8 random chars | ||
| return new Date().valueOf().toString(36) + getRandomString(8); | ||
| }; |
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -7,7 +7,19 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline | |
|
|
||
| ### Bug Fixes | ||
|
|
||
| - **manager-react-components:** revert manager component version ([558473b](https://github.com/ovh/manager/commit/558473bef4dc0001accd06a12cb5205d9e19f99b)) | ||
| - **mrc:** fix <OnboardingLayout /> ([69188ea](https://github.com/ovh/manager/commit/69188ead04dc05c24bdf672bf813f2c5ae807405)) | ||
| - **mrc:** fix <ActionMenu /> ([170fa23](https://github.com/ovh/manager/commit/170fa237a3df7ca42af91f3dab680fd6b2b2162b)) | ||
| - **mrc:** fix <DeleteModal /> ([4a2e449](https://github.com/ovh/manager/commit/4a2e44930c5440d9040de5695e8321fdbf7839b3)) | ||
| - **mrc:** fix <ErrorBanner /> ([32174d4](https://github.com/ovh/manager/commit/32174d470579922e37f6a6a3a3db7c3ea26ae752)) | ||
| - **mrc:** fix <GuideButton /> ([c4a12f4](https://github.com/ovh/manager/commit/c4a12f40ba1b2fd93c0af87e07e67c7e20aa9da7)) | ||
| - **mrc:** fix <Links /> ([06e04a6](https://github.com/ovh/manager/commit/06e04a6e4c464d688ce13bd455245fc99f43d058)) | ||
| - **mrc:** fix <OnboardingLayout /> ([7f4d9c8](https://github.com/ovh/manager/commit/7f4d9c8bebf25b1d572f8651b30b4b4fc551b0a8)) | ||
| - **mrc:** fix <TileBlock /> ([c9da7a5](https://github.com/ovh/manager/commit/c9da7a5130b62c016308224d5556e2113edaf4de)) | ||
| - **mrx:** fix <UpdateNameModal /> ([88408d9](https://github.com/ovh/manager/commit/88408d9a106e3b531472bbd0bb5031b3cd9babc7)) | ||
|
|
||
| ### Features | ||
|
|
||
| - **manager-react-components:** add breadcrumb component and update error component ([#14892](https://github.com/ovh/manager/issues/14892)) ([afa601d](https://github.com/ovh/manager/commit/afa601dc0c998c5ce7061b73450233c46432bbad)) | ||
|
|
||
| # [2.6.2](https://github.com/ovh/manager/compare/@ovh-ux/[email protected]...@ovh-ux/[email protected]) (2025-01-16) | ||
|
|
||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
26 changes: 26 additions & 0 deletions
26
...nager-react-components/src/components/content/ManagerTile/manager-tile-item.component.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| import { ODS_TEXT_PRESET } from '@ovhcloud/ods-components'; | ||
| import { OdsText } from '@ovhcloud/ods-components/react'; | ||
| import React from 'react'; | ||
|
|
||
| export type TileBlockProps = React.PropsWithChildren<{ | ||
| label?: string; | ||
| }>; | ||
|
|
||
| export const ManagerTileItem = ({ children }: React.PropsWithChildren) => { | ||
| return <dl className="flex flex-col gap-1 m-0">{children}</dl>; | ||
| }; | ||
|
|
||
| const ManagerTileItemLabel = ({ children }: React.PropsWithChildren) => { | ||
| return ( | ||
| <dt> | ||
| <OdsText preset={ODS_TEXT_PRESET.heading6}>{children}</OdsText> | ||
| </dt> | ||
| ); | ||
| }; | ||
|
|
||
| const ManagerTileItemDescription = ({ children }: React.PropsWithChildren) => { | ||
| return <dd className="m-0">{children}</dd>; | ||
| }; | ||
|
|
||
| ManagerTileItem.Label = ManagerTileItemLabel; | ||
| ManagerTileItem.Description = ManagerTileItemDescription; |
33 changes: 33 additions & 0 deletions
33
...es/manager-react-components/src/components/content/ManagerTile/manager-tile.component.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| import React from 'react'; | ||
| import { OdsDivider, OdsCard, OdsText } from '@ovhcloud/ods-components/react'; | ||
| import { ODS_CARD_COLOR, ODS_TEXT_PRESET } from '@ovhcloud/ods-components'; | ||
| import { ManagerTileItem } from './manager-tile-item.component'; | ||
|
|
||
| export type ManagerTileProps = React.ComponentProps<typeof OdsCard>; | ||
|
|
||
| export const ManagerTile = ({ | ||
| className, | ||
| children, | ||
| ...props | ||
| }: ManagerTileProps) => { | ||
| return ( | ||
| <OdsCard | ||
| className={`w-full flex-col p-[1rem] ${className}`} | ||
| color={ODS_CARD_COLOR.neutral} | ||
| {...props} | ||
| > | ||
| <div className="flex flex-col w-full">{children}</div> | ||
| </OdsCard> | ||
| ); | ||
| }; | ||
|
|
||
| type ManagerTileTitleProps = React.PropsWithChildren; | ||
| const ManagerTileTitle = ({ children }: ManagerTileTitleProps) => { | ||
| return <OdsText preset={ODS_TEXT_PRESET.heading4}>{children}</OdsText>; | ||
| }; | ||
|
|
||
| const ManagerTileDivider = () => <OdsDivider spacing="24" />; | ||
|
|
||
| ManagerTile.Title = ManagerTileTitle; | ||
| ManagerTile.Item = ManagerTileItem; | ||
| ManagerTile.Divider = ManagerTileDivider; |
118 changes: 118 additions & 0 deletions
118
...ages/manager-react-components/src/components/content/ManagerTile/manager-tile.stories.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,118 @@ | ||
| import React, { useId } from 'react'; | ||
| import { Meta } from '@storybook/react'; | ||
| import { OdsSkeleton, OdsText } from '@ovhcloud/ods-components/react'; | ||
| import { ManagerTile } from './manager-tile.component'; | ||
| import ActionMenu from '../../navigation/menus/action/action.component'; | ||
| import { Clipboard } from '../../clipboard/clipboard.component'; | ||
|
|
||
| const actionItems = [ | ||
| { | ||
| id: 1, | ||
| href: 'https://ovhcloud.com', | ||
| label: 'Action 1', | ||
| }, | ||
| { | ||
| id: 2, | ||
| onClick: () => window.open('https://ovhcloud.com', '_blank', 'noopener'), | ||
| label: 'Action 2', | ||
| }, | ||
| ]; | ||
|
|
||
| export const CompleteExample = () => { | ||
| const id = useId(); | ||
| return ( | ||
| <ManagerTile> | ||
| <ManagerTile.Title>Complete example</ManagerTile.Title> | ||
| <ManagerTile.Divider /> | ||
| <ManagerTile.Item> | ||
| <ManagerTile.Item.Label>Component Example</ManagerTile.Item.Label> | ||
| <ManagerTile.Item.Description> | ||
| <OdsText preset="span">Test Value</OdsText> | ||
| </ManagerTile.Item.Description> | ||
| </ManagerTile.Item> | ||
| <ManagerTile.Divider /> | ||
| <ManagerTile.Item> | ||
| <ManagerTile.Item.Label>Long Text</ManagerTile.Item.Label> | ||
| <ManagerTile.Item.Description> | ||
| <OdsText preset="paragraph"> | ||
| Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do | ||
| eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim | ||
| ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut | ||
| aliquip ex ea commodo consequat. | ||
| </OdsText> | ||
| </ManagerTile.Item.Description> | ||
| </ManagerTile.Item> | ||
| <ManagerTile.Divider /> | ||
| <ManagerTile.Item> | ||
| <ManagerTile.Item.Label>Loading</ManagerTile.Item.Label> | ||
| <ManagerTile.Item.Description> | ||
| <OdsSkeleton /> | ||
| </ManagerTile.Item.Description> | ||
| </ManagerTile.Item> | ||
| <ManagerTile.Divider /> | ||
| <ManagerTile.Item> | ||
| <ManagerTile.Item.Label>Clipboard</ManagerTile.Item.Label> | ||
| <ManagerTile.Item.Description> | ||
| <Clipboard className="w-full" value="example value" /> | ||
| </ManagerTile.Item.Description> | ||
| </ManagerTile.Item> | ||
| <ManagerTile.Divider /> | ||
| <ManagerTile.Item> | ||
| <ManagerTile.Item.Label>Menu Example</ManagerTile.Item.Label> | ||
| <ManagerTile.Item.Description> | ||
| <div className="flex items-center justify-between"> | ||
| <OdsText preset="span">Test Value</OdsText> | ||
| <ActionMenu | ||
| isCompact | ||
| items={actionItems} | ||
| id={'action-menu-story'} | ||
| /> | ||
| </div> | ||
| </ManagerTile.Item.Description> | ||
| </ManagerTile.Item> | ||
| </ManagerTile> | ||
| ); | ||
| }; | ||
|
|
||
| export const SimpleExampleWithTitle = () => ( | ||
| <ManagerTile> | ||
| <ManagerTile.Title>Sample example with title</ManagerTile.Title> | ||
| <ManagerTile.Divider /> | ||
| <ManagerTile.Item> | ||
| <ManagerTile.Item.Label>Component Example</ManagerTile.Item.Label> | ||
| <ManagerTile.Item.Description>Test</ManagerTile.Item.Description> | ||
| </ManagerTile.Item> | ||
| <ManagerTile.Divider /> | ||
| <ManagerTile.Item> | ||
| <ManagerTile.Item.Label>Loading</ManagerTile.Item.Label> | ||
| <ManagerTile.Item.Description> | ||
| <OdsSkeleton /> | ||
| </ManagerTile.Item.Description> | ||
| </ManagerTile.Item> | ||
| </ManagerTile> | ||
| ); | ||
|
|
||
| export const NoTitle = () => ( | ||
| <ManagerTile> | ||
| <ManagerTile.Item> | ||
| <ManagerTile.Item.Label>Component Example</ManagerTile.Item.Label> | ||
| <ManagerTile.Item.Description>Test</ManagerTile.Item.Description> | ||
| </ManagerTile.Item> | ||
| <ManagerTile.Divider /> | ||
| <ManagerTile.Item> | ||
| <ManagerTile.Item.Label>Loading</ManagerTile.Item.Label> | ||
| <ManagerTile.Item.Description> | ||
| <OdsSkeleton /> | ||
| </ManagerTile.Item.Description> | ||
| </ManagerTile.Item> | ||
| </ManagerTile> | ||
| ); | ||
|
|
||
| const meta: Meta = { | ||
| title: 'Content/Manager Tile', | ||
| component: ManagerTile, | ||
| argTypes: {}, | ||
| args: {}, | ||
| }; | ||
|
|
||
| export default meta; |
Oops, something went wrong.