corpushub-design-system 0.0.0-stage → 0.0.2

package/README.md

@@ -1,3 +1,53 @@
-# Temporary Holding Version
+# corpushub-design-system
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Merged design system from `tycho-storybook` (primitives) and `tycho-components` (app shells, features, configs).
+
+## Install
+
+```bash
+npm install corpushub-design-system
+```
+
+## Imports
+
+```ts
+// Design-system primitives (former tycho-storybook)
+import { Button, Icon, TextField } from 'corpushub-design-system/primitives';
+
+// App building blocks (former tycho-components)
+import { AppModal, AppTable } from 'corpushub-design-system/common';
+import { Header } from 'corpushub-design-system/shell';
+import { Comments } from 'corpushub-design-system/features';
+import { CommonProvider } from 'corpushub-design-system/configs';
+```
+
+Root `corpushub-design-system` re-exports common, shell, configs, functions, features, and vendor — not primitives.
+
+## Styles
+
+Import the unified stylesheet once in your app entry:
+
+```scss
+@use 'corpushub-design-system/styles/main';
+```
+
+For Vite typography mixin injection (`additionalData`), point load paths at the package styles and use:
+
+```scss
+@use 'corpushub-design-system/styles/base/typographs' as *;
+```
+
+Or set `loadPaths` to `node_modules/corpushub-design-system/dist/styles` and inject `@use "base/typographs" as *;`.
+
+## Development
+
+```bash
+npm install
+npm start          # Storybook
+npm run build      # tsc + static assets
+npm test           # Vitest
+```
+
+## Migration note
+
+Tycho Brahe fronts still use `tycho-storybook` + `tycho-components`. Migrating those apps to this package is a follow-up.

package/dist/common/AppAnalytics/AppAnalytics.d.ts

@@ -0,0 +1 @@
+export default function AppAnalytics(): null;

package/dist/common/AppAnalytics/AppAnalytics.js

@@ -0,0 +1,25 @@
+import { useEffect } from 'react';
+export default function AppAnalytics() {
+    const GA_ID = import.meta.env.VITE_APP_GA_ID;
+    useEffect(() => {
+        if (!GA_ID) {
+            console.warn('Google Analytics ID not set.');
+            return;
+        }
+        // Inject the gtag.js script
+        const script = document.createElement('script');
+        script.src = `https://www.googletagmanager.com/gtag/js?id=${GA_ID}`;
+        script.async = true;
+        document.head.appendChild(script);
+        // Inject the inline gtag config script exactly like GA docs do
+        const inlineScript = document.createElement('script');
+        inlineScript.innerHTML = `
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments);}
+      gtag('js', new Date());
+      gtag('config', '${GA_ID}');
+    `;
+        document.head.appendChild(inlineScript);
+    }, []);
+    return null;
+}

package/dist/common/AppAnalytics/index.d.ts

@@ -0,0 +1,2 @@
+import AppAnalytics from './AppAnalytics';
+export default AppAnalytics;

package/dist/common/AppAnalytics/index.js

@@ -0,0 +1,2 @@
+import AppAnalytics from './AppAnalytics';
+export default AppAnalytics;

package/dist/common/AppCard/AppCard.d.ts

@@ -0,0 +1,14 @@
+import { DropdownMenuItem } from '../../primitives/DropdownMenu/DropdownMenu';
+import './style.scss';
+type Props = {
+    title?: string | React.ReactNode;
+    children: React.ReactNode;
+    extraHeaderActions?: React.ReactNode;
+    footer?: React.ReactNode;
+    options?: DropdownMenuItem[];
+    className?: string;
+    onClick?: () => void;
+    dataTour?: string;
+};
+export default function AppCard({ title, children, extraHeaderActions, footer, options, className, onClick, dataTour, }: Props): import("react").JSX.Element;
+export {};

package/dist/common/AppCard/AppCard.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import cx from 'classnames';
+import { DropdownMenu } from '../../primitives';
+import './style.scss';
+export default function AppCard({ title, children, extraHeaderActions, footer, options, className, onClick, dataTour, }) {
+    return (_jsxs("div", { className: cx('ds-app-card', className), onClick: onClick, "data-tour": dataTour, children: [title && (_jsxs("div", { className: "header", children: [_jsx("div", { className: "title", children: title }), extraHeaderActions && (_jsx("div", { className: "extra-header-actions", children: extraHeaderActions })), options && _jsx(DropdownMenu, { list: options })] })), _jsx("div", { className: "body", children: children }), footer && _jsx("div", { className: "footer", children: footer })] }));
+}

package/dist/common/AppCard/index.d.ts

@@ -0,0 +1,2 @@
+import AppCard from './AppCard';
+export default AppCard;

package/dist/common/AppCard/index.js

@@ -0,0 +1,2 @@
+import AppCard from './AppCard';
+export default AppCard;

package/dist/common/AppCard/style.scss

@@ -0,0 +1,33 @@
+.ds-app-card {
+  border: 1px solid var(--border-subtle-1);
+  border-radius: var(--radius-100);
+
+  > .header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 8px 16px;
+    background-color: var(--layer-layer-2);
+    border-bottom: 1px solid var(--border-subtle-1);
+    gap: 12px;
+
+    > .title {
+      @include label-large-2;
+      flex: 1;
+    }
+
+    > .extra-header-actions {
+      display: flex;
+    }
+  }
+
+  > .body {
+    padding: 16px;
+  }
+
+  > .footer {
+    display: flex;
+    padding: 8px 16px;
+    border-top: 1px solid var(--border-subtle-1);
+  }
+}

package/dist/common/AppClarity/AppClarity.d.ts

@@ -0,0 +1,17 @@
+declare global {
+    interface Window {
+        clarity?: (...args: unknown[]) => void;
+    }
+}
+/**
+ * Microsoft Clarity loader — mirrors {@link AppAnalytics} (null render, injects
+ * the vendor tag on mount from a Vite env var). Set `VITE_APP_CLARITY_ID`.
+ *
+ * On top of the plain snippet it stitches every session of the logged-in Tycho
+ * user under their stable `uid` (from `CookieStorage` / `SecurityUtils.parseJwt`)
+ * via `clarity('identify', …)`, so cross-module full-page navigations count as
+ * ONE identified user instead of N anonymous ones. Re-runs identify when the JWT
+ * cookie changes (login/logout) or the tab becomes visible again. The friendly
+ * name is PII — drop the last `identify` argument for a stricter privacy posture.
+ */
+export default function AppClarity(): null;

package/dist/common/AppClarity/AppClarity.js

@@ -0,0 +1,67 @@
+import { useEffect, useRef } from 'react';
+import CookieStorage, { JWT_CHANGED_EVENT } from '../../configs/CookieStorage';
+import SecurityUtils from '../../functions/SecurityUtils';
+const SCRIPT_ATTR = 'data-tycho-clarity';
+/**
+ * Microsoft Clarity loader — mirrors {@link AppAnalytics} (null render, injects
+ * the vendor tag on mount from a Vite env var). Set `VITE_APP_CLARITY_ID`.
+ *
+ * On top of the plain snippet it stitches every session of the logged-in Tycho
+ * user under their stable `uid` (from `CookieStorage` / `SecurityUtils.parseJwt`)
+ * via `clarity('identify', …)`, so cross-module full-page navigations count as
+ * ONE identified user instead of N anonymous ones. Re-runs identify when the JWT
+ * cookie changes (login/logout) or the tab becomes visible again. The friendly
+ * name is PII — drop the last `identify` argument for a stricter privacy posture.
+ */
+export default function AppClarity() {
+    const CLARITY_ID = import.meta.env.VITE_APP_CLARITY_ID;
+    const lastUidRef = useRef(undefined);
+    useEffect(() => {
+        if (!CLARITY_ID) {
+            console.warn('Microsoft Clarity project ID not set.');
+            return;
+        }
+        if (!document.querySelector(`script[${SCRIPT_ATTR}]`)) {
+            const loader = document.createElement('script');
+            loader.setAttribute(SCRIPT_ATTR, CLARITY_ID);
+            loader.innerHTML =
+                `(function(c,l,a,r,i,t,y){c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};` +
+                    `t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;` +
+                    `y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y)})` +
+                    `(window,document,"clarity","script","${CLARITY_ID}");`;
+            document.head.appendChild(loader);
+            window.clarity?.('consent');
+        }
+        const identifyUser = () => {
+            try {
+                const token = CookieStorage.getJwtToken();
+                if (!token) {
+                    lastUidRef.current = undefined;
+                    return;
+                }
+                const payload = SecurityUtils.parseJwt(token);
+                if (!payload?.uid || payload.uid === lastUidRef.current)
+                    return;
+                window.clarity?.('identify', payload.uid, undefined, undefined, payload.name || undefined);
+                lastUidRef.current = payload.uid;
+            }
+            catch {
+                /* not logged in / unparseable — track anonymously */
+            }
+        };
+        const onVisible = () => {
+            if (document.visibilityState === 'visible')
+                identifyUser();
+        };
+        identifyUser();
+        window.addEventListener(JWT_CHANGED_EVENT, identifyUser);
+        window.addEventListener('focus', identifyUser);
+        document.addEventListener('visibilitychange', onVisible);
+        return () => {
+            window.removeEventListener(JWT_CHANGED_EVENT, identifyUser);
+            window.removeEventListener('focus', identifyUser);
+            document.removeEventListener('visibilitychange', onVisible);
+        };
+    }, [CLARITY_ID]);
+    return null;
+}

package/dist/common/AppClarity/index.d.ts

@@ -0,0 +1,2 @@
+import AppClarity from './AppClarity';
+export default AppClarity;

package/dist/common/AppClarity/index.js

@@ -0,0 +1,2 @@
+import AppClarity from './AppClarity';
+export default AppClarity;

package/dist/common/AppClipboard/AppClipboard.d.ts

@@ -0,0 +1,7 @@
+import { ButtonDSSizes } from '../../primitives/Button/Button';
+type Props = {
+    text: string;
+    size?: ButtonDSSizes;
+};
+export default function AppClipboard({ text, size }: Props): import("react").JSX.Element;
+export {};

package/dist/common/AppClipboard/AppClipboard.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { IconButton } from '../../primitives';
+export default function AppClipboard({ text, size = 'x-small' }) {
+    const { t } = useTranslation('common');
+    const [copied, setCopied] = useState(false);
+    const handleCopy = () => {
+        navigator.clipboard
+            .writeText(text)
+            .then(() => {
+            setCopied(true);
+            setTimeout(() => {
+                setCopied(false);
+            }, 2000);
+        })
+            .catch((err) => {
+            console.error('Failed to copy text:', err);
+        });
+    };
+    const tooltipTitle = copied ? t('tooltip.copied') : t('tooltip.copy');
+    return (_jsx(IconButton, { name: "content_copy", title: tooltipTitle, onClick: handleCopy, size: size }));
+}

package/dist/common/AppClipboard/index.d.ts

@@ -0,0 +1,2 @@
+import AppClipboard from './AppClipboard';
+export default AppClipboard;

package/dist/common/AppClipboard/index.js

@@ -0,0 +1,2 @@
+import AppClipboard from './AppClipboard';
+export default AppClipboard;

package/dist/common/AppColorpicker/AppColorpicker.d.ts

@@ -0,0 +1,10 @@
+import { FormField } from '../AppEditable/FormField';
+import { FieldValue } from '../AppEditable/FormFieldOption';
+import './style.scss';
+type AppColorpickerProps = {
+    item: Record<string, unknown>;
+    field: FormField;
+    handleSave: (value: FieldValue, field: FormField) => void;
+};
+export default function AppColorpicker({ field, item, handleSave, }: AppColorpickerProps): import("react").JSX.Element;
+export {};

package/dist/common/AppColorpicker/AppColorpicker.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { HexColorPicker } from 'react-colorful';
+import { useTranslation } from 'react-i18next';
+import { Button } from '../../primitives';
+import './style.scss';
+const defaultColor = '#FFFFFF';
+export default function AppColorpicker({ field, item, handleSave, }) {
+    const { t } = useTranslation('common');
+    const [openColor, setOpenColor] = useState(false);
+    const [color, setColor] = useState(defaultColor);
+    useEffect(() => {
+        if (item[field.name])
+            setColor(item[field.name]);
+        else
+            setColor(defaultColor);
+    }, [item]);
+    return (_jsxs("div", { className: "color-picker-container", children: [_jsx("div", { className: "swatch", style: { backgroundColor: color }, onClick: () => setOpenColor(!openColor), onKeyDown: () => setOpenColor(!openColor), role: "link", "aria-label": "open color picker", tabIndex: 0 }), openColor && (_jsxs(_Fragment, { children: [_jsx(HexColorPicker, { color: color, onChange: setColor }), _jsxs("div", { className: "buttons", children: [_jsx(Button, { text: t('button.confirm'), onClick: () => {
+                                    handleSave(color, field);
+                                    setOpenColor(false);
+                                }, size: "x-small" }), _jsx(Button, { text: t('button.cancel'), onClick: () => setOpenColor(false), color: "danger", size: "x-small" })] })] }))] }));
+}

package/dist/common/AppColorpicker/index.d.ts

@@ -0,0 +1,2 @@
+import AppColorpicker from './AppColorpicker';
+export default AppColorpicker;

package/dist/common/AppColorpicker/index.js

@@ -0,0 +1,2 @@
+import AppColorpicker from './AppColorpicker';
+export default AppColorpicker;

package/dist/common/AppColorpicker/style.scss

@@ -0,0 +1,26 @@
+.color-picker-container {
+  display: flex;
+  flex-direction: column;
+
+  .swatch {
+    width: 28px;
+    height: 28px;
+    border-radius: 8px;
+    border: 3px solid #fff;
+    box-shadow:
+      0 0 0 1px rgba(0, 0, 0, 0.1),
+      inset 0 0 0 1px rgba(0, 0, 0, 0.1);
+    cursor: pointer;
+    margin-bottom: 8px;
+  }
+
+  .react-colorful {
+    margin-bottom: 8px;
+  }
+
+  .buttons {
+    display: flex;
+    justify-content: center;
+    gap: 8px;
+  }
+}

package/dist/common/AppConsent/AppConsent.d.ts

@@ -0,0 +1,3 @@
+import { ConsentTexts } from '../../configs/localization/ConsentTexts';
+export type ConsentSectionKey = keyof typeof ConsentTexts.en;
+export default function AppConsent(): import("react").JSX.Element;

package/dist/common/AppConsent/AppConsent.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation } from 'react-i18next';
+const sectionKeys = [
+    'purpose',
+    'data.usage',
+    'responsibilities',
+    'create',
+    'accessibility',
+    'acknowledgment',
+    'conduct',
+    'feedback',
+    'termination',
+];
+export default function AppConsent() {
+    const { t } = useTranslation('consent');
+    return (_jsx("div", { className: "app-consent-container", children: _jsx("ol", { children: sectionKeys.map((sectionKey) => {
+                return (_jsxs("li", { children: [_jsx("b", { children: t(`${sectionKey}.title`) }), _jsx("ul", { children: Object.values(t(`${sectionKey}.texts`, { returnObjects: true })).map((text, index) => (_jsx("li", { children: text }, `${sectionKey}.${index}`))) })] }, sectionKey));
+            }) }) }));
+}

package/dist/common/AppConsent/index.d.ts

@@ -0,0 +1,2 @@
+import AppConsent from './AppConsent';
+export default AppConsent;

package/dist/common/AppConsent/index.js

@@ -0,0 +1,2 @@
+import AppConsent from './AppConsent';
+export default AppConsent;

package/dist/common/AppCopyText/AppCopyText.d.ts

@@ -0,0 +1,11 @@
+import "./styles.scss";
+export declare const TitlePositions: readonly ["top", "right"];
+type TitlePosition = (typeof TitlePositions)[number];
+export type Props = {
+    className?: string;
+    title?: string;
+    content: string;
+    titlePosition?: TitlePosition;
+};
+export default function AppCopyText({ className, title, content, titlePosition, }: Props): import("react").JSX.Element;
+export {};

package/dist/common/AppCopyText/AppCopyText.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import cx from "classnames";
+import "./styles.scss";
+import { Icon, Tooltip } from "../../primitives";
+import { useTranslation } from "react-i18next";
+export const TitlePositions = ["top", "right"];
+export default function AppCopyText({ className, title, content, titlePosition = "right", }) {
+    const [copied, setCopied] = useState(false);
+    const [isHovered, setIsHovered] = useState(false);
+    const { t } = useTranslation("common");
+    const getClassNames = cx("ds-copy-text", className, {
+        "title-top": titlePosition === "top" && title,
+        "title-right": titlePosition === "right" && title,
+        "no-title": !title,
+    });
+    const handleClipboard = () => {
+        navigator.clipboard
+            .writeText(content)
+            .then(() => {
+            setCopied(true);
+            setTimeout(() => {
+                setCopied(false);
+            }, 2000);
+        })
+            .catch((err) => {
+            console.error("Failed to copy text:", err);
+        });
+    };
+    const tooltipTitle = copied ? t("tooltip.copied") : t("tooltip.copy");
+    const iconName = copied ? "check" : "content_copy";
+    const iconFilled = isHovered && !copied;
+    const contentElement = (_jsxs("div", { className: getClassNames, onClick: handleClipboard, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [title && _jsx("span", { className: "ds-copy-text__title", children: title }), title && titlePosition === "right" && (_jsx("span", { className: "ds-copy-text__separator", children: "|" })), _jsxs("div", { className: "group-content", children: [_jsx("span", { className: "ds-copy-text__content", children: content }), _jsx(Icon, { name: iconName, size: "small", className: "ds-copy-text__icon", filled: iconFilled })] })] }));
+    return (_jsx(Tooltip, { title: tooltipTitle, placement: "top", mode: "simple", triggerOpen: copied ? true : undefined, children: contentElement }));
+}

package/dist/common/AppCopyText/index.d.ts

@@ -0,0 +1,2 @@
+import AppCopyText from './AppCopyText';
+export default AppCopyText;

package/dist/common/AppCopyText/index.js

@@ -0,0 +1,2 @@
+import AppCopyText from './AppCopyText';
+export default AppCopyText;

package/dist/common/AppCopyText/styles.scss

@@ -0,0 +1,55 @@
+.ds-copy-text {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  cursor: pointer;
+  width: fit-content;
+
+  &__title {
+    @include helper-small-1;
+    color: var(--text-secondary);
+  }
+
+  &__separator {
+    color: var(--text-secondary);
+  }
+
+  &__content {
+    color: var(--text-primary);
+    @include body-small-1;
+  }
+
+  &__icon {
+    color: var(--icon-accent);
+    transition: all 0.2s ease;
+  }
+
+  &:hover {
+    .ds-copy-text__icon {
+      color: var(--text-primary);
+      background-color: var(--button-secondary-default);
+    }
+  }
+
+  .group-content {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
+
+  &.title-top {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--spacing-50, 4px);
+  }
+
+  &.title-right {
+    flex-direction: row;
+  }
+
+  &.no-title {
+    .ds-copy-text__separator {
+      display: none;
+    }
+  }
+}

package/dist/common/AppDropzone/AppDropzone.d.ts

@@ -0,0 +1,21 @@
+import { type DropzoneMessages } from '../AppDropzoneShell';
+import type { UploadedFile } from './UploadedFile';
+type Props = {
+    folder: string;
+    onClose: () => void;
+    onSuccess: (response: UploadedFile) => void;
+    onError?: (err: any) => void;
+    accept: Record<string, string[]>;
+    messages?: DropzoneMessages;
+    onDrop?: () => void;
+    /** Initial value for the keep-original-name checkbox (default false). */
+    keepName?: boolean;
+    title?: string;
+    alternativeButton?: {
+        title: string;
+        action: () => void;
+    };
+    disableConfirm?: boolean;
+};
+export default function AppDropzone({ folder, onClose, onSuccess, onError, accept, messages, onDrop, keepName, title, alternativeButton, disableConfirm, }: Props): import("react").JSX.Element;
+export {};

package/dist/common/AppDropzone/AppDropzone.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef } from 'react';
+import { AppDropzoneModal, } from '../AppDropzoneShell';
+import AppDropzoneBody from './AppDropzoneBody';
+export default function AppDropzone({ folder, onClose, onSuccess, onError, accept, messages, onDrop, keepName, title, alternativeButton, disableConfirm = false, }) {
+    const bodyRef = useRef(null);
+    return (_jsx(AppDropzoneModal, { title: title, onClose: onClose, bodyRef: bodyRef, className: "modal-upload", disableConfirm: disableConfirm, alternativeButton: alternativeButton, children: _jsx(AppDropzoneBody, { ref: bodyRef, folder: folder, onSuccess: onSuccess, onError: onError, accept: accept, messages: messages, onDrop: onDrop, keepName: keepName, showConfirmButton: false }) }));
+}

package/dist/common/AppDropzone/AppDropzoneBody.d.ts

@@ -0,0 +1,23 @@
+import { type DropzoneMessages } from '../AppDropzoneShell';
+import { UploadedFile } from './UploadedFile';
+export type AppDropzoneBodyProps = {
+    folder: string;
+    onSuccess: (response: UploadedFile) => void;
+    onError?: (err: any) => void;
+    accept: Record<string, string[]>;
+    messages?: DropzoneMessages;
+    onDrop?: () => void;
+    /** Initial value for the keep-original-name checkbox (default false). */
+    keepName?: boolean;
+    /** When false, the confirm button is hidden (e.g. when used inside modal with its own confirm) */
+    showConfirmButton?: boolean;
+    /** When true, image preview is not rendered and filename message is shown instead */
+    disablePreview?: boolean;
+    /** When true, confirm button is visible but disabled */
+    disableConfirm?: boolean;
+};
+export type AppDropzoneBodyRef = {
+    upload: () => Promise<void>;
+};
+declare const AppDropzoneBody: import("react").ForwardRefExoticComponent<AppDropzoneBodyProps & import("react").RefAttributes<AppDropzoneBodyRef>>;
+export default AppDropzoneBody;