tonkean-tcltext 1.0.0

package/README.md

@@ -0,0 +1,114 @@
+# Tonkean Design System
+
+Design system components and tokens for Tonkean app, including the TCLText component with truncation and tooltip functionality.
+
+## Installation
+
+```bash
+npm install tonkean-design-system
+```
+
+## Usage
+
+### TCLText Component
+
+The TCLText component provides text truncation with automatic tooltip display on hover.
+
+```tsx
+import { TCLText, TCLFontSize } from 'tonkean-design-system';
+import 'tonkean-design-system/tokens.css';
+
+function App() {
+  return (
+    <div style={{ width: '200px' }}>
+      <TCLText 
+        text="This is a very long text that will be truncated and show a tooltip on hover"
+        fontSize={TCLFontSize.NORMAL}
+      />
+    </div>
+  );
+}
+```
+
+### Using Storybook Typography Tokens Directly
+
+```tsx
+import { TCLText } from 'tonkean-design-system';
+
+function App() {
+  return (
+    <TCLText 
+      text="Sample text"
+      fontSize="base"  // Can use: 'xs', 'sm', 'base', 'lg', 'xl', '2xl'
+      fontFamily="roboto"  // or 'lato'
+      color="#000000"
+    />
+  );
+}
+```
+
+### Importing Tokens
+
+```tsx
+import { colors, typography, buttons, inputs } from 'tonkean-design-system';
+
+// Access token values
+const primaryColor = colors.colors.purple[600];
+const baseFontSize = typography.typography.fontSizes.base;
+```
+
+### CSS Tokens
+
+Import the CSS file to use CSS variables:
+
+```tsx
+import 'tonkean-design-system/tokens.css';
+
+// Then use in your CSS:
+.my-element {
+  color: var(--color-purple-600);
+  font-size: var(--font-size-base);
+  font-family: var(--font-family-roboto);
+}
+```
+
+## TCLText Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `text` | `string` | - | Text content to display |
+| `children` | `ReactNode` | - | Alternative to text prop |
+| `fontSize` | `TCLFontSize \| 'xs' \| 'sm' \| 'base' \| 'lg' \| 'xl' \| '2xl'` | `'base'` | Font size variant |
+| `fontFamily` | `'roboto' \| 'lato'` | `'roboto'` | Font family |
+| `color` | `string` | `'var(--color-gray-900)'` | Text color |
+| `className` | `string` | `''` | Additional CSS classes |
+| `tooltipConfig` | `object` | - | Tooltip configuration |
+| `tooltipConfig.margin` | `number` | `10` | Tooltip margin |
+| `tooltipConfig.maxWidth` | `number` | `300` | Maximum tooltip width |
+
+## TCLFontSize Enum
+
+- `TCLFontSize.NORMAL` - Maps to 'base' (14px)
+- `TCLFontSize.TEXT_MEDIUM` - Maps to 'base' (14px)
+- `TCLFontSize.MSMALL` - Maps to 'sm' (12px)
+- `TCLFontSize.SMALL` - Maps to 'sm' (12px)
+- `TCLFontSize.XSMALL` - Maps to 'xs' (10px)
+- `TCLFontSize.MEDIUM` - Maps to 'lg' (16px)
+- `TCLFontSize.LARGE` - Maps to 'xl' (20px)
+
+## Features
+
+- ✅ Automatic text truncation detection
+- ✅ Tooltip on hover for truncated text
+- ✅ Uses Storybook design tokens
+- ✅ TypeScript support
+- ✅ Fully typed
+
+## Requirements
+
+- React 18.2.0 or higher
+- React DOM 18.2.0 or higher
+
+## License
+
+MIT

package/dist/components/ButtonToken.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { buttons } from '../tokens';
+import { IconData } from './IconItem';
+interface ButtonTokenProps {
+    variant: keyof typeof buttons.buttons.variants;
+    size: 'small' | 'regular' | 'large';
+    state: 'default' | 'hover' | 'disabled';
+    showLabel?: boolean;
+    showTokens?: boolean;
+    iconPosition?: 'lead' | 'end' | 'both' | 'none';
+    label?: string;
+    leadIcon?: IconData | null;
+    endIcon?: IconData | null;
+}
+export declare const ButtonToken: React.FC<ButtonTokenProps>;
+export {};
+//# sourceMappingURL=ButtonToken.d.ts.map

package/dist/components/ButtonToken.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonToken.d.ts","sourceRoot":"","sources":["../../src/components/ButtonToken.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,OAAO,EAAU,MAAM,WAAW,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAOtC,UAAU,gBAAgB;IACxB,OAAO,EAAE,MAAM,OAAO,OAAO,CAAC,OAAO,CAAC,QAAQ,CAAC;IAC/C,IAAI,EAAE,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC;IACpC,KAAK,EAAE,SAAS,GAAG,OAAO,GAAG,UAAU,CAAC;IACxC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC;IAChD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAC;IAC3B,OAAO,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAC;CAC3B;AAoCD,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAoTlD,CAAC"}

package/dist/components/ButtonToken.js

@@ -0,0 +1,234 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React from 'react';
+import { buttons, colors } from '../tokens';
+import { loadAllIcons } from './iconLoader';
+// Load all icons once at module level and get default circle icon
+const allIconsCache = loadAllIcons();
+const defaultCircleIcon = allIconsCache.find(icon => icon.name === 'circle') || null;
+// Helper function to resolve color references from tokens
+const resolveColor = (colorRef) => {
+    // If it's already a hex color or CSS value, return as-is
+    if (colorRef.startsWith('#') || colorRef === 'transparent' || colorRef === 'none') {
+        return colorRef;
+    }
+    // Parse reference like "purple.600" or "basic.white"
+    const parts = colorRef.split('.');
+    if (parts.length === 2) {
+        const [category, shade] = parts;
+        const colorCategory = colors.colors[category];
+        if (colorCategory && typeof colorCategory === 'object') {
+            const colorValue = colorCategory[shade];
+            if (colorValue) {
+                return colorValue;
+            }
+        }
+    }
+    // Fallback: return the original reference if not found
+    return colorRef;
+};
+// Helper function to resolve border string (may contain color references)
+const resolveBorder = (border) => {
+    if (border === 'none' || border === 'transparent') {
+        return border;
+    }
+    // Handle "1px solid gray.300" format
+    return border.replace(/(\w+\.\w+)/g, (match) => resolveColor(match));
+};
+export const ButtonToken = ({ variant, size, state, showLabel = true, showTokens = false, iconPosition = 'lead', label = 'Button', leadIcon, endIcon, }) => {
+    const variantTokens = buttons.buttons.variants[variant];
+    const stateTokens = variantTokens[state];
+    const sizeTokens = buttons.buttons.sizes[size];
+    // Resolve colors from token references
+    const resolvedBackground = resolveColor(stateTokens.background);
+    const resolvedText = resolveColor(stateTokens.text);
+    const resolvedIcon = resolveColor(stateTokens.icon);
+    const resolvedBorder = resolveBorder(stateTokens.border);
+    // Calculate icon size based on button size (proportional to font size)
+    const iconSize = size === 'small' ? '12px' : size === 'regular' ? '14px' : '16px';
+    const chevronSize = size === 'small' ? '10px' : size === 'regular' ? '12px' : '14px';
+    // For multiaction, we need special styling with two sections
+    const isMultiaction = variant === 'multiaction';
+    // For multiaction, we need to resolve purple colors for borders
+    const purple500 = resolveColor('purple.500');
+    const purple600 = resolveColor('purple.600');
+    const buttonStyle = {
+        padding: isMultiaction ? '0' : `${sizeTokens.padding.vertical} ${sizeTokens.padding.horizontal}`,
+        fontSize: sizeTokens.fontSize,
+        minHeight: sizeTokens.minHeight,
+        borderRadius: isMultiaction ? '0' : buttons.buttons.borderRadius,
+        border: isMultiaction ? 'none' : resolvedBorder,
+        backgroundColor: isMultiaction ? 'transparent' : resolvedBackground,
+        color: resolvedText,
+        cursor: state === 'disabled' ? 'not-allowed' : 'pointer',
+        textDecoration: ('textDecoration' in stateTokens ? stateTokens.textDecoration : undefined) || 'none',
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: isMultiaction ? 'stretch' : 'center',
+        gap: isMultiaction ? '0' : '6px',
+        fontFamily: 'var(--font-family-roboto)',
+        fontWeight: 'var(--font-weight-medium)',
+        transition: 'all 0.2s ease',
+        opacity: state === 'disabled' ? 0.6 : 1,
+        lineHeight: '1',
+        overflow: 'hidden',
+    };
+    // Helper function to render icon (from library or default circle)
+    const renderIcon = (iconData, position) => {
+        // Use circle icon as default if no icon is provided
+        const iconToRender = iconData || defaultCircleIcon;
+        if (!iconToRender) {
+            // Fallback: render a simple circle if circle icon not found
+            const iconStyle = {
+                width: iconSize,
+                height: iconSize,
+                backgroundColor: isMultiaction ? 'transparent' : resolvedIcon,
+                border: isMultiaction ? `1px solid ${resolvedIcon}` : 'none',
+                borderRadius: '50%',
+                display: 'inline-block',
+                flexShrink: 0,
+            };
+            return _jsx("span", { style: iconStyle });
+        }
+        // Render icon from library (SVG string or React component)
+        if (iconToRender.svg) {
+            // Process SVG string from icon tokens - update size, color, and stroke width
+            let processedSvg = iconToRender.svg;
+            // Update width and height attributes
+            processedSvg = processedSvg.replace(/width="[^"]*"/gi, `width="${iconSize}"`);
+            processedSvg = processedSvg.replace(/height="[^"]*"/gi, `height="${iconSize}"`);
+            // If SVG doesn't have width/height, add them
+            if (!processedSvg.match(/width\s*=/i)) {
+                processedSvg = processedSvg.replace(/<svg([^>]*?)>/i, (match, attrs) => `<svg${attrs} width="${iconSize}" height="${iconSize}">`);
+            }
+            // Replace currentColor with actual icon color
+            processedSvg = processedSvg.replace(/stroke="currentColor"/gi, `stroke="${resolvedIcon}"`);
+            processedSvg = processedSvg.replace(/fill="currentColor"/gi, `fill="${resolvedIcon}"`);
+            // Set stroke-width to 2px for all stroke elements
+            processedSvg = processedSvg.replace(/stroke-width="[^"]*"/gi, 'stroke-width="2"');
+            processedSvg = processedSvg.replace(/strokeWidth="[^"]*"/gi, 'strokeWidth="2"');
+            // Add stroke-width="2" to all elements that have stroke but no stroke-width
+            processedSvg = processedSvg.replace(/(<(path|line|polyline|polygon|circle|ellipse|rect)[^>]*stroke="[^"]*"[^>]*?)(?![^>]*stroke-width)(?![^>]*strokeWidth)([^>]*>)/gi, (match, before, tag, after) => {
+                return `${before} stroke-width="2"${after}`;
+            });
+            // Render SVG string from icon tokens
+            return (_jsx("span", { style: {
+                    width: iconSize,
+                    height: iconSize,
+                    display: 'inline-flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    flexShrink: 0,
+                    color: resolvedIcon,
+                    lineHeight: 0,
+                    verticalAlign: 'middle',
+                }, dangerouslySetInnerHTML: { __html: processedSvg } }));
+        }
+        if (iconToRender.component) {
+            // Render React component
+            return (_jsx("span", { style: {
+                    width: iconSize,
+                    height: iconSize,
+                    display: 'inline-flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    flexShrink: 0,
+                    color: resolvedIcon,
+                }, children: React.cloneElement(iconToRender.component, {
+                    width: iconSize,
+                    height: iconSize,
+                    style: { color: resolvedIcon },
+                }) }));
+        }
+        // Fallback to circle if icon has no component
+        const iconStyle = {
+            width: iconSize,
+            height: iconSize,
+            backgroundColor: isMultiaction ? 'transparent' : resolvedIcon,
+            border: isMultiaction ? `1px solid ${resolvedIcon}` : 'none',
+            borderRadius: '50%',
+            display: 'inline-block',
+            flexShrink: 0,
+        };
+        return _jsx("span", { style: iconStyle });
+    };
+    // Determine if icon should be shown and where
+    const showIcon = iconPosition !== 'none';
+    const iconAtLead = (iconPosition === 'lead' || iconPosition === 'both') || (isMultiaction && iconPosition !== 'end');
+    const iconAtEnd = (iconPosition === 'end' || iconPosition === 'both') && !isMultiaction;
+    // Get hover and disabled colors for multiaction
+    const hoverBackground = isMultiaction ? resolveColor('purple.700') : null;
+    const disabledBackground = isMultiaction ? resolveColor(variantTokens.disabled.background) : null;
+    const disabledBorder = isMultiaction ? resolveColor(variantTokens.disabled.text) : null;
+    // Main button content wrapper for multiaction - left piece with border-radius: 4px 0 0 4px
+    const mainButtonContent = isMultiaction ? (_jsxs("div", { className: state === 'default' ? 'multiaction-left-default' : state === 'hover' ? 'multiaction-left-hover' : 'multiaction-left-disabled', style: {
+            display: 'inline-flex',
+            alignItems: 'center',
+            gap: '6px',
+            padding: `${sizeTokens.padding.vertical} ${sizeTokens.padding.horizontal}`,
+            flex: '1',
+            borderRadius: '4px 0 0 4px',
+            border: `1px solid ${state === 'disabled' ? disabledBorder : purple600}`,
+            background: state === 'disabled' ? disabledBackground : state === 'hover' ? hoverBackground : purple500,
+            minHeight: sizeTokens.minHeight,
+            height: sizeTokens.minHeight,
+            boxSizing: 'border-box',
+        }, children: [showIcon && iconAtLead && renderIcon(leadIcon, 'lead'), _jsx("span", { children: label }), showIcon && iconAtEnd && renderIcon(endIcon || leadIcon, 'end')] })) : (_jsxs(_Fragment, { children: [showIcon && iconAtLead && renderIcon(leadIcon, 'lead'), _jsx("span", { children: label }), showIcon && iconAtEnd && renderIcon(endIcon || leadIcon, 'end')] }));
+    // Trailing chevron for multiaction variant - right piece with border-radius: 0 4px 4px 0
+    const dropdownIcon = isMultiaction ? (_jsx("div", { className: state === 'default' ? 'multiaction-right-default' : state === 'hover' ? 'multiaction-right-hover' : 'multiaction-right-disabled', style: {
+            display: 'inline-flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            padding: `${sizeTokens.padding.vertical} ${size === 'small' ? '4px' : size === 'regular' ? '4px' : '6px'}`,
+            flexShrink: 0,
+            minHeight: sizeTokens.minHeight,
+            height: sizeTokens.minHeight,
+            borderRadius: '0 4px 4px 0',
+            borderTop: `1px solid ${state === 'disabled' ? disabledBorder : purple600}`,
+            borderRight: `1px solid ${state === 'disabled' ? disabledBorder : purple600}`,
+            borderBottom: `1px solid ${state === 'disabled' ? disabledBorder : purple600}`,
+            borderLeft: 'none',
+            background: state === 'disabled' ? disabledBackground : state === 'hover' ? hoverBackground : purple500,
+            boxSizing: 'border-box',
+        }, children: _jsx("svg", { width: chevronSize, height: chevronSize, viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", style: { display: 'block' }, children: _jsx("path", { d: "M2 4L6 8L10 4", stroke: resolvedIcon, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) })) : null;
+    return (_jsxs("div", { style: { marginBottom: '1rem' }, children: [showLabel && (_jsxs("div", { style: { fontSize: '0.875rem', color: '#6b7280', marginBottom: '0.5rem', fontFamily: 'monospace' }, children: [variant, "-", size, "-", state] })), _jsxs("button", { style: buttonStyle, disabled: state === 'disabled', onMouseEnter: (e) => {
+                    if (state === 'default') {
+                        if (isMultiaction) {
+                            // Update both pieces for multiaction
+                            const leftPiece = e.currentTarget.querySelector('.multiaction-left-default');
+                            const rightPiece = e.currentTarget.querySelector('.multiaction-right-default');
+                            if (leftPiece) {
+                                leftPiece.style.background = hoverBackground || purple500;
+                            }
+                            if (rightPiece) {
+                                rightPiece.style.background = hoverBackground || purple500;
+                            }
+                        }
+                        else {
+                            const hoverTokens = variantTokens.hover;
+                            e.currentTarget.style.backgroundColor = resolveColor(hoverTokens.background);
+                            e.currentTarget.style.color = resolveColor(hoverTokens.text);
+                            e.currentTarget.style.border = resolveBorder(hoverTokens.border);
+                        }
+                    }
+                }, onMouseLeave: (e) => {
+                    if (state === 'default') {
+                        if (isMultiaction) {
+                            // Reset both pieces for multiaction
+                            const leftPiece = e.currentTarget.querySelector('.multiaction-left-default');
+                            const rightPiece = e.currentTarget.querySelector('.multiaction-right-default');
+                            if (leftPiece) {
+                                leftPiece.style.background = purple500;
+                            }
+                            if (rightPiece) {
+                                rightPiece.style.background = purple500;
+                            }
+                        }
+                        else {
+                            e.currentTarget.style.backgroundColor = resolvedBackground;
+                            e.currentTarget.style.color = resolvedText;
+                            e.currentTarget.style.border = resolvedBorder;
+                        }
+                    }
+                }, children: [mainButtonContent, dropdownIcon] }), showTokens && (_jsxs("div", { style: { marginTop: '0.5rem', fontSize: '0.75rem', color: '#6b7280', fontFamily: 'monospace' }, children: [_jsxs("div", { children: ["Background: ", stateTokens.background] }), _jsxs("div", { children: ["Text: ", stateTokens.text] }), _jsxs("div", { children: ["Icon: ", stateTokens.icon] }), _jsxs("div", { children: ["Border: ", stateTokens.border] }), 'textDecoration' in stateTokens && stateTokens.textDecoration && _jsxs("div", { children: ["Decoration: ", stateTokens.textDecoration] }), _jsx("div", { style: { marginTop: '0.25rem', color: '#9ca3af', fontSize: '0.7rem' }, children: `CSS: var(--button-${variant}-${state}-background), var(--button-${variant}-${state}-text), etc.` })] }))] }));
+};
+//# sourceMappingURL=ButtonToken.js.map

package/dist/components/ButtonToken.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonToken.js","sourceRoot":"","sources":["../../src/components/ButtonToken.tsx"],"names":[],"mappings":"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"}

package/dist/components/ColorSelectToken.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+interface ColorSelectTokenProps {
+    state: 'empty' | 'focus' | 'filled' | 'disabled' | 'hover' | 'open';
+    showLabel?: boolean;
+    label?: string;
+    placeholder?: string;
+    value?: string;
+    selectedColor?: string | null;
+    options?: Array<{
+        label: string;
+        color: string;
+    }>;
+    onSelect?: (value: string, color: string) => void;
+}
+export declare const ColorSelectToken: React.FC<ColorSelectTokenProps>;
+export {};
+//# sourceMappingURL=ColorSelectToken.d.ts.map

package/dist/components/ColorSelectToken.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorSelectToken.d.ts","sourceRoot":"","sources":["../../src/components/ColorSelectToken.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAI3D,UAAU,qBAAqB;IAC7B,KAAK,EAAE,OAAO,GAAG,OAAO,GAAG,QAAQ,GAAG,UAAU,GAAG,OAAO,GAAG,MAAM,CAAC;IACpE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,OAAO,CAAC,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAClD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnD;AAyJD,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAyf5D,CAAC"}