@qwickapps/react-framework 1.3.3 → 1.3.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +220 -0
- package/dist/components/forms/FormBlock.d.ts +1 -1
- package/dist/components/forms/FormBlock.d.ts.map +1 -1
- package/dist/components/input/SwitchInputField.d.ts +28 -0
- package/dist/components/input/SwitchInputField.d.ts.map +1 -0
- package/dist/components/input/index.d.ts +2 -0
- package/dist/components/input/index.d.ts.map +1 -1
- package/dist/components/layout/CollapsibleLayout/CollapsibleLayout.d.ts +34 -0
- package/dist/components/layout/CollapsibleLayout/CollapsibleLayout.d.ts.map +1 -0
- package/dist/components/layout/CollapsibleLayout/index.d.ts +9 -0
- package/dist/components/layout/CollapsibleLayout/index.d.ts.map +1 -0
- package/dist/components/layout/index.d.ts +2 -0
- package/dist/components/layout/index.d.ts.map +1 -1
- package/dist/index.esm.js +876 -6
- package/dist/index.js +880 -2
- package/dist/schemas/CollapsibleLayoutSchema.d.ts +31 -0
- package/dist/schemas/CollapsibleLayoutSchema.d.ts.map +1 -0
- package/dist/schemas/SwitchInputFieldSchema.d.ts +18 -0
- package/dist/schemas/SwitchInputFieldSchema.d.ts.map +1 -0
- package/dist/types/CollapsibleLayout.d.ts +142 -0
- package/dist/types/CollapsibleLayout.d.ts.map +1 -0
- package/dist/types/index.d.ts +1 -0
- package/dist/types/index.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/components/forms/FormBlock.tsx +2 -2
- package/src/components/input/SwitchInputField.tsx +165 -0
- package/src/components/input/index.ts +2 -0
- package/src/components/layout/CollapsibleLayout/CollapsibleLayout.tsx +554 -0
- package/src/components/layout/CollapsibleLayout/__tests__/CollapsibleLayout.test.tsx +1469 -0
- package/src/components/layout/CollapsibleLayout/index.tsx +17 -0
- package/src/components/layout/index.ts +4 -1
- package/src/components/pages/FormPage.tsx +1 -1
- package/src/schemas/CollapsibleLayoutSchema.ts +276 -0
- package/src/schemas/SwitchInputFieldSchema.ts +99 -0
- package/src/stories/CollapsibleLayout.stories.tsx +1566 -0
- package/src/types/CollapsibleLayout.ts +231 -0
- package/src/types/index.ts +1 -0
package/README.md
CHANGED
|
@@ -37,6 +37,7 @@ A complete React framework for building modern, responsive applications with int
|
|
|
37
37
|
- **Content Blocks**: Styled containers with variants (elevated, outlined, filled)
|
|
38
38
|
- **Feature Grids**: Showcase features with icons, titles, and actions
|
|
39
39
|
- **Section Containers**: Configurable spacing and background variants
|
|
40
|
+
- **CollapsibleLayout**: Advanced expandable/collapsible containers with state management
|
|
40
41
|
|
|
41
42
|
### 🎨 **Advanced Theming**
|
|
42
43
|
- **Theme Management**: Light, dark, and system theme support
|
|
@@ -301,6 +302,72 @@ import { Section, Content } from '@qwickapps/react-framework';
|
|
|
301
302
|
</Section>
|
|
302
303
|
```
|
|
303
304
|
|
|
305
|
+
### CollapsibleLayout
|
|
306
|
+
|
|
307
|
+
Create advanced expandable/collapsible sections with comprehensive features:
|
|
308
|
+
|
|
309
|
+
```tsx
|
|
310
|
+
import { CollapsibleLayout } from '@qwickapps/react-framework';
|
|
311
|
+
|
|
312
|
+
<CollapsibleLayout
|
|
313
|
+
title="User Settings"
|
|
314
|
+
subtitle="Configure your account preferences"
|
|
315
|
+
defaultCollapsed={false}
|
|
316
|
+
variant="outlined" // 'default' | 'outlined' | 'elevated' | 'filled'
|
|
317
|
+
triggerArea="header" // 'header' | 'button' | 'both'
|
|
318
|
+
animationStyle="slide" // 'fade' | 'slide' | 'scale'
|
|
319
|
+
persistState={true} // Remember state in localStorage
|
|
320
|
+
leadIcon={<SettingsIcon />}
|
|
321
|
+
headerActions={
|
|
322
|
+
<Button size="small">Edit</Button>
|
|
323
|
+
}
|
|
324
|
+
>
|
|
325
|
+
<Stack spacing={2}>
|
|
326
|
+
<TextField label="Display Name" />
|
|
327
|
+
<TextField label="Email" />
|
|
328
|
+
<Switch label="Email Notifications" />
|
|
329
|
+
</Stack>
|
|
330
|
+
</CollapsibleLayout>
|
|
331
|
+
```
|
|
332
|
+
|
|
333
|
+
**Key Features:**
|
|
334
|
+
- **Controlled & Uncontrolled State**: Use `collapsed` prop for controlled state or `defaultCollapsed` for uncontrolled
|
|
335
|
+
- **State Persistence**: `persistState` option saves collapsed state to localStorage
|
|
336
|
+
- **Multiple Animations**: Choose from fade, slide, or scale animations with customizable duration
|
|
337
|
+
- **Flexible Triggers**: Header click, button only, or both can trigger expand/collapse
|
|
338
|
+
- **Rich Content Support**: Supports React components, HTML strings, and mixed content
|
|
339
|
+
- **Accessibility Built-in**: ARIA attributes, keyboard navigation, and screen reader support
|
|
340
|
+
- **Visual Variants**: Material-UI inspired variants (outlined, elevated, filled)
|
|
341
|
+
- **CMS Integration**: Full data binding support for content management systems
|
|
342
|
+
|
|
343
|
+
**Advanced Usage:**
|
|
344
|
+
|
|
345
|
+
```tsx
|
|
346
|
+
// Controlled state with custom icons
|
|
347
|
+
const [isCollapsed, setIsCollapsed] = useState(false);
|
|
348
|
+
|
|
349
|
+
<CollapsibleLayout
|
|
350
|
+
title="Advanced Configuration"
|
|
351
|
+
collapsed={isCollapsed}
|
|
352
|
+
onToggle={setIsCollapsed}
|
|
353
|
+
collapsedIcon={<ExpandMoreIcon />}
|
|
354
|
+
expandedIcon={<ExpandLessIcon />}
|
|
355
|
+
collapsedView={
|
|
356
|
+
<Typography color="text.secondary">
|
|
357
|
+
Click to view configuration options...
|
|
358
|
+
</Typography>
|
|
359
|
+
}
|
|
360
|
+
footerView={
|
|
361
|
+
<Button size="small">Save Changes</Button>
|
|
362
|
+
}
|
|
363
|
+
>
|
|
364
|
+
{/* Complex form content */}
|
|
365
|
+
</CollapsibleLayout>
|
|
366
|
+
|
|
367
|
+
// Data binding with CMS
|
|
368
|
+
<CollapsibleLayout dataSource="settings.user-preferences" />
|
|
369
|
+
```
|
|
370
|
+
|
|
304
371
|
## CMS Content Components
|
|
305
372
|
|
|
306
373
|
Transform HTML strings and Markdown content into React components with intelligent element transformation and syntax highlighting.
|
|
@@ -646,6 +713,49 @@ interface TransformConfig {
|
|
|
646
713
|
}
|
|
647
714
|
```
|
|
648
715
|
|
|
716
|
+
### CollapsibleLayout Component
|
|
717
|
+
|
|
718
|
+
```tsx
|
|
719
|
+
interface CollapsibleLayoutProps extends WithBaseProps, WithDataBinding {
|
|
720
|
+
// State Management
|
|
721
|
+
collapsed?: boolean; // Controlled collapsed state
|
|
722
|
+
defaultCollapsed?: boolean; // Initial collapsed state (uncontrolled)
|
|
723
|
+
onToggle?: (collapsed: boolean) => void; // State change callback
|
|
724
|
+
persistState?: boolean; // Save state to localStorage
|
|
725
|
+
storageKey?: string; // Custom storage key
|
|
726
|
+
|
|
727
|
+
// Content
|
|
728
|
+
title?: string; // Header title
|
|
729
|
+
subtitle?: string; // Header subtitle
|
|
730
|
+
leadIcon?: ReactNode; // Icon before title
|
|
731
|
+
headerActions?: ReactNode; // Actions in header (buttons, etc.)
|
|
732
|
+
children?: ReactNode; // Main expandable content
|
|
733
|
+
collapsedView?: ReactNode; // Content shown when collapsed
|
|
734
|
+
footerView?: ReactNode; // Always-visible footer content
|
|
735
|
+
|
|
736
|
+
// Behavior
|
|
737
|
+
triggerArea?: 'header' | 'button' | 'both'; // Click trigger area
|
|
738
|
+
animationStyle?: 'fade' | 'slide' | 'scale'; // Animation type
|
|
739
|
+
animationDuration?: number; // Animation duration (ms)
|
|
740
|
+
disableAnimations?: boolean; // Disable all animations
|
|
741
|
+
|
|
742
|
+
// Styling
|
|
743
|
+
variant?: 'default' | 'outlined' | 'elevated' | 'filled';
|
|
744
|
+
headerSpacing?: 'compact' | 'comfortable' | 'spacious';
|
|
745
|
+
contentSpacing?: 'compact' | 'comfortable' | 'spacious';
|
|
746
|
+
showDivider?: boolean; // Show section dividers
|
|
747
|
+
|
|
748
|
+
// Icons
|
|
749
|
+
collapsedIcon?: ReactNode; // Custom collapsed state icon
|
|
750
|
+
expandedIcon?: ReactNode; // Custom expanded state icon
|
|
751
|
+
|
|
752
|
+
// Accessibility
|
|
753
|
+
toggleAriaLabel?: string; // ARIA label for toggle button
|
|
754
|
+
'aria-describedby'?: string; // Describedby reference
|
|
755
|
+
contentAriaProps?: object; // Additional ARIA props
|
|
756
|
+
}
|
|
757
|
+
```
|
|
758
|
+
|
|
649
759
|
## Advanced Usage
|
|
650
760
|
|
|
651
761
|
### Custom Layout Composition
|
|
@@ -699,6 +809,113 @@ function LandingPage() {
|
|
|
699
809
|
}
|
|
700
810
|
```
|
|
701
811
|
|
|
812
|
+
### Advanced CollapsibleLayout Patterns
|
|
813
|
+
|
|
814
|
+
```tsx
|
|
815
|
+
// Settings Dashboard with Multiple Sections
|
|
816
|
+
function SettingsDashboard() {
|
|
817
|
+
return (
|
|
818
|
+
<QwickApp appName="Settings">
|
|
819
|
+
<Stack spacing={2}>
|
|
820
|
+
<CollapsibleLayout
|
|
821
|
+
title="Account Settings"
|
|
822
|
+
subtitle="Profile and security preferences"
|
|
823
|
+
defaultCollapsed={false}
|
|
824
|
+
variant="outlined"
|
|
825
|
+
leadIcon={<PersonIcon />}
|
|
826
|
+
persistState={true}
|
|
827
|
+
storageKey="settings-account"
|
|
828
|
+
>
|
|
829
|
+
<Stack spacing={2}>
|
|
830
|
+
<TextField label="Display Name" />
|
|
831
|
+
<TextField label="Email Address" />
|
|
832
|
+
<Switch label="Two-Factor Authentication" />
|
|
833
|
+
</Stack>
|
|
834
|
+
</CollapsibleLayout>
|
|
835
|
+
|
|
836
|
+
<CollapsibleLayout
|
|
837
|
+
title="Privacy Settings"
|
|
838
|
+
subtitle="Data usage and visibility"
|
|
839
|
+
defaultCollapsed={true}
|
|
840
|
+
variant="outlined"
|
|
841
|
+
leadIcon={<PrivacyIcon />}
|
|
842
|
+
triggerArea="both"
|
|
843
|
+
animationStyle="fade"
|
|
844
|
+
>
|
|
845
|
+
<Stack spacing={2}>
|
|
846
|
+
<Switch label="Public Profile" />
|
|
847
|
+
<Switch label="Activity Tracking" />
|
|
848
|
+
<TextField
|
|
849
|
+
label="Data Retention"
|
|
850
|
+
select
|
|
851
|
+
defaultValue="1year"
|
|
852
|
+
/>
|
|
853
|
+
</Stack>
|
|
854
|
+
</CollapsibleLayout>
|
|
855
|
+
</Stack>
|
|
856
|
+
</QwickApp>
|
|
857
|
+
);
|
|
858
|
+
}
|
|
859
|
+
|
|
860
|
+
// FAQ Section with Collapsed Previews
|
|
861
|
+
function FAQSection() {
|
|
862
|
+
const faqs = [
|
|
863
|
+
{
|
|
864
|
+
question: "How do I integrate with my CMS?",
|
|
865
|
+
preview: "Integration involves data providers and configuration...",
|
|
866
|
+
answer: "Detailed integration steps with code examples..."
|
|
867
|
+
},
|
|
868
|
+
// ... more FAQs
|
|
869
|
+
];
|
|
870
|
+
|
|
871
|
+
return (
|
|
872
|
+
<Stack spacing={2}>
|
|
873
|
+
{faqs.map((faq, index) => (
|
|
874
|
+
<CollapsibleLayout
|
|
875
|
+
key={index}
|
|
876
|
+
title={faq.question}
|
|
877
|
+
defaultCollapsed={true}
|
|
878
|
+
variant="outlined"
|
|
879
|
+
collapsedView={
|
|
880
|
+
<Typography color="text.secondary" sx={{ fontStyle: 'italic' }}>
|
|
881
|
+
{faq.preview}
|
|
882
|
+
</Typography>
|
|
883
|
+
}
|
|
884
|
+
>
|
|
885
|
+
<Typography>{faq.answer}</Typography>
|
|
886
|
+
</CollapsibleLayout>
|
|
887
|
+
))}
|
|
888
|
+
</Stack>
|
|
889
|
+
);
|
|
890
|
+
}
|
|
891
|
+
|
|
892
|
+
// Complex Data Dashboard
|
|
893
|
+
function DataDashboard() {
|
|
894
|
+
return (
|
|
895
|
+
<CollapsibleLayout
|
|
896
|
+
title="Sales Analytics"
|
|
897
|
+
subtitle="Q4 2024 performance metrics"
|
|
898
|
+
variant="elevated"
|
|
899
|
+
headerActions={
|
|
900
|
+
<Stack direction="row" spacing={1}>
|
|
901
|
+
<Chip label="Live" color="success" size="small" />
|
|
902
|
+
<Button size="small">Export</Button>
|
|
903
|
+
</Stack>
|
|
904
|
+
}
|
|
905
|
+
leadIcon={<ChartIcon />}
|
|
906
|
+
footerView={
|
|
907
|
+
<Typography variant="caption" color="text.secondary">
|
|
908
|
+
Last updated: {new Date().toLocaleTimeString()}
|
|
909
|
+
</Typography>
|
|
910
|
+
}
|
|
911
|
+
>
|
|
912
|
+
{/* Complex dashboard content with charts, tables, etc. */}
|
|
913
|
+
<DashboardContent />
|
|
914
|
+
</CollapsibleLayout>
|
|
915
|
+
);
|
|
916
|
+
}
|
|
917
|
+
```
|
|
918
|
+
|
|
702
919
|
### Accessing App Context
|
|
703
920
|
|
|
704
921
|
```tsx
|
|
@@ -728,6 +945,9 @@ import type {
|
|
|
728
945
|
HeroBlockProps,
|
|
729
946
|
ColumnLayoutProps,
|
|
730
947
|
FeatureItem,
|
|
948
|
+
CollapsibleLayoutProps,
|
|
949
|
+
CollapsibleLayoutViewProps,
|
|
950
|
+
UseCollapsibleLayoutState,
|
|
731
951
|
} from '@qwickapps/react-framework';
|
|
732
952
|
```
|
|
733
953
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormBlock.d.ts","sourceRoot":"","sources":["../../../src/components/forms/FormBlock.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAYH,OAAO,KAAK,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACrE,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,cAAc,MAAM,+BAA+B,CAAC;AAI3D,KAAK,kBAAkB,GAAG,UAAU,CAAC,cAAc,CAAC,GAAG;IACrD;;;OAGG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEzB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IAEtC;;OAEG;IACH,
|
|
1
|
+
{"version":3,"file":"FormBlock.d.ts","sourceRoot":"","sources":["../../../src/components/forms/FormBlock.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAYH,OAAO,KAAK,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACrE,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,cAAc,MAAM,+BAA+B,CAAC;AAI3D,KAAK,kBAAkB,GAAG,UAAU,CAAC,cAAc,CAAC,GAAG;IACrD;;;OAGG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEzB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IAEtC;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B,CAAC;AAEF,MAAM,WAAW,cAAe,SAAQ,kBAAkB,EAAE,eAAe;CAAI;AAyK/E;;;GAGG;AACH,iBAAS,SAAS,CAAC,KAAK,EAAE,cAAc,kDAwDvC;AAKD,eAAe,SAAS,CAAC"}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* SwitchInputField - Switch toggle component with data binding support
|
|
3
|
+
*
|
|
4
|
+
* Provides a standardized switch field with:
|
|
5
|
+
* - Consistent Material-UI styling
|
|
6
|
+
* - Data binding capabilities
|
|
7
|
+
* - Label and helper text support
|
|
8
|
+
* - Focus and error handling
|
|
9
|
+
*
|
|
10
|
+
* Copyright (c) 2025 QwickApps.com. All rights reserved.
|
|
11
|
+
*/
|
|
12
|
+
import type { WithDataBinding, ModelProps } from '@qwickapps/schema';
|
|
13
|
+
import SwitchInputFieldModel from '../../schemas/SwitchInputFieldSchema';
|
|
14
|
+
type SwitchInputFieldViewProps = ModelProps<SwitchInputFieldModel> & {
|
|
15
|
+
/** Change handler */
|
|
16
|
+
onChange?: (checked: boolean) => void;
|
|
17
|
+
/** Focus handler */
|
|
18
|
+
onFocus?: () => void;
|
|
19
|
+
};
|
|
20
|
+
export interface SwitchInputFieldProps extends SwitchInputFieldViewProps, WithDataBinding {
|
|
21
|
+
}
|
|
22
|
+
/**
|
|
23
|
+
* SwitchInputField component with data binding support
|
|
24
|
+
* Supports both traditional props and dataSource-driven rendering
|
|
25
|
+
*/
|
|
26
|
+
declare function SwitchInputField(props: SwitchInputFieldProps): import("react/jsx-runtime").JSX.Element | null;
|
|
27
|
+
export default SwitchInputField;
|
|
28
|
+
//# sourceMappingURL=SwitchInputField.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SwitchInputField.d.ts","sourceRoot":"","sources":["../../../src/components/input/SwitchInputField.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAWH,OAAO,KAAK,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAGrE,OAAO,qBAAqB,MAAM,sCAAsC,CAAC;AAEzE,KAAK,yBAAyB,GAAG,UAAU,CAAC,qBAAqB,CAAC,GAAG;IACnE,qBAAqB;IACrB,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,oBAAoB;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,MAAM,WAAW,qBAAsB,SAAQ,yBAAyB,EAAE,eAAe;CAAG;AA2D5F;;;GAGG;AACH,iBAAS,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,kDA+DrD;AAKD,eAAe,gBAAgB,CAAC"}
|
|
@@ -7,11 +7,13 @@
|
|
|
7
7
|
export { default as ChoiceInputField } from './ChoiceInputField';
|
|
8
8
|
export { default as HtmlInputField } from './HtmlInputField';
|
|
9
9
|
export { default as SelectInputField } from './SelectInputField';
|
|
10
|
+
export { default as SwitchInputField } from './SwitchInputField';
|
|
10
11
|
export { default as TextField } from './TextField';
|
|
11
12
|
export { default as TextInputField } from './TextInputField';
|
|
12
13
|
export type { ChoiceInputFieldProps } from './ChoiceInputField';
|
|
13
14
|
export type { HtmlInputFieldProps } from './HtmlInputField';
|
|
14
15
|
export type { SelectInputFieldProps, SelectOption } from './SelectInputField';
|
|
16
|
+
export type { SwitchInputFieldProps } from './SwitchInputField';
|
|
15
17
|
export type { TextFieldProps } from './TextField';
|
|
16
18
|
export type { TextInputFieldProps } from './TextInputField';
|
|
17
19
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/input/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAE7D,YAAY,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAChE,YAAY,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAC5D,YAAY,EAAE,qBAAqB,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAC9E,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClD,YAAY,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/input/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAE7D,YAAY,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAChE,YAAY,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAC5D,YAAY,EAAE,qBAAqB,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAC9E,YAAY,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAChE,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClD,YAAY,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC"}
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* CollapsibleLayout Component - Advanced expandable/collapsible container
|
|
3
|
+
*
|
|
4
|
+
* Features:
|
|
5
|
+
* - Controlled and uncontrolled state management
|
|
6
|
+
* - Multiple animation styles (fade, slide, scale)
|
|
7
|
+
* - Customizable trigger areas (button, header, both)
|
|
8
|
+
* - localStorage persistence
|
|
9
|
+
* - Full accessibility support
|
|
10
|
+
* - Material-UI integration with themes
|
|
11
|
+
* - Multiple visual variants
|
|
12
|
+
*
|
|
13
|
+
* Copyright (c) 2025 QwickApps.com. All rights reserved.
|
|
14
|
+
*/
|
|
15
|
+
import { CollapsibleLayoutViewProps, CollapsibleLayoutProps, UseCollapsibleLayoutState } from '../../../types/CollapsibleLayout';
|
|
16
|
+
/**
|
|
17
|
+
* Custom hook for managing collapsible state - simplified approach
|
|
18
|
+
*/
|
|
19
|
+
declare function useCollapsibleState(controlled: boolean, collapsedProp?: boolean, defaultCollapsedProp?: boolean, onToggleProp?: (collapsed: boolean) => void, persistState?: boolean, storageKey?: string): UseCollapsibleLayoutState;
|
|
20
|
+
/**
|
|
21
|
+
* Core CollapsibleLayout View component
|
|
22
|
+
*/
|
|
23
|
+
declare function CollapsibleLayoutView({ collapsed: collapsedProp, defaultCollapsed, onToggle, title, subtitle, leadIcon, headerActions, collapsedView, children, footerView, triggerArea, animationStyle, persistState, storageKey, animationDuration, disableAnimations, collapsedIcon, expandedIcon, showDivider, variant, headerSpacing, contentSpacing, toggleAriaLabel, 'aria-describedby': ariaDescribedBy, contentAriaProps, containerClassName, headerClassName, contentClassName, footerClassName, ...restProps }: CollapsibleLayoutViewProps): import("react/jsx-runtime").JSX.Element;
|
|
24
|
+
/**
|
|
25
|
+
* Main CollapsibleLayout component with data binding support
|
|
26
|
+
*/
|
|
27
|
+
declare function CollapsibleLayout(props: CollapsibleLayoutProps): import("react/jsx-runtime").JSX.Element | null;
|
|
28
|
+
declare namespace CollapsibleLayout {
|
|
29
|
+
var defaultProps: Partial<CollapsibleLayoutProps>;
|
|
30
|
+
}
|
|
31
|
+
export default CollapsibleLayout;
|
|
32
|
+
export { CollapsibleLayout, CollapsibleLayoutView, useCollapsibleState };
|
|
33
|
+
export type { CollapsibleLayoutProps, CollapsibleLayoutViewProps, UseCollapsibleLayoutState };
|
|
34
|
+
//# sourceMappingURL=CollapsibleLayout.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CollapsibleLayout.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/CollapsibleLayout/CollapsibleLayout.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAwBH,OAAO,EACL,0BAA0B,EAC1B,sBAAsB,EACtB,yBAAyB,EAI1B,MAAM,kCAAkC,CAAC;AAG1C;;GAEG;AACH,iBAAS,mBAAmB,CAC1B,UAAU,EAAE,OAAO,EACnB,aAAa,CAAC,EAAE,OAAO,EACvB,oBAAoB,CAAC,EAAE,OAAO,EAC9B,YAAY,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,EAC3C,YAAY,CAAC,EAAE,OAAO,EACtB,UAAU,CAAC,EAAE,MAAM,GAClB,yBAAyB,CA4D3B;AAED;;GAEG;AACH,iBAAS,qBAAqB,CAAC,EAE7B,SAAS,EAAE,aAAa,EACxB,gBAAwB,EACxB,QAAQ,EAGR,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,aAAa,EACb,aAAa,EACb,QAAQ,EACR,UAAU,EAGV,WAAoB,EACpB,cAAwB,EACxB,YAAoB,EACpB,UAAU,EACV,iBAAuB,EACvB,iBAAyB,EAGzB,aAAa,EACb,YAAY,EAGZ,WAAkB,EAClB,OAAmB,EACnB,aAA6B,EAC7B,cAA8B,EAG9B,eAA6C,EAC7C,kBAAkB,EAAE,eAAe,EACnC,gBAAqB,EAGrB,kBAAkB,EAClB,eAAe,EACf,gBAAgB,EAChB,eAAe,EAEf,GAAG,SAAS,EACb,EAAE,0BAA0B,2CAuU5B;AAED;;GAEG;AACH,iBAAS,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,kDA+CvD;kBA/CQ,iBAAiB;;;AAoD1B,eAAe,iBAAiB,CAAC;AACjC,OAAO,EAAE,iBAAiB,EAAE,qBAAqB,EAAE,mBAAmB,EAAE,CAAC;AACzE,YAAY,EAAE,sBAAsB,EAAE,0BAA0B,EAAE,yBAAyB,EAAE,CAAC"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* CollapsibleLayout Component Exports
|
|
3
|
+
*
|
|
4
|
+
* Copyright (c) 2025 QwickApps.com. All rights reserved.
|
|
5
|
+
*/
|
|
6
|
+
export { default } from './CollapsibleLayout';
|
|
7
|
+
export { CollapsibleLayout, CollapsibleLayoutView, useCollapsibleState, } from './CollapsibleLayout';
|
|
8
|
+
export type { CollapsibleLayoutProps, CollapsibleLayoutViewProps, UseCollapsibleLayoutState, } from './CollapsibleLayout';
|
|
9
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/CollapsibleLayout/index.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EACL,iBAAiB,EACjB,qBAAqB,EACrB,mBAAmB,GACpB,MAAM,qBAAqB,CAAC;AAC7B,YAAY,EACV,sBAAsB,EACtB,0BAA0B,EAC1B,yBAAyB,GAC1B,MAAM,qBAAqB,CAAC"}
|
|
@@ -9,4 +9,6 @@ export { GridLayout } from './GridLayout';
|
|
|
9
9
|
export type { GridLayoutProps } from './GridLayout';
|
|
10
10
|
export { GridCell } from './GridCell';
|
|
11
11
|
export type { GridCellProps } from './GridCell';
|
|
12
|
+
export { CollapsibleLayout, CollapsibleLayoutView, useCollapsibleState } from './CollapsibleLayout';
|
|
13
|
+
export type { CollapsibleLayoutProps, CollapsibleLayoutViewProps, UseCollapsibleLayoutState } from './CollapsibleLayout';
|
|
12
14
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/layout/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAEpD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/layout/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAEpD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAEhD,OAAO,EAAE,iBAAiB,EAAE,qBAAqB,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;AACpG,YAAY,EAAE,sBAAsB,EAAE,0BAA0B,EAAE,yBAAyB,EAAE,MAAM,qBAAqB,CAAC"}
|