@tecsinapse/react-web-kit 1.22.2 → 1.22.4

package/src/components/molecules/Drawer/animations.ts

@@ -1,58 +0,0 @@
-import { CSSProperties } from 'react';
-
-export const transformLeftRigthClose = (anchorPosition: string) =>
-  anchorPosition === 'right' ? 'translateX(100%)' : 'translateX(-100%)';
-
-export const transformLeftRigthOpen = 'translateX(0)';
-
-export const transformTopBottomClose = (anchorPosition: string) =>
-  anchorPosition === 'top' ? 'translateY(-100%)' : 'translateY(100%)';
-
-export const transformTopBottomOpen = 'translateY(0%)';
-
-export const defaultStylesLeftRight = (
-  anchorPosition: string
-): CSSProperties => {
-  return {
-    transition: 'transform 300ms ease-in-out',
-    transform: transformLeftRigthClose(anchorPosition),
-    overflowX: 'hidden',
-    overflowY: 'auto',
-  };
-};
-
-export const transitionStylesLeftRight = (anchorPosition: string) => {
-  return {
-    entering: { transform: transformLeftRigthClose(anchorPosition) },
-    entered: {
-      transform: transformLeftRigthOpen,
-    },
-    exiting: {
-      transform: transformLeftRigthOpen,
-    },
-    exited: { transform: transformLeftRigthClose(anchorPosition) },
-  };
-};
-
-export const defaultStylesTopBottom = (
-  anchorPosition: string
-): CSSProperties => {
-  return {
-    transition: 'transform 300ms ease-in-out',
-    transform: transformTopBottomClose(anchorPosition),
-    overflowX: 'hidden',
-    overflowY: 'auto',
-  };
-};
-export const transitionStylesTopBottom = (anchorPosition: string) => {
-  return {
-    entering: { transform: transformTopBottomClose(anchorPosition) },
-    entered: {
-      transform: transformTopBottomOpen,
-    },
-    exiting: {
-      transform: transformTopBottomOpen,
-    },
-    exited: { transform: transformTopBottomClose(anchorPosition) },
-  };
-};

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

@@ -1,2 +0,0 @@
-export { default as Drawer } from './Drawer';
-export type { DrawerProps } from './Drawer';

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

@@ -1,76 +0,0 @@
-import styled from '@emotion/styled';
-import { StyleProps } from '@tecsinapse/react-core';
-import { DrawerProps } from './Drawer';
-import { css } from '@emotion/react';
-
-const anchorLeft = ({ theme, anchorPosition }: StyleProps & DrawerProps) => {
-  return (
-    anchorPosition === 'left' &&
-    css`
-      left: 0;
-      top: 0;
-      border-top-right-radius: ${theme.borderRadius.centi};
-      border-bottom-right-radius: ${theme.borderRadius.centi};
-    `
-  );
-};
-const anchorRight = ({ theme, anchorPosition }: StyleProps & DrawerProps) => {
-  return (
-    anchorPosition === 'right' &&
-    css`
-      right: 0;
-      top: 0;
-      border-top-left-radius: ${theme.borderRadius.centi};
-      border-bottom-left-radius: ${theme.borderRadius.centi};
-    `
-  );
-};
-
-const anchorTop = ({ theme, anchorPosition }: StyleProps & DrawerProps) => {
-  return (
-    anchorPosition === 'top' &&
-    css`
-      left: 0;
-      right: 0;
-      top: 0;
-      border-bottom-right-radius: ${theme.borderRadius.centi};
-      border-bottom-left-radius: ${theme.borderRadius.centi};
-    `
-  );
-};
-
-const anchorBottom = ({ theme, anchorPosition }: StyleProps & DrawerProps) => {
-  return (
-    anchorPosition === 'bottom' &&
-    css`
-      left: 0;
-      right: 0;
-      bottom: 0;
-      border-top-right-radius: ${theme.borderRadius.centi};
-      border-top-left-radius: ${theme.borderRadius.centi};
-    `
-  );
-};
-
-const baseStyles = ({ theme, anchorPosition }: StyleProps & DrawerProps) => {
-  return css`
-    height: ${['left', 'right'].includes(anchorPosition) && '100vh'};
-    width: ${['top', 'bottom'].includes(anchorPosition) && '100wh'};
-    position: fixed;
-    overflow: hidden;
-    background-color: ${theme.miscellaneous.bodyColor};
-    z-index: ${theme.zIndex.drawer};
-  `;
-};
-
-export const StyledContainerDrawer = styled('div')<
-  DrawerProps & Partial<StyleProps>
->(
-  props => css`
-    ${baseStyles(props)}
-    ${anchorBottom(props)}
-    ${anchorTop(props)}
-    ${anchorLeft(props)}
-    ${anchorRight(props)}
-  `
-);

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

@@ -1,198 +0,0 @@
-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,64 +0,0 @@
-import React from 'react';
-import { GridItem } from './Item';
-import { IGrid } from '@tecsinapse/react-core';
-
-export type IGridWeb = IGrid &
-  Omit<React.HTMLAttributes<HTMLDivElement>, 'children'>;
-
-const Grid = ({
-  children,
-  columns = 12,
-  layout,
-  style,
-  spacing,
-  ...rest
-}: IGridWeb): JSX.Element => {
-  if (layout) {
-    const flatLayout = layout.flat();
-    return (
-      <div
-        style={{
-          ...style,
-          display: 'flex',
-          flexDirection: 'row',
-          flexWrap: 'wrap',
-        }}
-        {...rest}
-      >
-        {React.Children.map(children, (child, index) => (
-          <GridItem
-            key={`child-${index}`}
-            columns={columns}
-            span={flatLayout[index]}
-            spacing={spacing}
-          >
-            {child}
-          </GridItem>
-        ))}
-      </div>
-    );
-  }
-
-  return (
-    <div
-      style={{
-        ...style,
-        display: 'flex',
-        flexDirection: 'row',
-        flexWrap: 'wrap',
-      }}
-      {...rest}
-    >
-      {React.Children.map(children, (child, index) => {
-        return React.cloneElement(child, {
-          ...child?.props,
-          columns,
-          spacing: child?.props.spacing ?? spacing,
-          key: `child-${index}`,
-        });
-      })}
-    </div>
-  );
-};
-
-export default Grid;

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

@@ -1,94 +0,0 @@
-import React from 'react';
-import {
-  IGridItem,
-  useTheme,
-  Breakpoints,
-  getGridItemColumSpan,
-  getGridItemPadding,
-} from '@tecsinapse/react-core';
-import { useBreakpoints } from '../../../../hooks';
-import { getSpan } from './functions';
-
-export type Span = Pick<Breakpoints, 'sm'> & Partial<Omit<Breakpoints, 'sm'>>;
-
-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,
-  columns = 12,
-  loadingComponent,
-  loading = false,
-  spacing: _spacing,
-  wrapper = false,
-  alignContent,
-  alignItems,
-  alignSelf,
-  flex,
-  flexDirection,
-  flexGrow,
-  flexShrink,
-  justifyContent,
-  flexBasis,
-  style,
-  ...rest
-}: 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');
-  }
-  if (loadingComponent && loading) {
-    return loadingComponent;
-  }
-
-  const span = typeof _span === 'number' ? _span : getSpan(_span, sm, md, lg);
-
-  const _style: React.CSSProperties = {
-    ...style,
-    alignContent,
-    alignItems,
-    alignSelf,
-    flexDirection,
-    flexGrow,
-    flexShrink,
-    justifyContent,
-    flex,
-    boxSizing: 'border-box',
-    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 },
-  });
-
-  return wrapper ? (
-    <div {...rest} style={_style}>
-      {clone}
-    </div>
-  ) : (
-    clone
-  );
-};
-
-export default GridItem;

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

@@ -1,14 +0,0 @@
-import { Span } from './Item';
-
-export const getSpan = (
-  value: Span,
-  sm: boolean,
-  md: boolean,
-  lg: boolean
-): number => {
-  if (!value) return 0;
-  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 +0,0 @@
-export { default as GridItem } from './Item';
-export type { IGridItemWeb } from './Item';

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

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

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

@@ -1,51 +0,0 @@
-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

@@ -1,64 +0,0 @@
-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;

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

@@ -1,39 +0,0 @@
-import {
-  ButtonSizeType,
-  FontColor,
-  IconPositionOptions,
-  Text,
-  TextProps,
-} from '@tecsinapse/react-core';
-import React, { FC } from 'react';
-
-interface TextComponentProps {
-  textProps?: TextProps;
-  size?: ButtonSizeType;
-  defaultFontColor: keyof FontColor;
-  label?: string;
-  iconPosition?: IconPositionOptions;
-  hasIcon?: boolean;
-}
-
-const TextComponent: FC<TextComponentProps> = ({
-  textProps,
-  size = 'default',
-  defaultFontColor,
-  label,
-}) => {
-  return label ? (
-    <Text
-      typography={textProps?.typography ?? size === 'small' ? 'sub' : 'base'}
-      fontWeight={textProps?.fontWeight ?? 'bold'}
-      fontColor={textProps?.fontColor ?? defaultFontColor}
-      {...textProps}
-    >
-      {label}
-    </Text>
-  ) : (
-    <></>
-  );
-};
-
-export default React.memo(TextComponent);