@helpwave/hightide 0.0.4 → 0.0.5

package/package.json

@@ -7,7 +7,7 @@
     "url": "git+https://github.com/helpwave/hightide.git"
   },
   "license": "MPL-2.0",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "main": "index.ts",
   "type": "module",
   "scripts": {
@@ -15,6 +15,14 @@
     "build-storybook": "storybook build",
     "lint": "tsc --noEmit && eslint ."
   },
+  "files": [
+    "index.ts",
+    "globals.css",
+    "coloring/",
+    "components/",
+    "hooks/",
+    "util/"
+  ],
   "dependencies": {
     "@headlessui/react": "1.7.19",
     "@radix-ui/react-checkbox": "1.1.3",

package/.storybook/main.ts

@@ -1,24 +0,0 @@
-// .storybook/main.ts
-import type { StorybookConfig } from '@storybook/nextjs'
-
-const config: StorybookConfig = {
-  stories: ['../stories/**/*.stories.@(js|jsx|ts|tsx)'],
-  addons: [
-    '@storybook/addon-links',
-    '@storybook/addon-essentials',
-    '@storybook/addon-interactions',
-  ],
-  framework: {
-    name: '@storybook/nextjs',
-    options: {},
-  },
-  docs: {},
-  typescript: {
-    reactDocgen: 'react-docgen-typescript'
-  },
-  core: {
-    disableTelemetry: true,
-  },
-}
-
-export default config

package/.storybook/preview.tsx

@@ -1,67 +0,0 @@
-import type { Preview } from '@storybook/react'
-import { ProvideLanguage } from '../hooks/useLanguage'
-import { ModalRegister } from '../components/modals/ModalRegister'
-import { modalRootName } from '../components/modals/Modal'
-import '../globals.css'
-import type { ThemeType } from '../hooks/useTheme'
-import { ThemeProvider } from '../hooks/useTheme'
-
-const colorToHex: Record<ThemeType, string> = {
-  dark: '#1A1A1A',
-  light: '#EEE',
-}
-
-const colorToHexReverse: Record<string, ThemeType> = {
-  '#1A1A1A': 'dark',
-  '#EEE': 'light',
-  'transparent': 'light',
-}
-
-const preview: Preview = {
-  parameters: {
-    backgrounds: {
-      values: [
-        { name: 'Dark', value: colorToHex.dark },
-        { name: 'Light', value: colorToHex.light },
-      ],
-      default: 'Light',
-    },
-  },
-  globalTypes: {
-    language: {
-      name: 'Language',
-      description: 'Component Language',
-      defaultValue: 'en',
-      toolbar: {
-        icon: 'globe',
-        items: [
-          { value: 'en', title: 'English' },
-          { value: 'de', title: 'German' },
-        ],
-      },
-    },
-  },
-  decorators: [
-    (Story, context) => {
-      const App = Story
-      const theme = colorToHexReverse[context.globals.backgrounds?.value ?? colorToHex.light]
-      const language = context.globals.language
-
-      return (
-        <main data-theme={theme}>
-          <ThemeProvider initialTheme={theme}>
-            <ProvideLanguage initialLanguage={language}>
-              <ModalRegister>
-                <div id={modalRootName}>
-                  <App />
-                </div>
-              </ModalRegister>
-            </ProvideLanguage>
-          </ThemeProvider>
-        </main>
-      )
-    },
-  ],
-}
-
-export default preview

package/eslint.config.js

@@ -1,3 +0,0 @@
-import config from '@helpwave/eslint-config'
-
-export default config.recommended

package/postcss.config.mjs

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

package/stories/README.md

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,18 +0,0 @@
-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: ''
-  },
-}

package/stories/other/HelpwaveSpinner.stories.tsx

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

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

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

@@ -1,21 +0,0 @@
-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: {},
-  },
-}