Implement TabViewer component (#24)

* [mobrix-ui #23] Implement TabPanel component * export updated * fix * improvements & clean up * fix * updates * component refactoring * format fix * minor lint fix
CianciarusoCataldo · Jul 14, 2023 · 4c8bdab · 4c8bdab
1 parent adb3f69
commit 4c8bdab
Show file tree

Hide file tree

Showing 85 changed files with 504 additions and 126 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,7 @@
 
 ## Versions
 
+- [2.1.0](#210)
 - [2.0.0](#200)
 - [1.2.0](#120)
 - [1.1.0](#110)
@@ -15,6 +16,13 @@
 
 <br>
 
+### 2.1.0
+
+- `TabViewer` component
+- Minor fixes
+
+<br>
+
 ### 2.0.0
 
 - `Calendar` component

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mobrix-ui",
-  "version": "2.0.3",
+  "version": "2.1.0",
   "description": "React components for every app, easy to use and customize",
   "main": "dist/index.cjs",
   "module": "dist/index.mjs",

diff --git a/playground/public/locales/de/tabviewer.json b/playground/public/locales/de/tabviewer.json
@@ -0,0 +1 @@
+{}
diff --git a/playground/public/locales/en/tabviewer.json b/playground/public/locales/en/tabviewer.json
@@ -0,0 +1 @@
+{}
diff --git a/playground/public/locales/es/tabviewer.json b/playground/public/locales/es/tabviewer.json
@@ -0,0 +1 @@
+{}
diff --git a/playground/public/locales/fr/tabviewer.json b/playground/public/locales/fr/tabviewer.json
@@ -0,0 +1 @@
+{}
diff --git a/playground/public/locales/it/tabviewer.json b/playground/public/locales/it/tabviewer.json
@@ -0,0 +1 @@
+{}
diff --git a/playground/src/components/AppPage/index.tsx b/playground/src/components/AppPage/index.tsx
@@ -1,12 +1,12 @@
 import classNames from "classnames";
-import { AllowedComponent, Container } from "mobrix-ui-preview";
+import { BuilderComponent, Container } from "mobrix-ui-preview";
 
 const AppPage = ({
   className,
   children,
 }: {
   className?: string;
-  children: AllowedComponent | AllowedComponent[];
+  children: BuilderComponent | BuilderComponent[];
 }) => {
   return (
     <Container animated unstyled className={classNames("m-2", className)}>

diff --git a/playground/src/components/ComponentPage/index.tsx b/playground/src/components/ComponentPage/index.tsx
@@ -2,7 +2,7 @@ import { TFunction, useTranslation } from "react-i18next";
 
 import { useCommonTranslation } from "hooks/localization";
 
-import { AllowedComponent, Table } from "mobrix-ui-preview";
+import { BuilderComponent, Table } from "mobrix-ui-preview";
 import AppLabel from "../AppLabel";
 import AppPage from "../AppPage";
 
@@ -13,11 +13,11 @@ export const ComponentPage = ({
   props,
   translations,
 }: {
-  children?: AllowedComponent | AllowedComponent[];
+  children?: BuilderComponent | BuilderComponent[];
   render?: (
     t: TFunction,
     label?: string
-  ) => AllowedComponent | AllowedComponent[];
+  ) => BuilderComponent | BuilderComponent[];
   name: string;
   props?: string[][];
   translations?: boolean;

diff --git a/playground/src/engine.config.js b/playground/src/engine.config.js
@@ -56,6 +56,7 @@ const engineConfig = {
       Slider: "/components/atoms/Slider",
       Spinner: "/components/atoms/Spinner",
       Table: "/components/molecules/Table",
+      TabViewer: "/components/organisms/TabViewer",
       Toggle: "/components/atoms/Toggle",
     },
   },

diff --git a/playground/src/pages/FacebookButtons/index.tsx b/playground/src/pages/FacebookButtons/index.tsx
@@ -7,7 +7,7 @@ import {
 import { ComponentPage } from "components/ComponentPage";
 import { demoRows, demoProps } from "constants/demo-props";
 import DemoComponent from "components/DemoComponent";
-import { FacebookButtonsProps } from "mobrix-ui-preview/components/atoms/FacebookButtons/types";
+import { FacebookButtonsProps } from "mobrix-ui-preview";
 
 const FacebookButtonsPage = () => (
   <ComponentPage

diff --git a/playground/src/pages/TabViewer/index.tsx b/playground/src/pages/TabViewer/index.tsx
@@ -0,0 +1,77 @@
+import { Card, Form, TabViewer } from "mobrix-ui-preview";
+import {
+  HiddenProp,
+  NumberProp,
+  StringProp,
+} from "@cianciarusocataldo/demo-ui";
+import { ComponentPage } from "components/ComponentPage";
+import { demoRows, demoProps } from "constants/demo-props";
+import DemoComponent from "components/DemoComponent";
+
+const TabViewerPage = () => (
+  <ComponentPage
+    name="TabViewer"
+    translations
+    render={(t, componentLabel) => {
+      return (
+        <DemoComponent
+          label={componentLabel}
+          startColor="#BFBABA"
+          props={{
+            tabClassName: StringProp(""),
+            tabSelectedClassName: StringProp(""),
+            tabUnselectedClassName: StringProp(""),
+            tabViewClassName: StringProp(""),
+            selected: NumberProp(0),
+            tabs: HiddenProp([
+              {
+                label: "Tab 1",
+                content: (
+                  <div className="bg-white p-4">
+                    <Card
+                      shadow
+                      header={"Example card"}
+                      body={`Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
+                        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
+                        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
+                        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                        `}
+                    />
+                  </div>
+                ),
+              },
+              {
+                label: "Tab 2",
+                content: (
+                  <div>
+                    <Form
+                      shadow
+                      fields={{
+                        field_1: { header: "Example field", type: "boolean" },
+                      }}
+                      buttonContent={"Submit"}
+                    />
+                  </div>
+                ),
+              },
+              {
+                label: "Tab 3",
+                content: <div>Tab 3 content</div>,
+              },
+            ]),
+            ...demoProps,
+          }}
+          rows={[
+            ["selected", "tabClassName", "tabSelectedClassName"],
+            ["tabUnselectedClassName", "tabViewClassName"],
+            ...demoRows,
+          ]}
+        >
+          {TabViewer}
+        </DemoComponent>
+      );
+    }}
+  />
+);
+
+export default TabViewerPage;
diff --git a/src/components/atoms/Button/index.ts b/src/components/atoms/Button/index.ts
@@ -42,7 +42,7 @@ import { buildMobrixUiStandardComponent } from "../../../utils";
  *
  * @author Cataldo Cianciaruso <https://github.com/CianciarusoCataldo>
  *
- * @copyright 2022 Cataldo Cianciaruso
+ * @copyright 2023 Cataldo Cianciaruso
  */
 const Button: ButtonComponent = ({
   disabled,

diff --git a/src/components/atoms/CheckBox/index.ts b/src/components/atoms/CheckBox/index.ts
@@ -39,7 +39,7 @@ import { DefaultCheckIcon } from "./icons";
  *
  * @author Cataldo Cianciaruso <https://github.com/CianciarusoCataldo>
  *
- * @copyright 2022 Cataldo Cianciaruso
+ * @copyright 2023 Cataldo Cianciaruso
  */
 const Checkbox: CheckBoxComponent = ({
   value,

diff --git a/src/components/atoms/CodeBox/index.ts b/src/components/atoms/CodeBox/index.ts
@@ -39,7 +39,7 @@ import codeboxComponent from "./component";
  *
  * @author Cataldo Cianciaruso <https://github.com/CianciarusoCataldo>
  *
- * @copyright 2022 Cataldo Cianciaruso
+ * @copyright 2023 Cataldo Cianciaruso
  */
 const CodeBox: CodeBoxComponent = ({
   value,

diff --git a/src/components/atoms/CodeBox/languages.ts b/src/components/atoms/CodeBox/languages.ts
@@ -3,7 +3,7 @@
  *
  * @author Cataldo Cianciaruso <https://github.com/CianciarusoCataldo>
  *
- * @copyright 2022 Cataldo Cianciaruso
+ * @copyright 2023 Cataldo Cianciaruso
  */
 export const CODE_LANGUAGES = {
   common: {

diff --git a/src/components/atoms/CodeBox/parser.ts b/src/components/atoms/CodeBox/parser.ts
@@ -84,7 +84,7 @@ const getHighlightedCode = (
  *
  * @author Cataldo Cianciaruso <https://github.com/CianciarusoCataldo>
  *
- * @copyright 2022 Cataldo Cianciaruso
+ * @copyright 2023 Cataldo Cianciaruso
  */
 export const parseCode = (code: string, environment: SupportedEnvironment) => {
   return getHighlightedCode(

diff --git a/src/components/atoms/Counter/index.ts b/src/components/atoms/Counter/index.ts
@@ -41,7 +41,7 @@ import { buildMobrixUiReactiveComponent } from "../../../utils";
  *
  * @author Cataldo Cianciaruso <https://github.com/CianciarusoCataldo>
  *
- * @copyright 2022 Cataldo Cianciaruso
+ * @copyright 2023 Cataldo Cianciaruso
  */
 const Counter: CounterComponent = ({
   onChange,

diff --git a/src/components/atoms/Divider/index.ts b/src/components/atoms/Divider/index.ts
@@ -34,7 +34,7 @@ import { buildMobrixUiStandardComponent } from "../../../utils";
  *
  * @author Cataldo Cianciaruso <https://github.com/CianciarusoCataldo>
  *
- * @copyright 2022 Cataldo Cianciaruso
+ * @copyright 2023 Cataldo Cianciaruso
  */
 const Divider: DividerComponent = (props) =>
   buildMobrixUiStandardComponent({

diff --git a/src/components/atoms/FacebookButtons/index.ts b/src/components/atoms/FacebookButtons/index.ts
@@ -40,7 +40,7 @@ import facebookButtonsComponent from "./component";
  *
  * @author Cataldo Cianciaruso <https://github.com/CianciarusoCataldo>
  *
- * @copyright 2022 Cataldo Cianciaruso
+ * @copyright 2023 Cataldo Cianciaruso
  */
 const FacebookButtons: FacebookButtonsComponent = ({
   pageId,

diff --git a/src/components/atoms/Input/index.ts b/src/components/atoms/Input/index.ts
@@ -38,7 +38,7 @@ import { buildMobrixUiReactiveComponent } from "../../../utils";
  *
  * @author Cataldo Cianciaruso <https://github.com/CianciarusoCataldo>
  *
- * @copyright 2022 Cataldo Cianciaruso
+ * @copyright 2023 Cataldo Cianciaruso
  */
 const Input: InputComponent = ({
   onChange,

diff --git a/src/components/atoms/Label/index.ts b/src/components/atoms/Label/index.ts
@@ -35,7 +35,7 @@ import { buildMobrixUiStandardComponent } from "../../../utils";
  *
  * @author Cataldo Cianciaruso <https://github.com/CianciarusoCataldo>
  *
- * @copyright 2022 Cataldo Cianciaruso
+ * @copyright 2023 Cataldo Cianciaruso
  */
 const Label: LabelComponent = ({ children, ...commonProps }) =>
   buildMobrixUiStandardComponent({

diff --git a/src/components/atoms/Link/index.ts b/src/components/atoms/Link/index.ts
@@ -37,7 +37,7 @@ import { buildMobrixUiStandardComponent } from "../../../utils";
  *
  * @author Cataldo Cianciaruso <https://github.com/CianciarusoCataldo>
  *
- * @copyright 2022 Cataldo Cianciaruso
+ * @copyright 2023 Cataldo Cianciaruso
  */
 const Link: LinkComponent = ({ to, children, newTab, ...commonProps }) =>
   buildMobrixUiStandardComponent({

diff --git a/src/components/atoms/RadioButton/index.ts b/src/components/atoms/RadioButton/index.ts
@@ -37,7 +37,7 @@ import component from "./component";
  *
  * @author Cataldo Cianciaruso <https://github.com/CianciarusoCataldo>
  *
- * @copyright 2022 Cataldo Cianciaruso
+ * @copyright 2023 Cataldo Cianciaruso
  */
 const RadioButton: RadioButtonComponent = ({
   value: inputValue,

diff --git a/src/components/atoms/Selector/index.ts b/src/components/atoms/Selector/index.ts
@@ -41,7 +41,7 @@ import selectorComponent from "./component";
  *
  * @author Cataldo Cianciaruso <https://github.com/CianciarusoCataldo>
  *
- * @copyright 2022 Cataldo Cianciaruso
+ * @copyright 2023 Cataldo Cianciaruso
  */
 const Selector: SelectorComponent = ({
   elements,

diff --git a/src/components/atoms/Slider/index.ts b/src/components/atoms/Slider/index.ts
@@ -41,7 +41,7 @@ import { buildMobrixUiReactiveComponent } from "../../../utils";
  *
  * @author Cataldo Cianciaruso <https://github.com/CianciarusoCataldo>
  *
- * @copyright 2022 Cataldo Cianciaruso
+ * @copyright 2023 Cataldo Cianciaruso
  */
 const Slider: SliderComponent = ({
   onChange = () => {},

diff --git a/src/components/atoms/Spinner/index.ts b/src/components/atoms/Spinner/index.ts
@@ -39,7 +39,7 @@ import defaultIcons from "./icons";
  *
  * @author Cataldo Cianciaruso <https://github.com/CianciarusoCataldo>
  *
- * @copyright 2022 Cataldo Cianciaruso
+ * @copyright 2023 Cataldo Cianciaruso
  */
 const Spinner: SpinnerComponent = ({
   value: inputValue,

diff --git a/src/components/atoms/Toggle/index.ts b/src/components/atoms/Toggle/index.ts
@@ -41,7 +41,7 @@ import toggleComponentBuilder from "./builder";
  *
  * @author Cataldo Cianciaruso <https://github.com/CianciarusoCataldo>
  *
- * @copyright 2022 Cataldo Cianciaruso
+ * @copyright 2023 Cataldo Cianciaruso
  */
 const Toggle: ToggleComponent = ({ value: inputValue, ...props }) =>
   buildMobrixUiReactiveComponent<boolean>({

diff --git a/src/components/molecules/Card/index.ts b/src/components/molecules/Card/index.ts
@@ -40,7 +40,7 @@ import cardComponent from "./component";
  *
  * @author Cataldo Cianciaruso <https://github.com/CianciarusoCataldo>
  *
- * @copyright 2022 Cataldo Cianciaruso
+ * @copyright 2023 Cataldo Cianciaruso
  */
 const Card: CardComponent = ({
   icon,

diff --git a/src/components/molecules/Carousel/index.ts b/src/components/molecules/Carousel/index.ts
@@ -38,7 +38,7 @@ import carouselComponent from "./component";
  *
  * @author Cataldo Cianciaruso <https://github.com/CianciarusoCataldo>
  *
- * @copyright 2022 Cataldo Cianciaruso
+ * @copyright 2023 Cataldo Cianciaruso
  */
 const Carousel: CarouselComponent = ({
   elements: actualElements,

diff --git a/src/components/molecules/Container/index.ts b/src/components/molecules/Container/index.ts
@@ -36,7 +36,7 @@ import { buildMobrixUiStandardComponent } from "../../../utils";
  *
  * @author Cataldo Cianciaruso <https://github.com/CianciarusoCataldo>
  *
- * @copyright 2022 Cataldo Cianciaruso
+ * @copyright 2023 Cataldo Cianciaruso
  */
 const Container: ContainerComponent = ({
   children,

diff --git a/src/components/molecules/Dropdown/index.ts b/src/components/molecules/Dropdown/index.ts
@@ -42,7 +42,7 @@ import dropdownComponentBuilder from "./builder";
  *
  * @author Cataldo Cianciaruso <https://github.com/CianciarusoCataldo>
  *
- * @copyright 2022 Cataldo Cianciaruso
+ * @copyright 2023 Cataldo Cianciaruso
  */
 const Dropdown: DropdownComponent = ({
   content,

diff --git a/src/components/molecules/ExpandableContainer/index.ts b/src/components/molecules/ExpandableContainer/index.ts
@@ -45,7 +45,7 @@ import expandableContainerComponent from "./component";
  *
  * @author Cataldo Cianciaruso <https://github.com/CianciarusoCataldo>
  *
- * @copyright 2022 Cataldo Cianciaruso
+ * @copyright 2023 Cataldo Cianciaruso
  */
 const ExpandableContainer: ExpandableContainerComponent = ({
   expanded,

diff --git a/src/components/molecules/Form/index.ts b/src/components/molecules/Form/index.ts
@@ -50,7 +50,7 @@ import formComponent from "./component";
  *
  * @author Cataldo Cianciaruso <https://github.com/CianciarusoCataldo>
  *
- * @copyright 2022 Cataldo Cianciaruso
+ * @copyright 2023 Cataldo Cianciaruso
  */
 const Form: FormComponent = ({
   title,

diff --git a/src/components/molecules/List/index.ts b/src/components/molecules/List/index.ts
@@ -37,7 +37,7 @@ import listComponent from "./component";
  *
  * @author Cataldo Cianciaruso <https://github.com/CianciarusoCataldo>
  *
- * @copyright 2022 Cataldo Cianciaruso
+ * @copyright 2023 Cataldo Cianciaruso
  */
 const List: ListComponent = ({ elements, onChange, ...commonProps }) =>
   buildMobrixUiStandardComponent({