@helpwave/hightide/dist/components/TextImage.mjs.map

helpwave's component and theming library

{"version":3,"sources":["../../src/hooks/useLanguage.tsx","../../src/hooks/useLocalStorage.tsx","../../src/hooks/useTranslation.ts","../../src/components/TextImage.tsx"],"sourcesContent":["import type { Dispatch, PropsWithChildren, SetStateAction } from 'react'\nimport { createContext, useContext, useEffect, useState } from 'react'\nimport { useLocalStorage } from './useLocalStorage'\n\nexport const languages = ['en', 'de'] as const\nexport type Languages = typeof languages[number]\nexport const languagesLocalNames: Record<Languages, string> = {\n  en: 'English',\n  de: 'Deutsch',\n}\n\nexport const DEFAULT_LANGUAGE = 'en'\n\nexport type LanguageContextValue = {\n  language: Languages,\n  setLanguage: Dispatch<SetStateAction<Languages>>,\n}\n\nexport const LanguageContext = createContext<LanguageContextValue>({ language: DEFAULT_LANGUAGE, setLanguage: (v) => v })\n\nexport const useLanguage = () => useContext(LanguageContext)\n\nexport const useLocale = (overWriteLanguage?: Languages) => {\n  const { language } = useLanguage()\n  const mapping: Record<Languages, string> = {\n    en: 'en-US',\n    de: 'de-DE'\n  }\n  return mapping[overWriteLanguage ?? language]\n}\n\ntype ProvideLanguageProps = {\n  initialLanguage?: Languages,\n}\n\nexport const ProvideLanguage = ({ initialLanguage, children }: PropsWithChildren<ProvideLanguageProps>) => {\n  const [language, setLanguage] = useState<Languages>(initialLanguage ?? DEFAULT_LANGUAGE)\n  const [storedLanguage, setStoredLanguage] = useLocalStorage<Languages>('language', initialLanguage ?? DEFAULT_LANGUAGE)\n\n  useEffect(() => {\n    if(language !== initialLanguage && initialLanguage){\n      console.warn('LanguageProvider initial state changed: Prefer using useLanguages\\'s setLanguage instead')\n      setLanguage(initialLanguage)\n    }\n  }, [initialLanguage]) // eslint-disable-line react-hooks/exhaustive-deps\n\n  useEffect(() => {\n    // TODO set locale of html tag here as well\n    setStoredLanguage(language)\n  }, [language, setStoredLanguage])\n\n  useEffect(() => {\n    if (storedLanguage !== null) {\n      setLanguage(storedLanguage)\n      return\n    }\n\n    const languagesToTestAgainst = Object.values(languages)\n\n    const matchingBrowserLanguages = window.navigator.languages\n      .map(language => languagesToTestAgainst.find((test) => language === test || language.split('-')[0] === test))\n      .filter(entry => entry !== undefined)\n\n    if (matchingBrowserLanguages.length === 0) return\n\n    const firstMatch = matchingBrowserLanguages[0] as Languages\n    setLanguage(firstMatch)\n  }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n  return (\n    <LanguageContext.Provider value={{\n      language,\n      setLanguage\n    }}>\n      {children}\n    </LanguageContext.Provider>\n  )\n}\n","import type { Dispatch, SetStateAction } from 'react'\nimport { useCallback, useEffect, useState } from 'react'\nimport { LocalStorageService } from '../util/storage'\n\ntype SetValue<T> = Dispatch<SetStateAction<T>>\nexport const useLocalStorage = <T, >(key: string, initValue: T): [T, SetValue<T>] => {\n  const get = useCallback((): T => {\n    if (typeof window === 'undefined') {\n      return initValue\n    }\n    const storageService = new LocalStorageService()\n    const value = storageService.get<T>(key)\n    return value || initValue\n  }, [initValue, key])\n\n  const [storedValue, setStoredValue] = useState<T>(get)\n\n  const setValue: SetValue<T> = useCallback(value => {\n    const newValue = value instanceof Function ? value(storedValue) : value\n    const storageService = new LocalStorageService()\n    storageService.set(key, value)\n\n    setStoredValue(newValue)\n  }, [storedValue, setStoredValue, key])\n\n  useEffect(() => {\n    setStoredValue(get())\n  }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n  return [storedValue, setValue]\n}","import type { Languages } from './useLanguage'\nimport { useLanguage } from './useLanguage'\n\nexport type Translation<T> = Record<Languages, T>\n\ntype OverwriteTranslationType<Translation extends Record<string, unknown>> = {\n  language?: Languages,\n  translation?: Partial<Record<Languages, Partial<Translation>>>,\n}\n\n/**\n * Adds the `language` prop to the component props.\n *\n * @param Translation the type of the translation object\n *\n * @param Props the type of the component props, defaults to `Record<string, never>`,\n *              if you don't expect any other props other than `language` and get an\n *              error when using your component (because it uses `forwardRef` etc.)\n *              you can try out `Record<string, unknown>`, this might resolve your\n *              problem as `SomeType & never` is still `never` but `SomeType & unknown`\n *              is `SomeType` which means that adding back props (like `ref` etc.)\n *              works properly\n */\nexport type PropsForTranslation<\n  Translation extends Record<string, unknown>,\n  Props = Record<string, never>\n> = Props & {\n  overwriteTranslation?: OverwriteTranslationType<Translation>,\n};\n\nexport const useTranslation = <Translation extends Record<string, unknown>>(\n  defaults: Record<Languages, Translation>,\n  translationOverwrite: OverwriteTranslationType<Translation> = {}\n) : Translation => {\n  const { language: languageProp, translation: overwrite } = translationOverwrite\n  const { language: inferredLanguage } = useLanguage()\n  const usedLanguage = languageProp ?? inferredLanguage\n  let defaultValues: Translation = defaults[usedLanguage]\n  if (overwrite && overwrite[usedLanguage]) {\n    defaultValues = { ...defaultValues, ...overwrite[usedLanguage] }\n  }\n  return defaultValues\n}\n","import type { Languages } from '../hooks/useLanguage'\nimport type { PropsForTranslation } from '../hooks/useTranslation'\nimport { useTranslation } from '../hooks/useTranslation'\nimport clsx from 'clsx'\n\ntype TextImageColor = 'primary' | 'secondary' | 'dark'\n\ntype TextImageTranslation = {\n  showMore: string,\n}\n\nconst defaultTextImageTranslation: Record<Languages, TextImageTranslation> = {\n  de: {\n    showMore: 'Mehr anzeigen'\n  },\n  en: {\n    showMore: 'Show more'\n  }\n}\n\nexport type TextImageProps = {\n  title: string,\n  description: string,\n  imageUrl: string,\n  onShowMoreClicked?: () => void,\n  color?: TextImageColor,\n  badge?: string,\n  contentClassName?: string,\n  className?: string,\n}\n\n/**\n * A Component for layering a Text upon a Image\n */\nexport const TextImage = ({\n                            overwriteTranslation,\n                            title,\n                            description,\n                            imageUrl,\n                            onShowMoreClicked,\n                            color = 'primary',\n                            badge,\n                            contentClassName = '',\n                            className = '',\n                          }: PropsForTranslation<TextImageTranslation, TextImageProps>) => {\n  const translation = useTranslation(defaultTextImageTranslation, overwriteTranslation)\n\n  const chipColorMapping: Record<TextImageColor, string> = {\n    primary: 'text-text-image-primary-background bg-text-text-image-primary-text',\n    secondary: 'text-text-image-secondary-background bg-text-text-image-secondary-text',\n    dark: 'text-text-image-dark-background bg-text-text-image-dark-text',\n  }\n\n  const colorMapping: Record<TextImageColor, string> = {\n    primary: 'text-text-image-primary-text bg-linear-to-r from-30% from-text-image-primary-background to-text-image-primary-background/55',\n    secondary: 'text-text-image-secondary-text bg-linear-to-r from-30% from-text-image-secondary-background to-text-image-secondary-background/55',\n    dark: 'text-text-image-dark-text bg-linear-to-r from-30% from-text-image-dark-background to-text-image-dark-background/55',\n  }\n\n  return (\n    <div\n      className={clsx('rounded-2xl w-full', className)}\n      style={{\n        backgroundImage: `url(${imageUrl})`,\n        backgroundSize: 'cover',\n      }}>\n      <div\n        className={clsx(`col px-6 py-12 rounded-2xl h-full`, colorMapping[color], contentClassName)}>\n        {badge && (\n          <div className={clsx(`chip-full bg-white mb-2 py-2 px-4 w-fit`, chipColorMapping[color])}>\n            <span className=\"text-lg font-bold\">{badge}</span>\n          </div>\n        )}\n        <div className=\"col gap-y-1 text-white overflow-hidden\">\n          <span className=\"textstyle-title-xl\">{title}</span>\n          <span className=\"text-ellipsis overflow-hidden\">{description}</span>\n        </div>\n        {onShowMoreClicked && (\n          <div className=\"row mt-2 text-white underline\">\n            <button onClick={onShowMoreClicked}>{translation.showMore}</button>\n          </div>\n        )}\n      </div>\n    </div>\n  )\n}\n"],"mappings":";AACA,SAAS,eAAe,YAAY,aAAAA,YAAW,YAAAC,iBAAgB;;;ACA/D,SAAS,aAAa,WAAW,gBAAgB;;;ADqE7C;AA3DG,IAAM,mBAAmB;AAOzB,IAAM,kBAAkB,cAAoC,EAAE,UAAU,kBAAkB,aAAa,CAAC,MAAM,EAAE,CAAC;AAEjH,IAAM,cAAc,MAAM,WAAW,eAAe;;;AEUpD,IAAM,iBAAiB,CAC5B,UACA,uBAA8D,CAAC,MAC9C;AACjB,QAAM,EAAE,UAAU,cAAc,aAAa,UAAU,IAAI;AAC3D,QAAM,EAAE,UAAU,iBAAiB,IAAI,YAAY;AACnD,QAAM,eAAe,gBAAgB;AACrC,MAAI,gBAA6B,SAAS,YAAY;AACtD,MAAI,aAAa,UAAU,YAAY,GAAG;AACxC,oBAAgB,EAAE,GAAG,eAAe,GAAG,UAAU,YAAY,EAAE;AAAA,EACjE;AACA,SAAO;AACT;;;ACvCA,OAAO,UAAU;AAmEL,gBAAAC,MAGJ,YAHI;AA3DZ,IAAM,8BAAuE;AAAA,EAC3E,IAAI;AAAA,IACF,UAAU;AAAA,EACZ;AAAA,EACA,IAAI;AAAA,IACF,UAAU;AAAA,EACZ;AACF;AAgBO,IAAM,YAAY,CAAC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA,mBAAmB;AAAA,EACnB,YAAY;AACd,MAAiE;AACzF,QAAM,cAAc,eAAe,6BAA6B,oBAAoB;AAEpF,QAAM,mBAAmD;AAAA,IACvD,SAAS;AAAA,IACT,WAAW;AAAA,IACX,MAAM;AAAA,EACR;AAEA,QAAM,eAA+C;AAAA,IACnD,SAAS;AAAA,IACT,WAAW;AAAA,IACX,MAAM;AAAA,EACR;AAEA,SACE,gBAAAA;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,KAAK,sBAAsB,SAAS;AAAA,MAC/C,OAAO;AAAA,QACL,iBAAiB,OAAO,QAAQ;AAAA,QAChC,gBAAgB;AAAA,MAClB;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,WAAW,KAAK,qCAAqC,aAAa,KAAK,GAAG,gBAAgB;AAAA,UACzF;AAAA,qBACC,gBAAAA,KAAC,SAAI,WAAW,KAAK,2CAA2C,iBAAiB,KAAK,CAAC,GACrF,0BAAAA,KAAC,UAAK,WAAU,qBAAqB,iBAAM,GAC7C;AAAA,YAEF,qBAAC,SAAI,WAAU,0CACb;AAAA,8BAAAA,KAAC,UAAK,WAAU,sBAAsB,iBAAM;AAAA,cAC5C,gBAAAA,KAAC,UAAK,WAAU,iCAAiC,uBAAY;AAAA,eAC/D;AAAA,YACC,qBACC,gBAAAA,KAAC,SAAI,WAAU,iCACb,0BAAAA,KAAC,YAAO,SAAS,mBAAoB,sBAAY,UAAS,GAC5D;AAAA;AAAA;AAAA,MAEJ;AAAA;AAAA,EACF;AAEJ;","names":["useEffect","useState","jsx"]}