@beydesign/storybook 0.2.30 → 0.3.0

package/dist/stories/Settings/SettingsNav.js

@@ -1,97 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import styled from '@emotion/styled';
-import { SettingsNavItem } from './SettingsNavItem';
-import { DrawerNavItemState } from '../Drawer/types';
-import { Typography, TypographySize, TypographyWeight } from '../Typography';
-const WIDTH = '238px';
-const Shell = styled.aside `
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  flex-shrink: 0;
-  width: ${WIDTH};
-  height: 100vh;
-  padding: var(--spacing-tokens-size-in-px-spacing-spacing-xl, 16px)
-    var(--spacing-tokens-size-in-px-spacing-spacing-xl, 16px)
-    var(--spacing-tokens-size-in-px-spacing-spacing-2xl, 24px);
-  background-color: var(--color-background-bg-page-contrast);
-  border-right: 1px solid var(--color-border-border-component);
-  overflow-x: hidden;
-  overflow-y: auto;
-
-  scrollbar-width: thin;
-  scrollbar-color: var(--color-border-border-component) transparent;
-
-  &::-webkit-scrollbar {
-    width: 6px;
-  }
-  &::-webkit-scrollbar-track {
-    background: transparent;
-  }
-  &::-webkit-scrollbar-thumb {
-    background-color: var(--color-border-border-component);
-    border-radius: var(--spacing-tokens-size-in-px-radius-radius-full);
-  }
-  &::-webkit-scrollbar-thumb:hover {
-    background-color: var(--color-text-text-subtle);
-  }
-`;
-const Content = styled.div `
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-tokens-size-in-px-spacing-spacing-2xl, 20px);
-  height: 100%;
-`;
-const Header = styled.div `
-  padding: 0 var(--spacing-tokens-size-in-px-spacing-spacing-md, 8px);
-`;
-const Sections = styled.nav `
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-tokens-size-in-px-spacing-spacing-2xl, 20px);
-`;
-const Section = styled.div `
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-tokens-size-in-px-spacing-spacing-md, 8px);
-`;
-const SectionTitle = styled.div `
-  padding: 0 var(--spacing-tokens-size-in-px-spacing-spacing-md, 8px);
-  text-transform: uppercase;
-`;
-const Items = styled.div `
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-tokens-size-in-px-spacing-spacing-xs, 4px);
-`;
-const resolveState = (item, activeKey) => {
-    if (item.state)
-        return item.state;
-    if (item.disabled)
-        return DrawerNavItemState.Disabled;
-    const key = item.key ?? item.text;
-    if (activeKey !== undefined && key === activeKey) {
-        return DrawerNavItemState.Active;
-    }
-    return DrawerNavItemState.Inactive;
-};
-/**
- * Secondary navigation for the Settings area: a "Settings" heading followed by
- * titled sections of {@link SettingsNavItem} rows. Sits beside the primary
- * {@link Drawer} and only appears on settings pages. Every colour, space and
- * radius resolves to `@beydesign/tokens` CSS variables, so it renders correctly
- * in light and dark.
- */
-export const SettingsNav = ({ title = 'Settings', sections, activeKey, className, style, testId, }) => {
-    const handleItemClick = (item) => {
-        if (item.disabled)
-            return;
-        if (item.link) {
-            window.location.href = item.link;
-        }
-        else {
-            item.onClick?.();
-        }
-    };
-    return (_jsx(Shell, { className: className, style: style, "data-testid": testId, children: _jsxs(Content, { children: [_jsx(Header, { children: _jsx(Typography, { size: TypographySize.HeadingS, weight: TypographyWeight.Bold, color: "var(--color-text-text-title)", children: title }) }), _jsx(Sections, { children: sections.map((section, sectionIndex) => (_jsxs(Section, { children: [section.title && (_jsx(SectionTitle, { children: _jsx(Typography, { size: TypographySize.TextXS, weight: TypographyWeight.SemiBold, color: "var(--color-text-text-subtle)", children: section.title }) })), _jsx(Items, { children: section.items.map((item) => (_jsx(SettingsNavItem, { text: item.text, icon: item.icon, state: resolveState(item, activeKey), showBadge: item.showBadge, badgeText: item.badgeText, onClick: () => handleItemClick(item) }, item.key ?? item.text))) })] }, section.key ?? section.title ?? sectionIndex))) })] }) }));
-};

package/dist/stories/Settings/SettingsNavItem.d.ts

@@ -1,9 +0,0 @@
-import React from 'react';
-import type { SettingsNavItemProps } from './types';
-/**
- * A single navigation row for the {@link SettingsNav}. Deliberately more compact
- * than {@link DrawerNavItem} — 28px tall (4px vertical padding), a 16px icon and
- * a Medium-weight label — to read as secondary navigation. All colours resolve
- * to theme tokens, so it adapts to light and dark.
- */
-export declare const SettingsNavItem: React.FC<SettingsNavItemProps>;

package/dist/stories/Settings/SettingsNavItem.js

@@ -1,75 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import styled from '@emotion/styled';
-import { DrawerNavItemState } from '../Drawer/types';
-import { Typography, TypographySize, TypographyWeight } from '../Typography';
-import { Badge, BadgeColor, BadgeSize } from '../UI';
-import { getIconComponent } from '../../utils';
-const ACTIVE_FG = 'var(--color-text-text-clicable)';
-const INACTIVE_FG = 'var(--color-text-text-subtle)';
-const ACTIVE_BG = 'var(--color-background-bg-brand-transparent)';
-const HOVER_BG = 'var(--color-background-bg-brand-transparent-hover)';
-const foreground = (state) => state === DrawerNavItemState.Active || state === DrawerNavItemState.Hover
-    ? ACTIVE_FG
-    : INACTIVE_FG;
-const background = (state) => {
-    if (state === DrawerNavItemState.Active)
-        return ACTIVE_BG;
-    if (state === DrawerNavItemState.Hover)
-        return HOVER_BG;
-    return 'transparent';
-};
-const StyledNavItem = styled.button `
-  appearance: none;
-  font: inherit;
-  text-align: left;
-  border: none;
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-tokens-size-in-px-spacing-spacing-md, 8px);
-  width: 100%;
-  padding: var(--spacing-tokens-size-in-px-spacing-spacing-xs, 4px)
-    var(--spacing-tokens-size-in-px-spacing-spacing-md, 8px);
-  border-radius: var(--spacing-tokens-size-in-px-spacing-spacing-md, 8px);
-  color: ${({ $state }) => foreground($state)};
-  background-color: ${({ $state }) => background($state)};
-  opacity: ${({ $state }) => $state === DrawerNavItemState.Disabled ? 0.5 : 1};
-  cursor: ${({ $state }) => $state === DrawerNavItemState.Disabled ? 'not-allowed' : 'pointer'};
-  transition:
-    background-color 0.2s ease-in-out,
-    color 0.2s ease-in-out;
-
-  &:hover {
-    ${({ $state }) => $state === DrawerNavItemState.Inactive
-    ? `background-color: ${HOVER_BG}; color: ${ACTIVE_FG};`
-    : ''}
-  }
-`;
-const IconSlot = styled.span `
-  display: inline-flex;
-  flex-shrink: 0;
-  color: inherit;
-`;
-const Label = styled.span `
-  display: inline-flex;
-  flex: 1 1 0;
-  min-width: 0;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  color: inherit;
-`;
-/**
- * A single navigation row for the {@link SettingsNav}. Deliberately more compact
- * than {@link DrawerNavItem} — 28px tall (4px vertical padding), a 16px icon and
- * a Medium-weight label — to read as secondary navigation. All colours resolve
- * to theme tokens, so it adapts to light and dark.
- */
-export const SettingsNavItem = ({ text, icon, state = DrawerNavItemState.Inactive, showBadge = false, badgeText = 'Coming Soon', onClick, className, style, testId, }) => {
-    const isDisabled = state === DrawerNavItemState.Disabled;
-    const handleClick = () => {
-        if (!isDisabled)
-            onClick?.();
-    };
-    return (_jsxs(StyledNavItem, { type: "button", "$state": state, className: className, style: style, onClick: handleClick, disabled: isDisabled, "aria-current": state === DrawerNavItemState.Active ? 'page' : undefined, "data-testid": testId, children: [_jsx(IconSlot, { children: getIconComponent(icon, { size: 16 }) }), _jsx(Label, { children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Medium, color: "inherit", children: text }) }), showBadge && (_jsx(Badge, { size: BadgeSize.xs, icon: "ClockCountdown", showIcon: true, text: badgeText, color: BadgeColor.Default }))] }));
-};

package/dist/stories/Settings/SettingsPage.stories.d.ts

@@ -1,11 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-/**
- * Renders the primary {@link Drawer} beside the {@link SettingsNav} exactly as
- * they compose on a real settings page, with a placeholder content pane. Both
- * navs are interactive.
- */
-declare const SettingsPageExample: () => import("react").JSX.Element;
-declare const meta: Meta<typeof SettingsPageExample>;
-export default meta;
-type Story = StoryObj<typeof SettingsPageExample>;
-export declare const DrawerWithSettingsNav: Story;

package/dist/stories/Settings/SettingsPage.stories.js

@@ -1,93 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
-import { SettingsNav } from './SettingsNav';
-import { Drawer } from '../Drawer';
-import { Typography, TypographySize, TypographyWeight } from '../Typography';
-const drawerNavItems = [
-    { key: 'home', text: 'Home', icon: 'House' },
-    { key: 'avatars', text: 'Avatars', icon: 'UserFocus' },
-    { key: 'agents', text: 'My Agents', icon: 'Headset' },
-    { key: 'ttv', text: 'Text-to-Video', icon: 'VideoCamera' },
-    { key: 'kb', text: 'Knowledge Base', icon: 'Book' },
-    {
-        key: 'conversations',
-        text: 'Conversations',
-        icon: 'ChatTeardropDots',
-    },
-    { key: 'analytics', text: 'Analytics', icon: 'ChartBar' },
-    { key: 'api', text: 'API keys', icon: 'Key' },
-    { key: 'developers', text: 'Developers', icon: 'BracketsCurly' },
-];
-const settingsSections = [
-    {
-        key: 'business',
-        title: 'Your business',
-        items: [{ key: 'branding', text: 'Branding', icon: 'StarFour' }],
-    },
-    {
-        key: 'team',
-        title: 'Team',
-        items: [{ key: 'members', text: 'Members', icon: 'UsersThree' }],
-    },
-    {
-        key: 'billing',
-        title: 'Billing & plans',
-        items: [
-            { key: 'subscription', text: 'Subscription', icon: 'CreditCard' },
-            { key: 'invoices', text: 'Invoices', icon: 'FileText' },
-        ],
-    },
-    {
-        key: 'developers',
-        title: 'Developers',
-        items: [
-            { key: 'api-keys', text: 'API keys', icon: 'Key' },
-            { key: 'webhooks', text: 'Webhooks', icon: 'Graph' },
-        ],
-    },
-];
-const labels = {
-    branding: 'Branding',
-    members: 'Members',
-    subscription: 'Subscription',
-    invoices: 'Invoices',
-    'api-keys': 'API keys',
-    webhooks: 'Webhooks',
-};
-/**
- * Renders the primary {@link Drawer} beside the {@link SettingsNav} exactly as
- * they compose on a real settings page, with a placeholder content pane. Both
- * navs are interactive.
- */
-const SettingsPageExample = () => {
-    const [activeSetting, setActiveSetting] = useState('api-keys');
-    const sections = settingsSections.map((section) => ({
-        ...section,
-        items: section.items.map((item) => ({
-            ...item,
-            onClick: () => setActiveSetting(item.key ?? item.text),
-        })),
-    }));
-    return (_jsxs("div", { style: {
-            display: 'flex',
-            height: '100vh',
-            backgroundColor: 'var(--color-background-bg-page)',
-        }, children: [_jsx(Drawer, { navItems: drawerNavItems, activeKey: "api", credits: { usedCredits: 500, maxCredits: 2000 }, profile: { name: 'Emma Novak', email: 'emma@example.com' } }), _jsx(SettingsNav, { sections: sections, activeKey: activeSetting }), _jsxs("main", { style: {
-                    flex: 1,
-                    padding: '32px 40px',
-                    overflowY: 'auto',
-                }, children: [_jsx(Typography, { size: TypographySize.HeadingM, weight: TypographyWeight.SemiBold, color: "var(--color-text-text-title)", children: labels[activeSetting] ?? activeSetting }), _jsx("div", { style: { marginTop: 12 }, children: _jsxs(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, color: "var(--color-text-text-paragraph)", children: ["Content for the \"", labels[activeSetting] ?? activeSetting, "\" settings page renders here."] }) })] })] }));
-};
-const meta = {
-    title: 'Design System/Examples/Settings Page',
-    component: SettingsPageExample,
-    parameters: {
-        layout: 'fullscreen',
-        design: {
-            type: 'figspec',
-            url: 'https://www.figma.com/design/mIhjz2yJjcpLlIqw6oUivt/Beyond-Presence?node-id=7002-33215',
-        },
-    },
-};
-export default meta;
-export const DrawerWithSettingsNav = {};

package/dist/stories/Settings/index.d.ts

@@ -1,3 +0,0 @@
-export * from './SettingsNav';
-export * from './SettingsNavItem';
-export * from './types';

package/dist/stories/Settings/index.js

@@ -1,3 +0,0 @@
-export * from './SettingsNav';
-export * from './SettingsNavItem';
-export * from './types';

package/dist/stories/Settings/types.d.ts

@@ -1,68 +0,0 @@
-import type { CSSProperties } from 'react';
-import type { IconName } from '../../utils';
-import type { DrawerNavItemState } from '../Drawer/types';
-/**
- * Props for the standalone {@link SettingsNavItem} row. Compared to
- * {@link DrawerNavItem} this is a more compact secondary-nav row: 28px tall,
- * 16px icon and Medium-weight label.
- */
-export interface SettingsNavItemProps {
-    /** Label text. */
-    text: string;
-    /** Phosphor icon name rendered to the left of the label. */
-    icon: IconName;
-    /** Visual state of the item. */
-    state?: DrawerNavItemState;
-    /** Show a trailing badge (e.g. "Coming Soon"). */
-    showBadge?: boolean;
-    /** Text for the trailing badge. */
-    badgeText?: string;
-    /** Click handler. Not fired when the item is disabled. */
-    onClick?: () => void;
-    className?: string;
-    style?: CSSProperties;
-    /** Renders as `data-testid` for testing. */
-    testId?: string;
-}
-/**
- * A single navigation entry inside a {@link SettingsNavSection}.
- */
-export interface SettingsNavItemConfig {
-    /** Stable identifier used to resolve the active item (falls back to `text`). */
-    key?: string;
-    text: string;
-    icon: IconName;
-    /** Force a state. When omitted it is derived from `activeKey` / `disabled`. */
-    state?: DrawerNavItemState;
-    disabled?: boolean;
-    showBadge?: boolean;
-    badgeText?: string;
-    /** When set, clicking navigates to this URL. */
-    link?: string;
-    onClick?: () => void;
-}
-/**
- * A titled group of {@link SettingsNavItemConfig} rows
- * (e.g. "Your business", "Billing & plans").
- */
-export interface SettingsNavSection {
-    /** Stable key for the section (falls back to `title`). */
-    key?: string;
-    /** Uppercase caption rendered above the section's items. */
-    title?: string;
-    items: SettingsNavItemConfig[];
-}
-/**
- * Props for the composed {@link SettingsNav} secondary navigation.
- */
-export interface SettingsNavProps {
-    /** Heading rendered at the top. Defaults to "Settings". */
-    title?: string;
-    /** Grouped navigation entries. */
-    sections: SettingsNavSection[];
-    /** Key (or text) of the currently active item. */
-    activeKey?: string;
-    className?: string;
-    style?: CSSProperties;
-    testId?: string;
-}