69 |
72 | {
73 | headings.filter(({ depth }) => depth > 1 && depth < 4).length > 0 && (
74 |
97 | )
98 | }
99 | Header
107 |
108 | {new Array(11).fill``.map((_, i) => (
109 |
112 |
113 |
196 |
197 | );
198 | };
199 |
--------------------------------------------------------------------------------
/docs/src/config.ts:
--------------------------------------------------------------------------------
1 | import { readdirSync } from 'fs';
2 |
3 | export const SITE = {
4 | title: 'WeVis Design System',
5 | description:
6 | 'WeVis design system documentation and cross-framework UI components',
7 | defaultLanguage: 'en_US',
8 | };
9 |
10 | export const OPEN_GRAPH = {
11 | image: {
12 | src: 'https://github.com/withastro/astro/blob/main/assets/social/banner-minimal.png?raw=true',
13 | alt: 'WeVis design system documentation and cross-framework UI components',
14 | },
15 | twitter: 'wevisdemo',
16 | };
17 |
18 | // This is the type of the frontmatter you put in the docs markdown files.
19 | export type Frontmatter = {
20 | title: string;
21 | description: string;
22 | layout: string;
23 | image?: { src: string; alt: string };
24 | dir?: 'ltr' | 'rtl';
25 | ogLocale?: string;
26 | lang?: string;
27 | };
28 |
29 | export type SidebarPage = { text: string; link: string };
30 | export type SidebarGroup = { header: string; pages: SidebarPage[] };
31 | export type Sidebar = (SidebarPage | SidebarGroup)[];
32 |
33 | const convertSnakeCaseToSentence = (str: string) =>
34 | str
35 | .split('-')
36 | .map((s) => `${s.charAt(0).toUpperCase()}${s.substring(1)}`)
37 | .join(' ');
38 |
39 | const getSidebarItemFromDir = (dir: string) =>
40 | readdirSync(`./src/pages/${dir}`).map((file) => {
41 | const name = file.split('.')[0];
42 |
43 | return {
44 | text: convertSnakeCaseToSentence(name),
45 | link: `${dir}/${name}`,
46 | };
47 | });
48 |
49 | export const SIDEBAR: Sidebar = [
50 | {
51 | header: 'Basics',
52 | pages: [
53 | { text: 'Getting Started', link: '' },
54 | { text: 'Typography', link: 'typography' },
55 | ],
56 | },
57 | { header: 'Components', pages: getSidebarItemFromDir('components') },
58 | { header: 'Cookbook', pages: getSidebarItemFromDir('cookbook') },
59 | ];
60 |
--------------------------------------------------------------------------------
/docs/src/env.d.ts:
--------------------------------------------------------------------------------
1 | ///
114 |
138 | Body
115 |
116 | {new Array(7).fill``.map((_, i) => (
117 |
120 | UI
121 |
122 | {new Array(5).fill``.map((_, i) => (
123 |
126 | Body Fixed
127 |
128 | {new Array(5).fill``.map((_, i) => (
129 |
136 | You can click at the style to copy.
137 |
139 |
195 |
140 |
189 |
141 |
143 | {currentScale.includes('u') ? (
144 | <>
145 | wv-{currentScale}
142 |
146 | Semibold:{' '}
147 | {U_SPEC[currentScale]?.size}px/
148 | {U_SPEC[currentScale]?.leading.semibold}%
149 |
150 |
151 | Regular:{' '}
152 | {U_SPEC[currentScale]?.size}px/
153 | {U_SPEC[currentScale]?.leading.regular}%
154 |
155 |
156 | ) : (
157 | <>
158 |
159 | Desktop:{' '}
160 | {currentScale.includes('fixed')
161 | ? BODY_FIXED_SPEC[currentScale]?.size
162 | : SPEC[currentScale]?.size.desktop}
163 | px/
164 | {currentScale.includes('fixed')
165 | ? BODY_FIXED_SPEC[currentScale]?.leading
166 | : SPEC[currentScale]?.leading}
167 | %
168 |
169 |
170 | Mobile:{' '}
171 | {currentScale.includes('fixed')
172 | ? BODY_FIXED_SPEC[currentScale]?.size
173 | : SPEC[currentScale]?.size.mobile}
174 | px/
175 | {currentScale.includes('fixed')
176 | ? BODY_FIXED_SPEC[currentScale]?.leading
177 | : SPEC[currentScale]?.leading}
178 | %
179 |
180 |
181 | )}
182 |
183 | {' '}
184 | {currentScale.includes('fixed')
185 | ? DESC['fixed']
186 | : DESC[currentScale[0]]}
187 |
188 |
192 | {currentScale}
193 |
194 |
14 |
15 | A
16 | B
17 | C
18 |
19 |
20 |
21 | ```jsx
22 | import '@wevisdemo/ui/styles/button-group.css';
23 | import '@wevisdemo/ui/styles/button.css';
24 | import WvButton from '@wevisdemo/ui/{react,vue,svelte}/button';
25 | import WvButtonGroup from '@wevisdemo/ui/{react,vue,svelte}/button-group';
26 | ```
27 |
28 | ```jsx
29 |
51 |
52 | A
53 | B
54 | C
55 |
56 |
57 |
58 | ```jsx
59 |
12 | WeVis
13 |
14 |
15 | ```jsx
16 | import '@wevisdemo/ui/styles/button-link.css';
17 | import WvButtonLink from '@wevisdemo/ui/{react,vue,svelte}/button-link';
18 | ```
19 |
20 | ```jsx
21 |
43 |
57 |
58 | ```jsx
59 |
44 |
45 | Blue (default)
46 |
47 | Black
48 |
49 |
50 |
51 |
52 |
53 | White
54 |
55 |
56 |
67 |
83 |
84 | ```jsx
85 |
68 |
69 |
70 | Blue (default)
71 |
72 |
73 | Black
74 |
75 |
76 |
77 |
78 |
79 | White
80 |
81 |
82 |
97 |
98 | WeVis
99 |
100 |
101 |
102 | ```jsx
103 |
111 |
112 |
152 | Feedback
153 |
154 |
155 |
156 | ```jsx
157 |
12 | Feedback
13 |
14 |
15 | ```jsx
16 | import '@wevisdemo/ui/styles/button.css';
17 | import WvButton from '@wevisdemo/ui/{react,vue,svelte}/button';
18 | ```
19 |
20 | ```jsx
21 |
41 |
51 |
52 | ```jsx
53 |
42 |
43 | Blue (default)
44 | Black
45 |
46 |
47 |
48 | White
49 |
50 |
61 |
75 |
76 | ```jsx
77 |
62 |
63 | Blue (default)
64 |
65 | Black
66 |
67 |
68 |
69 |
70 |
71 | White
72 |
73 |
74 |
85 |
86 |
126 | Feedback
127 |
128 |
129 |
130 | ```jsx
131 |
12 | Just a container
13 |
14 |
15 | ```jsx
16 | import '@wevisdemo/ui/styles/container.css';
17 | import WvContainer from '@wevisdemo/ui/{react,vue,svelte}/container';
18 | ```
19 |
20 | ```jsx
21 |
39 |
40 |
52 |
53 |
54 | ```jsx
55 | 41 | Lorem Ipsum is simply dummy text of the printing and typesetting industry. 42 | Lorem Ipsum has been the industry's standard dummy text ever since the 43 | 1500s, when an unknown printer took a galley of type and scrambled it to 44 | make a type specimen book. It has survived not only five centuries, but 45 | also the leap into electronic typesetting, remaining essentially 46 | unchanged. It was popularised in the 1960s with the release of Letraset 47 | sheets containing Lorem Ipsum passages, and more recently with desktop 48 | publishing software like Aldus PageMaker including versions of Lorem 49 | Ipsum. 50 |
51 |57 | Lorem Ipsum is simply dummy text of the printing and typesetting industry. 58 | Lorem Ipsum has been the industry's standard dummy text ever since the 59 | 1500s, when an unknown printer took a galley of type and scrambled it to 60 | make a type specimen book. It has survived not only five centuries, but also 61 | the leap into electronic typesetting, remaining essentially unchanged. It 62 | was popularised in the 1960s with the release of Letraset sheets containing 63 | Lorem Ipsum passages, and more recently with desktop publishing software 64 | like Aldus PageMaker including versions of Lorem Ipsum. 65 |
66 |
12 |
14 |
15 | ```jsx
16 | import '@wevisdemo/ui/styles/footer.css';
17 | import WvFooter from '@wevisdemo/ui/{react,vue,svelte}/footer';
18 | ```
19 |
20 | ```jsx
21 |
35 |
37 |
38 | ```jsx
39 |
12 |
13 | GitHub
14 |
15 |
16 |
17 | ```jsx
18 | import '@wevisdemo/ui/styles/nav-button-link.css';
19 | import WvNavButtonLink from '@wevisdemo/ui/{react,vue,svelte}/nav-button-link';
20 | ```
21 |
22 | ```jsx
23 |
46 |
47 | GitHub
48 |
49 |
50 |
51 | ```jsx
52 |
64 |
65 | WeVis
66 |
67 |
68 |
69 | ```jsx
70 |
12 | About
13 |
14 |
15 | ```jsx
16 | import '@wevisdemo/ui/styles/nav-button.css';
17 | import WvNavButton from '@wevisdemo/ui/{react,vue,svelte}/nav-button';
18 | ```
19 |
20 | ```jsx
21 |
41 | About
42 |
43 |
44 | ```jsx
45 |
51 |
52 | About
53 |
54 | Report
55 |
56 |
57 | ```jsx
58 |
12 | Topic 1
13 |
14 |
15 | ```jsx
16 | import '@wevisdemo/ui/styles/nav-dropdown-item.css';
17 | import WvNavDropdownItem from '@wevisdemo/ui/{react,vue,svelte}/nav-dropdown-item';
18 | ```
19 |
20 | ```jsx
21 |
39 | Topic 1
40 |
41 |
42 | ```jsx
43 |
14 |
15 | Topic 1
16 | Topic 2
17 | Topic 3
18 |
19 |
20 |
21 | ```jsx
22 | import '@wevisdemo/ui/styles/nav-dropdown-item.css';
23 | import '@wevisdemo/ui/styles/nav-dropdown.css';
24 | import WvNavDropdown from '@wevisdemo/ui/{react,vue,svelte}/nav-dropdown';
25 | import WvNavDropdownItem from '@wevisdemo/ui/{react,vue,svelte}/nav-dropdown-item';
26 | ```
27 |
28 | ```jsx
29 |
52 |
53 | Topic 1
54 | Topic 2
55 | Topic 3
56 |
57 |
58 |
59 | ```jsx
60 |
14 |
16 |
17 | ```jsx
18 | import '@wevisdemo/ui/styles/navbar.css';
19 | import WvNavbar from '@wevisdemo/ui/{react,vue,svelte}/navbar';
20 | ```
21 |
22 | ```jsx
23 |
50 |
51 | About
52 | Report
53 |
54 |
55 |
56 | ```jsx
57 |
66 |
67 |
68 | About
69 |
70 | Report
71 |
72 |
73 |
74 | ```jsx
75 |
86 |
88 |
89 | ```jsx
90 |
96 |
101 |
102 | ```jsx
103 |
109 |
115 |
116 | ```jsx
117 |
128 |
129 | About
130 | Report
131 |
132 |
133 |
134 | ```jsx
135 |
12 |
13 |
25 |
26 |
27 | ```jsx
28 | import '@wevisdemo/ui/styles/paragraph-group.css';
29 | import WvParagraphGroup from '@wevisdemo/ui/{react,vue,svelte}/paragraph-group';
30 | ```
31 |
32 | ```jsx
33 | 14 | Lorem Ipsum is simply dummy text of the printing and typesetting industry. 15 | Lorem Ipsum has been the industry's standard dummy text ever since the 16 | 1500s, when an unknown printer took a galley of type and scrambled it to 17 | make a type specimen book. It has survived not only five centuries, but 18 | also the leap into electronic typesetting, remaining essentially 19 | unchanged. It was popularised in the 1960s with the release of Letraset 20 | sheets containing Lorem Ipsum passages, and more recently with desktop 21 | publishing software like Aldus PageMaker including versions of Lorem 22 | Ipsum. 23 |
24 |35 | Lorem Ipsum is simply dummy text of the printing and typesetting industry. 36 | Lorem Ipsum has been the industry's standard dummy text ever since the 37 | 1500s, when an unknown printer took a galley of type and scrambled it to 38 | make a type specimen book. It has survived not only five centuries, but also 39 | the leap into electronic typesetting, remaining essentially unchanged. It 40 | was popularised in the 1960s with the release of Letraset sheets containing 41 | Lorem Ipsum passages, and more recently with desktop publishing software 42 | like Aldus PageMaker including versions of Lorem Ipsum. 43 |
44 |
63 |
64 |
70 |
71 |
72 | ```jsx
73 | 65 | Lorem Ipsum is simply dummy text of the printing and typesetting industry. 66 | It has survived not only five centuries, but also the leap into electronic 67 | typesetting, remaining essentially unchanged. 68 |
69 |75 | Lorem Ipsum is simply dummy text of the printing and typesetting industry. 76 | It has survived not only five centuries, but also the leap into electronic 77 | typesetting, remaining essentially unchanged. 78 |
79 |
12 |
14 |
15 | ```jsx
16 | import '@wevisdemo/ui/styles/sharer.css';
17 | import WvSharer from '@wevisdemo/ui/{react,vue,svelte}/sharer';
18 | ```
19 |
20 | ```jsx
21 |
41 |
44 |
45 | ```jsx
46 |
53 |
55 |
56 | ```jsx
57 |
63 |
70 |
71 | ```jsx
72 |
64 |
66 |
67 |
69 |
79 |
81 |
82 | ```jsx
83 |
89 |
100 |
101 | ```jsx
102 |
90 |
94 |
95 |
99 |
22 |
23 |
24 |
36 |
37 |
52 |
53 |
65 |
66 |
67 |
69 |
70 |
72 |
73 |
75 |
76 |
78 |
79 |
90 |
102 |
103 |
104 |
144 |
146 |
147 | 
152 | Feedback
153 |
154 |
155 |
157 |
158 |
159 | ```jsx
160 | import WvButton from '@wevisdemo/ui/react/button';
161 | import WvButtonGroup from '@wevisdemo/ui/react/button-group';
162 | import WvContainer from '@wevisdemo/ui/react/container';
163 | import WvParagraphGroup from '@wevisdemo/ui/react/paragraph-group';
164 | import WvSharer from '@wevisdemo/ui/react/sharer';
165 | import '@wevisdemo/ui/styles/button-group.css';
166 | import '@wevisdemo/ui/styles/button.css';
167 | import '@wevisdemo/ui/styles/container.css';
168 | import '@wevisdemo/ui/styles/paragraph-group.css';
169 | import '@wevisdemo/ui/styles/sharer.css';
170 |
171 | 25 | Lorem Ipsum is simply dummy text of the printing and typesetting 26 | industry. Lorem Ipsum has been the industry's standard dummy text ever 27 | since the 1500s, when an unknown printer took a galley of type and 28 | scrambled it to make a type specimen book. It has survived not only five 29 | centuries, but also the leap into electronic typesetting, remaining 30 | essentially unchanged. It was popularised in the 1960s with the release 31 | of Letraset sheets containing Lorem Ipsum passages, and more recently 32 | with desktop publishing software like Aldus PageMaker including versions 33 | of Lorem Ipsum. 34 |
35 |-
38 |
- 39 | Lorem Ipsum is simply dummy text of the printing and typesetting 40 | industry. 41 | 42 |
- 43 | Lorem Ipsum has been the industry's standard dummy text ever since the 44 | 1500s. 45 | 46 |
- 47 | It has survived not only five centuries, but also the leap into 48 | electronic typesetting, remaining essentially unchanged. 49 | 50 |
54 | Lorem Ipsum is simply dummy text of the printing and typesetting 55 | industry. Lorem Ipsum has been the industry's standard dummy text ever 56 | since the 1500s, when an unknown printer took a galley of type and 57 | scrambled it to make a type specimen book. It has survived not only five 58 | centuries, but also the leap into electronic typesetting, remaining 59 | essentially unchanged. It was popularised in the 1960s with the release 60 | of Letraset sheets containing Lorem Ipsum passages, and more recently 61 | with desktop publishing software like Aldus PageMaker including versions 62 | of Lorem Ipsum. 63 |
64 |Lorem Ipsum
68 |Lorem Ipsum
71 |Lorem Ipsum, Dolor S. Amet
74 |Lorem Ipsum
77 |80 | 86 | Punch Up 87 | 88 |
89 |91 | Lorem Ipsum is simply dummy text of the printing and typesetting 92 | industry. Lorem Ipsum has been the industry's standard dummy text ever 93 | since the 1500s, when an unknown printer took a galley of type and 94 | scrambled it to make a type specimen book. It has survived not only five 95 | centuries, but also the leap into electronic typesetting, remaining 96 | essentially unchanged. It was popularised in the 1960s with the release 97 | of Letraset sheets containing Lorem Ipsum passages, and more recently 98 | with desktop publishing software like Aldus PageMaker including versions 99 | of Lorem Ipsum. 100 |
101 |ดาวน์โหลดข้อมูล
145 |
152 | Feedback
153 | 174 | Lorem Ipsum is simply dummy text of the printing and typesetting industry. 175 | Lorem Ipsum has been the industry's standard dummy text ever since the 176 | 1500s, when an unknown printer took a galley of type and scrambled it to 177 | make a type specimen book. It has survived not only five centuries, but 178 | also the leap into electronic typesetting, remaining essentially 179 | unchanged. It was popularised in the 1960s with the release of Letraset 180 | sheets containing Lorem Ipsum passages, and more recently with desktop 181 | publishing software like Aldus PageMaker including versions of Lorem 182 | Ipsum. 183 |
184 |-
187 |
- 188 | Lorem Ipsum is simply dummy text of the printing and typesetting 189 | industry. 190 | 191 |
- 192 | Lorem Ipsum has been the industry's standard dummy text ever since the 193 | 1500s. 194 | 195 |
- 196 | It has survived not only five centuries, but also the leap into 197 | electronic typesetting, remaining essentially unchanged. 198 | 199 |
203 | Lorem Ipsum is simply dummy text of the printing and typesetting industry. 204 | Lorem Ipsum has been the industry's standard dummy text ever since the 205 | 1500s, when an unknown printer took a galley of type and scrambled it to 206 | make a type specimen book. It has survived not only five centuries, but 207 | also the leap into electronic typesetting, remaining essentially 208 | unchanged. It was popularised in the 1960s with the release of Letraset 209 | sheets containing Lorem Ipsum passages, and more recently with desktop 210 | publishing software like Aldus PageMaker including versions of Lorem 211 | Ipsum. 212 |
213 |Lorem Ipsum
217 |Lorem Ipsum
220 |Lorem Ipsum, Dolor S. Amet
223 |Lorem Ipsum
226 |229 | 235 | Punch Up 236 | 237 |
238 |240 | Lorem Ipsum is simply dummy text of the printing and typesetting industry. 241 | Lorem Ipsum has been the industry's standard dummy text ever since the 242 | 1500s, when an unknown printer took a galley of type and scrambled it to 243 | make a type specimen book. It has survived not only five centuries, but 244 | also the leap into electronic typesetting, remaining essentially 245 | unchanged. It was popularised in the 1960s with the release of Letraset 246 | sheets containing Lorem Ipsum passages, and more recently with desktop 247 | publishing software like Aldus PageMaker including versions of Lorem 248 | Ipsum. 249 |
250 |ดาวน์โหลดข้อมูล
294 |
301 | Feedback
302 |
32 |
33 |
34 | Topic 1
35 | Topic 2
36 | Topic Something
37 |
38 | About
39 | Report
40 |
41 |
42 |
43 | ```jsx
44 |
58 |
59 |
60 | Topic 1
61 | Topic 2
62 | Topic Something
63 |
64 |
65 | About
66 |
67 | Report
68 |
69 |
70 |
71 | ```jsx
72 |
16 |
17 |
19 |
20 | {props.children}
21 |
22 | );
23 | }
24 |
--------------------------------------------------------------------------------
/ui/src/components/cookie-consent/cookie-consent.css:
--------------------------------------------------------------------------------
1 | .wv_cookie-consent {
2 | @apply fixed z-50 bg-black bg-opacity-80 text-white;
3 | }
4 |
5 | .wv_cookie-consent button {
6 | @apply cursor-pointer border-none bg-transparent;
7 | }
8 |
9 | .wv_cookie-consent--banner {
10 | @apply inset-x-0 bottom-0;
11 | }
12 |
13 | .wv_cookie-consent--popup {
14 | @apply left-1/2 top-1/2 w-[600px] max-w-[100vw];
15 | transform: translate(-50%, -50%);
16 | }
17 |
18 | .wv_cookie-consent__container {
19 | @apply flex flex-col space-y-6 p-5 md:p-8;
20 | }
21 |
22 | .wv_cookie-consent--banner > .wv_cookie-consent__container {
23 | @apply mx-auto w-full max-w-screen-xl md:flex-row md:space-x-4 md:space-y-0;
24 | }
25 |
26 | .wv_cookie-consent__close {
27 | @apply absolute right-4 top-4 p-2;
28 | }
29 |
30 | .wv_cookie-consent__lang {
31 | @apply flex flex-row items-start;
32 | }
33 |
34 | .wv_cookie-consent__lang > button {
35 | @apply px-2 text-white;
36 | }
37 |
38 | .wv_cookie-consent__lang > button.inactive {
39 | @apply opacity-50 hover:opacity-70;
40 | }
41 |
42 | .wv_cookie-consent__lang > button:not(:last-child) {
43 | @apply border-0 border-r border-solid border-white border-opacity-50;
44 | }
45 |
46 | .wv_cookie-consent__options > label {
47 | @apply flex cursor-pointer flex-row items-center space-x-3 border-0 border-b border-solid border-white border-opacity-20 py-4 first-of-type:cursor-not-allowed;
48 | }
49 |
50 | .wv_cookie-consent__options > label > input {
51 | @apply cursor-[inherit];
52 | }
53 |
54 | .wv_cookie-consent__options > h2 {
55 | @apply m-0 text-white;
56 | }
57 |
58 | .wv_cookie-consent__body {
59 | @apply text-center md:text-left;
60 | }
61 |
62 | .wv_cookie-consent__body > a {
63 | @apply text-mint cursor-pointer;
64 | }
65 |
66 | .wv_cookie-consent__actions {
67 | @apply flex w-full max-w-xs flex-row items-center space-x-3;
68 | }
69 |
70 | .wv_cookie-consent__actions > button {
71 | @apply flex-1 rounded-[2px] border-[1px] border-solid border-white px-4 py-3;
72 | }
73 |
74 | .wv_cookie-consent__actions > button:first-child {
75 | @apply bg-transparent text-white hover:bg-white hover:bg-opacity-20;
76 | }
77 |
78 | .wv_cookie-consent__actions > button:last-child {
79 | @apply hover:bg-mint hover:border-mint bg-white text-black;
80 | }
81 |
--------------------------------------------------------------------------------
/ui/src/components/cookie-consent/cookie-consent.lite.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | For,
3 | onMount,
4 | Show,
5 | useDefaultProps,
6 | useStore,
7 | } from '@builder.io/mitosis';
8 |
9 | type CookieType =
10 | | 'Functionality'
11 | | 'Performance'
12 | | 'Advertising'
13 | | (string & Record{props.heading}
18 |
30 |
50 |
51 |
52 |
59 |
60 | );
61 | }
62 |
--------------------------------------------------------------------------------
/ui/src/components/navbar/navbar.css:
--------------------------------------------------------------------------------
1 | @keyframes showTittle {
2 | 0%,
3 | 11.11% {
4 | opacity: 1;
5 | }
6 | 11.12%,
7 | to {
8 | opacity: 0;
9 | }
10 | }
11 |
12 | .wv_navbar {
13 | @apply relative flex flex-row px-3 py-2 md:px-4 md:py-3;
14 | }
15 |
16 | .wv_navbar--black,
17 | .wv_navbar--black .wv_navbar__menu {
18 | @apply bg-black text-white;
19 | }
20 |
21 | .wv_navbar--black svg {
22 | @apply fill-white;
23 | }
24 |
25 | .wv_navbar--white,
26 | .wv_navbar--white .wv_navbar__menu {
27 | @apply bg-white text-black;
28 | }
29 |
30 | .wv_navbar--white svg {
31 | @apply fill-black;
32 | }
33 |
34 | .wv_navbar__logo {
35 | @apply flex flex-1 justify-start;
36 | }
37 |
38 | .wv_navbar__logo__link {
39 | @apply flex flex-row items-baseline space-x-1;
40 | }
41 |
42 | .wv_navbar__logo__wevis,
43 | .wv_navbar__logo__plus {
44 | @apply h-6 md:h-7;
45 | }
46 |
47 | .wv_navbar__logo__wevis--animated {
48 | --duration-per-one: 0.25s;
49 | }
50 |
51 | .wv_navbar__logo__wevis--animated > :not(:first-child):not(:nth-child(2)) {
52 | opacity: 0;
53 | }
54 |
55 | .wv_navbar__logo__wevis--animated > :nth-child(2) {
56 | animation: showTittle calc(var(--duration-per-one) * 9) linear 0s infinite;
57 | }
58 |
59 | .wv_navbar__logo__wevis--animated > :nth-child(3) {
60 | animation: showTittle calc(var(--duration-per-one) * 9) linear
61 | calc(var(--duration-per-one) * 1) infinite;
62 | }
63 |
64 | .wv_navbar__logo__wevis--animated > :nth-child(4) {
65 | animation: showTittle calc(var(--duration-per-one) * 9) linear
66 | calc(var(--duration-per-one) * 2) infinite;
67 | }
68 |
69 | .wv_navbar__logo__wevis--animated > :nth-child(5) {
70 | animation: showTittle calc(var(--duration-per-one) * 9) linear
71 | calc(var(--duration-per-one) * 3) infinite;
72 | }
73 |
74 | .wv_navbar__logo__wevis--animated > :nth-child(6) {
75 | animation: showTittle calc(var(--duration-per-one) * 9) linear
76 | calc(var(--duration-per-one) * 4) infinite;
77 | }
78 |
79 | .wv_navbar__logo__wevis--animated > :nth-child(7) {
80 | animation: showTittle calc(var(--duration-per-one) * 9) linear
81 | calc(var(--duration-per-one) * 5) infinite;
82 | }
83 |
84 | .wv_navbar__logo__wevis--animated > :nth-child(8) {
85 | animation: showTittle calc(var(--duration-per-one) * 9) linear
86 | calc(var(--duration-per-one) * 6) infinite;
87 | }
88 |
89 | .wv_navbar__logo__wevis--animated > :nth-child(9) {
90 | animation: showTittle calc(var(--duration-per-one) * 9) linear
91 | calc(var(--duration-per-one) * 7) infinite;
92 | }
93 |
94 | .wv_navbar__logo__wevis--animated > :nth-child(10) {
95 | animation: showTittle calc(var(--duration-per-one) * 9) linear
96 | calc(var(--duration-per-one) * 8) infinite;
97 | }
98 |
99 | .wv_navbar__logo__addon {
100 | @apply h-full max-h-6 w-auto object-contain object-left md:max-h-7;
101 | }
102 |
103 | .wv_navbar__title {
104 | @apply -mb-2 hidden items-center md:flex;
105 | }
106 |
107 | .wv_navbar__title--uppercase {
108 | @apply uppercase;
109 | }
110 |
111 | .wv_navbar__menu {
112 | @apply items-stretch md:flex-1;
113 | }
114 |
115 | .wv_navbar__menu--desktop {
116 | @apply flex flex-row justify-end space-x-2;
117 | }
118 |
119 | .wv_navbar__menu--hide-mobile {
120 | @apply hidden md:flex;
121 | }
122 |
123 | .wv_navbar__menu--always-show .wv_nav-button {
124 | @apply py-0;
125 | }
126 |
127 | .wv_navbar__menu--always-show .wv_nav-dropdown-list {
128 | @apply absolute z-20 mt-3 rounded border border-solid shadow md:mt-4;
129 | }
130 |
131 | .wv_navbar__menu--always-show .wv_nav-dropdown-item--white {
132 | @apply bg-white text-black hover:bg-black hover:bg-opacity-10;
133 | }
134 |
135 | .wv_navbar__menu--always-show .wv_nav-dropdown-item--black {
136 | @apply bg-black text-white hover:bg-white hover:bg-opacity-25;
137 | }
138 |
139 | .wv_navbar__menu--mobile {
140 | @apply absolute inset-x-0 top-full z-10 flex flex-col justify-end pb-2 md:hidden;
141 | }
142 |
143 | .wv_navbar__hamburger-button {
144 | @apply flex cursor-pointer items-center justify-center border-none bg-transparent px-2 md:hidden;
145 | }
146 |
--------------------------------------------------------------------------------
/ui/src/components/navbar/navbar.lite.tsx:
--------------------------------------------------------------------------------
1 | import { useStore, Show, useDefaultProps } from '@builder.io/mitosis';
2 | import { JSX } from '@builder.io/mitosis/jsx-runtime';
3 |
4 | interface WvNavbarProps {
5 | homeHref: string;
6 | title: string;
7 | dark: boolean;
8 | animated: boolean;
9 | alwayShowSlot: boolean;
10 | logoAddonSrc: string;
11 | logoAddonAlt: string;
12 | logoAddonWidth: string | number;
13 | logoAddonHeight: string | number;
14 | logoAddonPlus: boolean;
15 | children?: JSX.Element | JSX.Element[] | string | number;
16 | }
17 |
18 | export default function WvNavbar(props: WvNavbarProps) {
19 | useDefaultProps (state.isListOpened = false)}
55 | >
56 | {props.children}
57 |
58 |
42 |
107 | {props.title}
111 | }
112 | >
113 |
116 |
117 |
118 |
119 |
128 |
129 |
43 |
48 |
86 |
87 |
91 |
92 |
93 | 
102 |
103 |
104 |
105 |
106 |
22 |
23 |
31 |
32 | {props.children}
33 |
34 | );
35 | }
36 |
--------------------------------------------------------------------------------
/ui/src/components/sharer/sharer.css:
--------------------------------------------------------------------------------
1 | .wv_sharer {
2 | @apply flex flex-row items-center space-x-3;
3 | }
4 |
5 | .wv_sharer a {
6 | @apply flex;
7 | }
8 |
9 | .wv_sharer svg {
10 | @apply h-[30px] w-[30px];
11 | }
12 |
13 | .wv_sharer__share-link svg.copy-outline .outline,
14 | .wv_sharer svg .outline {
15 | @apply fill-none stroke-1;
16 | }
17 |
18 | .wv_sharer__share-link {
19 | @apply flex cursor-pointer border-none bg-transparent p-0;
20 | }
21 |
22 | .wv_sharer__share-link svg.copy-outline path {
23 | @apply fill-none stroke-2;
24 | }
25 |
26 | .wv_sharer--center {
27 | @apply justify-center;
28 | }
29 |
30 | .wv_sharer--dark {
31 | @apply text-black;
32 | }
33 |
34 | .wv_sharer--dark svg {
35 | @apply fill-black;
36 | }
37 |
38 | .wv_sharer--dark .outline {
39 | @apply stroke-black;
40 | }
41 |
42 | .wv_sharer--dark .wv_sharer__share-link {
43 | @apply stroke-black;
44 | }
45 |
46 | .wv_sharer--light {
47 | @apply text-white;
48 | }
49 |
50 | .wv_sharer--light svg {
51 | @apply fill-white;
52 | }
53 |
54 | .wv_sharer--light .outline {
55 | @apply stroke-white;
56 | }
57 |
58 | .wv_sharer--light .wv_sharer__share-link {
59 | @apply stroke-white;
60 | }
61 |
--------------------------------------------------------------------------------
/ui/src/components/sharer/sharer.lite.tsx:
--------------------------------------------------------------------------------
1 | import { onMount, useStore, Show, useDefaultProps } from '@builder.io/mitosis';
2 |
3 | interface WvSharerProps {
4 | url: string;
5 | label: string;
6 | hideLabel: boolean;
7 | light: boolean;
8 | center: boolean;
9 | outline: boolean;
10 | allowCopyLink: boolean;
11 | }
12 |
13 | export default function WvSharer(props: WvSharerProps) {
14 | useDefaultProps
28 | {props.heading}
29 |
30 |
41 |
42 | {props.label}
43 |
44 |
45 |
46 |
77 |
78 |
79 |
85 |
86 |
93 |
94 |
95 |
98 |
99 |
100 |
101 |
107 |
108 |
115 |
116 |
117 |
120 |
121 |
122 |
123 |
129 |
130 |
141 |
142 |
143 |
150 |
151 |
152 |
153 | );
154 | }
155 |
--------------------------------------------------------------------------------
/ui/src/styles/button-group.css:
--------------------------------------------------------------------------------
1 | @import '../components/button-group/button-group.css';
2 |
--------------------------------------------------------------------------------
/ui/src/styles/button-link.css:
--------------------------------------------------------------------------------
1 | @import '../components/button-link/button-link.css';
2 |
--------------------------------------------------------------------------------
/ui/src/styles/button.css:
--------------------------------------------------------------------------------
1 | @import '../components/button/button.css';
2 |
--------------------------------------------------------------------------------
/ui/src/styles/components.css:
--------------------------------------------------------------------------------
1 | @import '../components/button/button.css';
2 | @import '../components/button-link/button-link.css';
3 | @import '../components/button-group/button-group.css';
4 | @import '../components/container/container.css';
5 | @import '../components/cookie-consent/cookie-consent.css';
6 | @import '../components/footer/footer.css';
7 | @import '../components/navbar/navbar.css';
8 | @import '../components/nav-button/nav-button.css';
9 | @import '../components/nav-button-link/nav-button-link.css';
10 | @import '../components/nav-dropdown/nav-dropdown.css';
11 | @import '../components/nav-dropdown-item/nav-dropdown-item.css';
12 | @import '../components/paragraph-group/paragraph-group.css';
13 | @import '../components/sharer/sharer.css';
14 |
--------------------------------------------------------------------------------
/ui/src/styles/container.css:
--------------------------------------------------------------------------------
1 | @import '../components/container/container.css';
2 |
--------------------------------------------------------------------------------
/ui/src/styles/cookie-consent.css:
--------------------------------------------------------------------------------
1 | @import '../components/cookie-consent/cookie-consent.css';
2 |
--------------------------------------------------------------------------------
/ui/src/styles/footer.css:
--------------------------------------------------------------------------------
1 | @import '../components/footer/footer.css';
2 |
--------------------------------------------------------------------------------
/ui/src/styles/index.css:
--------------------------------------------------------------------------------
1 | @import './typography.css';
2 | @import './components.css';
3 |
--------------------------------------------------------------------------------
/ui/src/styles/nav-button-link.css:
--------------------------------------------------------------------------------
1 | @import '../components/nav-button-link/nav-button-link.css';
2 |
--------------------------------------------------------------------------------
/ui/src/styles/nav-button.css:
--------------------------------------------------------------------------------
1 | @import '../components/nav-button/nav-button.css';
2 |
--------------------------------------------------------------------------------
/ui/src/styles/nav-dropdown-item.css:
--------------------------------------------------------------------------------
1 | @import '../components/nav-dropdown-item/nav-dropdown-item.css';
2 |
--------------------------------------------------------------------------------
/ui/src/styles/nav-dropdown.css:
--------------------------------------------------------------------------------
1 | @import '../components/nav-dropdown/nav-dropdown.css';
2 |
--------------------------------------------------------------------------------
/ui/src/styles/navbar.css:
--------------------------------------------------------------------------------
1 | @import '../components/navbar/navbar.css';
2 |
--------------------------------------------------------------------------------
/ui/src/styles/paragraph-group.css:
--------------------------------------------------------------------------------
1 | @import '../components/paragraph-group/paragraph-group.css';
2 |
--------------------------------------------------------------------------------
/ui/src/styles/sharer.css:
--------------------------------------------------------------------------------
1 | @import '../components/sharer/sharer.css';
2 |
--------------------------------------------------------------------------------
/ui/src/styles/typography.css:
--------------------------------------------------------------------------------
1 | /* Import font face */
2 | @font-face {
3 | font-family: 'Kondolar Thai';
4 | font-display: swap;
5 | src: url(https://design-systems.wevis.info/KondolarThai-Regular.otf)
6 | format('opentype');
7 | }
8 | @font-face {
9 | font-family: 'Kondolar Thai';
10 | font-weight: 700;
11 | font-display: swap;
12 | src: url(https://design-systems.wevis.info/KondolarThai-Bold.otf)
13 | format('opentype');
14 | }
15 | @font-face {
16 | font-family: 'Kondolar Thai';
17 | font-weight: 900;
18 | font-display: swap;
19 | src: url(https://design-systems.wevis.info/KondolarThai-Black.otf)
20 | format('opentype');
21 | }
22 | @font-face {
23 | font-family: 'IBM Plex Sans Thai';
24 | font-display: swap;
25 | src: url(https://design-systems.wevis.info/IBMPlexSansThai-Regular.otf)
26 | format('opentype');
27 | }
28 | @font-face {
29 | font-family: 'IBM Plex Sans Thai';
30 | font-weight: 600;
31 | font-display: swap;
32 | src: url(https://design-systems.wevis.info/IBMPlexSansThai-SemiBold.otf)
33 | format('opentype');
34 | }
35 | @font-face {
36 | font-family: 'IBM Plex Sans Thai';
37 | font-weight: 700;
38 | font-display: swap;
39 | src: url(https://design-systems.wevis.info/IBMPlexSansThai-Bold.otf)
40 | format('opentype');
41 | }
42 | @font-face {
43 | font-family: 'IBM Plex Sans Thai Looped';
44 | font-display: swap;
45 | src: url(https://design-systems.wevis.info/IBMPlexSansThaiLooped-Regular.ttf)
46 | format('truetype');
47 | }
48 | @font-face {
49 | font-family: 'IBM Plex Sans Thai Looped';
50 | font-weight: 600;
51 | font-display: swap;
52 | src: url(https://design-systems.wevis.info/IBMPlexSansThaiLooped-SemiBold.ttf)
53 | format('truetype');
54 | }
55 | @font-face {
56 | font-family: 'IBM Plex Sans Thai Looped';
57 | font-weight: 700;
58 | font-display: swap;
59 | src: url(https://design-systems.wevis.info/IBMPlexSansThaiLooped-Bold.ttf)
60 | format('truetype');
61 | }
62 |
63 | /* Font family */
64 | .wv-kondolar {
65 | font-family: 'Kondolar Thai', ui-serif, Georgia, Cambria, 'Times New Roman',
66 | Times, serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
67 | 'Noto Color Emoji';
68 | }
69 | .wv-ibmplex {
70 | font-family:
71 | 'IBM Plex Sans Thai',
72 | ui-sans-serif,
73 | system-ui,
74 | -apple-system,
75 | BlinkMacSystemFont,
76 | 'Segoe UI',
77 | Roboto,
78 | 'Helvetica Neue',
79 | Arial,
80 | 'Noto Sans',
81 | sans-serif,
82 | 'Apple Color Emoji',
83 | 'Segoe UI Emoji',
84 | 'Segoe UI Symbol',
85 | 'Noto Color Emoji';
86 | }
87 | .wv-ibmplexlooped {
88 | font-family:
89 | 'IBM Plex Sans Thai Looped',
90 | ui-sans-serif,
91 | system-ui,
92 | -apple-system,
93 | BlinkMacSystemFont,
94 | 'Segoe UI',
95 | Roboto,
96 | 'Helvetica Neue',
97 | Arial,
98 | 'Noto Sans',
99 | sans-serif,
100 | 'Apple Color Emoji',
101 | 'Segoe UI Emoji',
102 | 'Segoe UI Symbol',
103 | 'Noto Color Emoji';
104 | }
105 |
106 | /* Font weight */
107 | .wv-bold {
108 | @apply font-bold;
109 | }
110 | .wv-semibold {
111 | @apply font-semibold;
112 | }
113 | .wv-black {
114 | @apply font-black;
115 | }
116 |
117 | /* Heading size */
118 | .wv-h1 {
119 | @apply text-[60px] leading-[1.25] md:text-[100px];
120 | }
121 |
122 | .wv-h2 {
123 | @apply text-[48px] leading-[1.25] md:text-[72px];
124 | }
125 |
126 | .wv-h3 {
127 | @apply text-[36px] leading-[1.25] md:text-[60px];
128 | }
129 |
130 | .wv-h4 {
131 | @apply text-[32px] leading-[1.25] md:text-[48px];
132 | }
133 |
134 | .wv-h5 {
135 | @apply text-[28px] leading-[1.25] md:text-[36px];
136 | }
137 |
138 | .wv-h6 {
139 | @apply text-[24px] leading-[1.25] md:text-[32px];
140 | }
141 |
142 | .wv-h7 {
143 | @apply text-[21px] leading-[1.25] md:text-[28px];
144 | }
145 |
146 | .wv-h8 {
147 | @apply text-[18px] leading-[1.25] md:text-[24px];
148 | }
149 |
150 | .wv-h9 {
151 | @apply text-[16px] leading-[1.25] md:text-[21px];
152 | }
153 |
154 | .wv-h10 {
155 | @apply text-[15px] leading-[1.25] md:text-[18px];
156 | }
157 |
158 | .wv-h11 {
159 | @apply text-[14px] leading-[1.25] md:text-[16px];
160 | }
161 |
162 | /* Body size */
163 | .wv-b1 {
164 | @apply text-[24px] leading-[1.5] md:text-[32px];
165 | }
166 |
167 | .wv-b2 {
168 | @apply text-[21px] leading-[1.5] md:text-[24px];
169 | }
170 |
171 | .wv-b3 {
172 | @apply text-[18px] leading-[1.5] md:text-[21px];
173 | }
174 |
175 | .wv-b4 {
176 | @apply text-[16px] leading-[1.5] md:text-[18px];
177 | }
178 |
179 | .wv-b5 {
180 | @apply text-[14px] leading-[1.5] md:text-[16px];
181 | }
182 |
183 | .wv-b6 {
184 | @apply text-[12px] leading-[1.5] md:text-[14px];
185 | }
186 |
187 | .wv-b7 {
188 | @apply text-[10px] leading-[1.5] md:text-[12px];
189 | }
190 |
191 | .wv-u1 {
192 | @apply text-[20px] leading-[1.25];
193 | }
194 |
195 | .wv-u2 {
196 | @apply text-[18px] leading-[1.25];
197 | }
198 |
199 | .wv-u3 {
200 | @apply text-[16px] leading-[1.25];
201 | }
202 |
203 | .wv-u4 {
204 | @apply text-[14px] leading-[1.25];
205 | }
206 |
207 | .wv-u5 {
208 | @apply text-[12px] leading-[1.25];
209 | }
210 |
211 | /* Body fixed size */
212 | .wv-fixed-b1 {
213 | @apply text-[21px] leading-[1.5];
214 | }
215 | .wv-fixed-b2 {
216 | @apply text-[18px] leading-[1.5];
217 | }
218 | .wv-fixed-b3 {
219 | @apply text-[16px] leading-[1.5];
220 | }
221 | .wv-fixed-b4 {
222 | @apply text-[14px] leading-[1.5];
223 | }
224 | .wv-fixed-b5 {
225 | @apply text-[12px] leading-[1.5];
226 | }
227 |
--------------------------------------------------------------------------------
/ui/svelte.config.js:
--------------------------------------------------------------------------------
1 | import adapter from '@sveltejs/adapter-auto';
2 | import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
3 |
4 | /** @type {import('@sveltejs/kit').Config} */
5 | const config = {
6 | preprocess: vitePreprocess({
7 | typescript: {
8 | tsconfigFile: 'tsconfig.svelte.json',
9 | },
10 | }),
11 | kit: {
12 | adapter: adapter(),
13 | },
14 | };
15 |
16 | export default config;
17 |
--------------------------------------------------------------------------------
/ui/tailwind.config.cjs:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | content: ['./src/components/**/*.jsx'],
3 | theme: {
4 | extend: {},
5 | colors: {
6 | transparent: 'transparent',
7 | white: '#ffffff',
8 | black: '#000000',
9 | ultramarine: '#3904E9',
10 | mint: '#A5EBD7',
11 | none: 'none',
12 | },
13 | },
14 | plugins: [],
15 | };
16 |
--------------------------------------------------------------------------------
/ui/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "strict": true,
4 | "target": "esnext",
5 | "jsx": "preserve",
6 | "esModuleInterop": true,
7 | "skipLibCheck": true,
8 | "forceConsistentCasingInFileNames": true,
9 | "jsxImportSource": "@builder.io/mitosis",
10 | "moduleResolution": "node"
11 | },
12 | "include": ["src"]
13 | }
14 |
--------------------------------------------------------------------------------
/ui/tsconfig.react.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "outDir": "react",
4 | "module": "esnext",
5 | "target": "es5",
6 | "lib": ["es6", "dom", "es2016", "es2017"],
7 | "jsx": "react",
8 | "moduleResolution": "node",
9 | "declaration": true
10 | },
11 | "include": [".mitosis/react"],
12 | "exclude": []
13 | }
14 |
--------------------------------------------------------------------------------
/ui/tsconfig.svelte.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./.svelte-kit/tsconfig.json",
3 | "compilerOptions": {
4 | "allowJs": true,
5 | "checkJs": true,
6 | "esModuleInterop": true,
7 | "forceConsistentCasingInFileNames": true,
8 | "resolveJsonModule": true,
9 | "skipLibCheck": true,
10 | "sourceMap": true,
11 | "strict": true
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/ui/tsconfig.vue.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "esnext",
4 | "module": "esnext",
5 | "moduleResolution": "node",
6 | "allowJs": true,
7 | "skipLibCheck": true,
8 | "esModuleInterop": true,
9 | "outDir": "vue",
10 | "declaration": true,
11 | "types": ["vite/client"],
12 | "lib": ["esnext", "dom", "dom.iterable", "scripthost"]
13 | },
14 | "include": [".mitosis/vue"]
15 | }
16 |
--------------------------------------------------------------------------------
/ui/vite.config.vue.ts:
--------------------------------------------------------------------------------
1 | import vue from '@vitejs/plugin-vue';
2 | import { readdirSync } from 'fs';
3 | import { defineConfig } from 'vite';
4 | import dts from 'vite-plugin-dts';
5 |
6 | const SOURCE_PATH = '.mitosis/vue';
7 |
8 | export default defineConfig({
9 | plugins: [
10 | vue(),
11 | dts({
12 | tsconfigPath: 'tsconfig.vue.json',
13 | cleanVueFileName: true,
14 | }),
15 | ],
16 | build: {
17 | lib: {
18 | entry: readdirSync(SOURCE_PATH).map((file) => `${SOURCE_PATH}/${file}`),
19 | formats: ['es'],
20 | },
21 | rollupOptions: {
22 | external: ['vue'],
23 | output: {
24 | globals: {
25 | vue: 'Vue',
26 | },
27 | },
28 | },
29 | outDir: 'vue',
30 | minify: false,
31 | },
32 | });
33 |
--------------------------------------------------------------------------------