@kadconsulting/dry
Version:
KAD Reusable Component Library
124 lines • 4.68 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
// CLI Version 1.1.0
// Component Version 1.1.0
import React from 'react';
import AttachmentsModal from './AttachmentsModal';
import { ThemeProvider } from '~components/ThemeProvider';
import darkTheme from '~themes/default/palette/dark';
import lightTheme from '~themes/default/palette/light';
import { Button } from '../Button';
import useModalState from '../../hooks/useModalState';
const meta = {
title: 'Components/AttachmentsModal',
component: AttachmentsModal,
tags: ['autodocs'],
argTypes: {
isOpen: {
control: 'boolean',
description: 'Controls whether the modal is open or closed',
},
closeModal: {
action: 'closed',
description: 'Function to close the modal',
},
onSubmit: {
action: 'submitted',
description: 'Function called when files are submitted',
},
id: {
control: 'text',
description: 'ID for the modal',
},
className: {
control: 'text',
description: 'Additional CSS class names',
},
},
decorators: [
(Story) => (_jsx(ThemeProvider, { themes: { light: lightTheme, dark: darkTheme }, children: _jsx(Story, {}) })),
],
};
export default meta;
export const Default = {
args: {
isOpen: true,
id: 'attachments-modal',
closeModal: () => { },
onSubmit: (files) => console.log('Submitted files:', files),
},
};
export const Closed = {
args: {
...Default.args,
isOpen: false,
},
};
export const WithCustomClassName = {
args: {
...Default.args,
className: 'custom-modal-class',
},
};
export const InteractiveDemo = {
render: (args) => {
const [isOpen, openModal, closeModal] = useModalState();
const handleSubmit = (files) => {
console.log('Submitted files:', files);
closeModal();
};
return (_jsxs(_Fragment, { children: [_jsx(Button, { text: 'Open Attachments Modal', buttonType: 'ghost-info', icon: _jsxs("svg", { xmlns: 'http://www.w3.org/2000/svg', width: '20', height: '20', viewBox: '0 0 20 20', fill: 'none', children: [_jsx("g", { clipPath: 'url(#clip0_1417_4000)', children: _jsx("path", { d: 'M10.0013 6.66602V13.3327M6.66797 9.99935H13.3346M18.3346 9.99935C18.3346 14.6017 14.6037 18.3327 10.0013 18.3327C5.39893 18.3327 1.66797 14.6017 1.66797 9.99935C1.66797 5.39698 5.39893 1.66602 10.0013 1.66602C14.6037 1.66602 18.3346 5.39698 18.3346 9.99935Z', stroke: '#C45C0D', strokeWidth: '1.66667', strokeLinecap: 'round', strokeLinejoin: 'round' }) }), _jsx("defs", { children: _jsx("clipPath", { id: 'clip0_1417_4000', children: _jsx("rect", { width: '20', height: '20', fill: 'white' }) }) })] }), onClick: openModal }), _jsx(AttachmentsModal, { ...args, isOpen: isOpen, closeModal: closeModal, onSubmit: handleSubmit })] }));
},
parameters: {
docs: {
description: {
story: 'An interactive demo of the AttachmentsModal. Click the button to open the modal.',
},
},
},
};
export const WithPreselectedFiles = {
render: (args) => {
const [selectedFiles, setSelectedFiles] = React.useState([
new File(['content'], 'example.png', { type: 'image/png' }),
]);
const handleSubmit = (files) => {
console.log('Submitted files:', files);
args.closeModal();
};
return _jsx(AttachmentsModal, { ...args, onSubmit: handleSubmit });
},
args: {
...Default.args,
isOpen: true,
},
parameters: {
docs: {
description: {
story: 'AttachmentsModal with a pre-selected file.',
},
},
},
};
export const LongFileList = {
render: (args) => {
const manyFiles = Array.from({ length: 20 }, (_, i) => new File(['content'], `file${i + 1}.png`, { type: 'image/png' }));
const [selectedFiles, setSelectedFiles] = React.useState(manyFiles);
const handleSubmit = (files) => {
console.log('Submitted files:', files);
args.closeModal();
};
return _jsx(AttachmentsModal, { ...args, onSubmit: handleSubmit });
},
args: {
...Default.args,
isOpen: true,
},
parameters: {
docs: {
description: {
story: 'AttachmentsModal with a long list of files to test scrolling behavior.',
},
},
},
};
//# sourceMappingURL=AttachmentsModal.stories.js.map