@scality/core-ui 0.193.0 → 0.195.0

package/src/lib/components/text/Text.component.tsx

@@ -16,6 +16,13 @@ type Props = {
   children: React.ReactNode | string;
   status?: Status;
   id?: string;
+} & TextProps;
+type TextProps = {
+  color?: keyof CoreUITheme;
+  variant?: TextVariant;
+  isEmphazed?: boolean;
+  isGentleEmphazed?: boolean;
+  compact?: boolean;
 };
 const BasicTextStyle = styled.span`
   color: ${(props) => props.theme.textPrimary};
@@ -33,7 +40,7 @@ const LargerTextStyle = styled(BasicTextStyle)`
 const EmphaseTextStyle = styled(BasicTextStyle)`
   font-weight: 700;
 `;
-const StatusTextStyle = styled(BasicTextStyle)<{ statusColor: string }>`
+const StatusTextStyle = styled(BasicTextStyle) <{ statusColor: string }>`
   color: ${(props) => props.theme[`${props.statusColor}`]};
 `;
 const LargetStyle = styled(BasicTextStyle)`
@@ -70,7 +77,7 @@ const getStatusColor = (status?: Status) => {
   return statusColor;
 };
 
-export const SmallerEmphaseTextStyle = styled(SmallerTextStyle)<{
+export const SmallerEmphaseTextStyle = styled(SmallerTextStyle) <{
   statusColor: string;
 }>`
   font-weight: 700;
@@ -122,7 +129,7 @@ export function SmallerEmphaseText({ children, status, ...rest }: Props) {
 export function ChartTitleText({ children, ...rest }: Props) {
   return <ChartTitleTextStyle {...rest}>{children}</ChartTitleTextStyle>;
 }
-export const GentleEmphaseSecondaryText = styled(SecondaryText)<{
+export const GentleEmphaseSecondaryText = styled(SecondaryText) <{
   alignRight?: boolean;
 }>`
   font-style: italic;
@@ -135,12 +142,7 @@ export const GentleEmphaseSecondaryText = styled(SecondaryText)<{
       : ''}
 `;
 
-export const Text = styled.span<{
-  variant?: TextVariant;
-  color?: keyof CoreUITheme;
-  isEmphazed?: boolean;
-  isGentleEmphazed?: boolean;
-}>`
+export const Text = styled.span<TextProps>`
   ${(props) => props.color && `color: ${props.theme[props.color]};`}
   ${(props) =>
     props.variant === 'Larger'
@@ -187,8 +189,14 @@ export const Text = styled.span<{
     
   ${(props) =>
     props.variant === 'ChartTitle' && `letter-spacing: ${spacing.r2};`}
-`;
 
+  ${(props) => props.compact && `line-height: 1.2;`}
+`;
+export const HelperText = ({ children, color, ...rest }: Props) => {
+  return (
+    <Text variant="Smaller" isEmphazed compact color={color} {...rest}>{children}</Text>
+  );
+}
 export const Link = styled.a`
   font-size: 1rem;
   line-height: ${spacing.r24};

package/src/lib/components/tooltip/Tooltip.component.tsx

@@ -58,7 +58,7 @@ const TooltipOverLayContainer = styled.div<{
     (props && props.style && props.style.fontSize) || fontSize.small};
   vertical-align: middle;
   padding: ${spacing.r4} ${spacing.r8};
-  max-width: 40rem;
+  max-width: 20rem;
 `;
 
 const TooltipText = styled.div`

package/src/lib/index.ts

@@ -11,8 +11,8 @@ export {
   STATUS_INFO,
   STATUS_UNKNOWN,
   STATUS_NONE,
-  Status,
 } from './components/constants';
+export type { Status } from './components/constants';
 export { Layout } from './components/layout/Layout.component';
 export { Loader } from './components/loader/Loader.component';
 export { Modal } from './components/modal/Modal.component';
@@ -78,4 +78,5 @@ export { InfoMessage } from './components/infomessage/InfoMessage.component';
 export { InputList } from './components/inputlist/InputList.component';
 export { InlineInput } from './components/inlineinput/InlineInput';
 export { UnsuccessfulResult } from './components/UnsuccessfulResult.component';
-export { CoreUITheme } from './style/theme';
+export type { CoreUITheme } from './style/theme';
+export { formatISONumber } from './utils';

package/src/lib/next.ts

@@ -21,8 +21,6 @@ export { Accordion } from './components/accordion/Accordion.component';
 // Export all chart components from the consolidated charts folder
 export {
   Barchart,
-  BarchartSortFn,
-  BarchartTooltipFn,
   BarchartTooltip,
   LineTimeSerieChart,
   GlobalHealthBar,
@@ -40,6 +38,8 @@ export {
 export type {
   BarchartProps,
   BarchartBars,
+  BarchartSortFn,
+  BarchartTooltipFn,
   LineChartProps,
   Serie,
   GlobalHealthProps,
@@ -49,4 +49,4 @@ export type {
   CategoryType,
 } from './components/charts';
 
-export { CoreUITheme } from './style/theme';
+export type { CoreUITheme } from './style/theme';

package/src/lib/utils.ts

@@ -25,6 +25,10 @@ export const getThemeVariantSelector = () => (props) => {
   return theme[key];
 };
 
+/** Returns the theme color key for a given variant (e.g. for use with Icon color prop). */
+export const getVariantThemeKey = (variant: string): string =>
+  variantMapping[variant] ?? variant;
+
 export const hex2RGB = (str: string): [number, number, number] => {
   const [, short, long] = String(str).match(RGB_HEX) || [];
 
@@ -55,3 +59,41 @@ export const convertRemToPixels = (rem: number): number => {
 
   return 0;
 };
+
+type FormatISONumberOptions = {
+  decimals?: number;
+  compact?: boolean;
+  fixedDecimals?: boolean;
+};
+
+/**
+ * Formats a number to ISO 80000-1 format:
+ * - Space as thousands separator
+ * - Dot as decimal separator
+ * - Optional compact notation (10K, 1M, etc.)
+ * - Very small values (< 0.001): scientific notation
+ */
+export const formatISONumber = (
+  value: number,
+  options: FormatISONumberOptions = {},
+): string => {
+  const { decimals = 2, compact = false, fixedDecimals = false } = options;
+
+  if (value === 0) return '0';
+
+  const absValue = Math.abs(value);
+
+  if (absValue < 0.001) {
+    return value.toExponential();
+  }
+
+  // ISO format: space as thousands separator, dot as decimal separator
+  // With optional compact notation (10K, 1M, etc.)
+  return new Intl.NumberFormat('fr-FR', {
+    minimumFractionDigits: fixedDecimals ? decimals : undefined,
+    maximumFractionDigits: decimals,
+    notation: compact ? 'compact' : 'standard',
+  })
+    .format(value)
+    .replace(',', '.');
+};

package/stories/GlobalHealthBar/globalhealthbar.stories.tsx

@@ -9,7 +9,7 @@ import {
 type Story = StoryObj<GlobalHealthProps>;
 
 const meta: Meta<GlobalHealthProps> = {
-  title: 'Components/DataDisplay/Charts/GlobalHealthBar',
+  title: 'Components/Data Display/Charts/GlobalHealthBar',
   component: GlobalHealthBar,
 };
 export default meta;

package/stories/banner.stories.tsx

@@ -9,22 +9,24 @@ export default {
   component: Banner,
   decorators: [(story) => <Wrapper>{story()}</Wrapper>],
   args: {
-    icon: 'Exclamation-triangle',
+    withDefaultIcon: true,
   },
   argTypes: {
+    withDefaultIcon: { control: 'boolean' },
     icon: iconArgType,
   },
 };
 
 export const Playground = {
-  render: ({ icon, variant, children, ...args }) => {
+  render: ({ withDefaultIcon, icon, variant, children, ...args }) => {
     return (
       <Banner
-        icon={icon && <Icon name={icon}></Icon>}
+        withDefaultIcon={withDefaultIcon}
+        icon={icon ? <Icon name={icon} /> : undefined}
         variant={variant}
         children={children}
         {...args}
-      ></Banner>
+      />
     );
   },
   args: {
@@ -35,23 +37,38 @@ export const Playground = {
     variant: { control: { disable: false } },
     title: { control: { disable: false } },
     children: { control: { disable: false } },
+    withDefaultIcon: { control: { disable: false } },
     icon: { control: { disable: false } },
   },
 };
 
+/** No icon. */
 export const Default = {
   ...Playground,
   args: {
     children: 'There is an alert',
     variant: 'base',
+    withDefaultIcon: false,
     icon: undefined,
   },
 };
 
+/** Simple default: withDefaultIcon + variant. Info-circle for base, Exclamation-circle otherwise. */
+export const WithIcon = {
+  args: {
+    withDefaultIcon: true,
+    variant: 'base',
+    title: 'Info',
+    children: 'Use withDefaultIcon for the default icon (Info-circle on base, Exclamation-circle on warning/danger/etc.).',
+  },
+};
+
 export const SuccessBanner = {
   ...Playground,
   args: {
-    variant: 'success',
+    variant: 'healthy',
+    withDefaultIcon: false,
+    icon: 'Check-circle',
     title: 'Success',
     children: 'There is a success',
   },
@@ -60,16 +77,31 @@ export const SuccessBanner = {
 export const WarningBanner = {
   ...Playground,
   args: {
+    withDefaultIcon: true,
     variant: 'warning',
     title: 'Warning',
     children: 'There is a warning',
   },
 };
+
 export const ErrorBanner = {
   ...Playground,
   args: {
+    withDefaultIcon: true,
     variant: 'danger',
     title: 'Error',
     children: 'There is an error',
   },
 };
+
+/** Custom icon when default (Exclamation-circle / Info-circle) is not desired. */
+export const WithCustomIcon = {
+  ...Playground,
+  args: {
+    variant: 'base',
+    withDefaultIcon: false,
+    icon: 'Exclamation-circle',
+    title: 'Custom',
+    children: 'Use the icon prop when you need a specific icon other than the withDefaultIcon default.',
+  },
+};

package/stories/inputlist.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
-import { InputList } from '../src/lib/components/inputlist/InputList.component';
+import { InputList, InputListProps } from '../src/lib/components/inputlist/InputList.component';
 import { Wrapper as StoryWrapper } from './common';
 import { FormSection } from '../src/lib/components/form/Form.component';
 import { Controller, useForm } from 'react-hook-form';
@@ -9,15 +9,27 @@ const meta: Meta<typeof InputList> = {
   tags: ['autodocs'],
   title: 'Components/Inputs/InputList',
   component: InputList,
+  args: {
+    value: [''],
+    size: '1/2',
+  },
+  argTypes: {
+    size: {
+      options: ['1/3', '1/2', '2/3', '1'],
+      control: 'select',
+    },
+  },
 };
 export default meta;
 
+type Story = StoryObj<typeof meta>;
 interface InputListForm {
   firstNames: string[];
   lastNames: string[];
 }
 
-const ExampleList = () => {
+
+const ExampleList = ({ size }: { size?: InputListProps<string>['size'] }) => {
   const { control } = useForm<InputListForm>({
     mode: 'all',
     defaultValues: {
@@ -35,10 +47,11 @@ const ExampleList = () => {
         }}
         render={({ field: { onChange, onBlur, value } }) => (
           <InputList
-            placeholder="First name"
+            placeholder="San Francisco"
             onBlur={onBlur}
             onChange={onChange}
             value={value}
+            size={size}
           />
         )}
         name="firstNames"
@@ -46,12 +59,11 @@ const ExampleList = () => {
     </FormSection>
   );
 };
-type Story = StoryObj<typeof InputList>;
 export const SimpleListOfInputs: Story = {
   name: 'List of inputs',
-  render: () => (
+  render: (args) => (
     <StoryWrapper>
-      <ExampleList />
+      <ExampleList {...args} />
     </StoryWrapper>
   ),
 };