@scality/core-ui 0.202.0 → 0.204.0

package/src/lib/components/drawer/Drawer.component.tsx

@@ -0,0 +1,207 @@
+import { CSSProperties, type ReactNode, useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import styled from 'styled-components';
+import { spacing } from '../../spacing';
+import { zIndex } from '../../style/theme';
+import { getThemePropSelector } from '../../utils';
+import { Button } from '../buttonv2/Buttonv2.component';
+import { Icon } from '../icon/Icon.component';
+import { Text } from '../text/Text.component';
+
+type DrawerPosition = 'left' | 'right' | 'top' | 'bottom';
+
+type Props = {
+  isOpen: boolean;
+  close: () => void;
+  title: ReactNode;
+  position?: DrawerPosition;
+  size?: CSSProperties['width'];
+  footer?: ReactNode;
+  overlay?: boolean;
+  showCloseButton?: boolean;
+  children: ReactNode;
+};
+
+const TRANSITION_DURATION = '250ms';
+
+const DrawerBackdrop = styled.div<{ $overlay: boolean }>`
+  position: fixed;
+  inset: 0;
+  z-index: ${zIndex.overlay};
+  background: ${({ $overlay }) => ($overlay ? 'rgba(0, 0, 0, 0.3)' : 'transparent')};
+`;
+
+function getTransform(position: DrawerPosition, isOpen: boolean): string {
+  if (isOpen) return 'translate3d(0, 0, 0)';
+  switch (position) {
+    case 'left':
+      return 'translate3d(-100%, 0, 0)';
+    case 'right':
+      return 'translate3d(100%, 0, 0)';
+    case 'top':
+      return 'translate3d(0, -100%, 0)';
+    case 'bottom':
+      return 'translate3d(0, 100%, 0)';
+  }
+}
+
+const DrawerPanel = styled.div<{
+  $position: DrawerPosition;
+  $size: CSSProperties['width'];
+  $isOpen: boolean;
+}>`
+  position: fixed;
+  z-index: ${zIndex.drawer};
+  background-color: ${getThemePropSelector('backgroundLevel2')};
+  color: ${getThemePropSelector('textPrimary')};
+  display: flex;
+  flex-direction: column;
+  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.3);
+  transition: transform ${TRANSITION_DURATION} ease-in-out;
+  transform: ${({ $position, $isOpen }) => getTransform($position, $isOpen)};
+
+  ${({ $position, $size, theme }) => {
+    const borderSide = $position === 'left' ? 'right' : $position === 'right' ? 'left' : $position === 'top' ? 'bottom' : 'top';
+    const border = `border-${borderSide}: 1px solid ${theme.border};`;
+    switch ($position) {
+      case 'left':
+        return `top: 0; left: 0; bottom: 0; width: ${$size}; ${border}`;
+      case 'right':
+        return `top: 0; right: 0; bottom: 0; width: ${$size}; ${border}`;
+      case 'top':
+        return `top: 0; left: 0; right: 0; height: ${$size}; ${border}`;
+      case 'bottom':
+        return `bottom: 0; left: 0; right: 0; height: ${$size}; ${border}`;
+    }
+  }}
+`;
+
+const DrawerHeader = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: ${spacing.r16};
+  background-color: ${getThemePropSelector('backgroundLevel3')};
+`;
+
+const DrawerBody = styled.div`
+  flex: 1;
+  overflow-y: auto;
+  padding: ${spacing.r16};
+  background-color: ${getThemePropSelector('backgroundLevel4')};
+`;
+
+const DrawerFooter = styled.div`
+  padding: ${spacing.r16};
+  background-color: ${getThemePropSelector('backgroundLevel3')};
+  display: flex;
+  gap: ${spacing.r8};
+  justify-content: flex-end;
+`;
+
+const Drawer = ({
+  isOpen,
+  close,
+  title,
+  position = 'left',
+  size = '400px',
+  footer,
+  overlay = false,
+  showCloseButton = true,
+  children,
+}: Props) => {
+  const drawerContainer = useRef(document.createElement('div'));
+  const panelRef = useRef<HTMLDivElement>(null);
+  const [mounted, setMounted] = useState(isOpen);
+  const [active, setActive] = useState(false);
+
+  useLayoutEffect(() => {
+    const container = drawerContainer.current;
+    document.body?.prepend(container);
+    return () => {
+      document.body?.removeChild(container);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (isOpen) {
+      setMounted(true);
+    } else {
+      setActive(false);
+    }
+  }, [isOpen]);
+
+  useEffect(() => {
+    if (mounted && isOpen) {
+      const frame = requestAnimationFrame(() => {
+        setActive(true);
+        panelRef.current?.focus();
+      });
+      return () => cancelAnimationFrame(frame);
+    }
+  }, [mounted, isOpen]);
+
+  const stableClose = useCallback(close, [close]);
+
+  useEffect(() => {
+    if (isOpen) {
+      const handleEsc = (event: KeyboardEvent) => {
+        if (event.key === 'Escape') {
+          stableClose();
+        }
+      };
+      document.addEventListener('keydown', handleEsc);
+      return () => {
+        document.removeEventListener('keydown', handleEsc);
+      };
+    }
+  }, [isOpen, stableClose]);
+
+  const handleTransitionEnd = () => {
+    if (!isOpen) setMounted(false);
+  };
+
+  if (!mounted) return null;
+
+  return createPortal(
+    <>
+      <DrawerBackdrop $overlay={overlay} onClick={stableClose} />
+      <DrawerPanel
+        ref={panelRef}
+        className="sc-drawer"
+        $position={position}
+        $size={size}
+        $isOpen={active}
+        role="dialog"
+        tabIndex={-1}
+        aria-modal={overlay ? 'true' : undefined}
+        aria-labelledby="drawer_label"
+        onTransitionEnd={handleTransitionEnd}
+      >
+        <DrawerHeader className="sc-drawer-header">
+          <Text variant="Larger" id="drawer_label">
+            {title}
+          </Text>
+          {showCloseButton && (
+            <Button
+              icon={<Icon name="Close" />}
+              onClick={stableClose}
+              tooltip={{ overlay: 'Close' }}
+              aria-label="Close"
+            />
+          )}
+        </DrawerHeader>
+        <DrawerBody className="sc-drawer-body">{children}</DrawerBody>
+        {footer && (
+          <DrawerFooter className="sc-drawer-footer">
+            {footer}
+          </DrawerFooter>
+        )}
+      </DrawerPanel>
+    </>,
+    drawerContainer.current,
+  );
+};
+
+export { Drawer };
+export type { DrawerPosition };

package/src/lib/index.ts

@@ -14,6 +14,7 @@ export {
 } from './components/constants';
 export type { Status } from './components/constants';
 export { Layout } from './components/layout/Layout.component';
+export { Drawer } from './components/drawer/Drawer.component';
 export { Loader } from './components/loader/Loader.component';
 export { Modal } from './components/modal/Modal.component';
 export { Navbar } from './components/navbar/Navbar.component';

package/src/lib/next.ts

@@ -17,6 +17,7 @@ export { CoreUiThemeProvider } from './components/coreuithemeprovider/CoreUiThem
 export { Box } from './components/box/Box';
 export { Input } from './components/inputv2/inputv2';
 export { Accordion } from './components/accordion/Accordion.component';
+export { Drawer } from './components/drawer/Drawer.component';
 export { Editor } from './components/editor';
 export type { EditorProps } from './components/editor';
 

package/src/lib/style/theme.ts

@@ -310,6 +310,7 @@ export const zIndex = {
   tooltip: 9990,
   notification: 9000,
   modal: 8500,
+  drawer: 8200,
   overlay: 8000,
   dropdown: 7000,
   nav: 500,

package/src/lib/utils.test.ts

@@ -4,22 +4,28 @@ const LIGHT_TEXT = '#EAEAEA';
 const DARK_TEXT = '#000000';
 
 describe('getContrastText', () => {
-  it('returns textPrimary on dark backgrounds when textPrimary is light', () => {
+  it('returns light text on dark backgrounds', () => {
     expect(getContrastText('#000000', LIGHT_TEXT, DARK_TEXT)).toBe(LIGHT_TEXT);
     expect(getContrastText('#1A1A1A', LIGHT_TEXT, DARK_TEXT)).toBe(LIGHT_TEXT);
     expect(getContrastText('#121219', LIGHT_TEXT, DARK_TEXT)).toBe(LIGHT_TEXT);
     expect(getContrastText('#2F4185', LIGHT_TEXT, DARK_TEXT)).toBe(LIGHT_TEXT);
   });
 
-  it('returns textReverse on light backgrounds when textPrimary is light', () => {
+  it('returns dark text on light backgrounds', () => {
     expect(getContrastText('#FFFFFF', LIGHT_TEXT, DARK_TEXT)).toBe(DARK_TEXT);
     expect(getContrastText('#F5F5F5', LIGHT_TEXT, DARK_TEXT)).toBe(DARK_TEXT);
     expect(getContrastText('#FCFCFC', LIGHT_TEXT, DARK_TEXT)).toBe(DARK_TEXT);
   });
 
-  it('picks the text color with better contrast against a vivid background', () => {
-    expect(getContrastText('#E9041E', LIGHT_TEXT, DARK_TEXT)).toBe(DARK_TEXT);
-    expect(getContrastText('#E9041E', '#FFFFFF', '#000000')).toBe('#FFFFFF');
+  it('returns light text on saturated colors where WCAG luminance is ambiguous', () => {
+    expect(getContrastText('#E60028', LIGHT_TEXT, DARK_TEXT)).toBe(LIGHT_TEXT);
+    expect(getContrastText('#E9041E', LIGHT_TEXT, DARK_TEXT)).toBe(LIGHT_TEXT);
+    expect(getContrastText('#E60028', '#0D0D0D', '#EAEAEA')).toBe('#EAEAEA');
+  });
+
+  it('works regardless of which token is lighter', () => {
+    expect(getContrastText('#000000', DARK_TEXT, LIGHT_TEXT)).toBe(LIGHT_TEXT);
+    expect(getContrastText('#FFFFFF', DARK_TEXT, LIGHT_TEXT)).toBe(DARK_TEXT);
   });
 
   it('handles 3-character hex shorthand', () => {
@@ -27,12 +33,12 @@ describe('getContrastText', () => {
     expect(getContrastText('#000', LIGHT_TEXT, DARK_TEXT)).toBe(LIGHT_TEXT);
   });
 
-  it('handles hex without # prefix', () => {
-    expect(getContrastText('000000', LIGHT_TEXT, DARK_TEXT)).toBe(LIGHT_TEXT);
-    expect(getContrastText('FFFFFF', LIGHT_TEXT, DARK_TEXT)).toBe(DARK_TEXT);
+  it('handles rgb color format', () => {
+    expect(getContrastText('rgb(0, 0, 0)', LIGHT_TEXT, DARK_TEXT)).toBe(LIGHT_TEXT);
+    expect(getContrastText('rgb(255, 255, 255)', LIGHT_TEXT, DARK_TEXT)).toBe(DARK_TEXT);
   });
 
-  it('returns null for non-hex values', () => {
+  it('returns null for unparseable values', () => {
     expect(
       getContrastText(
         'linear-gradient(130deg, #9355E7 0%, #2E4AA3 60%)',
@@ -41,8 +47,5 @@ describe('getContrastText', () => {
       ),
     ).toBeNull();
     expect(getContrastText('not-a-color', LIGHT_TEXT, DARK_TEXT)).toBeNull();
-    expect(
-      getContrastText('rgb(255, 0, 0)', LIGHT_TEXT, DARK_TEXT),
-    ).toBeNull();
   });
 });

package/src/lib/utils.ts

@@ -1,3 +1,5 @@
+import { getLuminance } from 'polished';
+
 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 */
@@ -45,22 +47,12 @@ export const hex2RGB = (str: string): [number, number, number] => {
   throw new Error('Invalid hex string provided');
 };
 
-// WCAG 2.0 relative luminance
-const relativeLuminance = (r: number, g: number, b: number): number => {
-  const [rs, gs, bs] = [r, g, b].map((c) => {
-    const s = c / 255;
-    return s <= 0.03928 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;
-  });
-  return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs;
-};
-
 const wcagContrastRatio = (l1: number, l2: number): number =>
   (Math.max(l1, l2) + 0.05) / (Math.min(l1, l2) + 0.05);
 
-const luminanceOf = (hex: string): number => {
-  const [r, g, b] = hex2RGB(hex);
-  return relativeLuminance(r, g, b);
-};
+// Minimum WCAG contrast ratio to consider a text color readable on a background.
+// 3.0 corresponds to WCAG AA for large text — same threshold used by MUI.
+const CONTRAST_THRESHOLD = 3;
 
 export const getContrastText = (
   bgColor: string,
@@ -68,10 +60,16 @@ export const getContrastText = (
   textReverse: string,
 ): string | null => {
   try {
-    const bgLum = luminanceOf(bgColor);
-    const primaryContrast = wcagContrastRatio(luminanceOf(textPrimary), bgLum);
-    const reverseContrast = wcagContrastRatio(luminanceOf(textReverse), bgLum);
-    return reverseContrast > primaryContrast ? textReverse : textPrimary;
+    const bgLum = getLuminance(bgColor);
+    const primaryLum = getLuminance(textPrimary);
+    const reverseLum = getLuminance(textReverse);
+
+    const lighterText = primaryLum >= reverseLum ? textPrimary : textReverse;
+    const darkerText = primaryLum >= reverseLum ? textReverse : textPrimary;
+
+    const lighterContrast = wcagContrastRatio(primaryLum >= reverseLum ? primaryLum : reverseLum, bgLum);
+
+    return lighterContrast >= CONTRAST_THRESHOLD ? lighterText : darkerText;
   } catch {
     return null;
   }

package/src/lib/valalint/README.md

@@ -0,0 +1,50 @@
+# eslint-plugin-valalint
+
+A custom ESLint plugin shipped as part of `@scality/core-ui`.  
+It enforces Scality UI coding conventions (e.g. capitalisation rules for user-facing text).
+
+## Using the plugin in a project
+
+Install (or depend on) `@scality/core-ui`, then import the plugin from its sub-path:
+
+### Example config (`eslint.config.mjs`)
+
+```js
+import valalint from '@scality/core-ui/eslint-plugin';
+
+export default [
+  {
+    files: ['**/*.{js,jsx,ts,tsx}'],
+    ignores: ['src/gen/**'],
+    ...valalint.configs['flat/recommended'],
+  },
+];
+```
+
+## Adding a new rule
+
+### 1. Create the rule file
+
+Add a new file under `src/lib/valalint/rules/`. Use the existing
+[`technical-sentence-case.js`](./rules/technical-sentence-case.js) as a reference.
+
+Refer to the [ESLint rule authoring docs](https://eslint.org/docs/latest/extend/custom-rules) for the full API.
+
+### 2. Register the rule in the plugin
+
+Open [`src/lib/valalint/index.js`](./index.js) and add two lines to import your rule and add it to the rules map.
+
+### 3. Set a default severity in the recommended config
+
+Still in `index.js`, add the rule to `recommendedRules` with its desired default severity
+(`'off'`, `'warn'`, or `'error'`):
+
+```js
+const recommendedRules = {
+  'valalint/technical-sentence-case': 'warn',
+  'valalint/my-new-rule': 'warn',         // ← add this
+};
+```
+
+That's it. The rule is now available to all consumers via both the `recommended` and
+`flat/recommended` configs, and individually as `'valalint/my-new-rule'`.

package/src/lib/valalint/index.js

@@ -0,0 +1,49 @@
+import tsParser from '@typescript-eslint/parser';
+import technicalSentenceCase from './rules/technical-sentence-case.js';
+import modalButtonForbiddenLabel from './rules/modal-button-forbidden-label.js';
+import noRawNumberInJsx from './rules/no-raw-number-in-jsx.js';
+
+const rules = {
+    'technical-sentence-case': technicalSentenceCase,
+    'modal-button-forbidden-label': modalButtonForbiddenLabel,
+    'no-raw-number-in-jsx': noRawNumberInJsx,
+};
+
+/** Default rule severity for the recommended config. */
+const recommendedRules = {
+    'valalint/technical-sentence-case': 'warn',
+    'valalint/modal-button-forbidden-label': 'warn',
+    'valalint/no-raw-number-in-jsx': 'warn',
+};
+
+const plugin = {
+    meta: {
+        name: 'valalint',
+        version: '1.0.0',
+    },
+
+    rules,
+    configs: {
+        /** Legacy eslintrc-style recommended config. */
+        recommended: {
+            plugins: ['valalint'],
+            rules: recommendedRules,
+        },
+    },
+};
+
+plugin.configs['flat/recommended'] = {
+    plugins: { valalint: plugin },
+    rules: recommendedRules,
+    languageOptions: {
+        parser: tsParser,
+        parserOptions: {
+            ecmaFeatures: {
+                jsx: true,
+            },
+            project: true,
+        },
+    },
+};
+
+export default plugin;

package/src/lib/valalint/rules/modal-button-forbidden-label.js

@@ -0,0 +1,87 @@
+/**
+ * Matches whole words "yes", "no", or "ok" case-insensitively.
+ * "Okay", "Book", "Note", "Yesterday" etc. are intentionally NOT matched.
+ */
+const FORBIDDEN_PATTERN = /\b(yes|no|ok)\b/i;
+
+/**
+ * Walks up the ancestor chain to determine whether `node` is a descendant
+ * of a <Modal> JSX element (including elements nested inside JSX attribute
+ * expression containers such as the `footer` prop).
+ */
+function isInsideModal(node) {
+    let current = node.parent;
+    while (current) {
+        if (
+            current.type === 'JSXElement' &&
+            current.openingElement?.name?.name === 'Modal'
+        ) {
+            return true;
+        }
+        current = current.parent;
+    }
+    return false;
+}
+
+const modalButtonForbiddenLabel = {
+    meta: {
+        type: 'suggestion',
+        docs: {
+            description:
+                'Disallow Button labels containing "Yes", "No", or "Ok" inside a Modal',
+            category: 'Best Practices',
+            recommended: false,
+        },
+        schema: [],
+    },
+
+    create(context) {
+        return {
+            JSXElement(node) {
+                if (node.openingElement.name.name !== 'Button') return;
+                if (!isInsideModal(node)) return;
+
+                // ── Check JSX text children ─────────────────────────────────────────
+                node.children.forEach(child => {
+                    if (child.type !== 'JSXText') return;
+                    const text = child.value.trim();
+                    if (text && FORBIDDEN_PATTERN.test(text)) {
+                        context.report({
+                            node: child,
+                            message:
+                                'Button inside Modal should not use "Yes", "No", or "Ok" as a label.',
+                        });
+                    }
+                });
+
+                // ── Check label prop ────────────────────────────────────────────────
+                const labelProp = node.openingElement.attributes.find(
+                    attr => attr.type === 'JSXAttribute' && attr.name.name === 'label',
+                );
+                if (!labelProp?.value) return;
+
+                let labelText = null;
+                if (labelProp.value.type === 'Literal') {
+                    // label="Ok, delete"
+                    labelText = String(labelProp.value.value);
+                } else if (
+                    labelProp.value.type === 'JSXExpressionContainer' &&
+                    labelProp.value.expression.type === 'Literal'
+                ) {
+                    // label={"Ok, delete"}
+                    labelText = String(labelProp.value.expression.value);
+                }
+
+                if (labelText && FORBIDDEN_PATTERN.test(labelText)) {
+                    context.report({
+                        node: labelProp,
+                        message:
+                            'Button inside Modal should not use "Yes", "No", or "Ok" as a label.',
+                    });
+                }
+            },
+        };
+    },
+};
+
+export default modalButtonForbiddenLabel;