@scality/core-ui 0.202.0 → 0.204.0

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;

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;