@helpwave/hightide 0.0.9 → 0.0.12

package/dist/util/easeFunctions.d.ts

@@ -0,0 +1,9 @@
+export type EaseFunction = (t: number) => number;
+export declare class EaseFunctions {
+    static cubicBezierGeneric(x1: number, y1: number, x2: number, y2: number): {
+        x: EaseFunction;
+        y: EaseFunction;
+    };
+    static cubicBezier(x1: number, y1: number, x2: number, y2: number): EaseFunction;
+    static easeInEaseOut(t: number): number;
+}

package/dist/util/easeFunctions.js

@@ -0,0 +1,30 @@
+import { clamp } from './math';
+export class EaseFunctions {
+    static cubicBezierGeneric(x1, y1, x2, y2) {
+        // Calculate the x and y coordinates using the cubic Bézier formula
+        const cx = 3 * x1;
+        const bx = 3 * (x2 - x1) - cx;
+        const ax = 1 - cx - bx;
+        const cy = 3 * y1;
+        const by = 3 * (y2 - y1) - cy;
+        const ay = 1 - cy - by;
+        // Compute x and y values at parameter t
+        const x = (t) => ((ax * t + bx) * t + cx) * t;
+        const y = (t) => ((ay * t + by) * t + cy) * t;
+        return {
+            x,
+            y
+        };
+    }
+    static cubicBezier(x1, y1, x2, y2) {
+        const { y } = EaseFunctions.cubicBezierGeneric(x1, y1, x2, y2);
+        return (t) => {
+            t = clamp(t);
+            return y(t); // <= equal to x(t) * 0 + y(t) * 1
+        };
+    }
+    static easeInEaseOut(t) {
+        return EaseFunctions.cubicBezier(0.65, 0, 0.35, 1)(t);
+    }
+    ;
+}

package/dist/util/emailValidation.d.ts

@@ -0,0 +1 @@
+export declare const validateEmail: (email: string) => boolean;

package/dist/util/emailValidation.js

@@ -0,0 +1,3 @@
+export const validateEmail = (email) => {
+    return /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(email);
+};

package/dist/util/loopingArray.d.ts

@@ -0,0 +1,23 @@
+/**
+ *  1 is forwards
+ *
+ * -1 is backwards
+ */
+export type Direction = 1 | -1;
+export declare class LoopingArrayCalculator {
+    length: number;
+    isLooping: boolean;
+    allowedOverScroll: number;
+    constructor(length: number, isLooping?: boolean, allowedOverScroll?: number);
+    getCorrectedPosition(position: number): number;
+    static withoutOffset(position: number): number;
+    static getOffset(position: number): number;
+    /**
+     * @return absolute distance forwards or Infinity when the target cannot be reached (only possible when not isLooping)
+     */
+    getDistanceDirectional(position: number, target: number, direction: Direction): number;
+    getDistanceForward(position: number, target: number): number;
+    getDistanceBackward(position: number, target: number): number;
+    getDistance(position: number, target: number): number;
+    getBestDirection(position: number, target: number): Direction;
+}

package/dist/util/loopingArray.js

@@ -0,0 +1,67 @@
+export class LoopingArrayCalculator {
+    constructor(length, isLooping = true, allowedOverScroll = 0.1) {
+        if (allowedOverScroll < 0 || length < 1) {
+            throw new Error('Invalid parameters: allowedOverScroll >= 0 and length >= 1 must be true');
+        }
+        this.length = length;
+        this.isLooping = isLooping;
+        this.allowedOverScroll = allowedOverScroll;
+    }
+    getCorrectedPosition(position) {
+        if (!this.isLooping) {
+            return Math.max(-this.allowedOverScroll, Math.min(this.allowedOverScroll + this.length - 1, position));
+        }
+        if (position >= this.length) {
+            return position % this.length;
+        }
+        if (position < 0) {
+            return this.length - (Math.abs(position) % this.length);
+        }
+        return position;
+    }
+    static withoutOffset(position) {
+        return position + LoopingArrayCalculator.getOffset(position);
+    }
+    static getOffset(position) {
+        return Math.round(position) - position; // For example: 45.5 => 46 - 45.5 = 0.5
+    }
+    /**
+     * @return absolute distance forwards or Infinity when the target cannot be reached (only possible when not isLooping)
+     */
+    getDistanceDirectional(position, target, direction) {
+        if (!this.isLooping && (position < -this.allowedOverScroll || position > this.allowedOverScroll + this.length - 1)) {
+            throw new Error('Invalid parameters: position is out of bounds.');
+        }
+        const isForwardInvalid = (direction === 1 && position > target);
+        const isBackwardInvalid = (direction === -1 && target < position);
+        if (!this.isLooping && (isForwardInvalid || isBackwardInvalid)) {
+            return Infinity;
+        }
+        if (direction === -1) {
+            return this.getDistanceDirectional(target, position, 1);
+        }
+        position = this.getCorrectedPosition(position);
+        target = this.getCorrectedPosition(target);
+        let distance = (target - position) * direction;
+        if (distance < 0) {
+            distance = this.length - (Math.abs(position) % this.length) + target;
+        }
+        return distance;
+    }
+    getDistanceForward(position, target) {
+        return this.getDistanceDirectional(position, target, 1);
+    }
+    getDistanceBackward(position, target) {
+        return this.getDistanceDirectional(position, target, -1);
+    }
+    getDistance(position, target) {
+        const forwardDistance = this.getDistanceForward(position, target);
+        const backwardDistance = this.getDistanceBackward(position, target);
+        return Math.min(forwardDistance, backwardDistance);
+    }
+    getBestDirection(position, target) {
+        const forwardDistance = this.getDistanceForward(position, target);
+        const backwardDistance = this.getDistanceBackward(position, target);
+        return forwardDistance < backwardDistance ? 1 : -1;
+    }
+}

package/dist/util/math.d.ts

@@ -0,0 +1 @@
+export declare const clamp: (value: number, min?: number, max?: number) => number;

package/dist/util/math.js

@@ -0,0 +1,3 @@
+export const clamp = (value, min = 0, max = 1) => {
+    return Math.min(Math.max(value, min), max);
+};

package/dist/util/news.d.ts

@@ -0,0 +1,98 @@
+import { z } from 'zod';
+import type { Languages } from '../hooks/useLanguage';
+export type News = {
+    title: string;
+    date: Date;
+    description: (string | URL)[];
+    externalResource?: URL;
+    keys: string[];
+};
+export type LocalizedNews = Record<Languages, News[]>;
+export declare const newsSchema: z.ZodEffects<z.ZodObject<{
+    title: z.ZodString;
+    description: z.ZodString;
+    date: z.ZodString;
+    image: z.ZodOptional<z.ZodString>;
+    externalResource: z.ZodOptional<z.ZodString>;
+    keys: z.ZodArray<z.ZodString, "many">;
+}, "strip", z.ZodTypeAny, {
+    title: string;
+    date: string;
+    description: string;
+    keys: string[];
+    image?: string | undefined;
+    externalResource?: string | undefined;
+}, {
+    title: string;
+    date: string;
+    description: string;
+    keys: string[];
+    image?: string | undefined;
+    externalResource?: string | undefined;
+}>, News, {
+    title: string;
+    date: string;
+    description: string;
+    keys: string[];
+    image?: string | undefined;
+    externalResource?: string | undefined;
+}>;
+export declare const newsListSchema: z.ZodArray<z.ZodEffects<z.ZodObject<{
+    title: z.ZodString;
+    description: z.ZodString;
+    date: z.ZodString;
+    image: z.ZodOptional<z.ZodString>;
+    externalResource: z.ZodOptional<z.ZodString>;
+    keys: z.ZodArray<z.ZodString, "many">;
+}, "strip", z.ZodTypeAny, {
+    title: string;
+    date: string;
+    description: string;
+    keys: string[];
+    image?: string | undefined;
+    externalResource?: string | undefined;
+}, {
+    title: string;
+    date: string;
+    description: string;
+    keys: string[];
+    image?: string | undefined;
+    externalResource?: string | undefined;
+}>, News, {
+    title: string;
+    date: string;
+    description: string;
+    keys: string[];
+    image?: string | undefined;
+    externalResource?: string | undefined;
+}>, "many">;
+export declare const localizedNewsSchema: z.ZodRecord<z.ZodEnum<["en", "de"]>, z.ZodArray<z.ZodEffects<z.ZodObject<{
+    title: z.ZodString;
+    description: z.ZodString;
+    date: z.ZodString;
+    image: z.ZodOptional<z.ZodString>;
+    externalResource: z.ZodOptional<z.ZodString>;
+    keys: z.ZodArray<z.ZodString, "many">;
+}, "strip", z.ZodTypeAny, {
+    title: string;
+    date: string;
+    description: string;
+    keys: string[];
+    image?: string | undefined;
+    externalResource?: string | undefined;
+}, {
+    title: string;
+    date: string;
+    description: string;
+    keys: string[];
+    image?: string | undefined;
+    externalResource?: string | undefined;
+}>, News, {
+    title: string;
+    date: string;
+    description: string;
+    keys: string[];
+    image?: string | undefined;
+    externalResource?: string | undefined;
+}>, "many">>;
+export declare const filterNews: (localizedNews: News[], requiredKeys: string[]) => News[];

package/dist/util/news.js

@@ -0,0 +1,27 @@
+import { z } from 'zod';
+import { languages } from '../hooks/useLanguage';
+export const newsSchema = z.object({
+    title: z.string(),
+    description: z.string(),
+    date: z.string(),
+    image: z.string().url().optional(),
+    externalResource: z.string().url().optional(),
+    keys: z.array(z.string())
+}).transform((obj) => {
+    let description = [obj.description];
+    if (obj.image) {
+        description = [new URL(obj.image), ...description];
+    }
+    return {
+        title: obj.title,
+        date: new Date(obj.date),
+        description,
+        externalResource: obj.externalResource ? new URL(obj.externalResource) : undefined,
+        keys: obj.keys
+    };
+});
+export const newsListSchema = z.array(newsSchema);
+export const localizedNewsSchema = z.record(z.enum(languages), newsListSchema);
+export const filterNews = (localizedNews, requiredKeys) => {
+    return localizedNews.filter(news => requiredKeys.every(value => news.keys.includes(value)));
+};

package/dist/util/noop.d.ts

@@ -0,0 +1 @@
+export declare const noop: () => undefined;

package/dist/util/noop.js

@@ -0,0 +1 @@
+export const noop = () => undefined;

package/{util/simpleSearch.ts → dist/util/simpleSearch.d.ts}

@@ -10,13 +10,7 @@
  *
  *  @return The list of objects that match all search strings
  */
-export const MultiSubjectSearchWithMapping = <T>(search: string[], objects: T[], mapping: (value:T) => (string| undefined)[]) => {
-  return objects.filter(object => {
-    const mappedSearchKeywords = mapping(object).map(value => value ? value.toLowerCase().trim() : undefined)
-    return search.every(searchValue => !!mappedSearchKeywords.find(value => !!value && value.includes(searchValue.toLowerCase().trim())))
-  })
-}
-
+export declare const MultiSubjectSearchWithMapping: <T>(search: string[], objects: T[], mapping: (value: T) => (string | undefined)[]) => T[];
 /**
  *  Finds all values matching the search value by first mapping the values to a string array and then checking each entry for matches.
  *  Returns the list of all matches.
@@ -29,13 +23,7 @@ export const MultiSubjectSearchWithMapping = <T>(search: string[], objects: T[],
  *
  *  @return The list of objects that match the search string
  */
-export const MultiSearchWithMapping = <T>(search: string, objects: T[], mapping: (value:T) => string[]) => {
-  return objects.filter(object => {
-    const mappedSearchKeywords = mapping(object).map(value => value.toLowerCase().trim())
-    return !!mappedSearchKeywords.find(value => value.includes(search.toLowerCase().trim()))
-  })
-}
-
+export declare const MultiSearchWithMapping: <T>(search: string, objects: T[], mapping: (value: T) => string[]) => T[];
 /**
  *  Finds all values matching the search value by first mapping the values to a string and returns the list of all matches.
  *
@@ -47,10 +35,7 @@ export const MultiSearchWithMapping = <T>(search: string, objects: T[], mapping:
  *
  *  @return The list of objects that match the search string
  */
-export const SimpleSearchWithMapping = <T>(search: string, objects: T[], mapping: (value:T) => string) => {
-  return MultiSearchWithMapping(search, objects, value => [mapping(value)])
-}
-
+export declare const SimpleSearchWithMapping: <T>(search: string, objects: T[], mapping: (value: T) => string) => T[];
 /**
  *  Finds all values matching the search value and returns the list of all matches.
  *
@@ -60,6 +45,4 @@ export const SimpleSearchWithMapping = <T>(search: string, objects: T[], mapping
  *
  *  @return The list of objects that match the search string
  */
-export const SimpleSearch = (search: string, objects: string[]) => {
-  return SimpleSearchWithMapping(search, objects, value => value)
-}
+export declare const SimpleSearch: (search: string, objects: string[]) => string[];

package/dist/util/simpleSearch.js

@@ -0,0 +1,62 @@
+/**
+ *  Finds all values matching the search values by first mapping the values to a string array and then checking each entry for matches.
+ *  Returns the list of all matches.
+ *
+ *  @param search The list of search strings e.g. `[name, type]`
+ *
+ *  @param objects The list of objects to be searched in
+ *
+ *  @param mapping The mapping of objects to the string properties they fulfil
+ *
+ *  @return The list of objects that match all search strings
+ */
+export const MultiSubjectSearchWithMapping = (search, objects, mapping) => {
+    return objects.filter(object => {
+        const mappedSearchKeywords = mapping(object).map(value => value ? value.toLowerCase().trim() : undefined);
+        return search.every(searchValue => !!mappedSearchKeywords.find(value => !!value && value.includes(searchValue.toLowerCase().trim())));
+    });
+};
+/**
+ *  Finds all values matching the search value by first mapping the values to a string array and then checking each entry for matches.
+ *  Returns the list of all matches.
+ *
+ *  @param search The search string e.g `name`
+ *
+ *  @param objects The list of objects to be searched in
+ *
+ *  @param mapping The mapping of objects to the string properties they fulfil
+ *
+ *  @return The list of objects that match the search string
+ */
+export const MultiSearchWithMapping = (search, objects, mapping) => {
+    return objects.filter(object => {
+        const mappedSearchKeywords = mapping(object).map(value => value.toLowerCase().trim());
+        return !!mappedSearchKeywords.find(value => value.includes(search.toLowerCase().trim()));
+    });
+};
+/**
+ *  Finds all values matching the search value by first mapping the values to a string and returns the list of all matches.
+ *
+ *  @param search The search string e.g `name`
+ *
+ *  @param objects The list of objects to be searched in
+ *
+ *  @param mapping The mapping of objects to a string that is compared to the search
+ *
+ *  @return The list of objects that match the search string
+ */
+export const SimpleSearchWithMapping = (search, objects, mapping) => {
+    return MultiSearchWithMapping(search, objects, value => [mapping(value)]);
+};
+/**
+ *  Finds all values matching the search value and returns the list of all matches.
+ *
+ *  @param search The search string e.g `name`
+ *
+ *  @param objects The list of objects to be searched in
+ *
+ *  @return The list of objects that match the search string
+ */
+export const SimpleSearch = (search, objects) => {
+    return SimpleSearchWithMapping(search, objects, value => value);
+};

package/dist/util/storage.d.ts

@@ -0,0 +1,15 @@
+declare class StorageService {
+    private storage;
+    constructor(storage: Storage);
+    get<T>(key: string): T | null;
+    set<T>(key: string, value: T): void;
+    delete(key: string): void;
+    deleteAll(): void;
+}
+export declare class LocalStorageService extends StorageService {
+    constructor();
+}
+export declare class SessionStorageService extends StorageService {
+    constructor();
+}
+export {};

package/dist/util/storage.js

@@ -0,0 +1,32 @@
+class StorageService {
+    // this seems to be a bug in eslint as 'paramter-properties' is a special syntax of typescript
+    constructor(storage) {
+        this.storage = storage;
+    }
+    get(key) {
+        const value = this.storage.getItem(key);
+        if (value === null) {
+            return null;
+        }
+        return JSON.parse(value);
+    }
+    set(key, value) {
+        this.storage.setItem(key, JSON.stringify(value));
+    }
+    delete(key) {
+        this.storage.removeItem(key);
+    }
+    deleteAll() {
+        this.storage.clear();
+    }
+}
+export class LocalStorageService extends StorageService {
+    constructor() {
+        super(window.localStorage);
+    }
+}
+export class SessionStorageService extends StorageService {
+    constructor() {
+        super(window.sessionStorage);
+    }
+}

package/dist/util/types.d.ts

@@ -0,0 +1 @@
+export type NativeProps<NativeElement extends keyof React.ReactHTML, OmittedKeys extends string | number | symbol | undefined = undefined> = Omit<React.JSX.IntrinsicElements[NativeElement], OmittedKeys extends undefined ? 'ref' : 'ref' | OmittedKeys>;

package/dist/util/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -7,25 +7,24 @@
     "url": "git+https://github.com/helpwave/hightide.git"
   },
   "license": "MPL-2.0",
-  "version": "0.0.9",
-  "main": "index.ts",
+  "version": "0.0.12",
+  "main": "index.js",
   "type": "module",
   "scripts": {
+    "clean": "rm -rf dist",
+    "build-css": "npx @tailwindcss/cli -i ./src/css/globals.css -o ./dist/css/globals.css",
+    "build": "npm run clean && tsc && npm run build-css",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "lint": "tsc --noEmit && eslint ."
   },
   "files": [
-    "index.ts",
-    "globals.css",
-    "coloring/",
-    "components/",
-    "hooks/",
-    "util/"
+    "dist"
   ],
   "dependencies": {
     "@headlessui/react": "1.7.19",
     "@radix-ui/react-checkbox": "1.1.3",
+    "@tailwindcss/cli": "^4.1.7",
     "clsx": "^2.1.1",
     "lucide-react": "0.468.0",
     "prop-types": "15.8.1",

package/coloring/shading.ts

@@ -1,46 +0,0 @@
-import tinycolor from 'tinycolor2'
-import type { ShadedColors } from './types'
-import { shadingColorValues } from './types'
-
-// Function to generate a full shading of several colors
-export const generateShadingColors = (partialShading: Omit<Partial<ShadedColors>, '0' | '1000'>): ShadedColors => {
-  const shading: ShadedColors = {
-    0: '#FFFFFF',
-    1000: '#000000'
-  } as ShadedColors
-
-  let index = 1
-  while (index < shadingColorValues.length - 1) {
-    const previous = shadingColorValues[index - 1]!
-    const current = shadingColorValues[index]!
-
-    if (partialShading[current] !== undefined) {
-      shading[current] = partialShading[current]
-      index++
-      continue
-    }
-
-    let j: number = index + 1
-    while (j < shadingColorValues.length) {
-      if (partialShading[shadingColorValues[j]!] !== undefined) {
-        break
-      }
-      j++
-    }
-    if (j === shadingColorValues.length) {
-      j = shadingColorValues.length - 1
-    }
-
-    const nextFound = shadingColorValues[j]!
-    const interval = nextFound - previous
-    for (let k = index; k < j; k++) {
-      const current = shadingColorValues[k]!
-      const previousValue = partialShading[previous] ?? shading[previous]
-      const nextValue = partialShading[nextFound] ?? shading[nextFound]
-      shading[current] = tinycolor.mix(tinycolor(previousValue), tinycolor(nextValue), (current - previous) / interval * 100).toHexString()
-    }
-    index = j
-  }
-
-  return shading
-}

package/coloring/types.ts

@@ -1,13 +0,0 @@
-export const shadingColorValues = [0, 50, 100, 150, 200, 250, 300, 350, 400, 450, 500, 550, 600, 650, 700, 750, 800, 850, 900, 950, 1000] as const
-export type ColorShadingValue = typeof shadingColorValues[number]
-export type ShadedColors = Record<ColorShadingValue, string>
-
-export type ColoringStyle = 'background' | 'tonal' | 'tonal-opaque' | 'text' | 'text-border'
-export type ColorMode = 'light' | 'dark'
-
-export type Coloring = {
-  color: '',
-  style?: ColoringStyle,
-  mode?: ColorMode,
-  hover?: boolean,
-}

package/components/Avatar.tsx

@@ -1,58 +0,0 @@
-import Image from 'next/image'
-import clsx from 'clsx'
-
-export const avtarSizeList = ['tiny', 'small', 'medium', 'large'] as const
-export type AvatarSize = typeof avtarSizeList[number]
-export const avatarSizeMapping: Record<AvatarSize, number> = {
-  tiny: 24,
-  small: 32,
-  medium: 48,
-  large: 64
-}
-
-export type AvatarProps = {
-  avatarUrl: string,
-  alt: string,
-  size?: AvatarSize,
-  className?: string,
-}
-
-/**
- * A component for showing a profile picture
- */
-const Avatar = ({ avatarUrl, alt, size = 'medium', className = '' }: AvatarProps) => {
-  // TODO remove later
-  avatarUrl = 'https://cdn.helpwave.de/boringavatar.svg'
-
-  const avtarSize = {
-    tiny: 24,
-    small: 32,
-    medium: 48,
-    large: 64,
-  }[size]
-
-  const style = {
-    width: avtarSize + 'px',
-    height: avtarSize + 'px',
-    maxWidth: avtarSize + 'px',
-    maxHeight: avtarSize + 'px',
-    minWidth: avtarSize + 'px',
-    minHeight: avtarSize + 'px',
-  }
-
-  return (
-    // TODO transparent or white background later
-    <div className={clsx(`rounded-full bg-primary`, className)} style={style}>
-      <Image
-        className="rounded-full border border-gray-200"
-        style={style}
-        src={avatarUrl}
-        alt={alt}
-        width={avtarSize}
-        height={avtarSize}
-      />
-    </div>
-  )
-}
-
-export { Avatar }

package/components/AvatarGroup.tsx

@@ -1,48 +0,0 @@
-import type { AvatarProps, AvatarSize } from './Avatar'
-import { Avatar, avatarSizeMapping } from './Avatar'
-
-export type AvatarGroupProps = {
-  avatars: Omit<AvatarProps, 'size'>[],
-  maxShownProfiles?: number,
-  size?: AvatarSize,
-}
-
-/**
- * A component for showing a group of Avatar's
- */
-export const AvatarGroup = ({
-                              avatars,
-                              maxShownProfiles = 5,
-                              size = 'tiny'
-                            }: AvatarGroupProps) => {
-  const displayedProfiles = avatars.length < maxShownProfiles ? avatars : avatars.slice(0, maxShownProfiles)
-  const diameter = avatarSizeMapping[size]
-  const stackingOverlap = 0.5 // given as a percentage
-  const notDisplayedProfiles = avatars.length - maxShownProfiles
-  const avatarGroupWidth = diameter * (stackingOverlap * (displayedProfiles.length - 1) + 1)
-  return (
-    <div className="row relative" style={{ height: diameter + 'px' }}>
-      <div style={{ width: avatarGroupWidth + 'px' }}>
-        {displayedProfiles.map((avatar, index) => (
-          <div
-            key={index}
-            className="absolute"
-            style={{ left: (index * diameter * stackingOverlap) + 'px', zIndex: maxShownProfiles - index }}
-          >
-            <Avatar avatarUrl={avatar.avatarUrl} alt={avatar.alt} size={size}/>
-          </div>
-        ))}
-      </div>
-      {
-        notDisplayedProfiles > 0 && (
-          <div
-            className="truncate row items-center"
-            style={{ fontSize: (diameter / 2) + 'px', marginLeft: (1 + diameter / 16) + 'px' }}
-          >
-            <span>+ {notDisplayedProfiles}</span>
-          </div>
-        )
-      }
-    </div>
-  )
-}