diff --git a/.claude/skills/adr-review/SKILL.md b/.claude/skills/adr-review/SKILL.md index 86c99d7561..3cf94a270b 100644 --- a/.claude/skills/adr-review/SKILL.md +++ b/.claude/skills/adr-review/SKILL.md @@ -15,7 +15,7 @@ skill can review either — it always evaluates against the connect-widget ADRs. ## Scope: what to review Review **only the code the PR adds or changes** (the diff), not the whole repo. ADR -0002 states that a PR is judged on whether its *new* code adheres to the ADRs; you +0002 states that a PR is judged on whether its _new_ code adheres to the ADRs; you are not auditing pre-existing code except where the PR modifies it. When a PR edits a line that was already non-conforming, note that conforming it would be ideal but is not blocking unless the PR is making that area worse. @@ -80,6 +80,7 @@ check every applicable ADR. Only flag things you can point to in the diff. Prefe being specific and actionable over exhaustive nitpicking. Assign each finding a severity: + - **Blocking** — clearly violates an ADR's decision (would fail review per ADR 0002). - **Should fix** — likely violation or strongly discouraged pattern; confirm intent. - **Consider** — judgment call, style, or a heads-up (e.g. PR getting large). @@ -123,4 +124,4 @@ confidence the review was real. If nothing in the diff is in scope for a given A as "acceptable only if this is an urgent hotfix — file a follow-up ticket." - **Legacy code:** the repo is mid-migration (e.g. `@kyper/*` → MXUI). Editing legacy files doesn't require rewriting them, but new code must conform. -- Keep the review grounded in the *diff* — never invent violations you can't cite. +- Keep the review grounded in the _diff_ — never invent violations you can't cite. diff --git a/.claude/skills/adr-review/reference/adr-checklist.md b/.claude/skills/adr-review/reference/adr-checklist.md index 2ad07b9489..0afbfbaefe 100644 --- a/.claude/skills/adr-review/reference/adr-checklist.md +++ b/.claude/skills/adr-review/reference/adr-checklist.md @@ -35,7 +35,7 @@ Check added/changed `.tsx`/`.jsx`/`.css` code: - **CSS Modules required.** New stylesheets must be `*.module.css` and imported as a module (`import styles from './Foo.module.css'`). Flag new plain `.css`/global CSS files, or Tailwind / other global CSS-framework classes, or styled-components. -- **No `sx` prop for styling.** Flag `sx={...}` on MUI/MXUI components. *Exception:* +- **No `sx` prop for styling.** Flag `sx={...}` on MUI/MXUI components. _Exception:_ `xs` is allowed **only** for breakpoint-specific code (MUI doesn't expose breakpoints as CSS variables). Ordinary styling via `sx`/`xs` → move to a CSS Module. - **Spacing between elements → MUI ``.** Flag margins/padding added @@ -102,7 +102,7 @@ used together in close proximity; move code to `shared/` only once actually shar `shared/` that only one domain uses (premature sharing). Because the current repo is mid-migration, treat structure findings as guidance for -*new* domains/files rather than demanding relocation of existing ones. +_new_ domains/files rather than demanding relocation of existing ones. --- diff --git a/GEMINI.md b/GEMINI.md index c804d3b20d..447b53b34c 100644 --- a/GEMINI.md +++ b/GEMINI.md @@ -23,7 +23,7 @@ The project relies on standard npm scripts for development, building, and testin - **Development Build (Watch Mode):** `npm run dev` - **Production Build:** `npm run build` - **Run Tests:** `npm run test` -- **Watch Tests:** `npm run watch` +- **Watch Tests:** `npm run test:watch` - **Lint Code:** `npm run lint` - **Link locally:** Use `npm link` in the root and then `npm link @mxenabled/connect-widget` in the consuming application to test local changes. diff --git a/package.json b/package.json index f5e2dddeee..a930507e1a 100644 --- a/package.json +++ b/package.json @@ -32,7 +32,7 @@ "prepare": "husky", "test": "vitest run", "test:coverage": "vitest run --coverage", - "watch": "vitest", + "test:watch": "vitest", "i18n": "node scripts/i18n.js", "logBuildDate": "echo 'Last build: '$(date \"+%c\") | tee ./dist/lastBuild.txt", "testAndBuild": "npm run test && npm run build", diff --git a/src/views/disclosure/PoweredByMXText.js b/src/views/disclosure/PoweredByMXText.js deleted file mode 100644 index 834d3eb360..0000000000 --- a/src/views/disclosure/PoweredByMXText.js +++ /dev/null @@ -1,57 +0,0 @@ -import React from 'react' - -import { MXLogo } from '@kyper/icon/MXLogo' -import { Text } from '@mxenabled/mxui' -import { useTokens } from '@kyper/tokenprovider' - -import { __ } from 'src/utilities/Intl' - -const PoweredByMXText = () => { - const tokens = useTokens() - const styles = getStyles(tokens) - - return ( -
- {`${__('Data access by')} MX`} - - { - // --TR: Full string "Data access by MX(Logo)" - __('Data access by') - }{' '} - - -
- ) -} - -const getStyles = (tokens) => { - return { - accessibleAriaLabel: { - position: 'absolute', - color: 'transparent', - overflow: 'hidden', - userSelect: 'none', - msUserSelect: 'none', - MozUserSelect: 'none', - WebkitUserSelect: 'none', - }, - poweredBy: { - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - }, - text: { - color: tokens.TextColor.InputLabel, - marginRight: tokens.Spacing.Tiny, - }, - } -} - -export default PoweredByMXText diff --git a/src/views/disclosure/PoweredByMXText.module.css b/src/views/disclosure/PoweredByMXText.module.css new file mode 100644 index 0000000000..2849d964cc --- /dev/null +++ b/src/views/disclosure/PoweredByMXText.module.css @@ -0,0 +1,13 @@ +.text:global(.MuiTypography-root) { + color: var(--mui-palette-text-secondary); +} + +.accessibleAriaLabel { + position: absolute; + color: transparent; + overflow: hidden; + user-select: none; + -ms-user-select: none; + -moz-user-select: none; + -webkit-user-select: none; +} diff --git a/src/views/disclosure/PoweredByMXText.test.tsx b/src/views/disclosure/PoweredByMXText.test.tsx new file mode 100644 index 0000000000..9ff7ac6574 --- /dev/null +++ b/src/views/disclosure/PoweredByMXText.test.tsx @@ -0,0 +1,15 @@ +import React from 'react' +import { describe, expect, it } from 'vitest' +import { render, screen } from 'src/utilities/testingLibrary' +import PoweredByMXText from 'src/views/disclosure/PoweredByMXText' + +describe('', () => { + it('renders the visible "Data access by" text with an aria hidden, the logo, and the full string for screen readers', () => { + const { container } = render() + + expect(screen.getByText('Data access by')).toHaveAttribute('aria-hidden', 'true') + expect(screen.getByText('Data access by MX')).toBeInTheDocument() + + expect(container.querySelector('svg')).toBeInTheDocument() + }) +}) diff --git a/src/views/disclosure/PoweredByMXText.tsx b/src/views/disclosure/PoweredByMXText.tsx new file mode 100644 index 0000000000..dc32525ed7 --- /dev/null +++ b/src/views/disclosure/PoweredByMXText.tsx @@ -0,0 +1,32 @@ +import React from 'react' +import { MXLogoIcon, Text } from '@mxenabled/mxui' + +import { __ } from 'src/utilities/Intl' +import { Stack, useTheme } from '@mui/material' +import styles from 'src/views/disclosure/PoweredByMXText.module.css' + +const PoweredByMXText = () => { + const theme = useTheme() + + return ( + + + { + // --TR: Full string "Data access by MX(Logo)" + __('Data access by') + }{' '} + + + {`${__('Data access by')} MX`} + + ) +} + +export default PoweredByMXText diff --git a/vite.config.ts b/vite.config.ts index 5bb716b9dd..f5dc929983 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -86,7 +86,7 @@ export default defineConfig({ globals: true, environment: 'jsdom', setupFiles: './src/testSetup.ts', - include: ['**/*-{test,spec}.?(c|m)[jt]s?(x)'], + include: ['**/*-{test,spec}.?(c|m)[jt]s?(x)', '**/*.{test,spec}.?(c|m)[jt]s?(x)'], server: { deps: { inline: ['@mxenabled/mx-icons'],