Skip to content

Commit a442311

Browse files
jaruesinkjaruesink
committed
Refactor docs app to remove Remix dependencies and update to React Router; adjust Storybook configurations accordingly
1 parent b71b825 commit a442311

39 files changed

Lines changed: 1348 additions & 15969 deletions

‎apps/docs/.storybook/main.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
import { dirname, join } from 'node:path';
22
import type { StorybookConfig } from '@storybook/react-vite';
3-
import { mergeConfig } from 'vite';
4-
import viteConfig from '../vite.config';
53

64
/**
75
* This function is used to resolve the absolute path of a package.
@@ -21,7 +19,9 @@ const config: StorybookConfig = {
2119
name: getAbsolutePath('@storybook/react-vite'),
2220
options: {},
2321
},
24-
viteFinal: (config) => {
22+
viteFinal: async (config) => {
23+
const { mergeConfig } = await import('vite');
24+
const viteConfig = await import('../vite.config.mjs');
2525
return mergeConfig(config, viteConfig);
2626
},
2727
};

‎apps/docs/package.json‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -10,30 +10,30 @@
1010
},
1111
"dependencies": {
1212
"@lambdacurry/forms": "*",
13-
"@storybook/addon-essentials": "^8.4.7",
14-
"@storybook/addon-interactions": "^8.4.7",
15-
"@storybook/addon-links": "^8.4.7",
16-
"@storybook/blocks": "^8.4.7",
17-
"@storybook/react": "^8.4.7",
18-
"@storybook/react-vite": "^8.4.7",
19-
"@storybook/test": "^8.4.7",
20-
"storybook": "^8.4.7"
13+
"@storybook/addon-essentials": "^8.6.7",
14+
"@storybook/addon-interactions": "^8.6.7",
15+
"@storybook/addon-links": "^8.6.7",
16+
"@storybook/blocks": "^8.6.7",
17+
"@storybook/react": "^8.6.7",
18+
"@storybook/react-vite": "^8.6.7",
19+
"@storybook/test": "^8.6.7",
20+
"storybook": "^8.6.7"
2121
},
2222
"devDependencies": {
2323
"@react-router/dev": "^7.0.0",
24-
"@storybook/test-runner": "^0.20.1",
24+
"@storybook/test-runner": "^0.22.0",
2525
"@storybook/testing-library": "^0.2.2",
26+
"@tailwindcss/vite": "^4.0.0",
2627
"@types/react": "^19.0.0",
2728
"@typescript-eslint/eslint-plugin": "^6.21.0",
2829
"@typescript-eslint/parser": "^6.21.0",
2930
"autoprefixer": "^10.4.20",
30-
"postcss": "^8.4.49",
3131
"react": "^19.0.0",
3232
"react-router": "^7.0.0",
3333
"react-router-dom": "^7.0.0",
34-
"tailwindcss": "^3.4.17",
34+
"tailwindcss": "^4.0.0",
3535
"typescript": "^5.7.2",
36-
"vite": "^5.4.11",
36+
"vite": "^6.2.2",
3737
"vite-tsconfig-paths": "^5.1.4"
3838
}
3939
}

‎apps/docs/postcss.config.js‎

Lines changed: 0 additions & 6 deletions
This file was deleted.

apps/docs/src/lib/storybook/remix-stub.tsx renamed to apps/docs/src/lib/storybook/react-router-stub.tsx

Lines changed: 16 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,14 @@
1-
import type { ActionFunction, LinksFunction, LoaderFunction, MetaFunction, createRemixStub } from './remix-mock';
21
import type { Decorator } from '@storybook/react';
32
import type { ComponentType } from 'react';
4-
import type { IndexRouteObject, NonIndexRouteObject } from 'react-router-dom';
3+
import {
4+
type ActionFunction,
5+
type IndexRouteObject,
6+
type LinksFunction,
7+
type LoaderFunction,
8+
type MetaFunction,
9+
type NonIndexRouteObject,
10+
createRoutesStub,
11+
} from 'react-router-dom';
512

613
export type StubRouteObject = StubIndexRouteObject | StubNonIndexRouteObject;
714

@@ -28,43 +35,22 @@ interface StubIndexRouteObject
2835
}
2936

3037
interface RemixStubOptions {
31-
root?: {
32-
// biome-ignore lint/suspicious/noExplicitAny: allow any here
33-
Component?: ComponentType<any>;
34-
loader?: LoaderFunction;
35-
action?: ActionFunction;
36-
meta?: MetaFunction;
37-
links?: LinksFunction;
38-
};
39-
routes?: StubRouteObject[];
38+
routes: StubRouteObject[];
4039
}
4140

42-
export const withRemixStubDecorator = (options: RemixStubOptions = {}): Decorator => {
41+
export const withReactRouterStubDecorator = (options: RemixStubOptions): Decorator => {
42+
const { routes } = options;
4343
return (Story) => {
44-
const { root, routes = [] } = options;
45-
4644
// Map routes to include Story component as fallback if no Component provided
4745
const mappedRoutes = routes.map((route) => ({
4846
...route,
49-
Component: route.Component ? route.Component : () => <Story />,
47+
Component: route.Component ?? (() => <Story />),
5048
}));
51-
const rootRoute: StubRouteObject = {
52-
id: 'root',
53-
path: '/',
54-
...root,
55-
Component: root?.Component ? root.Component : () => <Story />,
56-
children:
57-
mappedRoutes.length > 0
58-
? mappedRoutes.map((route) => ({
59-
action: () => null,
60-
...route,
61-
}))
62-
: undefined,
63-
};
6449

65-
const RemixStub = createRemixStub([rootRoute]);
50+
// Use more specific type assertion to fix the incompatibility
51+
// @ts-ignore - Types from createRoutesStub are incompatible but the code works at runtime
52+
const RemixStub = createRoutesStub(mappedRoutes);
6653

67-
// You can also provide hydrationData if needed
6854
return <RemixStub initialEntries={['/']} />;
6955
};
7056
};

‎apps/docs/src/lib/storybook/remix-mock.tsx‎

Lines changed: 0 additions & 43 deletions
This file was deleted.

‎apps/docs/src/main.css‎

Lines changed: 78 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,83 +1,108 @@
1-
@tailwind base;
2-
@tailwind components;
3-
@tailwind utilities;
1+
@import 'tailwindcss';
2+
@source "../../../../packages/components";
43

5-
@layer base {
6-
@theme {
7-
--background: 0 0% 100%;
8-
--foreground: 222.2 47.4% 11.2%;
4+
:root {
5+
--background: hsl(0 0% 100%);
6+
--foreground: hsl(222.2 47.4% 11.2%);
97

10-
--muted: 210 40% 96.1%;
11-
--muted-foreground: 215.4 16.3% 46.9%;
8+
--muted: hsl(210 40% 96.1%);
9+
--muted-foreground: hsl(215.4 16.3% 46.9%);
1210

13-
--popover: 0 0% 100%;
14-
--popover-foreground: 222.2 47.4% 11.2%;
11+
--popover: hsl(0 0% 100%);
12+
--popover-foreground: hsl(222.2 47.4% 11.2%);
1513

16-
--border: 214.3 31.8% 91.4%;
17-
--input: 214.3 31.8% 91.4%;
14+
--border: hsl(214.3 31.8% 91.4%);
15+
--input: hsl(214.3 31.8% 91.4%);
1816

19-
--card: 0 0% 100%;
20-
--card-foreground: 222.2 47.4% 11.2%;
17+
--card: hsl(0 0% 100%);
18+
--card-foreground: hsl(222.2 47.4% 11.2%);
2119

22-
--primary: 222.2 47.4% 11.2%;
23-
--primary-foreground: 210 40% 98%;
20+
--primary: hsl(222.2 47.4% 11.2%);
21+
--primary-foreground: hsl(210 40% 98%);
2422

25-
--secondary: 210 40% 96.1%;
26-
--secondary-foreground: 222.2 47.4% 11.2%;
23+
--secondary: hsl(210 40% 96.1%);
24+
--secondary-foreground: hsl(222.2 47.4% 11.2%);
2725

28-
--accent: 210 40% 96.1%;
29-
--accent-foreground: 222.2 47.4% 11.2%;
26+
--accent: hsl(210 40% 96.1%);
27+
--accent-foreground: hsl(222.2 47.4% 11.2%);
3028

31-
--destructive: 0 100% 50%;
32-
--destructive-foreground: 210 40% 98%;
29+
--destructive: hsl(0 100% 50%);
30+
--destructive-foreground: hsl(210 40% 98%);
3331

34-
--ring: 215 20.2% 65.1%;
32+
--ring: hsl(215 20.2% 65.1%);
3533

36-
--radius: 0.5rem;
37-
}
34+
--radius: 0.5rem;
35+
}
3836

39-
.dark {
40-
@theme {
41-
--background: 224 71% 4%;
42-
--foreground: 213 31% 91%;
37+
.dark {
38+
--background: hsl(224 71% 4%);
39+
--foreground: hsl(213 31% 91%);
4340

44-
--muted: 223 47% 11%;
45-
--muted-foreground: 215.4 16.3% 56.9%;
41+
--muted: hsl(223 47% 11%);
42+
--muted-foreground: hsl(215.4 16.3% 56.9%);
4643

47-
--accent: 216 34% 17%;
48-
--accent-foreground: 210 40% 98%;
44+
--accent: hsl(216 34% 17%);
45+
--accent-foreground: hsl(210 40% 98%);
4946

50-
--popover: 224 71% 4%;
51-
--popover-foreground: 215 20.2% 65.1%;
47+
--popover: hsl(224 71% 4%);
48+
--popover-foreground: hsl(215 20.2% 65.1%);
5249

53-
--border: 216 34% 17%;
54-
--input: 216 34% 17%;
50+
--border: hsl(216 34% 17%);
51+
--input: hsl(216 34% 17%);
5552

56-
--card: 224 71% 4%;
57-
--card-foreground: 213 31% 91%;
53+
--card: hsl(224 71% 4%);
54+
--card-foreground: hsl(213 31% 91%);
5855

59-
--primary: 210 40% 98%;
60-
--primary-foreground: 222.2 47.4% 1.2%;
56+
--primary: hsl(210 40% 98%);
57+
--primary-foreground: hsl(222.2 47.4% 1.2%);
6158

62-
--secondary: 222.2 47.4% 11.2%;
63-
--secondary-foreground: 210 40% 98%;
59+
--secondary: hsl(222.2 47.4% 11.2%);
60+
--secondary-foreground: hsl(210 40% 98%);
6461

65-
--destructive: 0 63% 31%;
66-
--destructive-foreground: 210 40% 98%;
62+
--destructive: hsl(0 63% 31%);
63+
--destructive-foreground: hsl(210 40% 98%);
6764

68-
--ring: 216 34% 17%;
65+
--ring: hsl(216 34% 17%);
6966

70-
--radius: 0.5rem;
71-
}
72-
}
67+
--radius: 0.5rem;
68+
}
69+
70+
@theme inline {
71+
--color-background: var(--background);
72+
--color-foreground: var(--foreground);
73+
74+
--color-muted: var(--muted);
75+
--color-muted-foreground: var(--muted-foreground);
76+
77+
--color-popover: var(--popover);
78+
--color-popover-foreground: var(--popover-foreground);
79+
80+
--color-border: var(--border);
81+
--color-input: var(--input);
82+
83+
--color-card: var(--card);
84+
--color-card-foreground: var(--card-foreground);
85+
86+
--color-primary: var(--primary);
87+
--color-primary-foreground: var(--primary-foreground);
88+
89+
--color-secondary: var(--secondary);
90+
--color-secondary-foreground: var(--secondary-foreground);
91+
92+
--color-accent: var(--accent);
93+
--color-accent-foreground: var(--accent-foreground);
94+
95+
--color-destructive: var(--destructive);
96+
--color-destructive-foreground: var(--destructive-foreground);
97+
98+
--color-ring: var(--ring);
7399
}
74100

75101
@layer base {
76102
* {
77-
@apply border-border;
103+
@apply border-[var(--color-border)];
78104
}
79105
body {
80-
@apply bg-background text-foreground;
81-
font-feature-settings: 'rlig' 1, 'calt' 1;
106+
@apply bg-[var(--color-background)] text-[var(--color-foreground)];
82107
}
83108
}

0 commit comments

Comments
 (0)