@tecsinapse/react-web-kit 1.5.0 → 1.6.3

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

@@ -0,0 +1,35 @@
+import React from 'react';
+import { Story } from '@storybook/react';
+import Accordion, { AccordionProps } from './Accordion';
+import { Text } from '@tecsinapse/react-core';
+
+export default {
+  title: 'Components/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

@@ -0,0 +1,99 @@
+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 {
+  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,
+}) => {
+  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>
+      <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

@@ -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

@@ -4,7 +4,9 @@ import { WebButtonProps } from './Button';
 
 const webStyles = () => {
   return css`
-    user-select: none;
+    & * {
+      user-select: none;
+    }
   `;
 };
 

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;
+`;