Skip to content

Commit 507b97f

Browse files
fomalhautbfomalhautb
authored
Migration to Shadcn UI (stack-auth#31)
* fixed theme doesn't work when not signed in * added tailwind * use stack theme instead of stack joy theme for server * added shadcn * added shadcn components * added new project page * improved styling * added footer * added footer * added new project page * added project creation page * made new project page interactive * added project settings on create project endpoint * added async button * fixed small things * data-theme -> data-stack-theme * changed color scheme * changed joy buttons to shadcn buttons * fixed lint * added redirect to create project page
1 parent dba19eb commit 507b97f

File tree

104 files changed

+5259
-617
lines changed

Some content is hidden

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

104 files changed

+5259
-617
lines changed

‎apps/demo/src/app/global.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
--foreground: black;
99
}
1010

11-
[data-theme='dark'] {
11+
[data-stack-theme='dark'] {
1212
--background: black;
1313
--foreground: white;
1414
}

‎apps/demo/src/components/header.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ const StyledHeader = styled.div<{ $colors: ColorPalette }>`
1212
border-bottom: 1px solid ${props => props.$colors.light.neutralColor};
1313
background-color: ${props => props.$colors.light.backgroundColor};
1414
15-
html[data-theme='dark'] & {
15+
html[data-stack-theme='dark'] & {
1616
border-color: ${props => props.$colors.dark.neutralColor};
1717
background-color: ${props => props.$colors.dark.backgroundColor};
1818
}

‎apps/demo/src/components/select.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ const StyledSelect = styled.select<{ $colors: ColorPalette }>`
1919
border: 1px solid ${props => props.$colors.light.neutralColor};
2020
background-color: ${props => props.$colors.light.backgroundColor};
2121
22-
html[data-theme='dark'] & {
22+
html[data-stack-theme='dark'] & {
2323
border-color: ${props => props.$colors.dark.neutralColor};
2424
background-color: ${props => props.$colors.dark.backgroundColor};
2525
}

‎docs/docs/02-customization/02-custom-colors.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ const theme = {
4545

4646
## Color Mode
4747

48-
Stack components support light and dark mode out of the box. You can switch between light and dark mode using [next-themes](https://github.com/pacocoursey/next-themes) (or any other library that changes the `data-theme` attribute of the `html` element).
48+
Stack components support light and dark mode out of the box. You can switch between light and dark mode using [next-themes](https://github.com/pacocoursey/next-themes) (or any other library that changes the `data-theme` or `class` to `dark` or `light` attribute of the `html` element).
4949

5050
Here is an example of how to set up next-themes with Stack (find more details in the [next-themes documentation](https://github.com/pacocoursey/next-themes)):
5151

‎docs/src/css/custom.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
html[data-theme='dark'] {
1+
html[data-stack-theme='dark'] {
22
--ifm-background-color: #030712;
33
--ifm-background-surface-color: #030712;
44
}

‎packages/stack-server/.eslintrc.cjs‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,4 @@
11
module.exports = {
2-
"extends": [
3-
"../../eslint-configs/defaults.js",
4-
"../../eslint-configs/next.js",
5-
"../../eslint-configs/frontend-starter-components.js",
6-
],
7-
"ignorePatterns": ['/*', '!/src', '!/prisma'],
2+
extends: ["../../eslint-configs/defaults.js", "../../eslint-configs/next.js"],
3+
ignorePatterns: ["/*", "!/src", "!/prisma"],
84
};

‎packages/stack-server/components.json‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
{
2+
"$schema": "https://ui.shadcn.com/schema.json",
3+
"style": "new-york",
4+
"rsc": true,
5+
"tsx": true,
6+
"tailwind": {
7+
"config": "tailwind.config.ts",
8+
"css": "src/app/globals.css",
9+
"baseColor": "zinc",
10+
"cssVariables": true,
11+
"prefix": ""
12+
},
13+
"aliases": {
14+
"components": "@/components",
15+
"utils": "@/lib/utils"
16+
}
17+
}

‎packages/stack-server/install.sh‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
components=(
2+
"accordion"
3+
"alert"
4+
"alert-dialog"
5+
"aspect-ratio"
6+
"avatar"
7+
"badge"
8+
"button"
9+
"calendar"
10+
"card"
11+
"checkbox"
12+
"collapsible"
13+
"combobox"
14+
"command"
15+
"context-menu"
16+
"data-table"
17+
"date-picker"
18+
"dialog"
19+
"dropdown-menu"
20+
"form"
21+
"hover-card"
22+
"input"
23+
"label"
24+
"menubar"
25+
"navigation-menu"
26+
"popover"
27+
"progress"
28+
"radio-group"
29+
"scroll-area"
30+
"select"
31+
"separator"
32+
"sheet"
33+
"skeleton"
34+
"slider"
35+
"switch"
36+
"table"
37+
"tabs"
38+
"textarea"
39+
"toast"
40+
"toggle"
41+
"tooltip"
42+
)
43+
44+
# Loop through each component and install it
45+
for component in "${components[@]}"; do
46+
echo "Installing $component..."
47+
echo yes | npx shadcn-ui@latest add $component
48+
echo "$component installed!"
49+
done
50+
51+
echo "All components installed successfully!"

‎packages/stack-server/package.json‎

Lines changed: 43 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@
2929
"dependencies": {
3030
"@emotion/react": "^11.11.3",
3131
"@emotion/styled": "^11.11.0",
32+
"@hookform/resolvers": "^3.3.4",
3233
"@mdx-js/loader": "^3",
3334
"@mdx-js/react": "^3.0.0",
3435
"@mui/icons-material": "^5.15.10",
@@ -39,6 +40,33 @@
3940
"@next/mdx": "^14",
4041
"@node-oauth/oauth2-server": "^5.1.0",
4142
"@prisma/client": "^5.9.1",
43+
"@radix-ui/react-accordion": "^1.1.2",
44+
"@radix-ui/react-alert-dialog": "^1.0.5",
45+
"@radix-ui/react-aspect-ratio": "^1.0.3",
46+
"@radix-ui/react-avatar": "^1.0.4",
47+
"@radix-ui/react-checkbox": "^1.0.4",
48+
"@radix-ui/react-collapsible": "^1.0.3",
49+
"@radix-ui/react-context-menu": "^2.1.5",
50+
"@radix-ui/react-dialog": "^1.0.5",
51+
"@radix-ui/react-dropdown-menu": "^2.0.6",
52+
"@radix-ui/react-hover-card": "^1.0.7",
53+
"@radix-ui/react-icons": "^1.3.0",
54+
"@radix-ui/react-label": "^2.0.2",
55+
"@radix-ui/react-menubar": "^1.0.4",
56+
"@radix-ui/react-navigation-menu": "^1.1.4",
57+
"@radix-ui/react-popover": "^1.0.7",
58+
"@radix-ui/react-progress": "^1.0.3",
59+
"@radix-ui/react-radio-group": "^1.1.3",
60+
"@radix-ui/react-scroll-area": "^1.0.5",
61+
"@radix-ui/react-select": "^2.0.0",
62+
"@radix-ui/react-separator": "^1.0.3",
63+
"@radix-ui/react-slider": "^1.1.2",
64+
"@radix-ui/react-slot": "^1.0.2",
65+
"@radix-ui/react-switch": "^1.0.3",
66+
"@radix-ui/react-tabs": "^1.0.4",
67+
"@radix-ui/react-toast": "^1.1.5",
68+
"@radix-ui/react-toggle": "^1.0.3",
69+
"@radix-ui/react-tooltip": "^1.0.7",
4270
"@react-email/components": "^0.0.14",
4371
"@react-email/render": "^0.0.12",
4472
"@react-email/tailwind": "^0.0.14",
@@ -50,23 +78,34 @@
5078
"bcrypt": "^5.1.1",
5179
"bright": "^0.8.4",
5280
"canvas-confetti": "^1.9.2",
81+
"class-variance-authority": "^0.7.0",
82+
"clsx": "^2.0.0",
83+
"cmdk": "^1.0.0",
84+
"date-fns": "^3.6.0",
5385
"dotenv-cli": "^7.3.0",
5486
"geist": "^1",
5587
"jose": "^5.2.2",
88+
"lucide-react": "^0.378.0",
5689
"next": "^14.1",
5790
"nodemailer": "^6.9.10",
5891
"openid-client": "^5.6.4",
5992
"pg": "^8.11.3",
6093
"react": "^18.2",
94+
"react-day-picker": "^8.10.1",
6195
"react-dom": "^18",
6296
"react-email": "2.1.0",
97+
"react-hook-form": "^7.51.4",
98+
"react-icons": "^5.0.1",
6399
"rehype-katex": "^7",
64100
"remark-gfm": "^4",
65101
"remark-heading-id": "^1.0.1",
66102
"remark-math": "^6",
67103
"server-only": "^0.0.1",
68104
"sharp": "^0.32.6",
69-
"yup": "^1.3.3"
105+
"tailwind-merge": "^2.3.0",
106+
"tailwindcss-animate": "^1.0.7",
107+
"yup": "^1.3.3",
108+
"zod": "^3.23.8"
70109
},
71110
"devDependencies": {
72111
"@types/bcrypt": "^5.0.2",
@@ -75,7 +114,10 @@
75114
"@types/nodemailer": "^6.4.14",
76115
"@types/react": "^18.2.66",
77116
"@types/react-dom": "^18",
117+
"autoprefixer": "^10.4.17",
118+
"postcss": "^8.4.38",
78119
"prisma": "^5.9.1",
120+
"tailwindcss": "^3.4.1",
79121
"tsx": "^4.7.2"
80122
}
81123
}

‎packages/stack-server/postcss.config.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
module.exports = {
2+
plugins: {
3+
tailwindcss: {},
4+
autoprefixer: {},
5+
},
6+
}

0 commit comments

Comments
 (0)