@xylabs/react-accordion 2.14.19

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.
@@ -0,0 +1,24 @@
1
+ import { AccordionProps } from '@mui/material';
2
+ import { Override } from '@xylabs/sdk-js';
3
+ import { ReactNode } from 'react';
4
+ interface SimpleAccordionCardAdditionalProps extends AccordionProps {
5
+ name: string;
6
+ linkText?: string;
7
+ to?: string;
8
+ href?: string;
9
+ description?: string;
10
+ expanded?: boolean;
11
+ onChange?: () => void;
12
+ }
13
+ interface OptionalChildren {
14
+ children?: ReactNode;
15
+ }
16
+ export declare type SimpleAccordionCardProps = Override<SimpleAccordionCardAdditionalProps, OptionalChildren>;
17
+ interface AccordionGroupProps {
18
+ defaultExpandedIndex?: number;
19
+ data?: SimpleAccordionCardProps[];
20
+ }
21
+ export declare const AccordionGroup: React.FC<AccordionGroupProps>;
22
+ export declare const SimpleAccordion: React.FC<SimpleAccordionCardProps>;
23
+ export {};
24
+ //# sourceMappingURL=AccordionGroup.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"AccordionGroup.d.ts","sourceRoot":"","sources":["../../src/AccordionGroup.tsx"],"names":[],"mappings":"AACA,OAAO,EAA+B,cAAc,EAAyD,MAAM,eAAe,CAAA;AAElI,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AACzC,OAAO,EAAE,SAAS,EAAY,MAAM,OAAO,CAAA;AAE3C,UAAU,kCAAmC,SAAQ,cAAc;IACjE,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;CACtB;AAED,UAAU,gBAAgB;IACxB,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB;AAED,oBAAY,wBAAwB,GAAG,QAAQ,CAAC,kCAAkC,EAAE,gBAAgB,CAAC,CAAA;AAErG,UAAU,mBAAmB;IAC3B,oBAAoB,CAAC,EAAE,MAAM,CAAA;IAC7B,IAAI,CAAC,EAAE,wBAAwB,EAAE,CAAA;CAClC;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAUxD,CAAA;AACD,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CAyB9D,CAAA"}
@@ -0,0 +1,20 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.SimpleAccordion = exports.AccordionGroup = void 0;
4
+ const jsx_runtime_1 = require("react/jsx-runtime");
5
+ const icons_material_1 = require("@mui/icons-material");
6
+ const material_1 = require("@mui/material");
7
+ const react_button_1 = require("@xylabs/react-button");
8
+ const react_1 = require("react");
9
+ const AccordionGroup = ({ defaultExpandedIndex, data }) => {
10
+ const [expandedIndex, setExpandedIndex] = (0, react_1.useState)(defaultExpandedIndex !== null && defaultExpandedIndex !== void 0 ? defaultExpandedIndex : 0);
11
+ return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: data === null || data === void 0 ? void 0 : data.map((item, index) => ((0, jsx_runtime_1.jsx)(exports.SimpleAccordion, Object.assign({}, item, { expanded: index === expandedIndex, onChange: () => setExpandedIndex(index) }), index))) }));
12
+ };
13
+ exports.AccordionGroup = AccordionGroup;
14
+ const SimpleAccordion = ({ name, linkText, to, href, description, expanded, onChange, children }) => {
15
+ const theme = (0, material_1.useTheme)();
16
+ const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('md'));
17
+ return ((0, jsx_runtime_1.jsxs)(material_1.Accordion, Object.assign({ expanded: expanded, onChange: () => onChange === null || onChange === void 0 ? void 0 : onChange() }, { children: [(0, jsx_runtime_1.jsx)(material_1.AccordionSummary, Object.assign({ expandIcon: (0, jsx_runtime_1.jsx)(icons_material_1.ExpandMoreRounded, {}), "aria-controls": "panel1bh-content", id: "panel1bh-header" }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h6", textAlign: "left", gutterBottom: isMobile ? true : false }, { children: name })) })), (0, jsx_runtime_1.jsxs)(material_1.AccordionDetails, { children: [description && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", fontWeight: 400, textAlign: "left" }, { children: description }))), children, (href || to) && ((0, jsx_runtime_1.jsx)(react_button_1.ButtonEx, Object.assign({ href: href, to: to, target: href !== null && href !== void 0 ? href : '_blank' }, { children: linkText !== null && linkText !== void 0 ? linkText : 'Learn More' })))] })] })));
18
+ };
19
+ exports.SimpleAccordion = SimpleAccordion;
20
+ //# sourceMappingURL=AccordionGroup.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"AccordionGroup.js","sourceRoot":"","sources":["../../src/AccordionGroup.tsx"],"names":[],"mappings":";;;;AAAA,wDAAuD;AACvD,4CAAkI;AAClI,uDAA+C;AAE/C,iCAA2C;AAuBpC,MAAM,cAAc,GAAkC,CAAC,EAAE,oBAAoB,EAAE,IAAI,EAAE,EAAE,EAAE;IAC9F,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,IAAA,gBAAQ,EAAC,oBAAoB,aAApB,oBAAoB,cAApB,oBAAoB,GAAI,CAAC,CAAC,CAAA;IAE7E,OAAO,CACL,2DACG,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CAC1B,uBAAC,uBAAe,oBAAiB,IAAI,IAAE,QAAQ,EAAE,KAAK,KAAK,aAAa,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,gBAAgB,CAAC,KAAK,CAAC,KAA3F,KAAK,CAA0F,CACtH,CAAC,GACD,CACJ,CAAA;AACH,CAAC,CAAA;AAVY,QAAA,cAAc,kBAU1B;AACM,MAAM,eAAe,GAAuC,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,EAAE;IAC7I,MAAM,KAAK,GAAG,IAAA,mBAAQ,GAAE,CAAA;IACxB,MAAM,QAAQ,GAAG,IAAA,wBAAa,EAAC,KAAK,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;IAC5D,OAAO,CACL,wBAAC,oBAAS,kBAAC,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,EAAI,iBACzD,uBAAC,2BAAgB,kBAAC,UAAU,EAAE,uBAAC,kCAAiB,KAAG,mBAAgB,kBAAkB,EAAC,EAAE,EAAC,iBAAiB,gBACxG,uBAAC,qBAAU,kBAAC,OAAO,EAAC,IAAI,EAAC,SAAS,EAAC,MAAM,EAAC,YAAY,EAAE,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,gBAC5E,IAAI,IACM,IACI,EACnB,wBAAC,2BAAgB,eACd,WAAW,IAAI,CACd,uBAAC,qBAAU,kBAAC,OAAO,EAAC,OAAO,EAAC,UAAU,EAAE,GAAG,EAAE,SAAS,EAAC,MAAM,gBAC1D,WAAW,IACD,CACd,EACA,QAAQ,EACR,CAAC,IAAI,IAAI,EAAE,CAAC,IAAI,CACf,uBAAC,uBAAQ,kBAAC,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,QAAQ,gBACnD,QAAQ,aAAR,QAAQ,cAAR,QAAQ,GAAI,YAAY,IAChB,CACZ,IACgB,KACT,CACb,CAAA;AACH,CAAC,CAAA;AAzBY,QAAA,eAAe,mBAyB3B"}
@@ -0,0 +1,2 @@
1
+ export * from './AccordionGroup';
2
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAA"}
@@ -0,0 +1,5 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ const tslib_1 = require("tslib");
4
+ tslib_1.__exportStar(require("./AccordionGroup"), exports);
5
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";;;AAAA,2DAAgC"}
package/dist/docs.json ADDED
@@ -0,0 +1,215 @@
1
+ {
2
+ "id": 0,
3
+ "name": "@xylabs/react-accordion",
4
+ "kind": 1,
5
+ "kindString": "Project",
6
+ "flags": {},
7
+ "originalName": "",
8
+ "children": [
9
+ {
10
+ "id": 1,
11
+ "name": "SimpleAccordionCardProps",
12
+ "kind": 4194304,
13
+ "kindString": "Type alias",
14
+ "flags": {},
15
+ "sources": [
16
+ {
17
+ "fileName": "packages/accordion/src/AccordionGroup.tsx",
18
+ "line": 21,
19
+ "character": 12,
20
+ "url": "https://github.com/xylabs/sdk-react/blob/cde8f39/packages/accordion/src/AccordionGroup.tsx#L21"
21
+ }
22
+ ],
23
+ "type": {
24
+ "type": "reference",
25
+ "typeArguments": [
26
+ {
27
+ "type": "reference",
28
+ "name": "SimpleAccordionCardAdditionalProps"
29
+ },
30
+ {
31
+ "type": "reference",
32
+ "name": "OptionalChildren"
33
+ }
34
+ ],
35
+ "name": "Override",
36
+ "qualifiedName": "Override",
37
+ "package": "@xylabs/sdk-js"
38
+ }
39
+ },
40
+ {
41
+ "id": 2,
42
+ "name": "AccordionGroup",
43
+ "kind": 64,
44
+ "kindString": "Function",
45
+ "flags": {},
46
+ "sources": [
47
+ {
48
+ "fileName": "packages/accordion/src/AccordionGroup.tsx",
49
+ "line": 28,
50
+ "character": 13,
51
+ "url": "https://github.com/xylabs/sdk-react/blob/cde8f39/packages/accordion/src/AccordionGroup.tsx#L28"
52
+ }
53
+ ],
54
+ "signatures": [
55
+ {
56
+ "id": 3,
57
+ "name": "AccordionGroup",
58
+ "kind": 4096,
59
+ "kindString": "Call signature",
60
+ "flags": {},
61
+ "parameters": [
62
+ {
63
+ "id": 4,
64
+ "name": "props",
65
+ "kind": 32768,
66
+ "kindString": "Parameter",
67
+ "flags": {},
68
+ "type": {
69
+ "type": "reference",
70
+ "name": "AccordionGroupProps"
71
+ }
72
+ },
73
+ {
74
+ "id": 5,
75
+ "name": "context",
76
+ "kind": 32768,
77
+ "kindString": "Parameter",
78
+ "flags": {
79
+ "isOptional": true
80
+ },
81
+ "type": {
82
+ "type": "intrinsic",
83
+ "name": "any"
84
+ }
85
+ }
86
+ ],
87
+ "type": {
88
+ "type": "union",
89
+ "types": [
90
+ {
91
+ "type": "literal",
92
+ "value": null
93
+ },
94
+ {
95
+ "type": "reference",
96
+ "typeArguments": [
97
+ {
98
+ "type": "intrinsic",
99
+ "name": "any"
100
+ },
101
+ {
102
+ "type": "intrinsic",
103
+ "name": "any"
104
+ }
105
+ ],
106
+ "name": "ReactElement",
107
+ "qualifiedName": "React.ReactElement",
108
+ "package": "@types/react"
109
+ }
110
+ ]
111
+ }
112
+ }
113
+ ]
114
+ },
115
+ {
116
+ "id": 6,
117
+ "name": "SimpleAccordion",
118
+ "kind": 64,
119
+ "kindString": "Function",
120
+ "flags": {},
121
+ "sources": [
122
+ {
123
+ "fileName": "packages/accordion/src/AccordionGroup.tsx",
124
+ "line": 39,
125
+ "character": 13,
126
+ "url": "https://github.com/xylabs/sdk-react/blob/cde8f39/packages/accordion/src/AccordionGroup.tsx#L39"
127
+ }
128
+ ],
129
+ "signatures": [
130
+ {
131
+ "id": 7,
132
+ "name": "SimpleAccordion",
133
+ "kind": 4096,
134
+ "kindString": "Call signature",
135
+ "flags": {},
136
+ "parameters": [
137
+ {
138
+ "id": 8,
139
+ "name": "props",
140
+ "kind": 32768,
141
+ "kindString": "Parameter",
142
+ "flags": {},
143
+ "type": {
144
+ "type": "reference",
145
+ "id": 1,
146
+ "name": "SimpleAccordionCardProps"
147
+ }
148
+ },
149
+ {
150
+ "id": 9,
151
+ "name": "context",
152
+ "kind": 32768,
153
+ "kindString": "Parameter",
154
+ "flags": {
155
+ "isOptional": true
156
+ },
157
+ "type": {
158
+ "type": "intrinsic",
159
+ "name": "any"
160
+ }
161
+ }
162
+ ],
163
+ "type": {
164
+ "type": "union",
165
+ "types": [
166
+ {
167
+ "type": "literal",
168
+ "value": null
169
+ },
170
+ {
171
+ "type": "reference",
172
+ "typeArguments": [
173
+ {
174
+ "type": "intrinsic",
175
+ "name": "any"
176
+ },
177
+ {
178
+ "type": "intrinsic",
179
+ "name": "any"
180
+ }
181
+ ],
182
+ "name": "ReactElement",
183
+ "qualifiedName": "React.ReactElement",
184
+ "package": "@types/react"
185
+ }
186
+ ]
187
+ }
188
+ }
189
+ ]
190
+ }
191
+ ],
192
+ "groups": [
193
+ {
194
+ "title": "Type Aliases",
195
+ "children": [
196
+ 1
197
+ ]
198
+ },
199
+ {
200
+ "title": "Functions",
201
+ "children": [
202
+ 2,
203
+ 6
204
+ ]
205
+ }
206
+ ],
207
+ "sources": [
208
+ {
209
+ "fileName": "packages/accordion/src/index.ts",
210
+ "line": 1,
211
+ "character": 0,
212
+ "url": "https://github.com/xylabs/sdk-react/blob/cde8f39/packages/accordion/src/index.ts#L1"
213
+ }
214
+ ]
215
+ }
@@ -0,0 +1,24 @@
1
+ import { AccordionProps } from '@mui/material';
2
+ import { Override } from '@xylabs/sdk-js';
3
+ import { ReactNode } from 'react';
4
+ interface SimpleAccordionCardAdditionalProps extends AccordionProps {
5
+ name: string;
6
+ linkText?: string;
7
+ to?: string;
8
+ href?: string;
9
+ description?: string;
10
+ expanded?: boolean;
11
+ onChange?: () => void;
12
+ }
13
+ interface OptionalChildren {
14
+ children?: ReactNode;
15
+ }
16
+ export declare type SimpleAccordionCardProps = Override<SimpleAccordionCardAdditionalProps, OptionalChildren>;
17
+ interface AccordionGroupProps {
18
+ defaultExpandedIndex?: number;
19
+ data?: SimpleAccordionCardProps[];
20
+ }
21
+ export declare const AccordionGroup: React.FC<AccordionGroupProps>;
22
+ export declare const SimpleAccordion: React.FC<SimpleAccordionCardProps>;
23
+ export {};
24
+ //# sourceMappingURL=AccordionGroup.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"AccordionGroup.d.ts","sourceRoot":"","sources":["../../src/AccordionGroup.tsx"],"names":[],"mappings":"AACA,OAAO,EAA+B,cAAc,EAAyD,MAAM,eAAe,CAAA;AAElI,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AACzC,OAAO,EAAE,SAAS,EAAY,MAAM,OAAO,CAAA;AAE3C,UAAU,kCAAmC,SAAQ,cAAc;IACjE,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;CACtB;AAED,UAAU,gBAAgB;IACxB,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB;AAED,oBAAY,wBAAwB,GAAG,QAAQ,CAAC,kCAAkC,EAAE,gBAAgB,CAAC,CAAA;AAErG,UAAU,mBAAmB;IAC3B,oBAAoB,CAAC,EAAE,MAAM,CAAA;IAC7B,IAAI,CAAC,EAAE,wBAAwB,EAAE,CAAA;CAClC;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAUxD,CAAA;AACD,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CAyB9D,CAAA"}
@@ -0,0 +1,15 @@
1
+ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { ExpandMoreRounded } from '@mui/icons-material';
3
+ import { Accordion, AccordionDetails, AccordionSummary, Typography, useMediaQuery, useTheme } from '@mui/material';
4
+ import { ButtonEx } from '@xylabs/react-button';
5
+ import { useState } from 'react';
6
+ export const AccordionGroup = ({ defaultExpandedIndex, data }) => {
7
+ const [expandedIndex, setExpandedIndex] = useState(defaultExpandedIndex ?? 0);
8
+ return (_jsx(_Fragment, { children: data?.map((item, index) => (_jsx(SimpleAccordion, { ...item, expanded: index === expandedIndex, onChange: () => setExpandedIndex(index) }, index))) }));
9
+ };
10
+ export const SimpleAccordion = ({ name, linkText, to, href, description, expanded, onChange, children }) => {
11
+ const theme = useTheme();
12
+ const isMobile = useMediaQuery(theme.breakpoints.down('md'));
13
+ return (_jsxs(Accordion, { expanded: expanded, onChange: () => onChange?.(), children: [_jsx(AccordionSummary, { expandIcon: _jsx(ExpandMoreRounded, {}), "aria-controls": "panel1bh-content", id: "panel1bh-header", children: _jsx(Typography, { variant: "h6", textAlign: "left", gutterBottom: isMobile ? true : false, children: name }) }), _jsxs(AccordionDetails, { children: [description && (_jsx(Typography, { variant: "body1", fontWeight: 400, textAlign: "left", children: description })), children, (href || to) && (_jsx(ButtonEx, { href: href, to: to, target: href ?? '_blank', children: linkText ?? 'Learn More' }))] })] }));
14
+ };
15
+ //# sourceMappingURL=AccordionGroup.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"AccordionGroup.js","sourceRoot":"","sources":["../../src/AccordionGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AACvD,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAkB,gBAAgB,EAAE,UAAU,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAClI,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAA;AAE/C,OAAO,EAAa,QAAQ,EAAE,MAAM,OAAO,CAAA;AAuB3C,MAAM,CAAC,MAAM,cAAc,GAAkC,CAAC,EAAE,oBAAoB,EAAE,IAAI,EAAE,EAAE,EAAE;IAC9F,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,oBAAoB,IAAI,CAAC,CAAC,CAAA;IAE7E,OAAO,CACL,4BACG,IAAI,EAAE,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CAC1B,KAAC,eAAe,OAAiB,IAAI,EAAE,QAAQ,EAAE,KAAK,KAAK,aAAa,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,gBAAgB,CAAC,KAAK,CAAC,IAA3F,KAAK,CAA0F,CACtH,CAAC,GACD,CACJ,CAAA;AACH,CAAC,CAAA;AACD,MAAM,CAAC,MAAM,eAAe,GAAuC,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,EAAE;IAC7I,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IACxB,MAAM,QAAQ,GAAG,aAAa,CAAC,KAAK,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;IAC5D,OAAO,CACL,MAAC,SAAS,IAAC,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,QAAQ,EAAE,EAAE,aACzD,KAAC,gBAAgB,IAAC,UAAU,EAAE,KAAC,iBAAiB,KAAG,mBAAgB,kBAAkB,EAAC,EAAE,EAAC,iBAAiB,YACxG,KAAC,UAAU,IAAC,OAAO,EAAC,IAAI,EAAC,SAAS,EAAC,MAAM,EAAC,YAAY,EAAE,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,YAC5E,IAAI,GACM,GACI,EACnB,MAAC,gBAAgB,eACd,WAAW,IAAI,CACd,KAAC,UAAU,IAAC,OAAO,EAAC,OAAO,EAAC,UAAU,EAAE,GAAG,EAAE,SAAS,EAAC,MAAM,YAC1D,WAAW,GACD,CACd,EACA,QAAQ,EACR,CAAC,IAAI,IAAI,EAAE,CAAC,IAAI,CACf,KAAC,QAAQ,IAAC,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE,IAAI,IAAI,QAAQ,YACnD,QAAQ,IAAI,YAAY,GAChB,CACZ,IACgB,IACT,CACb,CAAA;AACH,CAAC,CAAA"}
@@ -0,0 +1,2 @@
1
+ export * from './AccordionGroup';
2
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAA"}
@@ -0,0 +1,2 @@
1
+ export * from './AccordionGroup';
2
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAA"}
package/package.json ADDED
@@ -0,0 +1,76 @@
1
+ {
2
+ "name": "@xylabs/react-accordion",
3
+ "author": {
4
+ "email": "support@xylabs.com",
5
+ "name": "XY Labs Development Team",
6
+ "url": "https://xylabs.com"
7
+ },
8
+ "bugs": {
9
+ "email": "support@xylabs.com",
10
+ "url": "https://github.com/xylabs/sdk-react/issues"
11
+ },
12
+ "workspaces": [
13
+ "packages/*"
14
+ ],
15
+ "dependencies": {
16
+ "@emotion/react": "^11.10.4",
17
+ "@emotion/styled": "^11.10.4",
18
+ "@mui/icons-material": "^5.10.3",
19
+ "@mui/material": "^5.10.4",
20
+ "@xylabs/react-button": "^2.14.19",
21
+ "@xylabs/react-flexbox": "^2.14.19",
22
+ "react": "^18.2.0",
23
+ "react-dom": "^18.2.0"
24
+ },
25
+ "description": "Common React library for all XY Labs projects that use React",
26
+ "devDependencies": {
27
+ "@babel/core": "^7.19.0",
28
+ "@babel/preset-env": "^7.19.0",
29
+ "@storybook/react": "^6.5.10",
30
+ "@types/react": "^18.0.18",
31
+ "ts-node": "^10.9.1",
32
+ "typescript": "^4.8.2"
33
+ },
34
+ "resolutions": {
35
+ "react": "^18.2.0",
36
+ "react-dom": "^18.2.0"
37
+ },
38
+ "browser": "dist/esm/index.js",
39
+ "docs": "dist/docs.json",
40
+ "exports": {
41
+ ".": {
42
+ "node": {
43
+ "import": "./dist/esm/index.js",
44
+ "require": "./dist/cjs/index.js"
45
+ },
46
+ "browser": {
47
+ "import": "./dist/esm/index.js",
48
+ "require": "./dist/cjs/index.js"
49
+ },
50
+ "default": "./dist/esm/index.js"
51
+ },
52
+ "./dist/docs.json": {
53
+ "default": "./dist/docs.json"
54
+ },
55
+ "./package.json": "./package.json"
56
+ },
57
+ "main": "dist/cjs/index.js",
58
+ "module": "dist/esm/index.js",
59
+ "homepage": "https://xylabs.com",
60
+ "keywords": [
61
+ "utility",
62
+ "typescript",
63
+ "react"
64
+ ],
65
+ "license": "LGPL-3.0",
66
+ "publishConfig": {
67
+ "access": "public"
68
+ },
69
+ "repository": {
70
+ "type": "git",
71
+ "url": "https://github.com/xylabs/sdk-react.git"
72
+ },
73
+ "sideEffects": false,
74
+ "types": "dist/esm/index.d.ts",
75
+ "version": "2.14.19"
76
+ }
@@ -0,0 +1,47 @@
1
+ import { Grid } from '@mui/material'
2
+ import { ComponentMeta, ComponentStory } from '@storybook/react'
3
+ import { FlexCol } from '@xylabs/react-flexbox'
4
+
5
+ import { AccordionGroup } from './AccordionGroup'
6
+
7
+ const StorybookEntry: ComponentMeta<typeof AccordionGroup> = {
8
+ argTypes: {},
9
+ component: AccordionGroup,
10
+ parameters: {
11
+ docs: {
12
+ page: null,
13
+ },
14
+ },
15
+ title: 'Components/AccordionGroup',
16
+ } as ComponentMeta<typeof AccordionGroup>
17
+
18
+ const Template: ComponentStory<typeof AccordionGroup> = (args) => <AccordionGroup {...args}></AccordionGroup>
19
+
20
+ const Default: ComponentStory<typeof AccordionGroup> = Template.bind({})
21
+ Default.args = {
22
+ data: [
23
+ { description: 'lorem ipsum', name: 'Section 1' },
24
+ { description: 'lorem ipsum', name: 'Section 2' },
25
+ {
26
+ children: [
27
+ <FlexCol key="container" alignItems="stretch">
28
+ <Grid container>
29
+ <Grid item xs={6}>
30
+ Column 1
31
+ </Grid>
32
+ <Grid item xs={6}>
33
+ Column 2
34
+ </Grid>
35
+ </Grid>
36
+ </FlexCol>,
37
+ ],
38
+ name: 'Section 3',
39
+ },
40
+ ],
41
+ defaultExpandedIndex: 1,
42
+ }
43
+
44
+ export { Default }
45
+
46
+ // eslint-disable-next-line import/no-default-export
47
+ export default StorybookEntry
@@ -0,0 +1,64 @@
1
+ import { ExpandMoreRounded } from '@mui/icons-material'
2
+ import { Accordion, AccordionDetails, AccordionProps, AccordionSummary, Typography, useMediaQuery, useTheme } from '@mui/material'
3
+ import { ButtonEx } from '@xylabs/react-button'
4
+ import { Override } from '@xylabs/sdk-js'
5
+ import { ReactNode, useState } from 'react'
6
+
7
+ interface SimpleAccordionCardAdditionalProps extends AccordionProps {
8
+ name: string
9
+ linkText?: string
10
+ to?: string
11
+ href?: string
12
+ description?: string
13
+ expanded?: boolean
14
+ onChange?: () => void
15
+ }
16
+
17
+ interface OptionalChildren {
18
+ children?: ReactNode
19
+ }
20
+ //this makes the requirement for children from AccordionProps go away
21
+ export type SimpleAccordionCardProps = Override<SimpleAccordionCardAdditionalProps, OptionalChildren>
22
+
23
+ interface AccordionGroupProps {
24
+ defaultExpandedIndex?: number
25
+ data?: SimpleAccordionCardProps[]
26
+ }
27
+
28
+ export const AccordionGroup: React.FC<AccordionGroupProps> = ({ defaultExpandedIndex, data }) => {
29
+ const [expandedIndex, setExpandedIndex] = useState(defaultExpandedIndex ?? 0)
30
+
31
+ return (
32
+ <>
33
+ {data?.map((item, index) => (
34
+ <SimpleAccordion key={index} {...item} expanded={index === expandedIndex} onChange={() => setExpandedIndex(index)} />
35
+ ))}
36
+ </>
37
+ )
38
+ }
39
+ export const SimpleAccordion: React.FC<SimpleAccordionCardProps> = ({ name, linkText, to, href, description, expanded, onChange, children }) => {
40
+ const theme = useTheme()
41
+ const isMobile = useMediaQuery(theme.breakpoints.down('md'))
42
+ return (
43
+ <Accordion expanded={expanded} onChange={() => onChange?.()}>
44
+ <AccordionSummary expandIcon={<ExpandMoreRounded />} aria-controls="panel1bh-content" id="panel1bh-header">
45
+ <Typography variant="h6" textAlign="left" gutterBottom={isMobile ? true : false}>
46
+ {name}
47
+ </Typography>
48
+ </AccordionSummary>
49
+ <AccordionDetails>
50
+ {description && (
51
+ <Typography variant="body1" fontWeight={400} textAlign="left">
52
+ {description}
53
+ </Typography>
54
+ )}
55
+ {children}
56
+ {(href || to) && (
57
+ <ButtonEx href={href} to={to} target={href ?? '_blank'}>
58
+ {linkText ?? 'Learn More'}
59
+ </ButtonEx>
60
+ )}
61
+ </AccordionDetails>
62
+ </Accordion>
63
+ )
64
+ }
package/src/index.ts ADDED
@@ -0,0 +1 @@
1
+ export * from './AccordionGroup'