@helpwave/hightide 0.0.1

package/globals.css

@@ -0,0 +1,488 @@
+@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

@@ -0,0 +1,88 @@
+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

@@ -0,0 +1,78 @@
+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

@@ -0,0 +1,33 @@
+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

@@ -0,0 +1,25 @@
+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])
+}