diff --git a/docs/buttons/active-button.mdx b/docs/buttons/active-button.mdx new file mode 100644 index 0000000..3484a94 --- /dev/null +++ b/docs/buttons/active-button.mdx @@ -0,0 +1,92 @@ +--- +product: dd360-ds +title: React ActiveButton component +components: Button +--- + +
+
+ + + + +# + +The ActiveButton component in React provides a convenient way to display a button that is destined to be a redirect. + +
+
+##### Imports + + + + + +
+
+##### Usage + +Use the properties and to make the button active and redirect to the URL specified in the to property. + + + alert('Redirecting...')} + > + Active Button + + + + + +
+ +##### Active + +To make the button active, use the property active. When the button is active, it will redirect to the URL specified in the to property. +If the to property is not specified, the button will not redirect and the style will be different. + + + alert('Redirecting...')} + > + Active Button + + + + + + +
+
+##### API Reference + + + + \ No newline at end of file diff --git a/docs/buttons/button-shape.mdx b/docs/buttons/button-shape.mdx index f80e3e5..a445578 100644 --- a/docs/buttons/button-shape.mdx +++ b/docs/buttons/button-shape.mdx @@ -116,6 +116,8 @@ import DynamicHeroIcon from 'dd360-ds/DynamicHeroIcon' dataTable={[ { title: 'height', default: '3rem', types: ['string'] }, { title: 'icon', default: null, types: ['ReactNode'] }, + { title: 'disabled', default: 'false', types: ['boolean'] }, + { title: 'onClick', default: null, types: ['function'] }, { title: 'variant (BaseCircleButton exclusive prop)', default: 'circle', types: ['square', 'circle'] } ]} /> diff --git a/docs/components/badge.mdx b/docs/components/badge.mdx new file mode 100644 index 0000000..f755eb9 --- /dev/null +++ b/docs/components/badge.mdx @@ -0,0 +1,125 @@ +--- +product: dd360-ds +title: React Badge component +components: Badge +--- + +
+
+ + + +# + +The Badge component in React provides a convenient way to display a small piece of information, such as a status, in a visually appealing and attention-grabbing manner. + +
+ +##### Imports + + + +##### Usage + +To use the Badge component, you could start by adding the properties text, classNameIcon and className. + +Use the Badge component as shown below: + + + + + +The code snippet below shows how to use the Badge component: + + +`}/> + +
+ +##### Variant + +With the prop variant you can customize the appearance of the Badge component. Available options are: warning, infoPrimary, infoSecondary, success, primary, secondary, and error. Default uses: "infoPrimary". + + + + + + + + + + + +The code snippet below shows how to set a Badge component variant: + + + + + + + + +`}/> + +
+ +##### Icon + +With the prop icon you can customize the icon of the Badge component. Available options are: tag, clock, warning, check, success, exclamation, clipboard-copy, HomeIcon, RefreshIcon, and none. Default uses: "HomeIcon". + + + + + + + + + + + + + + +The code snippet below shows how to set a Badge component icon: + + + + + + + + + + + +`}/> + +
+
+ +##### API Reference + + + +Note: This documentation assumes that the audience has basic knowledge of React +and how to use components in React applications. + + \ No newline at end of file diff --git a/docs/components/callout.mdx b/docs/components/callout.mdx index df2614e..d0ee17c 100644 --- a/docs/components/callout.mdx +++ b/docs/components/callout.mdx @@ -123,6 +123,30 @@ export default function App() { ) }`} /> +
+ +##### CallToAction + +With the prop you can render a custom component in the callout, is a optional prop. + + + + Click here} /> + + + + + Click here} /> + + ) +}`} /> +

##### API Reference @@ -130,9 +154,10 @@ export default function App() { diff --git a/docs/components/confirm-dialog.mdx b/docs/components/confirm-dialog.mdx index e4325bd..b13b35f 100644 --- a/docs/components/confirm-dialog.mdx +++ b/docs/components/confirm-dialog.mdx @@ -39,11 +39,6 @@ The code snippet below shows how to use the ConfirmDialog component: codeString={`import ConfirmDialog from 'dd360-ds/ConfirmDialog' alert('onConfirm')}> You want to confirm? @@ -51,83 +46,6 @@ The code snippet below shows how to use the ConfirmDialog component:
-##### Position - -To manage the ConfirmDialog component's visibility and position, you can use the -useState hook in a functional component. Position stores the top and left -coordinates, as well as a boolean indicating whether the component should be -shown. The component listens for clicks on a button, which toggles the -ConfirmDialog visibility and updates its position based on the click event's -coordinates - - - - - - { - const [domLoaded, setDomLoaded] = useState(false) - const [position, setPosition] = useState<{ - top: number - left: number - show: boolean - }>({ - top: 0, - left: 0, - show: false - }) - - useEffect(() => { setDomLoaded(true) }, []) - - return ( - <> - {domLoaded && ( -
- - alert('onConfirm')} - > - You want to confirm? - -
- )} - - ) -} - -export default ConfirmDialogCustom - `}/> - -Note: The "domLoaded" state variable in the ConfirmDialogCustom is used to ensure -that the component is fully rendered before displaying the ConfirmDialog -component. This is important when using Next.js, as it performs server-side -rendering by default. By waiting for the client-side rendering to complete, -we can avoid any issues with the ConfirmDialog component not being fully initialized - -
- - ##### Title The prop is used to display a descriptive title in the confirmation dialog @@ -141,11 +59,6 @@ The prop is used to display a descriptive title in the alert('onConfirm')}> You want to confirm? @@ -166,11 +79,6 @@ The prop is used to define the text of the con alert('onConfirm')}> You want to confirm? @@ -194,11 +102,6 @@ Note that it is recommended that the textCancelBtn and handleCancel props be def alert('Cancel')} textCancelBtn='Example Confirm' - position={{ - show: true, - left: 100, - top: 100 - }} onConfirm={()=>alert('onConfirm')}> You want to confirm? @@ -220,11 +123,6 @@ The prop is used to set the custom width of the confirm alert('onConfirm')}> You want to confirm? @@ -238,11 +136,6 @@ The prop is used to set the custom width of the confirm is used to set the custom width of the confirm { title: 'onCancel', default: null, types: ['function'] }, { title: 'width', default: null, types: ['string','number'] }, { title: 'className', default: null, types: ['string'] }, - { title: 'idRoot', default: null, types: ['string'] } ]} /> diff --git a/docs/components/date-time-picker.mdx b/docs/components/date-time-picker.mdx new file mode 100644 index 0000000..506b575 --- /dev/null +++ b/docs/components/date-time-picker.mdx @@ -0,0 +1,137 @@ +--- +product: dd360-ds +title: React DateTimePicker component +components: DateTimePicker +--- + +
+
+ + + +# + +With the DateTimePicker component, you can provide users with the ability to interactively select dates and times in web applications. It allows easy entry and manipulation of temporal data, facilitating the selection and presentation of dates and times in a friendly and customizable format. + +
+ +##### Imports + +The first alternative is recommended since they can reduce the application bundle + + + + +##### Usage + +Use the DatePicker component as shown below: + + + + +The code snippet below shows how to use the DateTimePicker component: + + +`}/> + +##### Language + +With the prop , its variants and you can control the language + + + + + + + + + + + + + +`} +/> + +##### Format + +With the prop , and its and variants, you can customize the display format of the date, either in its full or abbreviated form. + + + + + + + + + + + + +`} +/> + +##### MinDate + +With the prop , you can define the selectable minimum date + + + + + + + + +`} +/> + +##### MaxDate + +With the prop , you can define the maximum selectable date + + + + + + + + +`} +/> + +##### API Reference + + void'] }, + { title: 'className', default: null, types: ['string'] }, + { title: 'pickerClassName', default: null, types: ['string']}, + { title: 'style', default: null, types: ['CSSProperties'] }, + { title: '...', default: null, types: ['InputProps'] } + ]} +/> + + + + \ No newline at end of file diff --git a/docs/components/feed-back-box.mdx b/docs/components/feed-back-box.mdx index 72b90c4..d0be59e 100644 --- a/docs/components/feed-back-box.mdx +++ b/docs/components/feed-back-box.mdx @@ -1 +1,85 @@ -feedbackbox +--- +product: dd360-ds +title: React FeedBackBox component +components: FeedBackBox +--- + +
+
+ + + +# + +The FeedBackBox component is used to display feedback messages to the user. It is a simple and customizable component that can be used to provide feedback to the user in a friendly and intuitive way. + +
+
+##### Imports + +The first alternative is recommended since they can reduce the application bundle + + + + +
+##### Usage + +Use the FeedBackBox component as shown below: + + + + + +The code snippet below shows how to use the Callout component: + +`} +/> + +
+ +##### Type + +With the prop you can customize the icon and color of the of the FeedBackBox + + + + + + + + + + + + + ) +}`} /> + +
+
+##### API Reference + void'], default: null }, + { title: 'txtCloseBtn', types: ['string'], default: 'close' }, + ]} + +/> + + + + \ No newline at end of file diff --git a/docs/components/filter-date.mdx b/docs/components/filter-date.mdx index b1c496f..6c5f547 100644 --- a/docs/components/filter-date.mdx +++ b/docs/components/filter-date.mdx @@ -78,64 +78,6 @@ The code snippet below shows how to customize the FilterDate component:
-##### Visibility & position - -To manage the visibility and position of the FilterDate component, you can use the useState hook in a functional component. -The position state variable stores the top and left coordinates, as well as a boolean indicating whether the component should be shown. -The component listens for clicks on a button to toggle the visibility and updates its position based on the click event's coordinates. - - - - - -The code snippet below shows how to handle the visibility and position: - - { - const [position, setPosition] = useState<{ - top: number - left: number - show: boolean - }>({ - top: 0, - left: 0, - show: false - }) - - return ( -
- - undefined} - position={{ - top: position.top, - left: position.left, - show: position.show - }} - /> -
- ) -} - -export default FilterComponent - `}/> - ##### Support Server Side Rendering For applications that use server-side rendering, you can ensure that the FilterDate component is fully rendered before displaying it by using the domLoaded state variable. @@ -179,11 +121,6 @@ export default FilterComponent { title: 'language', default: 'es', types: ['es', 'en'] }, { title: 'textApplyBtn', default: 'Apply', types: ['string'] }, { title: 'textResetBtn', default: 'Reset', types: ['string'] }, - { - title: 'position', - default: '{ show: false, top: 0, left: 0 }', - types: ['{ show: boolean, top: number, left: number }'] - }, { title: 'width', default: null, types: ['string', 'number'] }, { title: 'className', default: null, types: ['string'] } ]} diff --git a/docs/components/filter-range-slider.mdx b/docs/components/filter-range-slider.mdx index 05bdf3a..9af73ac 100644 --- a/docs/components/filter-range-slider.mdx +++ b/docs/components/filter-range-slider.mdx @@ -43,11 +43,6 @@ The code snippet below shows how to use the FilterRange component: title="Filter range slider name" onApply={() => undefined} onReset={() => undefined} - position={{ - top: -160, - left: 0, - show: true - }} max={100} min={0} /> @@ -55,86 +50,6 @@ The code snippet below shows how to use the FilterRange component:
-##### Visibility & position - -To manage the FilterRangeSlider component's visibility and position, you can use the -useState hook in a functional component. Position stores the top and left -coordinates, as well as a boolean indicating whether the component should be -shown. The component listens for clicks on a button, which toggles the -FilterRangeSlider's visibility and updates its position based on the click event's -coordinates. - - - - - -The code snippet below shows how to handle the visibility and position: - - { - const [domLoaded, setDomLoaded] = useState(false) - const [position, setPosition] = useState<{ - top: number - left: number - show: boolean - }>({ - top: 0, - left: 0, - show: false - }) - -useEffect(() => { setDomLoaded(true) }, []) - -return ( - <> - {domLoaded && ( -
- - undefined} - onReset={() => undefined} - max={100} - min={0} - position={{ - top: position.top - 160, - left: position.left, - show: position.show - }} - /> -
- )} - - ) -} - -export default FilterComponent - `}/> - -Note: The "domLoaded" state variable in the FilterComponent is used to ensure -that the component is fully rendered before displaying the FilterRangeSlider -component. This is important when using Next.js, as it performs server-side -rendering by default. By waiting for the client-side rendering to complete, -we can avoid any issues with the FilterRangeSlider component not being fully initialized. - -
- ##### Min & max @@ -181,11 +96,6 @@ The code snippet below shows how to set a minimum and maximum value and disable max={minMax ? 300 : 100} min={minMax ? 150 : 0} minValDisabled={true} - position={{ - top: -160, - left: 0, - show: true - }} /> `}/> @@ -204,11 +114,6 @@ The code snippet below shows how to set a minimum and maximum value and disable { title: 'initMaxValue', default: null, types: ['number'] }, { title: 'minValDisabled', default: null, types: ['boolean'] }, { title: 'maxValDisabled', default: null, types: ['boolean'] }, - { - title: 'position', - default: '{ show: false, top: 0, left: 0 }', - types: ['{ show: boolean, top: number, left: number }'] - }, { title: 'className', default: null, types: ['string'] }, { title: 'width', default: null, types: ['string'] }, { title: 'unitName', default: 'Km', types: ['string'] }, diff --git a/docs/components/filter-range.mdx b/docs/components/filter-range.mdx index a9458e4..68ada8b 100644 --- a/docs/components/filter-range.mdx +++ b/docs/components/filter-range.mdx @@ -38,97 +38,12 @@ The code snippet below shows how to use the FilterRange component: console.log('Apply function')} onReset={() => console.log('Reset function')} - position={{ - top: 0, - left: 0, - show: true - }} title="Filter range name" /> `}/>
-##### Visibility & position - -To manage the FilterRange component's visibility and position, you can use the -useState hook in a functional component. Position stores the top and left -coordinates, as well as a boolean indicating whether the component should be -shown. The component listens for clicks on a button, which toggles the -FilterRange's visibility and updates its position based on the click event's -coordinates. - - - - - -The code snippet below shows how to handle the visibility and position: - - { - const [domLoaded, setDomLoaded] = useState(false) - const [position, setPosition] = useState<{ - top: number - left: number - show: boolean - }>({ - top: 0, - left: 0, - show: false - }) - -useEffect(() => { setDomLoaded(true) }, []) - -return ( - <> - {domLoaded && ( -
- - undefined} - onReset={() => undefined} - position={{ - top: position.top - 180, - left: position.left, - show: position.show - }} - title="Filter range name" - /> -
- )} - - ) -} - -export default FilterComponent - `}/> - -Note: The "domLoaded" state variable in the FilterComponent is used to ensure -that the component is fully rendered before displaying the FilterRange -component. This is important when using Next.js, as it performs server-side -rendering by default. By waiting for the client-side rendering to complete, -we can avoid any issues with the FilterRange component not being fully initialized. - -
- ##### Min & max The "min" and "max" values are used to set boundaries for the selected range, while @@ -178,11 +93,6 @@ The code snippet below shows how to set a minimum and maximum value: { title: 'defaultMax', default: null, types: ['number'] }, { title: 'textApplyBtn', default: 'Apply', types: ['string'] }, { title: 'textResetBtn', default: 'Reset', types: ['string'] }, - { - title: 'position', - default: '{ show: false, top: 0, left: 0 }', - types: ['{ show: boolean, top: number, left: number }'] - }, { title: 'className', default: null, types: ['string'] }, { title: 'width', default: null, types: ['string'] }, { title: 'onApply', default: null, types: ['function'] }, diff --git a/docs/components/filter-select-multi.mdx b/docs/components/filter-select-multi.mdx index bab1f96..5b1a5e6 100644 --- a/docs/components/filter-select-multi.mdx +++ b/docs/components/filter-select-multi.mdx @@ -35,11 +35,6 @@ The code snippet below shows how to use the FilterSelectMulti component: codeString={`import { FilterSelectMulti } from 'dd360-ds' it is used to show the available opt codeString={`import { FilterSelectMulti } from 'dd360-ds' it is used to show the available opt
-##### Position - -To manage the FilterSelectMulti component's visibility and position, you can use the useState hook in a functional component. Position stores the top and left coordinates, as well as a boolean indicating whether the component should be shown. The component listens for clicks on a button, which toggles the FilterSelectMulti visibility and updates its position based on the click event's coordinates. - - - - - -The code snippet below shows how to handle the visibility and position: - - { - const [domLoaded, setDomLoaded] = useState(false) - const [position, setPosition] = useState<{ - top: number - left: number - show: boolean - }>({ - top: 0, - left: 0, - show: false - }) - - useEffect(() => { setDomLoaded(true)}, []) - - return ( - <> - {domLoaded && ( - <> -
- -
- - - )} - - ) -} - -export default FilterSelectMultiCustom - `}/> - -Note: The "domLoaded" state variable in the FilterSelectMultiCustom is used to ensure that the component is fully rendered before displaying the FilterSelect Multi component. This is important when using Next.js, as it performs server-side rendering by default. By waiting for the client-side rendering to complete, we can avoid any issues with the FilterSelectMulti component not being fully initialized. - -
- ##### Title The prop serves to provide a descriptive title or label @@ -177,11 +92,6 @@ The prop serves to provide a descriptive title or label it is used to customize the text of the it is used to customize the text of the used to customize the size used to customize the size { title: 'initialItemList', types: ['Object'] ,required:true}, { title: 'textApplyBtn',default:'Apply', types: ['string'] }, { title: 'textResetBtn',default:'Reser', types: ['string'] }, - { - title: 'position', - default: '{ show: false, top: 0, left: 0 }', - types: ['{ show: boolean, top: number, left: number }'] - }, { title: 'className', types: ['string'] }, { title: 'width', types: ['Object'] }, { title: 'onApply', default: 'null', types: ['function'] ,required:true} diff --git a/docs/components/filter-select.mdx b/docs/components/filter-select.mdx index 756a4bb..49d4f4f 100644 --- a/docs/components/filter-select.mdx +++ b/docs/components/filter-select.mdx @@ -35,11 +35,6 @@ The code snippet below shows how to use the FilterSelect component: codeString={`import { FilterSelect } from 'dd360-ds' it is used to show the available options, codeString={`import { FilterSelect } from 'dd360-ds' it is used to show the available options,
-##### Position - -To manage the FilterSelect component's visibility and position, you can use the useState hook in a functional component. Position stores the top and left coordinates, as well as a boolean indicating whether the component should be shown. The component listens for clicks on a button, which toggles the FilterSelect visibility and updates its position based on the click event's coordinates. - - - - - -The code snippet below shows how to handle the visibility and position: - - { - const [domLoaded, setDomLoaded] = useState(false) - const [position, setPosition] = useState<{ - top: number - left: number - show: boolean - }>({ - top: 0, - left: 0, - show: false - }) - - useEffect(() => { setDomLoaded(true)}, []) - - return ( - <> - {domLoaded && ( - <> -
- -
- alert('handleChange)} - /> - - )} - - ) -} - -export default FilterSelectCustom - `}/> - -Note: The "domLoaded" state variable in the FilterSelectCustom is used to ensure that the component is fully rendered before displaying the FilterSelect component. This is important when using Next.js, as it performs server-side rendering by default. By waiting for the client-side rendering to complete, we can avoid any issues with the FilterSelect component not being fully initialized. - -
- ##### Title The prop serves to provide a descriptive title or label @@ -177,11 +92,6 @@ The prop serves to provide a descriptive title or label is used to provide a default value it is used to customize the text of the it is used to customize the text of the used to customize the size used to customize the size { title: 'selectedValue', types: ['string'] }, { title: 'textApplyBtn', default:'Apply',types: ['string'] }, { title: 'textResetBtn',default:'Reset', types: ['string'] }, - { - title: 'position', - default: '{ show: false, top: 0, left: 0 }', - types: ['{ show: boolean, top: number, left: number }'] - }, { title: 'className', types: ['string'] }, { title: 'width', types: ['Object'] }, { title: 'onApply', default: 'null', types: ['function'] ,required:true} diff --git a/docs/controls/switch.mdx b/docs/controls/switch.mdx index 6b048bf..d3e01cf 100644 --- a/docs/controls/switch.mdx +++ b/docs/controls/switch.mdx @@ -90,6 +90,7 @@ With the prop you can add icon on switch disabled { title: 'toogle', default: 'false', types: ['boolean'] }, { title: 'customIcon', default: 'false', types: ['boolean'] }, { title: 'setToogle', default: null, types: ['function'] }, + { title: 'size', default: 'lg', types: ['sm', 'lg'] } { title: 'className', default: null, types: ['string'] } ]} diff --git a/docs/form/autocomplete.mdx b/docs/form/autocomplete.mdx index d14463c..8c13e64 100644 --- a/docs/form/autocomplete.mdx +++ b/docs/form/autocomplete.mdx @@ -22,15 +22,26 @@ components: AutoComplete ##### Usage It is mandatory to pass a prop called "items". -The prop item, contains the data for each item in the drop-down list. Each array object must have a format similar to of following example: +The prop item, contains the data for each item in the drop-down list. +If you want to disable an item, you can add a disabled property to the object. Each array object must have a format similar to of following example: - + -" /> +" /> ##### Variants @@ -51,7 +62,7 @@ Sets the appearance of the component. Available options are: default, active, di - @@ -60,30 +71,6 @@ Sets the appearance of the component. Available options are: default, active, di " /> -##### Types - -Sets the input type of the component. Available options are: text, number, email, currency, date, date, password, year, month, and percentage. By default it uses "text". - - - Text - - Number - - Email - - Password - - Percentage - - - - - ##### Can find text A message that is displayed when no items matching the user's search string are found. @@ -92,19 +79,19 @@ A message that is displayed when no items matching the user's search string are -" /> ##### IsCloseOnBlur -A boolean that indicates whether the drop-down list will be closed when the user clicks out of it. +A boolean that indicates whether the drop-down list will be closed when the user clicks out of it. If the value is true and the property is true, the drop-down list will be open automatically if the user clicks on the input and the input text is empty. -"/> @@ -116,7 +103,7 @@ A boolean indicating whether the drop-down list is loading. -" /> @@ -128,7 +115,7 @@ A message displayed while loading the drop-down list. -" /> @@ -140,7 +127,7 @@ Text that is displayed as a placeholder in the text box before something is type -" /> @@ -148,7 +135,7 @@ Text that is displayed as a placeholder in the text box before something is type diff --git a/docs/form/input.mdx b/docs/form/input.mdx index 944011d..ff5efe8 100644 --- a/docs/form/input.mdx +++ b/docs/form/input.mdx @@ -191,6 +191,7 @@ With the prop you can mark an input as required. S { title: 'paddingX', default: null, types: ['string'] }, { title: 'paddingY', default: null, types: ['string'] }, { title: 'isRequired', default: null, types: ['boolean'] }, + { title: 'classNameInputDatePicker', default: null, types: ['string'] }, { title: '...', default: null, types: ['InputHTMLAttributes'] } ]} /> @@ -208,6 +209,7 @@ When the prop is . { title: 'decimalsLimit', default: 2, types: ['number'] }, { title: 'suffix', default: null, types: ['string'] }, { title: 'decimalScale', default: 2, types: ['number'] }, + { title: 'allowNegativeValue' , default: false, types: ['boolean'] }, { title: '...', default: null, types: ['InputHTMLAttributes'] }, { title: '...', default: null, types: ['InputProps'] } ]} diff --git a/docs/form/select.mdx b/docs/form/select.mdx index 5d8157f..63307c4 100644 --- a/docs/form/select.mdx +++ b/docs/form/select.mdx @@ -133,10 +133,26 @@ With the prop you can mark an select as required. +