@keboola/design 1.0.0

package/src/utils/decorators.tsx

@@ -0,0 +1,16 @@
+import type { ComponentType } from 'react';
+
+import { TooltipProvider } from '../components/Tooltip';
+
+export const withTooltipProvider = (Story: ComponentType) => (
+  <TooltipProvider>
+    <Story />
+  </TooltipProvider>
+);
+
+// position:fixed only fills the Storybook iframe, not the browser window.
+export const withHiddenFullscreen = (Story: ComponentType) => (
+  <div className="[&_[aria-label=Fullscreen]]:tw-hidden">
+    <Story />
+  </div>
+);

package/src/utils/escapeStringRegexp.ts

@@ -0,0 +1,4 @@
+// Escape characters with special meaning either inside or outside character sets.
+// Use a simple backslash escape when it's always valid, and a `\xnn` escape when the simpler form would be disallowed by Unicode patterns' stricter grammar.
+export const escapeStringRegexp = (string: string) =>
+  string.replace(/[|\\{}()[\]^$+*?.]/g, '\\$&').replace(/-/g, '\\x2d');

package/src/utils/index.ts

@@ -0,0 +1,11 @@
+export * from './classNames';
+export * from './copyToClipboard';
+export * from './createChangeInputEvent';
+export * from './decorators';
+export * from './createPrefixedString';
+export * from './escapeStringRegexp';
+export * from './mergeRefs';
+export * from './noop';
+export * from './debounce';
+export * from './isMac';
+export * from './useSHA256';

package/src/utils/isMac.ts

@@ -0,0 +1,26 @@
+// Platform detection
+type NavigatorUAData = {
+  platform: string;
+  brands: { brand: string; version: string }[];
+  mobile: boolean;
+};
+
+const getIsMac = (): boolean => {
+  // Modern approach using navigator.userAgentData
+  if (typeof navigator !== 'undefined' && 'userAgentData' in navigator) {
+    const platform = (navigator.userAgentData as NavigatorUAData).platform;
+
+    if (typeof platform === 'string') {
+      return platform.toLowerCase() === 'macos';
+    }
+  }
+
+  if (typeof navigator !== 'undefined' && typeof navigator.platform === 'string') {
+    return navigator.platform.toUpperCase().indexOf('MAC') >= 0;
+  }
+
+  // Server-side rendering fallback
+  return false;
+};
+
+export const isMac = getIsMac();

package/src/utils/mergeRefs.ts

@@ -0,0 +1,23 @@
+import type { MutableRefObject, RefCallback } from 'react';
+
+type PossibleRef<T> = MutableRefObject<T> | RefCallback<T> | null;
+
+/**
+ * Set a given ref to a given value
+ * This utility takes care of different types of refs: callback refs and RefObject(s)
+ */
+function setRef<T>(ref: PossibleRef<T>, value: T) {
+  if (typeof ref === 'function') {
+    ref(value);
+  } else if (ref != null) {
+    ref.current = value;
+  }
+}
+
+/**
+ * A utility to compose multiple refs together
+ * Accepts callback refs and RefObject(s)
+ */
+export const mergeRefs = <T>(...refs: PossibleRef<T>[]) => {
+  return (node: T) => refs.forEach((ref) => setRef(ref, node));
+};

package/src/utils/noop.ts

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

package/src/utils/useSHA256.ts

@@ -0,0 +1,21 @@
+import { useEffect, useState } from 'react';
+
+// https://developer.mozilla.org/en-US/docs/Web/API/SubtleCrypto/digest#converting_a_digest_to_a_hex_string
+const sha256 = async (text: string) => {
+  const msgUint8 = new TextEncoder().encode(text);
+  const hashBuffer = await crypto.subtle.digest('SHA-256', msgUint8);
+  const hashArray = Array.from(new Uint8Array(hashBuffer));
+  return hashArray.map((b) => b.toString(16).padStart(2, '0')).join('');
+};
+
+export const useSHA256 = (text?: string) => {
+  const [hash, setHash] = useState('');
+
+  useEffect(() => {
+    if (text) {
+      sha256(text).then(setHash);
+    }
+  }, [text]);
+
+  return hash;
+};

package/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />