feat: add Storybook manager config and improve component previews (#3)

This release introduces improvements to Storybook setup and
accessibility fixes.

fix(DualScrollSync): add title attribute for better accessibility
fix(DualScrollSync): refine nav item styles and active indicator
perf(storybook): update stories with new mock data (internal only)
ci: add workflow for npm publishing
chore: update release-please config
chore: rename changelog-types to changelog-sections

Author: dorixdev

.github/workflows/release-please.yml

@@ -0,0 +1,15 @@
+name: Release Please
+
+on:
+  push:
+    branches: [main]
+  workflow_dispatch:
+
+jobs:
+  release-please:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: google-github-actions/release-please-action@v4
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          release-type: node

.github/workflows/release.yml

@@ -1,10 +1,11 @@
 name: Release to npm
 
 on:
-  push:
-    tags:
-      - 'v*.*.*'
-  workflow_dispatch:
+  release:
+    types: [published]
+
+permissions:
+  contents: read
 
 jobs:
   publish:
@@ -17,6 +18,8 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
 
       - name: Setup pnpm
         uses: pnpm/action-setup@v4
@@ -26,25 +29,30 @@ jobs:
         with:
           node-version: 20
           registry-url: 'https://registry.npmjs.org'
+          always-auth: true
           cache: 'pnpm'
 
       - name: Install
         run: pnpm install --frozen-lockfile
 
       - name: Test
-        run: pnpm test
+        run: pnpm test --if-present
 
       - name: Build
         run: pnpm run build
 
       - name: Verify tag matches package.json version
         run: |
           PKG_VERSION=$(node -p "require('./package.json').version")
-          TAG_VERSION=${GITHUB_REF#refs/tags/v}
-          echo "package.json: $PKG_VERSION | tag: $TAG_VERSION"
-          [ "$PKG_VERSION" = "$TAG_VERSION" ] || { echo "❌ Tag and package.json version mismatch"; exit 1; }
+          RAW_TAG="${{ github.event.release.tag_name }}"
+          TAG_VERSION="${RAW_TAG#v}"
+          echo "package.json: $PKG_VERSION | tag: $RAW_TAG (-> $TAG_VERSION)"
+          if [ "$PKG_VERSION" != "$TAG_VERSION" ]; then
+            echo "❌ Tag and package.json version mismatch"
+            exit 1
+          fi
 
       - name: Publish to npm
-        run: npm publish --provenance
+        run: npm publish --provenance --access public
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

.release-please-manifest.json

@@ -0,0 +1,3 @@
+{
+	".": "1.1.2"
+}

.storybook/manager.ts

@@ -0,0 +1,16 @@
+import { addons } from 'storybook/manager-api';
+import { create } from 'storybook/theming';
+
+import { version } from '../package.json';
+
+const theme = create({
+	base: 'light',
+	brandTitle: `React Dual Scroll Sync v${version}`,
+	brandUrl: 'https://github.com/dorixdev/react-dual-scroll-sync',
+	colorSecondary: '#222831'
+});
+
+addons.setConfig({
+	theme,
+	panelPosition: 'right'
+});

.storybook/preview.ts

@@ -2,9 +2,8 @@ import type { Preview } from '@storybook/react-vite';
 
 const preview: Preview = {
 	parameters: {
-		chromatic: { pauseAnimationAtEnd: true, delay: 400 },
-		actions: { argTypesRegex: '^on[A-Z].*' },
-		controls: { matchers: { color: /(background|color)$/i, date: /Date$/i } }
+		layout: 'centered',
+		viewport: { disable: true }
 	},
 	tags: ['autodocs']
 };

lib/components/DualScrollSync/DualScrollSync.module.scss

@@ -32,7 +32,6 @@
 
 	width: 100%;
 	height: calc(100% / var(--menu-nav-visible-count));
-	min-height: 56px;
 	padding: var(--dual-scroll-sync-space-m, #{$space-m}) var(--dual-scroll-sync-space-s, #{$space-s});
 	border: none;
 	border-bottom: 1px solid var(--dual-scroll-sync-border-color, #{$border-color});
@@ -63,12 +62,8 @@
 }
 
 .scrollSyncNavItemLabel {
-	display: flex;
-	align-items: center;
-
-	height: 100%;
+	margin: auto 0;
 	padding: 0 var(--dual-scroll-sync-space-m, #{$space-m});
-
 	font-size: smaller;
 }
 
@@ -78,13 +73,24 @@
 }
 
 .scrollSyncNavItemActive {
+	position: relative;
 	background-color: var(--dual-scroll-sync-background-color, #{$highlight-background-color});
 
 	span {
-		border-left: 3px solid
-			var(--dual-scroll-sync-highlight-foreground-color, #{$highlight-foreground-color});
 		font-weight: bold;
 		color: var(--dual-scroll-sync-highlight-foreground-color, #{$highlight-foreground-color});
+
+		&::before {
+			content: '';
+
+			position: absolute;
+			top: 0;
+			left: 0;
+
+			height: 100%;
+			border-left: 4px solid
+				var(--dual-scroll-sync-highlight-foreground-color, #{$highlight-foreground-color});
+		}
 	}
 }
 

lib/components/DualScrollSync/DualScrollSync.tsx

@@ -118,7 +118,9 @@ DualScrollSync.ContentSection = forwardRef<HTMLElement, DualScrollSyncContentSec
 				id={contentSectionId}
 				ref={ref}
 			>
-				<span className={styles.scrollSyncContentSectionLabel}>{label}</span>
+				<span className={styles.scrollSyncContentSectionLabel} title={label}>
+					{label}
+				</span>
 				{children}
 			</article>
 		);