braid-design-system
Version:
Themeable design system for the SEEK Group
70 lines (69 loc) • 2.47 kB
JavaScript
import { jsxs, jsx, Fragment as Fragment$1 } from "react/jsx-runtime";
import { useEffect, Fragment } from "react";
import { PlayroomStateProvider } from "./playroomState.mjs";
import { darkMode } from "../css/atoms/sprinkles.css.mjs";
import { BraidProvider, makeLinkComponent } from "../components/BraidProvider/BraidProvider.mjs";
import { ToastProvider } from "../components/useToast/ToastContext.mjs";
import { useResponsiveValue } from "../components/useResponsiveValue/useResponsiveValue.mjs";
const PlayroomLink = makeLinkComponent(
({ href, onClick, ...restProps }, ref) => /* @__PURE__ */ jsx(
"a",
{
ref,
href: href ?? "#",
onClick: (e) => {
if (!href) {
e.preventDefault();
}
if (onClick) {
onClick(e);
}
},
...restProps
}
)
);
const ResponsiveReady = ({ children }) => {
const responsiveReady = useResponsiveValue()({ mobile: true }) ?? false;
return /* @__PURE__ */ jsx(Fragment$1, { children: responsiveReady ? children : null });
};
const FrameComponent = ({ theme, children }) => {
useEffect(() => {
let code = "";
const darkTrigger = "braiddark";
const lightTrigger = "braidlight";
const longestTrigger = Math.max(lightTrigger.length, darkTrigger.length);
const colorModeToggle = (ev) => {
code += ev.key;
if (code.substr(code.length - darkTrigger.length) === darkTrigger) {
document.documentElement.classList.add(darkMode);
code = "";
}
if (code.substr(code.length - lightTrigger.length) === lightTrigger) {
document.documentElement.classList.remove(darkMode);
code = "";
}
if (code.length > longestTrigger) {
code = code.substr(code.length - longestTrigger);
}
};
window.addEventListener("keydown", colorModeToggle);
return () => {
window.removeEventListener("keydown", colorModeToggle);
};
}, []);
return /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsx(
"div",
{
dangerouslySetInnerHTML: {
__html: theme.webFonts.map((font) => font.linkTag).join("")
}
}
),
/* @__PURE__ */ jsx(PlayroomStateProvider, { children: /* @__PURE__ */ jsx(BraidProvider, { theme, linkComponent: PlayroomLink, children: /* @__PURE__ */ jsx(ToastProvider, { children: /* @__PURE__ */ jsx(ResponsiveReady, { children }) }) }) })
] });
};
export {
FrameComponent
};