Merge pull request #699 from sebgroup/develop

new version - accessibility, dynamic form and bootstrap update

.github/CODEOWNERS

@@ -5,4 +5,4 @@
 # https://git-scm.com/docs/gitignore#_pattern_format
 
 # default owners
-* @yousifalraheem @mario-subo @kherP @DanSallau @omarVodiaK
+* @sebgroup/spartans

docs/src/components/DocsAPIs.tsx

@@ -16,7 +16,7 @@ const DocsAPI: React.FC<DocsAPIProps> = (props: DocsAPIProps) => {
 
     return (
         !!props.list?.length && (
-            <div className="apis">
+            <div className="apis" role="tabpanel" tabIndex={0}>
                 <h3>Inputs</h3>
                 <div className="card">
                     <table className="table table-striped">

docs/src/components/DocsPlaygroud.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import classnames from "classnames";
 import { CodeSnippet } from "./CodeSnippet";
+import { TabItem, Tabs } from "@sebgroup/react-components/Tabs";
 
 export type BackgroundTheme = "primary" | "secondary" | "danger" | "warning" | "success" | "dark" | "light";
 
@@ -23,27 +24,27 @@ const DocsPlayground: React.FC<DocsPlaygroundProps> = (props: DocsPlaygroundProp
     }, []);
 
     return (
-        <div className={classnames("playground card", props.className)}>
-            <nav className="nav">
+        <div className={classnames("playground card", props.className)} role="tabpanel" tabIndex={0}>
+            <Tabs className="nav" value={activeTab} onTabChange={switchTab}>
                 {navs.map((item: string, index: number) => (
-                    <a key={index} className={classnames("nav-link", { active: activeTab === index })} onClick={() => switchTab(index)} data-value={index}>
+                    <TabItem key={index} className={classnames("nav-link")}>
                         {item}
-                    </a>
+                    </TabItem>
                 ))}
-            </nav>
+            </Tabs>
 
             {props.controls && <h4 className="apis-title">Try these props</h4>}
             {
                 [
-                    <div className={classnames("example", { [`bg-${props.exampleTheme}`]: props.exampleTheme })}>
+                    <div className={classnames("example", { [`bg-${props.exampleTheme}`]: props.exampleTheme })} role="tabpanel" tabIndex={0}>
                         <div className="content">{props.example}</div>
                         {props.exampleTheme && (
                             <div className={classnames("footnote", { "text-light": props.exampleTheme.includes("dark") })}>
                                 <small>* This background is only to demonstrate the component's theme in its potential environement. It will not be applied by the component.</small>
                             </div>
                         )}
                     </div>,
-                    <CodeSnippet angular language={"jsx"}>
+                    <CodeSnippet angular language={"jsx"} role="tabpanel" tabIndex={0}>
                         {props.code}
                     </CodeSnippet>,
                 ][activeTab]

docs/src/pages/docs/accordion.tsx

@@ -14,7 +14,10 @@ const code: string = `<Accordion>
 </Accordion>`;
 
 const AccordionPage: React.FC = () => {
-    const [renderControls, { controls }] = useDynamicForm([
+    const {
+        renderForm: renderControls,
+        state: { controls },
+    } = useDynamicForm([
         {
             key: "controls",
             items: [
@@ -29,7 +32,7 @@ const AccordionPage: React.FC = () => {
             mainFile={importString}
             importedFiles={importedFiles}
             example={
-                <Accordion className="w-100" inverted={controls.inverted} alternative={controls.alternative} defaultValue={0}>
+                <Accordion className="w-100" inverted={!!controls.inverted} alternative={!!controls.alternative} defaultValue={0}>
                     <AccordionItem header="A simple accordion item">
                         <p>Illum amet voluptas minus aut esse totam blanditiis. Et corporis vel aspernatur dicta fugit et est placeat. Beatae dolor nisi aut minus placeat et at accusantium.</p>
                     </AccordionItem>

docs/src/pages/docs/breadcrumb.tsx

@@ -4,7 +4,8 @@ import { Breadcrumb, BreadcrumbItem } from "@sebgroup/react-components/Breadcrum
 import { useDynamicForm } from "@sebgroup/react-components/hooks/useDynamicForm";
 
 const homeIcon: JSX.Element = (
-    <svg xmlns="http://www.w3.org/2000/svg" width="1.3em" fill="currentColor" viewBox="0 0 16 16" style={{ verticalAlign: "baseline" }}>
+    <svg xmlns="http://www.w3.org/2000/svg" width="1.3em" fill="currentColor" viewBox="0 0 16 16" style={{ verticalAlign: "baseline" }} aria-labelledby="homeTitle" role="img">
+        <title id="homeTitle">Home</title>
         <path d="M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5z" />
     </svg>
 );
@@ -18,7 +19,10 @@ const code: string = `<Breadcrumb onNavigate={(e) => e.preventDefault(); /** Or
 </Breadcrumb>`;
 
 const BreadcrumbPage: React.FC = () => {
-    const [renderControls, { controls }] = useDynamicForm([
+    const {
+        renderForm: renderControls,
+        state: { controls },
+    } = useDynamicForm([
         {
             key: "controls",
             items: [{ key: "light", label: "light", description: "Enable light mode", controlType: "Checkbox" }],
@@ -36,7 +40,7 @@ const BreadcrumbPage: React.FC = () => {
                         e.preventDefault();
                         alert(`'${e.currentTarget.title}' clicked`);
                     }}
-                    light={controls.light}
+                    light={!!controls.light}
                 >
                     <BreadcrumbItem title="Home">{homeIcon}</BreadcrumbItem>
                     <BreadcrumbItem title="Users">Users</BreadcrumbItem>

docs/src/pages/docs/button.tsx

@@ -23,7 +23,10 @@ const buttonThemes: Array<DynamicFormOption<ButtonTheme>> = [
 ];
 
 const ButtonPage: React.FC = () => {
-    const [renderControls, { controls }] = useDynamicForm([
+    const {
+        renderForm: renderControls,
+        state: { controls },
+    } = useDynamicForm([
         {
             key: "controls",
             items: [
@@ -39,11 +42,7 @@ const ButtonPage: React.FC = () => {
         <Docs
             exampleTheme={controls.theme === "light" ? "dark" : controls.theme === "dark" ? "warning" : null}
             mainFile={importString}
-            example={
-                <Button size={controls.size} theme={controls.theme} disabled={controls.disabled} block={controls.block}>
-                    Click me
-                </Button>
-            }
+            example={<Button {...(controls as { [k: string]: any })}>Click me</Button>}
             code={code}
             controls={renderControls()}
         />

docs/src/pages/docs/buttongroup.tsx

@@ -18,7 +18,10 @@ const sizes: Array<DynamicFormOption<ButtonGroupProps["size"]>> = [
 ];
 
 const ButtonGroupPage: React.FC = (): React.ReactElement<void> => {
-    const [renderControls, { controls }] = useDynamicForm([
+    const {
+        renderForm: renderControls,
+        state: { controls },
+    }: any = useDynamicForm([
         {
             key: "controls",
             items: [

docs/src/pages/docs/carousel.tsx

@@ -18,16 +18,19 @@ const transitionStyles: Array<DynamicFormOption<CarouselProps["transitionStyle"]
 ];
 
 const CarouselPage: React.FC = (): React.ReactElement<void> => {
-    const [renderControls, { controls }] = useDynamicForm([
+    const {
+        renderForm: renderControls,
+        state: { controls },
+    }: any = useDynamicForm([
         {
             key: "controls",
             items: [
-                { key: "autoplaySpeed", label: "autoplaySpeed", controlType: "Text", value: 2000 },
-                { key: "transitionDuration", label: "transitionDuration", controlType: "Text", value: 500 },
-                { key: "infinite", label: "infinite", controlType: "Checkbox", value: false },
-                { key: "autoplay", label: "autoplay", controlType: "Checkbox", value: false },
+                { key: "autoplaySpeed", label: "autoplaySpeed", controlType: "Text", initialValue: 2000 },
+                { key: "transitionDuration", label: "transitionDuration", controlType: "Text", initialValue: 500 },
+                { key: "infinite", label: "infinite", controlType: "Checkbox", initialValue: false },
+                { key: "autoplay", label: "autoplay", controlType: "Checkbox", initialValue: false },
                 { key: "showIndicators", label: "showIndicators", controlType: "Checkbox" },
-                { key: "transitionStyle", label: "transitionStyle", controlType: "Radio", options: transitionStyles, value: transitionStyles[0].value },
+                { key: "transitionStyle", label: "transitionStyle", controlType: "Radio", options: transitionStyles, initialValue: transitionStyles[0].value },
             ],
         },
     ]);
@@ -44,10 +47,12 @@ const CarouselPage: React.FC = (): React.ReactElement<void> => {
                         autoplay={controls.autoplay}
                         infinite={controls.infinite}
                         transitionStyle={controls.transitionStyle}
+                        aria-label="Image gallery"
+                        aria-level={2}
                     >
                         {images.map((image, i) => (
-                            <CarouselItem key={i}>
-                                <Img src={withPrefix(image)} responsive width="100%" />
+                            <CarouselItem key={i} aria-label={`image canvas ${i + 1}`} aria-level={3}>
+                                <Img src={withPrefix(image)} responsive width="100%" alt={`image ${i + 1}`} />
                             </CarouselItem>
                         ))}
                     </Carousel>

docs/src/pages/docs/checkbox.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 import Docs from "@common/Docs";
 import { Checkbox } from "@sebgroup/react-components/Checkbox/Checkbox";
 import { DynamicFormOption, useDynamicForm } from "@sebgroup/react-components/hooks/useDynamicForm";
@@ -24,36 +24,41 @@ const indicatorGrouping: Array<DynamicFormOption> = [
 ];
 
 const CheckboxPage: React.FC = (): React.ReactElement<void> => {
-    const [renderControls, { controls }] = useDynamicForm([
+    const {
+        renderForm: renderControls,
+        state: { controls },
+        setHidden,
+    }: any = useDynamicForm([
         {
             key: "controls",
             items: [
-                { key: "inline", label: "inline", controlType: "Checkbox", value: false },
-                { key: "indicator", label: "indicator", controlType: "Checkbox", value: false },
+                { key: "inline", label: "inline", controlType: "Checkbox", initialValue: false },
+                { key: "indicator", label: "indicator", controlType: "Checkbox", initialValue: false },
                 {
                     key: "indicatorType",
-                    rulerKey: "indicator",
-                    condition: true,
                     label: "Indicator type",
                     options: indicators,
                     controlType: "Radio",
-                    value: indicators[0].value,
+                    initialValue: indicators[0].value,
                     formElementAdditionalProps: { className: "indent pl-3 pt-2" },
                 },
                 {
                     key: "indicatorGrouping",
                     label: "Indicator choices",
                     controlType: "Radio",
-                    rulerKey: "indicator",
-                    condition: true,
                     options: indicatorGrouping,
-                    value: indicatorGrouping[0].value,
+                    initialValue: indicatorGrouping[0].value,
                     formElementAdditionalProps: { className: "indent pl-3 pt-2" },
                 },
             ],
         },
     ]);
 
+    useEffect(() => {
+        setHidden("controls", "indicatorType", !controls.indicator);
+        setHidden("controls", "indicatorGrouping", !controls.indicator);
+    }, [controls.indicator]);
+
     const isIndividual: boolean = controls.indicatorGrouping === "1";
     const isGrouped: boolean = controls.indicatorGrouping === "2";
     const indicator: Indicator = React.useMemo(() => {

docs/src/pages/docs/chip.tsx

@@ -1,16 +1,16 @@
-import React from "react";
 import Docs from "@common/Docs";
+import { Button } from "@sebgroup/react-components/Button";
 import { Chip } from "@sebgroup/react-components/Chip";
 import { loremIpsum } from "lorem-ipsum";
-import { Button } from "@sebgroup/react-components/Button";
+import React from "react";
 
 const importString: string = require("!raw-loader!@sebgroup/react-components/Chip/Chip");
 const code: string = `<Chip onClose={handleClose}>I'm a chip</Chip>`;
 
 const ChipPage: React.FC = (): React.ReactElement<void> => {
     const [chips, setChips] = React.useState<Array<string>>([loremIpsum({ units: "word" })]);
 
-    const onClose = React.useCallback((e: React.MouseEvent) => setChips((oldChips) => oldChips.filter((_, i: number) => i !== parseInt((e.target as any).parentElement.dataset.id))), []);
+    const onClose = React.useCallback((removeIndex: number) => setChips((oldChips) => oldChips.filter((_, i: number) => i !== removeIndex)), []);
     const onAdd = React.useCallback(() => setChips((oldChips) => [...oldChips, loremIpsum({ units: "word" })]), []);
 
     return (
@@ -19,7 +19,7 @@ const ChipPage: React.FC = (): React.ReactElement<void> => {
             example={
                 <div className="w-100 d-flex justify-content-center">
                     {chips.map((chip: string, i: number) => (
-                        <Chip key={i} className="m-2" data-id={i} onClose={onClose}>
+                        <Chip key={i} className="m-2" data-id={i} onClose={() => onClose(i)}>
                             {chip}
                         </Chip>
                     ))}

docs/src/pages/docs/closebutton.tsx

@@ -10,7 +10,10 @@ const code: string = `<CloseButton />`;
 const ChipPage: React.FC = (): React.ReactElement<void> => {
     const [size, setSize] = React.useState<number>(30);
 
-    const [renderControls, { controls }] = useDynamicForm([
+    const {
+        renderForm: renderControls,
+        state: { controls },
+    } = useDynamicForm([
         {
             key: "controls",
             items: [{ key: "disabled", label: "disabled", controlType: "Checkbox" }],
@@ -22,7 +25,7 @@ const ChipPage: React.FC = (): React.ReactElement<void> => {
             mainFile={importString}
             example={
                 <div className="w-100 d-flex justify-content-center">
-                    <CloseButton style={{ fontSize: size }} onClick={() => console.log("Clicked")} disabled={controls.disabled} />
+                    <CloseButton style={{ fontSize: size }} onClick={() => console.log("Clicked")} disabled={!!controls.disabled} />
                 </div>
             }
             code={code}

docs/src/pages/docs/datepicker.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 import Docs from "@common/Docs";
 import { Datepicker } from "@sebgroup/react-components/Datepicker";
 import { useDynamicForm } from "@sebgroup/react-components/hooks/useDynamicForm";
@@ -9,16 +9,18 @@ const code: string = `<Datepicker value={dateValue} onChange={setDateValue} />`;
 const DatepickerPage: React.FC = () => {
     const [exampleDate, setExampleDate] = React.useState<Date>(new Date());
 
-    const [renderControls, { controls }] = useDynamicForm([
+    const {
+        renderForm: renderControls,
+        state: { controls },
+        setHidden,
+    } = useDynamicForm([
         {
             key: "controls",
             items: [
                 { key: "monthPicker", label: "Month picker", description: "Switch to month picker only", controlType: "Checkbox" },
                 { key: "forceCustom", label: "Custom date picker", description: "This picker is the automatic fallback on browsers that don't support html5 datepicker", controlType: "Checkbox" },
                 {
                     key: "localeCode",
-                    rulerKey: "forceCustom",
-                    condition: true,
                     label: "Locale code:",
                     description: "Set a locale for the custom picker (defaults to system locale).",
                     controlType: "Text",
@@ -29,10 +31,28 @@ const DatepickerPage: React.FC = () => {
         },
     ]);
 
+    useEffect(() => {
+        setHidden("controls", "localeCode", !controls.forceCustom);
+    }, [controls.forceCustom]);
+
     return (
         <Docs
             mainFile={importString}
-            example={<Datepicker value={exampleDate} onChange={setExampleDate} monthPicker={!!controls.monthPicker} forceCustom={!!controls.forceCustom} localeCode={controls.localeCode as string} />}
+            example={
+                <div className="w-100">
+                    <label id="chooseDate">Choose a date:</label>
+                    <Datepicker
+                        value={exampleDate}
+                        onChange={setExampleDate}
+                        monthPicker={!!controls.monthPicker}
+                        forceCustom={!!controls.forceCustom}
+                        localeCode={controls.localeCode as string}
+                        wrapperProps={{
+                            "aria-labelledby": "chooseDate",
+                        }}
+                    />
+                </div>
+            }
             code={code}
             controls={renderControls()}
         />

docs/src/pages/docs/dropdown.tsx

@@ -41,16 +41,19 @@ const DropdownPage: React.FC = (): React.ReactElement<void> => {
     const [multiValue, setMultiValue] = React.useState<string[]>([]);
     const [list, setList] = React.useState<React.ReactElement[]>([]);
 
-    const [renderControls, { controls }] = useDynamicForm([
+    const {
+        renderForm: renderControls,
+        state: { controls },
+    } = useDynamicForm([
         {
             key: "controls",
             items: [
-                { key: "multiple", label: "multiple", controlType: "Checkbox", value: false },
-                { key: "searchable", label: "searchable", controlType: "Checkbox", value: false },
-                { key: "clearable", label: "clearable", controlType: "Checkbox", value: false },
-                { key: "disabled", label: "disabled", controlType: "Checkbox", value: false },
-                { key: "useGroups", label: "Render in groups", description: "Wrap dropdown items with optgroup to group them", controlType: "Checkbox", value: false },
-                { key: "useDividers", label: "Add dividers", description: "Dividers are added using div with className dropdown-divider", controlType: "Checkbox", value: false },
+                { key: "multiple", label: "multiple", controlType: "Checkbox", initialValue: false },
+                { key: "searchable", label: "searchable", controlType: "Checkbox", initialValue: false },
+                { key: "clearable", label: "clearable", controlType: "Checkbox", initialValue: false },
+                { key: "disabled", label: "disabled", controlType: "Checkbox", initialValue: false },
+                { key: "useGroups", label: "Render in groups", description: "Wrap dropdown items with optgroup to group them", controlType: "Checkbox", initialValue: false },
+                { key: "useDividers", label: "Add dividers", description: "Dividers are added using div with className dropdown-divider", controlType: "Checkbox", initialValue: false },
             ],
         },
     ]);
@@ -100,10 +103,10 @@ const DropdownPage: React.FC = (): React.ReactElement<void> => {
                         onChange={controls.multiple ? null : (e) => setValue(e.target.value)}
                         onMultipleChange={setMultiValue}
                         placeholder="Select..."
-                        multiple={controls.multiple}
-                        searchable={controls.searchable}
-                        clearable={controls.clearable}
-                        disabled={controls.disabled}
+                        multiple={!!controls.multiple}
+                        searchable={!!controls.searchable}
+                        clearable={!!controls.clearable}
+                        disabled={!!controls.disabled}
                     >
                         {list}
                     </Dropdown>