@helpwave/hightide 0.0.1

package/stories/other/HelpwaveSpinner.stories.tsx

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Helpwave } from '../../components/icons/Helpwave'
+
+const meta = {
+  title: 'Other/Spinner',
+  component: Helpwave,
+} satisfies Meta<typeof Helpwave>
+
+export default meta
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {
+  args: {
+    color: 'currentColor',
+    animate: 'loading',
+    width: 128,
+    height: 128,
+  },
+}

package/stories/other/MarkdownInterpreter.stories.tsx

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { MarkdownInterpreter } from '../../components/MarkdownInterpreter'
+
+const meta = {
+  title: 'Other/MarkdownInterpreter',
+  component: MarkdownInterpreter,
+} satisfies Meta<typeof MarkdownInterpreter>
+
+export default meta
+type Story = StoryObj<typeof meta>;
+
+export const MarkdownInterpreterVariation: Story = {
+  args: {
+    text: '\\helpwave \\i{italic} \\{Escape\\} \\\\ \\b{bold} \\u{underline} ' +
+      '\\space{space-grotesk} \\newline Newline \\positive{positive} \\negative{negative} \\warn{warn} ' +
+      '\\primary{primary} \\b{\\i{\\u{bold and italic and underlined \\primary{also primary}}}}',
+  },
+}

package/stories/other/Profile.stories.tsx

@@ -0,0 +1,52 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Profile } from '../../components/Profile'
+import { Helpwave } from '../../components/icons/Helpwave'
+import { MarkdownInterpreter } from '../../components/MarkdownInterpreter'
+import { Chip } from '../../components/ChipList'
+
+const meta = {
+  title: 'Other/Profile',
+  component: Profile,
+} satisfies Meta<typeof Profile>
+
+export default meta
+type Story = StoryObj<typeof meta>;
+
+export const ProfileVariation: Story = {
+  render: (args) => {
+    return (<Profile {...args}/>)
+  },
+  args: {
+    name: 'helpwave Member',
+    role: 'Chief Executive Officer',
+    roleBadge: 'CEO',
+    imageUrl: 'https://cdn.helpwave.de/boringavatar.svg',
+    badge: (
+      <Chip className="row gap-x-2 items-center justify-center" color="dark">
+        <Helpwave size={24}/>
+        <MarkdownInterpreter text={'\\helpwave'}/>
+      </Chip>
+    ),
+    tags: ['development', 'frontend', 'cloud', 'backend'],
+    info: 'This is an additional Information Text.',
+    socials: [
+      {
+        type: 'github',
+        url: 'https://github.com',
+      },
+      {
+        type: 'mail',
+        url: 'mailto:mail@helpwave.de',
+      },
+      {
+        type: 'linkedin',
+        url: 'https://www.linkedin.com/',
+      },
+      {
+        type: 'website',
+        url: 'https://helpwave.de',
+      },
+    ],
+    imageClassName: 'w-[200px] h-[200px]'
+  },
+}

package/stories/other/SearchableList.stories.tsx

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { SearchableList } from '../../components/SearchableList'
+
+const meta = {
+  title: 'Other/SearchableList',
+  component: SearchableList<string>,
+} satisfies Meta<typeof SearchableList<string>>
+
+export default meta
+type Story = StoryObj<typeof meta>;
+
+export const SearchableListVariation: Story = {
+  args: {
+    list: ['Apple', 'Banana', 'Pineapple', 'Pear', 'Strawberry', 'Raspberry', 'Wildberry'],
+    initialSearch: '',
+    searchMapping: value => [value],
+    itemMapper: value => <span>{value}</span>,
+    className: '',
+    overwriteTranslation: {},
+  },
+}

package/stories/other/StackingModals.stories.tsx

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { StackingModals } from '../../components/examples/StackingModals'
+
+const meta: Meta = {
+  title: 'Other/StackingModals',
+  component: StackingModals,
+}
+
+export default meta
+type Story = StoryObj<typeof meta>;
+
+export const StackingModalsStory: Story = {
+  render: () => <StackingModals />,
+  args: {
+  }
+}

package/stories/other/TechRadar.stories.tsx

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { TechRadar } from '../../components/TechRadar'
+
+const meta = {
+  title: 'Other/TechRadar',
+  component: TechRadar,
+} satisfies Meta<typeof TechRadar>
+
+export default meta
+type Story = StoryObj<typeof meta>;
+
+export const TechRadarStory: Story = {
+  render: () => <TechRadar />,
+}

package/stories/other/Translation.stories.tsx

@@ -0,0 +1,56 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import type { Languages } from '../../hooks/useLanguage'
+import type { PropsForTranslation } from '../../hooks/useTranslation'
+import { useTranslation } from '../../hooks/useTranslation'
+
+type TranslationExampleTranslation = {
+  welcome: string,
+  goodToSeeYou: string,
+  page: (page: number) => string,
+}
+
+const defaultTranslationExampleTranslations: Record<Languages, TranslationExampleTranslation> = {
+  en: {
+    welcome: 'Welcome',
+    goodToSeeYou: 'Good to see you',
+    page: (page) => `Page ${page}`
+  },
+  de: {
+    welcome: 'Willkommen',
+    goodToSeeYou: 'Schön dich zu sehen',
+    page: (page) => `Seite ${page}`
+  }
+}
+
+type TranslationExampleProps = {
+  name: string,
+}
+
+/**
+ * Simple TranslationExample component to demonstrate some translations
+ */
+const TranslationExample = ({ overwriteTranslation, name }:PropsForTranslation<TranslationExampleTranslation, TranslationExampleProps>) => {
+  const translation = useTranslation(defaultTranslationExampleTranslations, overwriteTranslation)
+  return (
+    <p className="rounded bg-surface text-on-surface p-1 px-2">
+      {translation.welcome}{'! '}
+      {translation.goodToSeeYou}{', '}
+      <span className="text-primary">{name}</span>{'. '}
+      {translation.page(123)}
+    </p>
+  )
+}
+
+const meta = {
+  title: 'Other/Translation',
+  component: TranslationExample,
+} satisfies Meta<typeof TranslationExample>
+
+export default meta
+type Story = StoryObj<typeof meta>;
+
+export const TranslationStory: Story = {
+  args: {
+    name: 'Name'
+  }
+}

package/stories/other/VerticalDivider.stories.tsx

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { VerticalDivider } from '../../components/VerticalDivider'
+
+const meta = {
+  title: 'Other/VerticalDivider',
+  component: VerticalDivider,
+} satisfies Meta<typeof VerticalDivider>
+
+export default meta
+type Story = StoryObj<typeof meta>;
+
+export const VerticalDividerBasic: Story = {
+  args: {
+    width: 1,
+    height: 100,
+    strokeWidth: 4,
+    dashLength: 6,
+    dashGap: 6,
+  },
+}

package/stories/other/avatar/Avatar.stories.tsx

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Avatar } from '../../../components/Avatar'
+
+const meta = {
+  title: 'Other/Avatar',
+  component: Avatar,
+} satisfies Meta<typeof Avatar>
+
+export default meta
+type Story = StoryObj<typeof meta>;
+
+export const AvatarVariation: Story = {
+  args: {
+    alt: 'altText',
+    avatarUrl: 'https://helpwave.de/favicon.ico',
+    size: 'small',
+    className: ''
+  },
+}

package/stories/other/avatar/AvatarGroup.stories.tsx

@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { AvatarGroup } from '../../../components/AvatarGroup'
+
+const meta = {
+  title: 'Other/Avatar',
+  component: AvatarGroup,
+} satisfies Meta<typeof AvatarGroup>
+
+export default meta
+type Story = StoryObj<typeof meta>;
+
+export const AvatarGroupVariation: Story = {
+  args: {
+    avatars: [
+      { alt: 'altText', avatarUrl: 'https://helpwave.de/favicon.ico' },
+      { alt: 'altText', avatarUrl: 'https://helpwave.de/favicon.ico' },
+      { alt: 'altText', avatarUrl: 'https://helpwave.de/favicon.ico' },
+      { alt: 'altText', avatarUrl: 'https://helpwave.de/favicon.ico' },
+      { alt: 'altText', avatarUrl: 'https://helpwave.de/favicon.ico' },
+      { alt: 'altText', avatarUrl: 'https://helpwave.de/favicon.ico' },
+      { alt: 'altText', avatarUrl: 'https://helpwave.de/favicon.ico' },
+    ],
+    maxShownProfiles: 5,
+    size: 'tiny'
+  },
+}

package/stories/other/tooltip/Tooltip.stories.tsx

@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import type { TooltipProps } from '../../../components/Tooltip'
+import { Tooltip } from '../../../components/Tooltip'
+
+type TooltipExampleProps = Omit<TooltipProps, 'children' | 'tooltip'> & { tooltipText: string }
+
+const TooltipExample = ({ tooltipText, ...props } : TooltipExampleProps) => {
+  return (
+    <Tooltip tooltip={tooltipText} {...props}><span className="bg-primary text-white px-2 py-1 rounded-lg">Hover over me</span></Tooltip>
+  )
+}
+
+const meta = {
+  title: 'Other/Tooltip',
+  component: TooltipExample,
+} satisfies Meta<typeof TooltipExample>
+
+export default meta
+type Story = StoryObj<typeof meta>;
+
+export const TooltipExampleStory: Story = {
+  args: {
+    tooltipText: 'Tooltip',
+    animationDelay: 700,
+    position: 'bottom',
+    zIndex: 10,
+    containerClassName: '',
+    tooltipClassName: ''
+  },
+}

package/stories/other/tooltip/TooltipStack.stories.tsx

@@ -0,0 +1,39 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import type { TooltipProps } from '../../../components/Tooltip'
+import { Tooltip } from '../../../components/Tooltip'
+
+type TooltipStackExampleProps = Omit<TooltipProps, 'children' | 'tooltip'>
+
+const TooltipStackExample = ({ ...props }: TooltipStackExampleProps) => {
+  return (
+    <Tooltip tooltip={(
+      <Tooltip zIndex={11} tooltip={(
+        <span>Try to hover <Tooltip tooltip="Great right?" zIndex={12}>
+          <span className="font-bold underline">here</span>
+        </Tooltip></span>
+      )}>This is a Text on which you can hover to show
+        another Tooltip
+      </Tooltip>
+    )} {...props}>
+      <span className="bg-primary text-white px-2 py-1 rounded-lg">Hover over me</span>
+    </Tooltip>
+  )
+}
+
+const meta = {
+  title: 'Other/Tooltip',
+  component: TooltipStackExample,
+} satisfies Meta<typeof TooltipStackExample>
+
+export default meta
+type Story = StoryObj<typeof meta>;
+
+export const TooltipStackExampleStory: Story = {
+  args: {
+    animationDelay: 700,
+    position: 'right',
+    zIndex: 10,
+    containerClassName: '',
+    tooltipClassName: ''
+  },
+}

package/stories/user-action/button/LoadingButton.stories.tsx

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { LoadingButton } from '../../../components/LoadingButton'
+
+const meta = {
+  title: 'User-Action/Button',
+  component: LoadingButton,
+} satisfies Meta<typeof LoadingButton>
+
+export default meta
+type Story = StoryObj<typeof meta>;
+
+export const LoadingButtonVariation: Story = {
+  args: {
+    children: 'Modify my `isLoading` properties',
+    color: 'primary',
+    size: 'medium',
+    disabled: false,
+    className: 'rounded',
+    isLoading: false,
+  },
+}

package/stories/user-action/button/OutlineButton.stories.tsx

@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { OutlineButton } from '../../../components/Button'
+import { action } from '@storybook/addon-actions'
+
+const meta = {
+  title: 'User-Action/Button',
+  component: OutlineButton,
+} satisfies Meta<typeof OutlineButton>
+
+export default meta
+type Story = StoryObj<typeof meta>;
+
+export const OutlineButtonVariation: Story = {
+  args: {
+    children: 'Test',
+    color: 'primary',
+    size: 'medium',
+    disabled: false,
+    className: 'rounded',
+    onClick: action('Clicked'),
+  },
+}

package/stories/user-action/button/SolidButton.stories.tsx

@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { SolidButton } from '../../../components/Button'
+import { action } from '@storybook/addon-actions'
+
+const meta = {
+  title: 'User-Action/Button',
+  component: SolidButton,
+} satisfies Meta<typeof SolidButton>
+
+export default meta
+type Story = StoryObj<typeof meta>;
+
+export const SolidButtonVariation: Story = {
+  args: {
+    children: 'Test',
+    color: 'primary',
+    size: 'medium',
+    disabled: false,
+    className: 'rounded',
+    onClick: action('Clicked'),
+  },
+}

package/stories/user-action/button/TextButton.stories.tsx

@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { TextButton } from '../../../components/Button'
+import { action } from '@storybook/addon-actions'
+
+const meta = {
+  title: 'User-Action/Button',
+  component: TextButton,
+} satisfies Meta<typeof TextButton>
+
+export default meta
+type Story = StoryObj<typeof meta>;
+
+export const TextButtonVariation: Story = {
+  args: {
+    children: 'Test',
+    color: 'negative',
+    size: 'medium',
+    disabled: false,
+    className: 'rounded',
+    onClick: action('Clicked'),
+  },
+}

package/stories/user-action/input/Checkbox.stories.tsx

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { UncontrolledCheckbox } from '../../../components/user-input/Checkbox'
+
+const meta = {
+  title: 'User-Action/Checkbox',
+  component: UncontrolledCheckbox,
+} satisfies Meta<typeof UncontrolledCheckbox>
+
+export default meta
+type Story = StoryObj<typeof meta>;
+
+export const CheckboxVariation: Story = {
+  args: {
+    defaultValue: true,
+    disabled: false,
+    id: 'checkbox1',
+    size: 'medium',
+    label: { name: 'Click me ^^', labelType: 'labelMedium', className: '' },
+  },
+}

package/stories/user-action/input/Label.stories.tsx

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Label } from '../../../components/user-input/Label'
+
+const meta = {
+  title: 'User-Action/Input',
+  component: Label,
+} satisfies Meta<typeof Label>
+
+export default meta
+type Story = StoryObj<typeof meta>;
+
+export const LabelVariation: Story = {
+  args: {
+    name: 'LabelText',
+    labelType: 'labelMedium',
+    className: '',
+  },
+}

package/stories/user-action/input/ScrollPicker.stories.tsx

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { ScrollPicker } from '../../../components/user-input/ScrollPicker'
+import { range } from '../../../util/array'
+
+const meta = {
+  title: 'User-Action/Input/ScrollPicker',
+  component: ScrollPicker<number>,
+} satisfies Meta<typeof ScrollPicker<number>>
+
+export default meta
+type Story = StoryObj<typeof meta>;
+
+export const ChipVariation: Story = {
+  args: {
+    options: range(0, 59),
+    mapping: (value) => value.toString(),
+    selected: 55,
+    disabled: false
+  },
+}

package/stories/user-action/input/Textarea.stories.tsx

@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { TextareaExample } from '../../../components/examples/TextareaExample'
+
+const meta = {
+  title: 'User-Action/Input',
+  component: TextareaExample,
+} satisfies Meta<typeof TextareaExample>
+
+export default meta
+type Story = StoryObj<typeof meta>;
+
+export const TextareaVariation: Story = {
+  args: {
+    value: 'Text',
+    label: { name: 'Label' },
+    id: 'text',
+    headline: '',
+    disclaimer: '',
+    resizable: false,
+    className: '',
+  },
+}

package/stories/user-action/input/date/DatePicker.stories.tsx

@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { addDuration, subtractDuration } from '../../../../util/date'
+import { ControlledDatePicker } from '../../../../components/date/DatePicker'
+
+const meta = {
+  title: 'User-Action/Input/Date',
+  component: ControlledDatePicker,
+} satisfies Meta<typeof ControlledDatePicker>
+
+export default meta
+type Story = StoryObj<typeof meta>;
+
+export const DatePickerVariation: Story = {
+  args: {
+    value: new Date(),
+    start: subtractDuration(new Date(), { years: 50 }),
+    end: addDuration(new Date(), { years: 50 }),
+    initialDisplay: 'day',
+    className: '',
+    yearMonthPickerProps: {},
+    dayPickerProps: {},
+  },
+}

package/stories/user-action/input/date/DateTimePicker.stories.tsx

@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { DateTimePickerExample } from '../../../../components/examples/date/DateTimePickerExample'
+import { addDuration, subtractDuration } from '../../../../util/date'
+
+const meta = {
+  title: 'User-Action/Input/Date',
+  component: DateTimePickerExample,
+} satisfies Meta<typeof DateTimePickerExample>
+
+export default meta
+type Story = StoryObj<typeof meta>;
+
+export const DateTimePickerVariation: Story = {
+  args: {
+    mode: 'dateTime',
+    value: new Date(),
+    start: subtractDuration(new Date(), { years: 50 }),
+    end: addDuration(new Date(), { years: 50 }),
+    is24HourFormat: true,
+    minuteIncrement: '5min',
+    weekStart: 'monday',
+    initialDisplay: 'day',
+    markToday: true,
+    showValueOpen: false,
+  },
+}

package/stories/user-action/input/date/DayPicker.stories.tsx

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { DayPickerControlled } from '../../../../components/date/DayPicker'
+
+const meta = {
+  title: 'User-Action/Input/Date',
+  component: DayPickerControlled,
+} satisfies Meta<typeof DayPickerControlled>
+
+export default meta
+type Story = StoryObj<typeof meta>;
+
+export const DayPickerVariation: Story = {
+  args: {
+    displayedMonth: new Date(),
+    selected: new Date(),
+    markToday: true,
+    weekStart: 'monday',
+    className: 'h-max-[300px]'
+  },
+}

package/stories/user-action/input/date/TimePicker.stories.tsx

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { ControlledTimePicker } from '../../../../components/date/TimePicker'
+
+const meta = {
+  title: 'User-Action/Input/Date',
+  component: ControlledTimePicker,
+} satisfies Meta<typeof ControlledTimePicker>
+
+export default meta
+type Story = StoryObj<typeof meta>;
+
+export const TimePickerVariation: Story = {
+  args: {
+    time: new Date(),
+    is24HourFormat: true,
+    minuteIncrement: '5min',
+    maxHeight: 300,
+    className: ''
+  },
+}

package/stories/user-action/input/date/YearMonthPicker.stories.tsx

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { addDuration, subtractDuration } from '../../../../util/date'
+import { ControlledYearMonthPicker } from '../../../../components/date/YearMonthPicker'
+
+const meta = {
+  title: 'User-Action/Input/Date',
+  component: ControlledYearMonthPicker,
+} satisfies Meta<typeof ControlledYearMonthPicker>
+
+export default meta
+type Story = StoryObj<typeof meta>;
+
+export const YearMonthPickerVariation: Story = {
+  args: {
+    start: subtractDuration(new Date(), { years: 50 }),
+    end: addDuration(new Date(), { years: 50 }),
+    className: 'max-w-[200px]',
+    maxHeight: 300,
+    showValueOpen: false
+  },
+}