Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commitd4131ba

Browse files
authored
feat: implement Premium features page using shadcn/ui and Tailwind (#15094)
resolvescoder/internal#176This is a proof of concept to showcase the use of Tailwind + shadcn/ui.The goal here was to implement a lower complexity page to reduce theinitial risk and highlight the specific global changes needed.Changes:- Create a separate version of Premium features content for Enterpriseand OSS users- Use shadcn/ui button component and setup styling and variants to matchthe buttons defined in the Coder Kit Figma.https://www.figma.com/design/WfqIgsTFXN2BscBSSyXWF8/Coder-kit?node-id=3-1756- Setup theming using CSS variables and custom Tailwind colors by usingthe dark class name on the root element.- CSS variable design token naming and colors defined in Figma.https://www.figma.com/design/WfqIgsTFXN2BscBSSyXWF8/Coder-kit?node-id=1-2<img width="1199" alt="Screenshot 2024-11-01 at 12 46 03 PM"src="https://github.com/user-attachments/assets/a251450f-8447-405a-9cc4-9f6aad9cd19f"><img width="1197" alt="Screenshot 2024-11-01 at 12 45 36 PM"src="https://github.com/user-attachments/assets/e78a5a40-cbdf-4d85-9ffe-873505800fcc">
1 parentcafb963 commitd4131ba

File tree

16 files changed

+860
-74
lines changed

16 files changed

+860
-74
lines changed

‎.vscode/settings.json‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -47,10 +47,11 @@
4747
"playwright.reuseBrowser":true,
4848

4949
"[javascript][javascriptreact][json][jsonc][typescript][typescriptreact]": {
50-
"editor.defaultFormatter":"biomejs.biome"
51-
// "editor.codeActionsOnSave": {
52-
// "source.organizeImports.biome": "explicit"
53-
//}
50+
"editor.defaultFormatter":"biomejs.biome",
51+
"editor.codeActionsOnSave": {
52+
"quickfix.biome":"explicit"
53+
// "source.organizeImports.biome": "explicit"
54+
}
5455
},
5556

5657
"[css][html][markdown][yaml]": {

‎site/components.json‎

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

‎site/package.json‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@
3636
"@alwaysmeticulous/recorder-loader":"2.137.0",
3737
"@emoji-mart/data":"1.2.1",
3838
"@emoji-mart/react":"1.1.1",
39+
"@emotion/cache":"11.13.1",
3940
"@emotion/css":"11.13.4",
4041
"@emotion/react":"11.13.3",
4142
"@emotion/styled":"11.13.0",
@@ -49,6 +50,7 @@
4950
"@mui/system":"5.16.7",
5051
"@mui/utils":"5.16.6",
5152
"@mui/x-tree-view":"7.18.0",
53+
"@radix-ui/react-slot":"1.1.0",
5254
"@tanstack/react-query-devtools":"4.35.3",
5355
"@xterm/addon-canvas":"0.7.0",
5456
"@xterm/addon-fit":"0.10.0",
@@ -63,6 +65,8 @@
6365
"chartjs-adapter-date-fns":"3.0.0",
6466
"chartjs-plugin-annotation":"3.0.1",
6567
"chroma-js":"2.4.2",
68+
"class-variance-authority":"0.7.0",
69+
"clsx":"2.1.1",
6670
"color-convert":"2.0.1",
6771
"cron-parser":"4.9.0",
6872
"cronstrue":"2.50.0",
@@ -74,6 +78,7 @@
7478
"front-matter":"4.0.2",
7579
"jszip":"3.10.1",
7680
"lodash":"4.17.21",
81+
"lucide-react":"0.454.0",
7782
"monaco-editor":"0.52.0",
7883
"pretty-bytes":"6.1.1",
7984
"react":"18.3.1",
@@ -93,6 +98,8 @@
9398
"resize-observer-polyfill":"1.5.1",
9499
"rollup-plugin-visualizer":"5.12.0",
95100
"semver":"7.6.2",
101+
"tailwind-merge":"2.5.4",
102+
"tailwindcss-animate":"1.0.7",
96103
"tzdata":"1.0.40",
97104
"ua-parser-js":"1.0.33",
98105
"ufuzzy":"npm:@leeoniya/ufuzzy@1.0.10",
@@ -141,6 +148,7 @@
141148
"@types/ua-parser-js":"0.7.36",
142149
"@types/uuid":"9.0.2",
143150
"@vitejs/plugin-react":"4.3.3",
151+
"autoprefixer":"10.4.20",
144152
"chromatic":"11.16.3",
145153
"eventsourcemock":"2.0.0",
146154
"express":"4.21.0",
@@ -151,13 +159,15 @@
151159
"jest-websocket-mock":"2.5.0",
152160
"jest_workaround":"0.1.14",
153161
"msw":"2.3.5",
162+
"postcss":"8.4.47",
154163
"prettier":"3.3.3",
155164
"protobufjs":"7.4.0",
156165
"rxjs":"7.8.1",
157166
"ssh2":"1.16.0",
158167
"storybook":"8.3.5",
159168
"storybook-addon-remix-react-router":"3.0.1",
160169
"storybook-react-context":"0.6.0",
170+
"tailwindcss":"3.4.13",
161171
"ts-node":"10.9.1",
162172
"ts-proto":"1.164.0",
163173
"ts-prune":"0.10.3",
@@ -166,11 +176,7 @@
166176
"vite-plugin-checker":"0.8.0",
167177
"vite-plugin-turbosnap":"1.0.3"
168178
},
169-
"browserslist": [
170-
"chrome 110",
171-
"firefox 111",
172-
"safari 16.0"
173-
],
179+
"browserslist": ["chrome 110","firefox 111","safari 16.0"],
174180
"resolutions": {
175181
"optionator":"0.9.3",
176182
"semver":"7.6.2"

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp