@1doc/1ds-react 0.0.1

package/src/utils/theme.ts

@@ -0,0 +1,136 @@
+/**
+ * Tipos de temas disponíveis no Design System
+ */
+export type Theme =
+  | "1doc"
+  | "1ds-red"
+  | "1ds-green"
+  | "1ds-orange"
+  | "1ds-yellow";
+
+/**
+ * Chave do localStorage para armazenar o tema selecionado
+ */
+const THEME_STORAGE_KEY = "umds-theme";
+
+/**
+ * Tema padrão do sistema
+ */
+const DEFAULT_THEME: Theme = "1doc";
+
+/**
+ * Define o tema ativo no documento
+ * @param theme - Nome do tema a ser aplicado
+ */
+export const setTheme = (theme: Theme): void => {
+  if (typeof document !== "undefined") {
+    document.documentElement.setAttribute("data-theme", theme);
+
+    try {
+      localStorage.setItem(THEME_STORAGE_KEY, theme);
+    } catch (e) {
+      // Silenciosamente falha se localStorage não estiver disponível
+      console.warn("Failed to save theme to localStorage:", e);
+    }
+  }
+};
+
+/**
+ * Obtém o tema atual, considerando localStorage e preferências do sistema
+ * @returns O tema atualmente selecionado
+ */
+export const getTheme = (): Theme => {
+  if (typeof window === "undefined") {
+    return DEFAULT_THEME;
+  }
+
+  // 1. Tenta buscar do localStorage
+  try {
+    const stored = localStorage.getItem(THEME_STORAGE_KEY) as Theme | null;
+    if (stored && isValidTheme(stored)) {
+      return stored;
+    }
+  } catch (e) {
+    console.warn("Failed to read theme from localStorage:", e);
+  }
+
+  // 2. Tenta buscar do atributo data-theme do HTML
+  const currentTheme = document.documentElement.getAttribute(
+    "data-theme",
+  ) as Theme | null;
+  if (currentTheme && isValidTheme(currentTheme)) {
+    return currentTheme;
+  }
+
+  // 3. Retorna o tema padrão
+  return DEFAULT_THEME;
+};
+
+/**
+ * Inicializa o tema ao carregar a página
+ * Deve ser chamado o mais cedo possível para evitar flash de conteúdo
+ */
+export const initTheme = (): void => {
+  const theme = getTheme();
+  setTheme(theme);
+};
+
+/**
+ * Valida se uma string é um tema válido
+ * @param theme - String a ser validada
+ * @returns true se o tema é válido
+ */
+function isValidTheme(theme: string): theme is Theme {
+  const validThemes: Theme[] = [
+    "1doc",
+    "1ds-red",
+    "1ds-green",
+    "1ds-orange",
+    "1ds-yellow",
+  ];
+  return validThemes.includes(theme as Theme);
+}
+
+/**
+ * Retorna todos os temas disponíveis
+ * @returns Array com todos os temas disponíveis
+ */
+export const getAvailableThemes = (): Theme[] => {
+  return ["1doc", "1ds-red", "1ds-green", "1ds-orange", "1ds-yellow"];
+};
+
+/**
+ * Hook para detectar mudanças de tema (útil para frameworks reativos)
+ * @param callback - Função a ser executada quando o tema mudar
+ * @returns Função para remover o listener
+ */
+export const onThemeChange = (
+  callback: (theme: Theme) => void,
+): (() => void) => {
+  if (typeof window === "undefined") {
+    return () => {};
+  }
+
+  const observer = new MutationObserver((mutations) => {
+    mutations.forEach((mutation) => {
+      if (
+        mutation.type === "attributes" &&
+        mutation.attributeName === "data-theme"
+      ) {
+        const newTheme = document.documentElement.getAttribute(
+          "data-theme",
+        ) as Theme;
+        if (newTheme && isValidTheme(newTheme)) {
+          callback(newTheme);
+        }
+      }
+    });
+  });
+
+  observer.observe(document.documentElement, {
+    attributes: true,
+    attributeFilter: ["data-theme"],
+  });
+
+  return () => observer.disconnect();
+};

package/tsconfig.json

@@ -0,0 +1,29 @@
+{
+    "compilerOptions": {
+        "target": "ESNext",
+        "useDefineForClassFields": true,
+        "lib": [
+            "DOM",
+            "DOM.Iterable",
+            "ESNext"
+        ],
+        "allowJs": false,
+        "skipLibCheck": true,
+        "esModuleInterop": false,
+        "allowSyntheticDefaultImports": true,
+        "strict": true,
+        "forceConsistentCasingInFileNames": true,
+        "module": "ESNext",
+        "moduleResolution": "Node",
+        "resolveJsonModule": true,
+        "isolatedModules": true,
+        "noEmit": false,
+        "jsx": "react-jsx",
+        "declaration": true,
+        "outDir": "./dist",
+        "rootDir": "./src"
+    },
+    "include": [
+        "src"
+    ]
+}