@tecsinapse/react-web-kit 1.18.5 → 1.19.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/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;
+};

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

@@ -1,2 +1,2 @@
 export { default as GridItem } from './Item';
-export type { IGridItem } from './Item';
+export type { IGridItemWeb } from './Item';

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

@@ -1,4 +1,4 @@
 export { GridItem } from './Item';
-export type { IGridItem } from './Item';
+export type { IGridItemWeb } from './Item';
 export { default as Grid } from './Grid';
-export type { IGrid } from './Grid';
+export type { IGridWeb } from './Grid';

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

@@ -0,0 +1,51 @@
+import { action } from '@storybook/addon-actions';
+import { Story } from '@storybook/react';
+import React from 'react';
+import IconTextButton, { WebIconTextButtonProps } from './IconTextButton';
+
+export default {
+  title: 'Web/IconTextButton',
+  component: IconTextButton,
+};
+
+const TemplateIcon: Story<WebIconTextButtonProps> = args => (
+  <IconTextButton {...args} />
+);
+
+export const BaseIcon = TemplateIcon.bind({});
+
+BaseIcon.args = {
+  onPress: e => action('onPress')(e),
+  iconProps: {
+    name: 'rocket',
+    type: 'font-awesome',
+  },
+};
+
+const TemplateIconText: Story<WebIconTextButtonProps> = args => (
+  <IconTextButton {...args} />
+);
+
+export const BaseIconText = TemplateIconText.bind({});
+
+BaseIconText.args = {
+  onPress: e => action('onPress')(e),
+  variant: 'outlined',
+  iconProps: {
+    name: 'rocket',
+    type: 'font-awesome',
+  },
+  label: 'Rocket Icon!',
+};
+
+const TemplateText: Story<WebIconTextButtonProps> = args => (
+  <IconTextButton {...args} />
+);
+
+export const BaseText = TemplateText.bind({});
+
+BaseText.args = {
+  onPress: e => action('onPress')(e),
+  variant: 'text',
+  label: 'No rocket icon :(',
+};

package/src/components/molecules/IconTextButton/IconTextButton.tsx

@@ -0,0 +1,65 @@
+import { IconComponent, IconTextButtonProps } from '@tecsinapse/react-core';
+import React from 'react';
+import { WebButtonProps } from '../../atoms/Button';
+import useIconTextButton from './hooks/useIconTextButton';
+import { StyledIconTextButton } from './styled';
+import TextComponent from './TextComponent';
+
+export type WebIconTextButtonProps = IconTextButtonProps &
+  Omit<WebButtonProps, 'ButtonProps'>;
+
+const IconTextButton: React.FC<WebIconTextButtonProps> = ({
+  iconProps,
+  iconPosition = 'left',
+  textProps,
+  label,
+  variant = 'filled',
+  size = 'default',
+  ...rest
+}): JSX.Element => {
+  const { handleHover, handlePressed, defaultFontColor } = useIconTextButton(
+    variant
+  );
+
+  return (
+    <StyledIconTextButton
+      boxed={!label}
+      variant={variant}
+      size={size}
+      onMouseOut={() => handleHover(true)}
+      onMouseOver={() => handleHover(false)}
+      onPressIn={() => handlePressed(true)}
+      onPressOut={() => handlePressed(false)}
+      {...rest}
+    >
+      {iconPosition === 'left' ? (
+        <IconComponent
+          iconProps={iconProps}
+          size={size}
+          defaultFontColor={defaultFontColor}
+        />
+      ) : (
+        <></>
+      )}
+      <TextComponent
+        label={label}
+        defaultFontColor={defaultFontColor}
+        hasIcon={!!iconProps}
+        iconPosition={iconPosition}
+        textProps={textProps}
+        size={size}
+      />
+      {iconPosition === 'right' ? (
+        <IconComponent
+          iconProps={iconProps}
+          size={size}
+          defaultFontColor={defaultFontColor}
+        />
+      ) : (
+        <></>
+      )}
+    </StyledIconTextButton>
+  );
+};
+
+export default IconTextButton;