Skip to content

Commit e9e473b

Browse files
shairezshairez
committed
Merge branch 'main' into pr-fluffy-cli
2 parents b2140e0 + 222460e commit e9e473b

File tree

275 files changed

+9090
-12939
lines changed

Some content is hidden

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

275 files changed

+9090
-12939
lines changed

‎.github/actions/release-minor/action.yml‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
name: Release
2+
3+
description: Release packages
4+
5+
inputs:
6+
github_token:
7+
description: GitHub token
8+
required: true
9+
npm_token:
10+
description: NPM token
11+
required: true
12+
13+
runs:
14+
using: composite
15+
steps:
16+
- name: Check Authentication with Registry
17+
env:
18+
NODE_AUTH_TOKEN: ${{ inputs.npm_token }}
19+
shell: bash
20+
run: npm whoami
21+
22+
# - name: Build Headless Kit
23+
# shell: bash
24+
# run: npx nx build headless
25+
26+
# - name: Replace utils version in package.json
27+
# shell: bash
28+
# run: pnpm update.version
29+
30+
- name: Version
31+
env:
32+
NODE_AUTH_TOKEN: ${{ inputs.npm_token }}
33+
GITHUB_TOKEN: ${{ inputs.github_token }}
34+
shell: bash
35+
run: npx nx affected --base=last-release --target=version-publish-minor --parallel=1
36+
37+
- name: Tag last-release
38+
shell: bash
39+
run: git tag -f last-release
40+
41+
- name: Push changes
42+
uses: ad-m/github-push-action@master
43+
with:
44+
github_token: ${{ inputs.github_token }}
45+
branch: ${{ github.ref }}
46+
force: true
47+
tags: true

‎.github/workflows/release-minor.yml‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
name: Release Minor
2+
3+
on:
4+
- workflow_dispatch
5+
6+
jobs:
7+
test:
8+
runs-on: ubuntu-latest
9+
10+
strategy:
11+
matrix:
12+
node_version: [16, 18, 20, 21]
13+
14+
steps:
15+
- uses: actions/checkout@v3
16+
- name: Setup
17+
uses: ./.github/actions/setup
18+
with:
19+
node_version: ${{ matrix.node_version }}
20+
21+
- name: Test
22+
uses: ./.github/actions/test
23+
with:
24+
codecov_token: ${{ secrets.CODECOV_TOKEN }}
25+
26+
release:
27+
runs-on: ubuntu-latest
28+
29+
if: github.ref == 'refs/heads/main'
30+
31+
needs: [test]
32+
33+
steps:
34+
- uses: actions/checkout@v3
35+
- name: Setup
36+
uses: ./.github/actions/setup
37+
38+
- name: Build Headless Kit
39+
shell: bash
40+
run: npx nx build headless
41+
42+
- name: Release
43+
uses: ./.github/actions/release-minor
44+
with:
45+
github_token: ${{ secrets.GITHUB_TOKEN }}
46+
npm_token: ${{ secrets.NPM_TOKEN }}

‎README.md‎

Lines changed: 14 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -43,21 +43,20 @@ npm install -D @qwik-ui/headless
4343

4444
### Headless Kit
4545

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-
| [Combobox](https://qwikui.com/docs/headless/combobox) | | | ✅ | |
52-
| Dialog | ✅ | | | |
53-
| [Modal](https://qwikui.com/docs/headless/modal) | | | ✅ | |
54-
| [Pagination](https://qwikui.com/docs/headless/pagination) | | ✅ | | |
55-
| [Popover](https://qwikui.com/docs/headless/popover) | | ✅ | | |
56-
| [Select](https://qwikui.com/docs/headless/select) | | ✅ | | |
57-
| [Separator](https://qwikui.com/docs/headless/separator) | | | ✅ | |
58-
| [Tabs](https://qwikui.com/docs/headless/tabs) | | | ✅ | |
59-
| [Toggle](https://qwikui.com/docs/headless/toggle) | ✅ | | | |
60-
| [Tooltip](https://qwikui.com/docs/headless/tooltip) | | ✅ | | |
46+
| Component | Planned | Draft (Alpha) | Beta | Stable |
47+
| :-------------------------------------------------------- | :-----: | :-----------: | ---- | ------ |
48+
| [Accordion](https://qwikui.com/docs/headless/accordion) | | | ✅ | |
49+
| Carousel | ✅ | | | |
50+
| [Combobox](https://qwikui.com/docs/headless/combobox) | | | ✅ | |
51+
| Dialog | ✅ | | | |
52+
| [Modal](https://qwikui.com/docs/headless/modal) | | | ✅ | |
53+
| [Pagination](https://qwikui.com/docs/headless/pagination) | | ✅ | | |
54+
| [Popover](https://qwikui.com/docs/headless/popover) | | ✅ | | |
55+
| [Select](https://qwikui.com/docs/headless/select) | | ✅ | | |
56+
| [Separator](https://qwikui.com/docs/headless/separator) | | | ✅ | |
57+
| [Tabs](https://qwikui.com/docs/headless/tabs) | | | ✅ | |
58+
| [Toggle](https://qwikui.com/docs/headless/toggle) | ✅ | | | |
59+
| [Tooltip](https://qwikui.com/docs/headless/tooltip) | | ✅ | | |
6160

6261
## Contributing
6362

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

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -41,13 +41,12 @@ export const statusByComponent: ComponentKitsStatuses = {
4141
},
4242
headless: {
4343
Accordion: ComponentStatus.Beta,
44-
Autocomplete: ComponentStatus.Draft,
4544
Carousel: ComponentStatus.Planned,
4645
Combobox: ComponentStatus.Beta,
4746
Dialog: ComponentStatus.Planned,
4847
Modal: ComponentStatus.Beta,
4948
Pagination: ComponentStatus.Draft,
50-
Popover: ComponentStatus.Draft,
49+
Popover: ComponentStatus.Beta,
5150
Select: ComponentStatus.Draft,
5251
Separator: ComponentStatus.Beta,
5352
Tabs: ComponentStatus.Beta,

‎apps/website/src/components/anatomy-table/anatomy-table.tsx‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -13,25 +13,27 @@ type AnatomyTableProps = {
1313
export const AnatomyTable = component$(
1414
({ firstColumnLabel = 'Component', propDescriptors }: AnatomyTableProps) => {
1515
return (
16-
<div class="overflow-auto">
17-
<table class="w-full max-w-full text-left">
18-
<tbody class="divide-y divide-slate-200 dark:divide-slate-800">
19-
<tr class="text-slate-950 dark:text-white">
20-
<td class="whitespace-nowrap py-2 pl-4 text-sm font-[700] font-medium sm:pl-0">
16+
<div class="prose prose-sm overflow-auto">
17+
<table class="mb-6 w-full min-w-[540px] text-left sm:min-w-full">
18+
<tbody class="divide-y">
19+
<tr class="text-foreground">
20+
<td class="w-2/6 whitespace-nowrap p-2 text-base font-semibold sm:pl-0">
2121
{firstColumnLabel}
2222
</td>
23-
<td class="whitespace-nowrap py-2 text-sm font-[600]">Description</td>
23+
<td class="w-4/6 whitespace-nowrap p-2 text-base font-semibold sm:pl-0">
24+
Description
25+
</td>
2426
</tr>
2527
{propDescriptors?.map((propDescriptor) => {
2628
return (
2729
<tr key={propDescriptor.name}>
2830
<td class="align-center py-3 pl-2 pr-2 sm:pl-0 md:align-baseline">
29-
<code class="border-qwikui-blue-500 bg-qwikui-blue-50 dark:bg-qwikui-purple-100 dark:border-qwikui-purple-500 mr-6 rounded-md rounded-md border-[1px] border-b-[2px] px-2 py-[2px] font-[400] text-slate-950">
31+
<code class="border-primary text-accent-foreground mr-6 rounded border border-b-2">
3032
{propDescriptor.name}
3133
</code>
3234
</td>
3335
<td class="py-3 align-baseline">
34-
<div class="prose prose-sm prose-docs-table">
36+
<div class="prose-docs-table">
3537
<p>{propDescriptor.description}</p>
3638
</div>
3739
</td>

‎apps/website/src/components/api-table/api-table.tsx‎

Lines changed: 12 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { component$ } from '@builder.io/qwik';
2-
import { Popover, PopoverContent, PopoverTrigger } from '@qwik-ui/headless';
2+
import { InfoPopup } from '../info-popup/info-popup';
33
type APITableProps = {
44
propDescriptors: {
55
name: string;
@@ -12,62 +12,32 @@ type APITableProps = {
1212
export const APITable = component$(({ propDescriptors }: APITableProps) => {
1313
return (
1414
<div class="overflow-auto">
15-
<table class="mb-6 w-full min-w-[540px] border-b border-slate-200 text-left dark:border-slate-800 sm:min-w-full">
16-
<tbody class="divide-y divide-slate-200 dark:divide-slate-800">
17-
<tr class="w-1/4 dark:text-white ">
18-
<th class="w-1/6 whitespace-nowrap py-2 pl-4 text-base font-[600] font-medium text-slate-700 dark:text-slate-300 sm:pl-0">
15+
<table class="mb-6 w-full min-w-[540px] border-b text-left sm:min-w-full">
16+
<tbody class="divide-y">
17+
<tr class="w-1/4">
18+
<th class="w-1/6 whitespace-nowrap py-2 pl-4 text-base font-semibold sm:pl-0">
1919
Prop
2020
</th>
21-
<th class="w-1/6 whitespace-nowrap py-2 text-base font-[600] text-slate-700 dark:text-slate-300">
22-
Type
23-
</th>
24-
<th class="w-2/3 whitespace-nowrap p-2 text-base font-[600] text-slate-700 dark:text-slate-300">
21+
<th class="w-1/6 whitespace-nowrap py-2 text-base font-semibold">Type</th>
22+
<th class="w-2/3 whitespace-nowrap p-2 text-base font-semibold">
2523
Description
2624
</th>
2725
</tr>
2826
{propDescriptors?.map((propDescriptor) => {
2927
return (
3028
<tr key={propDescriptor.name}>
3129
<td class="prose prose-sm py-3 pl-4 sm:pl-0 ">
32-
<code class="border-qwikui-blue-500 bg-qwikui-blue-50 dark:bg-qwikui-purple-100 dark:border-qwikui-purple-500 mr-6 rounded-md border-[1px] border-b-[2px] font-[400] text-slate-950">
30+
<code class="border-primary mr-6 rounded-md border border-b-[2px]">
3331
{propDescriptor.name}
3432
</code>
3533
</td>
3634
<td class="py-3">
37-
<span class="flex items-center">
38-
<code class="rounded-md border-[1px] border-b-2 border-slate-700 bg-slate-100 px-2 dark:border-slate-400 dark:bg-slate-700">
35+
<div class="flex items-center gap-2">
36+
<code class="rounded-md border border-b-2 px-2">
3937
{propDescriptor.type}
4038
</code>
41-
{propDescriptor.info && (
42-
<Popover placement="top">
43-
<PopoverContent>
44-
<div class="shadow-light-medium bg-qwikui-blue-50 dark:shadow-dark-high text-md border-qwikui-blue-500 dark:border-qwikui-purple-500 dark:bg-qwikui-purple-100 mb-2 max-w-xs rounded-lg border-[1px] border-b-2 px-3 py-2 font-[500] text-slate-950 sm:w-max">
45-
{propDescriptor?.info}
46-
</div>
47-
</PopoverContent>
48-
<PopoverTrigger>
49-
<div class="mx-2 mt-2 rounded-md rounded-xl p-1 hover:bg-slate-500 hover:bg-opacity-50">
50-
<svg
51-
width="15"
52-
height="15"
53-
viewBox="0 0 15 15"
54-
fill="none"
55-
xmlns="http://www.w3.org/2000/svg"
56-
aria-hidden="true"
57-
focusable="false"
58-
>
59-
<path
60-
d="M7.49991 0.876892C3.84222 0.876892 0.877075 3.84204 0.877075 7.49972C0.877075 11.1574 3.84222 14.1226 7.49991 14.1226C11.1576 14.1226 14.1227 11.1574 14.1227 7.49972C14.1227 3.84204 11.1576 0.876892 7.49991 0.876892ZM1.82707 7.49972C1.82707 4.36671 4.36689 1.82689 7.49991 1.82689C10.6329 1.82689 13.1727 4.36671 13.1727 7.49972C13.1727 10.6327 10.6329 13.1726 7.49991 13.1726C4.36689 13.1726 1.82707 10.6327 1.82707 7.49972ZM8.24992 4.49999C8.24992 4.9142 7.91413 5.24999 7.49992 5.24999C7.08571 5.24999 6.74992 4.9142 6.74992 4.49999C6.74992 4.08577 7.08571 3.74999 7.49992 3.74999C7.91413 3.74999 8.24992 4.08577 8.24992 4.49999ZM6.00003 5.99999H6.50003H7.50003C7.77618 5.99999 8.00003 6.22384 8.00003 6.49999V9.99999H8.50003H9.00003V11H8.50003H7.50003H6.50003H6.00003V9.99999H6.50003H7.00003V6.99999H6.50003H6.00003V5.99999Z"
61-
fill="currentColor"
62-
fill-rule="evenodd"
63-
clip-rule="evenodd"
64-
></path>
65-
</svg>
66-
</div>{' '}
67-
</PopoverTrigger>
68-
</Popover>
69-
)}
70-
</span>
39+
{propDescriptor.info && <InfoPopup info={propDescriptor.info} />}
40+
</div>
7141
</td>
7242
<td class="py-3 align-baseline">
7343
<div class="prose prose-sm prose-docs-table px-2">

‎apps/website/src/components/code-copy/code-copy.tsx‎

Lines changed: 25 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,36 @@
1-
import { stringifyClassList } from '@qwik-ui/utils';
2-
import { QwikIntrinsicElements, component$, useSignal } from '@builder.io/qwik';
1+
import { cn } from '@qwik-ui/utils';
2+
import { PropsOf, QwikIntrinsicElements, component$, useSignal } from '@builder.io/qwik';
33
import { Button } from '@qwik-ui/fluffy';
4-
import { OmitSignalClass } from '@qwik-ui/utils';
54
import copy from 'clipboard-copy';
6-
import { twMerge } from 'tailwind-merge';
75

8-
export type CodeCopyProps = OmitSignalClass<QwikIntrinsicElements['button']> & {
6+
export type CodeCopyProps = PropsOf<typeof Button> & {
97
code?: string;
10-
icon?: boolean;
118
};
129

13-
export const CodeCopy = component$(
14-
({ icon = false, code = '', class: outsideClass, ...restOfProps }: CodeCopyProps) => {
15-
const copied = useSignal(false);
10+
export const CodeCopy = component$(({ code = '', class: outsideClass, ...props }) => {
11+
const copied = useSignal(false);
1612

17-
return (
18-
<Button
19-
look="ghost"
20-
intent="basic"
21-
animation={!copied.value ? 'bouncy' : 'none'}
22-
{...restOfProps}
23-
title={copied.value ? 'Copied to Clipboard' : 'Copy to Clipboard'}
24-
class={twMerge(stringifyClassList(outsideClass))}
25-
onClick$={async () => {
26-
await copy(code);
27-
copied.value = true;
13+
return (
14+
<Button
15+
look="ghost"
16+
intent="basic"
17+
animation={!copied.value ? 'bouncy' : 'none'}
18+
{...props}
19+
title={copied.value ? 'Copied to Clipboard' : 'Copy to Clipboard'}
20+
class={cn(outsideClass)}
21+
onClick$={async () => {
22+
await copy(code);
23+
copied.value = true;
2824

29-
setTimeout(() => {
30-
copied.value = false;
31-
}, 4000);
32-
}}
33-
>
34-
{!icon && (!copied.value ? 'Copy' : 'Copied!')}
35-
{icon && (!copied.value ? <CopyIcon /> : <ClipboardCheck />)}
36-
</Button>
37-
);
38-
},
39-
);
25+
setTimeout(() => {
26+
copied.value = false;
27+
}, 4000);
28+
}}
29+
>
30+
{!copied.value ? <CopyIcon /> : <ClipboardCheck />}
31+
</Button>
32+
);
33+
});
4034

4135
export function CopyIcon(props: QwikIntrinsicElements['svg'], key: string) {
4236
return (

‎apps/website/src/components/code-snippet/code-snippet.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { Highlight } from '../highlight/highlight';
88
// /src/routes/docs/components/fluffy/modal/snippets/building-blocks.tsx
99
// /src/routes/docs/components/headless/modal/snippets/building-blocks.tsx
1010

11+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
1112
const codeSnippets: any = import.meta.glob('/src/routes/docs/**/**/snippets/*', {
1213
as: 'raw',
1314
eager: isDev ? false : true,
@@ -34,7 +35,7 @@ export const CodeSnippet = component$<CodeSnippetProps>(({ name }) => {
3435
});
3536

3637
return (
37-
<div class="shadow-3xl shadow-light-medium dark:shadow-dark-medium mx-[-24px] mb-6 rounded-xl border-2 border-slate-200 dark:border-slate-400 lg:mx-[-32px]">
38+
<div class="shadow-3xl shadow-light-medium dark:shadow-dark-medium -mx-6 mb-6 rounded-xl border lg:-mx-8">
3839
<Highlight code={codeSnippetSig.value || ''} />
3940
</div>
4041
);

‎apps/website/src/components/component-status-badge/component-status-badge.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,11 +12,11 @@ export function getClassByStatus(status: ComponentStatus) {
1212
case ComponentStatus.Ready:
1313
return 'text-green-900 bg-green-300 tracking-wide';
1414
case ComponentStatus.Beta:
15-
return 'dark:text-slate-100 dark:bg-qwikui-purple-600 bg-qwikui-blue-600 text-white dark:border-qwikui-purple-600 border-[1px] border-qwikui-blue-700 tracking-wide shadow-dark-low dark:shadow-dark-low text-outline-beta';
15+
return 'border border-primary-foreground tracking-wide bg-primary text-primary-foreground';
1616
case ComponentStatus.Draft:
17-
return 'text-slate-200 bg-slate-700 dark:bg-slate-800 border-[1px] border-slate-400 shadow-dark-low tracking-wide dark:shadow-dark-low text-outline-draft';
17+
return 'border tracking-wide bg-muted text-foreground';
1818
case ComponentStatus.Planned:
19-
return 'text-white bg-slate-400 dark:bg-slate-600 border-[1px] border-slate-500 dark:border-slate-400 tracking-wide shadow-dark-low dark:shadow-dark-low text-outline-planned dark:text-outline-none';
19+
return 'text-white bg-slate-600 dark:bg-slate-500 border tracking-wide';
2020
default:
2121
return null;
2222
}
@@ -26,7 +26,7 @@ export const StatusBadge = component$<StatusBadgeProps>(({ status }) => {
2626
return (
2727
<Badge
2828
title={tooltipByStatus[status]}
29-
class={`rounded-lg p-3 text-lg font-medium leading-3 lg:px-2 lg:py-1 lg:text-xs
29+
class={`rounded-lg p-3 text-lg font-bold leading-3 shadow lg:px-2 lg:py-1 lg:text-xs
3030
${getClassByStatus(status)}`}
3131
>
3232
{status}

0 commit comments

Comments
 (0)