Skip to content

Commit 0cc9220

Browse files
shiroinegaishiroinegai
committed
Merge remote-tracking branch 'upstream/main' into refactor-select
2 parents 018e4b3 + 2e17962 commit 0cc9220

Some content is hidden

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

45 files changed

+2194
-1047
lines changed

‎.prettierrc

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
11
{
2-
"singleQuote": true
2+
"semi": true,
3+
"singleQuote": true,
4+
"trailingComma": "none",
5+
"printWidth": 90
36
}

‎apps/website/src/_state/app-state.type.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
export interface AppState {
22
mode: 'light' | 'dark';
3+
isSidebarOpened: boolean;
34
featureFlags?: {
45
showTailwind?: boolean;
56
};

‎apps/website/src/_state/kit-name.type.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
export enum KitName {
2+
HEADLESS = 'healdess',
3+
TAILWIND = 'tailwind',
4+
NO_KIT = 'no-kit'
5+
}

‎apps/website/src/_state/root-store-context-id.ts

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
11
import { createContextId } from '@builder.io/qwik';
22
import { AppState } from './app-state.type';
33

4-
export const ROOT_STORE_CONTEXT_ID = createContextId<AppState>(
5-
'app-state-context-id'
6-
);
4+
export const ROOT_STORE_CONTEXT_ID = createContextId<AppState>('app-state-context-id');

‎apps/website/src/global.css

Lines changed: 27 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -6,33 +6,30 @@
66
font-family: 'Poppins';
77
font-style: normal;
88
font-weight: 400;
9-
font-display: swap;
9+
font-display: fallback;
1010
src: url('/fonts/poppins-400.woff2') format('woff2');
11-
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
12-
U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+2000-206F,
13-
U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
11+
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
12+
U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
1413
}
1514

1615
@font-face {
1716
font-family: 'Poppins';
1817
font-style: normal;
1918
font-weight: 500;
20-
font-display: swap;
19+
font-display: fallback;
2120
src: url('/fonts/poppins-500.woff2') format('woff2');
22-
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
23-
U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+2000-206F,
24-
U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
21+
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
22+
U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
2523
}
2624

2725
@font-face {
2826
font-family: 'Poppins';
2927
font-style: normal;
3028
font-weight: 700;
31-
font-display: swap;
29+
font-display: fallback;
3230
src: url('/fonts/poppins-700.woff2') format('woff2');
33-
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
34-
U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+2000-206F,
35-
U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
31+
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
32+
U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
3633
}
3734

3835
:root {
@@ -66,13 +63,11 @@
6663
--dark-shadow-elevation-low: 0.5px 0.6px 0.9px hsl(var(--shadow-color) / 0.34),
6764
0.9px 1.1px 1.6px -1.2px hsl(var(--dark-shadow-color) / 0.34),
6865
2.2px 2.6px 3.8px -2.5px hsl(var(--dark-shadow-color) / 0.34);
69-
--dark-shadow-elevation-medium: 0.5px 0.6px 0.9px
70-
hsl(var(--dark-shadow-color) / 0.36),
66+
--dark-shadow-elevation-medium: 0.5px 0.6px 0.9px hsl(var(--dark-shadow-color) / 0.36),
7167
1.8px 2.1px 3.1px -0.8px hsl(var(--dark-shadow-color) / 0.36),
7268
4.4px 5.3px 7.7px -1.7px hsl(var(--dark-shadow-color) / 0.36),
7369
10.8px 12.8px 18.8px -2.5px hsl(var(--dark-shadow-color) / 0.36);
74-
--dark-shadow-elevation-high: 0.5px 0.6px 0.9px
75-
hsl(var(--dark-shadow-color) / 0.34),
70+
--dark-shadow-elevation-high: 0.5px 0.6px 0.9px hsl(var(--dark-shadow-color) / 0.34),
7671
3.1px 3.7px 5.4px -0.4px hsl(var(--dark-shadow-color) / 0.34),
7772
5.9px 7px 10.3px -0.7px hsl(var(--dark-shadow-color) / 0.34),
7873
9.6px 11.5px 16.9px -1.1px hsl(var(--dark-shadow-color) / 0.34),
@@ -100,7 +95,9 @@ html {
10095
background-color: var(--color-bg) !important;
10196
color: var(--color-text) !important;
10297

103-
font-family: 'Poppins', sans-serif;
98+
font-family: 'Poppins', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
99+
Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, 'Apple Color Emoji',
100+
'Segoe UI Emoji', Segoe UI Symbol, 'Noto Color Emoji';
104101
}
105102

106103
body {
@@ -111,3 +108,16 @@ body {
111108
grid-template-columns: 25% 70%;
112109
grid-template-areas: 'sidebar content';
113110
}
111+
112+
/* Utilities layer for animations. The current arbitrary & docs tailwind animation guidelines are not maintainable long term.
113+
It would make more sense to supply the user with the animation declaration in the docs.
114+
*/
115+
@layer utilities {
116+
.accordion-animation-1[data-state='open'] {
117+
animation: 500ms cubic-bezier(0.87, 0, 0.13, 1) 0s 1 normal forwards accordion-open;
118+
}
119+
120+
.accordion-animation-1[data-state='closed'] {
121+
animation: 500ms cubic-bezier(0.87, 0, 0.13, 1) 0s 1 normal forwards accordion-close;
122+
}
123+
}

‎apps/website/src/root.tsx

Lines changed: 16 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,12 @@ import {
33
useContextProvider,
44
useStore,
55
useStyles$,
6-
useVisibleTask$,
6+
useVisibleTask$
77
} from '@builder.io/qwik';
88
import {
99
QwikCityProvider,
1010
RouterOutlet,
11-
ServiceWorkerRegister,
11+
ServiceWorkerRegister
1212
} from '@builder.io/qwik-city';
1313
import { RouterHead } from './routes/_components/router-head/router-head';
1414

@@ -28,28 +28,28 @@ export default component$(() => {
2828
*/
2929
useStyles$(globalStyles);
3030

31-
const appState = useStore<AppState>({
31+
const rootStore = useStore<AppState>({
3232
mode: 'light',
33+
isSidebarOpened: false,
3334
featureFlags: {
34-
showTailwind: import.meta.env.DEV,
35-
},
35+
showTailwind: import.meta.env.DEV
36+
}
3637
});
3738

38-
useContextProvider(ROOT_STORE_CONTEXT_ID, appState);
39+
useContextProvider(ROOT_STORE_CONTEXT_ID, rootStore);
3940

4041
useVisibleTask$(() => {
41-
appState.mode =
42+
rootStore.mode =
4243
localStorage.getItem(THEME_STORAGE_KEY) === 'dark' ? 'dark' : 'light';
4344
});
4445

4546
// TODO: remove this old state once refactored
4647
const state = useStore<OldAppState>({
47-
darkMode: false,
48-
theme: 'NOT_DEFINED',
48+
darkMode: false
4949
});
5050
useContextProvider(OLD_APP_STATE_CONTEXT_ID, state);
5151

52-
useCSSTheme(appState);
52+
useCSSTheme(rootStore);
5353

5454
return (
5555
<QwikCityProvider>
@@ -58,7 +58,12 @@ export default component$(() => {
5858
<link rel="manifest" href="/manifest.json" />
5959
<RouterHead />
6060
</head>
61-
<body lang="en">
61+
<body
62+
lang="en"
63+
class={{
64+
'overflow-y-hidden': rootStore.isSidebarOpened
65+
}}
66+
>
6267
<RouterOutlet />
6368
<ServiceWorkerRegister />
6469
</body>

‎apps/website/src/routes/(main)/about/[email protected]

Lines changed: 33 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,91 +1,84 @@
11
import { component$ } from '@builder.io/qwik';
2-
import { DocumentHead, Link } from '@builder.io/qwik-city';
2+
import { DocumentHead } from '@builder.io/qwik-city';
33

44
export default component$(() => {
55
return (
66
<>
77
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
88
<h1 class="text-4xl font-bold mb-8">About Qwik UI</h1>
99
<p class="text-lg mb-16">
10-
Qwik UI is the first ever component library for the revolutionary Qwik
11-
web framework. Developed by leading members of the Qwik community,{' '}
10+
Qwik UI is the first ever component library for the revolutionary Qwik web
11+
framework. Developed by leading members of the Qwik community,{' '}
1212
<mark class="text-purple-300 bg-transparent">
1313
including members from the Qwik team
1414
</mark>
15-
, Qwik UI offers an open-source solution for building instant loading
16-
and accessible web applications that achieve top-tier SEO performance.
15+
, Qwik UI offers an open-source solution for building instant loading and
16+
accessible web applications that achieve top-tier SEO performance.
1717
</p>
1818

1919
<h2 class="text-2xl font-semibold mb-4">Designed for Developers</h2>
2020
<p class="text-lg mb-16">
21-
Qwik UI is built for developers who want to harness the power of
22-
Qwik's innovative{' '}
23-
<mark class="text-purple-300 bg-transparent">
24-
JavaScript Streaming
25-
</mark>{' '}
26-
technology to create highly performant web applications with minimal
27-
effort. Whether you're working on an e-commerce platform, a dashboard
28-
or any scale application, Qwik UI provides the components and tools
29-
you need to deliver a seamless user experience.
21+
Qwik UI is built for developers who want to harness the power of Qwik's
22+
innovative{' '}
23+
<mark class="text-purple-300 bg-transparent">JavaScript Streaming</mark>{' '}
24+
technology to create highly performant web applications with minimal effort.
25+
Whether you're working on an e-commerce platform, a dashboard or any scale
26+
application, Qwik UI provides the components and tools you need to deliver a
27+
seamless user experience.
3028
</p>
3129

3230
<h2 class="text-2xl font-semibold mb-4">
3331
A MUST for E-commerce and SEO-focused Applications
3432
</h2>
3533
<p class="text-lg mb-16">
36-
Qwik's instant loading capabilities offer a significant advantage for
37-
e-commerce and other search engine-facing applications. By ensuring
38-
the highest Core Web Vitals scores, Qwik UI not only{' '}
34+
Qwik's instant loading capabilities offer a significant advantage for e-commerce
35+
and other search engine-facing applications. By ensuring the highest Core Web
36+
Vitals scores, Qwik UI not only{' '}
3937
<mark class="text-purple-300 bg-transparent">
4038
delivers an amazing user experience
4139
</mark>{' '}
4240
but also helps{' '}
4341
<mark class="text-purple-300 bg-transparent">
4442
improve your site's search engine rankings
4543
</mark>
46-
. Stand out from the competition with a web application that loads
47-
instantly, regardless of its size or complexity.
44+
. Stand out from the competition with a web application that loads instantly,
45+
regardless of its size or complexity.
4846
</p>
4947

5048
<h2 class="text-2xl font-semibold mb-4">Accessibility Matters</h2>
5149
<p class="text-lg mb-16">
52-
In addition to performance and SEO advantages, Qwik UI components are
53-
designed with accessibility in mind.{' '}
50+
In addition to performance and SEO advantages, Qwik UI components are designed
51+
with accessibility in mind.{' '}
5452
<mark class="text-purple-300 bg-transparent">
5553
We believe in creating inclusive web experiences
5654
</mark>{' '}
57-
that cater to users of all abilities, and our components are built to
58-
adhere to the highest accessibility standards.
55+
that cater to users of all abilities, and our components are built to adhere to
56+
the highest accessibility standards.
5957
</p>
60-
<h2 class="text-2xl font-semibold mb-4">
61-
Open Source and Community-Driven
62-
</h2>
58+
<h2 class="text-2xl font-semibold mb-4">Open Source and Community-Driven</h2>
6359
<p class="text-lg mb-16">
64-
Qwik UI is an open-source project, which means that it's freely
65-
available for developers to use and contribute to. By fostering a{' '}
66-
<mark class="text-purple-300 bg-transparent">
67-
community-driven approach
68-
</mark>
69-
, we aim to continuously improve and expand the capabilities of Qwik
70-
UI, making it the go-to component library for developers working the
71-
Qwik framework.
60+
Qwik UI is an open-source project, which means that it's freely available for
61+
developers to use and contribute to. By fostering a{' '}
62+
<mark class="text-purple-300 bg-transparent">community-driven approach</mark>,
63+
we aim to continuously improve and expand the capabilities of Qwik UI, making it
64+
the go-to component library for developers working the Qwik framework.
7265
</p>
7366
<p class="text-lg mb-16">
74-
Join us in our mission to revolutionize web development and create
75-
instant loading web applications that offer unparalleled performance,
76-
SEO advantages, and accessibility.
67+
Join us in our mission to revolutionize web development and create instant
68+
loading web applications that offer unparalleled performance, SEO advantages,
69+
and accessibility.
7770
</p>
7871

79-
<Link href="/docs/tailwind">
72+
<a href="/docs/headless/introduction">
8073
<h2 class="text-center underline hover:no-underline">
8174
Get started with Qwik UI today!
8275
</h2>
83-
</Link>
76+
</a>
8477
</div>
8578
</>
8679
);
8780
});
8881

8982
export const head: DocumentHead = {
90-
title: 'Qwik UI | About the project',
83+
title: 'Qwik UI | About the project'
9184
};

‎apps/website/src/routes/_components/footer/footer.tsx

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,7 @@ export const Footer = component$(() => {
66
return (
77
<footer class="bg-gray-300 dark:bg-gray-900">
88
<div class="max-w-7xl mx-auto py-12 px-4 overflow-hidden sm:px-6 lg:px-8">
9-
<nav
10-
class="-mx-5 -my-2 flex flex-wrap justify-center"
11-
aria-label="Footer"
12-
>
9+
<nav class="-mx-5 -my-2 flex flex-wrap justify-center" aria-label="Footer">
1310
<div class="px-5 py-2">
1411
<a
1512
href="/about"
@@ -20,10 +17,10 @@ export const Footer = component$(() => {
2017
</div>
2118
<div class="px-5 py-2">
2219
<a
23-
href="/docs/tailwind"
20+
href="/docs/headless/introduction"
2421
class="text-base text-gray-500 hover:text-gray-900 dark:hover:text-gray-300"
2522
>
26-
Documentation
23+
Headless Kit
2724
</a>
2825
</div>
2926

0 commit comments

Comments
 (0)