@tecsinapse/react-web-kit 1.22.0 → 1.22.1-beta.2

package/esm/hooks/useWindowSize.js

@@ -1,23 +0,0 @@
-import React from 'react';
-
-const useWindowSize = () => {
-  const [windowSize, setWindowSize] = React.useState({
-    width: void 0,
-    height: void 0
-  });
-  React.useEffect(() => {
-    const handleResize = () => {
-      setWindowSize({
-        width: window.innerWidth,
-        height: window.innerHeight
-      });
-    };
-    window.addEventListener("resize", handleResize);
-    handleResize();
-    return () => window.removeEventListener("resize", handleResize);
-  }, []);
-  return windowSize;
-};
-
-export { useWindowSize };
-//# sourceMappingURL=useWindowSize.js.map

package/esm/hooks/useWindowSize.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useWindowSize.js","sources":["../../src/hooks/useWindowSize.ts"],"sourcesContent":["import React from 'react';\n\ntype WindowSize = {\n  width: number | undefined;\n  height: number | undefined;\n};\n\nexport const useWindowSize = (): WindowSize => {\n  const [windowSize, setWindowSize] = React.useState<WindowSize>({\n    width: undefined,\n    height: undefined,\n  });\n  React.useEffect(() => {\n    const handleResize = () => {\n      setWindowSize({\n        width: window.innerWidth,\n        height: window.innerHeight,\n      });\n    };\n    window.addEventListener('resize', handleResize);\n    handleResize();\n    return () => window.removeEventListener('resize', handleResize);\n  }, []);\n  return windowSize;\n};\n"],"names":[],"mappings":";;AAOO,MAAM,gBAAgB,MAAkB;AAC7C,EAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAI,MAAM,QAAqB,CAAA;AAAA,IAC7D,KAAO,EAAA,KAAA,CAAA;AAAA,IACP,MAAQ,EAAA,KAAA,CAAA;AAAA,GACT,CAAA,CAAA;AACD,EAAA,KAAA,CAAM,UAAU,MAAM;AACpB,IAAA,MAAM,eAAe,MAAM;AACzB,MAAc,aAAA,CAAA;AAAA,QACZ,OAAO,MAAO,CAAA,UAAA;AAAA,QACd,QAAQ,MAAO,CAAA,WAAA;AAAA,OAChB,CAAA,CAAA;AAAA,KACH,CAAA;AACA,IAAO,MAAA,CAAA,gBAAA,CAAiB,UAAU,YAAY,CAAA,CAAA;AAC9C,IAAa,YAAA,EAAA,CAAA;AACb,IAAA,OAAO,MAAM,MAAA,CAAO,mBAAoB,CAAA,QAAA,EAAU,YAAY,CAAA,CAAA;AAAA,GAChE,EAAG,EAAE,CAAA,CAAA;AACL,EAAO,OAAA,UAAA,CAAA;AACT;;;;"}

package/esm/index.d.ts

@@ -1,46 +0,0 @@
-export * from '@tecsinapse/react-core';
-export { Icon, Text } from '@tecsinapse/react-core';
-export { Accordion } from './components/atoms/Accordion';
-export type { AccordionProps } from './components/atoms/Accordion';
-export { default as Badge } from './components/atoms/Badge/Badge';
-export type { BadgeWebProps } from './components/atoms/Badge/Badge';
-export { Button, useMouseHover } from './components/atoms/Button';
-export type { WebButtonProps } from './components/atoms/Button';
-export { Input } from './components/atoms/Input';
-export type { InputWebProps } from './components/atoms/Input';
-export { InputMask } from './components/atoms/InputMask';
-export type { InputMaskWebProps } from './components/atoms/InputMask';
-export { Modal } from './components/atoms/Modal';
-export type { ModalProps } from './components/atoms/Modal';
-export { Skeleton } from './components/atoms/Skeleton';
-export type { SkeletonProps } from './components/atoms/Skeleton';
-export { Tag } from './components/atoms/Tag';
-export type { TagProps } from './components/atoms/Tag';
-export { Tooltip } from './components/atoms/Tooltip';
-export type { ITooltip } from './components/atoms/Tooltip';
-export { Breadcrumbs } from './components/molecules/Breadcrumbs';
-export type { BreadcrumbsProps, BreadcrumbType } from './components/molecules/Breadcrumbs';
-export { DatePicker } from './components/molecules/DatePicker';
-export type { WebDatePickerProps } from './components/molecules/DatePicker';
-export { DateTimePicker } from './components/molecules/DateTimePicker';
-export type { WebDateTimePickerProps } from './components/molecules/DateTimePicker';
-export { Drawer } from './components/molecules/Drawer';
-export type { DrawerProps } from './components/molecules/Drawer';
-export { Grid, GridItem } from './components/molecules/Grid';
-export type { IGridItemWeb, IGridWeb } from './components/molecules/Grid';
-export { IconTextButton } from './components/molecules/IconTextButton';
-export { InputPassword } from './components/molecules/InputPassword';
-export type { InputPasswordWebProps } from './components/molecules/InputPassword';
-export { LabeledSwitch } from './components/molecules/LabeledSwitch';
-export type { LabeledSwitchWebProps } from './components/molecules/LabeledSwitch';
-export { Menubar } from './components/molecules/Menubar';
-export type { MenubarItemsOptions, MenubarMostUsedType, MenubarOptionsType, MenubarProps } from './components/molecules/Menubar';
-export { Select } from './components/molecules/Select';
-export type { SelectProps } from './components/molecules/Select';
-export { Snackbar } from './components/molecules/Snackbar';
-export type { SnackbarWebProps } from './components/molecules/Snackbar';
-export { TextArea } from './components/molecules/TextArea';
-export type { TextAreaProps } from './components/molecules/TextArea';
-export { DataGrid } from './components/organisms/DataGrid';
-export type { DataGridProps, HeadersType } from './components/organisms/DataGrid';
-export * from './hooks';

package/esm/index.js

@@ -1,30 +0,0 @@
-export * from '@tecsinapse/react-core';
-export { Icon, Text } from '@tecsinapse/react-core';
-export { default as Accordion } from './components/atoms/Accordion/Accordion.js';
-export { default as Badge } from './components/atoms/Badge/Badge.js';
-export { default as Button } from './components/atoms/Button/Button.js';
-export { useMouseHover } from './components/atoms/Button/hooks/useMouseHover.js';
-export { default as Input } from './components/atoms/Input/Input.js';
-export { default as InputMask } from './components/atoms/InputMask/InputMask.js';
-export { default as Modal } from './components/atoms/Modal/Modal.js';
-export { default as Skeleton } from './components/atoms/Skeleton/Skeleton.js';
-export { default as Tag } from './components/atoms/Tag/Tag.js';
-export { default as Tooltip } from './components/atoms/Tooltip/Tooltip.js';
-export { default as Breadcrumbs } from './components/molecules/Breadcrumbs/Breadcrumbs.js';
-export { DatePicker } from './components/molecules/DatePicker/DatePicker.js';
-export { DateTimePicker } from './components/molecules/DateTimePicker/DateTimePicker.js';
-export { default as Drawer } from './components/molecules/Drawer/Drawer.js';
-export { default as GridItem } from './components/molecules/Grid/Item/Item.js';
-export { default as Grid } from './components/molecules/Grid/Grid.js';
-export { default as IconTextButton } from './components/molecules/IconTextButton/IconTextButton.js';
-export { default as InputPassword } from './components/molecules/InputPassword/InputPassword.js';
-export { default as LabeledSwitch } from './components/molecules/LabeledSwitch/LabeledSwitch.js';
-export { default as Menubar } from './components/molecules/Menubar/Menubar.js';
-export { default as Select } from './components/molecules/Select/Select.js';
-export { default as Snackbar } from './components/molecules/Snackbar/Snackbar.js';
-export { default as TextArea } from './components/molecules/TextArea/TextArea.js';
-export { default as DataGrid } from './components/organisms/DataGrid/DataGrid.js';
-export { useBreakpoints } from './hooks/useBreakpoints.js';
-export { useClickAwayListener } from './hooks/useClickAwayListener.js';
-export { useWindowSize } from './hooks/useWindowSize.js';
-//# sourceMappingURL=index.js.map

package/esm/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/rollup.config.js

@@ -1,44 +0,0 @@
-import esbuild from 'rollup-plugin-esbuild';
-import alias from '@rollup/plugin-alias';
-
-const outputDefaultConfig = {
-  preserveModules: true,
-  preserveModulesRoot: 'src',
-  sourcemap: true,
-};
-
-export default [
-  {
-    input: ['./src/index.ts'],
-    output: [
-      {
-        dir: 'esm',
-        format: 'esm',
-        ...outputDefaultConfig,
-      },
-      {
-        dir: 'dist',
-        format: 'cjs',
-        exports: 'auto',
-        ...outputDefaultConfig,
-      },
-    ],
-    plugins: [
-      alias({
-        entries: [{ find: 'react-native', replacement: 'react-native-web' }],
-      }),
-      esbuild({ tsconfig: 'tsconfig.build.json' }),
-    ],
-    external: [
-      'react',
-      'react-dom',
-      'react-native-web',
-      '@emotion/native',
-      '@emotion/react',
-      '@emotion/styled',
-      '@tecsinapse/react-core',
-      'react-native-vector-icons',
-      'react-transition-group',
-    ],
-  },
-];

package/src/components/atoms/Accordion/Accordion.stories.tsx

@@ -1,35 +0,0 @@
-import React from 'react';
-import { Story } from '@storybook/react';
-import Accordion, { AccordionProps } from './Accordion';
-import { Text } from '@tecsinapse/react-core';
-
-export default {
-  title: 'Web/Accordion',
-  component: Accordion,
-  parameters: {
-    backgrounds: {
-      default: 'white',
-    },
-  },
-};
-
-const Template: Story<AccordionProps> = args => {
-  return (
-    <div style={{ width: 600 }}>
-      <Accordion {...args} title="Agreement terms">
-        <Text>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quis
-          lorem sed felis pretium posuere quis ut quam. Nunc at mi quis urna
-          maximus feugiat id et neque. Nunc sit amet leo magna. Quisque eu risus
-          interdum, sagittis neque nec, ultrices ex.
-        </Text>
-      </Accordion>
-    </div>
-  );
-};
-
-export const Base = Template.bind({});
-
-Base.args = {
-  title: 'Agreement terms',
-};

package/src/components/atoms/Accordion/Accordion.tsx

@@ -1,100 +0,0 @@
-import React, { useRef } from 'react';
-import { Icon, Text, ThemeProp } from '@tecsinapse/react-core';
-import {
-  AccordionContainer,
-  IconContainer,
-  TitleContainer,
-  ContentContainer,
-} from './styled';
-import { Transition } from 'react-transition-group';
-import {
-  contentStyle,
-  contentTransition,
-  titleStyle,
-  titleTransition,
-} from './animations';
-import { useTheme } from '@emotion/react';
-
-export interface AccordionProps extends React.HTMLAttributes<HTMLDivElement> {
-  open?: boolean;
-  onChange?: () => void;
-  title: string;
-  /** Transition time for collapse effect in ms */
-  transition?: number;
-}
-
-const Accordion: React.FC<AccordionProps> = ({
-  title,
-  open: _open = false,
-  onChange,
-  transition = 200,
-  children,
-  ...rest
-}) => {
-  const [open, setOpen] = React.useState(_open);
-  const [contentHeight, setContentHeight] = React.useState(0);
-  const theme = useTheme() as ThemeProp;
-
-  const ref = useRef<HTMLDivElement | null>(null);
-
-  React.useEffect(() => setOpen(_open), [_open]);
-
-  React.useLayoutEffect(() => {
-    const size = Array.from(
-      (ref.current?.children || []) as HTMLCollection
-    ).reduce((prev, curr) => prev + curr.clientHeight, 0);
-    setContentHeight(size);
-  }, []);
-
-  const handleClick = React.useCallback(() => {
-    if (onChange) {
-      onChange();
-      return;
-    }
-    setOpen(state => !state);
-  }, [onChange]);
-
-  return (
-    <AccordionContainer {...rest}>
-      <TitleContainer onClick={handleClick}>
-        <Transition in={open} timeout={transition}>
-          {state => (
-            <Text
-              typography="h4"
-              fontWeight="bold"
-              style={{
-                ...titleStyle(transition, theme),
-                ...titleTransition(theme)[state],
-              }}
-            >
-              {title}
-            </Text>
-          )}
-        </Transition>
-        <IconContainer>
-          <Icon
-            type="material-community"
-            name={open ? 'chevron-up' : 'chevron-down'}
-            size="kilo"
-            fontColor="medium"
-          />
-        </IconContainer>
-      </TitleContainer>
-      <Transition in={open} timeout={transition}>
-        {state => (
-          <ContentContainer
-            ref={htmlEl => (ref.current = htmlEl)}
-            style={{
-              ...contentStyle(open, transition, contentHeight, theme),
-              ...contentTransition(contentHeight, theme)[state],
-            }}
-          >
-            {children}
-          </ContentContainer>
-        )}
-      </Transition>
-    </AccordionContainer>
-  );
-};
-
-export default Accordion;

package/src/components/atoms/Accordion/animations.ts

@@ -1,51 +0,0 @@
-import { ThemeProp, extractNumbersFromString } from '@tecsinapse/react-core';
-
-export const contentStyle = (
-  open: boolean,
-  transition: number,
-  value: number,
-  theme: ThemeProp
-) => ({
-  transition: `padding-bottom ${transition * 2}ms ease-in-out, height ${
-    transition * 2
-  }ms ease-in-out`,
-  paddingBottom: open ? extractNumbersFromString(theme.spacing.kilo) : 0,
-  height: open ? value : 0,
-});
-
-export const contentTransition = (value: number, theme: ThemeProp) => {
-  const paddingBottom = extractNumbersFromString(theme.spacing.kilo);
-  return {
-    entering: {
-      paddingBottom,
-      height: value,
-    },
-    entered: {
-      paddingBottom,
-      height: value,
-    },
-    exiting: {
-      paddingBottom,
-      height: value,
-    },
-    exited: { paddingBottom: 0, height: 0 },
-  };
-};
-
-export const titleStyle = (transition: number, theme: ThemeProp) => ({
-  transition: `color ${transition * 2}ms ease-in-out`,
-  color: theme.font.color.dark,
-});
-
-export const titleTransition = (theme: ThemeProp) => ({
-  entering: {
-    color: theme.font.color.orange,
-  },
-  entered: {
-    color: theme.font.color.orange,
-  },
-  exiting: {
-    color: theme.font.color.orange,
-  },
-  exited: { color: theme.font.color.dark },
-});

package/src/components/atoms/Accordion/index.ts

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

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

@@ -1,35 +0,0 @@
-import styled from '@emotion/styled';
-import { StyleProps } from '@tecsinapse/react-core';
-
-export const IconContainer = styled('div')<Partial<StyleProps>>`
-  border-radius: ${({ theme }) => theme.borderRadius.mili};
-  border: ${({ theme }) =>
-    `${theme.borderWidth.pico} solid ${theme.color.secondary.light}`};
-  display: flex;
-  text-align: center;
-  justify-content: center;
-  align-items: center;
-`;
-
-export const TitleContainer = styled('div')<Partial<StyleProps>>`
-  display: flex;
-  flex: 1;
-  flex-direction: row;
-  justify-content: space-between;
-  cursor: pointer;
-  padding: ${({ theme }) => theme.spacing.kilo} 0;
-`;
-
-export const AccordionContainer = styled('div')<Partial<StyleProps>>`
-  display: flex;
-  flex-direction: column;
-  border-bottom: ${({ theme }) =>
-    `${theme.borderWidth.pico} solid ${theme.color.secondary.light}`};
-  background-color: ${({ theme }) => theme.miscellaneous.surfaceColor};
-`;
-
-export const ContentContainer = styled('div')`
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-`;

package/src/components/atoms/Badge/Badge.stories.tsx

@@ -1,24 +0,0 @@
-import { Story } from '@storybook/react';
-import { Icon } from '@tecsinapse/react-core';
-import { BadgeWebProps } from './Badge';
-import React from 'react';
-import { Badge } from '.';
-
-export default {
-  title: 'Hybrid/Badge',
-  component: Badge,
-};
-
-const Template: Story<BadgeWebProps> = ({ color, fontColor, tone }) => (
-  <Badge color={color} tone={tone} value={5} fontColor={fontColor}>
-    <Icon name={'user-circle'} type={'font-awesome'} size={'mega'} />
-  </Badge>
-);
-
-export const Base = Template.bind({});
-
-Base.args = {
-  color: 'primary',
-  fontColor: 'light',
-  tone: 'medium',
-};

package/src/components/atoms/Badge/Badge.tsx

@@ -1,34 +0,0 @@
-import {
-  BadgeProps,
-  Badge as BadgeCore,
-  Text,
-  FontColorType,
-} from '@tecsinapse/react-core';
-import React, { FC } from 'react';
-
-export interface BadgeWebProps extends Omit<BadgeProps, 'value'> {
-  fontColor?: FontColorType;
-  value: string | number;
-}
-
-const Badge: FC<BadgeWebProps> = ({
-  children,
-  fontColor = 'light',
-  value,
-  ...props
-}) => {
-  return (
-    <BadgeCore
-      {...props}
-      value={
-        <Text fontColor={fontColor} fontWeight={'bold'} typography={'label'}>
-          {value}
-        </Text>
-      }
-    >
-      {children}
-    </BadgeCore>
-  );
-};
-
-export default Badge;

package/src/components/atoms/Badge/index.ts

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

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

@@ -1,35 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import { Story } from '@storybook/react';
-import { Text } from '@tecsinapse/react-core';
-import React from 'react';
-import Button, { WebButtonProps } from './Button';
-
-export default {
-  title: 'Hybrid/Button',
-  component: Button,
-};
-
-interface ButtonPropsExtended extends WebButtonProps {
-  label: string;
-}
-
-const Template: Story<ButtonPropsExtended> = args => (
-  <div style={{ width: 200 }}>
-    <Button {...args}>
-      <Text fontWeight="bold" fontColor="light">
-        {args.label}
-      </Text>
-    </Button>
-  </div>
-);
-
-export const Base = Template.bind({});
-
-Base.args = {
-  onPress: e => action('onPress')(e),
-  label: 'Button',
-  color: 'primary',
-  variant: 'filled',
-  tone: 'medium',
-  size: 'small',
-};

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

@@ -1,61 +0,0 @@
-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';
-
-/**
- * TODO: Add a property 'defaultElement' to render a default
- * component and provide some button's state to it.
- */
-export type WebButtonProps = ButtonProps & {
-  onMouseOver?: () => void;
-  onMouseOut?: () => void;
-  onPressIn?: () => void;
-  onPressOut?: () => void;
-};
-
-const Button: FC<WebButtonProps> = ({
-  children,
-  disabled,
-  frozen,
-  state,
-  variant,
-  onMouseOut,
-  onMouseOver,
-  onPressIn,
-  onPressOut,
-  ...rest
-}): JSX.Element => {
-  const _frozen = frozen || state === 'loading';
-  const { mouseOver, handleMouseOut, handleMouseOver } = useMouseHover(
-    !disabled && !_frozen,
-    onMouseOut,
-    onMouseOver
-  );
-  const { pressed, handlePressIn, handlePressOut } = useMousePressed(
-    !disabled && !_frozen,
-    onPressIn,
-    onPressOut
-  );
-
-  return (
-    <StyledWebButton
-      {...rest}
-      disabled={disabled}
-      frozen={_frozen}
-      state={state}
-      onMouseOver={handleMouseOver}
-      onMouseOut={handleMouseOut}
-      mouseOver={mouseOver}
-      onPressIn={handlePressIn}
-      onPressOut={handlePressOut}
-      pressed={pressed}
-      variant={variant}
-    >
-      {children}
-    </StyledWebButton>
-  );
-};
-
-export default Button;

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

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

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

@@ -1,29 +0,0 @@
-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/index.ts

@@ -1,3 +0,0 @@
-export { default as Button } from './Button';
-export type { WebButtonProps } from './Button';
-export * from './hooks/useMouseHover';

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

@@ -1,48 +0,0 @@
-import styled, { css } from '@emotion/native';
-import {
-  borderColorGradationVC,
-  borderColorVC,
-  Button,
-  colorGradationVC,
-  colorVC,
-  StyleProps,
-} from '@tecsinapse/react-core';
-import { WebButtonProps } from './Button';
-
-const webStyles = () => {
-  return css`
-    & * {
-      user-select: none;
-    }
-  `;
-};
-
-const hoverStyles = ({
-  mouseOver,
-  pressed,
-  theme,
-  variant = 'filled',
-  disabled,
-}: { 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[variantColor][variantColorGradation]};
-      border-color: ${theme?.color[variantBorderColor][
-        variantBorderColorGradation
-      ]};
-    `
-  );
-};
-
-export const StyledWebButton = styled(Button)<
-  { mouseOver: boolean; pressed: boolean } & WebButtonProps &
-    Partial<StyleProps>
->(webStyles, hoverStyles);