tycho-storybook 0.1.14 → 0.2.1

package/dist/Icon/Icon.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import './styles.scss';
 export declare const IconWeights: readonly ["regular", "heavy"];
 type IconWeights = (typeof IconWeights)[number];
@@ -12,5 +11,5 @@ export type Props = JSX.IntrinsicElements['span'] & {
     filled?: boolean;
     disabled?: boolean;
 };
-declare const Icon: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLSpanElement>>;
-export default Icon;
+export default function Icon({ name, className, size, weight, filled, disabled, title, onClick, onMouseDown, onMouseUp, }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Icon/Icon.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import React from 'react';
 import cx from 'classnames';
 import './styles.scss';
 export const IconWeights = ['regular', 'heavy'];
@@ -10,13 +9,12 @@ export const IconSizes = [
     'small',
     'x-small',
 ];
-const Icon = React.forwardRef(function Icon({ name, className = '', size, weight = 'regular', filled = false, disabled = false, title, onClick, onMouseDown, onMouseUp, }, ref) {
+export default function Icon({ name, className = '', size, weight = 'regular', filled = false, disabled = false, title, onClick, onMouseDown, onMouseUp, }) {
     const getClassNames = cx('ds-icon material-symbols-outlined', className, size, weight, {
         disabled: disabled,
     });
     const style = {
         fontVariationSettings: `'FILL' ${filled ? 1 : 0}, 'wght' 400, 'GRAD' 0, 'opsz' 24`,
     };
-    return (_jsx("span", { ref: ref, className: getClassNames, style: style, onClick: (e) => onClick && onClick(e), onMouseDown: (e) => onMouseDown && onMouseDown(e), onMouseUp: (e) => onMouseUp && onMouseUp(e), title: title, translate: "no", children: name }));
-});
-export default Icon;
+    return (_jsx("span", { className: getClassNames, style: style, onClick: (e) => onClick && onClick(e), onMouseDown: (e) => onMouseDown && onMouseDown(e), onMouseUp: (e) => onMouseUp && onMouseUp(e), title: title, translate: "no", children: name }));
+}

package/dist/Icon/Icon.stories.d.ts

@@ -1,7 +1,8 @@
 import type { StoryObj } from '@storybook/react';
+import Icon from './Icon';
 declare const meta: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<Omit<import("./Icon").Props, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+    component: typeof Icon;
     parameters: {
         layout: string;
     };

package/dist/TextField/TextField.d.ts

@@ -1,5 +1,6 @@
 import { UseFormReturn } from 'react-hook-form';
 import './styles.scss';
+type DefaultEndAdornmentType = 'password' | 'close';
 type Props = {
     attr: string;
     label: string;
@@ -13,14 +14,15 @@ type Props = {
     required?: boolean;
     showEndAdornment?: boolean;
     startAdornment?: React.ReactNode;
+    endAdornment?: React.ReactNode[];
+    defaultEndAdornments?: DefaultEndAdornmentType[];
     onChange?: (attr: string, value: any) => void;
     onFocus?: (e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement, Element>) => void;
     onKeyDown?: (e: React.KeyboardEvent<HTMLDivElement>) => void;
     onRemove?: () => void;
-    password?: boolean;
     rows?: number;
-    hideInfoIcon?: boolean;
+    infoIcon?: string;
     inputRef?: React.Ref<HTMLInputElement | HTMLTextAreaElement>;
 };
-export default function TextField({ className, attr, label, createdForm, disabled, title, placeholder, multiline, maxChars, required, startAdornment, showEndAdornment, onChange, onFocus, onKeyDown, onRemove, password, rows, hideInfoIcon, inputRef, }: Props): import("react/jsx-runtime").JSX.Element;
+export default function TextField({ className, attr, label, createdForm, disabled, title, placeholder, multiline, maxChars, required, startAdornment, endAdornment, defaultEndAdornments, showEndAdornment, onChange, onFocus, onKeyDown, onRemove, rows, infoIcon, inputRef, }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/TextField/TextField.js

@@ -6,10 +6,11 @@ import cx from 'classnames';
 import { useEffect, useState } from 'react';
 import { Controller } from 'react-hook-form';
 import Icon from '../Icon';
+import Tooltip from '../Tooltip';
 import { textFieldTheme } from './TextFieldTheme';
 import { setCurrentInput } from './inputRefManager';
 import './styles.scss';
-export default function TextField({ className, attr, label, createdForm, disabled, title, placeholder, multiline, maxChars, required, startAdornment, showEndAdornment = true, onChange, onFocus, onKeyDown, onRemove, password, rows = 4, hideInfoIcon, inputRef, }) {
+export default function TextField({ className, attr, label, createdForm, disabled, title, placeholder, multiline, maxChars, required, startAdornment, endAdornment, defaultEndAdornments = ['close'], showEndAdornment = true, onChange, onFocus, onKeyDown, onRemove, rows = 4, infoIcon, inputRef, }) {
     const outerTheme = useTheme();
     const [showPassword, setShowPassword] = useState(false);
     const [active, setActive] = useState(false);
@@ -20,16 +21,36 @@ export default function TextField({ className, attr, label, createdForm, disable
         disabled: disabled,
     });
     const getEndAdornmentIcon = (value) => {
-        if (password) {
-            return (_jsx(Icon, { name: showPassword ? 'visibility_off' : 'visibility', size: "small", onClick: () => setShowPassword(!showPassword), className: "pointer" }));
+        const adornments = [];
+        if (defaultEndAdornments.length > 0) {
+            // Check for password adornment
+            if (defaultEndAdornments.includes('password')) {
+                adornments.push(_jsx(Icon, { name: showPassword ? 'visibility_off' : 'visibility', size: "small", onClick: () => setShowPassword(!showPassword), className: "pointer" }, "password"));
+            }
+            // Check for info adornment
+            if (infoIcon) {
+                const infoIconElement = (_jsx(Icon, { name: "info", size: "small", className: `icon-info pointer ${disabled ? 'd-none' : ''}` }));
+                adornments.push(_jsx(Tooltip, { title: infoIcon, mode: "simple", children: _jsx("span", { children: infoIconElement }) }, "info"));
+            }
+            // Check for close adornment - show when value is not undefined and value is not equal to defaultValue
+            if (defaultEndAdornments.includes('close') &&
+                value !== undefined &&
+                onRemove) {
+                adornments.push(_jsx(Icon, { name: "close", size: "small", className: `${disabled ? 'd-none' : ''} pointer`, onClick: () => onRemove && onRemove() }, "close"));
+            }
         }
-        if (!hideInfoIcon && value === undefined) {
-            return (_jsx(Icon, { name: "info", size: "small", className: `icon-info pointer ${disabled ? 'd-none' : ''}` }));
+        // Append custom endAdornments if provided
+        if (endAdornment && endAdornment.length > 0) {
+            adornments.push(...endAdornment);
         }
-        if (value !== undefined || (hideInfoIcon && onRemove)) {
-            return (_jsx(Icon, { name: "close", size: "small", className: `${disabled ? 'd-none' : ''} pointer`, onClick: () => onRemove && onRemove() }));
+        if (adornments.length === 0) {
+            return null;
         }
-        return null;
+        if (adornments.length === 1) {
+            return adornments[0];
+        }
+        // Return multiple adornments wrapped in a div with spacing
+        return _jsx("div", { className: "ds-end-adornments", children: adornments });
     };
     useEffect(() => {
         if (focus || mouseOver) {
@@ -39,11 +60,11 @@ export default function TextField({ className, attr, label, createdForm, disable
             setActive(false);
         }
     }, [focus, mouseOver]);
-    return (_jsx("div", { className: getClassNames, children: _jsx(Controller, { name: attr, control: createdForm.control, render: ({ field }) => (_jsxs(ThemeProvider, { theme: textFieldTheme(outerTheme), children: [_jsx(MuiTextField, { ...field, inputRef: inputRef, label: label, value: field.value || '', type: password === undefined
-                            ? 'text'
-                            : showPassword
+    return (_jsx("div", { className: getClassNames, children: _jsx(Controller, { name: attr, control: createdForm.control, render: ({ field }) => (_jsxs(ThemeProvider, { theme: textFieldTheme(outerTheme), children: [_jsx(MuiTextField, { ...field, inputRef: inputRef, label: label, value: field.value || '', type: defaultEndAdornments.includes('password')
+                            ? showPassword
                                 ? 'text'
-                                : 'password', fullWidth: true, required: required, disabled: disabled, variant: "filled", placeholder: !focus ? placeholder : '', color: "error", multiline: multiline, minRows: rows, slotProps: {
+                                : 'password'
+                            : 'text', fullWidth: true, required: required, disabled: disabled, variant: "filled", placeholder: !focus ? placeholder : '', color: "error", multiline: multiline, minRows: rows, slotProps: {
                             inputLabel: {
                                 shrink: true,
                             },

package/dist/TextField/TextField.stories.d.ts

@@ -4,3 +4,5 @@ declare const meta: Meta<typeof TextField>;
 export default meta;
 type Story = StoryObj<typeof TextField>;
 export declare const Default: Story;
+export declare const WithEndAdornment: Story;
+export declare const WithInfoIcon: Story;

package/dist/TextField/TextField.stories.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useForm } from 'react-hook-form';
+import Icon from '../Icon';
 import TextField from './TextField';
 const meta = {
     title: 'Components/TextField',
@@ -23,7 +24,6 @@ const meta = {
     },
 };
 export default meta;
-// 🛠️ Now a proper render function inside the story object
 export const Default = {
     args: {
         attr: 'title',
@@ -41,3 +41,42 @@ export const Default = {
         return (_jsx(TextField, { ...args, createdForm: createdForm, onChange: handleChange }));
     },
 };
+export const WithEndAdornment = {
+    args: {
+        attr: 'search',
+        label: 'Search',
+        placeholder: 'Type to search...',
+    },
+    render: (args) => {
+        const createdForm = useForm({
+            defaultValues: {
+                [args.attr]: '',
+            },
+        });
+        const handleChange = (attr, value) => {
+            console.log(`Attribute: ${attr}, Value: ${String(value)}`);
+        };
+        return (_jsx(TextField, { ...args, createdForm: createdForm, onChange: handleChange, endAdornment: [
+                _jsx(Icon, { name: "search", size: "small", className: "pointer" }, "search"),
+            ] }));
+    },
+};
+export const WithInfoIcon = {
+    args: {
+        attr: 'email',
+        label: 'Email Address',
+        placeholder: 'Enter your email...',
+        infoIcon: 'Please enter a valid email address',
+    },
+    render: (args) => {
+        const createdForm = useForm({
+            defaultValues: {
+                [args.attr]: '',
+            },
+        });
+        const handleChange = (attr, value) => {
+            console.log(`Attribute: ${attr}, Value: ${String(value)}`);
+        };
+        return (_jsx(TextField, { ...args, createdForm: createdForm, onChange: handleChange }));
+    },
+};

package/dist/TextField/styles.scss

@@ -2,6 +2,10 @@
   width: 100%;
   position: relative;
 
+  span {
+    line-height: 1 !important;
+  }
+
   > .helper {
     @include helper-small-1;
     margin-top: 4px;
@@ -32,3 +36,9 @@
     left: 16px;
   }
 }
+
+.ds-end-adornments {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tycho-storybook",
   "private": false,
-  "version": "0.1.14",
+  "version": "0.2.1",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {