@scality/core-ui 0.203.0 → 0.204.0

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

@@ -0,0 +1,237 @@
+/**
+ * @jest-environment node
+ */
+import { RuleTester } from '@typescript-eslint/rule-tester';
+import rule from './no-raw-number-in-jsx.js';
+import path from 'path';
+
+// Jest runs from the project root, so process.cwd() is the workspace root
+// where tsconfig.json lives.
+const tsconfigRootDir = process.cwd();
+
+// Virtual filename placed at the workspace root so it is matched by the
+// allowDefaultProject glob ('*.tsx') and uses the workspace tsconfig.
+const filename = path.join(tsconfigRootDir, 'test.tsx');
+
+const tester = new RuleTester({
+    languageOptions: {
+        parserOptions: {
+            ecmaFeatures: { jsx: true },
+            ecmaVersion: 2020,
+            projectService: {
+                allowDefaultProject: ['*.tsx'],
+                defaultProject: 'tsconfig.json',
+            },
+            tsconfigRootDir,
+        },
+    },
+});
+
+const ERROR =
+    'Avoid rendering raw numbers in JSX text. Use formatISONumber(value) to apply proper ISO formatting (space as thousands separator, leading zero before decimal point).';
+
+tester.run('no-raw-number-in-jsx', rule, {
+    // ─── Valid ────────────────────────────────────────────────────────────────
+    valid: [
+        // ── Numbers in JSX attribute values — never flagged ───────────────────
+        {
+            // Numeric literal in an attribute
+            code: 'const el = <input value={42} />;',
+            filename,
+        },
+        {
+            // Typed number variable in an attribute
+            code: 'declare const max: number; const el = <Chart max={max} />;',
+            filename,
+        },
+        {
+            // Multiple numeric attributes
+            code: 'declare const n: number; const el = <Slider step={0.5} min={0} max={n} />;',
+            filename,
+        },
+
+        // ── String types in JSX children — not flagged ────────────────────────
+        {
+            code: 'declare const name: string; const el = <Text>{name}</Text>;',
+            filename,
+        },
+        {
+            code: 'const el = <Text>{"hello"}</Text>;',
+            filename,
+        },
+        {
+            code: 'const el = <Text>{`template`}</Text>;',
+            filename,
+        },
+        {
+            // Template literal containing a number expression is still a string
+            // eslint-disable-next-line no-template-curly-in-string
+            code: 'declare const count: number; const el = <Text>{`Total: ${count}`}</Text>;',
+            filename,
+        },
+
+        // ── formatISONumber returns string — not flagged ───────────────────────
+        {
+            code: 'declare function formatISONumber(n: number, opts?: object): string; declare const count: number; const el = <Text>{formatISONumber(count)}</Text>;',
+            filename,
+        },
+
+        // ── Methods that return strings — not flagged ──────────────────────────
+        {
+            // Number.prototype.toFixed returns string
+            code: 'declare const value: number; const el = <Text>{value.toFixed(2)}</Text>;',
+            filename,
+        },
+        {
+            // Number.prototype.toPrecision returns string
+            code: 'declare const value: number; const el = <Text>{value.toPrecision(4)}</Text>;',
+            filename,
+        },
+        {
+            // String.prototype.toUpperCase returns string
+            code: 'declare const label: string; const el = <Text>{label.toUpperCase()}</Text>;',
+            filename,
+        },
+
+        // ── Other non-numeric types — not flagged ─────────────────────────────
+        {
+            code: 'const el = <Text>{null}</Text>;',
+            filename,
+        },
+        {
+            code: 'declare const flag: boolean; const el = <Text>{flag}</Text>;',
+            filename,
+        },
+        {
+            // string + number → string (TS widens to string)
+            code: 'declare const count: number; const el = <Text>{count + " items"}</Text>;',
+            filename,
+        },
+        {
+            // Conditional producing string
+            code: 'declare const flag: boolean; const el = <Text>{flag ? "yes" : "no"}</Text>;',
+            filename,
+        },
+
+        // ── JSX comment — not flagged ──────────────────────────────────────────
+        {
+            code: 'const el = <Text>{/* comment */}</Text>;',
+            filename,
+        },
+    ],
+
+    // ─── Invalid ──────────────────────────────────────────────────────────────
+    invalid: [
+        // ── Numeric literals (TypeFlags.NumberLiteral) ─────────────────────────
+        {
+            code: 'const el = <Text>{42}</Text>;',
+            filename,
+            errors: [{ message: ERROR }],
+        },
+        {
+            code: 'const el = <Text>{0}</Text>;',
+            filename,
+            errors: [{ message: ERROR }],
+        },
+        {
+            code: 'const el = <Text>{3.14}</Text>;',
+            filename,
+            errors: [{ message: ERROR }],
+        },
+
+        // ── Typed number variables (TypeFlags.Number) ─────────────────────────
+        {
+            code: 'declare const count: number; const el = <Text>{count}</Text>;',
+            filename,
+            errors: [{ message: ERROR }],
+        },
+        {
+            // Works on any element tag
+            code: 'declare const price: number; const el = <Tooltip>{price}</Tooltip>;',
+            filename,
+            errors: [{ message: ERROR }],
+        },
+
+        // ── Arithmetic that produces a number ─────────────────────────────────
+        {
+            // number + number → number
+            code: 'declare const a: number; declare const b: number; const el = <Text>{a + b}</Text>;',
+            filename,
+            errors: [{ message: ERROR }],
+        },
+        {
+            code: 'declare const total: number; declare const tax: number; const el = <Text>{total - tax}</Text>;',
+            filename,
+            errors: [{ message: ERROR }],
+        },
+        {
+            code: 'declare const bytes: number; const el = <Text>{bytes / 1024}</Text>;',
+            filename,
+            errors: [{ message: ERROR }],
+        },
+
+        // ── Unary minus on a number ───────────────────────────────────────────
+        {
+            code: 'declare const n: number; const el = <Text>{-n}</Text>;',
+            filename,
+            errors: [{ message: ERROR }],
+        },
+
+        // ── Properties that return number ─────────────────────────────────────
+        {
+            // Array.length → number
+            code: 'declare const items: string[]; const el = <Text>{items.length}</Text>;',
+            filename,
+            errors: [{ message: ERROR }],
+        },
+
+        // ── Functions that return number ───────────────────────────────────────
+        {
+            code: 'declare function getCount(): number; const el = <Text>{getCount()}</Text>;',
+            filename,
+            errors: [{ message: ERROR }],
+        },
+
+        // ── Union types that include number ───────────────────────────────────
+        {
+            // number | undefined — when defined it would render an unformatted number
+            code: 'declare const count: number | undefined; const el = <Text>{count}</Text>;',
+            filename,
+            errors: [{ message: ERROR }],
+        },
+        {
+            // string | number
+            code: 'declare const value: string | number; const el = <Text>{value}</Text>;',
+            filename,
+            errors: [{ message: ERROR }],
+        },
+
+        // ── Real-world patterns ────────────────────────────────────────────────
+        {
+            // Numeric literal mixed with JSX text siblings
+            code: 'const el = <Text>Total: {1234567}</Text>;',
+            filename,
+            errors: [{ message: ERROR }],
+        },
+        {
+            // Multiple violations in the same element
+            code: 'declare const a: number; declare const b: number; const el = <Text>{a}{b}</Text>;',
+            filename,
+            errors: [{ message: ERROR }, { message: ERROR }],
+        },
+        {
+            // Nested expressions
+            code: 'declare const a: number; declare const b: number; const el = <Text><span>{a}</span></Text>;',
+            filename,
+            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('no-raw-number-in-jsx', () => {
+    it('passes all RuleTester cases', () => {
+        expect(true).toBe(true);
+    });
+});

package/src/lib/valalint/rules/technical-sentence-case.js

@@ -0,0 +1,93 @@
+const RESOURCE_NAMES = [
+  'Bucket', 'Object', 'Node', 'Disk', 'Volume', 'Cluster', 'Policy', 'User',
+  'Group', 'Role', 'Workflow', 'Rule', 'Account', 'License', 'Location', 'Alert', 'Certificate'
+];
+const TARGET_COMPONENTS = ['Button', 'Text', 'Tooltip'];
+
+function checkSentenceCase(text) {
+  const trimmed = text.trim();
+  if (!trimmed) return true;
+  const firstLetter = trimmed.charAt(0);
+  return firstLetter === firstLetter.toUpperCase();
+}
+
+function checkResourceNames(text) {
+  for (const resource of RESOURCE_NAMES) {
+    const regex = new RegExp(`\\b${resource.toLowerCase()}\\b`);
+    const match = text.match(regex);
+    if (match) {
+      return resource;
+    }
+  }
+  return null;
+}
+
+const technicalSentenceCase = {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description: 'Enforce Technical Sentence Case for UI text',
+      category: 'Stylistic Issues',
+      recommended: false,
+    },
+    schema: [],
+    fixable: 'code',
+  },
+
+  create(context) {
+    return {
+      JSXElement(node) {
+        const name = node.openingElement.name.name;
+        if (!TARGET_COMPONENTS.includes(name)) return;
+
+        // Find the index of the first non-empty JSXText child that appears
+        // before any non-text node. Sentence case only applies to that child.
+        let firstTextChildIndex = -1;
+        for (let i = 0; i < node.children.length; i++) {
+          const child = node.children[i];
+          if (child.type === 'JSXText' && child.value.trim()) {
+            firstTextChildIndex = i;
+            break;
+          } else if (child.type !== 'JSXText') {
+            break; // expression comes first — can't determine sentence start
+          }
+        }
+
+        node.children.forEach((child, index) => {
+          // Only check for JSXText (e.g., <Button>text</Button>)
+          if (child.type === 'JSXText') {
+            const text = child.value.trim();
+            if (!text) return;
+
+            // Compose the fixed text for both fixes if needed
+            let fixedText = text;
+
+            // Sentence case fix — only on the first visible text fragment
+            if (index === firstTextChildIndex && !checkSentenceCase(text)) {
+              fixedText = fixedText.charAt(0).toUpperCase() + fixedText.slice(1);
+              context.report({
+                node: child,
+                message: `Text in <${name}> should start with a capital letter (sentence case).`,
+                fix: fixer => fixer.replaceText(child, ' ' + fixedText + ' ')
+              });
+            }
+
+            // Resource name fix
+            const wrongResource = checkResourceNames(text);
+            if (wrongResource) {
+              const regex = new RegExp(`\\b${wrongResource.toLowerCase()}\\b`, 'g');
+              fixedText = fixedText.replace(regex, wrongResource);
+              context.report({
+                node: child,
+                message: `Resource name "${wrongResource}" in <${name}> must be capitalized.`,
+                fix: fixer => fixer.replaceText(child, fixedText)
+              });
+            }
+          }
+        });
+      }
+    };
+  }
+};
+
+export default technicalSentenceCase;

package/src/lib/valalint/rules/technical-sentence-case.test.js

@@ -0,0 +1,167 @@
+import { RuleTester } from 'eslint';
+import rule from './technical-sentence-case.js';
+import * as tsParser from '@typescript-eslint/parser';
+
+const tester = new RuleTester({
+    parser: tsParser,
+    parserOptions: {
+        ecmaFeatures: { jsx: true },
+        ecmaVersion: 2020,
+    },
+});
+
+tester.run('technical-sentence-case', rule, {
+    // ─── Valid ────────────────────────────────────────────────────────────────
+    valid: [
+        // Non-targeted components are never checked
+        { code: '<div>hello world</div>' },
+        { code: '<span>bucket deleted</span>' },
+        { code: '<label>some text</label>' },
+
+        // Correctly capitalised plain text
+        { code: '<Button>Save</Button>' },
+        { code: '<Button>Delete item</Button>' },
+        { code: '<Text>Welcome back</Text>' },
+        { code: '<Tooltip>Click here to continue</Tooltip>' },
+
+        // Correctly capitalised resource names
+        { code: '<Button>Delete Bucket</Button>' },
+        { code: '<Text>Node is unreachable</Text>' },
+        { code: '<Tooltip>View Cluster details</Tooltip>' },
+        { code: '<Button>Assign Role</Button>' },
+        { code: '<Text>Edit Policy</Text>' },
+
+        // Empty / whitespace-only children are ignored
+        { code: '<Button>   </Button>' },
+        { code: '<Text>{variable}</Text>' },
+        { code: `<Text>Text with jsx text {"in the middle"} of it</Text>` },
+    ],
+
+    // ─── Invalid ──────────────────────────────────────────────────────────────
+    invalid: [
+        // ── Sentence case violations ──────────────────────────────────────────
+
+        {
+            code: '<Button>save</Button>',
+            errors: [
+                {
+                    message: 'Text in <Button> should start with a capital letter (sentence case).',
+                },
+            ],
+            output: '<Button> Save </Button>',
+        },
+        {
+            code: '<Text>delete item</Text>',
+            errors: [
+                {
+                    message: 'Text in <Text> should start with a capital letter (sentence case).',
+                },
+            ],
+            output: '<Text> Delete item </Text>',
+        },
+        {
+            code: '<Tooltip>click here to continue</Tooltip>',
+            errors: [
+                {
+                    message:
+                        'Text in <Tooltip> should start with a capital letter (sentence case).',
+                },
+            ],
+            output: '<Tooltip> Click here to continue </Tooltip>',
+        },
+
+        // ── Resource name violations ───────────────────────────────────────────
+
+        {
+            code: '<Button>Delete bucket</Button>',
+            errors: [
+                {
+                    message: 'Resource name "Bucket" in <Button> must be capitalized.',
+                },
+            ],
+            output: '<Button>Delete Bucket</Button>',
+        },
+        {
+            code: '<Text>node is unreachable</Text>',
+            errors: [
+                // sentence case violation reported first
+                {
+                    message: 'Text in <Text> should start with a capital letter (sentence case).',
+                },
+                // resource name violation reported second
+                {
+                    message: 'Resource name "Node" in <Text> must be capitalized.',
+                },
+            ],
+            // ESLint applies only the first fix in a single pass; the sentence-case
+            // fixer fires first and capitalises the leading "n" → "Node" is then correct,
+            // but we verify here that the sentence-case fix alone is consistent.
+            output: '<Text> Node is unreachable </Text>',
+        },
+        {
+            code: '<Button>Edit policy</Button>',
+            errors: [
+                {
+                    message: 'Resource name "Policy" in <Button> must be capitalized.',
+                },
+            ],
+            output: '<Button>Edit Policy</Button>',
+        },
+        {
+            code: '<Tooltip>View cluster details</Tooltip>',
+            errors: [
+                {
+                    message: 'Resource name "Cluster" in <Tooltip> must be capitalized.',
+                },
+            ],
+            output: '<Tooltip>View Cluster details</Tooltip>',
+        },
+        {
+            // checkResourceNames returns on the first match found in RESOURCE_NAMES order.
+            // RESOURCE_NAMES = [..., 'User' (index 7), ..., 'Role' (index 9), ...]
+            // → only "User" is reported; "Role" is shadowed by the early return.
+            code: '<Text>assign role to user</Text>',
+            errors: [
+                {
+                    message: 'Text in <Text> should start with a capital letter (sentence case).',
+                },
+                {
+                    message: 'Resource name "User" in <Text> must be capitalized.',
+                },
+            ],
+            // sentence-case fixer fires first; only one fix is applied per pass
+            output: '<Text> Assign role to user </Text>',
+        },
+
+        // ── All targeted components are checked ───────────────────────────────
+
+        {
+            code: '<Text>welcome</Text>',
+            errors: [
+                {
+                    message: 'Text in <Text> should start with a capital letter (sentence case).',
+                },
+            ],
+            output: '<Text> Welcome </Text>',
+        },
+        {
+            code: '<Tooltip>hover for more info</Tooltip>',
+            errors: [
+                {
+                    message:
+                        'Text in <Tooltip> should start with a capital letter (sentence case).',
+                },
+            ],
+            output: '<Tooltip> Hover for more info </Tooltip>',
+        },
+    ],
+});
+
+// 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('technical-sentence-case', () => {
+    it('passes all RuleTester cases', () => {
+        // Execution of tester.run() above already validated everything.
+        expect(true).toBe(true);
+    });
+});

package/stories/drawer.stories.tsx

@@ -0,0 +1,135 @@
+import { useState } from 'react';
+import { Button } from '../src/lib/components/buttonv2/Buttonv2.component';
+import { Drawer } from '../src/lib/components/drawer/Drawer.component';
+import { Wrapper } from './common';
+
+export default {
+  title: 'Components/Feedback/Drawer',
+  component: Drawer,
+  decorators: [
+    (story) => <Wrapper style={{ minHeight: '30vh' }}>{story()}</Wrapper>,
+  ],
+  argTypes: {
+    position: {
+      control: 'select',
+      options: ['left', 'right', 'top', 'bottom'],
+    },
+    size: { control: 'text' },
+    overlay: { control: 'boolean' },
+    showCloseButton: { control: 'boolean' },
+  },
+};
+
+export const Default = {
+  render: (args) => {
+    const [isOpen, setIsOpen] = useState(false);
+    return (
+      <>
+        <Button onClick={() => setIsOpen(true)} label="Open Drawer" />
+        <Drawer {...args} isOpen={isOpen} close={() => setIsOpen(false)} />
+      </>
+    );
+  },
+  args: {
+    title: 'Drawer Title',
+    position: 'left',
+    size: '400px',
+    overlay: false,
+    children: (
+      <div>
+        <p>This is the drawer content.</p>
+        <p>The app remains visible and interactive behind the drawer.</p>
+      </div>
+    ),
+  },
+};
+
+export const WithFooter = {
+  render: (args) => {
+    const [isOpen, setIsOpen] = useState(false);
+    return (
+      <>
+        <Button onClick={() => setIsOpen(true)} label="Open Drawer" />
+        <Drawer
+          {...args}
+          isOpen={isOpen}
+          close={() => setIsOpen(false)}
+          footer={
+            <>
+              <Button
+                label="Cancel"
+                variant="outline"
+                onClick={() => setIsOpen(false)}
+                style={{ minWidth: '6rem' }}
+              />
+              <Button
+                label="Save"
+                variant="primary"
+                onClick={() => setIsOpen(false)}
+                style={{ minWidth: '6rem' }}
+              />
+            </>
+          }
+        />
+      </>
+    );
+  },
+  args: {
+    title: 'Settings',
+    position: 'left',
+    size: '400px',
+    overlay: false,
+    children: (
+      <div>
+        <p>Drawer with footer actions.</p>
+        <p>Use footer for save, cancel, or reset buttons.</p>
+      </div>
+    ),
+  },
+};
+
+export const WithOverlay = {
+  render: (args) => {
+    const [isOpen, setIsOpen] = useState(false);
+    return (
+      <>
+        <Button
+          onClick={() => setIsOpen(true)}
+          label="Open Drawer with Overlay"
+        />
+        <Drawer {...args} isOpen={isOpen} close={() => setIsOpen(false)} />
+      </>
+    );
+  },
+  args: {
+    title: 'Overlay Drawer',
+    position: 'left',
+    size: '400px',
+    overlay: true,
+    children: (
+      <div>
+        <p>This drawer has a backdrop overlay.</p>
+        <p>Click the overlay or press Escape to close.</p>
+      </div>
+    ),
+  },
+};
+
+export const RightPosition = {
+  render: (args) => {
+    const [isOpen, setIsOpen] = useState(false);
+    return (
+      <>
+        <Button onClick={() => setIsOpen(true)} label="Open Right Drawer" />
+        <Drawer {...args} isOpen={isOpen} close={() => setIsOpen(false)} />
+      </>
+    );
+  },
+  args: {
+    title: 'Right Drawer',
+    position: 'right',
+    size: '350px',
+    overlay: false,
+    children: <p>Drawer sliding in from the right.</p>,
+  },
+};