revotech-ui-kit 0.0.5-beta → 0.0.7-beta
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/index.ts +1 -1
- package/dist/rollup-plugin-html-noop.js +1 -0
- package/dist/sw.js +1 -1
- package/dist/sw.js.map +1 -1
- package/package.json +5 -4
- package/.editorconfig +0 -29
- package/.eslintrc +0 -10
- package/.github/workflows/deploy-storybook.yml +0 -107
- package/.storybook/main.ts +0 -17
- package/.storybook/preview-head.html +0 -1
- package/.storybook/preview.ts +0 -17
- package/assets/fonts/Geist/Geist-Black.otf +0 -0
- package/assets/fonts/Geist/Geist-Black.woff2 +0 -0
- package/assets/fonts/Geist/Geist-Bold.otf +0 -0
- package/assets/fonts/Geist/Geist-Bold.woff2 +0 -0
- package/assets/fonts/Geist/Geist-Light.otf +0 -0
- package/assets/fonts/Geist/Geist-Light.woff2 +0 -0
- package/assets/fonts/Geist/Geist-Medium.otf +0 -0
- package/assets/fonts/Geist/Geist-Medium.woff2 +0 -0
- package/assets/fonts/Geist/Geist-Regular.otf +0 -0
- package/assets/fonts/Geist/Geist-Regular.woff2 +0 -0
- package/assets/fonts/Geist/Geist-SemiBold.otf +0 -0
- package/assets/fonts/Geist/Geist-SemiBold.woff2 +0 -0
- package/assets/fonts/Geist/Geist-Thin.otf +0 -0
- package/assets/fonts/Geist/Geist-Thin.woff2 +0 -0
- package/assets/fonts/Geist/Geist-UltraBlack.otf +0 -0
- package/assets/fonts/Geist/Geist-UltraBlack.woff2 +0 -0
- package/assets/fonts/Geist/Geist-UltraLight.otf +0 -0
- package/assets/fonts/Geist/Geist-UltraLight.woff2 +0 -0
- package/assets/fonts/Geist/GeistVariableVF.ttf +0 -0
- package/assets/fonts/Geist/GeistVariableVF.woff2 +0 -0
- package/assets/fonts/Geist/LICENSE.TXT +0 -92
- package/assets/open-wc-logo.svg +0 -29
- package/assume_role.sh +0 -18
- package/index.html +0 -314
- package/rollup.config.js +0 -83
- package/src/assets/icons/arrows.icon.ts +0 -20
- package/src/assets/icons/index.ts +0 -3
- package/src/assets/icons/search.icon.ts +0 -19
- package/src/assets/icons/tick.icon.ts +0 -20
- package/src/chai-custom.d.ts +0 -0
- package/src/components/atoms/alert/alert-description.ts +0 -15
- package/src/components/atoms/alert/alert-title.ts +0 -17
- package/src/components/atoms/alert/alert.atom.ts +0 -55
- package/src/components/atoms/alert/alert.stories.ts +0 -71
- package/src/components/atoms/alert/alert.styles.ts +0 -21
- package/src/components/atoms/alert/alert.types.ts +0 -1
- package/src/components/atoms/badge/badge.atom.ts +0 -40
- package/src/components/atoms/badge/badge.stories.ts +0 -118
- package/src/components/atoms/badge/badge.style.ts +0 -24
- package/src/components/atoms/badge/badge.type.ts +0 -7
- package/src/components/atoms/button/button.atom.ts +0 -59
- package/src/components/atoms/button/button.stories.ts +0 -224
- package/src/components/atoms/button/button.style.ts +0 -31
- package/src/components/atoms/button/button.type.ts +0 -10
- package/src/components/atoms/card/card-content.ts +0 -15
- package/src/components/atoms/card/card-description.ts +0 -15
- package/src/components/atoms/card/card-footer.ts +0 -15
- package/src/components/atoms/card/card-header.ts +0 -15
- package/src/components/atoms/card/card-title.ts +0 -15
- package/src/components/atoms/card/card.atom.ts +0 -31
- package/src/components/atoms/card/card.stories.ts +0 -149
- package/src/components/atoms/checkbox/checkbox.atom.ts +0 -76
- package/src/components/atoms/checkbox/checkbox.stories.ts +0 -309
- package/src/components/atoms/checkbox/checkbox.style.ts +0 -5
- package/src/components/atoms/checkbox/checkbox.type.ts +0 -24
- package/src/components/atoms/combo-box/combo-box-input.ts +0 -33
- package/src/components/atoms/combo-box/combo-box-item.ts +0 -59
- package/src/components/atoms/combo-box/combo-box-list.ts +0 -57
- package/src/components/atoms/combo-box/combo-box.atom.ts +0 -187
- package/src/components/atoms/combo-box/combo-box.stories.ts +0 -95
- package/src/components/atoms/command-empty/command-empty.atom.ts +0 -44
- package/src/components/atoms/command-group/command-group.atom.ts +0 -60
- package/src/components/atoms/command-item/command-item.atom.ts +0 -74
- package/src/components/atoms/command-list/command-list.atom.ts +0 -37
- package/src/components/atoms/command-separator/command-separator.atom.ts +0 -42
- package/src/components/atoms/dialog/dialog-close.ts +0 -50
- package/src/components/atoms/dialog/dialog-content.ts +0 -71
- package/src/components/atoms/dialog/dialog-footer.ts +0 -22
- package/src/components/atoms/dialog/dialog-header.ts +0 -36
- package/src/components/atoms/dialog/dialog-overly.ts +0 -20
- package/src/components/atoms/dialog/dialog-trigger.ts +0 -54
- package/src/components/atoms/dialog/dialog.atom.ts +0 -78
- package/src/components/atoms/dialog/dialog.stories.ts +0 -93
- package/src/components/atoms/dropdownMenu/dropdown-menu-checkbox-Item.ts +0 -106
- package/src/components/atoms/dropdownMenu/dropdown-menu-content.ts +0 -79
- package/src/components/atoms/dropdownMenu/dropdown-menu-group.ts +0 -60
- package/src/components/atoms/dropdownMenu/dropdown-menu-item.ts +0 -74
- package/src/components/atoms/dropdownMenu/dropdown-menu-radio-item.ts +0 -107
- package/src/components/atoms/dropdownMenu/dropdown-menu-seperator.ts +0 -44
- package/src/components/atoms/dropdownMenu/dropdown-menu-shortcut.ts +0 -17
- package/src/components/atoms/dropdownMenu/dropdown-menu.atom.ts +0 -84
- package/src/components/atoms/dropdownMenu/dropdownMenu.stories.ts +0 -220
- package/src/components/atoms/dropdownMenu/dropdownMenu.style.ts +0 -7
- package/src/components/atoms/index.ts +0 -13
- package/src/components/atoms/input/input.atom.ts +0 -88
- package/src/components/atoms/input/input.stories.ts +0 -451
- package/src/components/atoms/input/input.styles.ts +0 -2
- package/src/components/atoms/input/input.type.ts +0 -58
- package/src/components/atoms/label/label.atom.ts +0 -64
- package/src/components/atoms/label/label.stories.ts +0 -102
- package/src/components/atoms/label/label.style.ts +0 -5
- package/src/components/atoms/popover/popover-content.ts +0 -58
- package/src/components/atoms/popover/popover-trigger.ts +0 -50
- package/src/components/atoms/popover/popover.atom.ts +0 -34
- package/src/components/atoms/popover/popover.stories.ts +0 -79
- package/src/components/atoms/popover/popover.style.ts +0 -25
- package/src/components/atoms/popover/popover.types.ts +0 -3
- package/src/components/atoms/toggle/defs.ts +0 -29
- package/src/components/atoms/toggle/toggle.atom.ts +0 -58
- package/src/components/atoms/toggle/toggle.stories.ts +0 -204
- package/src/components/atoms/toggle/toggle.style.ts +0 -22
- package/src/components/command/command.stories.ts +0 -154
- package/src/components/command/command.ts +0 -391
- package/src/components/index.ts +0 -2
- package/src/components/molecules/command/command.molecules.ts +0 -31
- package/src/components/molecules/command-input/command-input.atom.ts +0 -130
- package/src/components/molecules/dropdownMenu/dropdownMenu.molecules.ts +0 -0
- package/src/components/molecules/index.ts +0 -1
- package/src/globals.css +0 -2215
- package/src/helpers/base-element.ts +0 -79
- package/src/helpers/index.ts +0 -3
- package/src/helpers/mouse-conroller.helper.ts +0 -42
- package/src/helpers/style.helpers.ts +0 -6
- package/src/index.d.ts +0 -1
- package/src/index.ts +0 -1
- package/src/interfaces/actionable.interface.ts +0 -6
- package/src/interfaces/atomic.interface.ts +0 -6
- package/src/interfaces/changeable.interface.ts +0 -14
- package/src/interfaces/child-support-atomic.interface.ts +0 -5
- package/src/interfaces/index.ts +0 -6
- package/src/interfaces/intractable.interface.ts +0 -6
- package/src/interfaces/variant.interface.ts +0 -3
- package/src/lib/index.ts +0 -0
- package/src/lib/next/next.lib.ts +0 -0
- package/src/lib/react/react.lib.ts +0 -18
- package/src/lib/tw-styles.ts +0 -1957
- package/src/styles/index.ts +0 -1
- package/src/styles/tw.styles.ts +0 -2219
- package/src/tailwind-lib.css +0 -115
- package/src/wc-ui-app.ts +0 -81
- package/tailwind.config.js +0 -217
- package/test/wc-ui-app.test.ts +0 -22
- package/tsconfig.json +0 -30
- package/web-dev-server.config.mjs +0 -26
- package/web-test-runner.config.mjs +0 -41
package/index.html
DELETED
|
@@ -1,314 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="en">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="utf-8" />
|
|
5
|
-
<meta
|
|
6
|
-
name="viewport"
|
|
7
|
-
content="width=device-width, initial-scale=1.0, viewport-fit=cover"
|
|
8
|
-
/>
|
|
9
|
-
<meta name="Description" content="Put your description here." />
|
|
10
|
-
<base href="/" />
|
|
11
|
-
<link href="./src/globals.css" rel="stylesheet" />
|
|
12
|
-
<link href="./src/tailwind-lib.css" rel="stylesheet" />
|
|
13
|
-
<script src="https://code.iconify.design/iconify-icon/2.0.0/iconify-icon.min.js"></script>
|
|
14
|
-
|
|
15
|
-
<style>
|
|
16
|
-
html,
|
|
17
|
-
body {
|
|
18
|
-
margin: 0;
|
|
19
|
-
padding: 0;
|
|
20
|
-
background-color: white;
|
|
21
|
-
}
|
|
22
|
-
</style>
|
|
23
|
-
<title>rtg-web-ui-app</title>
|
|
24
|
-
</head>
|
|
25
|
-
|
|
26
|
-
<body>
|
|
27
|
-
<div class="container mx-auto my-10">
|
|
28
|
-
<h1 class="text-4xl text-center">Web Components</h1>
|
|
29
|
-
<h2 class="text-2xl text-center">Button</h2>
|
|
30
|
-
</div>
|
|
31
|
-
<div class="flex flex-wrap justify-between space-x-4 gap-5 mx-3">
|
|
32
|
-
<rtg-button>Primary</rtg-button>
|
|
33
|
-
<rtg-button variant="secondary">Secodary</rtg-button>
|
|
34
|
-
<rtg-button variant="destructive">Destructive</rtg-button>
|
|
35
|
-
<rtg-button variant="outline">Outline</rtg-button>
|
|
36
|
-
<rtg-button variant="ghost">Ghost</rtg-button>
|
|
37
|
-
<rtg-button variant="link">Link</rtg-button>
|
|
38
|
-
<rtg-button variant="outline" size="icon"
|
|
39
|
-
><iconify-icon icon="mdi:home"></iconify-icon
|
|
40
|
-
></rtg-button>
|
|
41
|
-
<rtg-button
|
|
42
|
-
><iconify-icon class="mr-2" icon="mdi:home"></iconify-icon> Home
|
|
43
|
-
Page</rtg-button
|
|
44
|
-
>
|
|
45
|
-
<rtg-button disabled
|
|
46
|
-
><iconify-icon class="mr-2 animate-spin" icon="mdi:home"></iconify-icon>
|
|
47
|
-
Home Page</rtg-button
|
|
48
|
-
>
|
|
49
|
-
</div>
|
|
50
|
-
<div class="container mx-auto my-10">
|
|
51
|
-
<h2 class="text-2xl text-center">Labels</h2>
|
|
52
|
-
</div>
|
|
53
|
-
<div class="flex items-center space-x-2 mx-2">
|
|
54
|
-
<rtg-checkbox id="terms"></rtg-checkbox>
|
|
55
|
-
<rtg-label for="terms">Accept terms and conditions</rtg-label>
|
|
56
|
-
</div>
|
|
57
|
-
<div class="container mx-auto my-10">
|
|
58
|
-
<h2 class="text-2xl text-center">Inputs</h2>
|
|
59
|
-
</div>
|
|
60
|
-
<div class="flex flex-wrap space-x-4 gap-5 mx-3">
|
|
61
|
-
<rtg-input type="email" placeholder="Email" class="min-w-80"></rtg-input>
|
|
62
|
-
<div class="grid w-full max-w-sm items-center gap-1.5 min-w-80">
|
|
63
|
-
<rtg-label for="picture">Picture</rtg-label>
|
|
64
|
-
<rtg-input id="picture" type="file" placeholder="file"></rtg-input>
|
|
65
|
-
</div>
|
|
66
|
-
<rtg-input
|
|
67
|
-
disabled
|
|
68
|
-
type="email"
|
|
69
|
-
placeholder="Email"
|
|
70
|
-
class="min-w-80"
|
|
71
|
-
></rtg-input>
|
|
72
|
-
<div class="grid w-full max-w-sm items-center gap-1.5 min-w-80">
|
|
73
|
-
<rtg-label for="email">Email address</rtg-label>
|
|
74
|
-
<rtg-input id="email" type="email" placeholder="Email"> </rtg-input>
|
|
75
|
-
</div>
|
|
76
|
-
<div class="flex flex-nowrap w-full max-w-sm items-center space-x-2">
|
|
77
|
-
<rtg-input
|
|
78
|
-
id="email"
|
|
79
|
-
type="email"
|
|
80
|
-
placeholder="Email"
|
|
81
|
-
class="min-w-80"
|
|
82
|
-
></rtg-input>
|
|
83
|
-
<rtg-button size="default" onclick="javascript:alert('Hello!')">Subscribe</rtg-button>
|
|
84
|
-
</div>
|
|
85
|
-
</div>
|
|
86
|
-
<div class="container mx-auto my-10">
|
|
87
|
-
<h2 class="text-2xl text-center">Command</h2>
|
|
88
|
-
</div>
|
|
89
|
-
<div class="flex flex-nowrap">
|
|
90
|
-
<div class="flex flex-wrap space-x-4 gap-5 mx-3">
|
|
91
|
-
<rtg-command class="w-full max-w-md">
|
|
92
|
-
<rtg-command-input placeholder="Search ...."></rtg-command-input>
|
|
93
|
-
<rtg-command-list>
|
|
94
|
-
<rtg-command-empty>No items found!</rtg-command-empty>
|
|
95
|
-
<rtg-command-group heading="Suggestions">
|
|
96
|
-
<rtg-command-item>
|
|
97
|
-
<svg
|
|
98
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
99
|
-
width="24"
|
|
100
|
-
height="24"
|
|
101
|
-
viewBox="0 0 24 24"
|
|
102
|
-
fill="none"
|
|
103
|
-
stroke="currentColor"
|
|
104
|
-
stroke-width="2"
|
|
105
|
-
stroke-linecap="round"
|
|
106
|
-
stroke-linejoin="round"
|
|
107
|
-
class="mr-2 h-4 w-4"
|
|
108
|
-
>
|
|
109
|
-
<rect width="18" height="18" x="3" y="4" rx="2" ry="2"></rect>
|
|
110
|
-
<line x1="16" x2="16" y1="2" y2="6"></line>
|
|
111
|
-
<line x1="8" x2="8" y1="2" y2="6"></line>
|
|
112
|
-
<line x1="3" x2="21" y1="10" y2="10"></line></svg>
|
|
113
|
-
<span>Calendar</span>
|
|
114
|
-
</rtg-command-item>
|
|
115
|
-
<rtg-command-item>
|
|
116
|
-
<svg
|
|
117
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
118
|
-
width="24"
|
|
119
|
-
height="24"
|
|
120
|
-
viewBox="0 0 24 24"
|
|
121
|
-
fill="none"
|
|
122
|
-
stroke="currentColor"
|
|
123
|
-
stroke-width="2"
|
|
124
|
-
stroke-linecap="round"
|
|
125
|
-
stroke-linejoin="round"
|
|
126
|
-
class="mr-2 h-4 w-4"
|
|
127
|
-
>
|
|
128
|
-
<circle cx="12" cy="12" r="10"></circle>
|
|
129
|
-
<path d="M8 14s1.5 2 4 2 4-2 4-2"></path>
|
|
130
|
-
<line x1="9" x2="9.01" y1="9" y2="9"></line>
|
|
131
|
-
<line x1="15" x2="15.01" y1="9" y2="9"></line></svg>
|
|
132
|
-
<span>Search Emoji</span>
|
|
133
|
-
</rtg-command-item>
|
|
134
|
-
<rtg-command-item>
|
|
135
|
-
<svg
|
|
136
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
137
|
-
width="24"
|
|
138
|
-
height="24"
|
|
139
|
-
viewBox="0 0 24 24"
|
|
140
|
-
fill="none"
|
|
141
|
-
stroke="currentColor"
|
|
142
|
-
stroke-width="2"
|
|
143
|
-
stroke-linecap="round"
|
|
144
|
-
stroke-linejoin="round"
|
|
145
|
-
class="mr-2 h-4 w-4"
|
|
146
|
-
>
|
|
147
|
-
<rect width="16" height="20" x="4" y="2" rx="2"></rect>
|
|
148
|
-
<line x1="8" x2="16" y1="6" y2="6"></line>
|
|
149
|
-
<line x1="16" x2="16" y1="14" y2="18"></line>
|
|
150
|
-
<path d="M16 10h.01"></path>
|
|
151
|
-
<path d="M12 10h.01"></path>
|
|
152
|
-
<path d="M8 10h.01"></path>
|
|
153
|
-
<path d="M12 14h.01"></path>
|
|
154
|
-
<path d="M8 14h.01"></path>
|
|
155
|
-
<path d="M12 18h.01"></path>
|
|
156
|
-
<path d="M8 18h.01"></path></svg>
|
|
157
|
-
<span>Calculator</span>
|
|
158
|
-
</rtg-command-item>
|
|
159
|
-
</rtg-command-group>
|
|
160
|
-
<rtg-command-separator></rtg-command-separator>
|
|
161
|
-
<rtg-command-group heading="Settings">
|
|
162
|
-
<rtg-command-item onclick="javascript:alert('Profile Clicked!')">
|
|
163
|
-
<svg
|
|
164
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
165
|
-
width="24"
|
|
166
|
-
height="24"
|
|
167
|
-
viewBox="0 0 24 24"
|
|
168
|
-
fill="none"
|
|
169
|
-
stroke="currentColor"
|
|
170
|
-
stroke-width="2"
|
|
171
|
-
stroke-linecap="round"
|
|
172
|
-
stroke-linejoin="round"
|
|
173
|
-
class="mr-2 h-4 w-4"
|
|
174
|
-
>
|
|
175
|
-
<path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"></path>
|
|
176
|
-
<circle cx="12" cy="7" r="4"></circle></svg>
|
|
177
|
-
<span>Profile</span>
|
|
178
|
-
<span
|
|
179
|
-
class="ml-auto text-xs tracking-widest text-muted-foreground"
|
|
180
|
-
>⌘P</span>
|
|
181
|
-
</rtg-command-item>
|
|
182
|
-
<rtg-command-item>
|
|
183
|
-
<svg
|
|
184
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
185
|
-
width="24"
|
|
186
|
-
height="24"
|
|
187
|
-
viewBox="0 0 24 24"
|
|
188
|
-
fill="none"
|
|
189
|
-
stroke="currentColor"
|
|
190
|
-
stroke-width="2"
|
|
191
|
-
stroke-linecap="round"
|
|
192
|
-
stroke-linejoin="round"
|
|
193
|
-
class="mr-2 h-4 w-4"
|
|
194
|
-
>
|
|
195
|
-
<rect width="20" height="14" x="2" y="5" rx="2"></rect>
|
|
196
|
-
<line x1="2" x2="22" y1="10" y2="10"></line></svg>
|
|
197
|
-
<span>Billing</span
|
|
198
|
-
><span
|
|
199
|
-
class="ml-auto text-xs tracking-widest text-muted-foreground"
|
|
200
|
-
>⌘B</span
|
|
201
|
-
>
|
|
202
|
-
</rtg-command-item>
|
|
203
|
-
<rtg-command-item>
|
|
204
|
-
<svg
|
|
205
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
206
|
-
width="24"
|
|
207
|
-
height="24"
|
|
208
|
-
viewBox="0 0 24 24"
|
|
209
|
-
fill="none"
|
|
210
|
-
stroke="currentColor"
|
|
211
|
-
stroke-width="2"
|
|
212
|
-
stroke-linecap="round"
|
|
213
|
-
stroke-linejoin="round"
|
|
214
|
-
class="mr-2 h-4 w-4"
|
|
215
|
-
>
|
|
216
|
-
<path
|
|
217
|
-
d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"
|
|
218
|
-
></path>
|
|
219
|
-
<circle cx="12" cy="12" r="3"></circle></svg>
|
|
220
|
-
<span>Settings</span>
|
|
221
|
-
<span
|
|
222
|
-
class="ml-auto text-xs tracking-widest text-muted-foreground">
|
|
223
|
-
⌘S</span>
|
|
224
|
-
</rtg-command-item>
|
|
225
|
-
</rtg-command-group></rtg-command-list
|
|
226
|
-
>
|
|
227
|
-
</rtg-command>
|
|
228
|
-
</div>
|
|
229
|
-
</div>
|
|
230
|
-
<div class="container mx-auto my-10">
|
|
231
|
-
<h2 class="text-2xl text-center">Dialog</h2>
|
|
232
|
-
</div>
|
|
233
|
-
<div class="flex flex-nowrap">
|
|
234
|
-
<div class="flex flex-wrap space-x-4 gap-5 mx-3">
|
|
235
|
-
<rtg-dialog>
|
|
236
|
-
<rtg-dialog-trigger>
|
|
237
|
-
<rtg-button>Open Dialog</rtg-button>
|
|
238
|
-
</rtg-dialog-trigger>
|
|
239
|
-
<rtg-dialog-content>
|
|
240
|
-
<rtg-dialog-header title="Are you absolutely sure?" description="This action cannot be undone. This will permanently delete your
|
|
241
|
-
content.">
|
|
242
|
-
<rtg-dialog-title>Are you absolutely sure?</rtg-dialog-title>
|
|
243
|
-
<rtg-dialog-description>
|
|
244
|
-
This action cannot be undone. This will permanently delete your
|
|
245
|
-
content.</rtg-dialog-description
|
|
246
|
-
>
|
|
247
|
-
</rtg-dialog-header>
|
|
248
|
-
<rtg-dialog-footer>
|
|
249
|
-
<div class="flex w-full justify-between space-x-1">
|
|
250
|
-
<rtg-dialog-close><rtg-button variant="secondary">Close</rtg-button></rtg-dialog-close>
|
|
251
|
-
<div class="justify-end">
|
|
252
|
-
<rtg-button variant="destructive">Delete</rtg-button>
|
|
253
|
-
<rtg-button>Cancel</rtg-button>
|
|
254
|
-
</div>
|
|
255
|
-
</div>
|
|
256
|
-
</rtg-dialog-content>
|
|
257
|
-
</rtg-dialog>
|
|
258
|
-
<rtg-dialog>
|
|
259
|
-
<rtg-dialog-trigger>
|
|
260
|
-
<rtg-button variant="outline">Edit Profile</rtg-button>
|
|
261
|
-
</rtg-dialog-trigger>
|
|
262
|
-
<rtg-dialog-content class="sm:max-w-[425px]">
|
|
263
|
-
<rtg-dialog-header title="Edit Profile" description="Make changes to your profile here. Click save when you're done.">
|
|
264
|
-
<!-- <rtg-dialog-title>Edit Profile</rtg-dialog-title>
|
|
265
|
-
<rtg-dialog-description>
|
|
266
|
-
Make changes to your profile here. Click save when you're done.</rtg-dialog-description
|
|
267
|
-
> -->
|
|
268
|
-
</rtg-dialog-header>
|
|
269
|
-
<div class="grid gap-4 py-4">
|
|
270
|
-
<div class="grid grid-cols-4 items-center gap-4">
|
|
271
|
-
<rtg-label for="name" class="text-right">
|
|
272
|
-
Name
|
|
273
|
-
</rtg-label>
|
|
274
|
-
<rtg-input
|
|
275
|
-
id="name"
|
|
276
|
-
defaultValue="Pedro Duarte"
|
|
277
|
-
class="col-span-3"
|
|
278
|
-
/>
|
|
279
|
-
</div>
|
|
280
|
-
<div class="grid grid-cols-4 items-center gap-4">
|
|
281
|
-
<rtg-label for="username" class="text-right">
|
|
282
|
-
Username
|
|
283
|
-
</rtg-label>
|
|
284
|
-
<rtg-input
|
|
285
|
-
id="username"
|
|
286
|
-
defaultValue="@peduarte"
|
|
287
|
-
class="col-span-3"
|
|
288
|
-
/>
|
|
289
|
-
</div>
|
|
290
|
-
</div>
|
|
291
|
-
<rtg-dialog-footer>
|
|
292
|
-
<rtg-button type="submit" class="w-full sm:w-min">Save changes</rtg-button>
|
|
293
|
-
</rtg-dialog-content>
|
|
294
|
-
</rtg-dialog>
|
|
295
|
-
</div>
|
|
296
|
-
</div>
|
|
297
|
-
</div>
|
|
298
|
-
<script type="module" src="./src/components/atoms/alert/alert.atom.ts"></script>
|
|
299
|
-
<script type="module" src="./src/components/atoms/button/button.atom.ts"></script>
|
|
300
|
-
<script type="module" src="./src/components/atoms/card/card.atom.ts"></script>
|
|
301
|
-
<script type="module" src="./src/components/atoms/checkbox/checkbox.atom.ts"></script>
|
|
302
|
-
<script type="module" src="./src/components/atoms/dialog/dialog.atom.ts"></script>
|
|
303
|
-
<script type="module" src="./src/components/atoms/input/input.atom.ts"></script>
|
|
304
|
-
<script type="module" src="./src/components/atoms/label/label.atom.ts"></script>
|
|
305
|
-
<script type="module" src="./src/components/atoms/popover/popover.atom.ts"></script>
|
|
306
|
-
|
|
307
|
-
<!-- <script type="module" src="./dist/src/components/button/button.js"></script>
|
|
308
|
-
<script type="module" src="./dist/src/components/input/input.js"></script>
|
|
309
|
-
<script type="module" src="./dist/src/components/label/label.js"></script>
|
|
310
|
-
<script type="module" src="./dist/src/components/checkbox/checkbox.js"></script>
|
|
311
|
-
<script type="module" src="./dist/src/components/command/command.js"></script>
|
|
312
|
-
<script type="module" src="./dist/src/components/dialog/dialog.js"></script> -->
|
|
313
|
-
</body>
|
|
314
|
-
</html>
|
package/rollup.config.js
DELETED
|
@@ -1,83 +0,0 @@
|
|
|
1
|
-
import nodeResolve from '@rollup/plugin-node-resolve';
|
|
2
|
-
import commonjs from '@rollup/plugin-commonjs';
|
|
3
|
-
import babel from '@rollup/plugin-babel';
|
|
4
|
-
import html from '@web/rollup-plugin-html';
|
|
5
|
-
import { importMetaAssets } from '@web/rollup-plugin-import-meta-assets';
|
|
6
|
-
import esbuild from 'rollup-plugin-esbuild';
|
|
7
|
-
import { generateSW } from 'rollup-plugin-workbox';
|
|
8
|
-
import serve from 'rollup-plugin-serve';
|
|
9
|
-
import livereload from 'rollup-plugin-livereload';
|
|
10
|
-
import { terser } from 'rollup-plugin-terser';
|
|
11
|
-
import path from 'path';
|
|
12
|
-
|
|
13
|
-
const isProd = process.env.NODE_ENV === 'production';
|
|
14
|
-
|
|
15
|
-
export default {
|
|
16
|
-
input: 'src/index.ts', // Entry file for TypeScript
|
|
17
|
-
output: {
|
|
18
|
-
entryFileNames: '[hash].js',
|
|
19
|
-
chunkFileNames: '[hash].js',
|
|
20
|
-
assetFileNames: '[hash][extname]',
|
|
21
|
-
format: 'es',
|
|
22
|
-
dir: 'dist',
|
|
23
|
-
},
|
|
24
|
-
plugins: [
|
|
25
|
-
html({
|
|
26
|
-
minify: true,
|
|
27
|
-
injectServiceWorker: true,
|
|
28
|
-
serviceWorkerPath: 'dist/sw.js',
|
|
29
|
-
}),
|
|
30
|
-
nodeResolve(),
|
|
31
|
-
commonjs(),
|
|
32
|
-
esbuild({
|
|
33
|
-
minify: true,
|
|
34
|
-
target: ['chrome64', 'firefox67', 'safari11.1'],
|
|
35
|
-
include: /\.ts$/,
|
|
36
|
-
}),
|
|
37
|
-
importMetaAssets(),
|
|
38
|
-
babel({
|
|
39
|
-
babelHelpers: 'bundled',
|
|
40
|
-
extensions: ['.js', '.jsx', '.ts', '.tsx'],
|
|
41
|
-
plugins: [
|
|
42
|
-
[
|
|
43
|
-
require.resolve('babel-plugin-template-html-minifier'),
|
|
44
|
-
{
|
|
45
|
-
modules: { lit: ['html', { name: 'css', encapsulation: 'style' }] },
|
|
46
|
-
failOnError: false,
|
|
47
|
-
strictCSS: true,
|
|
48
|
-
htmlMinifier: {
|
|
49
|
-
collapseWhitespace: true,
|
|
50
|
-
conservativeCollapse: true,
|
|
51
|
-
removeComments: true,
|
|
52
|
-
caseSensitive: true,
|
|
53
|
-
minifyCSS: true,
|
|
54
|
-
},
|
|
55
|
-
},
|
|
56
|
-
],
|
|
57
|
-
],
|
|
58
|
-
}),
|
|
59
|
-
generateSW({
|
|
60
|
-
globIgnores: ['polyfills/*.js', 'nomodule-*.js'],
|
|
61
|
-
navigateFallback: '/index.html',
|
|
62
|
-
swDest: path.join('dist', 'sw.js'),
|
|
63
|
-
globDirectory: path.join('dist'),
|
|
64
|
-
globPatterns: ['**/*.{html,js,css,webmanifest}'],
|
|
65
|
-
skipWaiting: true,
|
|
66
|
-
clientsClaim: true,
|
|
67
|
-
runtimeCaching: [{ urlPattern: 'polyfills/*.js', handler: 'CacheFirst' }],
|
|
68
|
-
}),
|
|
69
|
-
!isProd &&
|
|
70
|
-
serve({
|
|
71
|
-
open: true,
|
|
72
|
-
contentBase: 'dist',
|
|
73
|
-
host: 'localhost',
|
|
74
|
-
port: 3000,
|
|
75
|
-
historyApiFallback: true, // Ensures SPA routing works
|
|
76
|
-
}),
|
|
77
|
-
!isProd && livereload('dist'),
|
|
78
|
-
isProd && terser(),
|
|
79
|
-
],
|
|
80
|
-
watch: {
|
|
81
|
-
clearScreen: false,
|
|
82
|
-
},
|
|
83
|
-
};
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
import { svg } from 'lit';
|
|
2
|
-
|
|
3
|
-
export function arrowsIcon() {
|
|
4
|
-
return svg` <svg
|
|
5
|
-
class="shrink-0 size-3.5 text-gray-500 dark:text-neutral-500"
|
|
6
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
7
|
-
width="24"
|
|
8
|
-
height="24"
|
|
9
|
-
viewBox="0 0 24 24"
|
|
10
|
-
fill="none"
|
|
11
|
-
stroke="currentColor"
|
|
12
|
-
stroke-width="2"
|
|
13
|
-
stroke-linecap="round"
|
|
14
|
-
stroke-linejoin="round"
|
|
15
|
-
>
|
|
16
|
-
<path d="m7 15 5 5 5-5"></path>
|
|
17
|
-
<path d="m7 9 5-5 5 5"></path>
|
|
18
|
-
</svg>
|
|
19
|
-
`;
|
|
20
|
-
}
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import { svg } from 'lit';
|
|
2
|
-
|
|
3
|
-
export function searchIcon() {
|
|
4
|
-
return svg` <svg
|
|
5
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
6
|
-
width = "24"
|
|
7
|
-
height = "24"
|
|
8
|
-
viewBox = "0 0 24 24"
|
|
9
|
-
fill = "none"
|
|
10
|
-
stroke = "currentColor"
|
|
11
|
-
stroke-width="2"
|
|
12
|
-
stroke-linecap="round"
|
|
13
|
-
stroke-linejoin="round"
|
|
14
|
-
class="lucide lucide-search h-4 w-4 shrink-0 opacity-50" >
|
|
15
|
-
<circle cx="11" cy = "11" r = "8" > </circle>
|
|
16
|
-
<path d="m21 21-4.3-4.3"></path >
|
|
17
|
-
</svg>
|
|
18
|
-
`;
|
|
19
|
-
}
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
import { svg } from 'lit';
|
|
2
|
-
|
|
3
|
-
export function tickIcon() {
|
|
4
|
-
return svg`
|
|
5
|
-
<svg
|
|
6
|
-
class="shrink-0 size-3.5 text-blue-600 dark:text-blue-500"
|
|
7
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
8
|
-
width="24"
|
|
9
|
-
height="24"
|
|
10
|
-
viewBox="0 0 24 24"
|
|
11
|
-
fill="none"
|
|
12
|
-
stroke="currentColor"
|
|
13
|
-
stroke-width="2"
|
|
14
|
-
stroke-linecap="round"
|
|
15
|
-
stroke-linejoin="round"
|
|
16
|
-
>
|
|
17
|
-
<path d="M20 6 9 17l-5-5"></path>
|
|
18
|
-
</svg>
|
|
19
|
-
`;
|
|
20
|
-
}
|
package/src/chai-custom.d.ts
DELETED
|
File without changes
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import { LitElement, html, css } from 'lit';
|
|
2
|
-
import { customElement } from 'lit/decorators.js';
|
|
3
|
-
|
|
4
|
-
@customElement('rtg-alert-description')
|
|
5
|
-
export class AlertDescription extends LitElement {
|
|
6
|
-
static styles = css`
|
|
7
|
-
:host {
|
|
8
|
-
display: block;
|
|
9
|
-
}
|
|
10
|
-
`;
|
|
11
|
-
|
|
12
|
-
render() {
|
|
13
|
-
return html`<slot></slot>`;
|
|
14
|
-
}
|
|
15
|
-
}
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import { LitElement, html, css } from 'lit';
|
|
2
|
-
import { customElement } from 'lit/decorators.js';
|
|
3
|
-
|
|
4
|
-
@customElement('rtg-alert-title')
|
|
5
|
-
export class AlertTitle extends LitElement {
|
|
6
|
-
static styles = css`
|
|
7
|
-
:host {
|
|
8
|
-
display: block;
|
|
9
|
-
font-weight: bold;
|
|
10
|
-
margin-bottom: 0.5rem;
|
|
11
|
-
}
|
|
12
|
-
`;
|
|
13
|
-
|
|
14
|
-
render() {
|
|
15
|
-
return html`<slot></slot>`;
|
|
16
|
-
}
|
|
17
|
-
}
|
|
@@ -1,55 +0,0 @@
|
|
|
1
|
-
import { LitElement, html, css } from 'lit';
|
|
2
|
-
import { property } from 'lit/decorators.js';
|
|
3
|
-
import { customElement } from 'lit/decorators.js';
|
|
4
|
-
import { alertStyle } from './alert.styles';
|
|
5
|
-
import { TWStyles } from '../../../styles';
|
|
6
|
-
import { AlertTitle } from './alert-title';
|
|
7
|
-
import { AlertDescription } from './alert-description';
|
|
8
|
-
|
|
9
|
-
@customElement('rtg-alert')
|
|
10
|
-
class Alert extends LitElement {
|
|
11
|
-
static styles = [
|
|
12
|
-
css`
|
|
13
|
-
:host {
|
|
14
|
-
display: block;
|
|
15
|
-
margin-bottom: 1rem;
|
|
16
|
-
}
|
|
17
|
-
.alert {
|
|
18
|
-
border: 1px solid transparent;
|
|
19
|
-
border-radius: 0.375rem;
|
|
20
|
-
}
|
|
21
|
-
.title {
|
|
22
|
-
font-weight: bold;
|
|
23
|
-
margin-bottom: 0.5rem;
|
|
24
|
-
}
|
|
25
|
-
`,
|
|
26
|
-
TWStyles,
|
|
27
|
-
];
|
|
28
|
-
static alertVairants = alertStyle;
|
|
29
|
-
|
|
30
|
-
@property({ type: String }) variant:
|
|
31
|
-
| 'success'
|
|
32
|
-
| 'error'
|
|
33
|
-
| 'warning'
|
|
34
|
-
| 'info' = 'info';
|
|
35
|
-
@property({ type: String }) size: 'default' | 'large' | 'small' = 'default';
|
|
36
|
-
|
|
37
|
-
private get alertClasses() {
|
|
38
|
-
return alertStyle({ variant: this.variant, size: this.size });
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
render() {
|
|
42
|
-
return html`
|
|
43
|
-
<div class="alert ${this.alertClasses}">
|
|
44
|
-
<slot name="title"></slot>
|
|
45
|
-
<slot name="description"></slot>
|
|
46
|
-
</div>
|
|
47
|
-
`;
|
|
48
|
-
}
|
|
49
|
-
}
|
|
50
|
-
declare global {
|
|
51
|
-
interface HTMLElementTagNameMap {
|
|
52
|
-
'rtg-alert': Alert;
|
|
53
|
-
}
|
|
54
|
-
}
|
|
55
|
-
export { Alert, AlertDescription, AlertTitle };
|
|
@@ -1,71 +0,0 @@
|
|
|
1
|
-
import { html } from 'lit';
|
|
2
|
-
import { Meta, StoryObj } from '@storybook/web-components';
|
|
3
|
-
import './alert.atom';
|
|
4
|
-
import { Alert as AlertComponent } from './alert.atom';
|
|
5
|
-
|
|
6
|
-
import { expect, within, waitFor } from '@storybook/test';
|
|
7
|
-
|
|
8
|
-
const testAlertBehavior = async (args: any, canvasElement: any) => {
|
|
9
|
-
const canvas = within(canvasElement);
|
|
10
|
-
// 1. Test:Alert exits
|
|
11
|
-
const alert = await waitFor(() => canvas.getByTestId('alert-id'));
|
|
12
|
-
|
|
13
|
-
//2. Test: Alert should have correct variant
|
|
14
|
-
expect(alert).toHaveAttribute('variant', args.variant);
|
|
15
|
-
|
|
16
|
-
//3. Test: Alert should have correct size
|
|
17
|
-
expect(alert).toHaveAttribute('size', args.size);
|
|
18
|
-
if (alert.shadowRoot) {
|
|
19
|
-
const innerDiv = alert.shadowRoot.querySelector('div');
|
|
20
|
-
//4. Test: Alert should have correct class
|
|
21
|
-
const expectedClasses = AlertComponent.alertVairants({
|
|
22
|
-
variant: args.variant,
|
|
23
|
-
size: args.size,
|
|
24
|
-
});
|
|
25
|
-
expect(innerDiv).toHaveClass(`alert ${expectedClasses}`);
|
|
26
|
-
}
|
|
27
|
-
};
|
|
28
|
-
|
|
29
|
-
export default {
|
|
30
|
-
title: 'components/atoms/alert',
|
|
31
|
-
tags: ['autodocs'],
|
|
32
|
-
|
|
33
|
-
argTypes: {
|
|
34
|
-
variant: {
|
|
35
|
-
control: 'select',
|
|
36
|
-
options: ['success', 'error', 'warning', 'info'],
|
|
37
|
-
},
|
|
38
|
-
size: {
|
|
39
|
-
control: 'select',
|
|
40
|
-
options: ['default', 'large', 'small'],
|
|
41
|
-
},
|
|
42
|
-
title: {
|
|
43
|
-
control: 'text',
|
|
44
|
-
},
|
|
45
|
-
message: {
|
|
46
|
-
control: 'text',
|
|
47
|
-
},
|
|
48
|
-
},
|
|
49
|
-
} as Meta;
|
|
50
|
-
|
|
51
|
-
type Story = StoryObj;
|
|
52
|
-
|
|
53
|
-
export const AlertStory: Story = {
|
|
54
|
-
args: {
|
|
55
|
-
variant: 'info',
|
|
56
|
-
size: 'default',
|
|
57
|
-
title: 'Information',
|
|
58
|
-
message: 'This is an information message.',
|
|
59
|
-
},
|
|
60
|
-
render: ({ variant, size, message, title }) => html`
|
|
61
|
-
<rtg-alert data-testid="alert-id" variant=${variant} size=${size}>
|
|
62
|
-
<rtg-alert-title slot="title">${title}</rtg-alert-title>
|
|
63
|
-
<rtg-alert-description slot="description"
|
|
64
|
-
>${message}</rtg-alert-description
|
|
65
|
-
>
|
|
66
|
-
</rtg-alert>
|
|
67
|
-
`,
|
|
68
|
-
play: async ({ args, canvasElement }) => {
|
|
69
|
-
await testAlertBehavior(args, canvasElement);
|
|
70
|
-
},
|
|
71
|
-
};
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
import { cva } from 'class-variance-authority';
|
|
2
|
-
|
|
3
|
-
export const alertStyle = cva('p-4 rounded-sm text-sm font-medium', {
|
|
4
|
-
variants: {
|
|
5
|
-
variant: {
|
|
6
|
-
success: 'bg-green-100 text-green-800 border-green-200',
|
|
7
|
-
error: 'bg-red-100 text-red-800 border-red-200',
|
|
8
|
-
warning: 'bg-yellow-100 text-yellow-800 border-yellow-200',
|
|
9
|
-
info: 'bg-blue-100 text-blue-800 border-blue-200',
|
|
10
|
-
},
|
|
11
|
-
size: {
|
|
12
|
-
small: 'text-sm',
|
|
13
|
-
default: 'text-base',
|
|
14
|
-
large: 'text-xl',
|
|
15
|
-
},
|
|
16
|
-
},
|
|
17
|
-
defaultVariants: {
|
|
18
|
-
variant: 'info',
|
|
19
|
-
size: 'default',
|
|
20
|
-
},
|
|
21
|
-
});
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|