groovinads-ui 1.2.20 → 1.2.21

package/src/components/Dropdowns/DropdownsDatePicker/PeriodAndDetailDropdowns.tsx

@@ -0,0 +1,351 @@
+import React, { useRef } from 'react';
+
+const PeriodAndDetailDropdowns = ({
+	DDPeriod1,
+	setDDPeriod1,
+	DDDetailLevel1,
+	setDDDetailLevel1,
+	DDPeriod2,
+	setDDPeriod2,
+	DDDetailLevel2,
+	setDDDetailLevel2,
+}) => {
+	const DDPeriod1Btn = useRef(null);
+	const DDPeriod1Dropwdown = useRef(null);
+	const DDDetailLevel1Btn = useRef(null);
+	const DDDetailLevel1Dropwdown = useRef(null);
+
+	const DDPeriod2Btn = useRef(null);
+	const DDPeriod2Dropwdown = useRef(null);
+	const DDDetailLevel2Btn = useRef(null);
+	const DDDetailLevel2Dropwdown = useRef(null);
+
+	const closeDropwdown = (DDRef, btnRef) => {
+		if (DDRef?.current?.className) {
+			DDRef.current.className = 'dropdown-menu dropdown-submenu shadow-2';
+		}
+		if (btnRef?.current?.className) {
+			btnRef.current.className = 'btn btn-input grey dropdown-toggle';
+		}
+	};
+
+	const updateDDPeriod1 = (value, dropdown) => {
+		setDDPeriod1(value);
+		closeDropwdown(dropdown, DDPeriod1Btn);
+	};
+
+	const updateDDDetailLevel1 = (value, dropdown) => {
+		setDDDetailLevel1(value);
+		closeDropwdown(dropdown, DDDetailLevel1Btn);
+	};
+
+	const updateDDPeriod2 = (value, dropdown) => {
+		setDDPeriod2(value);
+		closeDropwdown(dropdown, DDPeriod2Btn);
+	};
+
+	const updateDDDetailLevel2 = (value, dropdown) => {
+		setDDDetailLevel2(value);
+		closeDropwdown(dropdown, DDDetailLevel2Btn);
+	};
+
+	return (
+		<div className='tab-content' id='dateComparisonTabsContent'>
+			{/* DROPDOWNS FOR DATE 1 */}
+			<div
+				className='tab-pane fade show active'
+				id='date1ComparisonTabPane'
+				role='tabpanel'
+				aria-labelledby='date1ComparisonTab'
+				tabIndex={0}
+			>
+				<div className='d-flex gap-3 flex-column flex-md-row'>
+					<div className='dropdown dropdown-pills'>
+						<label className='dropdown-label' htmlFor='periodDate1'>
+							Period
+						</label>
+						<button
+							className='btn btn-input grey dropdown-toggle'
+							type='button'
+							data-bs-toggle='dropdown'
+							aria-expanded='false'
+							id='periodDate1'
+							ref={DDPeriod1Btn}
+						>
+							<span>{DDPeriod1}</span>
+							<i className='fa-solid fa-angle-down icon caret'></i>
+						</button>
+
+						<ul
+							className='dropdown-menu dropdown-submenu shadow-2'
+							ref={DDPeriod1Dropwdown}
+						>
+							<li>
+								<button
+									className='dropdown-item'
+									onClick={() =>
+										updateDDPeriod1('Custom range', DDPeriod1Dropwdown)
+									}
+								>
+									Custom range
+								</button>
+							</li>
+
+							<li>
+								<button
+									className='dropdown-item'
+									onClick={() => updateDDPeriod1('Today', DDPeriod1Dropwdown)}
+								>
+									Today
+								</button>
+							</li>
+
+							<li>
+								<button
+									className='dropdown-item'
+									onClick={() =>
+										updateDDPeriod1('Yesterday', DDPeriod1Dropwdown)
+									}
+								>
+									Yesterday
+								</button>
+							</li>
+
+							<li>
+								<button
+									className='dropdown-item'
+									onClick={() =>
+										updateDDPeriod1('Yesterday and today', DDPeriod1Dropwdown)
+									}
+								>
+									Yesterday and today
+								</button>
+							</li>
+
+							<li>
+								<button
+									className='dropdown-item'
+									onClick={() =>
+										updateDDPeriod1('This week', DDPeriod1Dropwdown)
+									}
+								>
+									This week
+								</button>
+							</li>
+						</ul>
+					</div>
+
+					<div className='dropdown dropdown-pills'>
+						<label className='dropdown-label' htmlFor='detailLevelDate1'>
+							Detail level
+						</label>
+						<button
+							className='btn btn-input grey dropdown-toggle'
+							type='button'
+							data-bs-toggle='dropdown'
+							aria-expanded='false'
+							id='detailLevelDate1'
+							ref={DDDetailLevel1Btn}
+						>
+							<span>{DDDetailLevel1}</span>
+							<i className='fa-solid fa-angle-down icon caret'></i>
+						</button>
+
+						<ul
+							className='dropdown-menu dropdown-submenu shadow-2'
+							ref={DDDetailLevel1Dropwdown}
+						>
+							<li>
+								<button
+									className='dropdown-item'
+									onClick={() =>
+										updateDDDetailLevel1('Hourly', DDDetailLevel1Dropwdown)
+									}
+								>
+									Hourly
+								</button>
+							</li>
+							<li>
+								<button
+									className='dropdown-item'
+									onClick={() =>
+										updateDDDetailLevel1('Daily', DDDetailLevel1Dropwdown)
+									}
+								>
+									Daily
+								</button>
+							</li>
+							<li>
+								<button
+									className='dropdown-item'
+									onClick={() =>
+										updateDDDetailLevel1('Monthly', DDDetailLevel1Dropwdown)
+									}
+								>
+									Monthly
+								</button>
+							</li>
+							<li>
+								<button
+									className='dropdown-item'
+									onClick={() =>
+										updateDDDetailLevel1('Total', DDDetailLevel1Dropwdown)
+									}
+								>
+									Total
+								</button>
+							</li>
+						</ul>
+					</div>
+				</div>
+			</div>
+
+			{/* DROPDOWNS FOR DATE 2 */}
+			<div
+				className='tab-pane fade show'
+				id='date2ComparisonTabPane'
+				role='tabpanel'
+				aria-labelledby='date2ComparisonTab'
+				tabIndex={0}
+			>
+				<div className='d-flex gap-3 flex-column flex-md-row'>
+					<div className='dropdown dropdown-pills'>
+						<label className='dropdown-label' htmlFor='periodDate2'>
+							Period
+						</label>
+						<button
+							className='btn btn-input grey dropdown-toggle'
+							type='button'
+							data-bs-toggle='dropdown'
+							aria-expanded='false'
+							id='periodDate2'
+							ref={DDPeriod2Btn}
+						>
+							<span>{DDPeriod2}</span>
+							<i className='fa-solid fa-angle-down icon caret'></i>
+						</button>
+
+						<ul
+							className='dropdown-menu dropdown-submenu shadow-2'
+							ref={DDPeriod2Dropwdown}
+						>
+							<li>
+								<button
+									className='dropdown-item'
+									onClick={() =>
+										updateDDPeriod2('Custom range', DDPeriod2Dropwdown)
+									}
+								>
+									Custom range
+								</button>
+							</li>
+							<li>
+								<button
+									className='dropdown-item'
+									onClick={() => updateDDPeriod2('Today', DDPeriod2Dropwdown)}
+								>
+									Today
+								</button>
+							</li>
+							<li>
+								<button
+									className='dropdown-item'
+									onClick={() =>
+										updateDDPeriod2('Yesterday', DDPeriod2Dropwdown)
+									}
+								>
+									Yesterday
+								</button>
+							</li>
+							<li>
+								<button
+									className='dropdown-item'
+									onClick={() =>
+										updateDDPeriod2('Yesterday and today', DDPeriod2Dropwdown)
+									}
+								>
+									Yesterday and today
+								</button>
+							</li>
+							<li>
+								<button
+									className='dropdown-item'
+									onClick={() =>
+										updateDDPeriod2('This week', DDPeriod2Dropwdown)
+									}
+								>
+									This week
+								</button>
+							</li>
+						</ul>
+					</div>
+
+					<div className='dropdown dropdown-pills'>
+						<label className='dropdown-label' htmlFor='detailLevelDate2'>
+							Detail level
+						</label>
+						<button
+							className='btn btn-input grey dropdown-toggle'
+							type='button'
+							data-bs-toggle='dropdown'
+							aria-expanded='false'
+							id='detailLevelDate2'
+							ref={DDDetailLevel2Btn}
+						>
+							<span>{DDDetailLevel2}</span>
+							<i className='fa-solid fa-angle-down icon caret'></i>
+						</button>
+
+						<ul
+							className='dropdown-menu dropdown-submenu shadow-2'
+							ref={DDDetailLevel2Dropwdown}
+						>
+							<li>
+								<button
+									className='dropdown-item'
+									onClick={() =>
+										updateDDDetailLevel2('Hourly', DDDetailLevel2Dropwdown)
+									}
+								>
+									Hourly
+								</button>
+							</li>
+							<li>
+								<button
+									className='dropdown-item'
+									onClick={() =>
+										updateDDDetailLevel2('Daily', DDDetailLevel2Dropwdown)
+									}
+								>
+									Daily
+								</button>
+							</li>
+							<li>
+								<button
+									className='dropdown-item'
+									onClick={() =>
+										updateDDDetailLevel2('Monthly', DDDetailLevel2Dropwdown)
+									}
+								>
+									Monthly
+								</button>
+							</li>
+							<li>
+								<button
+									className='dropdown-item'
+									onClick={() =>
+										updateDDDetailLevel2('Total', DDDetailLevel2Dropwdown)
+									}
+								>
+									Total
+								</button>
+							</li>
+						</ul>
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+};
+
+export default PeriodAndDetailDropdowns;

package/src/components/Dropdowns/DropdownsDatePicker/index.js

@@ -0,0 +1,3 @@
+import DropdownDatePicker from "./DropdownDatePicker";
+
+export { DropdownDatePicker };

package/src/components/Dropdowns/index.js

@@ -1,5 +1,6 @@
 import DropdownComponent from './DropdownComponent';
 import DropdownFilter from './DropdownFilter';
 import DropdownMultiSelect from './DropdownMultiSelect';
+import { DropdownDatePicker } from './DropdownsDatePicker/index';
 
-export { DropdownComponent, DropdownFilter, DropdownMultiSelect }
+export { DropdownComponent, DropdownFilter, DropdownMultiSelect, DropdownDatePicker }

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

@@ -5,6 +5,7 @@ import Button from "./components/Button/Button";
 import DropdownComponent from './components/Dropdowns/DropdownComponent';
 import DropdownFilter from './components/Dropdowns/DropdownFilter';
 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, DropdownMultiSelect, 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({});