@wise/components-theming 0.6.2 → 0.7.0

package/dist/cjs/index.js

@@ -40,10 +40,24 @@ var FALLBACK_VALUES = {
   theme: DEFAULT_BASE_THEME,
   screenMode: DEFAULT_SCREEN_MODE
 };
+
+var isNotProduction = function isNotProduction() {
+  try {
+    return ['localhost', 'dev-wi.se'].includes(window.location.hostname);
+  } catch (_unused) {
+    return false;
+  }
+};
+
 var useTheme = function useTheme() {
-  var _useContext;
+  var theming = react.useContext(ThemeContext);
+
+  if (!theming && isNotProduction()) {
+    // eslint-disable-next-line no-console
+    console.warn('Call to useTheme outside a ThemeProvider');
+  }
 
-  var _ref = (_useContext = react.useContext(ThemeContext)) !== null && _useContext !== void 0 ? _useContext : FALLBACK_VALUES,
+  var _ref = theming !== null && theming !== void 0 ? theming : FALLBACK_VALUES,
       theme = _ref.theme,
       contextScreenMode = _ref.screenMode;
 

package/dist/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/const.ts","../../src/helpers.ts","../../src/useTheme.ts","../../src/ThemedChildren.tsx","../../src/ThemeProvider.tsx"],"sourcesContent":["// TODO: Change 'light' with 'legacy' in the future\nexport const baseThemes = ['light', 'personal'] as const;\nexport const extraThemes = ['forest-green', 'bright-green'] as const;\nexport const screenModes = ['light', 'dark'] as const;\nexport const modernThemes = [baseThemes[1], ...extraThemes] as const;\n\n// TODO: componentThemes returned back for backward compatibility, refactor this place in the future\nexport type ComponentTheme = typeof baseThemes[number];\nexport type ModernTheme = typeof modernThemes[number];\nexport type BaseTheme = typeof baseThemes[number];\nexport type ExtraTheme = typeof extraThemes[number];\nexport type ScreenMode = typeof screenModes[number];\nexport type ScreenModeDark = typeof screenModes[1];\n\nexport const DEFAULT_BASE_THEME = 'light' as const;\nexport const DEFAULT_SCREEN_MODE = 'light' as const;\n\nexport type Theming = {\n  theme?: ComponentTheme | BaseTheme | ExtraTheme;\n  screenMode?: ScreenMode;\n};\n","import type {\n  ComponentTheme,\n  ModernTheme,\n  BaseTheme,\n  ExtraTheme,\n  ScreenMode,\n  ScreenModeDark,\n} from './const';\nimport { extraThemes, screenModes, modernThemes } from './const';\n\nexport const isThemeModern = (\n  theme: ComponentTheme | BaseTheme | ExtraTheme,\n): theme is ModernTheme => modernThemes.includes(theme as ModernTheme);\n\nexport const isExtraTheme = (theme: ComponentTheme | BaseTheme | ExtraTheme): theme is ExtraTheme =>\n  extraThemes.includes(theme as ExtraTheme);\n\nexport const isScreenModeDark = (\n  theme: ComponentTheme | BaseTheme | ExtraTheme,\n  screenMode: ScreenMode,\n): screenMode is ScreenModeDark =>\n  isThemeModern(theme as ModernTheme) && screenModes[1] === screenMode;\n\nexport const getThemeClassName = (\n  theme: ComponentTheme | BaseTheme | ExtraTheme,\n  screenMode: ScreenMode,\n) => {\n  if (!isThemeModern(theme)) {\n    return `np-theme-${theme}`;\n  }\n\n  let classes = `np-theme-personal`;\n\n  if (isExtraTheme(theme)) {\n    classes += ` ${classes}--${theme}`;\n  } else if (screenModes[1] === screenMode) {\n    classes += ` ${classes}--${screenMode}`;\n  }\n\n  return classes;\n};\n","import { useContext, useMemo } from 'react';\n\nimport { ThemeContext } from './ThemeProvider';\nimport type { ComponentTheme, BaseTheme, ScreenMode, ExtraTheme } from './const';\nimport { DEFAULT_BASE_THEME, DEFAULT_SCREEN_MODE } from './const';\nimport { isThemeModern, isScreenModeDark, getThemeClassName } from './helpers';\n\ninterface ThemeHookValue {\n  theme: ComponentTheme | BaseTheme | ExtraTheme;\n  screenMode: ScreenMode;\n  isModern: boolean;\n  isScreenModeDark: boolean;\n  className: string;\n}\n\nconst FALLBACK_VALUES = {\n  theme: DEFAULT_BASE_THEME,\n  screenMode: DEFAULT_SCREEN_MODE,\n};\n\nexport const useTheme = (): ThemeHookValue => {\n  const { theme, screenMode: contextScreenMode } = useContext(ThemeContext) ?? FALLBACK_VALUES;\n\n  const screenMode = theme === DEFAULT_BASE_THEME ? DEFAULT_SCREEN_MODE : contextScreenMode;\n\n  return useMemo(\n    () => ({\n      theme,\n      screenMode,\n      isModern: isThemeModern(theme),\n      isScreenModeDark: isScreenModeDark(theme, screenMode),\n      className: getThemeClassName(theme, screenMode),\n    }),\n    [theme, screenMode],\n  );\n};\n","import { ReactNode } from 'react';\n\nimport { useTheme } from './useTheme';\n\ntype ThemedChildrenProps = { children: ReactNode };\n\nexport const ThemedChildren = ({ children }: ThemedChildrenProps) => {\n  const { className } = useTheme();\n\n  return <div className={className}>{children}</div>;\n};\n","import { createContext, PropsWithChildren, useContext, useEffect, useMemo } from 'react';\n\nimport { ThemedChildren } from './ThemedChildren';\nimport type { ComponentTheme, BaseTheme, ExtraTheme, ScreenMode, Theming } from './const';\nimport { DEFAULT_BASE_THEME, DEFAULT_SCREEN_MODE } from './const';\nimport { getThemeClassName } from './helpers';\n\nexport const ThemeContext = createContext<\n  | {\n      theme: ComponentTheme | BaseTheme | ExtraTheme;\n      screenMode: ScreenMode;\n    }\n  | undefined\n>(undefined);\n\ntype ThemeProviderProps = PropsWithChildren<Theming>;\n\nexport const ThemeProvider = ({\n  theme = DEFAULT_BASE_THEME,\n  screenMode = DEFAULT_SCREEN_MODE,\n  children,\n}: ThemeProviderProps) => {\n  const isRootProvider = useContext(ThemeContext) === undefined;\n\n  // RegEx to check for `np-theme-` class name\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  const themeClass = new RegExp(/\\bnp-theme-[a-z-]+\\b/, 'g');\n\n  // useEffect hook used to apply the theme class to the HTML element\n  useEffect(() => {\n    if (isRootProvider) {\n      // Remove all the theme classes from the documentElement\n      document.documentElement.className.match(themeClass)?.forEach((item) => {\n        document.documentElement.classList.remove(item);\n      });\n      getThemeClassName(theme, screenMode)\n        .split(' ')\n        .forEach((item) => {\n          document.documentElement.classList.add(item);\n        });\n    }\n  }, [isRootProvider, theme, screenMode, themeClass]);\n\n  const contextValue = useMemo(() => ({ theme, screenMode }), [screenMode, theme]);\n\n  return (\n    <ThemeContext.Provider value={contextValue}>\n      <ThemedChildren>{children}</ThemedChildren>\n    </ThemeContext.Provider>\n  );\n};\n"],"names":["baseThemes","extraThemes","screenModes","modernThemes","DEFAULT_BASE_THEME","DEFAULT_SCREEN_MODE","isThemeModern","theme","includes","isExtraTheme","isScreenModeDark","screenMode","getThemeClassName","classes","FALLBACK_VALUES","useTheme","useContext","ThemeContext","contextScreenMode","useMemo","isModern","className","ThemedChildren","children","_jsx","createContext","undefined","ThemeProvider","isRootProvider","themeClass","RegExp","useEffect","documentElement","match","forEach","item","document","classList","remove","split","add","contextValue","Provider","value"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../src/const.ts","../../src/helpers.ts","../../src/useTheme.ts","../../src/ThemedChildren.tsx","../../src/ThemeProvider.tsx"],"sourcesContent":["// TODO: Change 'light' with 'legacy' in the future\nexport const baseThemes = ['light', 'personal'] as const;\nexport const extraThemes = ['forest-green', 'bright-green'] as const;\nexport const screenModes = ['light', 'dark'] as const;\nexport const modernThemes = [baseThemes[1], ...extraThemes] as const;\n\n// TODO: componentThemes returned back for backward compatibility, refactor this place in the future\nexport type ComponentTheme = typeof baseThemes[number];\nexport type ModernTheme = typeof modernThemes[number];\nexport type BaseTheme = typeof baseThemes[number];\nexport type ExtraTheme = typeof extraThemes[number];\nexport type ScreenMode = typeof screenModes[number];\nexport type ScreenModeDark = typeof screenModes[1];\n\nexport const DEFAULT_BASE_THEME = 'light' as const;\nexport const DEFAULT_SCREEN_MODE = 'light' as const;\n\nexport type Theming = {\n  theme?: ComponentTheme | BaseTheme | ExtraTheme;\n  screenMode?: ScreenMode;\n};\n","import type {\n  ComponentTheme,\n  ModernTheme,\n  BaseTheme,\n  ExtraTheme,\n  ScreenMode,\n  ScreenModeDark,\n} from './const';\nimport { extraThemes, screenModes, modernThemes } from './const';\n\nexport const isThemeModern = (\n  theme: ComponentTheme | BaseTheme | ExtraTheme,\n): theme is ModernTheme => modernThemes.includes(theme as ModernTheme);\n\nexport const isExtraTheme = (theme: ComponentTheme | BaseTheme | ExtraTheme): theme is ExtraTheme =>\n  extraThemes.includes(theme as ExtraTheme);\n\nexport const isScreenModeDark = (\n  theme: ComponentTheme | BaseTheme | ExtraTheme,\n  screenMode: ScreenMode,\n): screenMode is ScreenModeDark =>\n  isThemeModern(theme as ModernTheme) && screenModes[1] === screenMode;\n\nexport const getThemeClassName = (\n  theme: ComponentTheme | BaseTheme | ExtraTheme,\n  screenMode: ScreenMode,\n) => {\n  if (!isThemeModern(theme)) {\n    return `np-theme-${theme}`;\n  }\n\n  let classes = `np-theme-personal`;\n\n  if (isExtraTheme(theme)) {\n    classes += ` ${classes}--${theme}`;\n  } else if (screenModes[1] === screenMode) {\n    classes += ` ${classes}--${screenMode}`;\n  }\n\n  return classes;\n};\n","import { useContext, useMemo } from 'react';\n\nimport { ThemeContext } from './ThemeProvider';\nimport type { ComponentTheme, BaseTheme, ScreenMode, ExtraTheme } from './const';\nimport { DEFAULT_BASE_THEME, DEFAULT_SCREEN_MODE } from './const';\nimport { isThemeModern, isScreenModeDark, getThemeClassName } from './helpers';\n\ninterface ThemeHookValue {\n  theme: ComponentTheme | BaseTheme | ExtraTheme;\n  screenMode: ScreenMode;\n  isModern: boolean;\n  isScreenModeDark: boolean;\n  className: string;\n}\n\nconst FALLBACK_VALUES = {\n  theme: DEFAULT_BASE_THEME,\n  screenMode: DEFAULT_SCREEN_MODE,\n};\n\nconst isNotProduction = () => {\n  try {\n    return ['localhost', 'dev-wi.se'].includes(window.location.hostname);\n  } catch {\n    return false;\n  }\n};\n\nexport const useTheme = (): ThemeHookValue => {\n  const theming = useContext(ThemeContext);\n\n  if (!theming && isNotProduction()) {\n    // eslint-disable-next-line no-console\n    console.warn('Call to useTheme outside a ThemeProvider');\n  }\n\n  const { theme, screenMode: contextScreenMode } = theming ?? FALLBACK_VALUES;\n\n  const screenMode = theme === DEFAULT_BASE_THEME ? DEFAULT_SCREEN_MODE : contextScreenMode;\n\n  return useMemo(\n    () => ({\n      theme,\n      screenMode,\n      isModern: isThemeModern(theme),\n      isScreenModeDark: isScreenModeDark(theme, screenMode),\n      className: getThemeClassName(theme, screenMode),\n    }),\n    [theme, screenMode],\n  );\n};\n","import { ReactNode } from 'react';\n\nimport { useTheme } from './useTheme';\n\ntype ThemedChildrenProps = { children: ReactNode };\n\nexport const ThemedChildren = ({ children }: ThemedChildrenProps) => {\n  const { className } = useTheme();\n\n  return <div className={className}>{children}</div>;\n};\n","import { createContext, PropsWithChildren, useContext, useEffect, useMemo } from 'react';\n\nimport { ThemedChildren } from './ThemedChildren';\nimport type { ComponentTheme, BaseTheme, ExtraTheme, ScreenMode, Theming } from './const';\nimport { DEFAULT_BASE_THEME, DEFAULT_SCREEN_MODE } from './const';\nimport { getThemeClassName } from './helpers';\n\nexport const ThemeContext = createContext<\n  | {\n      theme: ComponentTheme | BaseTheme | ExtraTheme;\n      screenMode: ScreenMode;\n    }\n  | undefined\n>(undefined);\n\ntype ThemeProviderProps = PropsWithChildren<Theming>;\n\nexport const ThemeProvider = ({\n  theme = DEFAULT_BASE_THEME,\n  screenMode = DEFAULT_SCREEN_MODE,\n  children,\n}: ThemeProviderProps) => {\n  const isRootProvider = useContext(ThemeContext) === undefined;\n\n  // RegEx to check for `np-theme-` class name\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  const themeClass = new RegExp(/\\bnp-theme-[a-z-]+\\b/, 'g');\n\n  // useEffect hook used to apply the theme class to the HTML element\n  useEffect(() => {\n    if (isRootProvider) {\n      // Remove all the theme classes from the documentElement\n      document.documentElement.className.match(themeClass)?.forEach((item) => {\n        document.documentElement.classList.remove(item);\n      });\n      getThemeClassName(theme, screenMode)\n        .split(' ')\n        .forEach((item) => {\n          document.documentElement.classList.add(item);\n        });\n    }\n  }, [isRootProvider, theme, screenMode, themeClass]);\n\n  const contextValue = useMemo(() => ({ theme, screenMode }), [screenMode, theme]);\n\n  return (\n    <ThemeContext.Provider value={contextValue}>\n      <ThemedChildren>{children}</ThemedChildren>\n    </ThemeContext.Provider>\n  );\n};\n"],"names":["baseThemes","extraThemes","screenModes","modernThemes","DEFAULT_BASE_THEME","DEFAULT_SCREEN_MODE","isThemeModern","theme","includes","isExtraTheme","isScreenModeDark","screenMode","getThemeClassName","classes","FALLBACK_VALUES","isNotProduction","window","location","hostname","useTheme","theming","useContext","ThemeContext","console","warn","contextScreenMode","useMemo","isModern","className","ThemedChildren","children","_jsx","createContext","undefined","ThemeProvider","isRootProvider","themeClass","RegExp","useEffect","documentElement","match","forEach","item","document","classList","remove","split","add","contextValue","Provider","value"],"mappings":";;;;;AAAA;AACO,IAAMA,UAAU,GAAG,CAAC,OAAD,EAAU,UAAV,CAAnB,CAAA;AACA,IAAMC,WAAW,GAAG,CAAC,cAAD,EAAiB,cAAjB,CAApB,CAAA;AACA,IAAMC,WAAW,GAAG,CAAC,OAAD,EAAU,MAAV,CAApB,CAAA;AACA,IAAMC,YAAY,GAAIH,CAAAA,UAAU,CAAC,CAAD,CAAd,CAAsBC,CAAAA,MAAAA,CAAAA,WAAtB,CAAlB,CAAA;AAUA,IAAMG,kBAAkB,GAAG,OAA3B,CAAA;AACA,IAAMC,mBAAmB,GAAG,OAA5B;;ICLMC,aAAa,GAAG,SAAhBA,aAAgB,CAC3BC,KAD2B,EAAA;AAAA,EAAA,OAEFJ,YAAY,CAACK,QAAb,CAAsBD,KAAtB,CAFE,CAAA;AAAA,EAAtB;IAIME,YAAY,GAAG,SAAfA,YAAe,CAACF,KAAD,EAAA;AAAA,EAAA,OAC1BN,WAAW,CAACO,QAAZ,CAAqBD,KAArB,CAD0B,CAAA;AAAA,EAArB;AAGA,IAAMG,gBAAgB,GAAG,SAAnBA,gBAAmB,CAC9BH,KAD8B,EAE9BI,UAF8B,EAAA;EAAA,OAI9BL,aAAa,CAACC,KAAD,CAAb,IAAuCL,WAAW,CAAC,CAAD,CAAX,KAAmBS,UAJ5B,CAAA;AAAA,EAAzB;AAMA,IAAMC,iBAAiB,GAAG,SAApBA,iBAAoB,CAC/BL,KAD+B,EAE/BI,UAF+B,EAG7B;AACF,EAAA,IAAI,CAACL,aAAa,CAACC,KAAD,CAAlB,EAA2B;AACzB,IAAA,OAAA,WAAA,CAAA,MAAA,CAAmBA,KAAnB,CAAA,CAAA;AACD,GAAA;;AAED,EAAA,IAAIM,OAAO,GAAX,mBAAA,CAAA;;AAEA,EAAA,IAAIJ,YAAY,CAACF,KAAD,CAAhB,EAAyB;AACvBM,IAAAA,OAAO,IAAQA,GAAAA,CAAAA,MAAAA,CAAAA,OAAR,EAAoBN,IAAAA,CAAAA,CAAAA,MAAAA,CAAAA,KAApB,CAAP,CAAA;GADF,MAEO,IAAIL,WAAW,CAAC,CAAD,CAAX,KAAmBS,UAAvB,EAAmC;AACxCE,IAAAA,OAAO,IAAQA,GAAAA,CAAAA,MAAAA,CAAAA,OAAR,EAAoBF,IAAAA,CAAAA,CAAAA,MAAAA,CAAAA,UAApB,CAAP,CAAA;AACD,GAAA;;AAED,EAAA,OAAOE,OAAP,CAAA;AACD;;ACzBD,IAAMC,eAAe,GAAG;AACtBP,EAAAA,KAAK,EAAEH,kBADe;AAEtBO,EAAAA,UAAU,EAAEN,mBAAAA;AAFU,CAAxB,CAAA;;AAKA,IAAMU,eAAe,GAAG,SAAlBA,eAAkB,GAAK;EAC3B,IAAI;AACF,IAAA,OAAO,CAAC,WAAD,EAAc,WAAd,CAA2BP,CAAAA,QAA3B,CAAoCQ,MAAM,CAACC,QAAP,CAAgBC,QAApD,CAAP,CAAA;AACD,GAFD,CAEE,OAAM,OAAA,EAAA;AACN,IAAA,OAAO,KAAP,CAAA;AACD,GAAA;AACF,CAND,CAAA;;AAQaC,IAAAA,QAAQ,GAAG,SAAXA,QAAW,GAAqB;AAC3C,EAAA,IAAMC,OAAO,GAAGC,gBAAU,CAACC,YAAD,CAA1B,CAAA;;AAEA,EAAA,IAAI,CAACF,OAAD,IAAYL,eAAe,EAA/B,EAAmC;AACjC;IACAQ,OAAO,CAACC,IAAR,CAAa,0CAAb,CAAA,CAAA;AACD,GAAA;;AAED,EAAA,IAAA,IAAA,GAAiDJ,OAAjD,KAAiDA,IAAAA,IAAAA,OAAjD,KAAiDA,KAAAA,CAAAA,GAAAA,OAAjD,GAA4DN,eAA5D;MAAQP,KAAR,QAAQA,KAAR;MAA2BkB,iBAA3B,QAAed,UAAf,CAAA;;EAEA,IAAMA,UAAU,GAAGJ,KAAK,KAAKH,kBAAV,GAA+BC,mBAA/B,GAAqDoB,iBAAxE,CAAA;AAEA,EAAA,OAAOC,aAAO,CACZ,YAAA;IAAA,OAAO;AACLnB,MAAAA,KAAK,EAALA,KADK;AAELI,MAAAA,UAAU,EAAVA,UAFK;AAGLgB,MAAAA,QAAQ,EAAErB,aAAa,CAACC,KAAD,CAHlB;AAILG,MAAAA,gBAAgB,EAAEA,gBAAgB,CAACH,KAAD,EAAQI,UAAR,CAJ7B;AAKLiB,MAAAA,SAAS,EAAEhB,iBAAiB,CAACL,KAAD,EAAQI,UAAR,CAAA;KAL9B,CAAA;AAAA,GADY,EAQZ,CAACJ,KAAD,EAAQI,UAAR,CARY,CAAd,CAAA;AAUD;;AC5CM,IAAMkB,cAAc,GAAG,SAAjBA,cAAiB,CAAsC,IAAA,EAAA;EAAA,IAAnCC,QAAmC,QAAnCA,QAAmC,CAAA;;AAClE,EAAA,IAAA,SAAA,GAAsBX,QAAQ,EAA9B;MAAQS,SAAR,aAAQA,SAAR,CAAA;;EAEA,OAAOG,cAAAA,CAAAA,KAAAA,EAAAA;AAAKH,IAAAA,SAAS,EAAEA,SAAhB;IAAyBE,QAAGA,EAAAA,QAAAA;GAAnC,CAAA,CAAA;AACD,CAJM;;ACCA,IAAMR,YAAY,gBAAGU,mBAAa,CAMvCC,SANuC,CAAlC,CAAA;AAUMC,IAAAA,aAAa,GAAG,SAAhBA,aAAgB,CAIJ,IAAA,EAAA;AAAA,EAAA,IAAA,UAAA,GAAA,IAAA,CAHvB3B,KAGuB;MAHvBA,KAGuB,2BAHfH,kBAGe,GAAA,UAAA;AAAA,MAAA,eAAA,GAAA,IAAA,CAFvBO,UAEuB;MAFvBA,UAEuB,gCAFVN,mBAEU,GAAA,eAAA;MADvByB,QACuB,QADvBA,QACuB,CAAA;EACvB,IAAMK,cAAc,GAAGd,gBAAU,CAACC,YAAD,CAAV,KAA6BW,SAApD,CADuB;AAIvB;;EACA,IAAMG,UAAU,GAAG,IAAIC,MAAJ,CAAW,sBAAX,EAAmC,GAAnC,CAAnB,CALuB;;AAQvBC,EAAAA,eAAS,CAAC,YAAK;AACb,IAAA,IAAIH,cAAJ,EAAoB;AAAA,MAAA,IAAA,qBAAA,CAAA;;AAClB;AACA,MAAA,CAAA,qBAAA,GAAA,QAAQ,CAACI,eAAT,CAAyBX,SAAzB,CAAmCY,KAAnC,CAAyCJ,UAAzC,CAAsDK,MAAAA,IAAAA,IAAAA,qBAAAA,KAAAA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,qBAAAA,CAAAA,OAAtD,CAA8D,UAACC,IAAD,EAAS;AACrEC,QAAAA,QAAQ,CAACJ,eAAT,CAAyBK,SAAzB,CAAmCC,MAAnC,CAA0CH,IAA1C,CAAA,CAAA;OADF,CAAA,CAAA;AAGA9B,MAAAA,iBAAiB,CAACL,KAAD,EAAQI,UAAR,CAAjB,CACGmC,KADH,CACS,GADT,CAEGL,CAAAA,OAFH,CAEW,UAACC,IAAD,EAAS;AAChBC,QAAAA,QAAQ,CAACJ,eAAT,CAAyBK,SAAzB,CAAmCG,GAAnC,CAAuCL,IAAvC,CAAA,CAAA;OAHJ,CAAA,CAAA;AAKD,KAAA;GAXM,EAYN,CAACP,cAAD,EAAiB5B,KAAjB,EAAwBI,UAAxB,EAAoCyB,UAApC,CAZM,CAAT,CAAA;EAcA,IAAMY,YAAY,GAAGtB,aAAO,CAAC,YAAA;IAAA,OAAO;AAAEnB,MAAAA,KAAK,EAALA,KAAF;AAASI,MAAAA,UAAU,EAAVA,UAAAA;KAAhB,CAAA;AAAA,GAAD,EAAgC,CAACA,UAAD,EAAaJ,KAAb,CAAhC,CAA5B,CAAA;AAEA,EAAA,OACEwB,cAACT,CAAAA,YAAY,CAAC2B,QAAd,EAAsB;AAACC,IAAAA,KAAK,EAAEF,YAAR;IAAoBlB,QACxCC,EAAAA,cAAAA,CAACF,cAAD,EAAe;MAAAC,QAAEA,EAAAA,QAAAA;KAAjB,CAAA;AADoB,GAAtB,CADF,CAAA;AAKD;;;;;;;;;"}

package/dist/es/index.js

@@ -38,10 +38,24 @@ var FALLBACK_VALUES = {
   theme: DEFAULT_BASE_THEME,
   screenMode: DEFAULT_SCREEN_MODE
 };
+
+var isNotProduction = function isNotProduction() {
+  try {
+    return ['localhost', 'dev-wi.se'].includes(window.location.hostname);
+  } catch (_unused) {
+    return false;
+  }
+};
+
 var useTheme = function useTheme() {
-  var _useContext;
+  var theming = useContext(ThemeContext);
+
+  if (!theming && isNotProduction()) {
+    // eslint-disable-next-line no-console
+    console.warn('Call to useTheme outside a ThemeProvider');
+  }
 
-  var _ref = (_useContext = useContext(ThemeContext)) !== null && _useContext !== void 0 ? _useContext : FALLBACK_VALUES,
+  var _ref = theming !== null && theming !== void 0 ? theming : FALLBACK_VALUES,
       theme = _ref.theme,
       contextScreenMode = _ref.screenMode;
 

package/dist/es/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/const.ts","../../src/helpers.ts","../../src/useTheme.ts","../../src/ThemedChildren.tsx","../../src/ThemeProvider.tsx"],"sourcesContent":["// TODO: Change 'light' with 'legacy' in the future\nexport const baseThemes = ['light', 'personal'] as const;\nexport const extraThemes = ['forest-green', 'bright-green'] as const;\nexport const screenModes = ['light', 'dark'] as const;\nexport const modernThemes = [baseThemes[1], ...extraThemes] as const;\n\n// TODO: componentThemes returned back for backward compatibility, refactor this place in the future\nexport type ComponentTheme = typeof baseThemes[number];\nexport type ModernTheme = typeof modernThemes[number];\nexport type BaseTheme = typeof baseThemes[number];\nexport type ExtraTheme = typeof extraThemes[number];\nexport type ScreenMode = typeof screenModes[number];\nexport type ScreenModeDark = typeof screenModes[1];\n\nexport const DEFAULT_BASE_THEME = 'light' as const;\nexport const DEFAULT_SCREEN_MODE = 'light' as const;\n\nexport type Theming = {\n  theme?: ComponentTheme | BaseTheme | ExtraTheme;\n  screenMode?: ScreenMode;\n};\n","import type {\n  ComponentTheme,\n  ModernTheme,\n  BaseTheme,\n  ExtraTheme,\n  ScreenMode,\n  ScreenModeDark,\n} from './const';\nimport { extraThemes, screenModes, modernThemes } from './const';\n\nexport const isThemeModern = (\n  theme: ComponentTheme | BaseTheme | ExtraTheme,\n): theme is ModernTheme => modernThemes.includes(theme as ModernTheme);\n\nexport const isExtraTheme = (theme: ComponentTheme | BaseTheme | ExtraTheme): theme is ExtraTheme =>\n  extraThemes.includes(theme as ExtraTheme);\n\nexport const isScreenModeDark = (\n  theme: ComponentTheme | BaseTheme | ExtraTheme,\n  screenMode: ScreenMode,\n): screenMode is ScreenModeDark =>\n  isThemeModern(theme as ModernTheme) && screenModes[1] === screenMode;\n\nexport const getThemeClassName = (\n  theme: ComponentTheme | BaseTheme | ExtraTheme,\n  screenMode: ScreenMode,\n) => {\n  if (!isThemeModern(theme)) {\n    return `np-theme-${theme}`;\n  }\n\n  let classes = `np-theme-personal`;\n\n  if (isExtraTheme(theme)) {\n    classes += ` ${classes}--${theme}`;\n  } else if (screenModes[1] === screenMode) {\n    classes += ` ${classes}--${screenMode}`;\n  }\n\n  return classes;\n};\n","import { useContext, useMemo } from 'react';\n\nimport { ThemeContext } from './ThemeProvider';\nimport type { ComponentTheme, BaseTheme, ScreenMode, ExtraTheme } from './const';\nimport { DEFAULT_BASE_THEME, DEFAULT_SCREEN_MODE } from './const';\nimport { isThemeModern, isScreenModeDark, getThemeClassName } from './helpers';\n\ninterface ThemeHookValue {\n  theme: ComponentTheme | BaseTheme | ExtraTheme;\n  screenMode: ScreenMode;\n  isModern: boolean;\n  isScreenModeDark: boolean;\n  className: string;\n}\n\nconst FALLBACK_VALUES = {\n  theme: DEFAULT_BASE_THEME,\n  screenMode: DEFAULT_SCREEN_MODE,\n};\n\nexport const useTheme = (): ThemeHookValue => {\n  const { theme, screenMode: contextScreenMode } = useContext(ThemeContext) ?? FALLBACK_VALUES;\n\n  const screenMode = theme === DEFAULT_BASE_THEME ? DEFAULT_SCREEN_MODE : contextScreenMode;\n\n  return useMemo(\n    () => ({\n      theme,\n      screenMode,\n      isModern: isThemeModern(theme),\n      isScreenModeDark: isScreenModeDark(theme, screenMode),\n      className: getThemeClassName(theme, screenMode),\n    }),\n    [theme, screenMode],\n  );\n};\n","import { ReactNode } from 'react';\n\nimport { useTheme } from './useTheme';\n\ntype ThemedChildrenProps = { children: ReactNode };\n\nexport const ThemedChildren = ({ children }: ThemedChildrenProps) => {\n  const { className } = useTheme();\n\n  return <div className={className}>{children}</div>;\n};\n","import { createContext, PropsWithChildren, useContext, useEffect, useMemo } from 'react';\n\nimport { ThemedChildren } from './ThemedChildren';\nimport type { ComponentTheme, BaseTheme, ExtraTheme, ScreenMode, Theming } from './const';\nimport { DEFAULT_BASE_THEME, DEFAULT_SCREEN_MODE } from './const';\nimport { getThemeClassName } from './helpers';\n\nexport const ThemeContext = createContext<\n  | {\n      theme: ComponentTheme | BaseTheme | ExtraTheme;\n      screenMode: ScreenMode;\n    }\n  | undefined\n>(undefined);\n\ntype ThemeProviderProps = PropsWithChildren<Theming>;\n\nexport const ThemeProvider = ({\n  theme = DEFAULT_BASE_THEME,\n  screenMode = DEFAULT_SCREEN_MODE,\n  children,\n}: ThemeProviderProps) => {\n  const isRootProvider = useContext(ThemeContext) === undefined;\n\n  // RegEx to check for `np-theme-` class name\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  const themeClass = new RegExp(/\\bnp-theme-[a-z-]+\\b/, 'g');\n\n  // useEffect hook used to apply the theme class to the HTML element\n  useEffect(() => {\n    if (isRootProvider) {\n      // Remove all the theme classes from the documentElement\n      document.documentElement.className.match(themeClass)?.forEach((item) => {\n        document.documentElement.classList.remove(item);\n      });\n      getThemeClassName(theme, screenMode)\n        .split(' ')\n        .forEach((item) => {\n          document.documentElement.classList.add(item);\n        });\n    }\n  }, [isRootProvider, theme, screenMode, themeClass]);\n\n  const contextValue = useMemo(() => ({ theme, screenMode }), [screenMode, theme]);\n\n  return (\n    <ThemeContext.Provider value={contextValue}>\n      <ThemedChildren>{children}</ThemedChildren>\n    </ThemeContext.Provider>\n  );\n};\n"],"names":["baseThemes","extraThemes","screenModes","modernThemes","DEFAULT_BASE_THEME","DEFAULT_SCREEN_MODE","isThemeModern","theme","includes","isExtraTheme","isScreenModeDark","screenMode","getThemeClassName","classes","FALLBACK_VALUES","useTheme","useContext","ThemeContext","contextScreenMode","useMemo","isModern","className","ThemedChildren","children","_jsx","createContext","undefined","ThemeProvider","isRootProvider","themeClass","RegExp","useEffect","documentElement","match","forEach","item","document","classList","remove","split","add","contextValue","Provider","value"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../src/const.ts","../../src/helpers.ts","../../src/useTheme.ts","../../src/ThemedChildren.tsx","../../src/ThemeProvider.tsx"],"sourcesContent":["// TODO: Change 'light' with 'legacy' in the future\nexport const baseThemes = ['light', 'personal'] as const;\nexport const extraThemes = ['forest-green', 'bright-green'] as const;\nexport const screenModes = ['light', 'dark'] as const;\nexport const modernThemes = [baseThemes[1], ...extraThemes] as const;\n\n// TODO: componentThemes returned back for backward compatibility, refactor this place in the future\nexport type ComponentTheme = typeof baseThemes[number];\nexport type ModernTheme = typeof modernThemes[number];\nexport type BaseTheme = typeof baseThemes[number];\nexport type ExtraTheme = typeof extraThemes[number];\nexport type ScreenMode = typeof screenModes[number];\nexport type ScreenModeDark = typeof screenModes[1];\n\nexport const DEFAULT_BASE_THEME = 'light' as const;\nexport const DEFAULT_SCREEN_MODE = 'light' as const;\n\nexport type Theming = {\n  theme?: ComponentTheme | BaseTheme | ExtraTheme;\n  screenMode?: ScreenMode;\n};\n","import type {\n  ComponentTheme,\n  ModernTheme,\n  BaseTheme,\n  ExtraTheme,\n  ScreenMode,\n  ScreenModeDark,\n} from './const';\nimport { extraThemes, screenModes, modernThemes } from './const';\n\nexport const isThemeModern = (\n  theme: ComponentTheme | BaseTheme | ExtraTheme,\n): theme is ModernTheme => modernThemes.includes(theme as ModernTheme);\n\nexport const isExtraTheme = (theme: ComponentTheme | BaseTheme | ExtraTheme): theme is ExtraTheme =>\n  extraThemes.includes(theme as ExtraTheme);\n\nexport const isScreenModeDark = (\n  theme: ComponentTheme | BaseTheme | ExtraTheme,\n  screenMode: ScreenMode,\n): screenMode is ScreenModeDark =>\n  isThemeModern(theme as ModernTheme) && screenModes[1] === screenMode;\n\nexport const getThemeClassName = (\n  theme: ComponentTheme | BaseTheme | ExtraTheme,\n  screenMode: ScreenMode,\n) => {\n  if (!isThemeModern(theme)) {\n    return `np-theme-${theme}`;\n  }\n\n  let classes = `np-theme-personal`;\n\n  if (isExtraTheme(theme)) {\n    classes += ` ${classes}--${theme}`;\n  } else if (screenModes[1] === screenMode) {\n    classes += ` ${classes}--${screenMode}`;\n  }\n\n  return classes;\n};\n","import { useContext, useMemo } from 'react';\n\nimport { ThemeContext } from './ThemeProvider';\nimport type { ComponentTheme, BaseTheme, ScreenMode, ExtraTheme } from './const';\nimport { DEFAULT_BASE_THEME, DEFAULT_SCREEN_MODE } from './const';\nimport { isThemeModern, isScreenModeDark, getThemeClassName } from './helpers';\n\ninterface ThemeHookValue {\n  theme: ComponentTheme | BaseTheme | ExtraTheme;\n  screenMode: ScreenMode;\n  isModern: boolean;\n  isScreenModeDark: boolean;\n  className: string;\n}\n\nconst FALLBACK_VALUES = {\n  theme: DEFAULT_BASE_THEME,\n  screenMode: DEFAULT_SCREEN_MODE,\n};\n\nconst isNotProduction = () => {\n  try {\n    return ['localhost', 'dev-wi.se'].includes(window.location.hostname);\n  } catch {\n    return false;\n  }\n};\n\nexport const useTheme = (): ThemeHookValue => {\n  const theming = useContext(ThemeContext);\n\n  if (!theming && isNotProduction()) {\n    // eslint-disable-next-line no-console\n    console.warn('Call to useTheme outside a ThemeProvider');\n  }\n\n  const { theme, screenMode: contextScreenMode } = theming ?? FALLBACK_VALUES;\n\n  const screenMode = theme === DEFAULT_BASE_THEME ? DEFAULT_SCREEN_MODE : contextScreenMode;\n\n  return useMemo(\n    () => ({\n      theme,\n      screenMode,\n      isModern: isThemeModern(theme),\n      isScreenModeDark: isScreenModeDark(theme, screenMode),\n      className: getThemeClassName(theme, screenMode),\n    }),\n    [theme, screenMode],\n  );\n};\n","import { ReactNode } from 'react';\n\nimport { useTheme } from './useTheme';\n\ntype ThemedChildrenProps = { children: ReactNode };\n\nexport const ThemedChildren = ({ children }: ThemedChildrenProps) => {\n  const { className } = useTheme();\n\n  return <div className={className}>{children}</div>;\n};\n","import { createContext, PropsWithChildren, useContext, useEffect, useMemo } from 'react';\n\nimport { ThemedChildren } from './ThemedChildren';\nimport type { ComponentTheme, BaseTheme, ExtraTheme, ScreenMode, Theming } from './const';\nimport { DEFAULT_BASE_THEME, DEFAULT_SCREEN_MODE } from './const';\nimport { getThemeClassName } from './helpers';\n\nexport const ThemeContext = createContext<\n  | {\n      theme: ComponentTheme | BaseTheme | ExtraTheme;\n      screenMode: ScreenMode;\n    }\n  | undefined\n>(undefined);\n\ntype ThemeProviderProps = PropsWithChildren<Theming>;\n\nexport const ThemeProvider = ({\n  theme = DEFAULT_BASE_THEME,\n  screenMode = DEFAULT_SCREEN_MODE,\n  children,\n}: ThemeProviderProps) => {\n  const isRootProvider = useContext(ThemeContext) === undefined;\n\n  // RegEx to check for `np-theme-` class name\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  const themeClass = new RegExp(/\\bnp-theme-[a-z-]+\\b/, 'g');\n\n  // useEffect hook used to apply the theme class to the HTML element\n  useEffect(() => {\n    if (isRootProvider) {\n      // Remove all the theme classes from the documentElement\n      document.documentElement.className.match(themeClass)?.forEach((item) => {\n        document.documentElement.classList.remove(item);\n      });\n      getThemeClassName(theme, screenMode)\n        .split(' ')\n        .forEach((item) => {\n          document.documentElement.classList.add(item);\n        });\n    }\n  }, [isRootProvider, theme, screenMode, themeClass]);\n\n  const contextValue = useMemo(() => ({ theme, screenMode }), [screenMode, theme]);\n\n  return (\n    <ThemeContext.Provider value={contextValue}>\n      <ThemedChildren>{children}</ThemedChildren>\n    </ThemeContext.Provider>\n  );\n};\n"],"names":["baseThemes","extraThemes","screenModes","modernThemes","DEFAULT_BASE_THEME","DEFAULT_SCREEN_MODE","isThemeModern","theme","includes","isExtraTheme","isScreenModeDark","screenMode","getThemeClassName","classes","FALLBACK_VALUES","isNotProduction","window","location","hostname","useTheme","theming","useContext","ThemeContext","console","warn","contextScreenMode","useMemo","isModern","className","ThemedChildren","children","_jsx","createContext","undefined","ThemeProvider","isRootProvider","themeClass","RegExp","useEffect","documentElement","match","forEach","item","document","classList","remove","split","add","contextValue","Provider","value"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wise/components-theming",
-  "version": "0.6.2",
+  "version": "0.7.0",
   "description": "Provides theming support for the Wise Design system components",
   "license": "Apache-2.0",
   "keywords": [
@@ -46,5 +46,5 @@
     "dist/",
     "src/"
   ],
-  "gitHead": "019be69b5afcd234bdc33b4a0be18f6c18fa4f28"
+  "gitHead": "6f6515516b3565379677053e918c1cf59dce2dee"
 }

package/src/useTheme.spec.tsx

@@ -6,6 +6,8 @@ import { useTheme } from './useTheme';
 
 describe('useTheme', () => {
   it('returns default light theme', () => {
+    jest.spyOn(console, 'warn').mockImplementation();
+
     const {
       result: { current },
     } = renderHook(() => useTheme());
@@ -17,6 +19,8 @@ describe('useTheme', () => {
       isScreenModeDark: false,
       className: 'np-theme-light',
     });
+
+    jest.clearAllMocks();
   });
 
   it('returns personal theme', () => {
@@ -115,4 +119,96 @@ describe('useTheme', () => {
       className: 'np-theme-personal np-theme-personal--dark',
     });
   });
+
+  it('warns when used outside a theme provider on staging or localhost', () => {
+    jest.spyOn(console, 'warn').mockImplementation();
+
+    Object.defineProperty(window, 'location', {
+      value: {
+        hostname: 'wise.com',
+      },
+      writable: true,
+    });
+
+    const {
+      result: { current: productionValue },
+    } = renderHook(() => useTheme());
+
+    expect(productionValue).toStrictEqual({
+      theme: DEFAULT_BASE_THEME,
+      screenMode: DEFAULT_SCREEN_MODE,
+      isModern: false,
+      isScreenModeDark: false,
+      className: 'np-theme-light',
+    });
+
+    // eslint-disable-next-line no-console
+    expect(console.warn).not.toHaveBeenCalled();
+
+    Object.defineProperty(window, 'location', {
+      value: {
+        hostname: 'dev-wi.se',
+      },
+      writable: true,
+    });
+
+    const {
+      result: { current: stagingValue },
+    } = renderHook(() => useTheme());
+
+    expect(stagingValue).toStrictEqual({
+      theme: DEFAULT_BASE_THEME,
+      screenMode: DEFAULT_SCREEN_MODE,
+      isModern: false,
+      isScreenModeDark: false,
+      className: 'np-theme-light',
+    });
+
+    // eslint-disable-next-line no-console
+    expect(console.warn).toHaveBeenCalledTimes(1);
+
+    Object.defineProperty(window, 'location', {
+      value: {
+        hostname: 'localhost',
+      },
+      writable: true,
+    });
+
+    const {
+      result: { current: localhostValue },
+    } = renderHook(() => useTheme());
+
+    expect(localhostValue).toStrictEqual({
+      theme: DEFAULT_BASE_THEME,
+      screenMode: DEFAULT_SCREEN_MODE,
+      isModern: false,
+      isScreenModeDark: false,
+      className: 'np-theme-light',
+    });
+
+    // eslint-disable-next-line no-console
+    expect(console.warn).toHaveBeenCalledTimes(2);
+
+    Object.defineProperty(window, 'location', {
+      value: undefined,
+      writable: true,
+    });
+
+    const {
+      result: { current: noHostnameValue },
+    } = renderHook(() => useTheme());
+
+    expect(noHostnameValue).toStrictEqual({
+      theme: DEFAULT_BASE_THEME,
+      screenMode: DEFAULT_SCREEN_MODE,
+      isModern: false,
+      isScreenModeDark: false,
+      className: 'np-theme-light',
+    });
+
+    // eslint-disable-next-line no-console
+    expect(console.warn).toHaveBeenCalledTimes(2);
+
+    jest.clearAllMocks();
+  });
 });

package/src/useTheme.ts

@@ -18,8 +18,23 @@ const FALLBACK_VALUES = {
   screenMode: DEFAULT_SCREEN_MODE,
 };
 
+const isNotProduction = () => {
+  try {
+    return ['localhost', 'dev-wi.se'].includes(window.location.hostname);
+  } catch {
+    return false;
+  }
+};
+
 export const useTheme = (): ThemeHookValue => {
-  const { theme, screenMode: contextScreenMode } = useContext(ThemeContext) ?? FALLBACK_VALUES;
+  const theming = useContext(ThemeContext);
+
+  if (!theming && isNotProduction()) {
+    // eslint-disable-next-line no-console
+    console.warn('Call to useTheme outside a ThemeProvider');
+  }
+
+  const { theme, screenMode: contextScreenMode } = theming ?? FALLBACK_VALUES;
 
   const screenMode = theme === DEFAULT_BASE_THEME ? DEFAULT_SCREEN_MODE : contextScreenMode;