groovinads-ui 1.2.74 → 1.9.0

package/src/stories/DropdownFilter.stories.jsx

@@ -1,60 +0,0 @@
-import React, { useState } from "react";
-import DropdownFilter from "../components/Dropdowns/DropdownFilter";
-
-export default {
-  title: "Dropdown/DropdownFilter",
-  component: DropdownFilter,
-};
-
-const Template = (args) => {
-  const [show, setShow] = useState(false);
-  const handleToggle = () => setShow((prevShow) => !prevShow);
-  const [selectedValues, setSelectedValues] = useState([]);
-  const [filters, setFilters] = useState([
-    {
-      title: "Filtro 1",
-      values: [
-        "Hola 1",
-        "Item 2",
-        "Item 3",
-        "Item 4",
-        "Item 5",
-        "Item 6",
-        "Item 7",
-        "Item 8",
-        "Item 9",
-        "Item 10",
-      ],
-    },
-  ]);
-  const removeFilter = (index) => {
-    const newFilters = filters.filter((filter, i) => i !== index);
-    setFilters(newFilters);
-  };
-
-  return (
-    <>
-      <button onClick={() => setShow(false)}>Close</button>
-      <button onClick={() => setShow(true)}>Open</button>
-      <div >
-        {filters.map((filter, index) => {
-          return (
-            <DropdownFilter
-              {...args}
-              key={index}
-              title={filter.title}
-              values={filter.values}
-              onRemoveFilter={() => removeFilter(index)}
-              valuesSelected={selectedValues}
-              setValuesSelected={setSelectedValues}
-              show={show}
-              onToggle={handleToggle}
-            ></DropdownFilter>
-          );
-        })}
-      </div>
-    </>
-  );
-};
-
-export const Default = Template.bind({});

package/src/stories/DropdownMultiSelect.stories.jsx

@@ -1,72 +0,0 @@
-import React, { useState } from 'react';
-import DropdownMultiSelect from '../components/Dropdowns/DropdownMultiSelect';
-
-export default {
-	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', 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([]);
-	/* ========== */
-
-	/* ========== */
-	/* OPCION 2 - Opciones y valores seleccionados son array de strings */
-	const stringFilters = [
-		'Filter 1',
-		'Filter 2',
-		'Filter 3',
-		'Filter 4',
-		'Filter 5',
-	];
-	const [selectedStringValues, setSelectedStringValues] = useState([]);
-
-	/* const list= ['palabra1', 'palabra2']  */
-	/* =========== */
-
-	return (
-		<>
-			<DropdownMultiSelect
-				{...args}
-				values={filters}
-				valuesSelected={selectedValues}
-				setValuesSelected={setSelectedValues}
-				show={show}
-				onToggle={handleToggle}
-				object={true}
-				nameKey='name'
-				nameKey1='name1'
-				idKey={'id'}
-				inputLabel={'Filters (array de objetos)'}
-				focus={show}
-				hasId={false}
-				errorRequired={errorRequired}
-				setErrorRequiered={setErrorRequired}
-				validate={true}
-				disableHash={true}
-				overflow={true}
-			/>
-
-			<button className='my-3' onClick={() => setErrorRequired(true)}>
-				Validate
-			</button>
-		</>
-	);
-};
-
-export const Default = Template.bind({});

package/src/stories/DropdownSimpleDatePicker.stories.jsx

@@ -1,64 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import DropdownSimpleDatePicker from '../components/Dropdowns/DropdownSimpleDatePicker';
-
-
-export default {
-	title: 'Dropdown/DropdownSimpleDatePicker',
-	component: DropdownSimpleDatePicker,
-};
-
-const Template = (args) => {
-	const [show, setShow] = useState(false);
-
-	const [startDate, setStartDate] = useState('');
-	const [endDate, setEndDate] = useState('');
-
-	return (
-		<>
-			<div className='d-flex justify-content-between mt-3'>
-				<div className='col-3 mb-3'>
-					{/* MAX Y MIN POR PARAMS STATE */}
-					<DropdownSimpleDatePicker
-						{...args}
-						inputLabel='Start Date'
-						date={startDate}
-						setDate={setStartDate}
-						maxDate={endDate}
-					/>
-					<DropdownSimpleDatePicker
-						{...args}
-						inputLabel='End Date'
-						date={endDate}
-						setDate={setEndDate}
-						minDate={startDate}
-					/>
-				</div>
-				{/* PRUEBA CON MAXN Y MIN HARCODEADO */}
-				<div className='col-3 mb-3'> 
-					<DropdownSimpleDatePicker
-						{...args}
-						inputLabel='Start Date'
-						date={startDate}
-						setDate={setStartDate}
-						handleClear={() => {
-							console.log('Aqui');
-						}}
-						maxDate={'2025-01-20'}
-					/>
-					<DropdownSimpleDatePicker
-						{...args}
-						inputLabel='End Date'
-						date={endDate}
-						setDate={setEndDate}
-						handleClear={() => {
-							console.log('Aqui');
-						}}
-						minDate={'2025-01-15'}
-					/>
-				</div>
-			</div>
-		</>
-	);
-};
-
-export const Default = Template.bind({});

package/src/stories/Icon.stories.jsx

@@ -1,11 +0,0 @@
-import React from 'react';
-import Icon from '../components/Labels/Icon';
-
-export default {
-  title: 'Labels/Icon',
-  component: Icon,
-};
-
-const Template = (args) => <Icon {...args} />;
-
-export const Default = Template.bind({});

package/src/stories/Input.stories.jsx

@@ -1,20 +0,0 @@
-import React, { useState } from 'react';
-import Input from '../components/Inputs/Input';
-
-export default {
-  title: 'Inputs/Input',
-  component: Input,
-};
-
-const Template = (args) => {
-    const [showError, setShowError] = useState(false);
-
-    return (
-        <>
-            <button onClick={()=>setShowError(true)}>False</button>
-            <Input {...args} setShowError={setShowError} showError={showError} />
-        </>
-    )
-};
-
-export const Default = Template.bind({});

package/src/stories/InputChip.stories.jsx

@@ -1,44 +0,0 @@
-import React, { useState } from 'react';
-import InputChip from '../components/Inputs/InputChip';
-
-export default {
-    title: 'Inputs/InputChip',
-    component: InputChip,
-};
-
-const Template = (args) => {
-    const  [ keywordsList, setKeywordsList] = useState(['keyword1', 'keyword2', 'keyword3']);
-
-    const [ keywordList2, setKeywordsList2] = useState([]);
-
-    return (
-        <>
-            {/* HAY KEYWORDS */}
-            <InputChip
-                {...args}
-                className={'mb-3'}
-                placeholder={'Add keywords…'}
-                keywordsList={keywordsList}
-                setKeywordsList={setKeywordsList}
-                maxKeywordLength={10}
-                recomendedKeywords={5}
-                requiredText='You can only add up to 15 keywords.'
-                maxKeywords={15}
-                counter={true}
-                duplicateKeywordErrorText='Duplicate keyword2'
-            />
-
-            {/* NO HAY KEYWORDS */}
-            <InputChip
-                placeholder={'Add keywords…'}
-                keywordsList={keywordList2}
-                setKeywordsList={setKeywordsList2}
-                maxKeywordLength={10}
-                maxKeywords={15}
-                requiredText='You can only add up to 15 keywords.'     
-                counter={true}       
-            />
-        </>
-    );
-}
-export const Default = Template.bind({});

package/src/stories/InputEmail.stories.jsx

@@ -1,27 +0,0 @@
-import React, { useState } from 'react';
-
-// COMPONENTS
-import { InputEmail } from '../components';
-import { Button } from 'react-bootstrap';
-
-export default {
-	title: 'Inputs/InputEmail',
-	component: InputEmail,
-};
-
-const Template = (args) => {
-	// const [showModal, setShowModal] = useState(false);
-	return (
-		<>
-			{/* <Button size='lg' onClick={() => setShowModal(!showModal)}>Cambiar</Button> */}
-			<InputEmail
-				{...args}
-				apiGetEmail={'v2/retail-media/brands/settings/notifications'}
-				apiPostEmail={'v2/retail-media/brands/settings/notifications'}
-				// showModal={showModal}
-			/>
-		</>
-	);
-};
-
-export const Default = Template.bind({});

package/src/stories/Layout.stories.jsx

@@ -1,73 +0,0 @@
-import React, { Children, useState } from 'react';
-import { Navbar, Sidebar } from '../components/Navigation';
-
-export default {
-	title: 'Navigation/Layout',
-	component: Sidebar,
-};
-
-const Template = (args) => {
-	const customLinks = [
-		// section
-		{
-			title: 'Main menu', // section.title
-			links: [
-				// section.links.map((linkSection, y)=>(...
-				{
-					name: 'Home',
-					icon: 'home', // Sin el 'fa-''
-					url: '/home',
-					children: [],
-				},
-			],
-		},
-		{
-			title: 'Reports',
-			links: [
-				{
-					name: 'Impressions',
-					icon: 'table', // Sin el 'fa-''
-					url: '',
-					children: [
-						{
-							name: 'Monthly impressions by...',
-							url: '/impressions',
-						},
-					],
-				},
-			],
-		},
-		{
-			title: 'Back list',
-			backData: true,
-		},
-	];
-
-	const [show, setShow] = useState(true);
-
-	return (
-		<>
-			<Navbar show={show} setShow={setShow} />
-
-			<div className='container-fluid'>
-				<Sidebar
-					{...args}
-					api={'v2/reports/'}
-					customLinks={customLinks}
-					defaultOpened={true}
-					show={show}
-					setShow={setShow}
-				/>
-
-				<div className='main'>
-					Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni quasi
-					error beatae suscipit sapiente ad sed aut fugit dolor quam culpa,
-					expedita consequuntur corporis tenetur incidunt illum repudiandae
-					asperiores voluptate
-				</div>
-			</div>
-		</>
-	);
-};
-
-export const Default = Template.bind({});

package/src/stories/LoginSource.stories.jsx

@@ -1,11 +0,0 @@
-import React from 'react';
-import LoginSource from '../components/Labels/LoginSource';
-
-export default {
-  title: 'Labels/LoginSource',
-  component: LoginSource,
-};
-
-const Template = (args) => <LoginSource {...args}/>;
-
-export const Default = Template.bind({});

package/src/stories/Navbar.stories.jsx

@@ -1,24 +0,0 @@
-import React, { useState } from 'react';
-import Navbar from '../components/Navigation/Navbar';
-
-export default {
-	title: 'Navigation/Navbar',
-	component: Navbar,
-};
-
-const Template = (args) => {
-	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/PillComponent.stories.jsx

@@ -1,22 +0,0 @@
-import React from 'react';
-import PillComponent from '../components/Labels/PillComponent';
-
-export default {
-  title: 'Labels/PillComponent',
-  component: PillComponent,
-};
-
-const Template = (args) => {
-  return(
-    <PillComponent {...args} 
-    color='green'
-    closeButton={true}
-    // onClick={() => console.log('Clicked!!')}
-    >
-      {'Hello World'}
-    </PillComponent>
-  )
-  
-};
-
-export const Default = Template.bind({});

package/src/stories/Radio.stories.jsx

@@ -1,18 +0,0 @@
-import React, { useState } from 'react';
-import Radio from '../components/Inputs/Radio';
-
-export default {
-  title: 'Inputs/Radio',
-  component: Radio,
-};
-
-const Template = (args) => {
-  const [status, setStatus] = useState(false);
-
-  return (
-    <Radio {...args} status={status} setStatus={setStatus}>Radio</Radio>
-  )
-};
-
-export const Default = Template.bind({});
-

package/src/stories/Sidebar.stories.jsx

@@ -1,169 +0,0 @@
-import React, { Children, useState } from 'react';
-import { Sidebar } from '../components/Navigation';
-
-export default {
-	title: 'Navigation/Sidebar',
-	component: Sidebar,
-};
-
-const Template = (args) => {
-	const customLinks = [
-		// section
-		{
-			title: 'Main menu', // section.title
-			links: [
-				{
-					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',
-				},
-			],
-		},
-		{
-			title: 'Reports',
-			links: [
-				{
-					name: 'Impressions',
-					icon: 'table',
-					url: '',
-					children: [
-						{
-							name: 'Monthly impressions by...',
-							url: '/impressions',
-						},
-					],
-				},
-				{
-					name: 'Reports',
-					icon: 'table', // Sin el 'fa-''
-					url: '',
-					children: [
-						{
-							name: 'Monthly impressions by...',
-							url: '/impressions',
-						},
-						{
-							name: '2Monthly impressions by...',
-							url: '/2impressions',
-						},
-						{
-							name: '3Monthly impressions by...',
-							url: '/3impressions',
-						},
-					],
-				},
-			],
-		},
-		{
-			title: 'Reports 2',
-			links: [
-				{
-					name: 'Impressions',
-					icon: 'table', // Sin el 'fa-''
-					url: '',
-					children: [
-						{
-							name: 'Monthly impressions by...',
-							url: '/impressions',
-						},
-					],
-				},
-				{
-					name: 'Reports',
-					icon: 'table', // Sin el 'fa-''
-					url: '',
-					children: [
-						{
-							name: 'Monthly impressions by...',
-							url: '/impressions',
-						},
-					],
-				},
-			],
-		},
-		{
-			title: 'Back list',
-			backData: true,
-		},
-	];
-
-	const selectedClients = {
-		email: 'lancome@groovinads.com',
-		id_client: 3661,
-		id_alias: null,
-		id_shop: null,
-		fgAdmin: 0,
-		fgMaster: 1,
-		fgClientsAdmin: 0,
-		country: 'MX',
-		time_zone: '(GMT-06:00)-GUADALAJARA, MEXICO CITY, MONTERREY ',
-		time_zone_db: '-6:00',
-		auth_data: {
-			login_level: 'USER',
-			login_id: 308,
-			email: 'tobias.matarasso@groovinads.com',
-			scopes: [
-				'master',
-				'lalala',
-				'NewName',
-				'user_admin',
-				'digital_signage_deals_manager',
-				'dashboard_screens',
-			],
-			google_name: 'Tobias Matarasso',
-			google_picture:
-				'https://lh3.googleusercontent.com/a/ACg8ocIYedPDyRN_HV8egw-h3YV_Lv2ZVQa9YSw_g7o7vXBqhMTqEI4=s96-c',
-			oauth_name: 'Google',
-			oauth_username: 'Tobias Matarasso',
-			oauth_picture:
-				'https://lh3.googleusercontent.com/a/ACg8ocIYedPDyRN_HV8egw-h3YV_Lv2ZVQa9YSw_g7o7vXBqhMTqEI4=s96-c',
-			id_api_key: 0,
-		},
-		client_name: 'Lancome',
-		php_session_id: 'u7o2br84i92jmfkdrqen10ngp1',
-		is_api2_login: true,
-	};
-
-	return (
-		<div className='container-fluid'>
-			<Sidebar
-				{...args}
-				api={'v2/reports/'}
-				customLinks={customLinks}
-				defaultOpened={true}
-				selectedClient={selectedClients}
-				showClients={true}
-				onNavigate={(url) => console.log('Navigate to:', url)}
-			/>
-			<div className='main'>
-				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni quasi
-				error beatae suscipit sapiente ad sed aut fugit dolor quam culpa,
-				expedita consequuntur corporis tenetur incidunt illum repudiandae
-				asperiores voluptate!
-			</div>
-		</div>
-	);
-};
-
-export const Default = Template.bind({});
-
-// navreports: basePath + 'v2/reports/',

package/src/stories/Spinner.stories.jsx

@@ -1,11 +0,0 @@
-import React from 'react';
-import Spinner from '../components/Labels/Spinner';
-
-export default {
-  title: 'Labels/Spinner',
-  component: Spinner,
-};
-
-const Template = (args) => <Spinner {...args} />;
-
-export const Default = Template.bind({});

package/src/stories/StatusIcon.stories.jsx

@@ -1,11 +0,0 @@
-import React from 'react';
-import StatusIcon from '../components/Labels/StatusIcon';
-
-export default {
-  title: 'Labels/StatusIcon',
-  component: StatusIcon,
-};
-
-const Template = (args) => <StatusIcon {...args} />;
-
-export const Default = Template.bind({});

package/src/stories/Stepper.stories.jsx

@@ -1,16 +0,0 @@
-import React from 'react';
-import Stepper from '../components/Navigation/Stepper';
-
-export default {
-  title: 'Navigation/Stepper',
-  component: Stepper,
-};
-
-const Template = (args) =>
-	<Stepper
-		{...args}
-		list={['Step 0', 'Step 1', 'Step 2']}
-/>
-
-
-export const Default = Template.bind({});

package/src/stories/Switch.stories.jsx

@@ -1,17 +0,0 @@
-import React, { useState } from 'react';
-import Switch from '../components/Inputs/Switch';
-
-export default {
-  title: 'Inputs/Switch',
-  component: Switch,
-};
-
-const Template = (args) => {
-  const [status, setStatus] = useState(0);
-
-  return (
-    <Switch {...args} status={status} setStatus={setStatus}>Switch</Switch>
-  )
-};
-
-export const Default = Template.bind({});