zudoku 0.6.1-dev.1 → 0.6.1-dev.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 (21) hide show
  1. package/dist/config/validators/validate.d.ts +18 -0
  2. package/dist/config/validators/validate.js +4 -0
  3. package/dist/config/validators/validate.js.map +1 -1
  4. package/dist/lib/components/Banner.d.ts +1 -0
  5. package/dist/lib/components/Banner.js +21 -0
  6. package/dist/lib/components/Banner.js.map +1 -0
  7. package/dist/lib/components/Header.js +2 -1
  8. package/dist/lib/components/Header.js.map +1 -1
  9. package/dist/lib/core/DevPortalContext.d.ts +2 -0
  10. package/dist/lib/core/DevPortalContext.js.map +1 -1
  11. package/dist/lib/demo/DemoAnnouncement.js +2 -2
  12. package/dist/lib/demo/DemoAnnouncement.js.map +1 -1
  13. package/lib/zudoku.components.js +587 -546
  14. package/lib/zudoku.components.js.map +1 -1
  15. package/package.json +1 -1
  16. package/src/app/demo-cdn.html +5 -0
  17. package/src/app/main.css +1 -1
  18. package/src/lib/components/Banner.tsx +41 -0
  19. package/src/lib/components/Header.tsx +2 -9
  20. package/src/lib/core/DevPortalContext.ts +2 -0
  21. package/src/lib/demo/DemoAnnouncement.tsx +2 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "zudoku",
3
- "version": "0.6.1-dev.1",
3
+ "version": "0.6.1-dev.3",
4
4
  "type": "module",
5
5
  "files": [
6
6
  "dist",
package/src/app/demo-cdn.html CHANGED
@@ -22,6 +22,11 @@
22
22
  crossorigin
23
23
  href="https://cdn.zudoku.dev/latest/style.css"
24
24
  />
25
+ <script>
26
+ !function(t,e){var o,n,p,r;e.__SV||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement("script")).type="text/javascript",p.async=!0,p.src=s.api_host.replace(".i.posthog.com","-assets.i.posthog.com")+"/static/array.js",(r=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,r);var u=e;for(void 0!==a?u=e[a]=[]:a="posthog",u.people=u.people||[],u.toString=function(t){var e="posthog";return"posthog"!==a&&(e+="."+a),t||(e+=" (stub)"),e},u.people.toString=function(){return u.toString(1)+".people (stub)"},o="init push capture register register_once register_for_session unregister unregister_for_session getFeatureFlag getFeatureFlagPayload isFeatureEnabled reloadFeatureFlags updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures on onFeatureFlags onSessionId getSurveys getActiveMatchingSurveys renderSurvey canRenderSurvey getNextSurveyStep identify setPersonProperties group resetGroups setPersonPropertiesForFlags resetPersonPropertiesForFlags setGroupPropertiesForFlags resetGroupPropertiesForFlags reset get_distinct_id getGroups get_session_id get_session_replay_url alias set_config startSessionRecording stopSessionRecording sessionRecordingStarted captureException loadToolbar get_property getSessionProperty createPersonProfile opt_in_capturing opt_out_capturing has_opted_in_capturing has_opted_out_capturing clear_opt_in_out_capturing debug".split(" "),n=0;n<o.length;n++)g(u,o[n]);e._i.push([i,s,a])},e.__SV=1)}(document,window.posthog||[]);
27
+ posthog.init('phc_l8rjm0vHBMwNdGeBRDrK8UIYjyVxZyBAtnYo2hS18OY',{api_host:'https://us.i.posthog.com', person_profiles: 'identified_only' // or 'always' to create profiles for anonymous users as well
28
+ })
29
+ </script>
25
30
  </head>
26
31
  <body>
27
32
  <div id="root"></div>
package/src/app/main.css CHANGED
@@ -80,7 +80,7 @@
80
80
  :root {
81
81
  --top-header-height: 65px;
82
82
  --top-nav-height: 50px;
83
- --banner-height: 48px;
83
+ --banner-height: 40px;
84
84
  --header-height: calc(
85
85
  var(--top-header-height) + var(--top-nav-height) + var(--banner-height)
86
86
  );
package/src/lib/components/Banner.tsx ADDED
@@ -0,0 +1,41 @@
1
+ import { CircleXIcon } from "lucide-react";
2
+ import { useState } from "react";
3
+ import { cn } from "../util/cn.js";
4
+ import { useZudoku } from "./context/ZudokuContext.js";
5
+
6
+ const COLOR_MAP = {
7
+ info: "bg-blue-500",
8
+ note: "bg-gray-500",
9
+ tip: "bg-green-600",
10
+ caution: "bg-orange-500",
11
+ danger: "bg-rose-500",
12
+ };
13
+
14
+ export const Banner = () => {
15
+ const { page } = useZudoku();
16
+ const [isBannerOpen, setIsBannerOpen] = useState(true);
17
+
18
+ if (!page?.banner || !isBannerOpen) {
19
+ return <style>{`:root { --banner-height: 0px; }`}</style>;
20
+ }
21
+
22
+ return (
23
+ <div
24
+ className={cn(
25
+ "relative text-primary-foreground text-sm font-medium px-4 py-2 flex gap-2 items-center",
26
+ page.banner.color ? COLOR_MAP[page.banner.color] : "bg-primary",
27
+ )}
28
+ >
29
+ <div className="w-full">{page.banner.message}</div>
30
+ {page.banner.dismissible && (
31
+ <button
32
+ type="button"
33
+ className="md:absolute md:right-4 -m-1.5 p-1.5 hover:bg-accent-foreground/10 rounded-md"
34
+ onClick={() => setIsBannerOpen(false)}
35
+ >
36
+ <CircleXIcon size={16} />
37
+ </button>
38
+ )}
39
+ </div>
40
+ );
41
+ };
package/src/lib/components/Header.tsx CHANGED
@@ -17,6 +17,7 @@ import {
17
17
  DropdownMenuTrigger,
18
18
  } from "../ui/DropdownMenu.js";
19
19
  import { cn } from "../util/cn.js";
20
+ import { Banner } from "./Banner.js";
20
21
  import { useTheme } from "./context/ThemeContext.js";
21
22
  import { useZudoku } from "./context/ZudokuContext.js";
22
23
  import { MobileTopNavigation } from "./MobileTopNavigation.js";
@@ -60,15 +61,7 @@ export const Header = memo(function HeaderInner() {
60
61
 
61
62
  return (
62
63
  <header className="sticky lg:top-0 z-10 bg-background/80 backdrop-blur w-full">
63
- <>
64
- {page?.banner ? (
65
- <div className="h-[--banner-height] bg-primary/90 text-primary-foreground text-center text-sm font-medium py-2 flex items-center justify-center">
66
- <div>{page.banner.message}</div>
67
- </div>
68
- ) : (
69
- <style>{`:root{ --banner-height: 0px }`}</style>
70
- )}
71
- </>
64
+ <Banner />
72
65
  <div className="max-w-screen-2xl mx-auto">
73
66
  <div className="grid grid-cols-2 lg:grid-cols-[calc(var(--side-nav-width))_1fr] lg:gap-12 items-center border-b px-10 lg:px-12 h-[--top-header-height]">
74
67
  <div className="flex">
package/src/lib/core/DevPortalContext.ts CHANGED
@@ -51,6 +51,8 @@ type Page = Partial<{
51
51
  };
52
52
  banner?: {
53
53
  message: ReactNode;
54
+ color?: "note" | "tip" | "info" | "caution" | "danger";
55
+ dismissible?: boolean;
54
56
  };
55
57
  }>;
56
58
 
package/src/lib/demo/DemoAnnouncement.tsx CHANGED
@@ -1,6 +1,6 @@
1
1
  export const DemoAnnouncement = () => {
2
2
  return (
3
- <>
3
+ <div className="text-center">
4
4
  This demo version of your OpenAPI isn't as fast or flexible as
5
5
  self-hosting.{" "}
6
6
  <a
@@ -10,7 +10,7 @@ export const DemoAnnouncement = () => {
10
10
  Get started here
11
11
  </a>{" "}
12
12
  to see Zudoku at full tilt.
13
- </>
13
+ </div>
14
14
  );
15
15
  };
16
16