@fortanix/baklava 1.0.0-beta-20241114

package/src/typography/Heading/Heading.tsx

@@ -0,0 +1,57 @@
+/* Copyright (c) Fortanix, Inc.
+|* This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0. If a copy of
+|* the MPL was not distributed with this file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import { classNames as cx, ComponentProps } from '../../util/componentUtil.ts';
+import * as React from 'react';
+
+import cl from './Heading.module.scss';
+
+
+export type H1Props = React.PropsWithChildren<ComponentProps<'h1'> & {
+  /** Whether this component should be unstyled. */
+  unstyled?: undefined | boolean,
+}>;
+export const H1 = ({ unstyled, ...props }: H1Props) => (
+  <h1 {...props} className={cx('bk', { [cl['bk-h1']]: !unstyled }, props.className)}/>
+);
+
+export type H2Props = React.PropsWithChildren<ComponentProps<'h2'> & {
+  /** Whether this component should be unstyled. */
+  unstyled?: undefined | boolean,
+}>;
+export const H2 = ({ unstyled, ...props }: H2Props) => (
+  <h2 {...props} className={cx('bk', { [cl['bk-h2']]: !unstyled }, props.className)}/>
+);
+
+export type H3Props = React.PropsWithChildren<ComponentProps<'h3'> & {
+  /** Whether this component should be unstyled. */
+  unstyled?: undefined | boolean,
+}>;
+export const H3 = ({ unstyled, ...props }: H3Props) => (
+  <h3 {...props} className={cx('bk', { [cl['bk-h3']]: !unstyled }, props.className)}/>
+);
+
+export type H4Props = React.PropsWithChildren<ComponentProps<'h4'> & {
+  /** Whether this component should be unstyled. */
+  unstyled?: undefined | boolean,
+}>;
+export const H4 = ({ unstyled, ...props }: H4Props) => (
+  <h4 {...props} className={cx('bk', { [cl['bk-h4']]: !unstyled }, props.className)}/>
+);
+
+export type H5Props = React.PropsWithChildren<ComponentProps<'h5'> & {
+  /** Whether this component should be unstyled. */
+  unstyled?: undefined | boolean,
+}>;
+export const H5 = ({ unstyled, ...props }: H5Props) => (
+  <h5 {...props} className={cx('bk', { [cl['bk-h5']]: !unstyled }, props.className)}/>
+);
+
+export type H6Props = React.PropsWithChildren<ComponentProps<'h6'> & {
+  /** Whether this component should be unstyled. */
+  unstyled?: undefined | boolean,
+}>;
+export const H6 = ({ unstyled, ...props }: H6Props) => (
+  <h6 {...props} className={cx('bk', { [cl['bk-h6']]: !unstyled }, props.className)}/>
+);

package/src/util/componentUtil.ts

@@ -0,0 +1,19 @@
+/* Copyright (c) Fortanix, Inc.
+|* This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0. If a copy of
+|* the MPL was not distributed with this file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+// Note: use the `dedupe` variant so that the consumer of a component can overwrite classes from the component using
+// `<MyComponent className={{ foo: false }}/>`
+import classNames from 'classnames/dedupe';
+import { type Argument as ClassNameArgument } from 'classnames';
+
+
+export { classNames, type ClassNameArgument };
+
+// Version of `React.ComponentPropsWithRef` that supports `classnames` syntax for the `className` attribute. So that
+// components can take class names not just of type string, but any valid classnames `Argument`, e.g.:
+//   `<MyComponent className={['example1', { example2: condition() }]}/>`
+export type ComponentProps<T extends React.ElementType> =
+  Omit<React.ComponentPropsWithRef<T>, 'className'> & {
+    className?: undefined | ClassNameArgument,
+  };

package/src/util/drag.ts

@@ -0,0 +1,197 @@
+/* Copyright (c) Fortanix, Inc.
+|* This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0. If a copy of
+|* the MPL was not distributed with this file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+/**
+ * Source: https://github.com/idanen/react-draggable
+ */
+
+import * as React from 'react';
+
+
+type Delta = { x: number, y: number };
+type Limits = { minX: number, maxX: number, minY: number, maxY: number };
+type CalcDeltaArgs = {
+  x: number,
+  y: number,
+  limits?: undefined | Limits,
+};
+const calcDelta = ({ x, y, limits }: CalcDeltaArgs) => {
+  if (!limits) {
+    return { x, y };
+  }
+  
+  const { minX, maxX, minY, maxY } = limits;
+  
+  return {
+    x: Math.min(Math.max(x, minX), maxX),
+    y: Math.min(Math.max(y, minY), maxY),
+  };
+};
+
+export type UseDraggableProps = {
+  controlStyle?: boolean,
+  viewport?: boolean,
+  rectLimits?: { left: number, right: number, top: number, bottom: number },
+};
+export type UseDraggableResult<T extends HTMLElement, H extends HTMLElement> = {
+  targetRef: React.Ref<T>,
+  handleRef: React.Ref<H>,
+  getTargetProps: () => Record<string, unknown>,
+  dragging: boolean,
+  delta: Delta,
+  resetState: () => void,
+};
+export const useDraggable = <T extends HTMLElement = HTMLElement, H extends HTMLElement = HTMLElement>(
+  props: UseDraggableProps,
+): UseDraggableResult<T, H> => {
+  const {
+    controlStyle = true,
+    viewport = false,
+    rectLimits,
+  } = props;
+  
+  const targetRef = React.useRef<T>(null);
+  const handleRef = React.useRef<H>(null);
+  const [dragging, setDragging] = React.useState<boolean>(false);
+  const [prev, setPrev] = React.useState({ x: 0, y: 0 });
+  const [delta, setDelta] = React.useState({ x: 0, y: 0 });
+  const initial = React.useRef({ x: 0, y: 0 });
+  const limits = React.useRef<undefined | Limits>(undefined);
+  
+  const stopDragging = React.useCallback((event: MouseEvent | TouchEvent) => {
+    event.preventDefault();
+    setDragging(false);
+    const newDelta = reposition(event);
+    setPrev(newDelta);
+    if (controlStyle && targetRef.current) {
+      targetRef.current.style.willChange = '';
+    }
+  }, [controlStyle]);
+  
+  const reposition = React.useCallback((event: MouseEvent | TouchEvent) => {
+    const source =
+      ('changedTouches' in event && event.changedTouches[0])
+      || ('touches' in event && event.touches[0])
+      || event;
+    const clientX = 'clientX' in source ? source.clientX : 0;
+    const clientY = 'clientY' in source ? source.clientY : 0;
+    const x = clientX - initial.current.x + prev.x;
+    const y = clientY - initial.current.y + prev.y;
+    
+    const newDelta = calcDelta({ x, y, limits: limits.current });
+    setDelta(newDelta);
+    
+    return newDelta;
+  }, [prev]);
+  
+  React.useEffect(() => {
+    const startDragging = (event: MouseEvent | TouchEvent): void => {
+      event.preventDefault();
+      setDragging(true);
+      const source = ('touches' in event && event.touches[0]) || event;
+      const clientX = 'clientX' in source ? source.clientX : 0;
+      const clientY = 'clientY' in source ? source.clientY : 0;
+      initial.current = { x: clientX, y: clientY };
+      
+      const target = targetRef.current;
+      if (!target) { return; }
+      
+      if (controlStyle) {
+        target.style.willChange = 'transform';
+      }
+      if (viewport || rectLimits) {
+        const {
+          left,
+          top,
+          width,
+          height
+        } = target.getBoundingClientRect();
+        
+        if (viewport) {
+          limits.current = {
+            minX: -left + delta.x,
+            maxX: window.innerWidth - width - left + delta.x,
+            minY: -top + delta.y,
+            maxY: window.innerHeight - height - top + delta.y
+          };
+        } else if (rectLimits) {
+          limits.current = {
+            minX: rectLimits.left - left + delta.x,
+            maxX: rectLimits.right - width - left + delta.x,
+            minY: rectLimits.top - top + delta.y,
+            maxY: rectLimits.bottom - height - top + delta.y
+          };
+        }
+      }
+    };
+    
+    const handle = handleRef.current || targetRef.current;
+    handle?.addEventListener('mousedown', startDragging);
+    handle?.addEventListener('touchstart', startDragging);
+    
+    return () => {
+      handle?.removeEventListener('mousedown', startDragging);
+      handle?.removeEventListener('touchstart', startDragging);
+    };
+  }, [controlStyle, viewport, delta, rectLimits]);
+  
+  React.useEffect(() => {
+    const handle = handleRef.current || targetRef.current;
+    if (dragging) {
+      document.addEventListener('mousemove', reposition, { passive: true });
+      document.addEventListener('touchmove', reposition, { passive: true });
+      document.addEventListener('mouseup', stopDragging);
+      document.addEventListener('touchend', stopDragging);
+    } else {
+      document.removeEventListener('mousemove', reposition);
+      document.removeEventListener('mouseup', stopDragging);
+      document.removeEventListener('touchmove', reposition);
+      document.removeEventListener('touchend', stopDragging);
+    }
+    
+    if (controlStyle && handle) {
+      handle.style.cursor = dragging ? 'grabbing' : 'grab';
+    }
+    
+    return () => {
+      if (controlStyle && handle) {
+        handle.style.cursor = '';
+      }
+      document.removeEventListener('mousemove', reposition);
+      document.removeEventListener('mouseup', stopDragging);
+      document.removeEventListener('touchmove', reposition);
+      document.removeEventListener('touchend', stopDragging);
+    };
+  }, [stopDragging, dragging, controlStyle, reposition]);
+  
+  React.useEffect(() => {
+    if (controlStyle && targetRef.current) {
+      targetRef.current.style.transform = `translate(${delta.x}px, ${delta.y}px)`;
+    }
+  }, [delta, controlStyle]);
+  
+  const getTargetProps = React.useCallback(
+    () => ({
+      'aria-grabbed': dragging || null,
+    }),
+    [dragging],
+  );
+  
+  const resetState = React.useCallback(() => {
+    setDelta({ x: 0, y: 0 });
+    setPrev({ x: 0, y: 0 });
+  }, []);
+  
+  return { targetRef, handleRef, getTargetProps, dragging, delta, resetState };
+};
+
+export type DraggableProps<T extends HTMLElement, H extends HTMLElement> = {
+  children: (result: UseDraggableResult<T, H>) => React.ReactNode,
+};
+export const Draggable = <T extends HTMLElement = HTMLElement, H extends HTMLElement = HTMLElement>({
+  children,
+  ...rest
+}: DraggableProps<T, H>) => {
+  return children(useDraggable(rest));
+};

package/src/util/reactUtil.ts

@@ -0,0 +1,40 @@
+/* Copyright (c) Fortanix, Inc.
+|* This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0. If a copy of
+|* the MPL was not distributed with this file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+/* Source: https://github.com/wojtekmaj/merge-refs/tree/main */
+
+import type * as React from 'react';
+
+/**
+ * A function that merges React refs into one.
+ * Supports both functions and ref objects created using createRef() and useRef().
+ *
+ * Usage:
+ * ```tsx
+ * <div ref={mergeRefs(ref1, ref2, ref3)} />
+ * ```
+ *
+ * @param {(React.Ref<T> | undefined)[]} inputRefs Array of refs
+ * @returns {React.Ref<T> | React.RefCallback<T>} Merged refs
+ */
+export const mergeRefs = <T>(
+  ...inputRefs: Array<undefined | React.Ref<T>>
+): React.Ref<T> | React.RefCallback<T> => {
+  const filteredInputRefs = inputRefs.filter(Boolean);
+  
+  if (filteredInputRefs.length <= 1) {
+    const firstRef = filteredInputRefs[0];
+    return firstRef || null;
+  }
+  
+  return (ref) => {
+    filteredInputRefs.forEach((inputRef) => {
+      if (typeof inputRef === 'function') {
+        inputRef(ref);
+      } else if (inputRef) {
+        (inputRef as React.MutableRefObject<T | null>).current = ref;
+      }
+    });
+  };
+};

package/src/util/storybook/OverflowTester.css

@@ -0,0 +1,13 @@
+/* Copyright (c) Fortanix, Inc.
+|* This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0. If a copy of
+|* the MPL was not distributed with this file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+@layer baklava.base {
+  .util-overflow-tester {
+    margin-block: var(--bk-sizing-3);
+    
+    summary {
+      cursor: pointer;
+    }
+  }
+}

package/src/util/storybook/OverflowTester.tsx

@@ -0,0 +1,30 @@
+/* Copyright (c) Fortanix, Inc.
+|* This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0. If a copy of
+|* the MPL was not distributed with this file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import * as React from 'react';
+
+import './OverflowTester.css';
+
+
+type OverflowTesterProps = {
+  lines?: number,
+  openDefault?: boolean,
+};
+export const OverflowTester = ({ lines = 50, openDefault = false }: OverflowTesterProps) => {
+  const ref = React.useRef<HTMLDetailsElement>(null);
+  React.useEffect(() => {
+    if (openDefault && ref.current) {
+      ref.current.open = true;
+    }
+  }, []);
+  
+  return (
+    <details ref={ref} className="util-overflow-tester">
+      <summary>Test overflow</summary>
+      {Array.from({ length: lines }).map((_, index) =>
+        <p key={index}>...</p>
+      )}
+    </details>
+  );
+};

package/src/util/time.ts

@@ -0,0 +1,12 @@
+/* Copyright (c) Fortanix, Inc.
+|* This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0. If a copy of
+|* the MPL was not distributed with this file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+export const delay = (timeMs: number) => {
+  return new Promise(resolve => setTimeout(resolve, timeMs));
+};
+
+export const timeout = (timeMs: number) => {
+  const message = `The action took too long to complete`;
+  return new Promise((_, reject) => setTimeout(reject, timeMs, new Error(message)));
+};

package/src/util/types.ts

@@ -0,0 +1,8 @@
+/* Copyright (c) Fortanix, Inc.
+|* This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0. If a copy of
+|* the MPL was not distributed with this file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+// https://stackoverflow.com/questions/39419170/how-do-i-check-that-a-switch-block-is-exhaustive-in-typescript
+export const assertUnreachable = (x: never): never => {
+  throw new Error(`Unexpected case`);
+};