Skip to content

Commit 56dba10

Browse files
bishalshrestha013bishalshrestha013
committed
Merge branch 'main' of github.com:dzangolab/react into feat/support-group-options
2 parents 2e273b3 + 574b80c commit 56dba10

15 files changed

Lines changed: 326 additions & 83 deletions

File tree

‎CHANGELOG.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@
2323

2424
### Breaking Changes
2525

26+
* **form:** removed `Input` component. Please use `TextInput` instead
2627
* **user:** removed `features.termsAndConditions.label` config. Instead added `features.termsAndConditions.url` and `features.termsAndConditions.external` optional configs. If you need to overwrite TermsAndConditions component, pass it via the `termsAndConditions` prop in Signup page.
2728
* **user:** updated UsersTable status column's `accessorKey` from `status` to `disabled`
2829
* **ui:** removed some css vars for the button and form widgets. If you were using some of the vars to overwrite the style, please check the `packages/ui/src/assets/css/vars.css` file to see if the var is still present and confirm if its being used.

‎apps/demo/src/Views/Ui/components/CardDemo.tsx‎

Lines changed: 107 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,37 @@ import {
66
CardFooter,
77
CardHeader,
88
Page,
9+
TDataTable,
910
} from "@dzangolab/react-ui";
1011
import { useNavigate } from "react-router-dom";
1112

12-
import { Section } from "../../../components/Demo";
13+
import { CodeBlock, Section } from "../../../components/Demo";
14+
15+
const data = [
16+
{
17+
id: 1,
18+
prop: " className",
19+
type: "string",
20+
default: "-",
21+
description: "Additional CSS classes to apply to the card.",
22+
},
23+
{
24+
id: 2,
25+
prop: "children",
26+
type: "ReactNode",
27+
default: "-",
28+
description:
29+
"The content of the card. Typically includes child components like `CardHeader`, `CardBody` and `CardFooter`.",
30+
},
31+
{
32+
id: 3,
33+
prop: "outlined",
34+
type: "boolean",
35+
default: "false",
36+
description:
37+
"Whether to render the card in an outlined style (e.g. with a border)",
38+
},
39+
];
1340

1441
export const CardDemo = () => {
1542
const [t] = useTranslation("ui");
@@ -27,7 +54,12 @@ export const CardDemo = () => {
2754
/>
2855
}
2956
>
30-
<Section title={t("card.usage.default")}>
57+
<Section title={t("headers.usage")}>
58+
<p>{t("common.usage", { component: "Card" })}</p>
59+
<CodeBlock exampleCode="import { Card } from 'dzangolab/react-ui';" />
60+
</Section>
61+
62+
<Section title={t("card.usage.basic")}>
3163
<Card>
3264
<CardHeader>
3365
<h3>{t("card.header")}</h3>
@@ -39,6 +71,28 @@ export const CardDemo = () => {
3971
<p>{t("card.footer")}</p>
4072
</CardFooter>
4173
</Card>
74+
75+
<CodeBlock
76+
exampleCode='
77+
import {
78+
Card,
79+
CardBody,
80+
CardFooter,
81+
CardHeader,
82+
} from "@dzangolab/react-ui";
83+
84+
<Card>
85+
<CardHeader>
86+
<h3>{t("card.header")}</h3>
87+
</CardHeader>
88+
<CardBody>
89+
<p>{t("card.body")}</p>
90+
</CardBody>
91+
<CardFooter>
92+
<p>{t("card.footer")}</p>
93+
</CardFooter>
94+
</Card>'
95+
/>
4296
</Section>
4397
<Section title={t("card.usage.outlined")}>
4498
<Card outlined>
@@ -52,6 +106,57 @@ export const CardDemo = () => {
52106
<p>{t("card.footer")}</p>
53107
</CardFooter>
54108
</Card>
109+
110+
<CodeBlock
111+
exampleCode='
112+
import {
113+
Card,
114+
CardBody,
115+
CardFooter,
116+
CardHeader,
117+
} from "@dzangolab/react-ui";
118+
119+
<Card outlined>
120+
<CardHeader>
121+
<h3>{t("card.header")}</h3>
122+
</CardHeader>
123+
<CardBody>
124+
<p>{t("card.body")}</p>
125+
</CardBody>
126+
<CardFooter>
127+
<p>{t("card.footer")}</p>
128+
</CardFooter>
129+
</Card>'
130+
/>
131+
</Section>
132+
133+
<Section
134+
title={t("headers.propertiesValue", {
135+
value: "CardProperties",
136+
})}
137+
>
138+
<TDataTable
139+
columns={[
140+
{
141+
accessorKey: "prop",
142+
header: "Properties",
143+
},
144+
{
145+
accessorKey: "type",
146+
header: "Type",
147+
},
148+
{
149+
accessorKey: "default",
150+
header: "Default",
151+
},
152+
{
153+
accessorKey: "description",
154+
header: "Description",
155+
},
156+
]}
157+
data={data}
158+
paginated={false}
159+
/>
55160
</Section>
56161
</Page>
57162
);

‎apps/demo/src/Views/Ui/components/FormWidgets/Select.tsx‎

Lines changed: 95 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -53,105 +53,121 @@ const data = [
5353
},
5454
{
5555
id: 6,
56+
prop: "enableTooltip",
57+
type: "boolean",
58+
default: "false",
59+
description:
60+
"When enableTooltip is true, select component renders the <Tooltip> component for the selected value.",
61+
},
62+
{
63+
id: 7,
5664
prop: "hasError",
5765
type: "boolean",
5866
default: "-",
5967
description: "If true, error in component.",
6068
},
6169
{
62-
id: 7,
70+
id: 8,
6371
prop: "helperText",
6472
type: "string",
6573
default: "-",
6674
description: "Displays an error message below the component.",
6775
},
6876
{
69-
id: 8,
77+
id: 9,
7078
prop: "hideIfSingleOption",
7179
type: "boolean",
7280
default: "false",
7381
description:
7482
"If there is only one option, and multiple is false, the Select component will not render the dropdown at all when set to true.",
7583
},
7684
{
77-
id: 9,
85+
id: 10,
7886
prop: "label",
7987
type: "string",
8088
default: "-",
8189
description: "Label of the component.",
8290
},
8391
{
84-
id: 10,
92+
id: 11,
8593
prop: "labelKey",
8694
type: "string",
8795
default: "-",
8896
description: "The key in option object to use as the display label.",
8997
},
9098
{
91-
id: 11,
99+
id: 12,
92100
prop: "multiple",
93101
type: "boolean",
94102
default: "false",
95103
description: "If true, multiple selection is enabled.",
96104
},
97105
{
98-
id: 12,
106+
id: 13,
99107
prop: "name",
100108
type: "string",
101109
default: "-",
102110
description: "Name of the component.",
103111
},
104112
{
105-
id: 13,
113+
id: 14,
106114
prop: "options",
107115
type: "Option[]",
108116
default: "-",
109117
description: "Options to pass in the select component.",
110118
},
111119
{
112-
id: 14,
120+
id: 15,
113121
prop: "placeholder",
114122
type: "string",
115123
default: "-",
116124
description: "Placeholder in the component.",
117125
},
118126
{
119-
id: 15,
127+
id: 16,
120128
prop: "showRemoveSelection",
121129
type: "boolean",
122130
default: "true",
123131
description: "If true, icon to remove selected options is visible.",
124132
},
125133
{
126-
id: 16,
134+
id: 17,
135+
prop: "tooltipOptions",
136+
type: "TooltipOptions",
137+
default: "-",
138+
description:
139+
"Options to customize the tooltip’s behavior(example: position, offset).",
140+
},
141+
{
142+
id: 18,
127143
prop: "value",
128144
type: "Value",
129145
default: "-",
130146
description: "Selected values of the component.",
131147
},
132148
{
133-
id: 17,
149+
id: 19,
134150
prop: "valueKey",
135151
type: "string",
136152
default: "-",
137153
description: "The key in option object to use as value.",
138154
},
139155
{
140-
id: 18,
156+
id: 20,
141157
prop: "renderOption",
142158
type: "(option: Option[]) => React.ReactNode",
143159
default: "-",
144160
description: "Function to be called to render custom select options.",
145161
},
146162
{
147-
id: 19,
163+
id: 21,
148164
prop: "renderValue",
149165
type: "(value?: Value, options?: Option[]) => React.ReactNode",
150166
default: "-",
151167
description: "Function to be called to render custom select value.",
152168
},
153169
{
154-
id: 20,
170+
id: 22,
155171
prop: "onChange",
156172
type: " (newValue: T | T[]) => void",
157173
default: "-",
@@ -170,6 +186,7 @@ export const SelectDemo = () => {
170186
const [renderedValue, setRenderedValue] = useState<string[]>([]);
171187
const [renderedOption, setRenderedOption] = useState<string[]>([]);
172188
const [value, setValue] = useState("");
189+
const [selectedCountries, setSelectedCountries] = useState<string[]>([]);
173190

174191
const renderSelectedValue = (
175192
value?: string | string[],
@@ -183,7 +200,11 @@ export const SelectDemo = () => {
183200
<span className="selected-labels">
184201
{value.map((v) => {
185202
const label = options.find((option) => option.value === v)?.label;
186-
if (!label) return null;
203+
204+
if (!label) {
205+
return null;
206+
}
207+
187208
return <Tag key={v} label={label} />;
188209
})}
189210
</span>
@@ -461,6 +482,56 @@ const [value, setValue] = useState<string>("");
461482
/>
462483
</Section>
463484

485+
<Section title={t("select.usage.withTooltip")}>
486+
<Select
487+
label={t("select.label")}
488+
name="select"
489+
options={[
490+
{ label: "France", value: "FR" },
491+
{ label: "Germany", value: "DE" },
492+
{ disabled: true, label: "Belgium", value: "BE" },
493+
{ label: "Nepal", value: "NP" },
494+
{ label: "India", value: "IN" },
495+
]}
496+
value={selectedCountries}
497+
onChange={(value: string[]) => setSelectedCountries(value)}
498+
className="country-selector"
499+
placeholder={t("select.placeholder")}
500+
multiple
501+
enableTooltip
502+
tooltipOptions={{
503+
position: "top",
504+
offset: 15,
505+
}}
506+
/>
507+
<CodeBlock
508+
exampleCode='
509+
const [selectedCountries, setSelectedCountries] = useState<string[]>([]);
510+
511+
<Select
512+
label={t("select.label")}
513+
name="select"
514+
options={[
515+
{ label: "France", value: "FR" },
516+
{ label: "Germany", value: "DE" },
517+
{ disabled: true, label: "Belgium", value: "BE" },
518+
{ label: "Nepal", value: "NP" },
519+
{ label: "India", value: "IN" },
520+
]}
521+
value={selectedCountries}
522+
onChange={(value: string[]) => setSelectedCountries(value)}
523+
className="country-selector"
524+
placeholder={t("select.placeholder")}
525+
multiple
526+
enableTooltip
527+
tooltipOptions={{
528+
position: "top",
529+
offset: 15,
530+
}}
531+
/>'
532+
/>
533+
</Section>
534+
464535
<Section title={t("select.usage.invalid")}>
465536
<Select
466537
label={t("select.label")}
@@ -593,15 +664,22 @@ const [singleSelectValue, setSingleSelectValue] = useState<string>("");
593664

594665
<Section title="Type">
595666
<CodeBlock
596-
exampleCode="
667+
exampleCode='
597668
type Option<T extends string | number> = {
598669
disabled?: boolean;
599670
label: string;
600671
value: T;
601672
};
602673
603674
type Value = string | number | (string | number)[]
604-
"
675+
676+
type TooltipOptions = {
677+
delay?: number;
678+
mouseTrack?: boolean;
679+
offset?: number;
680+
position?: "top" | "bottom" | "right" | "left";
681+
}
682+
'
605683
/>
606684
</Section>
607685
</Page>

0 commit comments

Comments
 (0)