### Basic FileUploader Example Source: https://mindbox.pages.yandexcloud.net/development/frontend/ui-components/llms/components-fileuploader.txt This example demonstrates a basic FileUploader setup. It handles file drops, manages file states, and displays uploaded files with options to refresh or cancel. Use this for standard file upload scenarios. ```tsx { render: args => { const [filesState, setFilesState] = useState([]); const [fileRejectionsState, setFileRejectionsState] = useState([]); const [isLoading, setIsLoading] = useBoolean(); const [isPopoverOpen, setIsPopoverOpen] = useBoolean(); const onDrop: FileUploaderDropZoneOnDropType = useCallback((acceptedFiles, fileRejections) => { if (args.onDrop) { args.onDrop(acceptedFiles, fileRejections); } if (!fileRejections.length) { setFileRejectionsState([]); setFilesState(acceptedFiles); setIsLoading.on(); setTimeout(setIsLoading.off, 2000); return; } setFileRejectionsState(fileRejections); }, [args, setIsLoading]); const removeFileHandler = useCallback((value: string) => { console.info(value); setFilesState([]); setIsLoading.off(); }, [setIsLoading]); const getUploaderButtons = useCallback(() => { return {!isLoading && Popover}> } ; }, [isLoading, isPopoverOpen, removeFileHandler, setIsPopoverOpen.off, setIsPopoverOpen.toggle]); return !filesState.length ? : } buttons={getUploaderButtons()} loading={isLoading} />; } } ``` -------------------------------- ### Basic ReadinessBlock Example Source: https://mindbox.pages.yandexcloud.net/development/frontend/ui-components/llms/forms-readinessblock.txt A basic example of the ReadinessBlock component displaying a checklist with various item statuses. ```tsx { args: { title: 'Checklist' }, render: args => } ``` -------------------------------- ### Complete SimpleSelect Example with Advanced Features Source: https://mindbox.pages.yandexcloud.net/development/frontend/ui-components/llms/forms-simpleselect-advanced.txt This example combines title, search, control buttons, and actions within a single SimpleSelect component. It's useful for demonstrating a comprehensive setup of advanced features. ```tsx { parameters: { docs: { description: { story: 'A combined example with a title, search, control buttons, and actions. Shows how to combine several advanced features in a single select.' } } }, args: { mode: 'multiple' }, render: args => { const { options, handleOptionSelect, checkId, selected, setSelectedById, resetAll } = useSelectOptions(args, MULTISELECT_OPTIONS); const [isAllSelected, setIsAllSelected] = useState(false); const { searchValue, filteredItems: searchFiltered, handleChangeSearchValue } = useSearchFilter(options); const { isShowSelected, filteredItems, handleToggleShowSelected } = useShowSelectedFilter(searchFiltered, checkId); const handleSelectAll = useCallback(() => { setIsAllSelected(true); options.forEach(item => setSelectedById(item.id, true)); }, [options, setSelectedById]); const handleDeselectAll = useCallback(() => { resetAll(); setIsAllSelected(false); }, [resetAll]); return Dropdown title Dropdown subtitle: Esse non amet magna dolor ipsum duis non aliqua duis id duis ea. Veniam sunt et cupidatat consequat velit qui magna sunt laboris. ; } } ``` -------------------------------- ### Basic FileUploaderSingle Example Source: https://mindbox.pages.yandexcloud.net/development/frontend/ui-components/llms/components-fileuploader-single.txt Demonstrates the basic usage of the FileUploaderSingle component, including state management for the uploaded file and file rejections. This example shows how to handle file drops and cancellations. ```tsx { render: args => { const [file, setFile] = useState(); const [fileRejectionsState, setFileRejectionsState] = useState([]); const onDrop: FileUploaderSingleOnDropType = useCallback((acceptedFile, fileRejections) => { if (!fileRejections.length) { setFileRejectionsState([]); setFile(acceptedFile); return; } setFileRejectionsState(fileRejections); }, []); const removeFileHandler = useCallback(() => { setFile(undefined); }, []); return ; } } ``` -------------------------------- ### Difference Component Basic Example Source: https://mindbox.pages.yandexcloud.net/development/frontend/ui-components/llms/basics-difference.txt A basic example demonstrating the 'value' and 'percent' props for the Difference component. ```tsx { args: { value: 150, percent: 5.2 } } ``` -------------------------------- ### Basic TimeInput Example Source: https://mindbox.pages.yandexcloud.net/development/frontend/ui-components/llms/datetime-inputs-timeinput.txt Renders a basic TimeInput component. Use this as a starting point for integrating the TimeInput. ```tsx { render: args => { return render(args); } } ``` -------------------------------- ### Interactive Card Example Source: https://mindbox.pages.yandexcloud.net/development/frontend/ui-components/llms/layout-card.txt Demonstrates an interactive card setup with multiple selectable card options. This is useful for scenarios where users need to choose from various card types. ```tsx { parameters: { docs: { description: { story: 'Interactive card example' } } }, argTypes: { card1: { ...ArgTypes.CardSelect, description: 'Card 1' }, card2: { ...ArgTypes.CardSelect, description: 'Card 2' }, card3: { ...ArgTypes.CardSelect, description: 'Card 3' }, card4: { ...ArgTypes.CardSelect, description: 'Card 4' } }, args: { card1: 'Text', card2: 'Icon', card3: 'Image', card4: 'ImagePlaceholder' }, render: args => {args.card1} {args.card2} {args.card3} {args.card4} } ``` -------------------------------- ### Basic Loading Indicator Example Source: https://mindbox.pages.yandexcloud.net/development/frontend/ui-components/llms/states-loading.txt An empty example demonstrating the basic structure for a loading indicator. This serves as a placeholder for actual implementation. ```tsx {} ``` -------------------------------- ### Basic Report Settings Example Configuration Source: https://mindbox.pages.yandexcloud.net/development/frontend/ui-components/llms/layout-report-report-settings.txt Provides a detailed configuration for the basic Report.Settings example, including sample controls like Switcher, Input, and Button. This snippet is typically used in storybook or testing environments. ```tsx { globals: { backgrounds: { value: 'gray' } }, args: { hPadding: 'L' }, render: args => { const controls = useMemo(() => [{ label: 'Switcher 1', element: }, { label: 'Switcher 2', element: }, { label: 'Input', element: }, { element: }], []); return
; } } ``` -------------------------------- ### Basic StatusBadge Example Source: https://mindbox.pages.yandexcloud.net/development/frontend/ui-components/llms/basics-statusbadge.txt Demonstrates the basic configuration of the StatusBadge component with essential arguments. ```tsx { args: { accent: 'success', text: 'Badge', icon: undefined, overflowTooltip: false, outline: false } } ``` -------------------------------- ### Basic ColumnSizeControl Example Source: https://mindbox.pages.yandexcloud.net/development/frontend/ui-components/llms/components-columnsizecontrol.txt Demonstrates the basic usage of the ColumnSizeControl with an initial column size distribution. ```tsx { render: () => { const [value, setValue] = useState([4, 6, 2]); return
; } } ``` -------------------------------- ### Basic EmptyState Example Source: https://mindbox.pages.yandexcloud.net/development/frontend/ui-components/llms/states-emptystate.txt A basic example of the EmptyState component with a title, icon, and subtitle. Useful for simple notifications when no data is present. ```tsx { args: { title: 'Max-width of this title container is 300 pixels', icon: 'logo', subtitle: 'Very very very long description to show width limitation' } } ``` -------------------------------- ### Fixed Drawer Example Source: https://mindbox.pages.yandexcloud.net/development/frontend/ui-components/llms/layout-drawer.txt Demonstrates how to use the Drawer component with fixed positioning for both vertical and horizontal orientations. It includes examples of managing the open/closed state and handling overlay clicks and close events. ```tsx { args: { position: 'fixed', isOpen: false, direction: 'vertical' }, render(args) { const [isVerticalOpen, setIsVerticalOpen] = useBoolean(false); const [isHorizontalOpen, setIsHorizontalOpen] = useBoolean(false); const triggerRef1 = useRef(null); const triggerRef2 = useRef(null); return ; } } ``` -------------------------------- ### Line Chart Example with Tooltip and Axes Source: https://mindbox.pages.yandexcloud.net/development/frontend/ui-components/llms/layout-chart-line.txt This example demonstrates how to render a line chart with custom tooltips, multiple Y-axes with different ranges and formatters, and bar chart integration. It utilizes hooks for memoization and callbacks for performance optimization. Suitable for complex data visualization scenarios. ```tsx { render: args => { const YAxisRange: RangeType = useMemo(() => [0, 600000], []); const YAxisPercentRange: RangeType = useMemo(() => [0, 20], []); const tickFormatter = useCallback(item => numeral(item).format('0 a'), []); const tickPercentFormatter = useCallback(item => numeral(item / 100).format('0%'), []); const tooltipContent = React.useCallback(p => CTR {numeral(p.ctr / 100).format('0%')} Conversion {numeral(p.conversion).format('0,0')} Not anonymous {p.date} , []); return ; } } ``` -------------------------------- ### Basic TruncatedText Example Source: https://mindbox.pages.yandexcloud.net/development/frontend/ui-components/llms/basics-truncatedtext-v1.txt This example demonstrates the basic usage of the TruncatedText component. It requires a ContainerDecorator and dispatches a window resize event to ensure proper truncation rendering. ```tsx { args: { children: DEFAULT_TRUNCATED_TEXT_CHILDREN_VALUE }, decorators: [ContainerDecorator], render: ({ children, ...args }) => { useEffect(() => { window.dispatchEvent(new Event('resize')); }, [args]); return {children}; } } ``` -------------------------------- ### Basic Header Example Source: https://mindbox.pages.yandexcloud.net/development/frontend/ui-components/llms/basics-header.txt Renders a basic Header component. This is the default configuration. ```tsx { render(args) { return
; } } ``` -------------------------------- ### Basic SegmentedBar Example Source: https://mindbox.pages.yandexcloud.net/development/frontend/ui-components/llms/components-segmentedbar.txt Demonstrates the basic structure of a SegmentedBar with a header and multiple segments. ```tsx { render(args) { return Traffic Distribute traffic between test options ; } } ``` -------------------------------- ### Basic Notification Example Source: https://mindbox.pages.yandexcloud.net/development/frontend/ui-components/llms/notifications-notification.txt Demonstrates how to render and manage notifications using the Notification component. Includes functions to add success, error, and warning notifications, and a button to close all notifications. This example requires `useState`, `useCallback`, and `nanoid` for state management and unique ID generation. ```tsx { render: args => { const [items, setItems] = useState([]); const onRemove = useCallback((id: string) => { setItems(prevState => prevState.filter(({ id: existId }) => existId !== id)); }, []); const handleCloseAll = useCallback(() => setItems([]), []); const addNotification = useCallback((status: StatusType) => { const id = nanoid(); const newItem: NotificationItem = { id, status, title: `Title ${id}`, firstLink: { to: '#', text: 'Link text' }, secondLink: { to: '#', text: 'Link text' }, subtitle: 'Subtitle', onClose: onRemove }; setItems(prevState => [...prevState, newItem]); }, [onRemove]); const addSuccessNotification = useCallback(() => addNotification('success'), [addNotification]); const addErrorNotification = useCallback(() => addNotification('error'), [addNotification]); const addWarningNotification = useCallback(() => addNotification('warning'), [addNotification]); return <> } ``` -------------------------------- ### Sticky Header Report Settings Example Configuration Source: https://mindbox.pages.yandexcloud.net/development/frontend/ui-components/llms/layout-report-report-settings.txt A comprehensive configuration for the sticky header variant of Report.Settings. It includes setup for a sticky header, sample controls, and nested content blocks. ```tsx { globals: { backgrounds: { value: 'gray' } }, render: () => { const headerRef = useRef(null); const controls = useMemo(() => [{ label: 'Select', element: }, { element: }], []); return
; } } ``` -------------------------------- ### Basic MultilineInput Example Source: https://mindbox.pages.yandexcloud.net/development/frontend/ui-components/llms/forms-multilineinput.txt Renders a basic MultilineInput component. Use this as a starting point for integrating the component into your application. It manages the input value using React's useState and useEffect hooks. ```tsx { render: args => { const [value, setValue] = useState(args.value); useEffect(() => { setValue(args.value); }, [args.value]); return ; } } ``` -------------------------------- ### ReadinessBlockItem Example Source: https://mindbox.pages.yandexcloud.net/development/frontend/ui-components/llms/forms-readinessblock-subcomponents-readinessblockitem.txt Demonstrates how to render a single ReadinessBlockItem within a ReadinessBlock. This snippet shows the basic structure for integrating the item component. ```tsx { render: args => } ``` -------------------------------- ### EditBlock with Toggle Example Source: https://mindbox.pages.yandexcloud.net/development/frontend/ui-components/llms/components-editblock-stories-editblock.txt Renders the EditBlock using a predefined toggle example component. ```tsx { render: () => } ``` -------------------------------- ### Difference Component Value Only Example Source: https://mindbox.pages.yandexcloud.net/development/frontend/ui-components/llms/basics-difference.txt Example showing the Difference component used with only the 'value' prop. ```tsx { args: { value: 150 } } ``` -------------------------------- ### Basic FetchMoreObserver Usage Source: https://mindbox.pages.yandexcloud.net/development/frontend/ui-components/llms/components-simpletable-stories-components-fetchmoreobserver.txt Demonstrates the basic structure for using FetchMoreObserver. This example shows how to integrate it with state management to dynamically load more data as the user scrolls. ```tsx args => { const [data, setData] = useState(SIMPLE_TABLE_DATA); const increaseData = useCallback(async () => { args.onFetchMore(); return new Promise(resolve => { setTimeout(() => { setData(newData => [...newData, ...SIMPLE_TABLE_DATA]); resolve(); }, 3000); }); }, [args]); return <> {data.map((row, index) => {row.name} {row.subject} {row.planned} {row.sent} {row.deliveryPercent} {row.openRate} {row.clickRate} {row.conversion} {row.unsubscribed} )} ; } ``` -------------------------------- ### Basic ProgressBar Example Source: https://mindbox.pages.yandexcloud.net/development/frontend/ui-components/llms/components-progressbar.txt Demonstrates a basic ProgressBar with title, indicator, info container, and actions. Use this for standard progress display with detailed information. ```tsx { render(args) { return Passage statistics The counter is updated automatically Passes up to the limit 654 Passes after the limit 7 327 ; } } ``` -------------------------------- ### Difference Component Percent Only Example Source: https://mindbox.pages.yandexcloud.net/development/frontend/ui-components/llms/basics-difference.txt Example showing the Difference component used with only the 'percent' prop. ```tsx { args: { percent: 5.2 } } ``` -------------------------------- ### Basic Header Toolbar Example Source: https://mindbox.pages.yandexcloud.net/development/frontend/ui-components/llms/basics-header-header-toolbar.txt Demonstrates the basic usage of the Header.Toolbar component, rendering additional content below the header. ```tsx { render: args => <>
{ArgTypes.ComponentSlot.mapping.toolbarButtons}} /> } ``` -------------------------------- ### Basic Popover Example Source: https://mindbox.pages.yandexcloud.net/development/frontend/ui-components/llms/popups-popover.txt Demonstrates how to use the Popover component with basic state management for opening and closing. It requires `isOpen`, `onClose`, and `onOpen` props, along with child elements like a Button. ```tsx { render: args => { const [isOpen, setIsOpen] = React.useState(false); const onClose = React.useCallback(() => setIsOpen(false), []); const onOpen = React.useCallback(() => setIsOpen(true), []); return
{DEFAULT_TEXT.slice(0, DIFF)}
 ; } } ``` -------------------------------- ### EmojiPicker Horizontal Alignment Example Source: https://mindbox.pages.yandexcloud.net/development/frontend/ui-components/llms/components-emojipicker-stories-emojipicker.txt Illustrates how to configure the horizontal alignment of the emoji picker menu. This example uses a template function to define the alignment. ```tsx { render: getEmojiPickerHAlignTemplate } ``` -------------------------------- ### Basic Textarea Example Source: https://mindbox.pages.yandexcloud.net/development/frontend/ui-components/llms/components-textarea.txt Demonstrates a basic Textarea configuration with settings for row count, placeholder, initial value, counter, maximum value, name, test ID, text type, and intent. It includes state management for the textarea's value and handles change events. ```tsx { args: { rowsCountSettings: { minCount: 3, maxCount: 5 }, placeholder: DEFAULT_TEXTAREA_PLACEHOLDER, value: DEFAULT_TEXTAREA_TEXT, withCounter: true, maxValue: 999, name: DEFAULT_TEXTAREA_NAME, testId: 'TestidForTextarea', textType: 'paragraph', textIntent: 'primary' }, render: args => { const [value, setValue] = React.useState(args.value || ''); const handleChange = React.useCallback(e => { setValue(e.target.value); args.onChange?.(e); }, [args]); return