@e280/shiny 0.1.0-15 → 0.1.0-16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (277) hide show
  1. package/README.md +34 -80
  2. package/package.json +18 -25
  3. package/s/_archive/demo/utils/lipsum.ts +19 -0
  4. package/s/_archive/demo/views/showcase/style.css.ts +53 -0
  5. package/s/_archive/demo/views/showcase/view.ts +54 -0
  6. package/s/_archive/index.html.ts +34 -0
  7. package/s/_archive/index.ts +19 -0
  8. package/s/_archive/utils/states.ts +15 -0
  9. package/s/demo/main.bundle.ts +16 -0
  10. package/s/demo/main.css +71 -0
  11. package/s/demo/parts/exhibit.ts +15 -0
  12. package/s/demo/utils/lipsum.ts +1 -1
  13. package/s/demo/views/codebox/style.css.ts +43 -0
  14. package/s/demo/views/codebox/use-prism-styles.ts +13 -0
  15. package/s/demo/views/codebox/view.ts +39 -0
  16. package/s/demo/views/showcase/style.css.ts +42 -11
  17. package/s/demo/views/showcase/view.ts +41 -45
  18. package/s/demo/views/stylebox/view.ts +21 -0
  19. package/s/index.html.ts +42 -29
  20. package/s/index.ts +1 -17
  21. package/s/test.ts +5 -0
  22. package/s/theme/parts/core.ts +34 -0
  23. package/s/theme/parts/reset.ts +20 -0
  24. package/s/theme/parts/vars.ts +41 -0
  25. package/s/theme/theme-string.ts +15 -0
  26. package/s/theme/theme.css.ts +7 -0
  27. package/s/views/button/showcase.ts +43 -0
  28. package/s/views/button/style.css.ts +110 -0
  29. package/s/views/button/view.ts +30 -0
  30. package/s/views/copy/parts/copy-status.ts +3 -0
  31. package/s/views/copy/parts/determine-base-status.ts +7 -0
  32. package/s/views/copy/parts/use-copier.ts +20 -0
  33. package/s/views/copy/showcase.ts +54 -0
  34. package/s/views/copy/style.css.ts +46 -0
  35. package/s/views/copy/view.ts +58 -0
  36. package/s/views/drawer/control.ts +31 -0
  37. package/s/views/drawer/showcase.ts +83 -0
  38. package/s/views/drawer/style.css.ts +128 -0
  39. package/s/views/drawer/view.ts +76 -0
  40. package/s/views/tabs/control.ts +31 -0
  41. package/s/views/tabs/showcase.ts +89 -0
  42. package/s/views/tabs/style.css.ts +46 -0
  43. package/s/views/tabs/view.ts +66 -0
  44. package/x/demo/main.bundle.js +13 -0
  45. package/x/demo/main.bundle.js.map +1 -0
  46. package/x/demo/main.bundle.min.js +794 -0
  47. package/x/demo/main.bundle.min.js.map +7 -0
  48. package/x/demo/main.css +71 -0
  49. package/x/demo/parts/exhibit.d.ts +11 -0
  50. package/x/demo/parts/exhibit.js +2 -0
  51. package/x/demo/parts/exhibit.js.map +1 -0
  52. package/x/demo/utils/lipsum.d.ts +1 -1
  53. package/x/demo/utils/lipsum.js +1 -1
  54. package/x/demo/utils/lipsum.js.map +1 -1
  55. package/x/demo/views/codebox/style.css.js +42 -0
  56. package/x/demo/views/codebox/style.css.js.map +1 -0
  57. package/x/demo/views/codebox/use-prism-styles.d.ts +1 -0
  58. package/x/demo/views/codebox/use-prism-styles.js +12 -0
  59. package/x/demo/views/codebox/use-prism-styles.js.map +1 -0
  60. package/x/demo/views/codebox/view.d.ts +2 -0
  61. package/x/demo/views/codebox/view.js +29 -0
  62. package/x/demo/views/codebox/view.js.map +1 -0
  63. package/x/demo/views/showcase/style.css.js +42 -11
  64. package/x/demo/views/showcase/style.css.js.map +1 -1
  65. package/x/demo/views/showcase/view.d.ts +2 -7
  66. package/x/demo/views/showcase/view.js +39 -35
  67. package/x/demo/views/showcase/view.js.map +1 -1
  68. package/x/demo/views/stylebox/view.d.ts +3 -0
  69. package/x/demo/views/stylebox/view.js +13 -0
  70. package/x/demo/views/stylebox/view.js.map +1 -0
  71. package/x/index.d.ts +1 -11
  72. package/x/index.html +212 -62
  73. package/x/index.html.js +40 -26
  74. package/x/index.html.js.map +1 -1
  75. package/x/index.js +1 -11
  76. package/x/index.js.map +1 -1
  77. package/x/test.js +3 -0
  78. package/x/test.js.map +1 -0
  79. package/x/theme/parts/core.d.ts +1 -0
  80. package/x/theme/parts/core.js +33 -0
  81. package/x/theme/parts/core.js.map +1 -0
  82. package/x/theme/parts/reset.d.ts +1 -0
  83. package/x/theme/parts/reset.js +19 -0
  84. package/x/theme/parts/reset.js.map +1 -0
  85. package/x/theme/parts/vars.d.ts +1 -0
  86. package/x/theme/parts/vars.js +34 -0
  87. package/x/theme/parts/vars.js.map +1 -0
  88. package/x/theme/theme-string.d.ts +1 -0
  89. package/x/theme/theme-string.js +14 -0
  90. package/x/theme/theme-string.js.map +1 -0
  91. package/x/theme/theme.css.d.ts +1 -0
  92. package/x/theme/theme.css.js +4 -0
  93. package/x/theme/theme.css.js.map +1 -0
  94. package/x/views/button/showcase.d.ts +1 -0
  95. package/x/views/button/showcase.js +41 -0
  96. package/x/views/button/showcase.js.map +1 -0
  97. package/x/views/button/style.css.js +109 -0
  98. package/x/views/button/style.css.js.map +1 -0
  99. package/x/views/button/view.d.ts +4 -0
  100. package/x/views/button/view.js +22 -0
  101. package/x/views/button/view.js.map +1 -0
  102. package/x/views/copy/parts/copy-status.d.ts +1 -0
  103. package/x/views/copy/parts/copy-status.js +2 -0
  104. package/x/views/copy/parts/copy-status.js.map +1 -0
  105. package/x/views/copy/parts/determine-base-status.d.ts +1 -0
  106. package/x/views/copy/parts/determine-base-status.js +6 -0
  107. package/x/views/copy/parts/determine-base-status.js.map +1 -0
  108. package/x/views/copy/parts/use-copier.d.ts +6 -0
  109. package/x/views/copy/parts/use-copier.js +13 -0
  110. package/x/views/copy/parts/use-copier.js.map +1 -0
  111. package/x/views/copy/showcase.d.ts +1 -0
  112. package/x/views/copy/showcase.js +51 -0
  113. package/x/views/copy/showcase.js.map +1 -0
  114. package/x/views/copy/style.css.js.map +1 -0
  115. package/x/views/copy/view.d.ts +4 -0
  116. package/x/views/copy/view.js +47 -0
  117. package/x/views/copy/view.js.map +1 -0
  118. package/x/{components → views}/drawer/control.d.ts +1 -1
  119. package/x/views/drawer/control.js.map +1 -0
  120. package/x/views/drawer/showcase.d.ts +1 -0
  121. package/x/views/drawer/showcase.js +75 -0
  122. package/x/views/drawer/showcase.js.map +1 -0
  123. package/x/{components → views}/drawer/style.css.js +1 -0
  124. package/x/views/drawer/style.css.js.map +1 -0
  125. package/x/views/drawer/view.d.ts +6 -0
  126. package/x/views/drawer/view.js +60 -0
  127. package/x/views/drawer/view.js.map +1 -0
  128. package/x/{components → views}/tabs/control.d.ts +2 -2
  129. package/x/{components → views}/tabs/control.js +3 -3
  130. package/x/views/tabs/control.js.map +1 -0
  131. package/x/views/tabs/showcase.d.ts +1 -0
  132. package/x/views/tabs/showcase.js +86 -0
  133. package/x/views/tabs/showcase.js.map +1 -0
  134. package/x/{components → views}/tabs/style.css.js +5 -5
  135. package/x/views/tabs/style.css.js.map +1 -0
  136. package/x/views/tabs/view.d.ts +5 -0
  137. package/x/views/tabs/view.js +52 -0
  138. package/x/views/tabs/view.js.map +1 -0
  139. package/x/components/button/component.d.ts +0 -6
  140. package/x/components/button/component.js +0 -25
  141. package/x/components/button/component.js.map +0 -1
  142. package/x/components/button/showcase.d.ts +0 -1
  143. package/x/components/button/showcase.js +0 -116
  144. package/x/components/button/showcase.js.map +0 -1
  145. package/x/components/button/style.css.js +0 -62
  146. package/x/components/button/style.css.js.map +0 -1
  147. package/x/components/copy/component.d.ts +0 -376
  148. package/x/components/copy/component.js +0 -63
  149. package/x/components/copy/component.js.map +0 -1
  150. package/x/components/copy/showcase.d.ts +0 -1
  151. package/x/components/copy/showcase.js +0 -48
  152. package/x/components/copy/showcase.js.map +0 -1
  153. package/x/components/copy/style.css.js.map +0 -1
  154. package/x/components/drawer/component.d.ts +0 -387
  155. package/x/components/drawer/component.js +0 -73
  156. package/x/components/drawer/component.js.map +0 -1
  157. package/x/components/drawer/control.js.map +0 -1
  158. package/x/components/drawer/showcase.d.ts +0 -1
  159. package/x/components/drawer/showcase.js +0 -105
  160. package/x/components/drawer/showcase.js.map +0 -1
  161. package/x/components/drawer/style.css.js.map +0 -1
  162. package/x/components/example/component.d.ts +0 -371
  163. package/x/components/example/component.js +0 -22
  164. package/x/components/example/component.js.map +0 -1
  165. package/x/components/example/showcase.d.ts +0 -1
  166. package/x/components/example/showcase.js +0 -30
  167. package/x/components/example/showcase.js.map +0 -1
  168. package/x/components/example/style.css.js +0 -10
  169. package/x/components/example/style.css.js.map +0 -1
  170. package/x/components/foundation.css.d.ts +0 -1
  171. package/x/components/foundation.css.js +0 -14
  172. package/x/components/foundation.css.js.map +0 -1
  173. package/x/components/framework.d.ts +0 -8
  174. package/x/components/framework.js +0 -5
  175. package/x/components/framework.js.map +0 -1
  176. package/x/components/raw-components.d.ts +0 -12
  177. package/x/components/raw-components.js +0 -13
  178. package/x/components/raw-components.js.map +0 -1
  179. package/x/components/tabs/component.d.ts +0 -374
  180. package/x/components/tabs/component.js +0 -60
  181. package/x/components/tabs/component.js.map +0 -1
  182. package/x/components/tabs/control.js.map +0 -1
  183. package/x/components/tabs/showcase.d.ts +0 -1
  184. package/x/components/tabs/showcase.js +0 -167
  185. package/x/components/tabs/showcase.js.map +0 -1
  186. package/x/components/tabs/style.css.js.map +0 -1
  187. package/x/demo/demo.bundle.js +0 -42
  188. package/x/demo/demo.bundle.js.map +0 -1
  189. package/x/demo/demo.bundle.min.js +0 -893
  190. package/x/demo/demo.bundle.min.js.map +0 -7
  191. package/x/demo/lipsum.d.ts +0 -2
  192. package/x/demo/lipsum.js +0 -4
  193. package/x/demo/lipsum.js.map +0 -1
  194. package/x/demo/views/exhibit/style.css.d.ts +0 -2
  195. package/x/demo/views/exhibit/style.css.js +0 -84
  196. package/x/demo/views/exhibit/style.css.js.map +0 -1
  197. package/x/demo/views/exhibit/view.d.ts +0 -29
  198. package/x/demo/views/exhibit/view.js +0 -40
  199. package/x/demo/views/exhibit/view.js.map +0 -1
  200. package/x/demo/viewsets.d.ts +0 -17
  201. package/x/demo/viewsets.js +0 -9
  202. package/x/demo/viewsets.js.map +0 -1
  203. package/x/install/aura.bundle.js +0 -5
  204. package/x/install/aura.bundle.js.map +0 -1
  205. package/x/install/aura.bundle.min.js +0 -471
  206. package/x/install/aura.bundle.min.js.map +0 -7
  207. package/x/install/plain.bundle.d.ts +0 -1
  208. package/x/install/plain.bundle.js +0 -5
  209. package/x/install/plain.bundle.js.map +0 -1
  210. package/x/install/plain.bundle.min.js +0 -398
  211. package/x/install/plain.bundle.min.js.map +0 -7
  212. package/x/shiny.d.ts +0 -47
  213. package/x/shiny.js +0 -8
  214. package/x/shiny.js.map +0 -1
  215. package/x/tests.test.d.ts +0 -1
  216. package/x/tests.test.js +0 -3
  217. package/x/tests.test.js.map +0 -1
  218. package/x/themes/aura.css.d.ts +0 -1
  219. package/x/themes/aura.css.js +0 -85
  220. package/x/themes/aura.css.js.map +0 -1
  221. package/x/themes/index.barrel.d.ts +0 -2
  222. package/x/themes/index.barrel.js +0 -3
  223. package/x/themes/index.barrel.js.map +0 -1
  224. package/x/themes/index.d.ts +0 -2
  225. package/x/themes/index.js +0 -2
  226. package/x/themes/index.js.map +0 -1
  227. package/x/themes/infra/css-vars.d.ts +0 -15
  228. package/x/themes/infra/css-vars.js +0 -22
  229. package/x/themes/infra/css-vars.js.map +0 -1
  230. package/x/themes/plain.css.d.ts +0 -1
  231. package/x/themes/plain.css.js +0 -10
  232. package/x/themes/plain.css.js.map +0 -1
  233. /package/s/{components → _archive/components}/button/component.ts +0 -0
  234. /package/s/{components → _archive/components}/button/showcase.ts +0 -0
  235. /package/s/{components → _archive/components}/button/style.css.ts +0 -0
  236. /package/s/{components → _archive/components}/copy/component.ts +0 -0
  237. /package/s/{components → _archive/components}/copy/showcase.ts +0 -0
  238. /package/s/{components → _archive/components}/copy/style.css.ts +0 -0
  239. /package/s/{components → _archive/components}/drawer/component.ts +0 -0
  240. /package/s/{components → _archive/components}/drawer/control.ts +0 -0
  241. /package/s/{components → _archive/components}/drawer/showcase.ts +0 -0
  242. /package/s/{components → _archive/components}/drawer/style.css.ts +0 -0
  243. /package/s/{components → _archive/components}/example/component.ts +0 -0
  244. /package/s/{components → _archive/components}/example/showcase.ts +0 -0
  245. /package/s/{components → _archive/components}/example/style.css.ts +0 -0
  246. /package/s/{components → _archive/components}/foundation.css.ts +0 -0
  247. /package/s/{components → _archive/components}/framework.ts +0 -0
  248. /package/s/{components → _archive/components}/raw-components.ts +0 -0
  249. /package/s/{components → _archive/components}/tabs/component.ts +0 -0
  250. /package/s/{components → _archive/components}/tabs/control.ts +0 -0
  251. /package/s/{components → _archive/components}/tabs/showcase.ts +0 -0
  252. /package/s/{components → _archive/components}/tabs/style.css.ts +0 -0
  253. /package/s/{demo → _archive/demo}/demo.bundle.ts +0 -0
  254. /package/s/{demo → _archive/demo}/demo.css +0 -0
  255. /package/s/{demo → _archive/demo}/lipsum.ts +0 -0
  256. /package/s/{demo → _archive/demo}/views/exhibit/style.css.ts +0 -0
  257. /package/s/{demo → _archive/demo}/views/exhibit/view.ts +0 -0
  258. /package/s/{demo → _archive/demo}/viewsets.ts +0 -0
  259. /package/s/{install → _archive/install}/aura.bundle.ts +0 -0
  260. /package/s/{install → _archive/install}/plain.bundle.ts +0 -0
  261. /package/s/{shiny.ts → _archive/shiny.ts} +0 -0
  262. /package/s/{tests.test.ts → _archive/tests.test.ts} +0 -0
  263. /package/s/{themes → _archive/themes}/aura.css.ts +0 -0
  264. /package/s/{themes → _archive/themes}/index.barrel.ts +0 -0
  265. /package/s/{themes → _archive/themes}/index.ts +0 -0
  266. /package/s/{themes → _archive/themes}/infra/css-vars.ts +0 -0
  267. /package/s/{themes → _archive/themes}/plain.css.ts +0 -0
  268. /package/x/{demo → _archive/demo}/demo.css +0 -0
  269. /package/x/demo/{demo.bundle.d.ts → main.bundle.d.ts} +0 -0
  270. /package/x/{components/button → demo/views/codebox}/style.css.d.ts +0 -0
  271. /package/x/{install/aura.bundle.d.ts → test.d.ts} +0 -0
  272. /package/x/{components/copy → views/button}/style.css.d.ts +0 -0
  273. /package/x/{components/drawer → views/copy}/style.css.d.ts +0 -0
  274. /package/x/{components → views}/copy/style.css.js +0 -0
  275. /package/x/{components → views}/drawer/control.js +0 -0
  276. /package/x/{components/example → views/drawer}/style.css.d.ts +0 -0
  277. /package/x/{components → views}/tabs/style.css.d.ts +0 -0
package/README.md CHANGED
@@ -2,12 +2,11 @@
2
2
  ![](https://i.imgur.com/F1J78wH.png)
3
3
 
4
4
  # ✨shiny✨
5
- > *web ui components*
5
+ > *sly web ui library*
6
6
 
7
- - 💁 ***see all the components at https://shiny.e280.org/*** 👈
8
- - 🎭 duality: all components are available as ***web components*** or ***sly views***
7
+ - ▶️ ***see all the components at https://shiny.e280.org/*** 👈
9
8
  - 👷 built with [🦝sly](https://github.com/e280/sly) and [🔥lit](https://lit.dev/)
10
- - 🎨 totally customizable, via theme presets, custom themes, css vars and parts
9
+ - 🎨 customizable via css vars and shadow parts
11
10
  - 🧩 using [tabler icons](https://github.com/tabler/tabler-icons)
12
11
  - 🧑‍💻 a project by https://e280.org/
13
12
 
@@ -15,99 +14,58 @@
15
14
 
16
15
  <br/><br/>
17
16
 
18
- ## 🍭 instant html installation
19
- - put this in your html `<head>`
20
- ```html
21
- <script async src="https://shiny.e280.org/install/aura.bundle.min.js"></script>
22
- ```
23
- - you can swap `aura` there for another theme
24
- - you're ready to put shiny components in your html `<body>`
25
- ```html
26
- <shiny-copy text="hello world"></shiny-copy>
27
- ```
28
- - go pick your favorites at https://shiny.e280.org/
29
-
30
-
31
-
32
- <br/><br/>
33
-
34
- ## 🍬 web app installation
35
- - install shiny and friends
36
- ```sh
17
+ ## 🍭 shiny install and setup
18
+ - install shiny and friends into your project
19
+ ```bash
37
20
  npm install @e280/shiny @e280/sly lit
38
21
  ```
39
- - import stuff
40
- ```ts
41
- import {dom} from "@e280/sly"
42
- import {shiny, themes} from "@e280/shiny"
43
- ```
44
- - prepare the components/views and choose a theme
45
- ```ts
46
- const {components, views} = shiny({theme: themes.aura})
47
- ```
48
- - (optional) register the components
49
- ```ts
50
- dom.register(components)
51
- ```
52
- - or use views instead of components
53
- - go shopping at https://shiny.e280.org/
54
-
55
-
56
-
57
- <br/><br/>
58
-
59
- ## 🎨 themes
60
-
61
- - **`aura`** — cosmic dreamy seaside nebula vibes
62
- - `plain` — bare-bones spartan theme, for diy, buttons look lame
63
-
64
-
65
-
66
- <br/><br/>
67
-
68
- ## 😎 views are for the cool kids
69
- - hey, remember those `views` you got from the web app install snippet?
70
- - well you can yoink out a view you wanna use
71
- ```ts
72
- const {ShinyCopy} = views
73
- ```
74
- - then you can use 'em directly in your lit templates
75
- ```ts
22
+ - use some shiny views in your lit html
23
+ ```js
76
24
  import {html} from "lit"
77
- import {dom, view} from "@e280/sly"
78
-
79
- dom.register({
80
- MyComponent: view.component(use => html`
81
- <div>
82
- ${ShinyCopy("hello world")}
83
- </div>
84
- `)
85
- })
25
+ import {dom} from "@e280/sly"
26
+ import {ShinyButton, ShinyCopy} from "@e280/shiny"
27
+
28
+ dom.render(dom(".demo"), html`
29
+ <div>
30
+ example text
31
+ ${ShinyButton("e280")}
32
+ ${ShinyCopy("hello world")}
33
+ </div>
34
+ `)
86
35
  ```
87
- - you get nice typescript typings
88
- - no juggling annoying web component dom registrations
89
- - you're just using the shiny views directly
90
- - learn more about [🦝sly](https://github.com/e280/sly) and [🔥lit](https://lit.dev/)
36
+ - go shopping for more views at https://shiny.e280.org/
91
37
 
92
38
 
93
39
 
94
40
  <br/><br/>
95
41
 
96
- ## 💅 page-wide css customization
97
- - put this in your `<head>` and you can customize colors and stuff
42
+ ## 💅 shiny css customization
43
+ - put this in your `<head>`
98
44
  ```html
99
45
  <style>
100
46
  html {
101
47
  --shiny-bg: #111;
102
48
  --shiny-alpha: #def;
49
+
50
+ --shiny-rounded: 0.5em;
51
+ --shiny-padding: 0.5em;
52
+
53
+ --shiny-prime: #d068ff;
54
+ --shiny-code: #3f1;
55
+ --shiny-link: cyan;
56
+ --shiny-selection: white;
57
+ --shiny-selection-bg: #f70;
58
+
103
59
  --shiny-lame: #8888;
104
- --shiny-inactive-opacity: 0.5;
105
60
  --shiny-angry: #f50;
106
61
  --shiny-zesty: #cf0;
107
62
  --shiny-happy: #0fa;
108
63
  --shiny-calm: #0af;
109
64
  --shiny-sad: #74f;
110
65
  --shiny-quirky: #f49;
66
+
67
+ --shiny-inactive-opacity: 0.5;
68
+ --shiny-anim-duration: 300ms;
111
69
  }
112
70
  </style>
113
71
  ```
@@ -120,7 +78,3 @@
120
78
  reward us with github stars
121
79
  build with us at https://e280.org/ if you're good at dev
122
80
 
123
-
124
-
125
- <br/><br/>
126
-
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@e280/shiny",
3
- "version": "0.1.0-15",
4
- "description": "✨ web ui components",
3
+ "version": "0.1.0-16",
4
+ "description": "✨ web ui library",
5
5
  "license": "MIT",
6
6
  "type": "module",
7
7
  "main": "./x/index.js",
@@ -13,35 +13,30 @@
13
13
  "x",
14
14
  "s"
15
15
  ],
16
+ "scripts": {
17
+ "build": "rm -rf x && mkdir x && tsc && scute -v && ln -s \"$(realpath s)\" x/s && ln -s \"$(realpath assets)\" x/assets",
18
+ "dev": "octo 'tsc -w' 'scute -vw' 'node --watch x/test.js' 'hottie x --debounce 300'",
19
+ "test": "node x/test.js",
20
+ "count": "find s -path '*/_archive' -prune -o -name '*.ts' -exec wc -l {} +"
21
+ },
16
22
  "peerDependencies": {
17
- "@e280/sly": "^0.2.0-28",
18
- "lit": "^3.3.1"
23
+ "@e280/sly": "^0.3.0-9",
24
+ "lit": "^3.3.2"
19
25
  },
20
26
  "dependencies": {
21
- "@e280/strata": "^0.2.0",
22
- "@e280/stz": "^0.2.10"
27
+ "@e280/strata": "^0.3.0-2",
28
+ "@e280/stz": "^0.2.24",
29
+ "prismjs": "^1.30.0"
23
30
  },
24
31
  "devDependencies": {
25
- "@e280/science": "^0.1.2",
26
- "@e280/scute": "^0.1.1",
32
+ "@e280/hottie": "^0.1.0-3",
33
+ "@e280/octo": "^0.1.0-12",
34
+ "@e280/science": "^0.1.8",
35
+ "@e280/scute": "^0.3.0-1",
36
+ "@types/prismjs": "^1.26.6",
27
37
  "http-server": "^14.1.1",
28
- "npm-run-all": "^4.1.5",
29
38
  "typescript": "^5.9.3"
30
39
  },
31
- "scripts": {
32
- "build": "run-s _clean _ln _tsc _scute",
33
- "start": "octo 'scute -vw' 'tsc -w' 'node --watch x/tests.test.js' 'http-server x'",
34
- "count": "find s -path '*/_archive' -prune -o -name '*.ts' -exec wc -l {} +",
35
- "test": "node x/tests.test.js",
36
- "test-inspect": "node inspect x/tests.test.js",
37
- "_clean": "rm -rf x && mkdir x",
38
- "_tsc": "tsc",
39
- "_scute": "scute -v",
40
- "_ln": "run-s _ln:s _ln:assets",
41
- "_ln:s": "ln -s \"$(realpath s)\" x/s",
42
- "_ln:assets": "ln -s \"$(realpath assets)\" x/assets",
43
- "_lnx:stz": "rm -rf node_modules/@e280/stz && ln -s \"$(realpath ../stz)\" node_modules/@e280/stz"
44
- },
45
40
  "author": "Chase Moskal <chasemoskal@gmail.com>",
46
41
  "homepage": "https://github.com/e280/shiny#readme",
47
42
  "repository": {
@@ -54,8 +49,6 @@
54
49
  "keywords": [
55
50
  "web ui",
56
51
  "ui library",
57
- "components",
58
- "web components",
59
52
  "lit",
60
53
  "sly"
61
54
  ]
package/s/_archive/demo/utils/lipsum.ts ADDED
@@ -0,0 +1,19 @@
1
+
2
+ import {Dispenser} from "@e280/stz"
3
+
4
+ export const makeLipsumDispenser = () => new Dispenser(() => [
5
+ `lorem kettlebell dolor sit amet, mountain squats consectetur trail-running. adipiscing deadlift elit, sed do 45lb turkish get-up eiusmod tempor incididunt ut hike magna aliqua. ut enim ad minim clean & press, quis nostrud exercitation lunges ullamco kettlebell snatch trailhead nisi ut aliquip ex dolore summit irure dolor.`,
6
+
7
+ `lorem protein dolor sit amet, creatine scoop elit shaker bottle tempor. grilled steak magna keto-fasting culpa, carb-loading perspiciatis cheat day. whey isolate dolor sit macros elit, intermittent fasting tempor electrolyte magna; barefoot shoes culpa, liver perspiciatis ancestral squat rack gospel. lorem bulking dolor sit cut elit, tdee tracker tempor calorie deficit magna; chicken breast culpa gatorade perspiciatis meal prep.`,
8
+
9
+ `lorem caffeine dolor sit amet, double espresso elit cold brew tempor jitter. adderall magna focus culpa, lion’s mane perspiciatis nootropic. nicotine gum dolor sit vape elit, dopamine hit tempor buzz magna; lsd microdosing culpa, productivity perspiciatis agile sprint. lorem latte dolor sit drip elit, french press tempor aeropress magna; insomnia culpa, circadian rhythm perspiciatis blue light filter.`,
10
+
11
+ `lorem arch dolor sit amet, pacman -Syu elit rolling release tempor breakage. i3-gaps commodo tiling, bspwm magna culpa xinitrc. alias neovim configs in .dotfiles forest, r/unixporn veniam rice showcase perspiciatis.`,
12
+
13
+ `lorem authlocal dolor sit amet, user-sovereign identity elit, cryptographic tempor signatures. ed25519 magna keypair culpa, elliptic perspiciatis handshake ut zero-knowledge proof. decentralized login elit mnemonic seed tempor recovery phrase. did magna alias culpa federation, lorem oauth2 perspiciatis antiquated.`,
14
+
15
+ `lorem webgpu dolor sit amet, fragment shader elit vertex buffer tempor pipeline; bindgroup magna sampler culpa, wgsl perspiciatis alignment bug. compute pass workgroup barrier magna, mipmap cascade culpa drawcall instancing overflow. spir-v dolor sit wasm elit, canvas context lost magna; fallback webgl2 perspiciatis, polyfill slowpath dolore, glsl antique culpa extension hell 144hz tearing. command encoder perspiciatis out-of-memory, chromium nightly.`,
16
+
17
+ `lorem sedentary dolor sit amet, infinite scroll elit chair-bound tempor. commit marathon magna carpal tunnel culpa, caffeine perspiciatis heartbeat irregular. lorem backlog dolor sit ticket elit, jira sprint tempor sedentary slump magna; gym membership culpa expired, standing desk perspiciatis unused. lorem procrastination dolor sit youtube elit, keyboard crumbs tempor pizza box magna; cardio avoidant culpa, hike someday perspiciatis maybe.`,
18
+ ])
19
+
package/s/_archive/demo/views/showcase/style.css.ts ADDED
@@ -0,0 +1,53 @@
1
+
2
+ import {css} from "lit"
3
+ export default css`@layer view {
4
+
5
+ section.showcase {
6
+ position: relative;
7
+
8
+ display: flex;
9
+ flex-direction: column;
10
+
11
+ padding: 1em;
12
+ border-radius: 0.5em;
13
+ gap: 1em;
14
+
15
+ background: linear-gradient(to right top, #252dd985, #aa6affbd);
16
+ backdrop-filter: blur(0.5em);
17
+
18
+ box-shadow: 0 0 5em #5d1fadaa;
19
+ border-top: 2px solid #fff4;
20
+
21
+ &::before {
22
+ content: "";
23
+ display: block;
24
+ position: absolute;
25
+ inset: 0;
26
+ border-radius: 0.5em;
27
+ background: #0007;
28
+ width: calc(100% - 0.3em);
29
+ height: calc(100% - 0.3em);
30
+ margin: auto;
31
+ z-index: 0;
32
+ }
33
+
34
+ > * {
35
+ position: relative;
36
+ z-index: 1;
37
+ }
38
+ }
39
+
40
+ header {
41
+ display: flex;
42
+ flex-wrap: wrap;
43
+ place-content: center center;
44
+ gap: 0.5em;
45
+
46
+ h2 {
47
+ flex: 1 1 auto;
48
+ color: var(--prime);
49
+ }
50
+ }
51
+
52
+ }`
53
+
package/s/_archive/demo/views/showcase/view.ts ADDED
@@ -0,0 +1,54 @@
1
+
2
+ import {view} from "@e280/sly"
3
+ import {CSSResultGroup, html} from "lit"
4
+ import styleCss from "./style.css.js"
5
+ import {auraViews, viewsets} from "../../viewsets.js"
6
+ import {Exhibit, ExhibitParams} from "../exhibit/view.js"
7
+ import {TabControl} from "../../../components/tabs/control.js"
8
+ import {foundationCss} from "../../../components/foundation.css.js"
9
+
10
+ export const Showcase = view(use => (options: {
11
+ name: string
12
+ style: CSSResultGroup
13
+ exhibits: ExhibitParams[]
14
+ }) => {
15
+
16
+ use.name(`showcase-${options.name}`)
17
+ use.styles(foundationCss, styleCss)
18
+
19
+ const exhibitTabControl = use.once(() => new TabControl())
20
+ const themeTabControl = use.once(() => new TabControl())
21
+
22
+ const exhibitViews = viewsets.at(themeTabControl.index)![1]
23
+ const exhibit = options.exhibits.at(exhibitTabControl.index)!
24
+
25
+ return html`
26
+ <header>
27
+ <h2>✨shiny-${options.name}✨</h2>
28
+ ${auraViews.ShinyTabs
29
+ .props(exhibitTabControl)
30
+ .attr("snug")
31
+ .children(options.exhibits.map(p =>
32
+ auraViews.ShinyButton
33
+ .props()
34
+ .attr("sad")
35
+ .children(p.label)
36
+ .render()
37
+ ))
38
+ .render()}
39
+ ${auraViews.ShinyTabs
40
+ .props(themeTabControl)
41
+ .attr("snug")
42
+ .children(viewsets.map(([theme]) =>
43
+ auraViews.ShinyButton
44
+ .props()
45
+ .children(theme)
46
+ .render()
47
+ ))
48
+ .render()}
49
+ </header>
50
+
51
+ ${Exhibit(exhibit, exhibitViews, options.style)}
52
+ `
53
+ })
54
+
package/s/_archive/index.html.ts ADDED
@@ -0,0 +1,34 @@
1
+
2
+ import {ssg, html} from "@e280/scute"
3
+
4
+ const favicon = "/assets/favicon.png"
5
+
6
+ export default ssg.page(import.meta.url, async orb => ({
7
+ title: "shiny",
8
+ js: "demo/demo.bundle.min.js",
9
+ css: "demo/demo.css",
10
+ favicon,
11
+ dark: true,
12
+ socialCard: {
13
+ themeColor: "#d068ff",
14
+ siteName: "@e280/shiny",
15
+ title: "✨shiny✨",
16
+ description: "web ui components",
17
+ image: "https://shiny.e280.org" + favicon,
18
+ },
19
+
20
+ body: html`
21
+ <h1>
22
+ <strong>✨shiny✨</strong>
23
+ <small>v${orb.packageVersion()}</small>
24
+ </h1>
25
+
26
+ <section>
27
+ <p>web ui components</p>
28
+ <p><a href="https://github.com/e280/shiny#readme">readme for installation</a></p>
29
+ </section>
30
+
31
+ <shiny-demo></shiny-demo>
32
+ `,
33
+ }))
34
+
package/s/_archive/index.ts ADDED
@@ -0,0 +1,19 @@
1
+
2
+ export * from "./themes/index.js"
3
+
4
+ export * from "./components/copy/component.js"
5
+
6
+ export * from "./components/drawer/component.js"
7
+ export * from "./components/drawer/control.js"
8
+
9
+ export * from "./components/example/component.js"
10
+
11
+ export * from "./components/tabs/component.js"
12
+ export * from "./components/tabs/control.js"
13
+
14
+ export * from "./components/foundation.css.js"
15
+ export * from "./components/framework.js"
16
+ export * from "./components/raw-components.js"
17
+
18
+ export * from "./shiny.js"
19
+
package/s/_archive/utils/states.ts ADDED
@@ -0,0 +1,15 @@
1
+
2
+ export class States {
3
+ #states: Set<string>
4
+
5
+ constructor(element: HTMLElement) {
6
+ this.#states = element.attachInternals().states as any
7
+ }
8
+
9
+ assign(...states: string[]) {
10
+ this.#states.forEach(s => this.#states.delete(s))
11
+ for (const s of states) this.#states.add(s)
12
+ return this
13
+ }
14
+ }
15
+
package/s/demo/main.bundle.ts ADDED
@@ -0,0 +1,16 @@
1
+
2
+ import {dom} from "@e280/sly"
3
+ import {copyShowcase} from "../views/copy/showcase.js"
4
+ import {tabsShowcase} from "../views/tabs/showcase.js"
5
+ import {buttonShowcase} from "../views/button/showcase.js"
6
+ import {drawerShowcase} from "../views/drawer/showcase.js"
7
+
8
+ dom.render(dom(".gallery"), [
9
+ buttonShowcase(),
10
+ copyShowcase(),
11
+ tabsShowcase(),
12
+ drawerShowcase(),
13
+ ])
14
+
15
+ console.log("✨shiny✨")
16
+
package/s/demo/main.css ADDED
@@ -0,0 +1,71 @@
1
+
2
+ @layer view {
3
+ :root {
4
+ height: 100%;
5
+ font-size: 16px;
6
+ font-family: sans-serif;
7
+
8
+ color-scheme: dark;
9
+ scrollbar-gutter: stable;
10
+
11
+ color: var(--alpha);
12
+ background: var(--bg);
13
+
14
+ --tint: #070429aa;
15
+ background:
16
+ linear-gradient(0deg, var(--tint), var(--tint)),
17
+ #141519 url("/assets/bg.webp") center 80% / cover no-repeat;
18
+
19
+ background-attachment: fixed, fixed;
20
+
21
+ text-shadow: 0.1em 0.1em 0.2em #0008;
22
+ }
23
+
24
+ body {
25
+ width: 100%;
26
+ min-height: 100%;
27
+ max-width: 60em;
28
+ margin: auto;
29
+ padding: 1em;
30
+ padding-bottom: 6em;
31
+
32
+ display: flex;
33
+ flex-direction: column;
34
+ gap: 1em;
35
+ }
36
+
37
+ h1 {
38
+ font-size: 1.5em;
39
+ display: flex;
40
+ flex-direction: column;
41
+ text-align: center;
42
+
43
+ strong {
44
+ font-size: 1.5em;
45
+ color: var(--prime);
46
+ color: color-mix(in oklab, white, var(--prime) 20%);
47
+ text-shadow: 0 0 0.8em color-mix(in oklab, white, var(--prime) 50%);
48
+ }
49
+
50
+ small {
51
+ opacity: 0.6;
52
+ font-size: 0.7em;
53
+ font-weight: normal;
54
+ }
55
+ }
56
+
57
+ body > section {
58
+ display: flex;
59
+ flex-direction: column;
60
+ align-items: center;
61
+ justify-content: center;
62
+ margin-bottom: calc(var(--padding) * 2);
63
+ }
64
+
65
+ .gallery {
66
+ display: flex;
67
+ flex-direction: column;
68
+ gap: calc(var(--padding) * 2);
69
+ }
70
+ }
71
+
package/s/demo/parts/exhibit.ts ADDED
@@ -0,0 +1,15 @@
1
+
2
+ import {Content} from "@e280/sly"
3
+ import {CSSResult} from "lit"
4
+
5
+ export type Exhibit = {
6
+ name: string
7
+ explain: Content
8
+ render: () => Content
9
+ js: string
10
+ css?: CSSResult
11
+ styleboxCss: CSSResult
12
+ }
13
+
14
+ export const exhibit = (e: Exhibit) => e
15
+
package/s/demo/utils/lipsum.ts CHANGED
@@ -1,7 +1,7 @@
1
1
 
2
2
  import {Dispenser} from "@e280/stz"
3
3
 
4
- export const makeLipsumDispenser = () => new Dispenser(() => [
4
+ export const lipsum = new Dispenser(() => [
5
5
  `lorem kettlebell dolor sit amet, mountain squats consectetur trail-running. adipiscing deadlift elit, sed do 45lb turkish get-up eiusmod tempor incididunt ut hike magna aliqua. ut enim ad minim clean & press, quis nostrud exercitation lunges ullamco kettlebell snatch trailhead nisi ut aliquip ex dolore summit irure dolor.`,
6
6
 
7
7
  `lorem protein dolor sit amet, creatine scoop elit shaker bottle tempor. grilled steak magna keto-fasting culpa, carb-loading perspiciatis cheat day. whey isolate dolor sit macros elit, intermittent fasting tempor electrolyte magna; barefoot shoes culpa, liver perspiciatis ancestral squat rack gospel. lorem bulking dolor sit cut elit, tdee tracker tempor calorie deficit magna; chicken breast culpa gatorade perspiciatis meal prep.`,
package/s/demo/views/codebox/style.css.ts ADDED
@@ -0,0 +1,43 @@
1
+
2
+ import {css} from "lit"
3
+ export default css`@layer view {
4
+
5
+ :host {
6
+ display: flex;
7
+ flex-direction: column;
8
+ }
9
+
10
+ .box {
11
+ flex: 1 1 auto;
12
+ display: flex;
13
+ flex-direction: column;
14
+ background: #0003;
15
+ border-radius: var(--rounded);
16
+ }
17
+
18
+ header {
19
+ display: flex;
20
+ justify-content: space-between;
21
+ padding: calc(var(--padding) / 4) var(--padding);
22
+
23
+ .title {
24
+ opacity: 0.4;
25
+ font-size: 1em;
26
+ font-weight: normal;
27
+ }
28
+
29
+ .buttons {
30
+ display: flex;
31
+ font-size: 1.2em;
32
+ }
33
+ }
34
+
35
+ code {
36
+ padding: calc(var(--padding) / 4) var(--padding);
37
+ color: var(--code);
38
+ white-space: pre-wrap;
39
+ tab-size: 2;
40
+ }
41
+
42
+ }`
43
+
package/s/demo/views/codebox/use-prism-styles.ts ADDED
@@ -0,0 +1,13 @@
1
+
2
+ import {useOnce} from "@e280/sly"
3
+
4
+ export function usePrismStyles() {
5
+ return useOnce(() => {
6
+ const tag = document.head.querySelector("[data-prism]")
7
+ if (!tag) throw new Error("failed to find [data-prism] stylesheet")
8
+ const style = new CSSStyleSheet()
9
+ style.replaceSync(tag.textContent)
10
+ return style
11
+ })
12
+ }
13
+
package/s/demo/views/codebox/view.ts ADDED
@@ -0,0 +1,39 @@
1
+
2
+ import Prism from "prismjs"
3
+ import "prismjs/components/prism-js-templates"
4
+
5
+ import {html} from "lit"
6
+ import {untab} from "@e280/stz"
7
+ import {shadow, useCss} from "@e280/sly"
8
+
9
+ import styleCss from "./style.css.js"
10
+ import {usePrismStyles} from "./use-prism-styles.js"
11
+ import {themeCss} from "../../../theme/theme.css.js"
12
+ import {ShinyCopy} from "../../../views/copy/view.js"
13
+ import {unsafeHTML} from "lit/directives/unsafe-html.js"
14
+
15
+ export const Codebox = shadow((title: string, lang: "js" | "css", code: string) => {
16
+ const prismStyles = usePrismStyles()
17
+ useCss(themeCss, prismStyles, styleCss)
18
+
19
+ code = untab(code).trim()
20
+ const higlighted = Prism.highlight(
21
+ code,
22
+ lang === "js"
23
+ ? Prism.languages.javascript
24
+ : Prism.languages.css,
25
+ lang,
26
+ )
27
+
28
+ return html`
29
+ <div class=box>
30
+ <header>
31
+ <h3 class=title>${title}</h3>
32
+ <div class=buttons>${ShinyCopy(code)}</div>
33
+ </header>
34
+
35
+ <code>${unsafeHTML(higlighted)}</code>
36
+ </div>
37
+ `
38
+ })
39
+