@helpwave/hightide 0.0.1

package/hooks/useSaveDelay.ts

@@ -0,0 +1,46 @@
+import { useEffect, useState } from 'react'
+
+function useSaveDelay(setNotificationStatus: (isShowing: boolean) => void, delay: number) {
+  const [updateTimer, setUpdateTimer] = useState<NodeJS.Timeout | undefined>(undefined)
+  const [notificationTimer, setNotificationTimer] = useState<NodeJS.Timeout | undefined>(undefined)
+
+  const restartTimer = (onSave: () => void) => {
+    clearTimeout(updateTimer)
+    setUpdateTimer(setTimeout(() => {
+      onSave()
+      setNotificationStatus(true)
+      // Show Saved Notification for fade animation duration
+      clearTimeout(notificationTimer)
+      setNotificationTimer(setTimeout(() => {
+        setNotificationStatus(false)
+        clearTimeout(notificationTimer)
+      }, delay))
+      clearTimeout(updateTimer)
+    }, delay))
+  }
+
+  const clearUpdateTimer = (hasSaved = true) => {
+    clearTimeout(updateTimer)
+    if (hasSaved) {
+      setNotificationStatus(true)
+      clearTimeout(notificationTimer)
+      setNotificationTimer(setTimeout(() => {
+        setNotificationStatus(false)
+        clearTimeout(notificationTimer)
+      }, delay))
+    } else {
+      setNotificationStatus(false)
+    }
+  }
+
+  useEffect(() => {
+    return () => {
+      clearTimeout(updateTimer)
+      clearTimeout(notificationTimer)
+    }
+  }, []) // eslint-disable-line react-hooks/exhaustive-deps
+
+  return { restartTimer, clearUpdateTimer }
+}
+
+export default useSaveDelay

package/hooks/useTheme.tsx

@@ -0,0 +1,57 @@
+import { useContext } from 'react'
+import type { Dispatch, SetStateAction, PropsWithChildren } from 'react'
+import { createContext, useState, useEffect } from 'react'
+import type { Translation } from './useTranslation'
+
+export type ThemeType = 'light' | 'dark'
+
+export type ThemeTypeTranslation = Record<ThemeType, string>
+export const defaultThemeTypeTranslation: Translation<ThemeTypeTranslation> = {
+  en: {
+    dark: 'Dark',
+    light: 'Light'
+  },
+  de: {
+    dark: 'Dunkel',
+    light: 'Hell'
+  }
+}
+
+type ThemeContextType = {
+  theme: ThemeType,
+  setTheme: Dispatch<SetStateAction<ThemeType>>,
+}
+
+export const ThemeContext = createContext<ThemeContextType>({
+  theme: 'light',
+  setTheme: (_: SetStateAction<ThemeType>) => {
+  },
+})
+
+type ThemeProviderProps = {
+  initialTheme?: ThemeType,
+}
+
+export const ThemeProvider = ({ children, initialTheme = 'light' }: PropsWithChildren<ThemeProviderProps>) => {
+  const [theme, setTheme] = useState<ThemeType>(initialTheme)
+
+  useEffect(() => {
+    if (theme !== initialTheme) {
+      console.warn('ThemeProvider initial state changed: Prefer using useTheme\'s setTheme instead')
+      setTheme(initialTheme)
+    }
+  }, [initialTheme]) // eslint-disable-line react-hooks/exhaustive-deps
+
+  useEffect(() => {
+    document.documentElement.setAttribute('data-theme', theme)
+  }, [theme])
+
+  return (
+    <ThemeContext.Provider value={{ theme, setTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  )
+}
+
+
+export const useTheme = () => useContext(ThemeContext)

package/hooks/useTranslation.ts

@@ -0,0 +1,43 @@
+import type { Languages } from './useLanguage'
+import { useLanguage } from './useLanguage'
+
+export type Translation<T> = Record<Languages, T>
+
+type OverwriteTranslationType<Translation extends Record<string, unknown>> = {
+  language?: Languages,
+  translation?: Partial<Record<Languages, Partial<Translation>>>,
+}
+
+/**
+ * Adds the `language` prop to the component props.
+ *
+ * @param Translation the type of the translation object
+ *
+ * @param Props the type of the component props, defaults to `Record<string, never>`,
+ *              if you don't expect any other props other than `language` and get an
+ *              error when using your component (because it uses `forwardRef` etc.)
+ *              you can try out `Record<string, unknown>`, this might resolve your
+ *              problem as `SomeType & never` is still `never` but `SomeType & unknown`
+ *              is `SomeType` which means that adding back props (like `ref` etc.)
+ *              works properly
+ */
+export type PropsForTranslation<
+  Translation extends Record<string, unknown>,
+  Props = Record<string, never>
+> = Props & {
+  overwriteTranslation?: OverwriteTranslationType<Translation>,
+};
+
+export const useTranslation = <Translation extends Record<string, unknown>>(
+  defaults: Record<Languages, Translation>,
+  translationOverwrite: OverwriteTranslationType<Translation> = {}
+) : Translation => {
+  const { language: languageProp, translation: overwrite } = translationOverwrite
+  const { language: inferredLanguage } = useLanguage()
+  const usedLanguage = languageProp ?? inferredLanguage
+  let defaultValues: Translation = defaults[usedLanguage]
+  if (overwrite && overwrite[usedLanguage]) {
+    defaultValues = { ...defaultValues, ...overwrite[usedLanguage] }
+  }
+  return defaultValues
+}

package/package.json

@@ -0,0 +1,71 @@
+{
+  "name": "@helpwave/hightide",
+  "description": "helpwave's component and theming library",
+  "author": "helpwave <support@helpwave.de> (https://helpwave.de)",
+  "homepage": "https://helpwave.de",
+  "repository": {
+    "url": "git+https://github.com/helpwave/hightide.git"
+  },
+  "license": "MPL-2.0",
+  "version": "0.0.1",
+  "main": "index.ts",
+  "type": "module",
+  "scripts": {
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "lint": "tsc --noEmit && eslint ."
+  },
+  "dependencies": {
+    "@babel/core": "7.26.0",
+    "@headlessui/react": "1.7.19",
+    "@radix-ui/react-checkbox": "1.1.3",
+    "@storybook/addon-actions": "^8.6.12",
+    "@storybook/theming": "^8.6.12",
+    "@tailwindcss/postcss": "^4.0.17",
+    "@types/node": "20.17.10",
+    "@types/tinycolor2": "1.4.6",
+    "clsx": "^2.1.1",
+    "lucide-react": "0.468.0",
+    "react": "18.3.1",
+    "react-custom-scrollbars-2": "4.5.0",
+    "react-dom": "18.3.1",
+    "simplebar-core": "1.3.0",
+    "simplebar-react": "3.3.0",
+    "tailwindcss": "^4.1.3",
+    "tinycolor2": "1.6.0",
+    "typescript": "5.7.2",
+    "webpack": "5.97.1",
+    "zod": "3.24.1"
+  },
+  "devDependencies": {
+    "@babel/preset-env": "7.26.0",
+    "@babel/preset-react": "7.26.3",
+    "@babel/preset-typescript": "7.26.0",
+    "@helpwave/eslint-config": "^1.29.0",
+    "@storybook/addon-essentials": "^8.6.12",
+    "@storybook/addon-interactions": "^8.6.12",
+    "@storybook/addon-links": "^8.6.12",
+    "@storybook/blocks": "^8.6.12",
+    "@storybook/nextjs": "^8.6.12",
+    "@storybook/react": "^8.6.12",
+    "@types/react": "18.3.17",
+    "@types/react-dom": "18.3.5",
+    "eslint": "9.17.0",
+    "next": "15.2.4",
+    "prop-types": "15.8.1",
+    "storybook": "^8.6.12"
+  },
+  "peerDependencies": {
+    "react": "18.3.1",
+    "react-dom": "18.3.1"
+  },
+  "keywords": [
+    "react",
+    "tailwindcss",
+    "component-library",
+    "typscript"
+  ],
+  "bugs": {
+    "url": "https://github.com/helpwave/hightide/issues"
+  }
+}

package/postcss.config.mjs

@@ -0,0 +1,7 @@
+const config = {
+  plugins: {
+    '@tailwindcss/postcss': {},
+  }
+}
+
+export default config

package/stories/README.md

@@ -0,0 +1,23 @@
+## Adding a Story
+
+You can use the `title` to change the displayed _hierarchy_. 
+**Make sure** that this _hierarchy_ is the **same as the path** 
+in which you have saved the story.
+
+```typescript
+const meta = {
+  title: 'Category/Folder/ComponentGroup',
+  component: Circle,
+} satisfies Meta<typeof Circle>
+
+export default meta
+type Story = StoryObj<typeof meta>;
+
+export const CircleVariation: Story = {
+  args: {
+    radius: 40,
+    color: 'primary',
+    className: '',
+  },
+}
+```

package/stories/coloring/shading.stories.tsx

@@ -0,0 +1,54 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import type { ShadedColors } from '../../coloring/types'
+import { shadingColorValues } from '../../coloring/types'
+import { generateShadingColors } from '../../coloring/shading'
+
+type StripeProps = {
+  shading: Partial<ShadedColors>,
+};
+
+const ColorStripe = ({ shading }: StripeProps) => {
+  const shades = generateShadingColors(shading)
+
+  return (
+    <div className="row">
+      {shadingColorValues.map((shade, index) => (
+        <div key={index} className="col gap-y-2 items-center relative">
+          <span className="font-bold">{shade}</span>
+          <div
+            style={{
+              backgroundColor: shades[shade],
+              width: 60,
+              height: 60,
+            }}
+          />
+          <span style={{ position: 'absolute', bottom: index % 2 === 0 ? '-24px' : '-48px' }}>{shades[shade].toUpperCase()}</span>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+const meta = {
+  title: 'Coloring/Shading',
+  component: ColorStripe,
+} satisfies Meta<typeof ColorStripe>
+
+export default meta
+type Story = StoryObj<typeof meta>;
+
+export const ShadingWithFixedValues: Story = {
+  args: {
+    shading: {
+      100: '#F5E2FD',
+      200: '#EFD5FB',
+      300: '#CDAFEF',
+      400: '#AA96DF',
+      500: '#B275CE',
+      600: '#8E75CE',
+      700: '#694BB4',
+      800: '#8070A9',
+      900: '#5D4D80',
+    },
+  },
+}

package/stories/geometry/Circle.stories.tsx

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Circle } from '../../components/Circle'
+
+const meta = {
+  title: 'Geometry/Circle',
+  component: Circle,
+} satisfies Meta<typeof Circle>
+
+export default meta
+type Story = StoryObj<typeof meta>;
+
+export const CircleVariation: Story = {
+  args: {
+    radius: 40,
+  },
+}

package/stories/geometry/rings/AnimatedRing.stories.tsx

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { AnimatedRing } from '../../../components/Ring'
+
+const meta = {
+  title: 'Geometry/Rings',
+  component: AnimatedRing,
+} satisfies Meta<typeof AnimatedRing>
+
+export default meta
+type Story = StoryObj<typeof meta>;
+
+export const AnimatedRingVariation: Story = {
+  args: {
+    innerSize: 40,
+    width: 10,
+    fillAnimationDuration: 3,
+  },
+}

package/stories/geometry/rings/RadialRings.stories.tsx

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { RadialRings } from '../../../components/Ring'
+
+const meta = {
+  title: 'Geometry/Rings',
+  component: RadialRings,
+} satisfies Meta<typeof RadialRings>
+
+export default meta
+type Story = StoryObj<typeof meta>;
+
+export const RadialRingsVariation: Story = {
+  args: {
+    waveWidth: 10,
+    sizeCircle1: 100,
+    sizeCircle2: 200,
+    sizeCircle3: 300
+  },
+}

package/stories/geometry/rings/Ring.stories.tsx

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Ring } from '../../../components/Ring'
+
+const meta = {
+  title: 'Geometry/Rings',
+  component: Ring,
+} satisfies Meta<typeof Ring>
+
+export default meta
+type Story = StoryObj<typeof meta>;
+
+export const RingVariation: Story = {
+  args: {
+    innerSize: 40,
+    width: 10,
+  },
+}

package/stories/geometry/rings/RingWave.stories.tsx

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { RingWave } from '../../../components/Ring'
+
+const meta = {
+  title: 'Geometry/Rings',
+  component: RingWave,
+} satisfies Meta<typeof RingWave>
+
+export default meta
+type Story = StoryObj<typeof meta>;
+
+export const RingWaveVariation: Story = {
+  args: {
+    startInnerSize: 20,
+    endInnerSize: 50,
+    width: 5,
+    fillAnimationDuration: 3,
+    repeating: false,
+  },
+}

package/stories/layout/FAQSection.stories.tsx

@@ -0,0 +1,49 @@
+import type { StoryFn } from '@storybook/react'
+import { FAQSection } from '../../components/layout/FAQSection'
+import { Helpwave } from '../../components/icons/Helpwave'
+
+const meta = {
+  title: 'Layout',
+  component: FAQSection,
+}
+
+export default meta
+
+export const FAQSectionVariation: StoryFn = () => (
+  <div className="bg-gray-100 p-4">
+    <FAQSection
+      entries={[
+        { id: 'question1', title: 'A Very Good Question?', content: { type: 'markdown', value: '\\negative{NO.}' } },
+        {
+          id: 'question2',
+          title: 'What is the first paragraph of the lorem ipsum?',
+          content: {
+            type: 'markdown',
+            value: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eget suscipit ex. In vitae leo metus.' +
+              ' Fusce gravida urna et magna consectetur mollis. Lorem ipsum dolor sit amet, consectetur adipiscing elit.' +
+              ' Etiam ac tellus purus. Integer vel sollicitudin leo. Integer nec interdum nisl. Nunc bibendum tellus vel' +
+              ' mollis cursus. Mauris eu luctus ipsum. Vivamus euismod nisi at odio tristique volutpat. Cras sed' +
+              ' facilisis neque, ac sagittis turpis. Maecenas et libero facilisis dui porta suscipit et in quam.' +
+              ' In hac habitasse platea dictumst. Donec nec sodales nibh, a pellentesque purus.'
+          }
+        },
+        {
+          id: 'question3',
+          title: 'Can I click this?',
+          content: {
+            type: 'markdown',
+            value: '\\positive{\\b{Yes, you can.}}'
+          }
+        },
+        {
+          id: 'question4',
+          title: 'What does the helpwave logo look like?',
+          content: {
+            type: 'custom',
+            value: (<div className="row justify-center"><Helpwave/></div>)
+          }
+        },
+      ]}
+    />
+  </div>
+)

package/stories/layout/InputGroup.stories.tsx

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { InputGroupExample } from '../../components/examples/InputGroupExample'
+
+const meta = {
+  title: 'Layout',
+  component: InputGroupExample,
+} satisfies Meta<typeof InputGroupExample>
+
+export default meta
+type Story = StoryObj<typeof meta>;
+
+export const InputGroupVariation: Story = {
+  args: {
+    title: 'Title',
+    expanded: true,
+    isExpandable: true,
+    className: '',
+  },
+}

package/stories/layout/Table.stories.tsx

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Table } from '../../components/Table'
+import type { DataType } from '../../components/examples/TableExample'
+import TableExample, { exampleData } from '../../components/examples/TableExample'
+
+const meta: Meta<typeof Table<DataType>> = {
+  title: 'Layout/Table',
+  component: Table,
+}
+
+export default meta
+type Story = StoryObj<typeof meta>;
+
+export const TableExampleStory: Story = {
+  render: (args) => <TableExample data={args['data']}/>,
+  args: {
+    data: exampleData,
+  }
+}

package/stories/layout/TextImage.stories.tsx

@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { TextImage } from '../../components/TextImage'
+
+const meta = {
+  title: 'Layout/TextImage',
+  component: TextImage,
+} satisfies Meta<typeof TextImage>
+
+export default meta
+type Story = StoryObj<typeof meta>;
+
+export const TextImageVariation: Story = {
+  args: {
+    title: 'This is the title',
+    description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras magna lorem, eleifend at mi nec, ' +
+      'vehicula dignissim diam. Integer ut justo eget neque interdum viverra eu eu dolor. Nullam vulputate urna sed ' +
+      'gravida facilisis. Phasellus volutpat elit luctus, sagittis libero sit amet, dapibus lacus.',
+    color: 'primary',
+    badge: 'Step #1',
+    imageUrl: 'https://images.unsplash.com/photo-1576091160550-2173dba999ef?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+    contentClassName: '',
+    className: '',
+  },
+}

package/stories/layout/chip/Chip.stories.tsx

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Chip } from '../../../components/ChipList'
+
+const meta = {
+  title: 'Layout/Chip',
+  component: Chip,
+} satisfies Meta<typeof Chip>
+
+export default meta
+type Story = StoryObj<typeof meta>;
+
+export const ChipVariation: Story = {
+  args: {
+    children: 'Label',
+    className: '',
+    variant: 'normal',
+    color: 'default'
+  },
+}

package/stories/layout/chip/ChipList.stories.tsx

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { ChipList } from '../../../components/ChipList'
+
+const meta = {
+  title: 'Layout/Chip',
+  component: ChipList,
+} satisfies Meta<typeof ChipList>
+
+export default meta
+type Story = StoryObj<typeof meta>;
+
+export const ChipListVariation: Story = {
+  args: {
+    list: [
+      { children: 'Chip 1' },
+      { children: 'Chip 2' },
+      { children: 'Chip 3 with longer text' },
+      { children: 'Chip 4 different children', variant: 'fullyRounded' },
+      { children: 'Chip 5 with text' },
+      { children: 'Chip 6 custom style', className: '!bg-red-400' },
+      { children: 'Chip 7 in dark color', color: 'dark' },
+      { children: 'Chip 8 with very very long text' },
+      { children: 'Chip 9' },
+    ],
+    className: ''
+  },
+}

package/stories/layout/tile/Tile.stories.ts

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { TileExample } from '../../../components/examples/TileExample'
+
+const meta = {
+  title: 'Layout/Tile',
+  component: TileExample,
+} satisfies Meta<typeof TileExample>
+
+export default meta
+type Story = StoryObj<typeof meta>;
+
+export const TileVariation: Story = {
+  args: {
+    title: { value: 'Title', className: '' },
+    description: { value: 'Description Text', className: 'textstyle-description' },
+    prefix: true,
+    suffix: true,
+    className: ''
+  },
+}

package/stories/layout/tile/TileWithImage.stories.tsx

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { TileWithImage } from '../../../components/layout/Tile'
+
+const meta = {
+  title: 'Layout/Tile',
+  component: TileWithImage,
+} satisfies Meta<typeof TileWithImage>
+
+export default meta
+type Story = StoryObj<typeof meta>;
+
+export const TileWithImageVariation: Story = {
+  args: {
+    title: { value: 'About helpwave', className: 'textstyle-title-lg' },
+    description: {
+      value: 'Regulatory burdens and high barriers to entry make it difficult for small companies to enter the market,' +
+          ' leading to a lack of competition. helpwave is here to change that. We offer a platform that brings everyone to' +
+        ' the table, not just the big companies.',
+      className: '!text-gray-200'
+    },
+    url: 'https://helpwave.de/favicon.ico',
+    imageLocation: 'prefix',
+    imageSize: { width: 100, height: 100 },
+    imageClassName: 'filter invert',
+    className: '!py-4 !px-6 !gap-x-6 bg-sky-900 text-white rounded-2xl min-h-[200px]'
+  },
+}

package/stories/other/BreadCrumbs.stories.tsx

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { BreadCrumb } from '../../components/BreadCrumb'
+
+const meta = {
+  title: 'Other/BreadCrumb',
+  component: BreadCrumb,
+} satisfies Meta<typeof BreadCrumb>
+
+export default meta
+type Story = StoryObj<typeof meta>;
+
+export const BreadCrumbVariation: Story = {
+  args: {
+    crumbs: [
+      { display: 'Organization', link: '' },
+      { display: 'Ward', link: '' },
+      { display: 'Bed', link: '' },
+      { display: 'Patient', link: '' },
+    ]
+  },
+}

package/stories/other/HelpwaveBadge.stories.tsx

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { HelpwaveBadge } from '../../components/HelpwaveBadge'
+
+const meta = {
+  title: 'Other/HelpwaveBadge',
+  component: HelpwaveBadge,
+} satisfies Meta<typeof HelpwaveBadge>
+
+export default meta
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {
+  args: {
+    size: 'small',
+    title: 'helpwave',
+    className: ''
+  },
+}