@tecsinapse/react-web-kit 1.18.7 → 1.20.1

package/package.json

@@ -1,23 +1,28 @@
 {
   "name": "@tecsinapse/react-web-kit",
   "description": "TecSinapse React components",
-  "version": "1.18.7",
+  "version": "1.20.1",
   "main": "dist/index.js",
+  "module": "esm/index.js",
   "types": "dist/index.d.ts",
   "license": "MIT",
   "scripts": {
     "start": "yarn build:es --watch",
-    "build:es": "cross-env BABEL_ENV=build babel src --root-mode upward --out-dir dist --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments",
-    "build:declaration": "tsc --project tsconfig.build.json",
+    "build:es": "yarn build:cjs && yarn build:esm",
+    "build:cjs": "cross-env BABEL_ENV=build babel src --root-mode upward --out-dir dist --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments",
+    "build:esm": "cross-env BABEL_ENV=build babel src --root-mode upward --out-dir esm --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments --config-file ./babel.config.esm.js",
+    "build:declaration": "yarn build:declaration:cjs && yarn build:declaration:esm",
+    "build:declaration:cjs": "tsc --project tsconfig.build.json",
+    "build:declaration:esm": "tsc --project tsconfig.build.esm.json",
     "build:declaration:watch": "tsc --project tsconfig.build.json --watch",
     "yalc:push": "yalc push --changed",
     "yalc:show": "yalc installations show $npm_package_name"
   },
   "dependencies": {
-    "@emotion/native": "^11.0.0",
-    "@emotion/react": "^11.4.1",
-    "@emotion/styled": "^11.3.0",
-    "@tecsinapse/react-core": "^1.17.4",
+    "@emotion/native": "^11.10.0",
+    "@emotion/react": "^11.10.0",
+    "@emotion/styled": "^11.10.0",
+    "@tecsinapse/react-core": "^1.19.0",
     "@types/react-native": "^0.64.4",
     "react-native-vector-icons": "^9.2.0",
     "react-transition-group": "^4.4.2"
@@ -36,5 +41,5 @@
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "react-native-web": "^0.17.1 || ^0.18.0"
   },
-  "gitHead": "03c2dd15a8e489f803bcb0aab01ec83a3cd7f277"
+  "gitHead": "6a1f65e7a62365d4955d88dd0226963d138bb21f"
 }

package/src/components/atoms/Button/Button.tsx

@@ -1,6 +1,7 @@
 import { ButtonProps } from '@tecsinapse/react-core';
 import React, { FC } from 'react';
 import { useMouseHover } from './hooks/useMouseHover';
+import { useMousePressed } from './hooks/useMousePressed';
 import { StyledWebButton } from './styled';
 
 /**
@@ -10,6 +11,8 @@ import { StyledWebButton } from './styled';
 export type WebButtonProps = ButtonProps & {
   onMouseOver?: () => void;
   onMouseOut?: () => void;
+  onPressIn?: () => void;
+  onPressOut?: () => void;
 };
 
 const Button: FC<WebButtonProps> = ({
@@ -17,11 +20,23 @@ const Button: FC<WebButtonProps> = ({
   disabled,
   frozen,
   state,
+  variant,
+  onMouseOut,
+  onMouseOver,
+  onPressIn,
+  onPressOut,
   ...rest
 }): JSX.Element => {
   const _frozen = frozen || state === 'loading';
   const { mouseOver, handleMouseOut, handleMouseOver } = useMouseHover(
-    !disabled && !_frozen
+    !disabled && !_frozen,
+    onMouseOut,
+    onMouseOver
+  );
+  const { pressed, handlePressIn, handlePressOut } = useMousePressed(
+    !disabled && !_frozen,
+    onPressIn,
+    onPressOut
   );
 
   return (
@@ -33,6 +48,10 @@ const Button: FC<WebButtonProps> = ({
       onMouseOver={handleMouseOver}
       onMouseOut={handleMouseOut}
       mouseOver={mouseOver}
+      onPressIn={handlePressIn}
+      onPressOut={handlePressOut}
+      pressed={pressed}
+      variant={variant}
     >
       {children}
     </StyledWebButton>

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>