@snapdragonsnursery/react-components 1.0.0

package/src/ThemeToggle.jsx

@@ -0,0 +1,83 @@
+import { trackDarkModeToggle } from "./telemetry";
+
+function ThemeToggle({ theme, setTheme }) {
+  // For accessibility
+  const options = [
+    {
+      value: "system",
+      label: "System",
+      icon: (
+        <svg
+          className="w-5 h-5"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <rect x="3" y="4" width="18" height="14" rx="2" strokeWidth="2" />
+          <path d="M8 20h8" strokeWidth="2" />
+        </svg>
+      ),
+    },
+    {
+      value: "light",
+      label: "Light",
+      icon: (
+        <svg
+          className="w-5 h-5"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 20 20"
+        >
+          <path
+            fillRule="evenodd"
+            d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
+            clipRule="evenodd"
+          />
+        </svg>
+      ),
+    },
+    {
+      value: "dark",
+      label: "Dark",
+      icon: (
+        <svg
+          className="w-5 h-5"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 20 20"
+        >
+          <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" />
+        </svg>
+      ),
+    },
+  ];
+
+  const handleThemeChange = (newTheme) => {
+    const oldTheme = theme;
+    setTheme(newTheme);
+    trackDarkModeToggle(oldTheme, newTheme);
+  };
+
+  return (
+    <div className="flex justify-center items-center bg-gray-200 dark:bg-gray-700 rounded-full p-1.5 w-full">
+      {options.map((opt) => (
+        <button
+          key={opt.value}
+          onClick={() => handleThemeChange(opt.value)}
+          className={`flex-1 flex items-center justify-center h-10 rounded-full transition-all duration-200 focus:outline-none
+            ${
+              theme === opt.value
+                ? "bg-white dark:bg-gray-900 shadow text-blue-600 dark:text-yellow-400"
+                : "bg-transparent text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600"
+            }`}
+          title={opt.label + " mode"}
+          aria-pressed={theme === opt.value}
+        >
+          {opt.icon}
+        </button>
+      ))}
+    </div>
+  );
+}
+
+export default ThemeToggle;

package/src/index.js

@@ -0,0 +1,4 @@
+export { default as AuthButtons } from "./AuthButtons";
+export { default as ThemeToggle } from "./ThemeToggle";
+export { default as ChildSearchModal } from "./ChildSearchModal";
+export { configureTelemetry } from "./telemetry";

package/src/telemetry.js

@@ -0,0 +1,49 @@
+// Default stub implementations
+let _trackAuthEvent = () => {};
+let _trackError = () => {};
+let _setUserContext = () => {};
+let _clearUserContext = () => {};
+let _trackDarkModeToggle = () => {};
+let _trackEvent = () => {};
+
+// Configuration function to override telemetry implementations
+export function configureTelemetry({
+  trackAuthEvent,
+  trackError,
+  setUserContext,
+  clearUserContext,
+  trackDarkModeToggle,
+  trackEvent,
+}) {
+  if (trackAuthEvent) _trackAuthEvent = trackAuthEvent;
+  if (trackError) _trackError = trackError;
+  if (setUserContext) _setUserContext = setUserContext;
+  if (clearUserContext) _clearUserContext = clearUserContext;
+  if (trackDarkModeToggle) _trackDarkModeToggle = trackDarkModeToggle;
+  if (trackEvent) _trackEvent = trackEvent;
+}
+
+// Export the configurable functions
+export function trackAuthEvent(...args) {
+  return _trackAuthEvent(...args);
+}
+
+export function trackError(...args) {
+  return _trackError(...args);
+}
+
+export function setUserContext(...args) {
+  return _setUserContext(...args);
+}
+
+export function clearUserContext(...args) {
+  return _clearUserContext(...args);
+}
+
+export function trackDarkModeToggle(...args) {
+  return _trackDarkModeToggle(...args);
+}
+
+export function trackEvent(...args) {
+  return _trackEvent(...args);
+}