@tecsinapse/react-web-kit 1.18.6 → 1.20.0

package/src/components/atoms/Button/hooks/useMouseHover.ts

@@ -1,17 +1,25 @@
 import { useCallback, useState } from 'react';
 
-export const useMouseHover = (active: boolean) => {
+export const useMouseHover = (
+  active: boolean,
+  onMouseOver?: () => void,
+  onMouseOut?: () => void
+) => {
   const [mouseOver, setMouseOver] = useState<boolean>(false);
 
-  const handleMouseOver = useCallback(() => active && setMouseOver(true), [
-    active,
-    setMouseOver,
-  ]);
+  const handleMouseOver = useCallback(() => {
+    if (active) {
+      setMouseOver(true);
+      onMouseOver?.();
+    }
+  }, [active, setMouseOver]);
 
-  const handleMouseOut = useCallback(() => active && setMouseOver(false), [
-    active,
-    setMouseOver,
-  ]);
+  const handleMouseOut = useCallback(() => {
+    if (active) {
+      setMouseOver(false);
+      onMouseOut?.();
+    }
+  }, [active, setMouseOver]);
 
   return {
     mouseOver,

package/src/components/atoms/Button/hooks/useMousePressed.ts

@@ -0,0 +1,29 @@
+import { useCallback, useState } from 'react';
+
+export const useMousePressed = (
+  active: boolean,
+  onPressIn?: () => void,
+  onPressOut?: () => void
+) => {
+  const [pressed, setPressed] = useState<boolean>(false);
+
+  const handlePressIn = useCallback(() => {
+    if (active) {
+      setPressed(true);
+      onPressIn?.();
+    }
+  }, [active, setPressed]);
+
+  const handlePressOut = useCallback(() => {
+    if (active) {
+      setPressed(false);
+      onPressOut?.();
+    }
+  }, [active, setPressed]);
+
+  return {
+    pressed,
+    handlePressIn,
+    handlePressOut,
+  };
+};

package/src/components/atoms/Button/styled.ts

@@ -1,5 +1,12 @@
 import styled, { css } from '@emotion/native';
-import { Button, StyleProps } from '@tecsinapse/react-core';
+import {
+  borderColorGradationVC,
+  borderColorVC,
+  Button,
+  colorGradationVC,
+  colorVC,
+  StyleProps,
+} from '@tecsinapse/react-core';
 import { WebButtonProps } from './Button';
 
 const webStyles = () => {
@@ -12,20 +19,30 @@ const webStyles = () => {
 
 const hoverStyles = ({
   mouseOver,
+  pressed,
   theme,
-  color = 'primary',
+  variant = 'filled',
   disabled,
-}: { mouseOver: boolean } & WebButtonProps & Partial<StyleProps>) => {
+}: { mouseOver: boolean; pressed: boolean } & WebButtonProps &
+  Partial<StyleProps>) => {
+  const variantColor = colorVC[variant];
+  const variantColorGradation = colorGradationVC[variant];
+  const variantBorderColor = borderColorVC[variant];
+  const variantBorderColorGradation = borderColorGradationVC[variant];
   return (
     mouseOver &&
     !disabled &&
+    !pressed &&
     css`
-      background-color: ${theme?.color[color].dark};
-      border-color: ${theme?.color[color].dark};
+      background-color: ${theme?.color[variantColor][variantColorGradation]};
+      border-color: ${theme?.color[variantBorderColor][
+        variantBorderColorGradation
+      ]};
     `
   );
 };
 
 export const StyledWebButton = styled(Button)<
-  { mouseOver: boolean } & WebButtonProps & Partial<StyleProps>
+  { mouseOver: boolean; pressed: boolean } & WebButtonProps &
+    Partial<StyleProps>
 >(webStyles, hoverStyles);

package/src/components/atoms/Input/Input.tsx

@@ -6,12 +6,11 @@ import {
   useInputFocus,
 } from '@tecsinapse/react-core';
 import React, { FC } from 'react';
-import { View } from 'react-native';
+import { TextInput, View } from 'react-native';
 import { StyledWebTextInput } from './styled';
 
-export interface InputWebProps
-  extends Omit<InputElementProps, 'style'>,
-    InputContainerProps {}
+export type InputWebProps = Omit<InputElementProps, 'style'> &
+  InputContainerProps & { ref?: React.Ref<HTMLInputElement | undefined> };
 
 const Input: FC<InputWebProps> = React.forwardRef(
   (
@@ -73,7 +72,7 @@ const Input: FC<InputWebProps> = React.forwardRef(
             {...rest}
             placeholder={onlyLabel ? label : placeholder}
             value={value}
-            ref={ref}
+            ref={ref as React.Ref<TextInput>}
             disabled={disabled}
             onFocus={handleFocus}
             onBlur={handleBlur}

package/src/components/atoms/InputMask/InputMask.tsx

@@ -6,12 +6,11 @@ import {
   useInputFocus,
 } from '@tecsinapse/react-core';
 import React, { FC } from 'react';
-import { View } from 'react-native';
+import { TextInput, View } from 'react-native';
 import { StyledWebTextInputMask } from './styled';
 
-export interface InputMaskWebProps
-  extends Omit<InputMaskElementProps, 'style'>,
-    InputContainerProps {}
+export type InputMaskWebProps = Omit<InputMaskElementProps, 'style'> &
+  InputContainerProps & { ref?: React.Ref<HTMLInputElement | undefined> };
 
 const InputMask: FC<InputMaskWebProps> = React.forwardRef(
   (
@@ -73,7 +72,7 @@ const InputMask: FC<InputMaskWebProps> = React.forwardRef(
             {...rest}
             placeholder={onlyLabel ? label : placeholder}
             value={value}
-            ref={ref}
+            ref={ref as React.Ref<TextInput>}
             disabled={disabled}
             onFocus={handleFocus}
             onBlur={handleBlur}

package/src/components/molecules/DatePicker/Modal.tsx

@@ -1,9 +1,17 @@
-import { CalendarProps, PressableSurface, SelectionType } from '@tecsinapse/react-core';
+import {
+  CalendarProps,
+  PressableSurface,
+  SelectionType,
+} from '@tecsinapse/react-core';
 import * as React from 'react';
 import { Modal as RNModal, ModalProps } from 'react-native';
 import { Backdrop, ModalContent } from './styled';
 
-const Component = <T extends SelectionType>({ onRequestClose, children, ...modalProps }: CalendarProps<T> & ModalProps & { children: JSX.Element }): JSX.Element => {
+const Component = <T extends SelectionType>({
+  onRequestClose,
+  children,
+  ...modalProps
+}: CalendarProps<T> & ModalProps & { children: JSX.Element }): JSX.Element => {
   return (
     <RNModal
       transparent
@@ -14,9 +22,7 @@ const Component = <T extends SelectionType>({ onRequestClose, children, ...modal
     >
       <Backdrop onPress={onRequestClose} effect="none">
         <PressableSurface>
-          <ModalContent>
-            {children}
-          </ModalContent>
+          <ModalContent>{children}</ModalContent>
         </PressableSurface>
       </Backdrop>
     </RNModal>

package/src/components/molecules/DatePicker/index.ts

@@ -1 +1 @@
-export { DatePicker, WebDatePickerProps } from './DatePicker';
+export { DatePicker, WebDatePickerProps } from './DatePicker';

package/src/components/molecules/DatePicker/styled.ts

@@ -1,6 +1,6 @@
-import styled, { css } from "@emotion/native";
-import { hex2rgba, PressableSurface, StyleProps } from "@tecsinapse/react-core";
-import { Platform } from "react-native";
+import styled, { css } from '@emotion/native';
+import { hex2rgba, PressableSurface, StyleProps } from '@tecsinapse/react-core';
+import { Platform } from 'react-native';
 
 const isWeb = Platform.OS === 'web';
 

package/src/components/molecules/DateTimePicker/Modal.tsx

@@ -5,11 +5,9 @@ import { Backdrop, ModalContent } from './styled';
 
 const Component: React.FC<DateTimeSelectorProps & ModalProps> = ({
   onRequestClose,
-  onChange,
   children,
   ...rest
 }) => {
-
   return (
     <RNModal
       transparent
@@ -19,9 +17,7 @@ const Component: React.FC<DateTimeSelectorProps & ModalProps> = ({
       onRequestClose={onRequestClose}
     >
       <Backdrop onPress={onRequestClose} effect="none">
-        <ModalContent>
-          {children}
-        </ModalContent>
+        <ModalContent>{children}</ModalContent>
       </Backdrop>
     </RNModal>
   );

package/src/components/molecules/DateTimePicker/styled.ts

@@ -1,7 +1,10 @@
-import styled, { css } from "@emotion/native";
-import { DateTimeSelectorProps, PressableSurface, RFValueStr, StyleProps } from "@tecsinapse/react-core";
-import { FC } from "react";
-import { Platform } from "react-native";
+import styled, { css } from '@emotion/native';
+import {
+  PressableSurface,
+  RFValueStr,
+  StyleProps,
+} from '@tecsinapse/react-core';
+import { Platform } from 'react-native';
 
 const isWeb = Platform.OS === 'web';
 
@@ -34,4 +37,4 @@ export const ModalContent = styled.View<Partial<StyleProps>>`
     `}
   `}
   overflow: hidden;
-`;
+`;

package/src/components/molecules/Grid/Grid.stories.tsx

@@ -0,0 +1,198 @@
+import React from 'react';
+import { Story } from '@storybook/react';
+import Grid, { IGridWeb } from './Grid';
+import { GridItem } from './Item';
+import { Text } from '@tecsinapse/react-web-kit';
+import styled from '@emotion/styled';
+
+export default {
+  title: 'Web/Grid',
+  component: Grid,
+  subcomponents: { GridItem },
+};
+
+const Container = styled('div')`
+  background-color: orange;
+  padding: 8px;
+  border-width: 1px;
+  border-color: white;
+  border-style: solid;
+  border-radius: 8px;
+`;
+
+const TemplateGrid: Story<IGridWeb> = args => {
+  return (
+    <Grid {...args}>
+      <GridItem wrapper span={12}>
+        <Container>
+          <Text>Box</Text>
+        </Container>
+      </GridItem>
+
+      <GridItem wrapper span={6}>
+        <Container>
+          <Text>Box</Text>
+        </Container>
+      </GridItem>
+      <GridItem wrapper span={6}>
+        <Container>
+          <Text>Box</Text>
+        </Container>
+      </GridItem>
+
+      <GridItem wrapper span={4} flexShrink={1}>
+        <Container>
+          <Text>Box</Text>
+        </Container>
+      </GridItem>
+      <GridItem wrapper span={4} flexGrow={1}>
+        <Container>
+          <Text>Box</Text>
+        </Container>
+      </GridItem>
+      <GridItem wrapper span={4} flexShrink={1}>
+        <Container>
+          <Text>Box</Text>
+        </Container>
+      </GridItem>
+
+      <GridItem wrapper span={3} flexBasis={'content'} flex={1}>
+        {/** Width should consider component padding and grid spacing (8px left + 8px right + 2px grid for nano) */}
+        <Container style={{ width: 'calc(100% - 18px)' }}>
+          <Text>Box</Text>
+        </Container>
+      </GridItem>
+      <GridItem wrapper span={3} flexBasis={'content'}>
+        <Container>
+          <Text>Box</Text>
+        </Container>
+      </GridItem>
+      <GridItem wrapper span={3} flexBasis={'content'}>
+        <Container>
+          <Text>Box</Text>
+        </Container>
+      </GridItem>
+      <GridItem wrapper span={3} flexBasis={'content'}>
+        <Container>
+          <Text>Box</Text>
+        </Container>
+      </GridItem>
+    </Grid>
+  );
+};
+
+export const WithGridItem = TemplateGrid.bind({});
+
+WithGridItem.args = {
+  spacing: 'nano',
+};
+
+const TemplateLayout: Story<IGridWeb> = args => {
+  return (
+    <Grid {...args}>
+      <Container>
+        <Text>Box</Text>
+      </Container>
+      <Container>
+        <Text>Box</Text>
+      </Container>
+      <Container>
+        <Text>Box</Text>
+      </Container>
+      <Container>
+        <Text>Box</Text>
+      </Container>
+      <Container>
+        <Text>Box</Text>
+      </Container>
+      <Container>
+        <Text>Box</Text>
+      </Container>
+      <Container>
+        <Text>Box</Text>
+      </Container>
+      <Container>
+        <Text>Box</Text>
+      </Container>
+      <Container>
+        <Text>Box</Text>
+      </Container>
+      <Container>
+        <Text>Box</Text>
+      </Container>
+    </Grid>
+  );
+};
+
+export const WithLayout = TemplateLayout.bind({});
+
+WithLayout.args = {
+  layout: [[12], [6, 6], [4, 4, 4], [3, 3, 3, 3]],
+  spacing: 'mili',
+};
+
+const TemplateResponsive: Story<IGridWeb> = args => {
+  return (
+    <Grid {...args}>
+      <GridItem wrapper span={{ sm: 12 }}>
+        <Container>
+          <Text>Box</Text>
+        </Container>
+      </GridItem>
+
+      <GridItem wrapper span={{ sm: 6, md: 6 }}>
+        <Container>
+          <Text>Box</Text>
+        </Container>
+      </GridItem>
+      <GridItem wrapper span={{ sm: 6, md: 6 }}>
+        <Container>
+          <Text>Box</Text>
+        </Container>
+      </GridItem>
+
+      <GridItem wrapper span={{ sm: 12, md: 4 }} flexShrink={1}>
+        <Container>
+          <Text>Box</Text>
+        </Container>
+      </GridItem>
+      <GridItem wrapper span={{ sm: 6, md: 4 }} flexGrow={1}>
+        <Container>
+          <Text>Box</Text>
+        </Container>
+      </GridItem>
+      <GridItem wrapper span={{ sm: 6, md: 4 }} flexShrink={1}>
+        <Container>
+          <Text>Box</Text>
+        </Container>
+      </GridItem>
+
+      <GridItem wrapper span={{ sm: 12, lg: 3 }}>
+        <Container>
+          <Text>Box</Text>
+        </Container>
+      </GridItem>
+      <GridItem wrapper span={{ sm: 6, lg: 3 }}>
+        <Container>
+          <Text>Box</Text>
+        </Container>
+      </GridItem>
+      <GridItem wrapper span={{ sm: 6, lg: 3 }}>
+        <Container>
+          <Text>Box</Text>
+        </Container>
+      </GridItem>
+      <GridItem wrapper span={{ sm: 12, lg: 3 }}>
+        <Container>
+          <Text>Box</Text>
+        </Container>
+      </GridItem>
+    </Grid>
+  );
+};
+
+export const WithGridItemResponsive = TemplateResponsive.bind({});
+
+WithGridItemResponsive.args = {
+  spacing: 'nano',
+};

package/src/components/molecules/Grid/Grid.tsx

@@ -1,29 +1,9 @@
 import React from 'react';
 import { GridItem } from './Item';
-import { SpacingType } from '@tecsinapse/react-core';
+import { IGrid } from '@tecsinapse/react-core';
 
-export interface IGrid extends React.HTMLAttributes<HTMLDivElement> {
-  children: JSX.Element[];
-  /** Layout should represent the multiplier of columns to fill the rows properly.
-   * Example:
-   * const layout = [
-   *   [6, 6], // Two elements on row
-   *   [4, 4, 4], // Three elements on row
-   *   [12], // One element on row
-   * ];
-   * */
-  layout?: number[][];
-  /** Number of grid columns to be considered (not the number of elements per row) */
-  columns?: number;
-  spacing?:
-    | SpacingType
-    | {
-        top?: SpacingType;
-        right?: SpacingType;
-        bottom?: SpacingType;
-        left?: SpacingType;
-      };
-}
+export type IGridWeb = IGrid &
+  Omit<React.HTMLAttributes<HTMLDivElement>, 'children'>;
 
 const Grid = ({
   children,
@@ -32,7 +12,7 @@ const Grid = ({
   style,
   spacing,
   ...rest
-}: IGrid) => {
+}: IGridWeb): JSX.Element => {
   if (layout) {
     const flatLayout = layout.flat();
     return (
@@ -47,6 +27,7 @@ const Grid = ({
       >
         {React.Children.map(children, (child, index) => (
           <GridItem
+            key={`child-${index}`}
             columns={columns}
             span={flatLayout[index]}
             spacing={spacing}
@@ -68,11 +49,12 @@ const Grid = ({
       }}
       {...rest}
     >
-      {React.Children.map(children, child => {
+      {React.Children.map(children, (child, index) => {
         return React.cloneElement(child, {
           ...child?.props,
           columns,
           spacing: child?.props.spacing ?? spacing,
+          key: `child-${index}`,
         });
       })}
     </div>

package/src/components/molecules/Grid/Item/Item.tsx

@@ -1,59 +1,53 @@
 import React from 'react';
 import {
-  extractNumbersFromString,
-  SpacingType,
+  IGridItem,
   useTheme,
+  Breakpoints,
+  getGridItemColumSpan,
+  getGridItemPadding,
 } from '@tecsinapse/react-core';
+import { useBreakpoints } from '@tecsinapse/react-web-kit';
+import { getSpan } from './functions';
 
-type FlexPositioning = 'flex-start' | 'flex-end' | 'center';
-type FlexAlignBase = FlexPositioning | 'stretch';
-type FlexAlignType = FlexAlignBase | 'baseline';
-type FlexSpacing = 'space-between' | 'space-around';
+export type Span = Pick<Breakpoints, 'sm'> & Partial<Omit<Breakpoints, 'sm'>>;
 
-type PaddingPosition = 'top' | 'right' | 'bottom' | 'left';
-
-export interface IGridItem {
-  children: React.ReactElement;
-  /** Number of columns to fill */
-  span: number;
-  /** You don't have to give this property since is inherited from Grid */
-  columns?: number;
-  loading?: boolean;
-  /** If your GridItem has a loading state, specify the component here (Skeleton) */
-  loadingComponent?: React.ReactElement;
-  /** Flex properties below */
-  alignContent?: FlexAlignBase | FlexSpacing;
-  alignItems?: FlexAlignType;
-  alignSelf?: 'auto' | FlexAlignType;
-  flex?: number;
-  flexDirection?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
-  flexGrow?: number;
-  flexShrink?: number;
-  justifyContent?: FlexPositioning | FlexSpacing | 'space-evenly';
-  /** You don't have to give this property since is inherited from Grid */
-  spacing?:
-    | SpacingType
-    | {
-        top?: SpacingType;
-        right?: SpacingType;
-        bottom?: SpacingType;
-        left?: SpacingType;
-      };
-  /** Used to wrap children in a View when its style extrapolates the dimensions*/
-  wrapper?: boolean;
+export interface IGridItemWeb
+  extends Omit<IGridItem, 'span'>,
+    Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+  /** At least sm should exist */
+  span: number | Span;
+  /** Only specify this property if the GridItem will be 'dynamic', adjusting itself to content. Use this with `wrapper` for better result. */
+  flexBasis?:
+    | string
+    | 'content'
+    | 'auto'
+    | 'max-content'
+    | 'min-content'
+    | 'fit-content';
 }
 
 const GridItem = ({
   children,
-  span,
+  span: _span,
   columns = 12,
   loadingComponent,
   loading = false,
   spacing: _spacing,
   wrapper = false,
+  alignContent,
+  alignItems,
+  alignSelf,
+  flex,
+  flexDirection,
+  flexGrow,
+  flexShrink,
+  justifyContent,
+  flexBasis,
+  style,
   ...rest
-}: IGridItem) => {
+}: IGridItemWeb): JSX.Element => {
   const { spacing } = useTheme();
+  const { sm, md, lg } = useBreakpoints();
   if (!React.Children.only(children)) {
     throw new Error('The number of children in GridItem should be one');
   }
@@ -61,34 +55,40 @@ const GridItem = ({
     return loadingComponent;
   }
 
-  const getPadding = (pos: PaddingPosition) => {
-    if (_spacing) {
-      if (typeof _spacing === 'string')
-        return extractNumbersFromString(spacing[_spacing]);
-      else if (typeof _spacing === 'object' && _spacing[pos]) {
-        return extractNumbersFromString(spacing[_spacing[pos]!]);
-      } else return undefined;
-    } else return undefined;
-  };
+  const span = typeof _span === 'number' ? _span : getSpan(_span, sm, md, lg);
 
-  const style: React.CSSProperties = {
-    ...rest,
+  const _style: React.CSSProperties = {
+    ...style,
+    alignContent,
+    alignItems,
+    alignSelf,
+    flexDirection,
+    flexGrow,
+    flexShrink,
+    justifyContent,
+    flex,
     boxSizing: 'border-box',
-    flexBasis: `${100 / (columns / span)}%`,
-    paddingTop: getPadding('top'),
-    paddingBottom: getPadding('bottom'),
-    paddingRight: getPadding('right'),
-    paddingLeft: getPadding('left'),
+    flexBasis: flexBasis ?? `${getGridItemColumSpan(columns, span)}%`,
+    paddingTop: getGridItemPadding('top', _spacing, spacing),
+    paddingBottom: getGridItemPadding('bottom', _spacing, spacing),
+    paddingRight: getGridItemPadding('right', _spacing, spacing),
+    paddingLeft: getGridItemPadding('left', _spacing, spacing),
   };
 
   const clone = React.cloneElement(children, {
     ...children?.props,
     style: wrapper
       ? children?.props.style
-      : { ...style, ...children?.props.style },
+      : { ..._style, ...children?.props.style },
   });
 
-  return wrapper ? <div style={style}>{clone}</div> : clone;
+  return wrapper ? (
+    <div {...rest} style={_style}>
+      {clone}
+    </div>
+  ) : (
+    clone
+  );
 };
 
 export default GridItem;

package/src/components/molecules/Grid/Item/functions.ts

@@ -0,0 +1,13 @@
+import { Span } from './Item';
+
+export const getSpan = (
+  value: Span,
+  sm: boolean,
+  md: boolean,
+  lg: boolean
+): number => {
+  if (sm) return value?.sm;
+  if (md) return value?.md ?? value?.sm;
+  if (lg) return value?.lg ?? value?.md ?? value?.sm;
+  return 0;
+};