@scality/core-ui 0.202.0 → 0.204.0

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>,
+  },
+};