groovinads-ui 1.2.19 → 1.2.21

package/src/components/Inputs/Input.jsx

@@ -11,7 +11,7 @@ import Icon from '../Labels/Icon';
 const Input = ({
 	autoFocus = false,
 	className = '',
-	customRef,
+	focus=false,
 	disabled,
 	helpText,
 	icon,
@@ -28,7 +28,7 @@ const Input = ({
 	value,
 }) => {
 	const { toCamelCase } = useTextFormatter();
-	const searchInput = useRef(null);
+	const inputRef = useRef(null);
 
 	const id = toCamelCase(label);
 
@@ -41,10 +41,10 @@ const Input = ({
 	}, [showError]);
 
 	useEffect(() => {
-		if(searchInput.current && customRef) {
-			searchInput.current.focus();
+		if(inputRef.current && focus) {
+			inputRef.current.focus();
 		  }
-	}, [customRef])
+	}, [focus])
 
 	return (
 		<div className={`position-relative ${className}`}>
@@ -74,7 +74,7 @@ const Input = ({
 							onChange={onChange}
 							required={!!requiredText}
 							autoFocus={autoFocus}
-							ref={searchInput}
+							ref={inputRef}
 						/>
 						<label htmlFor={id}>{label}</label>
 					</div>
@@ -96,7 +96,7 @@ const Input = ({
 						name={name}
 						disabled={disabled}
 						autoFocus={autoFocus}
-						ref={searchInput}
+						ref={inputRef}
 					/>
 					<label htmlFor={id}>{label}</label>
 				</div>
@@ -108,7 +108,7 @@ const Input = ({
 
 Input.propTypes = {
 	className: PropTypes.string,
-	customRef: PropTypes.bool,
+	focus: PropTypes.bool,
 	disabled: PropTypes.bool,
 	helpText: PropTypes.string,
 	icon: PropTypes.string,

package/src/components/Navigation/Tabnav.jsx

@@ -8,42 +8,55 @@ import { Icon } from '../Labels';
 // HOOKS
 import useTextFormatter from '../../hooks/useTextFormatter';
 
-function Tabnav({ tabs = [], activeTab }) {
-  const { toCamelCase } = useTextFormatter();
-
-  const handleSelect = (k) => {
-    const tabIndex = tabs.findIndex((tab) => toCamelCase(tab.tab) === k);
-    console.log(tabs[tabIndex].url);
-
-    window.location.href = tabs[tabIndex].url;
-  };
-
-  const formatTabsName = (tab) => {
-    if (tab === 'api_keys') {
-      return 'API Keys';
+function Tabnav({ tabs = [], activeTab = 1, customFunction = false}) {
+	const { toCamelCase } = useTextFormatter();
+
+	const handleSelect = (k) => {
+    if (customFunction){
+      console.log('custom function');
+    }else{
+      const tabIndex = tabs.findIndex((tab) => toCamelCase(tab.tab) === k);
+      console.log(tabs[tabIndex].url);
+  
+      window.location.href = tabs[tabIndex].url;
     }
-    const tabReplace = tab.replace('_', ' ');
-    return tabReplace.charAt(0).toUpperCase() + tabReplace.slice(1);
-  };
-console.log(activeTab)
-  return (
-    <Nav variant='tabs' activeKey={activeTab} onSelect={handleSelect}>
-      {tabs.map(({ tab, badgeNumber, warningIcon }, index) => (
-        <Nav.Item key={index}>
-          <Nav.Link eventKey={toCamelCase(tab)}>
-            {warningIcon && <Icon iconName='triangle-exclamation' />}
-            {formatTabsName(tab)}
-            {badgeNumber && <span className='tab-badge'>{badgeNumber}</span>}
-          </Nav.Link>
-        </Nav.Item>
-      ))}
-    </Nav>
-  );
+
+	};
+
+	const formatTabsName = (tab) => {
+		if (tab === 'api_keys') {
+			return 'API Keys';
+		}
+		const tabReplace = tab.replace('_', ' ');
+		return tabReplace.charAt(0).toUpperCase() + tabReplace.slice(1);
+	};
+
+	return (
+		<Nav
+			variant='tabs'
+			activeKey={toCamelCase(tabs[activeTab - 1].tab)}
+			onSelect={handleSelect}
+		>
+			{tabs.map(({ tab, badgeNumber, warningIcon }, index) => (
+				<Nav.Item key={index}>
+					<Nav.Link
+						eventKey={toCamelCase(tab)}
+					>
+						{/* Dia 1 => dia1 */}
+						{warningIcon && <Icon iconName='triangle-exclamation' />}
+						{formatTabsName(tab)}
+						{badgeNumber && <span className='tab-badge'>{badgeNumber}</span>}
+					</Nav.Link>
+				</Nav.Item>
+			))}
+		</Nav>
+	);
 }
 
 Tabnav.propTypes = {
-  tabs: PropTypes.array,
-  activeTab: PropTypes.string,
+	tabs: PropTypes.array,
+	activeTab: PropTypes.number,
+  customFunction: PropTypes.bool
 };
 
 export default Tabnav;

package/src/hooks/useTextFormatter.jsx

@@ -16,6 +16,8 @@ const useTextFormatter = () => {
 		return s;
 	}, []);
 
+	const capitalice = (str) => (str ? `${str.charAt(0).toUpperCase()}${str.slice(1)}` : '');
+
 	const highlightText = (text, query) => {
 		if (!query) return text;
 
@@ -40,7 +42,7 @@ const useTextFormatter = () => {
 
 	// Additional methods can be added here
 
-	return { toCamelCase, highlightText };
+	return { toCamelCase, highlightText, capitalice };
 };
 
 export default useTextFormatter;

package/src/index.js

@@ -4,7 +4,8 @@ import Button from "./components/Button/Button";
 // Dropdowns
 import DropdownComponent from './components/Dropdowns/DropdownComponent';
 import DropdownFilter from './components/Dropdowns/DropdownFilter';
-import DropdownInput from './components/Dropdowns/DropdownInput';
+import DropdownMultiSelect from './components/Dropdowns/DropdownMultiSelect';
+import DropdownDatePicker from './components/Dropdowns/DropdownsDatePicker/DropdownDatePicker';
 
 // Inputs
 import Checkbox from './components/Inputs/Checkbox';
@@ -30,4 +31,32 @@ import Navbar from './components/Navigation/Navbar';
 import Stepper from './components/Navigation/Stepper';
 import Tabnav from './components/Navigation/Tabnav';
 
-export { Button, DropdownComponent, DropdownFilter, DropdownInput, Checkbox, Input, Radio, Switch, Textarea, Alert, Icon, LoginSource, PillComponent, Spinner, StatusIcon, ToastComponent, ToastProgress, Navbar, Stepper, Tabnav }
+export { 
+    // Buttons
+    Button, 
+    // Dropdowns
+    DropdownComponent, 
+    DropdownFilter, 
+    DropdownMultiSelect, 
+    DropdownDatePicker,
+    // Inputs
+    Checkbox, 
+    Input, 
+    Radio, 
+    Switch, 
+    Textarea, 
+    // Labels
+    Alert, 
+    Icon, 
+    LoginSource, 
+    PillComponent, 
+    Spinner, 
+    StatusIcon, 
+    // Toasts
+    ToastComponent, 
+    ToastProgress, 
+    // Navigation
+    Navbar, 
+    Stepper, 
+    Tabnav 
+}

package/src/stories/DropdownDatePicker.stories.jsx

@@ -0,0 +1,67 @@
+import React, { useState } from 'react';
+import { DropdownDatePicker } from '../components/Dropdowns';
+
+export default {
+	title: 'Dropdown/DropdownDatePicker',
+	component: DropdownDatePicker,
+};
+
+const Template = (args) => {
+	const [show, setShow] = useState(false);
+
+	const [fromDate1, setFromDate1] = useState('');
+	const [toDate1, setToDate1] = useState('');
+
+	const [fromDate2, setFromDate2] = useState('');
+	const [toDate2, setToDate2] = useState('');
+
+	const handleToggle = () => setShow((prevShow) => !prevShow);
+
+	// const [dateFrom, setDateFrom] = useState();
+	// const [dateTo, setDateTo] = useState();
+
+	// const [datePicker1StartDate, setDatePicker1StartDate] = useState();
+	// const [datePicker1EndDate, setDatePicker1EndDate] = useState();
+	// const [datePicker2StartDate, setDatePicker2StartDate] = useState();
+	// const [datePicker2EndDate, setDatePicker2EndDate] = useState();
+	// const [tableQueryObj, setTableQueryObj] = useState();
+
+	return (
+		<>
+			<button onClick={() => setShow(!show)}>Toggle</button>
+			<div>
+				<DropdownDatePicker
+					{...args}
+					show={show}
+					setShow={setShow}
+					onToggle={handleToggle}
+					fromDate1={fromDate1}
+					setFromDate1={setFromDate1}
+					toDate1={toDate1}
+					setToDate1={setToDate1}
+					fromDate2={fromDate2}
+					setFromDate2={setFromDate2}
+					toDate2={toDate2}
+					setToDate2={setToDate2}
+					// dateFrom={dateFrom}
+					// setDateFrom={setDateFrom}
+					// dateTo={dateTo}
+					// setDateTo={setDateTo}
+					// datePicker1StartDate={datePicker1StartDate}
+					// setDatePicker1StartDate={setDatePicker1StartDate}
+					// datePicker1EndDate={datePicker1EndDate}
+					// setDatePicker1EndDate={setDatePicker1EndDate}
+					// datePicker2StartDate={datePicker2StartDate}
+					// setDatePicker2StartDate={setDatePicker2StartDate}
+					// datePicker2EndDate={datePicker2EndDate}
+					// setDatePicker2EndDate={setDatePicker2EndDate}
+					// tableQueryObj={tableQueryObj}
+					// setTableQueryObj={setTableQueryObj}
+					// fetchData={() => {}}
+				/>
+			</div>
+		</>
+	);
+};
+
+export const Default = Template.bind({});

package/src/stories/{DropdownInput.stories.jsx → DropdownMultiSelect.stories.jsx}

@@ -1,9 +1,9 @@
 import React, { useState } from "react";
-import DropdownInput from "../components/Dropdowns/DropdownInput";
+import DropdownMultiSelect from "../components/Dropdowns/DropdownMultiSelect";
 
 export default {
-  title: "Dropdown/DropdownInput",
-  component: DropdownInput,
+  title: "Dropdown/DropdownMultiSelect",
+  component: DropdownMultiSelect,
 };
 
 const Template = (args) => {
@@ -24,7 +24,7 @@ const Template = (args) => {
 		<>
 			{/* <button onClick={() => setShow(false)}>Close</button>
 			<button onClick={() => setShow(true)}>Open</button> */}
-			<DropdownInput
+			<DropdownMultiSelect
 			 	{...args}
 				valuesSelected={selectedValues}
 				setValuesSelected={setSelectedValues}
@@ -34,8 +34,10 @@ const Template = (args) => {
 				object={true}
 				nameKey="name"
 				idKey={"id"}
-				inputLabel='Filters'
-            ></DropdownInput>
+				inputLabel={'Filters'}
+				focus={show}
+				
+            ></DropdownMultiSelect>
 		</>
 	)
 };