Merge pull request #444 from eduzz/develop

Versão 0.64.0

package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "@eduzz/houston-workspaces",
-  "version": "0.63.4",
+  "version": "0.64.0",
   "workspaces": [
     "src/pages/*",
     "src/dev",

src/dev/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@eduzz/houston-dev",
-  "version": "0.63.4",
+  "version": "0.64.0",
   "private": true,
   "dependencies": {
-    "@eduzz/houston-forms": "0.63.4",
-    "@eduzz/houston-hooks": "0.63.4",
-    "@eduzz/houston-icons": "0.63.4",
-    "@eduzz/houston-ui": "0.63.4",
+    "@eduzz/houston-forms": "0.64.0",
+    "@eduzz/houston-hooks": "0.64.0",
+    "@eduzz/houston-icons": "0.64.0",
+    "@eduzz/houston-ui": "0.64.0",
     "react-dom": "^18",
     "react-router-dom": "^6.3.0",
     "react-scripts": "^5.0.1",

src/package.json

@@ -1,17 +1,17 @@
 {
   "name": "@eduzz/docs",
-  "version": "0.63.4",
+  "version": "0.64.0",
   "private": true,
   "scripts": {
     "start": "next dev",
     "build": "next build && next export"
   },
   "dependencies": {
     "@chakra-ui/react": "^1.8.8",
-    "@eduzz/houston-forms": "0.63.4",
-    "@eduzz/houston-hooks": "0.63.4",
-    "@eduzz/houston-icons": "0.63.4",
-    "@eduzz/houston-ui": "0.63.4",
+    "@eduzz/houston-forms": "0.64.0",
+    "@eduzz/houston-hooks": "0.64.0",
+    "@eduzz/houston-icons": "0.64.0",
+    "@eduzz/houston-ui": "0.64.0",
     "@emotion/react": "^11",
     "@emotion/styled": "^11",
     "dokz": "2.0.9",

src/pages/eslint-config/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eduzz/eslint-config-houston",
   "private": false,
-  "version": "0.63.4",
+  "version": "0.64.0",
   "description": "Eduzz Houston Eslint Config",
   "author": "Eduzz Team",
   "license": "MIT",

src/pages/forms/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eduzz/houston-forms",
-  "version": "0.63.4",
+  "version": "0.64.0",
   "description": "Houston Forms",
   "main": "index.js",
   "types": "./index.d.ts",
@@ -19,7 +19,7 @@
     "check-update-deps": "yarn ncu -u"
   },
   "dependencies": {
-    "@eduzz/houston-hooks": "0.63.4",
+    "@eduzz/houston-hooks": "0.64.0",
     "@hookform/error-message": "^2.0.0",
     "@hookform/resolvers": "^2",
     "formik": "^2.2.9",

src/pages/hooks/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eduzz/houston-hooks",
   "description": "Eduzz Houston Hooks",
-  "version": "0.63.4",
+  "version": "0.64.0",
   "main": "./index.js",
   "types": "./index.d.ts",
   "author": "Eduzz Team",

src/pages/icons/index.tsx

@@ -9,27 +9,29 @@ export { default as ArrowRight } from './ArrowRight';
 export { default as ArrowUp } from './ArrowUp';
 export { default as AvatarOutline } from './AvatarOutline';
 export { default as AvatarSolid } from './AvatarSolid';
-export { default as Banksplip } from './Bankslip';
+export { default as Bankslip } from './Bankslip';
 export { default as Belt } from './Belt';
 export { default as BetaTester } from './BetaTester';
 export { default as BoxOutline } from './BoxOutline';
 export { default as BoxSolid } from './BoxSolid';
 export { default as Bullet } from './Bullet';
-export { default as CadsSolid } from './CardsSolid';
 export { default as Calendar } from './Calendar';
 export { default as CameraFrontOutline } from './CameraFrontOutline';
 export { default as CameraFrontSolid } from './CameraFrontSolid';
 export { default as CameraOutline } from './CameraOutline';
 export { default as CameraSolid } from './CameraSolid';
 export { default as Cancel } from './Cancel';
 export { default as CardOutline } from './CardOutline';
+export { default as CardSolid } from './CardSolid';
 export { default as CardsOutline } from './CardsOutline';
+export { default as CardsSolid } from './CardsSolid';
 export { default as CartOutline } from './CartOutline';
+export { default as CartSolid } from './CartSolid';
+export { default as ChevronDoubleLeft } from './ChevronDoubleLeft';
+export { default as ChevronDoubleRight } from './ChevronDoubleRight';
 export { default as ChevronDown } from './ChevronDown';
 export { default as ChevronLeft } from './ChevronLeft';
-export { default as ChevronDoubleLeft } from './ChevronDoubleLeft';
 export { default as ChevronRight } from './ChevronRight';
-export { default as ChevronDoubleRight } from './ChevronDoubleRight';
 export { default as ChevronUp } from './ChevronUp';
 export { default as CopyOutline } from './CopyOutline';
 export { default as CopySolid } from './CopySolid';
@@ -61,12 +63,12 @@ export { default as EyeOffOutline } from './EyeOffOutline';
 export { default as EyeOffSolid } from './EyeOffSolid';
 export { default as EyeOnOutline } from './EyeOnOutline';
 export { default as EyeOnSolid } from './EyeOnSolid';
-export { default as FacebookOutline } from './FacebookOutline';
-export { default as FacebookSolid } from './FacebookSolid';
 export { default as FaceHappyOutline } from './FaceHappyOutline';
 export { default as FaceHappySolid } from './FaceHappySolid';
 export { default as FaceSadOutline } from './FaceSadOutline';
 export { default as FaceSadSolid } from './FaceSadSolid';
+export { default as FacebookOutline } from './FacebookOutline';
+export { default as FacebookSolid } from './FacebookSolid';
 export { default as FileOutline } from './FileOutline';
 export { default as FileSolid } from './FileSolid';
 export { default as FilterOutline } from './FilterOutline';
@@ -113,6 +115,7 @@ export { default as MenuRight } from './MenuRight';
 export { default as MessageOutline } from './MessageOutline';
 export { default as MessageRoundOutline } from './MessageRoundOutline';
 export { default as MessageRoundSolid } from './MessageRoundSolid';
+export { default as MessageSolid } from './MessageSolid';
 export { default as MicrophoneOutline } from './MicrophoneOutline';
 export { default as MicrophoneSolid } from './MicrophoneSolid';
 export { default as Mobile } from './Mobile';
@@ -145,6 +148,9 @@ export { default as SearchSolid } from './SearchSolid';
 export { default as SettingsOutline } from './SettingsOutline';
 export { default as SettingsSolid } from './SettingsSolid';
 export { default as Share } from './Share';
+export { default as StarOutline } from './StarOutline';
+export { default as StarSolid } from './StarSolid';
+export { default as Store } from './Store';
 export { default as TagOutline } from './TagOutline';
 export { default as TagSolid } from './TagSolid';
 export { default as Telegram } from './Telegram';

src/pages/icons/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eduzz/houston-icons",
   "description": "Eduzz Houston Icons",
-  "version": "0.63.4",
+  "version": "0.64.0",
   "main": "./index.js",
   "types": "./index.d.ts",
   "author": "Eduzz Team",

src/pages/styles/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eduzz/houston-styles",
   "description": "Eduzz Houston Style",
-  "version": "0.63.4",
+  "version": "0.64.0",
   "main": "./index.js",
   "types": "./index.d.ts",
   "author": "Eduzz Team",
@@ -19,7 +19,7 @@
     "check-update-deps": "yarn ncu -u"
   },
   "dependencies": {
-    "@eduzz/houston-tokens": "0.63.4",
+    "@eduzz/houston-tokens": "0.64.0",
     "@emotion/cache": "^11",
     "@emotion/css": "^11",
     "@emotion/react": "^11",

src/pages/tokens/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eduzz/houston-tokens",
   "description": "Eduzz Houston Tokens",
-  "version": "0.63.4",
+  "version": "0.64.0",
   "main": "./index.js",
   "types": "./index.d.ts",
   "author": "Eduzz Team",

src/pages/ui-components/Breadcrumb/Item/index.tsx

@@ -6,6 +6,7 @@ import { useBreadcrumb } from '../context';
 import LongTextToolTip from '../internals/LongTextToolTip';
 
 export interface BreadcrumbItemProps extends StyledProp {
+  id?: string;
   isActive?: boolean;
   onClick?: () => void;
   children?: React.ReactNode;
@@ -17,11 +18,11 @@ const SeparatorIcon = () => (
   </svg>
 );
 
-const BreadcrumbItem = ({ children, className, isActive }: BreadcrumbItemProps) => {
+const BreadcrumbItem = ({ id, children, className, isActive }: BreadcrumbItemProps) => {
   const { separator } = useBreadcrumb();
 
   return (
-    <li className={cx(className, isActive && 'hst-breadcrumb-item-active')}>
+    <li id={id} className={cx(className, isActive && 'hst-breadcrumb-item-active')}>
       <span className='hst-breadcrumb-item-content' {...(isActive && { 'aria-current': 'page' })}>
         <LongTextToolTip>{children}</LongTextToolTip>
       </span>

src/pages/ui-components/Breadcrumb/Link/index.tsx

@@ -19,6 +19,7 @@ type BreadcrumbLinkProps = {
    * Redirect path.
    */
   href?: string;
+  id?: string;
   icon?: React.ReactNode;
   children?: React.ReactNode;
 };

src/pages/ui-components/Breadcrumb/index.tsx

@@ -7,15 +7,15 @@ import { BreadcrumbProvider } from './context';
 import Item from './Item';
 import Link from './Link';
 
-export interface BreadcrumbProps extends StyledProp {
+export interface BreadcrumbProps extends StyledProp, React.HTMLAttributes<HTMLElement> {
   separator?: React.ReactNode;
   children: React.ReactNode;
 }
 
-const Breadcrumb = ({ children, className, separator }: BreadcrumbProps) => {
+const Breadcrumb = ({ children, className, separator, ...rest }: BreadcrumbProps) => {
   return (
     <BreadcrumbProvider separator={separator}>
-      <nav aria-label='breadcrumb' className={className}>
+      <nav aria-label='breadcrumb' className={className} {...rest}>
         <ol className='hst-breadcrumb-list'>{children}</ol>
       </nav>
     </BreadcrumbProvider>

src/pages/ui-components/Collapse/index.tsx

@@ -3,6 +3,7 @@ import * as React from 'react';
 import CollapseMUI from '@mui/material/Collapse';
 
 export interface CollapseProps {
+  id?: string;
   visibled: boolean;
   children?: React.ReactNode;
   onEnter?: () => void;
@@ -19,10 +20,12 @@ const Collapse = ({
   onEnter,
   onClose,
   mountOnEnter = false,
-  timeout = 500
+  timeout = 500,
+  id
 }: CollapseProps) => {
   return (
     <CollapseMUI
+      id={id}
       in={visibled}
       timeout={timeout}
       unmountOnExit={destroyOnClose}

src/pages/ui-components/Divider/index.tsx

@@ -2,11 +2,11 @@ import * as React from 'react';
 
 import styled, { css, cx, StyledProp } from '@eduzz/houston-styles';
 
-export interface Divider extends StyledProp {
+export interface DividerProps extends StyledProp, React.HTMLAttributes<HTMLHRElement> {
   vertical?: boolean;
 }
 
-const Divider = ({ className, vertical }: Divider) => {
+const Divider = ({ className, vertical, ...rest }: DividerProps) => {
   const ref = React.useRef<HTMLHRElement>(null);
 
   React.useEffect(() => {
@@ -15,7 +15,7 @@ const Divider = ({ className, vertical }: Divider) => {
     }
   }, [vertical]);
 
-  return <hr ref={ref} className={cx(className, { 'hst-divider-vertical': vertical })} />;
+  return <hr ref={ref} className={cx(className, { 'hst-divider-vertical': vertical })} {...rest} />;
 };
 
 export default React.memo(styled(Divider, { label: 'hst-divider' })`

src/pages/ui-components/Forms/Checkbox/Group.tsx

@@ -8,7 +8,8 @@ import error from '../../utils/error';
 import withForm, { WithFormProps } from '../Form/withForm';
 
 export type CheckboxGroupProps = StyledProp &
-  WithFormProps<never> & {
+  WithFormProps<never> &
+  React.HTMLAttributes<HTMLDivElement> & {
     children: React.ReactElement<CheckboxRadioProps>[];
     name?: string;
     value?: any[];
@@ -21,7 +22,14 @@ export type CheckboxGroupProps = StyledProp &
     spacing?: keyof Omit<Spacing, 'fn'>;
   };
 
-const CheckboxGroup = ({ children, value: groupValue = [], onChange, className, errorMessage }: CheckboxGroupProps) => {
+const CheckboxGroup = ({
+  children,
+  value: groupValue = [],
+  onChange,
+  className,
+  errorMessage,
+  ...rest
+}: CheckboxGroupProps) => {
   React.useEffect(() => {
     if (!Array.isArray(groupValue)) {
       error(
@@ -50,7 +58,7 @@ const CheckboxGroup = ({ children, value: groupValue = [], onChange, className,
   });
 
   return (
-    <div className={className}>
+    <div className={className} {...rest}>
       <div className='hst-checkbox-group-checkboxes'>{mappedChildren}</div>
       <span className='hst-checkbox-group-error-message'>{errorMessage}</span>
     </div>

src/pages/ui-components/Forms/DatePicker/index.tsx

@@ -2,6 +2,7 @@ import 'rc-picker/assets/index.css';
 
 import * as React from 'react';
 
+import isValid from 'date-fns/isValid';
 import Picker from 'rc-picker';
 import generateConfig from 'rc-picker/lib/generate/dateFns';
 import locale from 'rc-picker/lib/locale/pt_BR';
@@ -80,6 +81,26 @@ const DatePicker = ({
   fullWidth = true,
   ...inputProps
 }: DatePickerProps) => {
+  const disableDate = React.useCallback(
+    (date: Date | null) => {
+      if (!date) return true;
+      if (minDate) return date < minDate;
+      if (maxDate) return date > maxDate;
+      return false;
+    },
+    [maxDate, minDate]
+  );
+
+  const internalInputOnBlur = React.useCallback(
+    (value: string) => {
+      const [day, month, year] = value.split('/');
+      const date = new Date(+year, +month - 1, +day);
+      if (disableDate(date) || !isValid(date)) return;
+      onChange && onChange(date);
+    },
+    [disableDate, onChange]
+  );
+
   const inputRender = React.useCallback(
     (props: React.InputHTMLAttributes<HTMLInputElement>) => {
       return (
@@ -88,33 +109,16 @@ const DatePicker = ({
           {...props}
           id={id}
           size='default'
+          onBlur={internalInputOnBlur}
           fullWidth={fullWidth}
           disabled={disabled}
           nativeChangeEvent
-          readOnly
           name={undefined}
           endAdornment={<Calendar />}
         />
       );
     },
-    [id, disabled, inputProps, fullWidth]
-  );
-
-  const disableDate = React.useCallback(
-    (date: Date | undefined) => {
-      if (!date) return true;
-
-      if (minDate) {
-        return date < minDate;
-      }
-
-      if (maxDate) {
-        return date > maxDate;
-      }
-
-      return false;
-    },
-    [maxDate, minDate]
+    [id, disabled, inputProps, fullWidth, internalInputOnBlur]
   );
 
   return (