@scality/core-ui 0.203.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/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;

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

@@ -0,0 +1,157 @@
+import { RuleTester } from 'eslint';
+import rule from './modal-button-forbidden-label.js';
+import * as tsParser from '@typescript-eslint/parser';
+
+const tester = new RuleTester({
+    parser: tsParser,
+    parserOptions: {
+        ecmaFeatures: { jsx: true },
+        ecmaVersion: 2020,
+    },
+});
+
+const ERROR = 'Button inside Modal should not use "Yes", "No", or "Ok" as a label.';
+
+tester.run('modal-button-forbidden-label', rule, {
+    // ─── Valid ────────────────────────────────────────────────────────────────
+    valid: [
+        // Buttons outside a Modal are never checked, even if the label is forbidden
+        { code: '<Button>Yes</Button>' },
+        { code: '<Button>No</Button>' },
+        { code: '<Button>Ok</Button>' },
+        { code: '<Button label="Ok" />' },
+
+        // Non-Modal wrappers do not trigger the rule
+        { code: '<Dialog><Button>Yes</Button></Dialog>' },
+
+        // Buttons inside Modal with acceptable labels
+        { code: '<Modal><Button>Cancel</Button></Modal>' },
+        { code: '<Modal><Button>Confirm</Button></Modal>' },
+        { code: '<Modal><Button>Delete item</Button></Modal>' },
+        { code: '<Modal><Button label="Cancel" /></Modal>' },
+        { code: '<Modal><Button label="Delete item" /></Modal>' },
+        { code: '<Modal footer={<Button label="Cancel" />}>Content</Modal>' },
+
+        // Non-Button elements inside Modal are not checked
+        { code: '<Modal><Text>Yes</Text></Modal>' },
+        { code: '<Modal><span>No</span></Modal>' },
+
+        // Words that merely contain the forbidden substring are NOT matched
+        // ("Okay" → "ok" is not a whole word because "a" follows it)
+        { code: '<Modal><Button>Okay</Button></Modal>' },
+        { code: '<Modal><Button label="Rebook" /></Modal>' },
+        { code: '<Modal><Button label="Nobody" /></Modal>' },
+
+        // Empty / whitespace-only children are ignored
+        { code: '<Modal><Button>   </Button></Modal>' },
+        { code: '<Modal><Button>{variable}</Button></Modal>' },
+    ],
+
+    // ─── Invalid ──────────────────────────────────────────────────────────────
+    invalid: [
+        // ── JSX text children ─────────────────────────────────────────────────
+
+        {
+            code: '<Modal><Button>Yes</Button></Modal>',
+            errors: [{ message: ERROR }],
+        },
+        {
+            code: '<Modal><Button>No</Button></Modal>',
+            errors: [{ message: ERROR }],
+        },
+        {
+            code: '<Modal><Button>Ok</Button></Modal>',
+            errors: [{ message: ERROR }],
+        },
+        {
+            // case-insensitive matching
+            code: '<Modal><Button>yes</Button></Modal>',
+            errors: [{ message: ERROR }],
+        },
+        {
+            code: '<Modal><Button>no</Button></Modal>',
+            errors: [{ message: ERROR }],
+        },
+        {
+            code: '<Modal><Button>ok</Button></Modal>',
+            errors: [{ message: ERROR }],
+        },
+        {
+            // forbidden word embedded in a longer label
+            code: '<Modal><Button>Ok, got it</Button></Modal>',
+            errors: [{ message: ERROR }],
+        },
+
+        // ── label prop — string literal ────────────────────────────────────────
+
+        {
+            code: '<Modal><Button label="Yes" /></Modal>',
+            errors: [{ message: ERROR }],
+        },
+        {
+            code: '<Modal><Button label="No" /></Modal>',
+            errors: [{ message: ERROR }],
+        },
+        {
+            code: '<Modal><Button label="Ok" /></Modal>',
+            errors: [{ message: ERROR }],
+        },
+        {
+            // real-world example from the rule description
+            code: '<Modal><Button label="Ok, delete" /></Modal>',
+            errors: [{ message: ERROR }],
+        },
+
+        // ── label prop — JSX expression container ─────────────────────────────
+
+        {
+            code: '<Modal><Button label={"Yes"} /></Modal>',
+            errors: [{ message: ERROR }],
+        },
+
+        // ── Button nested inside a JSX attribute expression (e.g. footer) ─────
+
+        {
+            code: '<Modal footer={<Button label="Ok, delete" />}>Content</Modal>',
+            errors: [{ message: ERROR }],
+        },
+        {
+            code: '<Modal footer={<Button label="No" />}>Content</Modal>',
+            errors: [{ message: ERROR }],
+        },
+        {
+            // Button nested deeper inside the footer expression
+            code: '<Modal footer={<Box><Button label="Yes" /></Box>}>Content</Modal>',
+            errors: [{ message: ERROR }],
+        },
+
+        // ── All three targeted components (Button) are covered ────────────────
+
+        {
+            // Mirrors the example from the rule description
+            code: `
+<Modal
+  isOpen={isModalOpen}
+  title="Remove deployment"
+  footer={
+    <Box>
+      <Button variant="secondary" label="Cancel" />
+      <Button variant="danger" label="Ok, delete" />
+    </Box>
+  }
+>
+  Are you sure?
+</Modal>`,
+            errors: [{ message: ERROR }],
+        },
+    ],
+});
+
+// RuleTester.run() throws if any case fails, so reaching this line means all
+// cases passed. Jest needs at least one explicit assertion per test file.
+describe('modal-button-forbidden-label', () => {
+    it('passes all RuleTester cases', () => {
+        // Execution of tester.run() above already validated everything.
+        expect(true).toBe(true);
+    });
+});

package/src/lib/valalint/rules/no-raw-number-in-jsx.js

@@ -0,0 +1,64 @@
+import ts from 'typescript';
+
+/**
+ * Returns true when the TypeScript type — or any member of a union — is a
+ * numeric type (number primitive or a number literal type such as `42`).
+ */
+function typeIncludesNumber(type) {
+    if (type.flags & ts.TypeFlags.Number) return true;
+    if (type.flags & ts.TypeFlags.NumberLiteral) return true;
+    // Handle union types: `number | undefined`, `number | null`, `string | number`, …
+    if (type.flags & ts.TypeFlags.Union) {
+        return type.types.some(t => typeIncludesNumber(t));
+    }
+    return false;
+}
+
+const noRawNumberInJsx = {
+    meta: {
+        type: 'suggestion',
+        docs: {
+            description:
+                'Disallow raw numeric expressions in JSX text; use formatISONumber() instead',
+            category: 'Best Practices',
+            recommended: false,
+        },
+        schema: [],
+        messages: {
+            rawNumber:
+                'Avoid rendering raw numbers in JSX text. ' +
+                'Use formatISONumber(value) to apply proper ISO formatting ' +
+                '(space as thousands separator, leading zero before decimal point).',
+        },
+    },
+
+    create(context) {
+        // Type-aware rule: opt out gracefully when no TypeScript program is available.
+        const services = context.sourceCode?.parserServices ?? context.parserServices;
+        if (!services?.program) return {};
+
+        const checker = services.program.getTypeChecker();
+
+        return {
+            JSXExpressionContainer(node) {
+                // Only flag children positions — attribute values are intentionally excluded.
+                // A child container's direct parent is JSXElement; an attribute value's is JSXAttribute.
+                if (node.parent.type !== 'JSXElement') return;
+
+                const { expression } = node;
+
+                // Skip {/* JSX comments */}
+                if (expression.type === 'JSXEmptyExpression') return;
+
+                const tsNode = services.esTreeNodeToTSNodeMap.get(expression);
+                const type = checker.getTypeAtLocation(tsNode);
+
+                if (typeIncludesNumber(type)) {
+                    context.report({ node, messageId: 'rawNumber' });
+                }
+            },
+        };
+    },
+};
+
+export default noRawNumberInJsx;