Skip to content

Commit b79c384

Browse files
committed
2 parents b98e396 + 5b670f8 commit b79c384

File tree

20 files changed

+613
-25
lines changed

20 files changed

+613
-25
lines changed

CHANGELOG.md

+49
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,54 @@
11

22

3+
## [2.7.2](https://github.com/red-ninjas/himalaya-ui/compare/v2.7.1...v2.7.2) (2024-04-25)
4+
5+
6+
### Bug Fixes
7+
8+
* **CollapseGroup:** update default value of multiple ([980e37b](https://github.com/red-ninjas/himalaya-ui/commit/980e37b13af58357a13784b0d4ce41b4f187284f))
9+
10+
## [2.7.1](https://github.com/red-ninjas/himalaya-ui/compare/v2.7.0...v2.7.1) (2024-04-25)
11+
12+
13+
### Bug Fixes
14+
15+
* **CollapseGroup:** Use stateRef for state management ([13c7e7b](https://github.com/red-ninjas/himalaya-ui/commit/13c7e7b432a1638403cb2371199a0401274dbb8e))
16+
17+
# [2.7.0](https://github.com/red-ninjas/himalaya-ui/compare/v2.6.1...v2.7.0) (2024-04-25)
18+
19+
20+
### Features
21+
22+
* **Collapse:** allow custom multiples & disabled ([a881454](https://github.com/red-ninjas/himalaya-ui/commit/a8814541796146115cf4e8685102247057c197b6))
23+
24+
## [2.6.1](https://github.com/red-ninjas/himalaya-ui/compare/v2.6.0...v2.6.1) (2024-04-24)
25+
26+
27+
### Bug Fixes
28+
29+
* component styles ([63cf0dd](https://github.com/red-ninjas/himalaya-ui/commit/63cf0ddb1776e2960c93b9d66379ce2af6d60abf))
30+
31+
# [2.6.0](https://github.com/red-ninjas/himalaya-ui/compare/v2.5.0...v2.6.0) (2024-04-24)
32+
33+
34+
### Features
35+
36+
* **InputGroup:** add InputGroup component ([cfe03a2](https://github.com/red-ninjas/himalaya-ui/commit/cfe03a2d9cd981be7e6de6f11e46e7f2d5ead189))
37+
38+
# [2.5.0](https://github.com/red-ninjas/himalaya-ui/compare/v2.4.3...v2.5.0) (2024-04-22)
39+
40+
41+
### Features
42+
43+
* **PinCode:** add pincode component ([9393143](https://github.com/red-ninjas/himalaya-ui/commit/9393143193f7c371da355569ed556f7a6481894c))
44+
45+
## [2.4.3](https://github.com/red-ninjas/himalaya-ui/compare/v2.4.2...v2.4.3) (2024-04-18)
46+
47+
48+
### Bug Fixes
49+
50+
* auto complete font size ([91a4fe3](https://github.com/red-ninjas/himalaya-ui/commit/91a4fe3bb2a3ff6bc0491ddc7f6d431332d1223e))
51+
352
## [2.4.2](https://github.com/red-ninjas/himalaya-ui/compare/v2.4.1...v2.4.2) (2024-04-18)
453

554

api-docs/functions/PinCode.html

+9
Large diffs are not rendered by default.

api-docs/types/PinCodeProps.html

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<!DOCTYPE html><html class="default" lang="en"><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>PinCodeProps | Typedoc project reference documentation</title><meta name="description" content="Documentation for Typedoc project reference documentation"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script defer src="../assets/main.js"></script><script async src="../assets/icons.js" id="tsd-icons-script"></script><script async src="../assets/search.js" id="tsd-search-script"></script><script async src="../assets/navigation.js" id="tsd-nav-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><div class="table-cell" id="tsd-search" data-base=".."><div class="field"><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="../assets/icons.svg#icon-search"></use></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div><div class="field"><div id="tsd-toolbar-links"></div></div><ul class="results"><li class="state loading">Preparing search index...</li><li class="state failure">The search index is not available</li></ul><a href="../index.html" class="title">Typedoc project reference documentation</a></div><div class="table-cell" id="tsd-widgets"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="../assets/icons.svg#icon-menu"></use></svg></a></div></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><ul class="tsd-breadcrumb"><li><a href="../index.html">Typedoc project reference documentation</a></li><li><a href="PinCodeProps.html">PinCodeProps</a></li></ul><h1>Type alias PinCodeProps</h1></div><div class="tsd-signature"><span class="tsd-kind-type-alias">Pin<wbr/>Code<wbr/>Props</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">Props</span><span class="tsd-signature-symbol"> &amp; </span><span class="tsd-signature-type">NativeAttrs</span></div><aside class="tsd-sources"><ul><li>Defined in src/components/pin-code/pin-code.tsx:23</li></ul></aside></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-index-accordion"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><h4 class="uppercase">Member Visibility</h4><form><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-private" name="private"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Private</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></form></div><div class="tsd-theme-toggle"><h4 class="uppercase">Theme</h4><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div></div><div class="site-menu"><nav class="tsd-navigation"><a href="../index.html"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1"></use></svg><span>Typedoc project reference documentation</span></a><ul class="tsd-small-nested-navigation" id="tsd-nav-container" data-base=".."><li>Loading...</li></ul></nav></div></div></div><div class="tsd-generator"><p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></div><div class="overlay"></div></body></html>

package-lock.json

+2-2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@himalaya-ui/core",
3-
"version": "2.4.2",
3+
"version": "2.7.2",
44
"main": "dist/bundle/index.js",
55
"module": "dist/bundle/index.js",
66
"types": "dist/bundle/index.d.ts",

src/app/components/collapse/collapse.mdx

+39
Original file line numberDiff line numberDiff line change
@@ -82,4 +82,43 @@ Display large amounts of text in collapsible sections. Commonly referred to as a
8282
`}
8383
/>
8484

85+
<Playground
86+
title="Disabled"
87+
desc="Disabled Collapse component where interactions are blocked."
88+
scope={{ Collapse, Text }}
89+
code={`
90+
<Collapse disabled title="Disabled Question" >
91+
<Text>This content is static and the collapse functionality is disabled. Users cannot expand or collapse this section.</Text>
92+
</Collapse>
93+
`}
94+
/>
95+
96+
<Playground
97+
title="Custom Multiple"
98+
desc="Controlling multiple collapse components with the 'value' prop and tracking their state."
99+
scope={{ Collapse, Collapse, Text }}
100+
code={`
101+
<Collapse.Group multiple={true} value={[1, 4]}
102+
onChange={(open) => console.log("Open collapses:", open)}>
103+
<Collapse title="Question A" index={1}>
104+
<Text>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
105+
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</Text>
106+
</Collapse>
107+
<Collapse title="Question B" index={2}>
108+
<Text>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
109+
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</Text>
110+
</Collapse>
111+
<Collapse title="Question C" index={3}>
112+
<Text>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
113+
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</Text>
114+
</Collapse>
115+
<Collapse title="Question D" index={4}>
116+
<Text>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
117+
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</Text>
118+
</Collapse>
119+
</Collapse.Group>
120+
`}
121+
/>
122+
123+
85124
<Attributes component="Collapse" edit="/app/components/collapse.mdx"></Attributes>
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
import { Playground, Attributes } from 'lib/components';
2+
import { InputGroup, Input, Button } from 'components';
3+
4+
export const meta = {
5+
title: 'Input Group',
6+
group: 'Data Entry',
7+
};
8+
9+
# Input Group
10+
11+
The `InputGroup` component facilitates efficient form inputs integrated with action buttons.
12+
13+
<Playground
14+
title="Button right"
15+
desc="An input group with a button at the end."
16+
scope={{ InputGroup, Input, Button }}
17+
code={`
18+
<>
19+
<InputGroup buttonPosition="end">
20+
<Input placeholder="Enter text here" />
21+
<Button>Submit</Button>
22+
</InputGroup>
23+
</>
24+
`}
25+
/>
26+
27+
<Playground
28+
title="Button left"
29+
desc="Place a button at the start of the input group. "
30+
scope={{ InputGroup, Input, Button }}
31+
code={`
32+
<>
33+
<InputGroup buttonPosition="start">
34+
<Input placeholder="Search..." />
35+
<Button>Clear</Button>
36+
</InputGroup>
37+
</>
38+
`}
39+
/>
40+
41+
<Playground
42+
title="Multiple Inputs"
43+
desc="Showcases an input group with two input fields, arranged side by side."
44+
scope={{ InputGroup, Input, Button }}
45+
code={`
46+
<>
47+
<InputGroup>
48+
<Input placeholder="First Name" />
49+
<Input placeholder="Last Name" />
50+
<Button w={0.40}>Submit</Button>
51+
</InputGroup>
52+
</>
53+
`}
54+
/>
55+
56+
<Playground
57+
title="Multiple Actions"
58+
desc="Features an input group with one input field accompanied by two buttons."
59+
scope={{ InputGroup, Input, Button }}
60+
code={`
61+
<>
62+
<InputGroup buttonPosition="end">
63+
<Input placeholder="Search..." />
64+
<Button w={0.40} style={{background: "var(--color-background-800)"}}>Search</Button>
65+
<Button w={0.40} style={{background: "var(--color-background-800)"}}>Clear</Button>
66+
</InputGroup>
67+
</>
68+
`}
69+
/>
70+
71+
72+
<Attributes component="InputGroup" edit="/app/components/input-group.mdx"></Attributes>
+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
'use client';
2+
import Documentation from './input-group.mdx';
3+
4+
export default function Page() {
5+
return <Documentation />;
6+
}

src/app/components/pin-code/page.tsx

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
'use client';
2+
import Documentation from './pin-code.mdx';
3+
4+
export default function Page() {
5+
return <Documentation />;
6+
}
+82
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
import { Playground, Attributes } from 'lib/components';
2+
import { PinCode, Spacer, Button } from 'components';
3+
import NextLink from 'next/link';
4+
5+
export const meta = {
6+
title: 'PinCode',
7+
group: 'Data Entry',
8+
};
9+
10+
# PinCode
11+
12+
A component to input a pin code, commonly used for entering security or verification codes.
13+
14+
<Playground
15+
scope={{ PinCode }}
16+
desc="Basic usage example."
17+
code={`
18+
<>
19+
<PinCode />
20+
</>
21+
`}
22+
/>
23+
24+
<Playground
25+
title="Numbers Only"
26+
desc="Restrict the pin code input to numeric values only."
27+
scope={{ PinCode }}
28+
code={`
29+
<>
30+
<PinCode validChars="0-9" />
31+
</>
32+
`}
33+
/>
34+
35+
<Playground
36+
title="Custom Placeholder"
37+
desc="Use a custom placeholder for unentered characters."
38+
scope={{ PinCode }}
39+
code={`
40+
<>
41+
<PinCode placeholder="*" />
42+
</>
43+
`}
44+
/>
45+
46+
<Playground
47+
title="Password Mode"
48+
desc="Obfuscate the pin code input for sensitive data."
49+
scope={{ PinCode }}
50+
code={`
51+
<>
52+
<PinCode passwordMode={true} placeholder="*" onChange={value => console.log(value)} />
53+
</>
54+
`}
55+
/>
56+
57+
58+
<Playground
59+
title="Custom Length"
60+
desc="Customize the length."
61+
scope={{ PinCode, Spacer }}
62+
code={`
63+
<>
64+
<PinCode length={4} onChange={value => console.log(value)} />
65+
<Spacer h={0.5} />
66+
</>
67+
`}
68+
/>
69+
70+
<Playground
71+
title="Disabled"
72+
desc="Disable the pin code input."
73+
scope={{ PinCode }}
74+
code={`
75+
<>
76+
<PinCode disabled />
77+
</>
78+
`}
79+
/>
80+
81+
82+
<Attributes component="PinCode" edit="/app/components/pincode.mdx"></Attributes>

src/components/collapse/collapse-group.tsx

+31-17
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
'use client';
2-
import React, { useMemo } from 'react';
2+
import React, { useEffect, useMemo } from 'react';
33
import Collapse from './collapse';
44
import useCurrentState from '../utils/use-current-state';
55
import { setChildrenIndex } from '../utils/collections';
@@ -8,39 +8,53 @@ import useScale, { withScale } from '../use-scale';
88
import useClasses from '../use-classes';
99

1010
interface Props {
11-
accordion?: boolean;
11+
multiple?: boolean;
1212
className?: string;
13+
value?: number[];
14+
onChange?: (openIndices: number[]) => void;
1315
}
1416

1517
type NativeAttrs = Omit<React.HTMLAttributes<HTMLDivElement>, keyof Props>;
1618
export type CollapseGroupProps = Props & NativeAttrs;
1719

1820
const CollapseGroupComponent: React.FC<React.PropsWithChildren<CollapseGroupProps>> = ({
1921
children,
20-
accordion = true,
21-
className = '',
22+
multiple = false,
23+
className,
24+
value = [],
25+
onChange,
2226
...props
2327
}: React.PropsWithChildren<CollapseGroupProps>) => {
2428
const { SCALE, UNIT, CLASS_NAMES } = useScale();
2529

26-
const [state, setState, stateRef] = useCurrentState<Array<number>>([]);
30+
const [state, setState, stateRef] = useCurrentState<Array<number>>(value);
2731
const classes = useClasses('collapse-group', className, CLASS_NAMES);
2832

29-
const updateValues = (currentIndex: number, nextState: boolean) => {
30-
const hasChild = stateRef.current.find(val => val === currentIndex);
31-
if (accordion) {
32-
if (nextState) return setState([currentIndex]);
33-
return setState([]);
33+
useEffect(() => {
34+
setState(value);
35+
}, [value.join(',')]);
36+
37+
useEffect(() => {
38+
if (onChange) {
39+
onChange(state);
3440
}
41+
}, [state]);
3542

36-
if (nextState) {
37-
// In a few cases, the user will set Collapse Component state manually.
38-
// If the user incorrectly set the state, Group component should ignore it.
39-
/* istanbul ignore if */
40-
if (hasChild) return;
41-
return setState([...stateRef.current, currentIndex]);
43+
const updateValues = (currentIndex: number, nextState: boolean) => {
44+
if (!multiple) {
45+
if (nextState) {
46+
setState([currentIndex]);
47+
} else {
48+
setState([]);
49+
}
50+
} else {
51+
const currentIndexExists = stateRef.current.includes(currentIndex);
52+
if (nextState && !currentIndexExists) {
53+
setState([...stateRef.current, currentIndex]);
54+
} else if (!nextState && currentIndexExists) {
55+
setState(stateRef.current.filter(item => item !== currentIndex));
56+
}
4257
}
43-
setState(stateRef.current.filter(item => item !== currentIndex));
4458
};
4559

4660
const initialValue = useMemo<CollapseConfig>(

0 commit comments

Comments
 (0)