@scality/core-ui 0.115.0

package/src/lib/organisms/attachments/AttachmentTypes.ts

@@ -0,0 +1,16 @@
+export type AttachableEntity<ENTITY_TYPE> = {
+  name: string;
+  id: string;
+  type: ENTITY_TYPE;
+  disableDetach?: boolean;
+};
+
+export enum AttachmentAction {
+  ADD,
+  REMOVE,
+}
+
+export type AttachmentOperation<ENTITY_TYPE> = {
+  action: AttachmentAction;
+  entity: AttachableEntity<ENTITY_TYPE>;
+};

package/src/lib/spacing.tsx

@@ -0,0 +1,108 @@
+import { Children, HTMLAttributes, HTMLProps, ReactNode } from 'react';
+import styled from 'styled-components';
+import { Box, BoxComponentProps } from './components/box/Box';
+
+export const spacing = {
+  r1: '0.0625rem',
+  r2: '0.125rem',
+  r4: '0.25rem',
+  r8: '0.5rem',
+  r10: '0.625rem',
+  r12: '0.75rem',
+  r14: '0.875rem',
+  r16: '1rem',
+  r20: '1.25rem',
+  r24: '1.5rem',
+  r28: '1.75rem',
+  r32: '2rem',
+  r36: '2.25rem',
+  r40: '2.5rem',
+  f1: '1px',
+  f2: '2px',
+  f4: '4px',
+  f8: '8px',
+  f10: '10px',
+  f12: '12px',
+  f14: '14px',
+  f16: '16px',
+  f20: '20px',
+  f24: '24px',
+  f28: '28px',
+  f32: '32px',
+  f36: '36px',
+  f40: '40px',
+};
+
+const HSeparator = styled.div`
+  min-height: ${spacing.r40};
+  min-width: ${spacing.r2};
+  background: ${(props) => props.theme.backgroundLevel1};
+`;
+
+const VSeparator = styled.div`
+  height: 1px;
+  width: ${spacing.r24};
+  background: ${(props) => props.theme.border};
+`;
+
+const Separator = ({ type }: { type?: 'vertical' | 'horizontal' }) => {
+  return (
+    <>
+      {type === 'horizontal' && <HSeparator>&nbsp;</HSeparator>}
+      {type === 'vertical' && <VSeparator>&nbsp;</VSeparator>}
+    </>
+  );
+};
+
+export const Stack = ({
+  gap,
+  direction,
+  withSeparators,
+  children,
+  ...rest
+}: {
+  gap?: keyof typeof spacing;
+  direction?: 'vertical' | 'horizontal';
+  withSeparators?: boolean;
+  children: ReactNode[];
+} & HTMLAttributes<HTMLDivElement>) => {
+  gap = gap || 'r8';
+  direction = direction || 'horizontal';
+
+  const numberOfChildren = Children.count(children);
+
+  return (
+    <Box
+      display={'flex'}
+      flexDirection={direction === 'horizontal' ? 'row' : 'column'}
+      alignItems={direction === 'horizontal' ? 'center' : 'normal'}
+      gap={spacing[gap]}
+      {...rest}
+    >
+      {Children.map(children, (node, nodeIndex) => {
+        return (
+          <>
+            {node}
+            {withSeparators && nodeIndex + 1 !== numberOfChildren && (
+              <Separator type={direction} />
+            )}
+          </>
+        );
+      })}
+    </Box>
+  );
+};
+
+export const Wrap = ({
+  children,
+  ...rest
+}: { children: ReactNode[] } & Omit<HTMLProps<HTMLDivElement>, 'ref' | 'as'> &
+  BoxComponentProps) => {
+  return (
+    <Box display={'flex'} justifyContent="space-between" {...rest}>
+      {Children.map(children, (node) => {
+        return <>{node}</>;
+      })}
+    </Box>
+  );
+};

package/src/lib/style/theme.ts

@@ -0,0 +1,270 @@
+//== Colors
+export const hotPink = '#E40046';
+export const pink = '#EB4962';
+export const lightPink = '#F5B5BA';
+export const plum = '#8A1B61';
+export const jade = '#006F62';
+export const lightBeige = '#FAF7F5';
+export const warmRed = '#EF3340';
+export const turquoise = '#00B2A9';
+export const yellowOrange = '#F1B434';
+export const mediumOrange = '#FF8F1C';
+export const yellow = '#EFC93D';
+export const green = '#228F67';
+export const white = '#ffffff';
+export const black = '#000000';
+export const blackLight = '#313B44';
+export const blueDarkest = '#0F3554';
+export const blueDarker = '#144A75';
+export const blueDark = '#1F73B7';
+export const blue = '#337FBD';
+export const blueLight = '#5293C7';
+export const blueLighter = '#ADCCE4';
+export const blueLightest = '#CEE2F2';
+export const grayDarkest = '#2F3941';
+export const grayDarker = '#49545C';
+export const grayDark = '#68737D';
+export const gray = '#87929D';
+export const grayLight = '#C2C8CC';
+export const grayLighter = '#D8DCDE';
+export const grayLightest = '#E9EBED';
+
+export type CoreUITheme = {
+  statusHealthy: string;
+  statusHealthyRGB: string;
+  statusWarning: string;
+  statusWarningRGB: string;
+  statusCritical: string;
+  statusCriticalRGB: string;
+  selectedActive: string;
+  highlight: string;
+  border: string;
+  buttonPrimary: string;
+  buttonSecondary: string;
+  buttonDelete: string;
+  infoPrimary: string;
+  infoSecondary: string;
+  backgroundLevel1: string;
+  backgroundLevel2: string;
+  backgroundLevel3: string;
+  backgroundLevel4: string;
+  textPrimary: string;
+  textSecondary: string;
+  textTertiary: string;
+  textReverse: string;
+  textLink: string;
+};
+
+export const coreUIAvailableThemesNames = [
+  'darkRebrand',
+  'artescaLight',
+  'ring9dark',
+] as const;
+export type CoreUIThemeName = (typeof coreUIAvailableThemesNames)[number];
+
+export const coreUIAvailableThemes: Record<CoreUIThemeName, CoreUITheme> = {
+  darkRebrand: {
+    statusHealthy: '#0AADA6',
+    statusHealthyRGB: '10,173,166',
+    statusWarning: '#F8F32B',
+    statusWarningRGB: '248,243,43',
+    statusCritical: '#E84855',
+    statusCriticalRGB: '232,72,85',
+    selectedActive: '#037AFF',
+    highlight: '#1A3C75',
+    border: '#4A4A4A',
+    buttonPrimary: '#2F4185',
+    buttonSecondary: '#595A78',
+    buttonDelete: '#3D0808',
+    infoPrimary: '#8E8EAC',
+    infoSecondary: '#333366',
+    backgroundLevel1: '#121219',
+    backgroundLevel2: '#323245',
+    backgroundLevel3: '#232331',
+    backgroundLevel4: '#1B1B27',
+    textPrimary: '#EAEAEA',
+    textSecondary: '#B5B5B5',
+    textTertiary: '#DFDFDF',
+    textReverse: '#000000',
+    textLink: '#71AEFF',
+  },
+  artescaLight: {
+    statusHealthy: '#009E93',
+    statusHealthyRGB: '43,171,81',
+    statusWarning: '#E77B00',
+    statusWarningRGB: '252,138,50',
+    statusCritical: '#C10004',
+    statusCriticalRGB: '232,72,85,1',
+    selectedActive: '#90D0FF',
+    highlight: '#E3F2FD',
+    border: '#999999',
+    buttonPrimary: '#9DA6EC',
+    buttonSecondary: '#CACFE3',
+    buttonDelete: '#FFCDD2',
+    infoPrimary: '#5C486D',
+    infoSecondary: '#EBE3F1',
+    backgroundLevel1: '#F9F9FB',
+    backgroundLevel2: '#F3F3F5',
+    backgroundLevel3: '#EAEAEC',
+    backgroundLevel4: '#FAFAF8',
+    textPrimary: '#101010',
+    textSecondary: '#515170',
+    textTertiary: '#DFDFDF', // TO CHECK
+    textReverse: '#EAEAEA',
+    textLink: '#1349C5',
+  },
+  ring9dark: {
+    statusHealthy: '#2BAB51',
+    statusHealthyRGB: '43,171,81',
+    statusWarning: '#FC8A32',
+    statusWarningRGB: '252,138,50',
+    statusCritical: '#E84855',
+    statusCriticalRGB: '232,72,85,1',
+    selectedActive: '#2196F3',
+    highlight: '#1A3C75',
+    border: '#313131',
+    buttonPrimary: '#2E67AB',
+    buttonSecondary: '#434343',
+    buttonDelete: '#8D1616',
+    infoPrimary: '#76828F',
+    infoSecondary: '#2C3238',
+    backgroundLevel1: '#151313',
+    backgroundLevel2: '#221D1D',
+    backgroundLevel3: '#1B1D1F',
+    backgroundLevel4: '#1B1B27',
+    textPrimary: '#EAEAEA',
+    textSecondary: '#A4ACB4',
+    textTertiary: '#DFDFDF',
+    textReverse: '#000000',
+    textLink: '#71AEFF',
+  },
+};
+
+/**
+ * @deprecated
+ *
+ * Please use coreUIAvailableThemes instead, the label is more explicit.
+ *
+ * import { coreUIAvailableThemes } from '@scality/core-ui/dist/style/theme';
+ */
+export const defaultTheme = coreUIAvailableThemes;
+
+// Why use this and not directly coreUIAvailableThemes.darkRebrand ?
+export const brand = coreUIAvailableThemes.darkRebrand;
+
+export type ThemeColors = keyof CoreUITheme;
+// LineChart colors
+export const lineColor1 = '#A14FBF';
+export const lineColor2 = '#BE9A40';
+export const lineColor3 = '#4BE4E2';
+export const lineColor4 = '#245A83';
+export const lineColor5 = '#E3FF73';
+export const lineColor6 = '#BE2543';
+export const lineColor7 = '#FD8144';
+export const lineColor8 = '#F6B187';
+export const fontSize = {
+  smaller: '0.71rem',
+  small: '0.85rem',
+  base: '1rem',
+  large: '1.14rem',
+  larger: '1.43rem',
+  huge: '1.57rem',
+  // no use case for the moment
+  massive: '1.71rem', // no use case for the moment
+};
+
+/**
+ * @deprecated
+ *
+ * use import { spacing } from '@scality/core-ui/dist/spacing';
+ */
+export const space = [
+  '0',
+  '0.071rem',
+  '0.143rem',
+  '0.286rem',
+  '0.571rem',
+  '0.71rem',
+  '0.857rem',
+  '1rem',
+  '1.143rem',
+  '1.429rem',
+  '1.714rem',
+  '2rem',
+  '2.286rem',
+  '2.857rem',
+];
+export const fontWeight = {
+  light: '400',
+  base: '400',
+  semibold: '600',
+  bold: '700',
+};
+
+/**
+ * @deprecated
+ *
+ * Use spacing instead \
+ * smaller : sp4 \
+ * small : sp8 \
+ * base : sp16 \
+ * large : sp20 \
+ * larger : sp24 \
+ *
+ */
+export const padding = {
+  smaller: '4px',
+  small: '8px',
+  base: '16px',
+  large: '20px',
+  larger: '24px',
+};
+
+/**
+ * @deprecated
+ * use import { spacing } from '@scality/core-ui/dist/spacing';
+ *
+ */
+export const spacing = {
+  sp0: space[0],
+  sp1: space[1],
+  sp2: space[2],
+  sp4: space[3],
+  sp8: space[4],
+  sp10: space[5],
+  sp12: space[6],
+  sp14: space[7],
+  sp16: space[8],
+  sp20: space[9],
+  sp24: space[10],
+  sp28: space[11],
+  sp32: space[12],
+  sp40: space[13],
+};
+// Svg size
+export const svgSize = {
+  smaller: '11px',
+  small: '14px',
+  base: '16px',
+  large: '18px',
+  larger: '22px',
+  huge: '30px',
+  massive: '40px',
+};
+export const zIndex = {
+  tooltip: 9990,
+  notification: 9000,
+  modal: 8500,
+  overlay: 8000,
+  dropdown: 7000,
+  nav: 500,
+  sidebar: 100,
+  scrollbarButton: 2,
+  base: 1,
+};
+//navbar
+export const navbarHeight = '3rem';
+export const navbarItemWidth = '4.286rem';
+//sidebar
+export const sidebarItemHeight = spacing.sp40;
+export const sidebarWidth = spacing.sp40;

package/src/lib/testUtils.tsx

@@ -0,0 +1,18 @@
+import { QueryClient, QueryClientProvider } from 'react-query';
+import { ThemeProvider } from 'styled-components';
+import { coreUIAvailableThemes } from './style/theme';
+
+export const getWrapper = () => {
+  const queryClient = new QueryClient();
+  const Wrapper = ({ children }: { children: React.ReactNode }) => {
+    return (
+      <ThemeProvider theme={coreUIAvailableThemes.darkRebrand}>
+        <QueryClientProvider client={queryClient}>
+          {children}
+        </QueryClientProvider>
+      </ThemeProvider>
+    );
+  };
+
+  return { Wrapper: Wrapper, queryClient: queryClient };
+};

package/src/lib/utils.ts

@@ -0,0 +1,57 @@
+const RGB_HEX = /^#?(?:([\da-f]{3})[\da-f]?|([\da-f]{6})(?:[\da-f]{2})?)$/i;
+
+/** Ensure the consistency of colors between old and new colors */
+const variantMapping = {
+  healthy: 'statusHealthy',
+  success: 'statusHealthy',
+  warning: 'statusWarning',
+  danger: 'statusCritical',
+  selected: 'selectedActive',
+  base: 'infoPrimary',
+};
+
+/** Translates the old colors into new colors while keeping the same name.
+ * New names are also supported. */
+export const getThemePropSelector = (key) => (props) => {
+  const key_ = variantMapping[key] ?? key;
+  return props.theme[key_];
+};
+
+/** Translates the old colors into new colors while keeping same name.
+ * New names are also supported. */
+export const getThemeVariantSelector = () => (props) => {
+  const theme = props.theme;
+  const key = variantMapping[props.variant] ?? props.variant;
+  return theme[key];
+};
+
+export const hex2RGB = (str: string): [number, number, number] => {
+  const [, short, long] = String(str).match(RGB_HEX) || [];
+
+  if (long) {
+    const value = Number.parseInt(long, 16);
+    return [value >> 16, (value >> 8) & 0xff, value & 0xff];
+  } else if (short) {
+    const [r, g, b] = Array.from(short, (s) => Number.parseInt(s, 16)).map(
+      (n) => (n << 4) | n,
+    );
+    return [r, g, b];
+  }
+
+  throw new Error('Invalid hex string provided');
+};
+
+export const convertRemToPixels = (rem: number): number => {
+  if (
+    document.documentElement &&
+    rem &&
+    Number.isFinite(rem) &&
+    !Number.isNaN(rem)
+  ) {
+    return (
+      rem * parseFloat(getComputedStyle(document.documentElement).fontSize) || 0
+    );
+  }
+
+  return 0;
+};

package/stories/Button/button.guideline.mdx

@@ -0,0 +1,199 @@
+import {
+  Meta,
+  Story,
+  Canvas,
+  Primary,
+  Controls,
+  Unstyled,
+  Source,
+  Title,
+} from '@storybook/blocks';
+import { Button } from '../../src/lib/components/buttonv2/Buttonv2.component';
+
+import * as ButtonStories from './button.stories';
+
+<Meta of={ButtonStories} name="Guideline" />
+
+# Button
+
+Buttons are used to trigger an action or event when activated.
+
+## Size & style
+
+### Style
+
+- Height: 2rem
+- Border-radius: 3px
+- Minimum width: 5rem
+
+### Padding
+
+Button’s label measurement:
+
+- Line height: 1.25rem
+- Vertical padding: 0.5rem
+- Horizontal padding of 1rem
+- Space between icon & label: 0.5rem
+
+### Button spacing
+
+- Horizontal spacing: 1rem
+- Vertical spacing: 0.75rem
+- Space between 2 buttons: 1.5rem - when there is no space constraint
+
+## Usage
+
+Button labels should be as short and clear as possible and should describe the action the button performs.\
+
+- Use one or two words if possible,
+- Remove most prepositions and articles (a, an, the).
+- Examples: Cancel, Close, Create, Delete, Edit, Learn More, Review, Save, Study, View Scores, etc.,
+- Stick to using verbs (Complete, Start, Finish, Search) or a simple verb + noun combination for buttons (Next page, Submit post, Learn more),
+- Capitalize the noun after the verb (Create Folder, Create Node, Edit Location).
+- Maintain labelling method consistency across all of your buttons,
+- Don't use punctuation or exclamation marks (!),
+- And, most importantly, don't write "Click here".
+
+## Variations
+
+The button can be modified in different way to match its usage.
+
+### Variant
+
+Buttons have a set of predefined variants to use in different context.
+
+<Canvas layout="fullscreen" of={ButtonStories.DefaultButtons} />
+<br />
+
+#### Primary
+
+Used for the main action. It should only appear once within a group of buttons (or even a screen).
+For example, “Continue” in a form.
+
+<Canvas of={ButtonStories.Primary} layout="fullscreen" />
+
+#### Secondary
+
+Used for a secondary action within a group of buttons.
+
+<Canvas layout="fullscreen" of={ButtonStories.Secondary} />
+
+#### Outline
+
+Used for low-emphasis action, as an alternative to Primary or Secondary buttons.
+It's suitable for dismissive action, such as the "Cancel" button.
+
+<Canvas layout="fullscreen" of={ButtonStories.Outline} />
+
+#### Danger
+
+Used for critical action, typically delete actions.
+Actions triggered by such button often require additional validation, as the critical action cannot be undone.
+
+<Canvas layout="fullscreen" of={ButtonStories.Danger} />
+
+### Links
+
+The Button component can be used as a link to another element of the UI.
+When the link send to another site, use the "External-link-alt" icon.
+
+<Canvas layout="fullscreen" of={ButtonStories.LinkButton} />
+
+### Size
+
+Only 2 sizes are available for the button component : default and inline.
+
+Inline size is use for constraint spaces, like in tables or in key/values sections.
+On all others cases, use the default size.
+
+<Canvas layout="fullscreen" of={ButtonStories.ButtonSizes} />
+
+### States
+
+#### Disabled state
+
+Clicks on the button should trigger no action, and the cursor should display a "not-allowed" indicator. \
+A tooltip explaining the reason for the button’s disabled state should appear on hover.
+
+<Canvas layout="fullscreen" of={ButtonStories.ButtonDisabled} />
+
+#### Loading State
+
+Display a spinner animation within the button. \
+Disable any interactions during the loading process.
+
+<Canvas
+  layout="fullscreen"
+  of={ButtonStories.ButtonLoading}
+
+/>
+
+## Group of Button
+
+- Primary buttons placed on the right of a group.
+- Dismissive actions placed on the left. It allows the user to return to the previous screen or step in the process.
+
+Align button groups with the container's right side by default; however, based on the use case and visual balance it can be aligned differently.
+
+<Canvas layout="fullscreen" of={ButtonStories.SimpleForm} sourceState="none" />
+
+## Icon on buttons
+
+### Usage
+
+Every button gets a label.\
+Icons are optional and mainly used to show how buttons are different, to aid memory and differentiation.\
+Universally understood icons work well (ie. print, close, play/pause, save).\
+Use standard icons when their use matches their meaning, or at least the user's intent.\
+Avoid creating new icons for every action, especially infrequently used ones.\
+Avoid using an icon alone in a button. If no label is provided, then use a tooltip.
+
+### Placement
+
+Icons are to be positioned only on the left side of the text.\
+Icons should be vertically center-aligned with the text.\
+The icon should be (approximately) the same height as the text.\
+Seeing the icon first help users to scan the page more easily, except for few cases such as navigation (right arrow).
+
+<Canvas
+  layout="fullscreen"
+  of={ButtonStories.ButtonsWithIcon}
+  sourceState="none"
+/>
+
+<Canvas
+  layout="fullscreen"
+  of={ButtonStories.IconButtonWithTooltip}
+  sourceState="none"
+/>
+
+### Accessibility
+
+- Icons in Button Design: \
+  Easily recognizable icons help with the quick recognition of a button’s function. If the icon is not clear enough, it loses its purpose, so in such cases, avoid using icons.
+- Aria Labels: \
+  Providing descriptive labels for screen readers is really helpful, especially for buttons that use icons only.
+
+## Ghost Buttons
+
+Ghost buttons are subtle and contribute to a minimalist interface design.  
+They are low-emphasis, making them ideal for non-primary actions in UIs.  
+They're also effective in space-limited areas like tables or key-value lists.
+
+- Ensure tooltips are included for clarity
+- Don't confuse them with non-interactive elements like descriptive icons or status indicators
+- Use them for secondary or less crucial actions.
+- Don't opt for them over Outline buttons, which are more visibly recognizable as buttons.
+- Create too many different instances of ghost buttons; limit them to common actions (e.g. link to other UIs).
+
+<Canvas
+  layout="fullscreen"
+  of={ButtonStories.GhostButtons}
+  sourceState="none"
+/>
+
+### Playground
+
+<Canvas of={ButtonStories.Playground} layout="fullscreen" />
+
+<Controls of={ButtonStories.Playground} />