groovinads-ui 1.2.68 → 1.2.70

package/src/stories/DropdownMultiSelect.stories.jsx

@@ -2,23 +2,25 @@ import React, { useState } from 'react';
 import DropdownMultiSelect from '../components/Dropdowns/DropdownMultiSelect';
 
 export default {
-    title: 'Dropdown/DropdownMultiSelect',
-  	component: DropdownMultiSelect,
+	title: 'Dropdown/DropdownMultiSelect',
+	component: DropdownMultiSelect,
 };
 
 const Template = (args) => {
 	const [show, setShow] = useState(false);
+	const [errorRequired, setErrorRequired] = useState(false);
+
 	const handleToggle = () => setShow((prevShow) => !prevShow);
 
 	/* ========== */
 	/* OPCION 1 - Opciones y valores seleccionados son array de objetos */
 	const filters = [
-		{ id: 1, name: 'Filter 1', showStatus: '1' },
-		{ id: 2, name: 'Filter 2', showStatus: '0' },
-		{ id: 3, name: 'Filter 3', showStatus: '1' },
-		{ id: 4, name: 'Filter 4', showStatus: '0' },
-		{ id: 5, name: 'Filter 5', showStatus: '0' },
-		{ id: 6, name: 'Filter 6', showStatus: '2' },
+		{ id: 1, name: 'Filter 1', showStatus: '1', name1: 'loreal' },
+		{ id: 2, name: 'Filter 2', showStatus: '0', name1: 'jabon' },
+		{ id: 3, name: 'Filter 3', showStatus: '1', name1: 'blue' },
+		{ id: 4, name: 'Filter 4', showStatus: '0', name1: 'name' },
+		{ id: 5, name: 'Filter 5', showStatus: '0', name1: 'name' },
+		{ id: 6, name: 'Filter 6', showStatus: '2', name1: 'name' },
 	];
 	const [selectedValues, setSelectedValues] = useState([]);
 	/* ========== */
@@ -33,11 +35,12 @@ const Template = (args) => {
 		'Filter 5',
 	];
 	const [selectedStringValues, setSelectedStringValues] = useState([]);
+
+	/* const list= ['palabra1', 'palabra2']  */
 	/* =========== */
 
 	return (
 		<>
-			{/* OPCION 1 */}
 			<DropdownMultiSelect
 				{...args}
 				values={filters}
@@ -47,27 +50,21 @@ const Template = (args) => {
 				onToggle={handleToggle}
 				object={true}
 				nameKey='name'
+				nameKey1='name1'
 				idKey={'id'}
 				inputLabel={'Filters (array de objetos)'}
 				focus={show}
-				hasId={true}
+				hasId={false}
+				errorRequired={errorRequired}
+				setErrorRequiered={setErrorRequired}
+				validate={true}
+				disableHash={true}
+				overflow={true}
 			/>
 
-			{/* OPCION 2 */}
-			<DropdownMultiSelect
-				{...args}
-				values={stringFilters}
-				valuesSelected={selectedStringValues}
-				setValuesSelected={setSelectedStringValues}
-				show={show}
-				onToggle={handleToggle}
-				object={false}
-				nameKey='name'
-				idKey={'id'}
-				inputLabel={'Filters (array de strings)'}
-				focus={show}
-				hasId={true}
-			/>
+			<button className='my-3' onClick={() => setErrorRequired(true)}>
+				Validate
+			</button>
 		</>
 	);
 };

package/src/stories/Navbar.stories.jsx

@@ -1,21 +1,24 @@
-import React from "react";
-import Navbar from "../components/Navigation/Navbar";
-import { BrowserRouter, Route, Routes } from "react-router-dom";
+import React, { useState } from 'react';
+import Navbar from '../components/Navigation/Navbar';
 
 export default {
-  title: "Navigation/Navbar",
-  component: Navbar,
+	title: 'Navigation/Navbar',
+	component: Navbar,
 };
 
 const Template = (args) => {
-  return (
-    <Navbar {...args}></Navbar>
-/*     <BrowserRouter>
+	return (
+		<Navbar
+			{...args}
+			showDeckMenu={true}
+			showUserMenu={true}
+		></Navbar>
+		/*     <BrowserRouter>
       <Routes>
         <Route path="*" element={<Navbar {...args}></Navbar>} />
       </Routes>
     </BrowserRouter> */
-  );
+	);
 };
 
 export const Default = Template.bind({});

package/src/stories/Sidebar.stories.jsx

@@ -1,4 +1,4 @@
-import React, { Children } from 'react';
+import React, { Children, useState } from 'react';
 import { Sidebar } from '../components/Navigation';
 
 export default {
@@ -12,12 +12,29 @@ const Template = (args) => {
 		{
 			title: 'Main menu', // section.title
 			links: [
-				
 				{
-					name: 'Home',
-					icon: 'home', 
+					name: 'Campaings',
+					icon: 'home',
 					url: '/home',
 					children: [],
+					pendingLength: 5, // explanation(number) Pass the length of the array from the relevant endpoint data, for example, if there are pending campaigns.
+									  // Not required, only if you want to display a type of pendingType ('warning' or 'badge').
+					pendingType: 'warning',
+				},
+				{
+					name: 'Reports',
+					icon: 'home',
+					url: '/home',
+					children: [
+						/* {
+							name: 'Item 1',
+							icon: 'home', 
+							url: '/home',
+							children: [],
+						}, */
+					],
+					pendingLength: 5,
+					pendingType: 'badge',
 				},
 			],
 		},
@@ -26,7 +43,7 @@ const Template = (args) => {
 			links: [
 				{
 					name: 'Impressions',
-					icon: 'table', 
+					icon: 'table',
 					url: '',
 					children: [
 						{
@@ -44,6 +61,14 @@ const Template = (args) => {
 							name: 'Monthly impressions by...',
 							url: '/impressions',
 						},
+						{
+							name: '2Monthly impressions by...',
+							url: '/2impressions',
+						},
+						{
+							name: '3Monthly impressions by...',
+							url: '/3impressions',
+						},
 					],
 				},
 			],
@@ -117,7 +142,7 @@ const Template = (args) => {
 		php_session_id: 'u7o2br84i92jmfkdrqen10ngp1',
 		is_api2_login: true,
 	};
-	
+
 	return (
 		<div className='container-fluid'>
 			<Sidebar

package/version.js

@@ -0,0 +1,8 @@
+import packageJson from './package.json';
+
+if (typeof window !== 'undefined') {
+  window.GroovinUI = {
+    version: packageJson.version,
+  };
+}
+export default packageJson.version;