@ews-admin/global-design-system 1.1.6 → 1.1.8

package/src/components/ThemeDebugger/ThemeDebugger.tsx

@@ -0,0 +1,101 @@
+import React from "react";
+import { useTheme } from "../../theme/ThemeProvider";
+
+export interface ThemeDebuggerProps {
+  className?: string;
+}
+
+export const ThemeDebugger: React.FC<ThemeDebuggerProps> = ({
+  className = "",
+}) => {
+  const { theme, themeConfig, setTheme } = useTheme();
+
+  const getComputedStyleValue = (property: string) => {
+    if (typeof window !== "undefined") {
+      return getComputedStyle(document.documentElement).getPropertyValue(
+        property
+      );
+    }
+    return "N/A";
+  };
+
+  return (
+    <div className={`p-4 border rounded-lg bg-gray-50 ${className}`}>
+      <h3 className="text-lg font-semibold mb-4">Theme Debugger</h3>
+
+      <div className="space-y-3">
+        <div>
+          <strong>Current Theme:</strong> {theme}
+        </div>
+
+        <div>
+          <strong>Theme Config:</strong>
+          <pre className="text-xs bg-gray-100 p-2 rounded mt-1">
+            {JSON.stringify(themeConfig, null, 2)}
+          </pre>
+        </div>
+
+        <div>
+          <strong>CSS Variables:</strong>
+          <div className="text-xs space-y-1 mt-1">
+            <div>--ews-primary: {getComputedStyleValue("--ews-primary")}</div>
+            <div>
+              --ews-secondary: {getComputedStyleValue("--ews-secondary")}
+            </div>
+            <div>
+              --ews-primary-hover:{" "}
+              {getComputedStyleValue("--ews-primary-hover")}
+            </div>
+            <div>
+              --ews-secondary-hover:{" "}
+              {getComputedStyleValue("--ews-secondary-hover")}
+            </div>
+          </div>
+        </div>
+
+        <div>
+          <strong>Data Theme Attribute:</strong>{" "}
+          {document.documentElement.getAttribute("data-theme")}
+        </div>
+
+        <div className="flex space-x-2">
+          <button
+            onClick={() => setTheme("PROMED")}
+            className={`px-3 py-1 text-xs rounded ${
+              theme === "PROMED"
+                ? "bg-ews-primary text-white"
+                : "bg-gray-200 text-gray-700"
+            }`}
+          >
+            PROMED
+          </button>
+          <button
+            onClick={() => setTheme("MED")}
+            className={`px-3 py-1 text-xs rounded ${
+              theme === "MED"
+                ? "bg-ews-primary text-white"
+                : "bg-gray-200 text-gray-700"
+            }`}
+          >
+            MED
+          </button>
+        </div>
+
+        <div className="grid grid-cols-2 gap-2 mt-4">
+          <div className="bg-ews-primary text-white p-2 rounded text-center">
+            Primary
+          </div>
+          <div className="bg-ews-secondary text-white p-2 rounded text-center">
+            Secondary
+          </div>
+          <div className="bg-ews-success text-white p-2 rounded text-center">
+            Success
+          </div>
+          <div className="bg-ews-warning text-white p-2 rounded text-center">
+            Warning
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/components/ThemeDebugger/index.ts

@@ -0,0 +1,2 @@
+export { ThemeDebugger } from "./ThemeDebugger";
+export type { ThemeDebuggerProps } from "./ThemeDebugger";

package/src/hooks/index.ts

@@ -1 +1,3 @@
 export { useDebounce, useDebouncedCallback } from "./useDebounce";
+export { useSelectField } from "./useSelectField";
+export type { UseSelectFieldProps } from "./useSelectField";

package/src/hooks/useSelectField.ts

@@ -0,0 +1,53 @@
+import {
+  Control,
+  FieldPath,
+  FieldValues,
+  useController,
+} from "react-hook-form";
+import { SelectOption, SelectProps } from "../components/Select";
+
+export interface UseSelectFieldProps<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+> {
+  name: TName;
+  control: Control<TFieldValues>;
+  options: SelectOption[];
+  rules?: any;
+  defaultValue?: any;
+}
+
+export function useSelectField<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+>({
+  name,
+  control,
+  options: _options,
+  rules,
+  defaultValue,
+}: UseSelectFieldProps<TFieldValues, TName>) {
+  const {
+    field,
+    fieldState: { error, invalid },
+  } = useController({
+    name,
+    control,
+    rules,
+    defaultValue,
+  });
+
+  const selectProps: Omit<SelectProps, "options"> = {
+    value: field.value,
+    onChange: (value) => field.onChange(value),
+    isError: invalid,
+    error: error?.message,
+  };
+
+  return {
+    selectProps,
+    field,
+    error,
+    invalid,
+  };
+}

package/src/index.ts

@@ -5,6 +5,9 @@ export type { ButtonProps } from "./components/Button";
 export { Input } from "./components/Input";
 export type { InputProps } from "./components/Input";
 
+export { Select } from "./components/Select";
+export type { SelectOption, SelectProps } from "./components/Select";
+
 export { SearchAutocomplete } from "./components/SearchAutocomplete";
 export type { SearchableEntity } from "./components/SearchAutocomplete";
 
@@ -19,6 +22,9 @@ export type { LogoProps } from "./components/Logo";
 export { ThemeToggle } from "./components/ThemeToggle";
 export type { ThemeToggleProps } from "./components/ThemeToggle";
 
+export { ThemeDebugger } from "./components/ThemeDebugger";
+export type { ThemeDebuggerProps } from "./components/ThemeDebugger";
+
 // Molecules
 export { SpecialtySearchAutocomplete } from "./molecules";
 export type { Specialty, SpecialtySearchAutocompleteProps } from "./molecules";
@@ -39,7 +45,8 @@ export type { IconProps, SimpleIconProps } from "./icons";
 export { cn, debounce, formatCurrency, formatDate, generateId } from "./utils";
 
 // Hooks
-export { useDebounce, useDebouncedCallback } from "./hooks";
+export { useDebounce, useDebouncedCallback, useSelectField } from "./hooks";
+export type { UseSelectFieldProps } from "./hooks";
 
 // Theme
 export { ThemeProvider, useTheme } from "./theme/ThemeProvider";

package/src/styles/index.css

@@ -4,6 +4,55 @@
 @tailwind components;
 @tailwind utilities;
 
+/* Override browser default focus styles */
+*:focus {
+  outline: none !important;
+}
+
+/* Ensure custom focus styles for all interactive elements */
+button:focus,
+input:focus,
+select:focus,
+textarea:focus,
+[tabindex]:focus {
+  outline: none !important;
+}
+
+/* Custom Select component focus override */
+.ews-select-trigger:focus {
+  outline: none !important;
+  box-shadow: 0 0 0 2px var(--ews-primary) !important;
+  border-color: var(--ews-primary) !important;
+}
+
+.ews-select-trigger:focus-visible {
+  outline: none !important;
+  box-shadow: 0 0 0 2px var(--ews-primary) !important;
+  border-color: var(--ews-primary) !important;
+}
+
+/* Force override any blue focus styles */
+.ews-select-trigger:focus,
+.ews-select-trigger:focus-visible,
+.ews-select-trigger:focus-within {
+  outline: none !important;
+  border: 1px solid var(--ews-primary) !important;
+  box-shadow: 0 0 0 2px var(--ews-primary) !important;
+}
+
+/* Override any browser default blue focus */
+*:focus {
+  outline: none !important;
+  box-shadow: none !important;
+}
+
+/* Specific override for div elements with tabindex */
+div[tabindex]:focus {
+  outline: none !important;
+  box-shadow: 0 0 0 2px var(--ews-primary) !important;
+  border-color: var(--ews-primary) !important;
+}
+
 :root {
   /* Colors */
   --ews-primary: #21596c;