superdesk-ui-framework 6.1.3 → 6.1.4

package/.github/CODEOWNERS

@@ -1 +1 @@
-/app-typescript/ @eos87 @thecalcc
+/app-typescript/ @eos87

package/.github/workflows/publish-to-npm.yml

@@ -1,64 +1,73 @@
 name: Publish to npm and Create Release
 
 on:
-    push:
-        branches:
-            - 'v3'
-            - 'v4'
-            - 'v5'
-            - 'v6*'
     workflow_dispatch:
         inputs:
-            branch:
-                description: 'Branch to publish from (leave empty to use current branch)'
-                required: false
-                type: string
-                default: ''
+            bump:
+                description: 'Version bump before publishing (none = publish current package.json version)'
+                required: true
+                type: choice
+                default: 'none'
+                options:
+                    - none
+                    - patch
+                    - minor
+                    - major
 
 jobs:
     publish:
         runs-on: ubuntu-latest
         permissions:
             contents: write
+            id-token: write
         steps:
             - uses: actions/checkout@v6
               with:
-                  ref: ${{ github.event.inputs.branch || github.ref }}
                   fetch-depth: 0
             - uses: actions/setup-node@v6
               with:
                   node-version: '22'
             - run: npm ci
-            - run: npm run lint
-            - run: npm run build
-            - uses: JS-DevTools/npm-publish@v4
-              id: publish
-              continue-on-error: true
-              with:
-                  token: ${{ secrets.NPM_TOKEN }}
 
-            - name: Check publish result
-              if: steps.publish.outcome == 'failure'
+            - name: Bump version
+              if: inputs.bump != 'none'
               run: |
-                  echo "::notice::Package was not published. Version may already exist on npm."
-                  exit 0
+                  git config user.name "github-actions[bot]"
+                  git config user.email "github-actions[bot]@users.noreply.github.com"
+                  npm version ${{ inputs.bump }} -m "Bump version to %s and release"
 
-            - name: Get package version
-              if: steps.publish.outputs.type != 'none' && steps.publish.outcome == 'success'
+            - name: Resolve target version
               id: package-version
               run: echo "version=$(node -p "require('./package.json').version")" >> $GITHUB_OUTPUT
 
-            - name: Create Git tag
-              if: steps.publish.outputs.type != 'none' && steps.publish.outcome == 'success'
+            - name: Ensure version is not already published
               run: |
-                  git config user.name "github-actions[bot]"
-                  git config user.email "github-actions[bot]@users.noreply.github.com"
-                  git tag -a "v${{ steps.package-version.outputs.version }}" -m "Release v${{ steps.package-version.outputs.version }}"
+                  VERSION="${{ steps.package-version.outputs.version }}"
+                  if [ -n "$(npm view superdesk-ui-framework@"$VERSION" version 2>/dev/null)" ]; then
+                      echo "::error::superdesk-ui-framework@$VERSION is already published to npm. Choose a version bump (patch/minor/major) and re-run."
+                      exit 1
+                  fi
+                  echo "::notice::superdesk-ui-framework@$VERSION is available; proceeding to publish."
+
+            - run: npm run lint
+            - run: npm run build
+
+            - name: Upgrade npm for OIDC trusted publishing
+              run: npm install -g npm@11
+
+            - uses: JS-DevTools/npm-publish@v4
+              id: publish
+              with:
+                  provenance: true
+
+            - name: Push version bump and tag
+              if: inputs.bump != 'none'
+              run: |
+                  git push origin "HEAD:${{ github.ref_name }}"
                   git push origin "v${{ steps.package-version.outputs.version }}"
 
             - name: Create GitHub Release
-              if: steps.publish.outputs.type != 'none' && steps.publish.outcome == 'success'
-              uses: softprops/action-gh-release@v1
+              uses: softprops/action-gh-release@v3
               with:
                   tag_name: v${{ steps.package-version.outputs.version }}
                   name: v${{ steps.package-version.outputs.version }}

package/.prettierignore

@@ -2,4 +2,5 @@
 **/*.scss
 app
 package.json
-package-lock.json
+package-lock.json
+CLAUDE.md

package/CLAUDE.md

@@ -0,0 +1,85 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Commands
+
+```bash
+npm start              # Dev server at localhost:9100
+npm run storybook      # Storybook dev at localhost:6006
+npm run unit-test      # Run Mocha tests
+npm run lint           # Full lint suite (tsc + prettier + eslint + tslint + unit-test)
+npm run lint-fix       # Auto-fix TSLint issues
+npm run format-code    # Format with Prettier (--write)
+npm run build          # Full production build (tsc → webpack → storybook → copy)
+npm run watch          # Watch mode: webpack + tsc
+```
+
+There is no command to run a single test file directly. Tests are all run via `npm run unit-test`.
+
+## Architecture
+
+This is a React component library (with legacy Angular 1.x support) for the Superdesk journalism platform.
+
+### Key directories
+
+- `app-typescript/components/` — ~90 React/TypeScript components (primary deliverable). Each component can have a `.stories.tsx` alongside it.
+- `app-typescript/index.ts` — All React components **must** be exported here for type definitions to be generated.
+- `app/scripts/` — Angular 1.x modules and directives (legacy, do not add new components here).
+- `app/styles/` — SCSS stylesheets (design tokens, component styles).
+- `.storybook/` — Storybook 10 config (`main.ts`, `preview.ts`).
+- `tasks/` — Webpack configurations (dev/prod).
+- `dist/` — Build output (do not edit).
+
+### Build outputs
+
+- `dist/superdesk-ui.bundle.js` — UMD bundle (main entry point for consumers)
+- `dist/superdesk-ui.bundle.css` — Extracted CSS
+- `react/index.d.ts` — TypeScript declarations (generated from `app-typescript/index.ts`)
+- `dist/storybook/` — Static Storybook (copied from `storybook-static/` after build)
+
+### Testing
+
+Tests use Mocha + Enzyme (adapter for React 16) + jsdom. Test files are co-located with components and match `app-typescript/**/*.spec.*`. Configuration is in `.mocharc.json`.
+
+## React Component Conventions
+
+- **TypeScript strict mode** is enforced (`noImplicitAny`, `noUnusedLocals`, etc.).
+- Export every new component from `app-typescript/index.ts`.
+- TSLint is used for `app-typescript/`; ESLint for `app/`.
+
+## Storybook Stories
+
+Story files are named `ComponentName.stories.tsx` and placed alongside the component in `app-typescript/components/`.
+
+**Critical**: This project uses React 16, which requires explicit React import in every story file that uses JSX:
+
+```typescript
+import React from 'react';
+import type {Meta, StoryObj} from '@storybook/react';
+```
+
+Story format (CSF 3.0):
+
+```typescript
+const meta = {
+    title: 'Components/YourComponent',
+    component: YourComponent,
+    tags: ['autodocs'],
+} satisfies Meta<typeof YourComponent>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+    args: { /* default props */ },
+};
+```
+
+Every component should have a `Playground` story. See `app-typescript/components/Button.stories.tsx` as the reference implementation.
+
+Storybook uses the **Babel compiler** (not SWC) for CI compatibility — do not switch to SWC.
+
+## Storybook Dev Integration
+
+In dev mode (`npm start`), Storybook is served from `storybook-static/` at `/storybook/index.html` via webpack-dev-server. Run `npm run build-storybook` first if the storybook link is broken in dev mode.

package/app/styles/_avatar.scss

@@ -412,7 +412,6 @@
     background-color: var(--color-surface-faded);
     border-radius: var(--b-radius--full);
 
-
     .sd-avatar--inline__text {
         color: var(--color-text);
         font-size: var(--name-font-size);
@@ -421,7 +420,6 @@
         overflow: hidden;
         text-overflow: ellipsis;
         // max-width: 200px;
-
     }
     &:has(.sd-avatar--x-small) {
         gap: var(--gap-0-5);
@@ -435,7 +433,6 @@
         .sd-avatar--inline__text {
             --name-font-size: var(--text-size-x-small);
             padding-inline-end: 1em;
-
         }
     }
     &:has(.sd-avatar--medium) {

package/app/styles/_design-tokens.scss

@@ -1,6 +1,5 @@
-@use 'design-tokens/primitives';
-@use 'design-tokens/brand-colors';
-@use 'design-tokens/semantic-colors';
+@use 'design-tokens/primitives/primitives';
+@use 'design-tokens/semantic/semantics';
+@use 'design-tokens/components/components';
 @use 'design-tokens/design-tokens-general';
-@use 'design-tokens/new-colors';
-@use 'design-tokens/component-tokens';
+@use 'deprecate/new-colors';

package/app/styles/_toggle-button.scss

@@ -2,8 +2,8 @@
     padding-inline: var(--space--1-5);
     @include text-overflow;
     line-height: 1;
-    border: 1px solid $checkButtonBorderColor;
-    border-radius: $checkButtonBorderRadius;
+    border: 1px solid var(--checkbox-button-color-border-default);
+    border-radius: var(--checkbox-button-radius);
     transition: all 0.2s ease-in-out;
     display: inline-flex;
     align-items: center;
@@ -24,7 +24,7 @@
     }
 
     &:hover {
-        border-color: $checkButtonBorderColorHover;
+        border-color: var(--checkbox-button-color-border-hover);
         box-shadow: 0 1px 4px 0 hsla(0, 0%, 0%, 0.16);
         color: var(--color-text);
     }

package/app/styles/components/_list-item.scss

@@ -233,6 +233,7 @@ $sd-ListItem-column-border: var(--sd-colour-line--x-light);
         display: flex;
         flex-direction: column;
         justify-content: center;
+        align-items: center;
         z-index: 2;
         opacity: 0;
         transition: opacity 0.2s linear;

package/app/styles/components/_sd-photo-preview.scss

@@ -439,12 +439,21 @@ $photo-nav-transition: all 0.2s ease-out;
 }
 
 .upload__info {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
     margin: 0 auto;
     max-width: 40rem;
     position: relative;
     inset-block-start: 50%;
     margin-block-start: -10.6rem;
     z-index: 1;
+    .upload__info-button {
+        display: flex;
+        margin: 0 auto;
+        text-align: center;
+        opacity: 0.75;
+    }
 }
 
 .upload__info-icon {
@@ -491,13 +500,6 @@ $photo-nav-transition: all 0.2s ease-out;
         margin-inline-start: -7.8rem;
     }
 }
-.upload__info-button {
-    display: block;
-    margin: 0 auto;
-    text-align: center;
-    opacity: 0.75;
-}
-
 
 .sd-photo-preview__thumb-strip {
     &:hover {

package/app/styles/design-tokens/_design-tokens-general.scss

@@ -3,6 +3,21 @@
 :root {
     // GENERAL
     --base-increment: 0.8rem; // 8px
+
+    // SPACE
+    // NEW NAMES
+    --space-0: 0; // 0px
+    --space-0-5: calc(0.5 * var(--base-increment)); // 4px
+    --space-1: calc(1 * var(--base-increment)); // 8px
+    --space-1-5: calc(1.5 * var(--base-increment)); // 12px
+    --space-2: calc(2 * var(--base-increment)); // 16px
+    --space-3: calc(3 * var(--base-increment)); // 24px
+    --space-4: calc(4 * var(--base-increment)); // 32px
+    --space-5: calc(5 * var(--base-increment)); // 40px;
+    --space-6: calc(6 * var(--base-increment)); // 48px;
+    --space-7: calc(7 * var(--base-increment)); // 56px;
+    --space-8: calc(8 * var(--base-increment)); // 64px;
+    // BACKUP FOR OLD NAMES (keep for backwards compatibility)
     --space--0: 0; // 0px
     --space--0-5: calc(0.5 * var(--base-increment)); // 4px
     --space--1: calc(1 * var(--base-increment)); // 8px
@@ -15,26 +30,36 @@
     --space--7: calc(7 * var(--base-increment)); // 56px;
     --space--8: calc(8 * var(--base-increment)); // 64px;
 
-    --gap--none: 0; // 0px
+    // GAP
+    // NEW NAMES
     --gap-0: 0;
-    --gap--x-small: calc(0.5 * var(--base-increment)); // 4px
     --gap-0-5: calc(0.5 * var(--base-increment)); // 4px
-    --gap--small: calc(1 * var(--base-increment)); // 8px
     --gap-1: calc(1 * var(--base-increment)); // 8px
-    --gap--medium-small: calc(1.5 * var(--base-increment)); // 12px
     --gap-1-5: calc(1.5 * var(--base-increment)); // 12px
-    --gap--medium: calc(2 * var(--base-increment)); // 16px
     --gap-2: calc(2 * var(--base-increment)); // 16px
+    --gap-3: calc(3 * var(--base-increment)); // 24px
+    --gap-4: calc(4 * var(--base-increment)); // 32px
+    --gap-5: calc(5 * var(--base-increment)); // 40px;
+    // BACKUP FOR OLD NAMES (keep for backwards compatibility)
+    --gap--none: 0; // 0px
+    --gap--x-small: calc(0.5 * var(--base-increment)); // 4px
+    --gap--small: calc(1 * var(--base-increment)); // 8px
+    --gap--medium-small: calc(1.5 * var(--base-increment)); // 12px
+    --gap--medium: calc(2 * var(--base-increment)); // 16px
     --gap--large: calc(3 * var(--base-increment)); // 24px;
-    --gap-3: calc(3 * var(--base-increment)); // 24px;
     --gap--x-large: calc(4 * var(--base-increment)); // 32px;
-    --gap-4: calc(4 * var(--base-increment)); // 32px;
     --gap--xx-large: calc(5 * var(--base-increment)); // 40px;
-    --gap-5: calc(5 * var(--base-increment)); // 40px;
-
     --gap--auto: auto;
 
     // BORDER RADIUS
+    // NEW NAMES
+    --radius-xs: 2px;
+    --radius-sm: 3px;
+    --radius-md: 4px;
+    --radius-lg: 6px;
+    --radius-xl: 8px;
+    --radius-full: 9999px;
+    // BACKUP FOR OLD NAMES (keep for backwards compatibility)
     --b-radius--x-small: 2px;
     --b-radius--small: 3px;
     --b-radius--medium: 4px;
@@ -61,6 +86,16 @@
     --width__modal--x-large: 80vw;
 
     // TEXT SIZE
+    // NEW NAMES
+    --text-size-base: 1rem;
+    --text-size-xxs: calc(var(--text-size-base) * 1); // 10px;
+    --text-size-xs: calc(var(--text-size-base) * 1.2); // 12px;
+    --text-size-sm: calc(var(--text-size-base) * 1.4); // 14px;
+    --text-size-md: calc(var(--text-size-base) * 1.6); // 16px;
+    --text-size-lg: calc(var(--text-size-base) * 2); // 20px;
+    --text-size-xl: calc(var(--text-size-base) * 2.4); // 24px;
+    --text-size-xxl: calc(var(--text-size-base) * 3.2); // 32px;
+    // BACKUP FOR OLD NAMES (keep for backwards compatibility)    
     --text-size--base: 1rem;
     --text-size-xx-small: calc(var(--text-size--base) * 1); // 10px;
     --text-size-x-small: calc(var(--text-size--base) * 1.2); // 12px;
@@ -92,9 +127,12 @@
 
     // FORM ELEMENTS
     // Size
-    --form-element-height-default: var(--space--4);
-    --form-element-height-small: var(--space--3);
-    --form-element-height-large: var(--space--5);
+    --form-element-height-sm: var(--space--3);
+    --form-element-height-md: var(--space--4);
+    --form-element-height-lg: var(--space--5);
+    
+    --form-element-height-medium: var(--space--4);
+    --form-element-height-default: var(--form-element-height-medium);
 
     // TRANSITIONS
     --transition__menu-item: background-color ease 0.1s

package/app/styles/design-tokens/components/_checkbox-button.scss

@@ -0,0 +1,14 @@
+:root,
+[data-theme="dark-ui"] {
+    --checkbox-button-color-text-default: var(--color-text-default);
+    --checkbox-button-color-text-checked: var(--color-text-ondark);
+    --checkbox-button-color-border-default: var(--color-line-medium);
+    --checkbox-button-color-border-hover: var(--color-line-strong);
+    --checkbox-button-color-border-checked: lch(0% 0 0 / 0.2);
+    --checkbox-button-color-bg-default: transparent;
+    --checkbox-button-color-bg-hover: transparent;
+    --checkbox-button-color-bg-checked: var(--sd-colour-interactive--active);
+    --checkbox-button-radius: var(--radius-sm);
+    --checkbox-button-height: var(--form-element-height-default);
+    --checkbox-button-color-shadow-focus: var(--sd-colour-interactive-translucent-25);
+}

package/app/styles/design-tokens/components/_checkbox.scss

@@ -0,0 +1,13 @@
+:root,
+[data-theme="dark-ui"] {
+    --checkbox-radius: var(--radius-xs);
+    --checkbox-color-border-default: var(--color-line-medium);
+    --checkbox-color-border-hover: var(--color-line-strong);
+    --checkbox-color-border-checked: var(--sd-colour-interactive--active);
+    --checkbox-color-bg-default: var(--color-surface-muted);
+    --checkbox-color-bg-hover: var(--color-surface-muted);
+    --checkbox-color-bg-checked: var(--sd-colour-interactive--active);
+    --checkbox-color-text-default: var(--color-text-default);
+    --checkbox-color-text-checked: var(--sd-colour-interactive--text);
+    --checkbox-color-shadow-focus: var(--sd-colour-interactive-translucent-25);
+}

package/app/styles/design-tokens/components/_components.scss

@@ -0,0 +1,3 @@
+@use 'drag-handle';
+@use 'checkbox';
+@use 'checkbox-button';

package/app/styles/design-tokens/primitives/_primitives.scss

@@ -0,0 +1,2 @@
+@use 'colors';
+@use 'brand-colors';  

package/app/styles/design-tokens/semantic/_semantics.scss

@@ -0,0 +1 @@
+@use 'semantic-colors';