@helpwave/hightide 0.0.9 → 0.0.12

package/globals.css

@@ -1,488 +0,0 @@
-@import 'tailwindcss';
-
-/* variants */
-@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));
-@custom-variant light (&:where([data-theme=light], [data-theme=light] *));
-
-/* utilities */
-@utility col {
-  @apply flex flex-col gap-y-2;
-}
-
-@utility row {
-  @apply flex flex-row gap-x-2;
-}
-
-@layer utilities {
-  .animation-delay-0 {
-    animation-delay: 0ms;
-  }
-
-  .animation-delay-100 {
-    animation-delay: 100ms;
-  }
-
-  .animation-delay-200 {
-    animation-delay: 200ms;
-  }
-
-  .animation-delay-300 {
-    animation-delay: 300ms;
-  }
-
-  .animation-delay-400 {
-    animation-delay: 400ms;
-  }
-
-  .animation-delay-500 {
-    animation-delay: 500ms;
-  }
-
-  .animation-delay-1000 {
-    animation-delay: 1000ms;
-  }
-
-  @keyframes fade-in {
-    0% {
-      opacity: 0;
-    }
-    100% {
-      opacity: 1;
-    }
-  }
-
-  @keyframes fade-out {
-    0% {
-      opacity: 1;
-    }
-    100% {
-      opacity: 0;
-    }
-  }
-
-  @keyframes bigLeftUp {
-    0%, 25% {
-      stroke-dashoffset: 1000;
-    }
-    50%, 75%, 100% {
-      stroke-dashoffset: 0;
-    }
-  }
-
-  @keyframes bigRightDown {
-    0%, 25%, 50% {
-      stroke-dashoffset: 0;
-    }
-    75%, 100% {
-      stroke-dashoffset: -1000;
-    }
-  }
-
-  @keyframes smallLeftUp {
-    0%, 25%, 50% {
-      stroke-dashoffset: 1000;
-    }
-    75%, 100% {
-      stroke-dashoffset: 0;
-    }
-  }
-
-  @keyframes smallRightDown {
-    0%, 25% {
-      stroke-dashoffset: 0;
-    }
-    50%, 75%, 100% {
-      stroke-dashoffset: -1000;
-    }
-  }
-
-  .animate-fade {
-    animation: fade-out 3s ease-in-out;
-  }
-
-  .animate-wave-big-left-up {
-    animation: bigLeftUp 1.7s ease-in infinite normal;
-  }
-
-  .animate-wave-big-right-down {
-    animation: bigRightDown 1.7s ease-in infinite reverse;
-  }
-
-  .animate-wave-small-left-up {
-    animation: smallLeftUp 1.7s ease-in infinite normal;
-  }
-
-  .animate-wave-small-right-down {
-    animation: smallRightDown 1.7s ease-in infinite reverse;
-  }
-
-  .animate-tooltip-fade-in {
-    animation: fade-in 0.2s ease-in-out forwards;
-  }
-
-  .animate-tooltip-fade-out {
-    animation: fade-in 0.2s ease-in-out forwards;
-  }
-
-  .shadow-around {
-    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.02),
-    0 -2px 2px 0 rgba(0, 0, 0, 0.02),
-    2px 0 2px 0 rgba(0, 0, 0, 0.02),
-    -2px 0 2px 0 rgba(0, 0, 0, 0.02);
-  }
-
-  .shadow-around-md {
-    box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.02),
-    0 -5px 5px 0 rgba(0, 0, 0, 0.02),
-    5px 0 5px 0 rgba(0, 0, 0, 0.02),
-    -5px 0 5px 0 rgba(0, 0, 0, 0.02);
-  }
-
-  .shadow-around-lg {
-    box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.02),
-    0 -10px 10px 0 rgba(0, 0, 0, 0.02),
-    10px 0 10px 0 rgba(0, 0, 0, 0.02),
-    -10px 0 10px 0 rgba(0, 0, 0, 0.02);
-  }
-
-  .shadow-around-xl {
-    box-shadow: 0 20px 20px 0 rgba(0, 0, 0, 0.02),
-    0 -20px 20px 0 rgba(0, 0, 0, 0.02),
-    20px 0 20px 0 rgba(0, 0, 0, 0.02),
-    -20px 0 20px 0 rgba(0, 0, 0, 0.02);
-  }
-}
-
-/* The theme variables */
-@theme {
-  /* Colors for with default values of the light theme */
-  --color-white: #FFFFFF;
-  --color-black: #000000;
-  --color-gray-25: #F8F8F8;
-  --color-gray-50: #F2F2F2;
-  --color-gray-100: #E6E6E6;
-  --color-gray-200: #CCCCCC;
-  --color-gray-300: #B3B3B3;
-  --color-gray-400: #999999;
-  --color-gray-500: #888888;
-  --color-gray-600: #666666;
-  --color-gray-700: #4D4D4D;
-  --color-gray-800: #333333;
-  --color-gray-900: #1A1A1A;
-  --color-gray-950: #0D0D0D;
-
-  --color-green-100: #D1EFD8;
-  --color-green-500: #69CB81;
-  --color-green-900: #2C5536;
-
-  --color-orange-100: #FBECD9;
-  --color-orange-200: #F7D8B3;
-  --color-orange-500: #EA9E40;
-
-  --color-purple-50: #EFE6FD;
-  --color-purple-100: #CEB0FA;
-  --color-purple-400: #8470c5;
-  --color-purple-500: #694BB4;
-
-  --color-blue-50: #F6FAFF;
-  --color-blue-100: #D6E3F9;
-  --color-blue-200: #99B9EF;
-  --color-blue-500: #3272DF;
-  --color-blue-600: #285BB2;
-  --color-blue-800: #1A4080;
-
-  --color-red-50: #FFF9F9;
-  --color-red-100: #FBE0E2;
-  --color-red-200: #F7C2C5;
-  --color-red-300: #F4A3A7;
-  --color-red-400: #E3798A;
-  --color-red-500: #DC576D;
-  --color-red-900: #5C252E;
-
-  --color-primary: var(--color-purple-500);
-  --color-on-primary: #FFFFFF;
-  --color-secondary: #11243E;
-  --color-on-secondary: #FFFFFF;
-  --color-warning: #EA9E40;
-  --color-on-warning: #FFFFFF;
-  --color-positive: #69CB81;
-  --color-on-positive: #FFFFFF;
-  --color-negative: #DC576D;
-  --color-on-negative: #FFFFFF;
-  --color-surface: #FFFFFF;
-  --color-on-surface: #1A1A1A;
-  --color-surface-variant: #F8F8F8;
-  --color-surface-warning: #FBECD9;
-  --color-highlight: #3272DF;
-  --color-background: #EEEEEE;
-  --color-on-background: #1A1A1A;
-
-  --color-female: #E3798A;
-  --color-female-outline: #F4A3A7;
-  --color-female-surface: #FBE0E2;
-  --color-female-background: #FFF9F9;
-
-  --color-male: #3272DF;
-  --color-male-outline: #99B9EF;
-  --color-male-surface: #D6E3F9;
-  --color-male-background: #F6FAFF;
-
-  --color-neutral: #4D4D4D;
-  --color-neutral-outline: #B3B3B3;
-  --color-neutral-surface: #E6E6E6;
-  --color-neutral-background: #F8F8F8;
-
-  --color-text-primary: #1A1A1A;
-  --color-text-secondary: #666666;
-  --color-text-tertiary: #B3B3B3;
-  --color-text-highlight: #3272DF;
-  --color-icon-primary: #1A1A1A;
-  --color-icon-secondary: #666666;
-  --color-icon-highlight: #3272DF;
-  --color-divider: #E6E6E6;
-  --color-description: #555555;
-  --color-outline: #E6E6E6;
-  --color-outline-variant: #CCCCCC;
-  --color-disabled-background: #BBBBBB;
-  --color-disabled-text: #555555;
-  --color-disabled-icon: #555555;
-  --color-disabled-outline: #555555;
-
-  --color-button-solid-primary-background: var(--color-purple-500);
-  --color-button-solid-primary-text: #FFFFFF;
-  --color-button-solid-primary-icon: #FFFFFF;
-  --color-button-solid-secondary-background: #EFE6FD;
-  --color-button-solid-secondary-text: var(--color-purple-500);
-  --color-button-solid-secondary-icon: var(--color-purple-500);
-  --color-button-solid-tertiary-background: #F2F2F2;
-  --color-button-solid-tertiary-icon: #888888;
-  --color-button-solid-tertiary-text: #888888;
-  --color-button-outline-primary-outline: var(--color-purple-500);
-  --color-button-outline-primary-icon: var(--color-purple-500);
-  --color-button-outline-primary-text: var(--color-purple-500);
-  --color-button-solid-positive-background: #69CB81;
-  --color-button-solid-positive-icon: #FFFFFF;
-  --color-button-solid-positive-text: #FFFFFF;
-  --color-button-solid-warning-background: #EA9E40;
-  --color-button-solid-warning-icon: #FFFFFF;
-  --color-button-solid-warning-text: #FFFFFF;
-  --color-button-solid-negative-background: #DC576D;
-  --color-button-solid-negative-icon: #FFFFFF;
-  --color-button-solid-negative-text: #FFFFFF;
-
-  --color-button-text-hover-background: #E1E1E1;
-  --color-button-text-neutral-text: #333333;
-  --color-button-text-neutral-icon: #333333;
-  --color-button-text-negative-text: #DC576D;
-  --color-button-text-negative-icon: #DC576D;
-
-  --color-menu-background: #FFFFFF;
-  --color-menu-text: #1A1A1A;
-  --color-menu-border: #999999;
-
-  --color-tag-default-background: #F6FAFF;
-  --color-tag-default-text: #1A4080;
-  --color-tag-default-icon: #1A4080;
-  --color-tag-dark-background: #333333;
-  --color-tag-dark-text: #FFFFFF;
-  --color-tag-dark-icon: #FFFFFF;
-  --color-tag-green-background: #E2E9DB;
-  --color-tag-green-text: #7A977E;
-  --color-tag-green-icon: #7A977E;
-  --color-tag-yellow-background: #FEEACB;
-  --color-tag-yellow-text: #C79345;
-  --color-tag-yellow-icon: #C79345;
-  --color-tag-red-background: #FEE0DD;
-  --color-tag-red-text: #D67268;
-  --color-tag-red-icon: #D67268;
-  --color-tag-blue-background: #F6FAFF;
-  --color-tag-blue-text: #1A4080;
-  --color-tag-blue-icon: #1A4080;
-  --color-tag-pink-background: #CEA3B8;
-  --color-tag-pink-text: #CE75A0;
-  --color-tag-pink-icon: #CE75A0;
-
-  --color-tabel-header-background: #F6FAFF;
-
-  --color-text-image-primary-background: var(--color-purple-500);
-  --color-text-image-primary-text: #FFFFFF;
-  --color-text-image-secondary-background: #3171DE;
-  --color-text-image-secondary-text: #FFFFFF;
-  --color-text-image-dark-background: #11243E;
-  --color-text-image-dark-text: #FFFFFF;
-
-  /* breakpoints */
-  --breakpoint-tablet: 48rem; /* 768px for 16px font-size */
-  --breakpoint-desktop: 64rem; /* 1024px for 16px font-size*/
-  /* fonts */
-  --font-inter: 'Inter', sans-serif;
-  --font-space: 'Space Grotesk', sans-serif;
-}
-
-/* Overrides of the dark theme */
-@layer base {
-  /* Here are overrides for the light theme */
-  @variant dark {
-    --color-primary: var(--color-purple-400);
-
-    --color-surface: #333333;
-    --color-on-surface: #EEEEEE;
-    --color-surface-variant: #494949;
-    --color-surface-warning: #FBECD9;
-    --color-highlight: #3272DF;
-    --color-background: #1A1A1A;
-    --color-on-background: #EEEEEE;
-
-    --color-neutral: #4D4D4D;
-    --color-neutral-outline: #B3B3B3;
-    --color-neutral-surface: #E6E6E6;
-    --color-neutral-background: #F8F8F8;
-
-    --color-text-primary: #EEEEEE;
-    --color-text-secondary: #666666;
-    --color-text-tertiary: #B3B3B3;
-    --color-text-highlight: #3272DF;
-    --color-icon-primary: #EEEEEE;
-    --color-icon-secondary: #666666;
-    --color-icon-highlight: #3272DF;
-    --color-description: #999999;
-
-    --color-disabled-background: #555555;
-    --color-disabled-text: #888888;
-
-    --color-button-text-hover-background: #383838;
-    --color-button-text-neutral-text: #EEEEEE;
-    --color-button-text-neutral-icon: #EEEEEE;
-
-    --color-menu-background: #333333;
-    --color-menu-text: #EEEEEE;
-    --color-menu-border: #999999;
-
-    --color-tabel-header-background: #F6FAFF;
-  }
-}
-
-/* Styles that can be overwritten by utils */
-@layer components {
-  .btn-sm {
-    @apply row items-center justify-center gap-x-1 px-[0.625rem] py-[0.25rem] rounded-[0.375rem];
-  }
-
-  .btn-md {
-    @apply row items-center justify-center gap-x-2 px-[0.75rem] py-[0.5rem] rounded-[0.375rem];
-  }
-
-  .btn-lg {
-    @apply row items-center justify-center gap-x-2 px-[1rem] py-[0.675rem] rounded-[0.375rem];
-  }
-
-  .card-sm {
-    @apply col gap-y-2 bg-surface text-on-surface px-2 py-1 rounded;
-  }
-
-  .card-md {
-    @apply col gap-y-2 bg-surface text-on-surface px-4 py-2 rounded-md;
-  }
-
-  .card-lg {
-    @apply col gap-y-2 bg-surface text-on-surface px-8 py-4 rounded-lg;
-  }
-
-  .chip {
-    @apply row gap-x-1 items-center justify-center px-2 py-1 rounded-md;
-  }
-
-  .chip-full {
-    @apply row gap-x-1 items-center justify-center px-2 py-1 rounded-full;
-  }
-
-  .section-padding-x {
-    @apply px-6 tablet:px-12 desktop:px-24;
-  }
-
-  .section-padding-y {
-    @apply py-16;
-  }
-
-  .section-padding {
-    @apply px-6 tablet:px-12 desktop:px-24 py-16;
-  }
-}
-
-@layer components {
-  html, main {
-    @apply bg-background text-on-background;
-  }
-
-  button {
-    @apply cursor-pointer;
-  }
-
-  .textstyle-title-3xl {
-    @apply text-5xl font-space font-bold;
-  }
-
-  .textstyle-title-2xl {
-    @apply text-4xl font-space font-bold;
-  }
-
-  .textstyle-title-xl {
-    @apply text-3xl font-space font-bold;
-  }
-
-  .textstyle-title-lg {
-    @apply text-2xl font-space font-bold;
-  }
-
-  .textstyle-title-md {
-    @apply text-xl font-space font-bold;
-  }
-
-  .textstyle-title-normal {
-    @apply text-lg font-semibold;
-  }
-
-  .textstyle-title-sm {
-    @apply font-space font-bold;
-  }
-
-  .textstyle-accent {
-    @apply text-sm text-gray-600 font-bold;
-  }
-
-  .textstyle-description {
-    @apply text-gray-400;
-  }
-
-  .textstyle-label-lg {
-    @apply text-gray-700 text-lg font-semibold;
-  }
-
-  .textstyle-label-md {
-    @apply text-gray-700 font-semibold;
-  }
-
-  .textstyle-label-sm {
-    @apply text-sm text-gray-700 font-semibold;
-  }
-
-  .textstyle-table-name {
-    @apply text-lg font-space font-medium;
-  }
-
-  .textstyle-table-header {
-    @apply text-gray-600 font-bold;
-  }
-
-  .textstyle-navigation-item {
-    @apply font-bold font-space;
-  }
-
-  .textstyle-form-error {
-    @apply text-negative text-sm;
-  }
-
-  .textstyle-form-description {
-    @apply text-gray-500 text-sm;
-  }
-}

package/hooks/useHoverState.ts

@@ -1,88 +0,0 @@
-import type { Dispatch, SetStateAction } from 'react'
-import { useEffect, useState } from 'react'
-
-type UseHoverStateProps = {
-  /**
-   * The delay after which the menu is closed in milliseconds
-   *
-   * default: 200ms
-   */
-  closingDelay: number,
-  /**
-   * Whether the hover state management should be disabled
-   *
-   * default: false
-   */
-  isDisabled: boolean,
-}
-
-type UseHoverStateReturnType = {
-  /**
-   * Whether the element is hovered
-   */
-  isHovered: boolean,
-  /**
-   * Function to change the current hover status
-   */
-  setIsHovered: Dispatch<SetStateAction<boolean>>,
-  /**
-   * Handlers to pass on to the component that should be hovered
-   */
-  handlers: {
-    onMouseEnter: () => void,
-    onMouseLeave: () => void,
-  },
-}
-
-const defaultUseHoverStateProps: UseHoverStateProps = {
-  closingDelay: 200,
-  isDisabled: false,
-}
-
-/**
- * @param props See UseHoverStateProps
- *
- * A react hook for managing the hover state of a component. The handlers provided should be
- * forwarded to the component which should be hovered over
- */
-export const useHoverState = (props: Partial<UseHoverStateProps> | undefined = undefined): UseHoverStateReturnType => {
-  const { closingDelay, isDisabled } = { ...defaultUseHoverStateProps, ...props }
-
-  const [isHovered, setIsHovered] = useState(false)
-  const [timer, setTimer] = useState<NodeJS.Timeout>()
-
-  const onMouseEnter = () => {
-    if (isDisabled) {
-      return
-    }
-    clearTimeout(timer)
-    setIsHovered(true)
-  }
-
-  const onMouseLeave = () => {
-    if (isDisabled) {
-      return
-    }
-    setTimer(setTimeout(() => {
-      setIsHovered(false)
-    }, closingDelay))
-  }
-
-  useEffect(() => {
-    if (timer) {
-      return () => {
-        clearTimeout(timer)
-      }
-    }
-  })
-
-  useEffect(() => {
-    if (timer) {
-      clearTimeout(timer)
-    }
-  }, [isDisabled]) // eslint-disable-line react-hooks/exhaustive-deps
-
-  return {
-    isHovered, setIsHovered, handlers: { onMouseEnter, onMouseLeave }
-  }
-}

package/hooks/useLanguage.tsx

@@ -1,78 +0,0 @@
-import type { Dispatch, PropsWithChildren, SetStateAction } from 'react'
-import { createContext, useContext, useEffect, useState } from 'react'
-import useLocalStorage from './useLocalStorage'
-
-export const languages = ['en', 'de'] as const
-export type Languages = typeof languages[number]
-export const languagesLocalNames: Record<Languages, string> = {
-  en: 'English',
-  de: 'Deutsch',
-}
-
-export const DEFAULT_LANGUAGE = 'en'
-
-export type LanguageContextValue = {
-  language: Languages,
-  setLanguage: Dispatch<SetStateAction<Languages>>,
-}
-
-export const LanguageContext = createContext<LanguageContextValue>({ language: DEFAULT_LANGUAGE, setLanguage: (v) => v })
-
-export const useLanguage = () => useContext(LanguageContext)
-
-export const useLocale = (overWriteLanguage?: Languages) => {
-  const { language } = useLanguage()
-  const mapping: Record<Languages, string> = {
-    en: 'en-US',
-    de: 'de-DE'
-  }
-  return mapping[overWriteLanguage ?? language]
-}
-
-type ProvideLanguageProps = {
-  initialLanguage?: Languages,
-}
-
-export const ProvideLanguage = ({ initialLanguage, children }: PropsWithChildren<ProvideLanguageProps>) => {
-  const [language, setLanguage] = useState<Languages>(initialLanguage ?? DEFAULT_LANGUAGE)
-  const [storedLanguage, setStoredLanguage] = useLocalStorage<Languages>('language', initialLanguage ?? DEFAULT_LANGUAGE)
-
-  useEffect(() => {
-    if(language !== initialLanguage && initialLanguage){
-      console.warn('LanguageProvider initial state changed: Prefer using useLanguages\'s setLanguage instead')
-      setLanguage(initialLanguage)
-    }
-  }, [initialLanguage]) // eslint-disable-line react-hooks/exhaustive-deps
-
-  useEffect(() => {
-    // TODO set locale of html tag here as well
-    setStoredLanguage(language)
-  }, [language, setStoredLanguage])
-
-  useEffect(() => {
-    if (storedLanguage !== null) {
-      setLanguage(storedLanguage)
-      return
-    }
-
-    const languagesToTestAgainst = Object.values(languages)
-
-    const matchingBrowserLanguages = window.navigator.languages
-      .map(language => languagesToTestAgainst.find((test) => language === test || language.split('-')[0] === test))
-      .filter(entry => entry !== undefined)
-
-    if (matchingBrowserLanguages.length === 0) return
-
-    const firstMatch = matchingBrowserLanguages[0] as Languages
-    setLanguage(firstMatch)
-  }, []) // eslint-disable-line react-hooks/exhaustive-deps
-
-  return (
-    <LanguageContext.Provider value={{
-      language,
-      setLanguage
-    }}>
-      {children}
-    </LanguageContext.Provider>
-  )
-}

package/hooks/useLocalStorage.tsx

@@ -1,33 +0,0 @@
-import type { Dispatch, SetStateAction } from 'react'
-import { useCallback, useEffect, useState } from 'react'
-import { LocalStorageService } from '../util/storage'
-
-type SetValue<T> = Dispatch<SetStateAction<T>>
-const useLocalStorage = <T, >(key: string, initValue: T): [T, SetValue<T>] => {
-  const get = useCallback((): T => {
-    if (typeof window === 'undefined') {
-      return initValue
-    }
-    const storageService = new LocalStorageService()
-    const value = storageService.get<T>(key)
-    return value || initValue
-  }, [initValue, key])
-
-  const [storedValue, setStoredValue] = useState<T>(get)
-
-  const setValue: SetValue<T> = useCallback(value => {
-    const newValue = value instanceof Function ? value(storedValue) : value
-    const storageService = new LocalStorageService()
-    storageService.set(key, value)
-
-    setStoredValue(newValue)
-  }, [storedValue, setStoredValue, key])
-
-  useEffect(() => {
-    setStoredValue(get())
-  }, []) // eslint-disable-line react-hooks/exhaustive-deps
-
-  return [storedValue, setValue]
-}
-
-export default useLocalStorage

package/hooks/useOutsideClick.ts

@@ -1,25 +0,0 @@
-import { useEffect } from 'react'
-import type { RefObject } from 'react'
-
-export const useOutsideClick = <Ts extends RefObject<HTMLElement>[]>(refs: Ts, handler: () => void) => {
-  useEffect(() => {
-    const listener = (event: MouseEvent | TouchEvent) => {
-      // returning means not "not clicking outside"
-
-      // if no target exists, return
-      if (event.target === null) return
-      // if the target is a ref's element or descendent thereof, return
-      if (refs.some((ref) => !ref.current || ref.current.contains(event.target as Node))) {
-        return
-      }
-
-      handler()
-    }
-    document.addEventListener('mousedown', listener)
-    document.addEventListener('touchstart', listener)
-    return () => {
-      document.removeEventListener('mousedown', listener)
-      document.removeEventListener('touchstart', listener)
-    }
-  }, [refs, handler])
-}