@e280/shiny 0.1.0-1 → 0.1.0-3

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 (55) hide show
  1. package/README.md +85 -3
  2. package/package.json +3 -3
  3. package/s/demo/demo.bundle.ts +7 -7
  4. package/s/demo/demo.css +3 -1
  5. package/s/demo/views/demonstration/view.ts +4 -4
  6. package/s/index.html.ts +1 -1
  7. package/s/index.ts +4 -2
  8. package/s/install.bundle.ts +9 -0
  9. package/s/shiny.ts +15 -0
  10. package/s/ui/copy/component.ts +5 -5
  11. package/s/ui/example/component.ts +5 -5
  12. package/s/ui/framework.ts +4 -1
  13. package/s/ui/{components.ts → raw-components.ts} +1 -1
  14. package/x/demo/demo.bundle.js +7 -7
  15. package/x/demo/demo.bundle.js.map +1 -1
  16. package/x/demo/demo.bundle.min.js +31 -31
  17. package/x/demo/demo.bundle.min.js.map +4 -4
  18. package/x/demo/demo.css +3 -1
  19. package/x/demo/views/demonstration/view.d.ts +2 -2
  20. package/x/demo/views/demonstration/view.js +2 -2
  21. package/x/demo/views/demonstration/view.js.map +1 -1
  22. package/x/index.d.ts +2 -2
  23. package/x/index.html +6 -4
  24. package/x/index.html.js +1 -1
  25. package/x/index.js +2 -2
  26. package/x/index.js.map +1 -1
  27. package/x/install.bundle.d.ts +1 -0
  28. package/x/install.bundle.js +5 -0
  29. package/x/install.bundle.js.map +1 -0
  30. package/x/install.bundle.min.js +135 -0
  31. package/x/install.bundle.min.js.map +7 -0
  32. package/x/shiny.d.ts +20 -0
  33. package/x/shiny.js +8 -0
  34. package/x/shiny.js.map +1 -0
  35. package/x/ui/copy/component.d.ts +3 -3
  36. package/x/ui/copy/component.js +4 -4
  37. package/x/ui/copy/component.js.map +1 -1
  38. package/x/ui/example/component.d.ts +3 -3
  39. package/x/ui/example/component.js +4 -4
  40. package/x/ui/example/component.js.map +1 -1
  41. package/x/ui/framework.d.ts +5 -1
  42. package/x/ui/framework.js +1 -1
  43. package/x/ui/framework.js.map +1 -1
  44. package/x/ui/{components.d.ts → raw-components.d.ts} +1 -1
  45. package/x/ui/{components.js → raw-components.js} +2 -2
  46. package/x/ui/raw-components.js.map +1 -0
  47. package/s/tools/untab.ts +0 -30
  48. package/s/ui/themers.ts +0 -28
  49. package/x/tools/untab.d.ts +0 -1
  50. package/x/tools/untab.js +0 -26
  51. package/x/tools/untab.js.map +0 -1
  52. package/x/ui/components.js.map +0 -1
  53. package/x/ui/themers.d.ts +0 -8
  54. package/x/ui/themers.js +0 -12
  55. package/x/ui/themers.js.map +0 -1
package/README.md CHANGED
@@ -1,10 +1,92 @@
1
1
 
2
- <div align="center"><img alt="" width="256" src="./assets/favicon.png"/></div>
2
+ ![](https://i.imgur.com/F1J78wH.png)
3
3
 
4
- # ✨ shiny
4
+ # ✨shiny
5
5
  > *web ui components*
6
6
 
7
- https://shiny.e280.org/
7
+ - 💁 ***see all the components at https://shiny.e280.org/*** 👈
8
+ - 👷 built with [🦝sly](https://github.com/e280/sly) and [🔥lit](https://lit.dev/)
9
+ - 🍋 all components are available as ***web components*** or ***sly views***
10
+ - 🧑‍💻 a project by https://e280.org/
11
+
12
+
13
+
14
+ <br/><br/>
15
+
16
+ ## ✨ instant html installation
17
+ - put this in your html `<head>`
18
+ ```html
19
+ <script async src="https://shiny.e280.org/install.bundle.min.js"></script>
20
+ ```
21
+ - you're ready to put shiny components in your html `<body>`
22
+ ```html
23
+ <shiny-copy text="hello world"></shiny-copy>
24
+ ```
25
+ - go pick your favorites at https://shiny.e280.org/
26
+
27
+
28
+
29
+ <br/><br/>
30
+
31
+ ## ✨ web app installation
32
+ - install shiny and friends
33
+ ```sh
34
+ npm install @e280/shiny @e280/sly lit
35
+ ```
36
+ - import stuff
37
+ ```ts
38
+ import {dom} from "@e280/sly"
39
+ import {shiny, themes} from "@e280/shiny"
40
+ ```
41
+ - prepare the components/views and choose a theme
42
+ ```ts
43
+ const {components, views} = shiny({theme: themes.basic})
44
+ ```
45
+ - (optional) register the components
46
+ ```ts
47
+ dom.register(components)
48
+ ```
49
+
50
+
51
+
52
+ <br/><br/>
53
+
54
+ ## ✨ views are for the cool kids
55
+ - hey, remember those `views` you got from the install snippet?
56
+ ```ts
57
+ const {components, views} = shiny({theme: themes.basic})
58
+ ```
59
+ - well you can yoink out a view you wanna use
60
+ ```ts
61
+ const {ShinyCopy} = views
62
+ ```
63
+ - then you can render it directly in your lit templates
64
+ ```ts
65
+ import {html} from "lit"
66
+ import {dom, view} from "@e280/sly"
67
+
68
+ dom.register({
69
+ MyComponent: view.component(use => html`
70
+ <div>
71
+ ${ShinyCopy("hello world")}
72
+ </div>
73
+ `)
74
+ })
75
+ ```
76
+ - you get nice typescript typings
77
+ - no juggling annoying web component dom registrations
78
+ - you're just using the shiny views directly
79
+ - learn more about [🦝sly](https://github.com/e280/sly) and [🔥lit](https://lit.dev/)
80
+
81
+
82
+
83
+ <br/><br/>
84
+
85
+ ## ✨shiny is by e280
86
+ reward us with github stars
87
+ build with us at https://e280.org/ if you're good at dev
88
+
89
+
8
90
 
9
91
  <br/><br/>
10
92
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@e280/shiny",
3
- "version": "0.1.0-1",
3
+ "version": "0.1.0-3",
4
4
  "description": "✨ web ui components",
5
5
  "license": "MIT",
6
6
  "type": "module",
@@ -14,12 +14,12 @@
14
14
  "s"
15
15
  ],
16
16
  "peerDependencies": {
17
- "@e280/sly": "^0.2.0-21",
17
+ "@e280/sly": "^0.2.0-24",
18
18
  "lit": "^3.3.1"
19
19
  },
20
20
  "dependencies": {
21
21
  "@e280/strata": "^0.2.0-14",
22
- "@e280/stz": "^0.2.6"
22
+ "@e280/stz": "^0.2.7"
23
23
  },
24
24
  "devDependencies": {
25
25
  "@e280/science": "^0.1.2",
package/s/demo/demo.bundle.ts CHANGED
@@ -1,11 +1,11 @@
1
1
 
2
2
  import {css, html} from "lit"
3
3
  import {dom, view} from "@e280/sly"
4
- import {themes} from "../themes/index.js"
5
- import {themeViews} from "../ui/themers.js"
4
+ import {shiny} from "../shiny.js"
5
+ import {basic} from "../themes/basic.css.js"
6
6
  import {Demonstration} from "./views/demonstration/view.js"
7
7
 
8
- const views = themeViews(themes.basic)
8
+ const {views} = shiny({theme: basic})
9
9
 
10
10
  dom.register({ShinyDemo: view.component(use => {
11
11
  use.styles(css`
@@ -27,16 +27,16 @@ dom.register({ShinyDemo: view.component(use => {
27
27
  explain: html`
28
28
  <p>button for click-to-copy text</p>
29
29
  `,
30
- exampleView: `
31
- ShinyCopy("hello world")
32
- `,
33
30
  exampleComponent: `
34
31
  <shiny-copy text="hello world"></shiny-copy>
35
32
  `,
33
+ exampleView: `
34
+ ShinyCopy("hello world")
35
+ `,
36
36
  content: views.ShinyCopy("hello world"),
37
37
  }),
38
38
  ]
39
39
  })})
40
40
 
41
- console.log("✨ shiny")
41
+ console.log("✨shiny")
42
42
 
package/s/demo/demo.css CHANGED
@@ -71,7 +71,7 @@
71
71
  --tint: #070429aa;
72
72
  background:
73
73
  linear-gradient(0deg, var(--tint), var(--tint)),
74
- #141519 url("/assets/bg.webp") center 60% / cover no-repeat;
74
+ #141519 url("/assets/bg.webp") center 80% / cover no-repeat;
75
75
 
76
76
  background-attachment: fixed, fixed;
77
77
 
@@ -100,6 +100,8 @@
100
100
  strong {
101
101
  font-size: 1.5em;
102
102
  color: var(--prime);
103
+ color: color-mix(in oklab, white, var(--prime) 20%);
104
+ text-shadow: 0 0 0.8em color-mix(in oklab, white, var(--prime) 50%);
103
105
  }
104
106
 
105
107
  small {
package/s/demo/views/demonstration/view.ts CHANGED
@@ -1,17 +1,17 @@
1
1
 
2
2
  import {html} from "lit"
3
+ import {untab} from "@e280/stz"
3
4
  import {Content, view} from "@e280/sly"
4
5
  import styleCss from "./style.css.js"
5
- import {untab} from "../../../tools/untab.js"
6
- import {ShinyViews} from "../../../ui/themers.js"
6
+ import {ShinyViews} from "../../../shiny.js"
7
7
  import {basic} from "../../../themes/basic.css.js"
8
8
 
9
9
  export const Demonstration = view(use => (options: {
10
10
  name: string
11
11
  explain: Content
12
12
  views: ShinyViews
13
- exampleView: string
14
13
  exampleComponent: string
14
+ exampleView: string
15
15
  content: Content
16
16
  }) => {
17
17
 
@@ -36,8 +36,8 @@ export const Demonstration = view(use => (options: {
36
36
  <h2>✨ ${options.name}</h2>
37
37
  <div class=explain>${options.explain}</div>
38
38
  <div class=codes>
39
- ${codeblock("sly view", options.exampleView)}
40
39
  ${codeblock("html web component", options.exampleComponent)}
40
+ ${codeblock("sly view", options.exampleView)}
41
41
  </div>
42
42
  </div>
43
43
 
package/s/index.html.ts CHANGED
@@ -22,7 +22,7 @@ export default ssg.page(import.meta.url, async orb => ({
22
22
 
23
23
  body: html`
24
24
  <h1>
25
- <strong>✨ @e280/shiny</strong>
25
+ <strong>✨shiny✨</strong>
26
26
  <small>v${orb.packageVersion()}</small>
27
27
  </h1>
28
28
 
package/s/index.ts CHANGED
@@ -1,7 +1,9 @@
1
1
 
2
2
  export * from "./themes/index.js"
3
+
3
4
  export * from "./ui/example/component.js"
4
5
  export * from "./ui/copy/component.js"
5
- export * from "./ui/themers.js"
6
- export * from "./ui/components.js"
6
+ export * from "./ui/framework.js"
7
+
8
+ export * from "./shiny.js"
7
9
 
package/s/install.bundle.ts ADDED
@@ -0,0 +1,9 @@
1
+
2
+ import {dom} from "@e280/sly"
3
+ import {shiny} from "./shiny.js"
4
+ import {basic} from "./themes/basic.css.js"
5
+
6
+ dom.register(
7
+ shiny({theme: basic}).components
8
+ )
9
+
package/s/shiny.ts ADDED
@@ -0,0 +1,15 @@
1
+
2
+ import {contextualizeComponents, getViews} from "@e280/sly"
3
+ import {ShinyContext} from "./ui/framework.js"
4
+ import {rawComponents} from "./ui/raw-components.js"
5
+
6
+ export function shiny(context: ShinyContext) {
7
+ const components = contextualizeComponents(context, rawComponents)
8
+ const views = getViews(components)
9
+ return {components, views}
10
+ }
11
+
12
+ export type Shiny = ReturnType<typeof shiny>
13
+ export type ShinyViews = Shiny["views"]
14
+ export type ShinyComponents = Shiny["components"]
15
+
package/s/ui/copy/component.ts CHANGED
@@ -1,18 +1,18 @@
1
1
 
2
+ import {html} from "lit"
2
3
  import {debounce} from "@e280/stz"
3
4
  import {dom, view} from "@e280/sly"
4
5
 
5
- import {CSSResult, html} from "lit"
6
6
  import styleCss from "./style.css.js"
7
- import {ShinyElement} from "../framework.js"
7
+ import {ShinyContext, ShinyElement} from "../framework.js"
8
8
  import clipboardSvg from "../../icons/tabler/clipboard.svg.js"
9
9
  import clipboardXFilledSvg from "../../icons/tabler/clipboard-x-filled.svg.js"
10
10
  import clipboardCheckFilledSvg from "../../icons/tabler/clipboard-check-filled.svg.js"
11
11
 
12
12
  export class ShinyCopy extends (
13
- view(use => (theme: CSSResult, text: string | undefined, ms = 1000) => {
13
+ view(use => (context: ShinyContext, text: string | undefined, ms = 1000) => {
14
14
  use.name("shiny-copy")
15
- use.styles(theme, styleCss)
15
+ use.styles(context.theme, styleCss)
16
16
 
17
17
  type Status = "neutral" | "good" | "bad" | "invalid"
18
18
 
@@ -61,6 +61,6 @@ export class ShinyCopy extends (
61
61
  ms: Number,
62
62
  })
63
63
  })
64
- .props(el => [el.theme, el.attrs.text, el.attrs.ms])
64
+ .props(el => [el.context, el.attrs.text, el.attrs.ms])
65
65
  ) {}
66
66
 
package/s/ui/example/component.ts CHANGED
@@ -1,12 +1,12 @@
1
1
 
2
+ import {html} from "lit"
2
3
  import {dom, view} from "@e280/sly"
3
- import {CSSResult, html} from "lit"
4
4
  import styleCss from "./style.css.js"
5
- import {ShinyElement} from "../framework.js"
5
+ import {ShinyContext, ShinyElement} from "../framework.js"
6
6
 
7
7
  export class ShinyExample extends (
8
- view(use => (theme: CSSResult, start: number) => {
9
- use.styles(theme, styleCss)
8
+ view(use => (context: ShinyContext, start: number) => {
9
+ use.styles(context.theme, styleCss)
10
10
 
11
11
  const $count = use.signal(start)
12
12
  const increment = () => { $count.value++ }
@@ -20,6 +20,6 @@ export class ShinyExample extends (
20
20
  .component(class extends ShinyElement {
21
21
  attrs = dom.attrs(this).spec({start: Number})
22
22
  })
23
- .props(el => [el.theme, el.attrs.start ?? 1] as const)
23
+ .props(el => [el.context, el.attrs.start ?? 1] as const)
24
24
  ) {}
25
25
 
package/s/ui/framework.ts CHANGED
@@ -1,8 +1,11 @@
1
1
 
2
+ import {CSSResultGroup} from "lit"
2
3
  import {BaseElement} from "@e280/sly"
3
4
  import {basic} from "../themes/basic.css.js"
4
5
 
6
+ export type ShinyContext = {theme: CSSResultGroup}
7
+
5
8
  export class ShinyElement extends BaseElement {
6
- theme = basic
9
+ context: ShinyContext = {theme: basic}
7
10
  }
8
11
 
package/s/ui/{components.ts → raw-components.ts} RENAMED
@@ -2,7 +2,7 @@
2
2
  import {ShinyCopy} from "./copy/component.js"
3
3
  import {ShinyExample} from "./example/component.js"
4
4
 
5
- export const components = {
5
+ export const rawComponents = {
6
6
  ShinyCopy,
7
7
  ShinyExample,
8
8
  }
package/x/demo/demo.bundle.js CHANGED
@@ -1,9 +1,9 @@
1
1
  import { css, html } from "lit";
2
2
  import { dom, view } from "@e280/sly";
3
- import { themes } from "../themes/index.js";
4
- import { themeViews } from "../ui/themers.js";
3
+ import { shiny } from "../shiny.js";
4
+ import { basic } from "../themes/basic.css.js";
5
5
  import { Demonstration } from "./views/demonstration/view.js";
6
- const views = themeViews(themes.basic);
6
+ const { views } = shiny({ theme: basic });
7
7
  dom.register({ ShinyDemo: view.component(use => {
8
8
  use.styles(css `
9
9
  :host {
@@ -23,15 +23,15 @@ dom.register({ ShinyDemo: view.component(use => {
23
23
  explain: html `
24
24
  <p>button for click-to-copy text</p>
25
25
  `,
26
- exampleView: `
27
- ShinyCopy("hello world")
28
- `,
29
26
  exampleComponent: `
30
27
  <shiny-copy text="hello world"></shiny-copy>
31
28
  `,
29
+ exampleView: `
30
+ ShinyCopy("hello world")
31
+ `,
32
32
  content: views.ShinyCopy("hello world"),
33
33
  }),
34
34
  ];
35
35
  }) });
36
- console.log("✨ shiny");
36
+ console.log("✨shiny");
37
37
  //# sourceMappingURL=demo.bundle.js.map
package/x/demo/demo.bundle.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"demo.bundle.js","sourceRoot":"","sources":["../../s/demo/demo.bundle.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAE,IAAI,EAAC,MAAM,KAAK,CAAA;AAC7B,OAAO,EAAC,GAAG,EAAE,IAAI,EAAC,MAAM,WAAW,CAAA;AACnC,OAAO,EAAC,MAAM,EAAC,MAAM,oBAAoB,CAAA;AACzC,OAAO,EAAC,UAAU,EAAC,MAAM,kBAAkB,CAAA;AAC3C,OAAO,EAAC,aAAa,EAAC,MAAM,+BAA+B,CAAA;AAE3D,MAAM,KAAK,GAAG,UAAU,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;AAEtC,GAAG,CAAC,QAAQ,CAAC,EAAC,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,EAAE;QAC7C,GAAG,CAAC,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;EAUb,CAAC,CAAA;QAEF,OAAO;YACN,aAAa,CAAC;gBACb,KAAK;gBACL,IAAI,EAAE,YAAY;gBAClB,OAAO,EAAE,IAAI,CAAA;;IAEZ;gBACD,WAAW,EAAE;;IAEZ;gBACD,gBAAgB,EAAE;;IAEjB;gBACD,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC,aAAa,CAAC;aACvC,CAAC;SACF,CAAA;IACF,CAAC,CAAC,EAAC,CAAC,CAAA;AAEJ,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC,CAAA"}
1
+ {"version":3,"file":"demo.bundle.js","sourceRoot":"","sources":["../../s/demo/demo.bundle.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAE,IAAI,EAAC,MAAM,KAAK,CAAA;AAC7B,OAAO,EAAC,GAAG,EAAE,IAAI,EAAC,MAAM,WAAW,CAAA;AACnC,OAAO,EAAC,KAAK,EAAC,MAAM,aAAa,CAAA;AACjC,OAAO,EAAC,KAAK,EAAC,MAAM,wBAAwB,CAAA;AAC5C,OAAO,EAAC,aAAa,EAAC,MAAM,+BAA+B,CAAA;AAE3D,MAAM,EAAC,KAAK,EAAC,GAAG,KAAK,CAAC,EAAC,KAAK,EAAE,KAAK,EAAC,CAAC,CAAA;AAErC,GAAG,CAAC,QAAQ,CAAC,EAAC,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,EAAE;QAC7C,GAAG,CAAC,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;EAUb,CAAC,CAAA;QAEF,OAAO;YACN,aAAa,CAAC;gBACb,KAAK;gBACL,IAAI,EAAE,YAAY;gBAClB,OAAO,EAAE,IAAI,CAAA;;IAEZ;gBACD,gBAAgB,EAAE;;IAEjB;gBACD,WAAW,EAAE;;IAEZ;gBACD,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC,aAAa,CAAC;aACvC,CAAC;SACF,CAAA;IACF,CAAC,CAAC,EAAC,CAAC,CAAA;AAEJ,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAA"}