groovinads-ui 1.2.57 → 1.2.58

package/src/stories/DropdownDatePicker.stories.jsx

@@ -23,7 +23,7 @@ const Template = (args) => {
 
 	useEffect(() => {
 		console.log('dates To:', dateTo);
-	}, [ dateTo ]);
+	}, [dateTo]);
 
 	return (
 		<>
@@ -34,7 +34,7 @@ const Template = (args) => {
 					// show={show}
 					// setShow={setShow}
 					// onToggle={handleToggle}
-					//variant='filter'
+					// variant='filter'
 					dateFrom={dateFrom}
 					setDateFrom={setDateFrom}
 					dateTo={dateTo}
@@ -45,6 +45,23 @@ const Template = (args) => {
 					// setDateTo2={setDateTo2}
 				/>
 			</div>
+
+			<div>
+				<p>min max</p>
+				<DropdownDatePicker
+					{...args}
+					// show={show}
+					// setShow={setShow}
+					// onToggle={handleToggle}
+					// variant='filter'
+					dateFrom={dateFrom}
+					setDateFrom={setDateFrom}
+					dateTo={dateTo}
+					setDateTo={setDateTo}
+					minDate={new Date('2025-01-01')}
+					maxDate={new Date('2025-01-31')}
+				/>
+			</div>
 		</>
 	);
 };

package/src/stories/DropdownSimpleDatePicker.stories.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
 import DropdownSimpleDatePicker from '../components/Dropdowns/DropdownSimpleDatePicker';
 
 export default {
@@ -13,39 +13,42 @@ const Template = (args) => {
 	const [endDate, setEndDate] = useState('');
 
 	return (
-		// <>
-		// 	<button onClick={() => setShow(!show)}>Toggle</button>
-		// 	<div className='col-2'>
-		// 		<DropdownSimpleDatePicker
-		// 			{...args}
-		// 			dateFrom={dateFrom}
-		// 			setDateFrom={setDateFrom}
-		// 			date={dateTo}
-		// 			setDate={setDateTo}
-		// 		/>
-		// 	</div>
-		// </>
-
 		<>
 			<div className='d-flex justify-content-between mt-3'>
 				{/* DROPDOWN TO TEST THE handleGlobalToggle */}
-
 				<div className='col-3'>
 					<DropdownSimpleDatePicker
 						{...args}
-						inputLabel="Start Date"
+						inputLabel='Start Date'
 						date={startDate}
 						setDate={setStartDate}
 					/>
 				</div>
-				
+
+				<div className='col-3'>
+					<DropdownSimpleDatePicker
+						{...args}
+						inputLabel='End Date'
+						date={endDate}
+						setDate={setEndDate}
+						handleClear={() => {
+							console.log('Aqui');
+						}}
+					/>
+				</div>
+
 				<div className='col-3'>
+					<p>minmax</p>
 					<DropdownSimpleDatePicker
 						{...args}
-						inputLabel="End Date"
+						inputLabel='End Date'
 						date={endDate}
 						setDate={setEndDate}
-						handleClear={() => {console.log('Aqui');}}
+						handleClear={() => {
+							console.log('Aqui');
+						}}
+						minDate={new Date('2025-01-01')}
+						maxDate={new Date('2025-01-31')}
 					/>
 				</div>
 			</div>

package/src/stories/InputChip.stories.jsx

@@ -0,0 +1,46 @@
+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(['(0)keyword1', '(0)keyword2', '(0)keyword3']);
+    const nonRecomendedKeywords = ['keyword4', 'keyword5'];
+
+    const [ keywordList2, setKeywordsList2] = useState([]);
+
+    return (
+        <>
+            {/* HAY KEYWORDS */}
+            <InputChip
+                {...args}
+                className={'mb-3'}
+                placeholder={'Add keywords…'}
+                keywordsList={keywordsList}
+                setKeywordsList={setKeywordsList}
+                nonRecomendedKeywords={nonRecomendedKeywords}
+                maxKeywordLength={10}
+                recomendedKeywords={5}
+                requiredText='You can only add up to 15 keywords.'
+                maxKeywords={15}
+                counter={true}
+            />
+
+            {/* NO HAY KEYWORDS */}
+            <InputChip
+                placeholder={'Add keywords…'}
+                keywordsList={keywordList2}
+                setKeywordsList={setKeywordsList2}
+                nonRecomendedKeywords={nonRecomendedKeywords}
+                maxKeywordLength={10}
+                maxKeywords={15}
+                requiredText='You can only add up to 15 keywords.'     
+                counter={true}       
+            />
+        </>
+    );
+}
+export const Default = Template.bind({});

package/src/stories/PillComponent.stories.jsx

@@ -6,6 +6,9 @@ export default {
   component: PillComponent,
 };
 
-const Template = (args) => <PillComponent {...args}>Pill component</PillComponent>;
+const Template = (args) => {
+  <PillComponent {...args} />
+  
+};
 
 export const Default = Template.bind({});