Skip to content

Commit 099b19c

Browse files
jherrjherr
committed
chore: first almost complete pass at a custom setup, minus MCP
1 parent 4253db8 commit 099b19c

File tree

90 files changed

+999
-1070
lines changed

Some content is hidden

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

90 files changed

+999
-1070
lines changed

‎examples/custom-cli/create-qwik-app/customized-ui/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<meta charset="UTF-8" />
55
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<title>Vite + React + TS</title>
7+
<title>Create Qwik App</title>
88
</head>
99
<body class="dark">
1010
<div id="root"></div>

‎examples/custom-cli/create-qwik-app/customized-ui/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
},
1212
"dependencies": {
1313
"@tailwindcss/vite": "^4.1.6",
14-
"@tanstack/cta-ui": "workspace:*",
14+
"@tanstack/cta-ui-base": "workspace:*",
1515
"react": "^19.1.0",
1616
"react-dom": "^19.1.0",
1717
"tailwindcss": "^4.1.6",

‎examples/custom-cli/create-qwik-app/customized-ui/public/vite.svg

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎examples/custom-cli/create-qwik-app/customized-ui/src/App.css

Whitespace-only changes.

‎examples/custom-cli/create-qwik-app/customized-ui/src/App.tsx

Lines changed: 58 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,61 @@
1-
import ExternalApp from '@tanstack/cta-ui/src/external'
1+
import {
2+
FileNavigator,
3+
StartupDialog,
4+
CTAProvider,
5+
SelectedAddOns,
6+
RunAddOns,
7+
RunCreateApp,
8+
ProjectName,
9+
TypescriptSwitch,
10+
SidebarGroup,
11+
useApplicationMode,
12+
useReady,
13+
} from '@tanstack/cta-ui-base'
214

3-
function App() {
4-
return <ExternalApp />
15+
import { Header } from './custom-header'
16+
17+
function AppSidebar() {
18+
const ready = useReady()
19+
const mode = useApplicationMode()
20+
21+
return (
22+
<div className="flex flex-col gap-2">
23+
{ready && (
24+
<>
25+
{mode === 'setup' && (
26+
<SidebarGroup>
27+
<ProjectName />
28+
<TypescriptSwitch />
29+
<SelectedAddOns />
30+
</SidebarGroup>
31+
)}
32+
</>
33+
)}
34+
<div className="mt-5">
35+
<RunAddOns />
36+
<RunCreateApp />
37+
</div>
38+
</div>
39+
)
540
}
641

7-
export default App
42+
export default function App() {
43+
return (
44+
<CTAProvider>
45+
<main className="min-w-[1280px]">
46+
<div className="min-h-dvh p-2 sm:p-4 space-y-2 sm:space-y-4 @container">
47+
<Header />
48+
<div className="flex flex-row">
49+
<div className="w-1/3 @8xl:w-1/4 pr-2">
50+
<AppSidebar />
51+
</div>
52+
<div className="w-2/3 @8xl:w-3/4 pl-2">
53+
<FileNavigator />
54+
</div>
55+
</div>
56+
</div>
57+
<StartupDialog />
58+
</main>
59+
</CTAProvider>
60+
)
61+
}

‎examples/custom-cli/create-qwik-app/customized-ui/src/assets/react.svg

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎examples/custom-cli/create-qwik-app/customized-ui/src/custom-header.tsx

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import { QwikLogo } from './qwik-logo'
2+
3+
export function Header() {
4+
return (
5+
<div className="bg-white dark:bg-black/50 rounded-lg p-2 sm:p-4 flex items-center gap-2 text-lg sm:text-xl shadow-xl">
6+
<div className="flex items-center gap-1.5">
7+
<QwikLogo className="w-10 h-10" />
8+
<div className="font-black text-xl uppercase">Qwik</div>
9+
</div>
10+
<svg
11+
stroke="currentColor"
12+
fill="currentColor"
13+
stroke-width="0"
14+
viewBox="0 0 256 512"
15+
height="1em"
16+
width="1em"
17+
xmlns="http://www.w3.org/2000/svg"
18+
>
19+
<path d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"></path>
20+
</svg>
21+
<div className="hover:text-blue-500 flex items-center gap-2">
22+
Create Qwik App
23+
</div>
24+
</div>
25+
)
26+
}

‎examples/custom-cli/create-qwik-app/customized-ui/src/index.css

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
@import 'tailwindcss';
22

3-
@source "../node_modules/@tanstack/cta-ui";
3+
@source "../node_modules/@tanstack/cta-ui-base";
44

55
@layer theme, base, components, utilities;
66

@@ -180,8 +180,7 @@ code,
180180
@layer base {
181181
html,
182182
body {
183-
@apply text-gray-900 bg-gray-50 dark:bg-black dark:text-gray-200;
184-
background: rgb(3, 7, 18);
183+
@apply text-gray-800 bg-gray-50 dark:bg-[#003e84] dark:text-gray-200;
185184
}
186185

187186
.using-mouse * {

‎examples/custom-cli/create-qwik-app/customized-ui/src/qwik-logo.tsx

Lines changed: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
export function QwikLogo({ className }: { className?: string }) {
2+
return (
3+
<svg
4+
viewBox="0 0 256 274"
5+
width="256"
6+
height="274"
7+
xmlns="http://www.w3.org/2000/svg"
8+
preserveAspectRatio="xMidYMid"
9+
className={className}
10+
>
11+
<defs>
12+
<linearGradient
13+
x1="22.347%"
14+
y1="49.545%"
15+
x2="77.517%"
16+
y2="50.388%"
17+
id="a"
18+
>
19+
<stop stop-color="#4340C4" offset="0%" />
20+
<stop stop-color="#4642C8" offset="12%" />
21+
<stop stop-color="#594EE4" offset="100%" />
22+
</linearGradient>
23+
<linearGradient
24+
x1="38.874%"
25+
y1="49.845%"
26+
x2="60.879%"
27+
y2="50.385%"
28+
id="b"
29+
>
30+
<stop stop-color="#4340C4" offset="0%" />
31+
<stop stop-color="#534ADB" offset="74%" />
32+
<stop stop-color="#594EE4" offset="100%" />
33+
</linearGradient>
34+
<linearGradient
35+
x1="-.004%"
36+
y1="49.529%"
37+
x2="100.123%"
38+
y2="50.223%"
39+
id="c"
40+
>
41+
<stop stop-color="#4340C4" offset="0%" />
42+
<stop stop-color="#4340C4" offset="23%" />
43+
<stop stop-color="#4F48D5" offset="60%" />
44+
<stop stop-color="#594EE4" offset="100%" />
45+
</linearGradient>
46+
<linearGradient
47+
x1="35.4%"
48+
y1="49.459%"
49+
x2="64.895%"
50+
y2="50.085%"
51+
id="d"
52+
>
53+
<stop stop-color="#0080FF" offset="0%" />
54+
<stop stop-color="#00B9FF" offset="100%" />
55+
</linearGradient>
56+
<linearGradient
57+
x1="-.243%"
58+
y1="49.366%"
59+
x2="100.411%"
60+
y2="50.467%"
61+
id="e"
62+
>
63+
<stop stop-color="#0080FF" offset="0%" />
64+
<stop stop-color="#008BFF" offset="17%" />
65+
<stop stop-color="#00A7FF" offset="47%" />
66+
<stop stop-color="#00B9FF" offset="63%" />
67+
<stop stop-color="#00B9FF" offset="100%" />
68+
</linearGradient>
69+
<linearGradient
70+
x1="-.125%"
71+
y1="49.627%"
72+
x2="100.225%"
73+
y2="50.101%"
74+
id="f"
75+
>
76+
<stop stop-color="#00B9FF" offset="0%" />
77+
<stop stop-color="#0080FF" offset="30%" />
78+
<stop stop-color="#2D67F1" offset="60%" />
79+
<stop stop-color="#4D55E8" offset="86%" />
80+
<stop stop-color="#594EE4" offset="100%" />
81+
</linearGradient>
82+
<linearGradient
83+
x1="4.557%"
84+
y1="50.184%"
85+
x2="99.354%"
86+
y2="51.298%"
87+
id="g"
88+
>
89+
<stop stop-color="#4340C4" offset="0%" />
90+
<stop stop-color="#4642C8" offset="12%" />
91+
<stop stop-color="#594EE4" offset="100%" />
92+
</linearGradient>
93+
</defs>
94+
<path
95+
fill="url(#a)"
96+
d="m175.051 236.859 25.162-15.071 49.298-86.929-76.287 89.097z"
97+
/>
98+
<path
99+
d="m242.337 80.408-4.926-9.4-1.932-3.663-.2.196-25.818-47.015C202.984 8.65 190.631 1.231 177.01 1.074l-25.074.206L188.15 114.8l-23.958 23.331 8.924 86.245 73.769-84.021c10.005-11.587 11.97-28.09 4.92-41.646l-9.466-18.302h-.002Z"
100+
fill="url(#b)"
101+
/>
102+
<path
103+
d="m201.113 72.256-43.18-70.907L83.41.003C70.165-.15 57.83 6.573 50.88 17.87l-43.87 83.877 34.443-33.334L84.701 8.356l97.894 112.153 18.3-18.626c8.397-8.142 5.54-19.558.22-29.625l-.002-.002Z"
104+
fill="url(#c)"
105+
/>
106+
<path
107+
d="M97.784 95.26 84.522 8.796l-73.148 88.03c-12.328 11.935-14.897 30.662-6.419 45.49l42.98 74.727c6.553 11.464 18.755 18.577 32.024 18.729l42.945.49L71.46 119.607 97.784 95.26Z"
108+
fill="url(#d)"
109+
/>
110+
<path
111+
d="M173.227 223.9 71.38 119.022l-13.196 12.59c-10.812 10.248-11.106 27.332-.728 37.921l43.99 66.384 70.65.907 1.127-12.926h.003Z"
112+
fill="url(#e)"
113+
/>
114+
<path fill="url(#f)" d="m101.584 235.903 72.292-11.599 47.704 49.464z" />
115+
<path
116+
d="m173.111 224.483 27.168-3.457 24.096 49.915c1.06 2.06-1.719 3.977-3.373 2.302l-47.89-48.76Z"
117+
fill="url(#g)"
118+
/>
119+
<path
120+
fill="#FFF"
121+
d="M182.708 120.058 84.681 8.601l12.502 85.958L71.16 118.78l101.772 105.372-7.595-85.905 17.371-18.192z"
122+
/>
123+
</svg>
124+
)
125+
}

‎examples/custom-cli/create-qwik-app/project/base/src/routes/layout.tsx.ejs

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,9 @@ export const onGet: RequestHandler = async ({ cacheControl }) => {
1818
export default component$(() => {
1919
return (
2020
<>
21-
<Header />
21+
<% if (addOns.length > 0 || integrations.length > 0 || routes.length > 0) { %>
22+
<Header />
23+
<% } %>
2224
<Slot />
2325
</>
2426
)

0 commit comments

Comments
 (0)