Merge pull request #543 from sebgroup/develop

Beta release of dynamic forms

docs/src/pages/docs/accordion.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import Docs from "@common/Docs";
 import { Accordion, AccordionItem } from "@sebgroup/react-components/Accordion";
-import { useDynamicForm } from "@hooks/useDynamicForm";
+import { useDynamicForm } from "@sebgroup/react-components/hooks/useDynamicForm";
 import { Button } from "@sebgroup/react-components/Button";
 import { Textbox } from "@sebgroup/react-components/Textbox";
 

docs/src/pages/docs/breadcrumb.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import Docs from "@common/Docs";
 import { Breadcrumb, BreadcrumbItem } from "@sebgroup/react-components/Breadcrumb";
-import { useDynamicForm } from "@hooks/useDynamicForm";
+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" }}>

docs/src/pages/docs/button.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import Docs from "@common/Docs";
 import { Button, ButtonSize, ButtonTheme } from "@sebgroup/react-components/Button";
-import { DynamicFormOption, useDynamicForm } from "@hooks/useDynamicForm";
+import { DynamicFormOption, useDynamicForm } from "@sebgroup/react-components/hooks/useDynamicForm";
 
 const importString: string = require("!raw-loader!@sebgroup/react-components/Button/Button");
 const code: string = `<Button>Click me</Button>`;

docs/src/pages/docs/buttongroup.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import Docs from "@common/Docs";
 import { ButtonGroup, ButtonGroupProps } from "@sebgroup/react-components/ButtonGroup";
-import { DynamicFormOption, useDynamicForm } from "@hooks/useDynamicForm";
+import { DynamicFormOption, useDynamicForm } from "@sebgroup/react-components/hooks/useDynamicForm";
 import { Button } from "@sebgroup/react-components/Button";
 
 const importString: string = require("!raw-loader!@sebgroup/react-components/ButtonGroup/ButtonGroup");

docs/src/pages/docs/carousel.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import Docs from "@common/Docs";
 import { Carousel, CarouselItem, CarouselProps } from "@sebgroup/react-components/Carousel";
 import { Img } from "@sebgroup/react-components/Image";
-import { DynamicFormOption, useDynamicForm } from "@hooks/useDynamicForm";
+import { DynamicFormOption, useDynamicForm } from "@sebgroup/react-components/hooks/useDynamicForm";
 
 const images = [
     require("../../assets/images/painting-1.jpg"),

docs/src/pages/docs/checkbox.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import Docs from "@common/Docs";
 import { Checkbox } from "@sebgroup/react-components/Checkbox/Checkbox";
-import { DynamicFormOption, useDynamicForm } from "@hooks/useDynamicForm";
+import { DynamicFormOption, useDynamicForm } from "@sebgroup/react-components/hooks/useDynamicForm";
 import { FeedbackIndicator, Indicator, IndicatorType } from "@sebgroup/react-components/FeedbackIndicator";
 import { CodeSnippet } from "@common/CodeSnippet";
 

docs/src/pages/docs/closebutton.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import Docs from "@common/Docs";
 import { CloseButton } from "@sebgroup/react-components/CloseButton";
 import { Slider } from "@sebgroup/react-components/Slider";
-import { useDynamicForm } from "@hooks/useDynamicForm";
+import { useDynamicForm } from "@sebgroup/react-components/hooks/useDynamicForm";
 
 const importString: string = require("!raw-loader!@sebgroup/react-components/CloseButton/CloseButton");
 const code: string = `<CloseButton />`;

docs/src/pages/docs/datepicker.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import Docs from "@common/Docs";
 import { Datepicker } from "@sebgroup/react-components/Datepicker";
-import { useDynamicForm } from "@hooks/useDynamicForm";
+import { useDynamicForm } from "@sebgroup/react-components/hooks/useDynamicForm";
 
 const importString: string = require("!raw-loader!@sebgroup/react-components/Datepicker/Datepicker");
 const code: string = `<Datepicker value={dateValue} onChange={setDateValue} />`;

docs/src/pages/docs/dropdown.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import Docs from "@common/Docs";
 import { Dropdown } from "@sebgroup/react-components/Dropdown";
-import { useDynamicForm } from "@hooks/useDynamicForm";
+import { useDynamicForm } from "@sebgroup/react-components/hooks/useDynamicForm";
 import { CodeSnippet } from "@common/CodeSnippet";
 
 const importString: string = require("!raw-loader!@sebgroup/react-components/Dropdown/Dropdown");

docs/src/pages/docs/feedbackindicator.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import Docs from "@common/Docs";
 import { FeedbackIndicator, IndicatorType } from "@sebgroup/react-components/FeedbackIndicator";
-import { DynamicFormOption, useDynamicForm } from "@hooks/useDynamicForm";
+import { DynamicFormOption, useDynamicForm } from "@sebgroup/react-components/hooks/useDynamicForm";
 import { Checkbox } from "@sebgroup/react-components/Checkbox";
 import { RadioButton } from "@sebgroup/react-components/RadioButton";
 

docs/src/pages/docs/image.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import Docs from "@common/Docs";
 import { Img, ImgProps } from "@sebgroup/react-components/Image/Img";
-import { DynamicFormOption, useDynamicForm } from "@hooks/useDynamicForm";
+import { DynamicFormOption, useDynamicForm } from "@sebgroup/react-components/hooks/useDynamicForm";
 import { Button } from "@sebgroup/react-components/Button";
 const image: string = require("../../assets/images/rabbit-on-the-spot.jpg");
 

docs/src/pages/docs/imagecropper.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import Docs from "@common/Docs";
 import { ImageCropper } from "@sebgroup/react-components/ImageCropper/ImageCropper";
-import { useDynamicForm } from "@hooks/useDynamicForm";
+import { useDynamicForm } from "@sebgroup/react-components/hooks/useDynamicForm";
 
 const importString: string = require("!raw-loader!@sebgroup/react-components/ImageCropper/ImageCropper");
 const code: string = `<ImageCropper value={image} onChange={setImage} />`;

docs/src/pages/docs/loader.tsx

@@ -1,7 +1,7 @@
 import Docs from "@common/Docs";
 import React from "react";
 import { Loader, LoaderSize, LoaderType } from "@sebgroup/react-components/Loader";
-import { useDynamicForm, DynamicFormOption } from "@hooks/useDynamicForm";
+import { useDynamicForm, DynamicFormOption } from "@sebgroup/react-components/hooks/useDynamicForm";
 
 const importString: string = require("!raw-loader!@sebgroup/react-components/Loader/Loader");
 const code: string = `<Loader toggle={toggle} />`;

docs/src/pages/docs/modal.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import Docs from "@common/Docs";
-import { DynamicFormOption, useDynamicForm } from "@hooks/useDynamicForm";
+import { DynamicFormOption, useDynamicForm } from "@sebgroup/react-components/hooks/useDynamicForm";
 import { Button } from "@sebgroup/react-components/Button";
 import { Modal, ModalSize, ModalPosition } from "@sebgroup/react-components/Modal";
 import { Textbox } from "@sebgroup/react-components/Textbox";

docs/src/pages/docs/notification.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import Docs from "@common/Docs";
 import { Notification, NotificationProps } from "@sebgroup/react-components/Notification";
-import { DynamicFormOption, useDynamicForm } from "@hooks/useDynamicForm";
+import { DynamicFormOption, useDynamicForm } from "@sebgroup/react-components/hooks/useDynamicForm";
 import { Button } from "@sebgroup/react-components/Button";
 import { CodeSnippet } from "@common/CodeSnippet";
 

docs/src/pages/docs/pagination.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import Docs from "@common/Docs";
-import { DynamicFormOption, useDynamicForm } from "@hooks/useDynamicForm";
+import { DynamicFormOption, useDynamicForm } from "@sebgroup/react-components/hooks/useDynamicForm";
 import { Pagination, Page, CustomNavs, PaginationProps } from "@sebgroup/react-components/Pagination";
 import CPUIcon from "../../../static/icons/cpu.svg";
 import GameControllerIcon from "../../../static/icons/game-controller.svg";

docs/src/pages/docs/progressbar.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import Docs from "@common/Docs";
 import { ProgressBar, ProgressBarProps } from "@sebgroup/react-components/ProgressBar";
-import { DynamicFormOption, useDynamicForm } from "@hooks/useDynamicForm";
+import { DynamicFormOption, useDynamicForm } from "@sebgroup/react-components/hooks/useDynamicForm";
 import { Slider } from "@sebgroup/react-components/Slider";
 
 const importString: string = require("!raw-loader!@sebgroup/react-components/ProgressBar/ProgressBar");

docs/src/pages/docs/radiobutton.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import Docs from "@common/Docs";
-import { DynamicFormOption, useDynamicForm } from "@hooks/useDynamicForm";
+import { DynamicFormOption, useDynamicForm } from "@sebgroup/react-components/hooks/useDynamicForm";
 import { RadioButton, RadioGroup } from "@sebgroup/react-components/RadioButton";
 import { CodeSnippet } from "@common/CodeSnippet";
 import { Indicator, IndicatorType } from "@sebgroup/react-components/FeedbackIndicator";

docs/src/pages/docs/rating.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import Docs from "@common/Docs";
 import { Rating } from "@sebgroup/react-components/Rating";
-import { useDynamicForm } from "@hooks/useDynamicForm";
+import { useDynamicForm } from "@sebgroup/react-components/hooks/useDynamicForm";
 import HeartSVG from "../../../static/icons/heart.svg";
 
 const importString: string = require("!raw-loader!@sebgroup/react-components/Rating/Rating");

docs/src/pages/docs/slider.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import Docs from "@common/Docs";
 import { SliderLabel, Slider, SliderTheme } from "@sebgroup/react-components/Slider";
-import { DynamicFormOption, useDynamicForm } from "@hooks/useDynamicForm";
+import { DynamicFormOption, useDynamicForm } from "@sebgroup/react-components/hooks/useDynamicForm";
 import { Indicator, IndicatorType } from "@sebgroup/react-components/FeedbackIndicator";
 
 const importString: string = require("!raw-loader!@sebgroup/react-components/Slider/Slider");

docs/src/pages/docs/stepper.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import Docs from "@common/Docs";
-import { DynamicFormOption, useDynamicForm } from "@hooks/useDynamicForm";
+import { DynamicFormOption, useDynamicForm } from "@sebgroup/react-components/hooks/useDynamicForm";
 import { Stepper } from "@sebgroup/react-components/Stepper";
 import { Indicator, IndicatorType } from "@sebgroup/react-components/FeedbackIndicator";
 

docs/src/pages/docs/steptracker.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import Docs from "@common/Docs";
-import { DynamicFormOption, DynamicFormSection, useDynamicForm } from "@hooks/useDynamicForm";
+import { DynamicFormOption, DynamicFormSection, useDynamicForm } from "@sebgroup/react-components/hooks/useDynamicForm";
 import { StepTracker } from "@sebgroup/react-components/StepTracker";
 import StepLabel, { StepLabelProps } from "@sebgroup/react-components/StepTracker/StepLabel";
 

docs/src/pages/docs/table.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import Docs from "@common/Docs";
 import { Table, TableBody, TableCell, TableHeader, TableHeaderCell, TableRow } from "@sebgroup/react-components/Table";
-import { useDynamicForm } from "@hooks/useDynamicForm";
+import { useDynamicForm } from "@sebgroup/react-components/hooks/useDynamicForm";
 import makeData from "@utils/makeData";
 import { Dropdown } from "@sebgroup/react-components/Dropdown";
 import { checkDynamicFormSelectedKey } from "@utils/helpers";

docs/src/pages/docs/textarea.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import Docs from "@common/Docs";
 import { Textarea } from "@sebgroup/react-components/Textarea";
-import { DynamicFormOption, useDynamicForm } from "@hooks/useDynamicForm";
+import { DynamicFormOption, useDynamicForm } from "@sebgroup/react-components/hooks/useDynamicForm";
 import { Indicator, IndicatorType } from "@sebgroup/react-components/FeedbackIndicator";
 
 const importString: string = require("!raw-loader!@sebgroup/react-components/Textarea/Textarea");

docs/src/pages/docs/textbox.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import Docs from "@common/Docs";
 import SearchIcon from "../../../static/icons/search.svg";
 import { Textbox } from "@sebgroup/react-components/Textbox";
-import { DynamicFormOption, DynamicFormSection, useDynamicForm } from "@hooks/useDynamicForm";
+import { DynamicFormOption, DynamicFormSection, useDynamicForm } from "@sebgroup/react-components/hooks/useDynamicForm";
 import { Indicator, IndicatorType } from "@sebgroup/react-components/FeedbackIndicator";
 
 const importString: string = require("!raw-loader!@sebgroup/react-components/Textbox/Textbox");

docs/src/pages/docs/textlabel.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import Docs from "@common/Docs";
 import { TextLabel } from "@sebgroup/react-components/TextLabel";
-import { DynamicFormOption, DynamicFormSection, useDynamicForm } from "@hooks/useDynamicForm";
+import { DynamicFormOption, DynamicFormSection, useDynamicForm } from "@sebgroup/react-components/hooks/useDynamicForm";
 
 const TextLabelPage: React.FC = React.memo(() => {
     const importString: string = require("!raw-loader!@sebgroup/react-components/TextLabel/TextLabel");

docs/src/pages/docs/timeline.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import Docs from "@common/Docs";
 import { Timeline, TimelineDirection, TimelineItem } from "@sebgroup/react-components/Timeline";
-import { DynamicFormOption, useDynamicForm } from "@hooks/useDynamicForm";
+import { DynamicFormOption, useDynamicForm } from "@sebgroup/react-components/hooks/useDynamicForm";
 import { loremIpsum } from "lorem-ipsum";
 
 const importString: string = require("!raw-loader!@sebgroup/react-components/Timeline/Timeline");

docs/src/pages/docs/timer.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import Docs from "@common/Docs";
 import { Timer } from "@sebgroup/react-components/Timer";
-import { DynamicFormSection, useDynamicForm } from "@hooks/useDynamicForm";
+import { DynamicFormSection, useDynamicForm } from "@sebgroup/react-components/hooks/useDynamicForm";
 
 const importString: string = require("!raw-loader!@sebgroup/react-components/Timer/Timer");
 const code: string = `<Timer duration={90000} callback={() => { console.log("TIMER ENDED callback"); }} />`;

docs/src/pages/docs/toggle-selector.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import Docs from "@common/Docs";
 import { ToggleSelector, ToggleSelectorItem } from "@sebgroup/react-components/ToggleSelector";
-import { DynamicFormOption, useDynamicForm } from "@hooks/useDynamicForm";
+import { DynamicFormOption, useDynamicForm } from "@sebgroup/react-components/hooks/useDynamicForm";
 import { Indicator, IndicatorType } from "@sebgroup/react-components/FeedbackIndicator";
 import LaughingIcon from "../../../static/icons/emoji-laughing-fill.svg";
 import DizzyIcon from "../../../static/icons/emoji-dizzy-fill.svg";

docs/src/pages/docs/toggle.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import Docs from "@common/Docs";
 import { Toggle } from "@sebgroup/react-components/Toggle";
-import { DynamicFormOption, DynamicFormSection, useDynamicForm } from "@hooks/useDynamicForm";
+import { DynamicFormOption, DynamicFormSection, useDynamicForm } from "@sebgroup/react-components/hooks/useDynamicForm";
 
 const TogglePage: React.FC = () => {
     const importString: string = require("!raw-loader!@sebgroup/react-components/Toggle/Toggle");

docs/src/pages/docs/tooltip.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import Docs from "@common/Docs";
 import { Tooltip } from "@sebgroup/react-components/Tooltip";
 import { Notification } from "@sebgroup/react-components/Notification";
-import { DynamicFormOption, DynamicFormSection, useDynamicForm } from "@hooks/useDynamicForm";
+import { DynamicFormOption, DynamicFormSection, useDynamicForm } from "@sebgroup/react-components/hooks/useDynamicForm";
 
 const TooltipPage: React.FC = () => {
     const importString: string = require("!raw-loader!@sebgroup/react-components/Tooltip/Tooltip");

docs/src/pages/docs/video.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import Docs from "@common/Docs";
 import { Video } from "@sebgroup/react-components/Video";
-import { DynamicFormOption, DynamicFormSection, useDynamicForm } from "@hooks/useDynamicForm";
+import { DynamicFormOption, DynamicFormSection, useDynamicForm } from "@sebgroup/react-components/hooks/useDynamicForm";
 
 const VideoPage: React.FC = () => {
     const defaultSrc: string = "https://www.youtube.com/embed/f19fctL72CY";

docs/src/utils/helpers.ts

@@ -1,4 +1,4 @@
-import { DynamicFormOption } from "@hooks/useDynamicForm";
+import { DynamicFormOption } from "@sebgroup/react-components/hooks/useDynamicForm";
 
 /** check if key selected from options */
 

lib/src/hooks/index.ts

@@ -1 +1,2 @@
 export * from "./useCombinedRef";
+export * from "./useDynamicForm";

docs/src/hooks/useDynamicForm.tsx → lib/src/hooks/useDynamicForm.tsx

@@ -1,13 +1,13 @@
 import React, { useState, ReactNode, useMemo, useCallback } from "react";
 import classnames from "classnames";
 
-import { Checkbox } from "@sebgroup/react-components/Checkbox";
-import { Textbox } from "@sebgroup/react-components/Textbox";
-import { Textarea } from "@sebgroup/react-components/Textarea";
-import { Dropdown, getValueOfMultipleSelect } from "@sebgroup/react-components/Dropdown";
-import { Datepicker } from "@sebgroup/react-components/Datepicker";
-import { Stepper } from "@sebgroup/react-components/Stepper";
-import { RadioButton, RadioGroup } from "@sebgroup/react-components/RadioButton";
+import { Checkbox } from "../Checkbox";
+import { Textbox } from "../Textbox";
+import { Textarea } from "../Textarea";
+import { Dropdown, getValueOfMultipleSelect } from "../Dropdown";
+import { Datepicker } from "../Datepicker";
+import { Stepper } from "../Stepper";
+import { RadioButton, RadioGroup } from "../RadioButton";
 
 type DynamicFormInternalStateValue = string | string[] | DynamicFormOption | DynamicFormOption[] | Date | boolean | number;
 export interface DynamicFormItem {
@@ -283,7 +283,6 @@ const DynamicFormItemComponent: React.FC<{
         }
 
         case "Dropdown": {
-            console.log(props.state);
             formItem = (
                 <>
                     {props.item?.label && <label>{props.item?.label}</label>}