Skip to content

Commit 5bbfc71

Browse files
thejacksheltonthejackshelton
authored
Merge branch 'main' into info-popover
2 parents ebf5509 + e2c7afc commit 5bbfc71

Some content is hidden

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

54 files changed

+4207
-1541
lines changed

‎.gitignore‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ lib-types
66

77
# Development
88
node_modules
9-
migrations.json
9+
#migrations.json
1010

1111
# Cache
1212
.cache

‎.vscode/launch.json‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
// Use IntelliSense to learn about possible attributes.
3+
// Hover to view descriptions of existing attributes.
4+
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
5+
"version": "0.2.0",
6+
"configurations": [
7+
{
8+
"type": "chrome",
9+
"request": "launch",
10+
"name": "Launch Chrome against localhost",
11+
"url": "http://localhost:8080",
12+
"webRoot": "${workspaceFolder}"
13+
}
14+
]
15+
}

‎.vscode/qwik.code-snippets‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
{
2+
"Qwik component (simple)": {
3+
"scope": "javascriptreact,typescriptreact",
4+
"prefix": "qcomponent$",
5+
"description": "Simple Qwik component",
6+
"body": [
7+
"export const ${1:${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}} = component$(() => {",
8+
" return <${2:div}>$4</$2>",
9+
"});"
10+
]
11+
},
12+
"Qwik component (props)": {
13+
"scope": "typescriptreact",
14+
"prefix": "qcomponent$ + props",
15+
"description": "Qwik component w/ props",
16+
"body": [
17+
"export interface ${1:${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}}Props {",
18+
" $2",
19+
"}",
20+
"",
21+
"export const $1 = component$<$1Props>((props) => {",
22+
" const ${2:count} = useSignal(0);",
23+
" return (",
24+
" <${3:div} on${4:Click}$={(ev) => {$5}}>",
25+
" $6",
26+
" </${3}>",
27+
" );",
28+
"});"
29+
]
30+
},
31+
"Qwik signal": {
32+
"scope": "javascriptreact,typescriptreact",
33+
"prefix": "quseSignal",
34+
"description": "useSignal() declaration",
35+
"body": ["const ${1:foo} = useSignal($2);", "$0"]
36+
},
37+
"Qwik store": {
38+
"scope": "javascriptreact,typescriptreact",
39+
"prefix": "quseStore",
40+
"description": "useStore() declaration",
41+
"body": ["const ${1:state} = useStore({", " $2", "});", "$0"]
42+
},
43+
"$ hook": {
44+
"scope": "javascriptreact,typescriptreact",
45+
"prefix": "q$",
46+
"description": "$() function hook",
47+
"body": ["$(() => {", " $0", "});", ""]
48+
},
49+
"useVisibleTask": {
50+
"scope": "javascriptreact,typescriptreact",
51+
"prefix": "quseVisibleTask",
52+
"description": "useVisibleTask$() function hook",
53+
"body": ["useVisibleTask$(({ track }) => {", " $0", "});", ""]
54+
},
55+
"useTask": {
56+
"scope": "javascriptreact,typescriptreact",
57+
"prefix": "quseTask$",
58+
"description": "useTask$() function hook",
59+
"body": [
60+
"useTask$(({ track }) => {",
61+
" track(() => $1);",
62+
" $0",
63+
"});",
64+
""
65+
]
66+
},
67+
"useResource": {
68+
"scope": "javascriptreact,typescriptreact",
69+
"prefix": "quseResource$",
70+
"description": "useResource$() declaration",
71+
"body": [
72+
"const $1 = useResource$(({ track, cleanup }) => {",
73+
" $0",
74+
"});",
75+
""
76+
]
77+
}
78+
}

‎apps/website/package.json‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
11
{
22
"name": "@qwik-ui/website",
33
"description": "The Qwik UI Website",
4-
"private": true
4+
"private": true,
5+
"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"
10+
}
511
}

‎apps/website/postcss.config.cjs‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ const path = require('path');
22

33
module.exports = {
44
plugins: {
5+
'tailwindcss/nesting': 'postcss-nested',
56
tailwindcss: {
67
config: path.join(__dirname, 'tailwind.config.cjs'),
78
},

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ export const componentsStatuses: ComponentKitsStatuses = {
4444
Carousel: 'Planned',
4545
Popover: 'Planned',
4646
Select: 'Draft',
47-
Tabs: 'Planned',
47+
Tabs: 'Ready',
4848
Toggle: 'Planned',
4949
Tooltip: 'Planned',
5050
},

‎apps/website/src/components/alpha-banner/alpha-banner.tsx‎

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
import {
2+
QwikIntrinsicElements,
3+
Slot,
4+
component$,
5+
useSignal,
6+
useStylesScoped$,
7+
} from '@builder.io/qwik';
8+
9+
export const AlphaBanner = component$(() => {
10+
const ref = useSignal<HTMLElement | undefined>();
11+
const isClosed = useSignal(false);
12+
13+
useStylesScoped$(`
14+
.normal-state {
15+
transition: margin-top 0.5s ease;
16+
}
17+
18+
/*
19+
if you see these media queries I'm sorry xd. Normally, you would use a transform here, since it reflects the elements size, but margin-top affects the siblig elements, and is the only way I can animate the upwards slide (without JS) in this component.
20+
21+
I could do it with JS using RequestAnimationFrame
22+
-Jack
23+
*/
24+
25+
.fade {
26+
animation: fadeOut 0.5s ease forwards;
27+
margin-top: -256px;
28+
}
29+
30+
@media (min-width: 336px) {
31+
.fade {
32+
margin-top: -232px;
33+
}
34+
}
35+
36+
@media (min-width: 365px) {
37+
.fade {
38+
margin-top: -208px;
39+
}
40+
}
41+
42+
@media (min-width: 405px) {
43+
.fade {
44+
margin-top: -184px;
45+
}
46+
}
47+
48+
@media (min-width: 479px) {
49+
.fade {
50+
margin-top: -160px;
51+
}
52+
}
53+
54+
@media (min-width: 812px) {
55+
.fade {
56+
margin-top: -112px
57+
}
58+
}
59+
60+
@keyframes fadeOut {
61+
from {
62+
opacity: 1;
63+
}
64+
to {
65+
opacity: 0;
66+
}
67+
}
68+
`);
69+
70+
return (
71+
<>
72+
<div
73+
ref={ref}
74+
hidden={isClosed.value}
75+
onAnimationEnd$={() => (isClosed.value = true)}
76+
class="bg-[#fef1c7] dark:bg-[#92730e] mb-8 px-6 py-4 rounded-xl md:items-center relative md:flex-row normal-state shadow-depth dark:shadow-depth-dark"
77+
>
78+
<span class="pr-2">
79+
<strong>WARNING:</strong> This component is currently in Alpha, and
80+
not intended to use in production. You may use it for testing
81+
purposes, or use a component with the <strong>Ready</strong> state
82+
</span>
83+
<button
84+
onClick$={() => ref.value?.classList.toggle('fade')}
85+
class="scale-150 absolute top-2 right-2"
86+
>
87+
<EpCircleCloseFilled />
88+
</button>
89+
</div>
90+
</>
91+
);
92+
});
93+
94+
export function EpCircleCloseFilled(
95+
props: QwikIntrinsicElements['svg'],
96+
key: string
97+
) {
98+
return (
99+
<svg
100+
xmlns="http://www.w3.org/2000/svg"
101+
width="1em"
102+
height="1em"
103+
viewBox="0 0 1024 1024"
104+
{...props}
105+
key={key}
106+
>
107+
<path
108+
fill="currentColor"
109+
d="M512 64a448 448 0 1 1 0 896a448 448 0 0 1 0-896zm0 393.664L407.936 353.6a38.4 38.4 0 1 0-54.336 54.336L457.664 512L353.6 616.064a38.4 38.4 0 1 0 54.336 54.336L512 566.336L616.064 670.4a38.4 38.4 0 1 0 54.336-54.336L566.336 512L670.4 407.936a38.4 38.4 0 1 0-54.336-54.336L512 457.664z"
110+
></path>
111+
</svg>
112+
);
113+
}

‎apps/website/src/components/preview-code-example/preview-code-example.tsx‎

Lines changed: 18 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,27 @@
1-
import { component$, Slot } from '@builder.io/qwik';
1+
import {
2+
component$,
3+
Slot,
4+
useStyles$,
5+
useStylesScoped$,
6+
} from '@builder.io/qwik';
27
import { Tab, TabList, TabPanel, Tabs } from '@qwik-ui/headless';
38

49
export const PreviewCodeExample = component$(() => {
10+
useStyles$(`
11+
.dark .previewCodeExampleSelectedTab{
12+
background-color: #423dff;
13+
}
14+
.previewCodeExampleSelectedTab{
15+
background-color: #6daeff;
16+
}
17+
`);
518
return (
6-
<Tabs class="mb-12">
7-
<TabList class="flex rounded-t-xl px-4 bg-blue-200 dark:bg-indigo-900">
8-
<Tab class="px-4 py-2 hover:bg-[var(--qwik-light-blue)] dark:hover:bg-[var(--qwik-dark-purple)]">
19+
<Tabs class="mb-12" selectedClassName="previewCodeExampleSelectedTab">
20+
<TabList class="flex rounded-t-xl bg-blue-200 dark:bg-indigo-900">
21+
<Tab class="px-4 py-2 rounded-tl-xl hover:bg-[#6daeff] dark:hover:bg-[#423dff]">
922
Preview
1023
</Tab>
11-
<Tab class="px-4 py-2 hover:bg-[var(--qwik-light-blue)] dark:hover:bg-[var(--qwik-dark-purple)]">
24+
<Tab class="px-4 py-2 hover:bg-[#6daeff] dark:hover:bg-[#423dff]">
1225
Code
1326
</Tab>
1427
</TabList>

‎apps/website/src/global.css‎

Lines changed: 36 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,42 @@
4444
--dark-color-text: rgb(203 213 225);
4545
--light-color-bg: rgb(203 213 225);
4646
--light-color-text: #333;
47+
48+
--shadow-color: 0deg 0% 63%;
49+
--shadow-elevation-low: 0.5px 0.6px 0.9px hsl(var(--shadow-color) / 0.34),
50+
0.9px 1px 1.5px -1.2px hsl(var(--shadow-color) / 0.34),
51+
2.1px 2.3px 3.5px -2.5px hsl(var(--shadow-color) / 0.34);
52+
--shadow-elevation-medium: 0.5px 0.6px 0.9px hsl(var(--shadow-color) / 0.36),
53+
1.7px 1.9px 2.9px -0.8px hsl(var(--shadow-color) / 0.36),
54+
4.3px 4.8px 7.2px -1.7px hsl(var(--shadow-color) / 0.36),
55+
10.4px 11.6px 17.5px -2.5px hsl(var(--shadow-color) / 0.36);
56+
--shadow-elevation-high: 0.5px 0.6px 0.9px hsl(var(--shadow-color) / 0.34),
57+
3px 3.4px 5.1px -0.4px hsl(var(--shadow-color) / 0.34),
58+
5.6px 6.3px 9.5px -0.7px hsl(var(--shadow-color) / 0.34),
59+
9.3px 10.4px 15.7px -1.1px hsl(var(--shadow-color) / 0.34),
60+
14.8px 16.6px 25px -1.4px hsl(var(--shadow-color) / 0.34),
61+
23.1px 26px 39.1px -1.8px hsl(var(--shadow-color) / 0.34),
62+
35.1px 39.5px 59.4px -2.1px hsl(var(--shadow-color) / 0.34),
63+
51.8px 58.2px 87.7px -2.5px hsl(var(--shadow-color) / 0.34);
64+
65+
--dark-shadow-color: 218deg 49% 7%;
66+
--dark-shadow-elevation-low: 0.5px 0.6px 0.9px hsl(var(--shadow-color) / 0.34),
67+
0.9px 1.1px 1.6px -1.2px hsl(var(--dark-shadow-color) / 0.34),
68+
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),
71+
1.8px 2.1px 3.1px -0.8px hsl(var(--dark-shadow-color) / 0.36),
72+
4.4px 5.3px 7.7px -1.7px hsl(var(--dark-shadow-color) / 0.36),
73+
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),
76+
3.1px 3.7px 5.4px -0.4px hsl(var(--dark-shadow-color) / 0.34),
77+
5.9px 7px 10.3px -0.7px hsl(var(--dark-shadow-color) / 0.34),
78+
9.6px 11.5px 16.9px -1.1px hsl(var(--dark-shadow-color) / 0.34),
79+
15.4px 18.3px 26.9px -1.4px hsl(var(--dark-shadow-color) / 0.34),
80+
24.1px 28.6px 42.1px -1.8px hsl(var(--dark-shadow-color) / 0.34),
81+
36.6px 43.5px 64px -2.1px hsl(var(--dark-shadow-color) / 0.34),
82+
53.9px 64.1px 94.2px -2.5px hsl(var(--dark-shadow-color) / 0.34);
4783
}
4884

4985
.light {
@@ -67,16 +103,6 @@ html {
67103
font-family: 'Poppins', sans-serif;
68104
}
69105

70-
[data-theme='light'] {
71-
--color-bg: rgb(203 213 225);
72-
--color-text: #333;
73-
}
74-
75-
[data-theme='dark'] {
76-
--color-bg: rgb(30 41 59);
77-
--color-text: rgb(203 213 225);
78-
}
79-
80106
body {
81107
min-height: 100%;
82108
}

0 commit comments

Comments
 (0)