Skip to content

Commit 04069d3

Browse files
shairezshairez
committed
Merge branch 'main' into pr-fluffy-panda-experiment
2 parents d705db4 + 03e1778 commit 04069d3

File tree

30 files changed

+1612
-2308
lines changed

30 files changed

+1612
-2308
lines changed

‎.all-contributorsrc

Lines changed: 27 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -301,8 +301,34 @@
301301
"contributions": [
302302
"code"
303303
]
304+
},
305+
{
306+
"login": "wmertens",
307+
"name": "Wout Mertens",
308+
"avatar_url": "https://avatars.githubusercontent.com/u/54934?v=4",
309+
"profile": "https://github.com/wmertens",
310+
"contributions": [
311+
"code",
312+
"research",
313+
"ideas",
314+
"test",
315+
"doc"
316+
]
317+
},
318+
{
319+
"login": "Zankel-Engineering",
320+
"name": "Zankel-Engineering",
321+
"avatar_url": "https://avatars.githubusercontent.com/u/43412711?v=4",
322+
"profile": "http://zankel-engineering.de",
323+
"contributions": [
324+
"code",
325+
"test",
326+
"bug",
327+
"a11y"
328+
]
304329
}
305330
],
306331
"contributorsPerLine": 7,
307-
"skipCi": true
332+
"skipCi": true,
333+
"commitType": "docs"
308334
}

‎README.md

Lines changed: 23 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -23,46 +23,39 @@
2323

2424
</div>
2525
<br>
26-
<details>
27-
<summary>Table of Contents</summary>
2826

29-
- [Installation of the headless components](#installation-of-the-headless-components)
30-
- [Contributing](#contributing)
31-
- [Code Of Conduct](#code-of-conduct)
32-
- [Contributors](#contributors)
33-
- [Related Links](#related-links)
34-
- [License](#license)
27+
## Documentation
3528

36-
</details>
37-
38-
## ⚠ This is not ready for production!
39-
40-
This library is still in early stages and once we'll collect enough feedback from the community we'll release the first beta version.
41-
42-
### ROADMAP
43-
44-
- [ ] Deploy the documentation site
45-
- [ ] Add "Readiness" statuses to the components
46-
- [ ] Add a getting started video tutorial
47-
- [ ] Make a public storybook url
48-
- [ ] Deploy the tailwind-kit package
49-
- [ ] Cover all of the components with storybook tests
50-
- [ ] Add testing coverage reports
51-
- [ ] Add a contribution tutorial video
29+
To read the complete docs, please visit [qwikui.com](https://qwikui.com)
5230

5331
<br/>
5432

5533
## Installation of the headless components
5634

57-
> Please create issue if you encounter bugs.
58-
5935
```console
6036

6137
npm install -D @qwik-ui/headless
6238
```
6339

6440
<br/>
6541

42+
## Components Status
43+
44+
### Headless Kit
45+
46+
| Component | Planned | Draft (Alpha) | Beta | Stable |
47+
| :------------------------------------------------------------ | :-----: | :-----------: | ---- | ------ |
48+
| [Accordion](https://qwikui.com/docs/headless/accordion) | | | ✅ | |
49+
| [Autocomplete](https://qwikui.com/docs/headless/autocomplete) | | ✅ | | |
50+
| Carousel | ✅ | | | |
51+
| Dialog | ✅ | | | |
52+
| Pagination | ✅ | | | |
53+
| [Popover](https://qwikui.com/docs/headless/popover) | | ✅ | | |
54+
| [Select](https://qwikui.com/docs/headless/select) | | ✅ | | |
55+
| [Tabs](https://qwikui.com/docs/headless/tabs) | | | ✅ | |
56+
| [Toggle](https://qwikui.com/docs/headless/toggle) | ✅ | | | |
57+
| [Tooltip](https://qwikui.com/docs/headless/tooltip) | | ✅ | | |
58+
6659
## Contributing
6760

6861
Want to contribute? Yayy! 🎉
@@ -124,6 +117,10 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
124117
<td align="center" valign="top" width="14.28%"><a href="https://github.com/thejackshelton"><img src="https://avatars.githubusercontent.com/u/104264123?v=4?s=100" width="100px;" alt="Jack Shelton"/><br /><sub><b>Jack Shelton</b></sub></a><br /><a href="https://github.com/qwikifiers/qwik-ui/commits?author=thejackshelton" title="Code">💻</a> <a href="https://github.com/qwikifiers/qwik-ui/commits?author=thejackshelton" title="Documentation">📖</a></td>
125118
<td align="center" valign="top" width="14.28%"><a href="https://github.com/vasucp1207"><img src="https://avatars.githubusercontent.com/u/85363195?v=4?s=100" width="100px;" alt="Vasu Singh"/><br /><sub><b>Vasu Singh</b></sub></a><br /><a href="https://github.com/qwikifiers/qwik-ui/commits?author=vasucp1207" title="Code">💻</a></td>
126119
</tr>
120+
<tr>
121+
<td align="center" valign="top" width="14.28%"><a href="https://github.com/wmertens"><img src="https://avatars.githubusercontent.com/u/54934?v=4?s=100" width="100px;" alt="Wout Mertens"/><br /><sub><b>Wout Mertens</b></sub></a><br /><a href="https://github.com/qwikifiers/qwik-ui/commits?author=wmertens" title="Code">💻</a> <a href="#research-wmertens" title="Research">🔬</a> <a href="#ideas-wmertens" title="Ideas, Planning, & Feedback">🤔</a> <a href="https://github.com/qwikifiers/qwik-ui/commits?author=wmertens" title="Tests">⚠️</a> <a href="https://github.com/qwikifiers/qwik-ui/commits?author=wmertens" title="Documentation">📖</a></td>
122+
<td align="center" valign="top" width="14.28%"><a href="http://zankel-engineering.de"><img src="https://avatars.githubusercontent.com/u/43412711?v=4?s=100" width="100px;" alt="Zankel-Engineering"/><br /><sub><b>Zankel-Engineering</b></sub></a><br /><a href="https://github.com/qwikifiers/qwik-ui/commits?author=Zankel-Engineering" title="Code">💻</a> <a href="https://github.com/qwikifiers/qwik-ui/commits?author=Zankel-Engineering" title="Tests">⚠️</a> <a href="https://github.com/qwikifiers/qwik-ui/issues?q=author%3AZankel-Engineering" title="Bug reports">🐛</a> <a href="#a11y-Zankel-Engineering" title="Accessibility">️️️️♿️</a></td>
123+
</tr>
127124
</tbody>
128125
</table>
129126

‎apps/website/package.json

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@
33
"description": "The Qwik UI Website",
44
"private": true,
55
"dependencies": {
6-
"@qwik-ui/headless": "file:../../dist/packages/kit-headless",
7-
"@qwik-ui/tailwind": "file:../../dist/packages/kit-tailwind",
8-
"@qwik-ui/material": "file:../../dist/packages/kit-material",
9-
"@qwik-ui/primitives": "file:../../dist/packages/primitives"
6+
"@qwik-ui/headless": "workspace:*",
7+
"@qwik-ui/tailwind": "workspace:*",
8+
"@qwik-ui/material": "workspace:*",
9+
"@qwik-ui/primitives": "workspace:*"
1010
}
1111
}

‎apps/website/src/_state/component-status.type.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
export enum ComponentStatus {
2+
Ready = 'Ready',
3+
Beta = 'Beta',
4+
Draft = 'Draft',
5+
Planned = 'Planned'
6+
}

‎apps/website/src/_state/component-statuses.ts

Lines changed: 37 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,51 @@
1-
export type BadgeStatus = 'Ready' | 'Draft' | 'Planned';
1+
import { ComponentStatus } from './component-status.type';
22

33
export interface ComponentsStatusesMap {
4-
[key: string]: BadgeStatus;
4+
[key: string]: ComponentStatus;
55
}
66

77
export type ComponentKitsStatuses = {
88
tailwind: ComponentsStatusesMap;
99
headless: ComponentsStatusesMap;
1010
};
1111

12-
export const componentsStatuses: ComponentKitsStatuses = {
12+
export const statusByComponent: ComponentKitsStatuses = {
1313
tailwind: {
14-
Accordion: 'Planned',
15-
Alert: 'Planned',
16-
Badge: 'Planned',
17-
Breadcrumb: 'Planned',
18-
Button: 'Planned',
19-
'Button Group': 'Planned',
20-
Card: 'Planned',
21-
Carousel: 'Planned',
22-
Checkbox: 'Planned',
23-
Collapse: 'Planned',
24-
Drawer: 'Planned',
25-
Input: 'Planned',
26-
'Input Phone': 'Planned',
27-
'Navigation Bar': 'Planned',
28-
Pagination: 'Planned',
29-
Popover: 'Planned',
30-
Progress: 'Planned',
31-
Radio: 'Planned',
32-
Rating: 'Planned',
33-
Select: 'Planned',
34-
Slider: 'Planned',
35-
Spinner: 'Planned',
36-
Tabs: 'Planned',
37-
Toast: 'Planned',
38-
Toggle: 'Planned',
39-
Tooltip: 'Planned'
14+
Accordion: ComponentStatus.Planned,
15+
Alert: ComponentStatus.Planned,
16+
Badge: ComponentStatus.Planned,
17+
Breadcrumb: ComponentStatus.Planned,
18+
Button: ComponentStatus.Planned,
19+
'Button Group': ComponentStatus.Planned,
20+
Card: ComponentStatus.Planned,
21+
Carousel: ComponentStatus.Planned,
22+
Checkbox: ComponentStatus.Planned,
23+
Collapse: ComponentStatus.Planned,
24+
Drawer: ComponentStatus.Planned,
25+
Input: ComponentStatus.Planned,
26+
'Input Phone': ComponentStatus.Planned,
27+
'Navigation Bar': ComponentStatus.Planned,
28+
Pagination: ComponentStatus.Planned,
29+
Popover: ComponentStatus.Planned,
30+
Progress: ComponentStatus.Planned,
31+
Radio: ComponentStatus.Planned,
32+
Rating: ComponentStatus.Planned,
33+
Select: ComponentStatus.Planned,
34+
Slider: ComponentStatus.Planned,
35+
Spinner: ComponentStatus.Planned,
36+
Tabs: ComponentStatus.Planned,
37+
Toast: ComponentStatus.Planned,
38+
Toggle: ComponentStatus.Planned,
39+
Tooltip: ComponentStatus.Planned
4040
},
4141
headless: {
42-
Accordion: 'Ready',
43-
Autocomplete: 'Draft',
44-
Carousel: 'Planned',
45-
Popover: 'Planned',
46-
Select: 'Draft',
47-
Tabs: 'Ready',
48-
Toggle: 'Planned',
49-
Tooltip: 'Planned'
42+
Accordion: ComponentStatus.Beta,
43+
Autocomplete: ComponentStatus.Draft,
44+
Carousel: ComponentStatus.Planned,
45+
Popover: ComponentStatus.Draft,
46+
Select: ComponentStatus.Draft,
47+
Tabs: ComponentStatus.Beta,
48+
Toggle: ComponentStatus.Planned,
49+
Tooltip: ComponentStatus.Draft
5050
}
5151
};

‎apps/website/src/_state/status-tooltips.ts

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { ComponentStatus } from './component-status.type';
2+
3+
export const tooltipByStatus = {
4+
[ComponentStatus.Ready]: 'This component is ready production.',
5+
[ComponentStatus.Beta]:
6+
'This component is ready for production, but the API might change.',
7+
[ComponentStatus.Draft]:
8+
'This component is still in development and may have bugs or missing features.',
9+
[ComponentStatus.Planned]: 'This component is planned for development.'
10+
};

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

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ export default component$(() => {
99
<p class="text-lg mb-16">
1010
Qwik UI is the first ever component library for the revolutionary Qwik web
1111
framework. Developed by leading members of the Qwik community,{' '}
12-
<mark class="text-purple-300 bg-transparent">
12+
<mark class="text-purple-500 dark:text-purple-300 bg-transparent">
1313
including members from the Qwik team
1414
</mark>
1515
, Qwik UI offers an open-source solution for building instant loading and
@@ -20,7 +20,9 @@ export default component$(() => {
2020
<p class="text-lg mb-16">
2121
Qwik UI is built for developers who want to harness the power of Qwik's
2222
innovative{' '}
23-
<mark class="text-purple-300 bg-transparent">JavaScript Streaming</mark>{' '}
23+
<mark class="text-purple-500 dark:text-purple-300 bg-transparent">
24+
JavaScript Streaming
25+
</mark>{' '}
2426
technology to create highly performant web applications with minimal effort.
2527
Whether you're working on an e-commerce platform, a dashboard or any scale
2628
application, Qwik UI provides the components and tools you need to deliver a
@@ -34,11 +36,11 @@ export default component$(() => {
3436
Qwik's instant loading capabilities offer a significant advantage for e-commerce
3537
and other search engine-facing applications. By ensuring the highest Core Web
3638
Vitals scores, Qwik UI not only{' '}
37-
<mark class="text-purple-300 bg-transparent">
39+
<mark class="text-purple-500 dark:text-purple-300 bg-transparent">
3840
delivers an amazing user experience
3941
</mark>{' '}
4042
but also helps{' '}
41-
<mark class="text-purple-300 bg-transparent">
43+
<mark class="text-purple-500 dark:text-purple-300 bg-transparent">
4244
improve your site's search engine rankings
4345
</mark>
4446
. Stand out from the competition with a web application that loads instantly,
@@ -49,7 +51,7 @@ export default component$(() => {
4951
<p class="text-lg mb-16">
5052
In addition to performance and SEO advantages, Qwik UI components are designed
5153
with accessibility in mind.{' '}
52-
<mark class="text-purple-300 bg-transparent">
54+
<mark class="text-purple-500 dark:text-purple-300 bg-transparent">
5355
We believe in creating inclusive web experiences
5456
</mark>{' '}
5557
that cater to users of all abilities, and our components are built to adhere to
@@ -59,9 +61,11 @@ export default component$(() => {
5961
<p class="text-lg mb-16">
6062
Qwik UI is an open-source project, which means that it's freely available for
6163
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.
64+
<mark class="text-purple-500 dark:text-purple-300 bg-transparent">
65+
community-driven approach
66+
</mark>
67+
, we aim to continuously improve and expand the capabilities of Qwik UI, making
68+
it the go-to component library for developers working the Qwik framework.
6569
</p>
6670
<p class="text-lg mb-16">
6771
Join us in our mission to revolutionize web development and create instant

0 commit comments

Comments
 (0)