Skip to content

Commit ac37eda

Browse files
tjcouch-silclaude
andauthored
chore: upgrade shadcn/ui components to preset b6rt8cvlC (React 19, Tailwind 4, new components) (#2207)
* Upgraded to React 19, Tailwind 4, new shadcn, build themes.data.json from index.css, cleaned up index.css, fonts.css, clarified data provider errors, added scripts to prepare for changing shadcn preset * Apply shadcn preset via `npx shadcn apply --preset b6rt8cvlC` to re-add shadcn components from latest version as a new baseline * chore: propagate shadcn preset CSS and package changes to extensions * chore: re-apply project customizations to upgraded shadcn components Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * Adjust platform to upgraded shadcn chore: rebuild platform-bible-react dist and themes after shadcn upgrade Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> docs: add SKIPPED-CUSTOMIZATIONS.md for shadcn upgrade review Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Fixed rtl:tw: to tw:rtl:, fixed a few bugs with the shadcn components, fixed theme color stories not showing all the colors Cleaned up radix imports, added spacing theme variable, fixed radius css variable usage Moved new theme preset to Paratext theme, fixed borders wrongly applying, misc cleanup docs: add design spec for legacy HSL color var backwards compat docs: add per-pass and total timing to legacy color var compat spec docs: add React 19 backwards compatibility design spec Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> feat: add transformLegacyColorVars helper for backwards-compat hsl→var transform Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> feat: apply legacy hsl color var transform to WebView styles and content on load Attempt to make React 19 and Tailwind 4 backwards-compatible with old extensions Clean up, fix core storybook Reverted skipLibCheck to false, applied lots of fixes accordingly Fixed yalc messing up package-lock.json fix: address review findings from /review-paratext - Re-export public types `SelectTriggerProps` and `DropdownMenu*Props` (9 type aliases) that were dropped by the upstream shadcn baseline - Fix `handleDataProviderSubscriptionError` log regression: discriminate three contexts ('retrieve-after-update' | 'retrieve-immediate' | 'callback') with a switch + exhaustiveness check; restores per-path log messages - Remove unused `sheet.tsx` + the just-scaffolded story (YAGNI; arrived as a side effect of the shadcn preset apply, not exposed in index.ts) - Remove stale AI-generated `CUSTOMIZATIONS.md`; update upgrade-shadcn workflow to require regeneration via `/shadcn-customizations` if missing - Add 48 tests for `apply-shadcn-preset.ts` helpers + 6 fixture-based end-to-end pipeline tests; fix latent regex bug in `processLayerBase` (`\s+$` → `\s*$`) that produced `}}` instead of `}\n}` in the common case - Add 6 tests for new `platform-dock-layout-storage.util.ts` exports (`findFirstWebViewDefinitionByType`, `loadLayout`) - Fix pre-existing typo'd Tailwind classes in `tabs-vertical.tsx` (`tw:flex-fit`, `tw:mlk-items-center`, bare `overflow-clip`) - Rename `util.test.ts` → `utils.test.ts` to match implementation filename - Remove unused `yjs` and `scheduler` devDependencies; refresh lockfile - Add storybook variants for badge ghost/link/blueIndicator/mutedIndicator - Rebuild platform-bible-react dist artifacts Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> * feat: add /add-shadcn-component command and supporting script - Extract shared shadcn file-transform helpers into shadcn-transform-utils.ts (used by both apply-shadcn-preset.ts and the new add-shadcn-component.ts) - Add scripts/add-shadcn-component.ts: adds a single shadcn component, applies standard file transforms, runs format and lint-fix, and auto-commits the baseline (matches apply-shadcn-preset.ts pattern). Takes <component> <preset> as args. - Add npm 'add-shadcn-component' script - Fix get-latest-preset - Add fast path to cn() compat shim: when the resolved class string contains no `tw-` prefix (the dominant all-TW4 case), skip the per-token normalize/restore round-trip and call extendTailwindMerge({ prefix: 'tw' }) directly. Brings the all-TW4 case from ~8x slower than baseline to within ~1.5x; TW3-containing strings still take the full slow path so dedup remains correct. --------- Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
1 parent 66b825c commit ac37eda

369 files changed

Lines changed: 27549 additions & 30347 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

.erb/configs/webpack.config.renderer.dev.ts

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,13 @@ const configuration: webpack.Configuration = {
7575
include: /\.module\.s?(c|a)ss$/,
7676
},
7777
{
78-
test: /\.s?css$/,
78+
test: /\.css$/,
79+
resourceQuery: { not: [/raw/] },
80+
use: ['style-loader', 'css-loader'],
81+
exclude: /\.module\.s?(c|a)ss$/,
82+
},
83+
{
84+
test: /\.s(c|a)ss$/,
7985
resourceQuery: { not: [/raw/] },
8086
use: ['style-loader', 'css-loader', 'sass-loader'],
8187
exclude: /\.module\.s?(c|a)ss$/,

.erb/configs/webpack.config.renderer.prod.ts

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,13 @@ const configuration: webpack.Configuration = {
6666
include: /\.module\.s?(c|a)ss$/,
6767
},
6868
{
69-
test: /\.s?(a|c)ss$/,
69+
test: /\.css$/,
70+
resourceQuery: { not: [/raw/] },
71+
use: [MiniCssExtractPlugin.loader, 'css-loader'],
72+
exclude: /\.module\.s?(c|a)ss$/,
73+
},
74+
{
75+
test: /\.s(a|c)ss$/,
7076
resourceQuery: { not: [/raw/] },
7177
use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
7278
exclude: /\.module\.s?(c|a)ss$/,

.erb/scripts/unlink-dev-packages.ts

Lines changed: 45 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,46 @@
1-
import { DEV_REPOS, execInRepo } from './dev-package-utils';
1+
import fs from 'fs';
2+
import path from 'path';
3+
import { DEV_REPOS, REPO_ROOT, execInRepo } from './dev-package-utils';
4+
5+
function fixYalcInLockFile(): void {
6+
const lockFilePath = path.resolve(REPO_ROOT, 'package-lock.json');
7+
const lockContent = fs.readFileSync(lockFilePath, 'utf8');
8+
9+
if (!lockContent.includes('.yalc')) return;
10+
11+
console.log('Detected .yalc entries in package-lock.json, cleaning up...');
12+
13+
// Find all node_modules/* entries whose resolved path points into .yalc
14+
const lock: { packages?: Record<string, { resolved?: string }> } = JSON.parse(lockContent);
15+
const packagesToReinstall: string[] = Object.entries(lock.packages ?? {})
16+
.filter(
17+
([key, value]) => key.startsWith('node_modules/') && value.resolved?.startsWith('.yalc'),
18+
)
19+
.map(([key]) => {
20+
const packageName = key.slice('node_modules/'.length);
21+
22+
// Remove the symlink (or broken directory) from node_modules so npm re-downloads it
23+
const nodeModulesPath = path.resolve(REPO_ROOT, key);
24+
try {
25+
const stat = fs.lstatSync(nodeModulesPath);
26+
if (stat.isSymbolicLink()) {
27+
fs.unlinkSync(nodeModulesPath);
28+
} else {
29+
fs.rmSync(nodeModulesPath, { recursive: true, force: true });
30+
}
31+
console.log(`Removed ${nodeModulesPath}`);
32+
} catch {
33+
// Already gone — nothing to do
34+
}
35+
36+
return packageName;
37+
});
38+
39+
if (packagesToReinstall.length > 0) {
40+
console.log(`Re-installing from registry: ${packagesToReinstall.join(', ')}`);
41+
execInRepo(`npm install ${packagesToReinstall.join(' ')} --ignore-scripts`);
42+
}
43+
}
244

345
function unlinkDevPackages(): void {
446
try {
@@ -9,6 +51,8 @@ function unlinkDevPackages(): void {
951
});
1052
});
1153

54+
fixYalcInLockFile();
55+
1256
console.log('Unlinked dev packages');
1357
} catch (err) {
1458
console.error('Error: Failed to unlink dev packages.');

.eslintrc.ai.js

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ module.exports = {
3636

3737
// === Styling (Tailwind) ===
3838

39-
// No hardcoded colors - use theme tokens (tw-bg-background, tw-text-foreground)
39+
// No hardcoded colors - use theme tokens (tw:bg-background, tw:text-foreground)
4040
// See: Code-Style-Guide.md "Theming Requirements"
4141
'paranext/no-hardcoded-tailwind-colors': 'error',
4242

@@ -65,6 +65,13 @@ module.exports = {
6565
'paranext/registration-cleanup': 'warn',
6666
},
6767
overrides: [
68+
{
69+
// Service files are not WebView source files even if they live in a web-views subfolder
70+
files: ['src/renderer/services/**'],
71+
rules: {
72+
'paranext/webview-file-naming': 'off',
73+
},
74+
},
6875
{
6976
// Extension entry points - strict registration and cleanup
7077
files: ['extensions/src/**/main.ts', 'src/extension-host/**/*.ts'],

.eslintrc.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -192,6 +192,14 @@ module.exports = {
192192
],
193193
},
194194
},
195+
{
196+
// Playwright e2e test fixtures use a `use()` callback that is Playwright's fixture API,
197+
// not a React hook. react-hooks/rules-of-hooks v5 incorrectly flags these calls.
198+
files: ['e2e-tests/**/*.ts', 'e2e-tests/**/*.tsx'],
199+
rules: {
200+
'react-hooks/rules-of-hooks': 'off',
201+
},
202+
},
195203
{
196204
// Vitest test rules and globals (replaces eslint-plugin-jest that was previously bundled in erb)
197205
files: ['*.test.ts', '*.test.tsx', '*.spec.ts', '*.spec.tsx'],

0 commit comments

Comments
 (0)