@tecsinapse/react-web-kit 1.3.2 → 1.6.1

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

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

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

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

@@ -0,0 +1,35 @@
+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/Button/styled.ts

@@ -2,13 +2,23 @@ import styled, { css } from '@emotion/native';
 import { Button, StyleProps } from '@tecsinapse/react-core';
 import { WebButtonProps } from './Button';
 
+const webStyles = () => {
+  return css`
+    & * {
+      user-select: none;
+    }
+  `;
+};
+
 const hoverStyles = ({
   mouseOver,
   theme,
   color = 'primary',
+  disabled,
 }: { mouseOver: boolean } & WebButtonProps & Partial<StyleProps>) => {
   return (
     mouseOver &&
+    !disabled &&
     css`
       background-color: ${theme?.color[color].dark};
       border-color: ${theme?.color[color].dark};
@@ -18,4 +28,4 @@ const hoverStyles = ({
 
 export const StyledWebButton = styled(Button)<
   { mouseOver: boolean } & WebButtonProps & Partial<StyleProps>
->(hoverStyles);
+>(webStyles, hoverStyles);

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

@@ -0,0 +1,55 @@
+import React from 'react';
+import { Story } from '@storybook/react';
+import { Text } from '@tecsinapse/react-core';
+import Modal, { ModalProps } from './Modal';
+import { Button } from '../Button';
+
+export default {
+  title: 'Components/Modal',
+  component: Modal,
+};
+
+const Template: Story<ModalProps> = ({ open: _open, ...args }) => {
+  const [open, setOpen] = React.useState(_open);
+
+  React.useEffect(() => setOpen(_open), [_open]);
+
+  const toggleOpen = () => setOpen(state => !state);
+
+  return (
+    <>
+      <Modal {...args} onClose={toggleOpen} open={open}>
+        <div
+          style={{
+            width: 350,
+            height: 200,
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+          }}
+        >
+          <Text colorVariant="primary" typography="h3" colorTone="dark">
+            Are you sure?
+          </Text>
+          <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>
+          <Button onPress={toggleOpen}>
+            <Text fontColor="light">Close Modal</Text>
+          </Button>
+        </div>
+      </Modal>
+      <Button onPress={toggleOpen}>
+        <Text fontColor="light">Open Modal</Text>
+      </Button>
+    </>
+  );
+};
+
+export const Base = Template.bind({});
+
+Base.args = { open: true };

package/src/components/atoms/Modal/Modal.tsx

@@ -0,0 +1,34 @@
+import React, { CSSProperties } from 'react';
+import { Transition } from 'react-transition-group';
+import { Overlay } from '../Overlay';
+import { ModalContainer } from './styled';
+import { defaultStyleOverlay, transitionStylesOverlay } from './animations';
+
+export interface ModalProps {
+  open: boolean;
+  onClose: () => void;
+  style?: CSSProperties;
+}
+
+const Modal: React.FC<ModalProps> = ({ children, open, onClose, style }) => {
+  return (
+    <>
+      <Overlay open={open} onClose={onClose} zIndex="modal" />
+      <Transition in={open} timeout={400}>
+        {state => (
+          <ModalContainer
+            style={{
+              ...style,
+              ...defaultStyleOverlay,
+              ...transitionStylesOverlay[state],
+            }}
+          >
+            {children}
+          </ModalContainer>
+        )}
+      </Transition>
+    </>
+  );
+};
+
+export default Modal;

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

@@ -0,0 +1,12 @@
+export const defaultStyleOverlay = {
+  transition: `opacity 800ms ease-in-out, visibility 600ms ease-in-out`,
+  opacity: 0,
+  visibility: 'hidden',
+};
+
+export const transitionStylesOverlay = {
+  entering: { opacity: 1, visibility: 'visible' },
+  entered: { opacity: 1, visibility: 'visible' },
+  exiting: { opacity: 0, visibility: 'visible' },
+  exited: { opacity: 0, visibility: 'hidden' },
+};

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

@@ -0,0 +1 @@
+export { default as Modal, ModalProps } from './Modal';

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

@@ -0,0 +1,17 @@
+import styled from '@emotion/styled';
+import { hex2rgba, StyleProps } from '@tecsinapse/react-core';
+
+export const ModalContainer = styled('div')<Partial<StyleProps>>`
+  background-color: ${({ theme }) => theme.miscellaneous.surfaceColor};
+  margin: auto;
+  position: fixed;
+  z-index: ${({ theme }) => theme.zIndex.modal};
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  border-radius: ${({ theme }) => theme.borderRadius.micro};
+  padding: ${({ theme }) => theme.spacing.kilo};
+  display: flex;
+  box-shadow: 0 2px 8px
+    ${({ theme }) => hex2rgba(theme.miscellaneous.shadow, 0.08)};
+`;

package/src/components/atoms/Overlay/Overlay.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { Transition } from 'react-transition-group';
+import { ZIndex } from '@tecsinapse/react-core';
+import { defaultStyleOverlay, transitionStylesOverlay } from './animations';
+import { StyledOverlay } from './styled';
+
+export interface OverlayProps {
+  timeout?: number;
+  open: boolean;
+  onClose: () => void;
+  zIndex: keyof ZIndex;
+}
+
+const Overlay: React.FC<OverlayProps> = ({
+  timeout = 300,
+  open,
+  onClose,
+  zIndex = 'default',
+  children,
+}) => {
+  return (
+    <Transition in={open} timeout={timeout}>
+      {state => (
+        <StyledOverlay
+          style={{
+            ...defaultStyleOverlay,
+            ...transitionStylesOverlay[state],
+          }}
+          onClick={open ? onClose : undefined}
+          show={open}
+          zIndex={zIndex}
+        >
+          {children}
+        </StyledOverlay>
+      )}
+    </Transition>
+  );
+};
+
+export default Overlay;

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

@@ -0,0 +1,11 @@
+export const defaultStyleOverlay = {
+  transition: `opacity 700ms ease-in-out`,
+  opacity: 0,
+};
+
+export const transitionStylesOverlay = {
+  entering: { opacity: 1 },
+  entered: { opacity: 1 },
+  exiting: { opacity: 0 },
+  exited: { opacity: 0 },
+};

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

@@ -0,0 +1 @@
+export { default as Overlay } from './Overlay';

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

@@ -0,0 +1,20 @@
+import styled from '@emotion/styled';
+import { hex2rgba, StyleProps, ZIndex } from '@tecsinapse/react-core';
+
+type InjectedProps = { show: boolean; zIndex: keyof ZIndex };
+
+export const StyledOverlay = styled('div')<Partial<StyleProps> & InjectedProps>`
+  background: ${({ theme }: StyleProps) =>
+    hex2rgba(theme.miscellaneous.overlay, 0.5)};
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  z-index: ${({ theme, show, zIndex }: StyleProps & InjectedProps) =>
+    show ? theme.zIndex[zIndex] - 1 : -1};
+  cursor: ${({ show }) => (show ? 'pointer' : 'default')};
+  position: fixed;
+  align-items: center;
+  justify-content: center;
+`;

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Story } from '@storybook/react';
+import Skeleton from './Skeleton';
+import { SkeletonProps } from './Skeleton';
+
+export default {
+  title: 'Components/Skeleton',
+  component: Skeleton,
+};
+
+const Template: Story<SkeletonProps> = args => <Skeleton {...args} />;
+
+export const Base = Template.bind({});
+
+Base.args = { width: 100, height: 50 };

package/src/components/atoms/Skeleton/Skeleton.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { Wrapper } from './styled';
+import { BorderRadiusType } from '@tecsinapse/react-core';
+
+export interface SkeletonProps {
+  width?: number;
+  height?: number;
+  animation?: 'pulse' | 'wave';
+  radius?: BorderRadiusType;
+}
+
+const Skeleton: React.FC<SkeletonProps> = ({
+  children,
+  width,
+  height,
+  animation = 'wave',
+  radius,
+}) => {
+  if (!width && !height && !children) {
+    throw new Error(
+      '[Skeleton] You should provide children or specify width and height'
+    );
+  }
+
+  return (
+    <Wrapper
+      width={width}
+      height={height}
+      animation={animation}
+      radius={radius}
+    >
+      {children}
+    </Wrapper>
+  );
+};
+
+export default Skeleton;

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

@@ -0,0 +1 @@
+export { default as Skeleton, SkeletonProps } from './Skeleton';

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

@@ -0,0 +1,68 @@
+import { css, keyframes } from '@emotion/react';
+import styled from '@emotion/styled';
+import { StyleProps } from '@tecsinapse/react-core';
+import { SkeletonProps } from './Skeleton';
+
+const pulseKf = keyframes`
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+`;
+
+const waveKf = keyframes`
+  0% {
+    transform: translateX(-100%);
+  }
+  50% {
+    transform: translateX(100%);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+`;
+
+const waveAnim = css`
+  position: relative;
+  overflow: hidden;
+  &::after {
+    animation: ${waveKf} 1.6s linear 0.5s infinite;
+    background: linear-gradient(
+      90deg,
+      transparent,
+      rgba(0, 0, 0, 0.04),
+      transparent
+    );
+    content: '';
+    position: absolute;
+    transform: translateX(-100%);
+    bottom: 0;
+    left: 0;
+    right: 0;
+    top: 0;
+  }
+`;
+
+const pulseAnim = css`
+  animation: ${pulseKf} 1.5s ease-in-out 0.5s infinite;
+`;
+
+export const Wrapper = styled('div')<Partial<StyleProps & SkeletonProps>>`
+  background-color: ${({
+    theme,
+    animation,
+  }: StyleProps & Partial<SkeletonProps>) =>
+    animation === 'pulse'
+      ? theme.miscellaneous.bodyColor
+      : theme.miscellaneous.surfaceColor};
+  width: ${({ width }) => `${width}px` ?? '100%'};
+  height: ${({ height }) => `${height}px` ?? 'auto'};
+  border-radius: ${({ theme, radius }: StyleProps & Partial<SkeletonProps>) =>
+    radius ? theme.borderRadius[radius] : 'unset'};
+  ${({ animation }) => (animation === 'pulse' ? pulseAnim : waveAnim)};
+`;