forstok-ui-lib 3.0.1 → 4.0.0

package/src/components/message/message.styles.ts

@@ -0,0 +1,211 @@
+import styled, { css } from 'styled-components';
+import { dropBase } from '../../assets/stylesheets/bases.styles';
+import IconCheck from '../../assets/images/icons/check-white.svg';
+import IconWarning from '../../assets/images/icons/warning.svg';
+import IconWarningWhite from '../../assets/images/icons/warning-white.svg';
+
+const RightButtonStyles = css`
+  button {
+    position: absolute;
+    right: 5px;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+`
+const AsideButtonStyles = css`
+  aside {
+    display: grid;
+    grid-auto-flow: column;
+    width: 100%;
+    justify-content: end;
+    grid-gap: 8px;
+    padding-top: 15px;
+  }
+`
+
+const getMessageModifiedStyled = ({ $isOpen }:{ $isOpen: boolean }) => {
+  if ($isOpen) {
+    return `
+      & ${MessageOverlay}, & ${MessageContainer} {
+        display: block;
+      }
+    `
+  }
+}
+const getMessageContentModifiedStyled = ({ $type }:{ $type?: string }) => {
+  let style = ``;
+  switch ($type) {
+    case 'success' : 
+      style += `
+        background-color: #21BA45;
+        i {
+          border: 2px solid #fff;
+          border-radius: 50%;
+          &:before { 
+            width: .75em;
+            height: 1em;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            content: url(${IconCheck}); 
+          }
+        }
+        ${RightButtonStyles}
+      `
+      break
+    case 'failed' : 
+      style += `
+        background-color: #dd2926;
+        i {
+          &:before { 
+            width: 1.5em;
+            height: 1em;
+            top: 0;
+            left: 0;
+            content: url(${IconWarningWhite}); 
+          }
+        }
+        ${RightButtonStyles}
+      `
+      break
+    case 'warning' : 
+      style += `
+        background-color: #e1ad01;
+        i {
+          &:before { 
+            width: 1.5em;
+            height: 1em;
+            top: 0;
+            left: 0;
+            content: url(${IconWarningWhite}); 
+          }
+        }
+        ${RightButtonStyles}
+      `
+      break
+    case 'confirm' : 
+      style += `
+        padding: 20px 15px;      
+        grid-template-columns: 21px calc(100vw - 99px);
+        color: var(--pri-clr);
+        i {
+          align-self: start;
+          &:before { 
+            width: 21px;
+            height: 21px;
+            content: url(${IconWarning}); 
+          }
+        }
+        span {
+          display: block;
+          margin-bottom: 5px;
+          line-height: 20px;
+        }
+        ${AsideButtonStyles}
+        @media only screen and (min-width: 768px) {
+          padding: 20px 30px;
+          grid-template-columns: 21px 508px;
+        }
+      `
+      break
+    default:
+      break
+  }
+  return style;
+}
+
+export const Message = styled.div<{ $isOpen: boolean }>`
+  ${getMessageModifiedStyled}
+`
+export const MessageOverlay = styled.div<{ $type?: string }>`
+  display: none;
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 101;
+  overflow: hidden;
+  ${({ $type }:{ $type?: string }) => {
+    if ($type === 'confirm') {
+      return css` 
+        background-color: var(--ov-clr-bg);
+      `
+    }
+  }} 
+`
+export const MessageWrapper = styled.section<{ $isOpen: boolean }>`
+  max-width: 320px;
+  height: auto;
+  max-height: 100%;
+  transform: translate(-50%);
+  left: 50%;
+  top: 0;
+  opacity: 0;
+  background-color: var(--pri-clr-bg);
+  border-radius: var(--ter-rd);
+  overflow: hidden;
+  transition: opacity .4s;
+  width: auto;
+  min-width: 600px;
+  padding: 0;
+  position: relative;
+  display: inline-grid;
+  grid-auto-flow: row;
+  @media only screen and (min-width: 768px) {
+    min-width: 600px;
+  }
+  ${({ $isOpen }:{ $isOpen: boolean }) => {
+    if ($isOpen) {
+      return css` 
+        opacity: 1; 
+      `
+    }
+  }}    
+`
+export const MessageContainer = styled.section<{ $type?: string }>`
+  display: none;
+  position: fixed;
+  top: 5%;
+  left: 50%;
+  z-index: 105;
+  transform: translate(-50%);
+  ${({ $type }:{ $type?: string }) => {
+    if ($type === 'confirm') {
+      return css` 
+        top: 0;
+        & ${MessageWrapper} {
+          ${dropBase}
+          border: none;
+          border-radius: 0 0px 10px 10px;
+          min-width: auto;
+          max-width: 600px;
+          width: calc(100vw - 35px);
+        }
+      `
+    }
+  }} 
+`
+export const MessageContent = styled.section<{ $type?: string }>`
+  width: 100%;
+  display: inline-grid;
+  grid-auto-flow: column;
+  grid-template-columns: 21px 1fr;
+  padding: 15px 35px 15px 15px;
+  vertical-align: middle;
+  align-items: center;
+  grid-gap: 10px;
+  justify-content: start;
+  color: var(--act-clr);
+  line-height: 16px;
+  i {
+    float: right;
+    position: relative;
+    width: 21px;
+    height: 21px;
+    &::before { 
+      position: absolute; 
+    }
+  }
+  ${getMessageContentModifiedStyled}
+`

package/src/components/message/message.tsx

@@ -0,0 +1,62 @@
+import { useCallback, useEffect } from 'react';
+import { useStateWithCallbackLazy } from 'use-state-with-callback';
+import ButtonComponent from '../button/button';
+import { Message, MessageOverlay, MessageContainer, MessageWrapper, MessageContent } from './message.styles';
+import type { TMessage } from './message.typed';
+
+const MessageComponent = ({ timer=500, $type, message, callback }: TMessage) => {
+  const [isOpen, setOpen] = useStateWithCallbackLazy<boolean>(false);
+  const [isOpenContainer, setOpenContainer] = useStateWithCallbackLazy<boolean>(false);
+  const [isClosing, setClosing] = useStateWithCallbackLazy<boolean>(false);
+  
+  const evCloseMessage = useCallback(() => {
+    setClosing(!isClosing, () => {
+      const bodyEl = document.getElementsByTagName("BODY")[0] as HTMLBodyElement;
+      bodyEl.classList.remove("is-immuned");
+      callback && callback();
+    })
+  }, [callback, setClosing, isClosing])
+
+  const CloseCallback = useCallback(() => {
+    evCloseMessage();
+  }, [evCloseMessage])
+
+  useEffect(() => {
+    const _timer = timer ? timer : 2000;
+    const overlayEl = document.querySelector('._refMessageOverlay') as HTMLDivElement;
+    if (!isOpen && !isClosing) {
+      setOpen(!isOpen, () => {
+        overlayEl && overlayEl.addEventListener('click', CloseCallback);
+        setTimeout(() => {
+          setOpenContainer(!isOpenContainer, () => {
+            setTimeout(() => !isOpenContainer && evCloseMessage() , _timer);
+          });
+        }, 1);
+      });
+    } else if (isOpen && isClosing) {
+      setOpen && setOpen(!isOpen, () => {});
+      setOpenContainer && setOpenContainer(!isOpenContainer, () => {});
+      overlayEl && overlayEl.removeEventListener('click', CloseCallback);
+    }
+    return () => {
+      overlayEl && overlayEl.removeEventListener('click', CloseCallback);
+    }
+  },[isOpen, isOpenContainer, timer, evCloseMessage, setOpen, setOpenContainer, CloseCallback, isClosing])
+
+  return (
+    <Message $isOpen={isOpen}>
+      <MessageOverlay className='_refMessageOverlay' />
+      <MessageContainer>
+        <MessageWrapper $isOpen={isOpenContainer}>
+          <MessageContent $type={$type}>
+            <i />
+            {message}
+            <ButtonComponent $mode='small-white-round-close' onClick={evCloseMessage} />
+          </MessageContent>
+        </MessageWrapper>
+      </MessageContainer>
+    </Message>
+  )
+}
+
+export default MessageComponent

package/src/components/message/message.typed.ts

@@ -0,0 +1,18 @@
+import { ReactNode } from 'react';
+
+export type TMessage = {
+  timer?: number
+  $type: string
+  message: string | ReactNode
+  callback?: () => void
+}
+export type TMessageQuestion = {
+  $type: string
+  title: string
+  subtitle: string
+  callback?: () => void
+  buttonSubmit?: string
+  cancelCallback?: () => void
+}
+export type TMessageFunction = ({ timer, $type, message, callback }: TMessage) => void
+export type TMessageQuestionFunction =({ $type, title, subtitle, callback, buttonSubmit }: TMessageQuestion) => void

package/src/components/message/message_question.tsx

@@ -0,0 +1,72 @@
+import { useCallback, useEffect } from 'react';
+import { htmlToText } from 'html-to-text';
+import { useStateWithCallbackLazy } from 'use-state-with-callback';
+import ButtonComponent from '../button/button';
+import TextComponent from '../text/text';
+import { Message, MessageOverlay, MessageContainer, MessageWrapper, MessageContent } from './message.styles'
+import type { TMessageQuestion } from './message.typed'
+
+const MessageQuestionComponent = ({ $type, title, subtitle, callback, buttonSubmit, cancelCallback }: TMessageQuestion) => {
+  const [isOpen, setOpen] = useStateWithCallbackLazy<boolean>(false);
+  const [isOpenContainer, setOpenContainer] = useStateWithCallbackLazy<boolean>(false);
+  const [isClosing, setClosing] = useStateWithCallbackLazy<boolean>(false);
+  
+  const evCloseMessage = useCallback(() => {
+    setClosing(!isClosing, () => {
+      cancelCallback && cancelCallback();
+      const bodyEl = document.getElementsByTagName("BODY")[0] as HTMLBodyElement;
+      bodyEl.classList.remove("is-immuned");
+    })
+  },[cancelCallback, isClosing, setClosing])
+
+  const evConfirmButton = () => {
+    setClosing(!isClosing, () => {
+      const bodyEl = document.getElementsByTagName("BODY")[0] as HTMLBodyElement;
+      bodyEl.classList.remove("is-immuned");
+      callback && callback();
+    })
+  }
+
+  const CloseCallback = useCallback(() => {
+    evCloseMessage();
+  }, [evCloseMessage])
+
+  useEffect(() => {
+    const overlayEl = document.querySelector('._refQuestionMessageOverlay') as HTMLDivElement;
+    if (!isOpen && !isClosing) {
+      setOpen(!isOpen, () => {
+        setTimeout(() => {
+          setOpenContainer(!isOpenContainer, () => {});
+          overlayEl && overlayEl.addEventListener('click', CloseCallback);
+        }, 1);
+      });
+    } else if (isOpen && isClosing) {
+      setOpen(!isOpen, () => {});
+      setOpenContainer(!isOpenContainer, () => {});
+      overlayEl && overlayEl.removeEventListener('click', CloseCallback);
+    }
+  },[isOpen, isOpenContainer, setOpen, setOpenContainer, CloseCallback, isClosing])
+
+  return (
+    <Message $isOpen={isOpen}>
+      <MessageOverlay className='_refQuestionMessageOverlay' $type={$type}></MessageOverlay>
+      <MessageContainer $type={$type}>
+        <MessageWrapper $isOpen={isOpenContainer}>
+          <MessageContent $type={$type}>
+            <i></i>
+            <div>
+              <TextComponent $elipsis={false} style={{ fontWeight: 600, fontSize: '15px' }}>{title}</TextComponent>
+              <TextComponent $color='grey' $elipsis={false}>{htmlToText(subtitle)}</TextComponent>
+              <aside>
+                <ButtonComponent $mode='white' $size='small' onClick={evCloseMessage}>Cancel</ButtonComponent>
+                <ButtonComponent $mode='red' $size='small' onClick={evConfirmButton}>{buttonSubmit || 'Confirm'}</ButtonComponent>
+              </aside>
+            </div>
+          </MessageContent>
+        </MessageWrapper>
+      </MessageContainer>
+    </Message>
+  )
+}
+
+export default MessageQuestionComponent

package/src/components/popup/popup.styles.ts

@@ -0,0 +1,315 @@
+import styled, { css } from 'styled-components';
+import { dropBase } from '../../assets/stylesheets/bases.styles';
+
+type TPopupParam = {
+  $isOpen?: boolean
+  $withHeader?: boolean
+  $mode?: string | null
+  $width?: string | number
+  $height?: string | number
+}
+
+const popupWrapperStyles = css`
+  transform: translate(-50%);
+  top: -100%;
+  left: 50%;
+  background-color: var(--pri-clr-bg);
+  min-width: 100%;
+  max-width: 100%;
+  @media (min-width: 768px) {
+    max-width: 700px;
+    min-width: auto;
+  }
+  @media (min-width: 1024px) {
+    max-width: 1000px;
+  }
+`
+
+const getPopupModifiedStyled = ({ $isOpen }:Pick<TPopupParam, '$isOpen'>) => {
+  if ($isOpen) {
+    return `
+      & ${PopupOverlay}, & ${PopupContainer} {
+        display: block;
+      }
+    `
+  }
+}
+const getPopupWrapperModifiedStyled = ({ $isOpen, $withHeader, $width }:Omit<TPopupParam, '$height' | '$mode'>) => {
+  let style = ``
+  if ($isOpen) {
+    style += `
+      top: 0;
+      transition: top .5s;
+    `
+  }
+  if ($withHeader) {
+    style += `
+      padding-top: 52px;
+    `
+  }
+  if ($width === '1200px') {
+    style += `
+      width: 100%;
+      @media only screen and (min-width: 1024px) {
+        max-width: 1200px;
+        width: 100%;
+      }
+      @media only screen and (min-width: 1366px) {
+        width: ${$width};
+      }
+    ` 
+  }
+  else if ($width) {
+    style += `
+      width: 100%;
+      @media only screen and (min-width: 1024px) {
+        width: ${$width};
+      }
+    `
+  }
+  return style
+}
+const getPopupHeaderWrapperModifiedStyled = ({ $width, $mode, $isOpen }:Pick<TPopupParam, '$width' | '$mode' | '$isOpen'>) => {
+  let style = ``
+  if ($mode === 'question') {
+    style +=`
+      ${PopupHeader} {
+        font-size: 15px;
+        line-height: 18px;
+        padding: 0;
+        margin-bottom: 8px;
+        letter-spacing: normal;
+      }
+      ${PopupFooter} {
+        padding: 12px 0 8px;
+        grid-template-columns: none;
+        aside {
+          &:last-child {
+            justify-content: start;
+          }
+          a { height: 28px; }
+        }
+      }
+      > aside {
+        font-size: 14px;
+        color: var(--hd-clr);
+        line-height: 1.4;
+      }
+    `
+  }
+  else {
+    style += popupWrapperStyles + `
+      position: fixed;
+      z-index: 10;
+      border-bottom: 1px solid var(--sec-clr-ln);
+      button[mode=round-close] {
+        position: absolute; 
+        top: 12px;
+        right: 0px;
+      }
+      @media only screen and (min-width: 768px) {
+        button[mode=round-close] {
+          top: 16px;
+          right: 20px;
+        }
+      }
+    `
+    if ($isOpen) {
+      style += `
+        top: 0;
+        transition: top .5s;
+      `
+    }
+  } 
+
+  if ($width === '1200px') {
+    style += `
+      width: 100%;
+      @media only screen and (min-width: 1024px) {
+        max-width: 1200px;
+        width: 100%;
+      }
+      @media only screen and (min-width: 1366px) {
+        width: ${$width};
+      }
+    ` 
+  }
+  else if ($width) {
+    style += `
+      width: 100%;
+      @media only screen and (min-width: 1024px) {
+        width: ${$width};
+      }
+    `
+  }
+  return style
+}
+const getPopupBodyModifiedStyled = ({ $mode, $height, $width }:Pick<TPopupParam, '$width' | '$mode' | '$height'>) => {
+  let style = ``
+  if ($mode === 'clear') {
+    style += `
+      display: block;
+      padding: 0;
+      @media only screen and (min-width: 768px) {
+        padding: 0;
+      }
+    `
+  }
+  if ($height) {
+    style += `
+      min-height: auto;
+      height: auto;
+      max-height: calc(100vh - 176px);
+      overflow: auto;
+      @media (min-width: 768px) {
+        max-height: ${$height};
+      }
+    `
+  }
+  if ($width === '1200px') {
+    style += `
+      width: 100%;
+      @media only screen and (min-width: 1024px) {
+        max-width: 1200px;
+        width: 100%;
+      }
+      @media only screen and (min-width: 1366px) {
+        width: ${$width};
+      }
+    ` 
+  }
+  else if ($width) {
+    style += `
+        width: 100%;
+        @media only screen and (min-width: 1024px) {
+          width: ${$width};
+        }
+      }
+    `
+  }
+  return style
+}
+
+export const PopupPanel = styled.div<{ $isOpen: boolean }>`
+  ${getPopupModifiedStyled}
+`
+export const PopupOverlay = styled.div`
+  display: none;
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 100;
+  background-color: var(--ov-clr-bg);
+`
+export const PopupContainer = styled.section`
+  display: none;
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  z-index: 101;
+  overflow: auto;
+`
+export const PopupWrapper = styled.section<{ $width?: string | number, $isOpen: boolean,  $withHeader?: boolean }>`
+  ${dropBase}
+  ${popupWrapperStyles}
+  height: auto;
+  overflow: hidden;
+  transition: top .5s;
+  width: auto;
+  padding: 0;
+  position: relative;
+  display: inline-grid;
+  grid-auto-flow: row;
+  margin-bottom: 52px;
+  border: none;
+  border-radius: 0 0px 10px 10px;
+  ${getPopupWrapperModifiedStyled}
+`
+export const PopupHeaderWrapper = styled.div<{ $width?: string | number, $mode?: string | null , $isOpen?: boolean }>`
+  ${getPopupHeaderWrapperModifiedStyled}
+`
+export const PopupHeader = styled.h3`
+  font-size: 16px;
+  padding: 11px 10px;
+  color: var(--hd-clr);
+  i[data-tip] {
+    &:before { 
+      display: inline-block; 
+    }
+  }
+  @media only screen and (min-width: 768px) {
+    font-size: 20px;
+    padding: 11px 30px;
+  }
+`
+export const PopupBody = styled.div<{ $mode?: string | null, $width?: string | number, $height?: string | number }>`
+  display: inline-grid;
+  justify-content: normal;
+  align-content: start;
+  padding: 20px 10px;
+  grid-gap: 1em;
+  min-height: 5vh;
+  max-height: calc(100vh - 170px);
+  height: auto;
+  overflow: auto;
+  overflow-x: hidden;
+  border-bottom: 1px solid var(--sec-clr-ln);
+  @media only screen and (min-width: 768px) {
+    padding: 20px 30px;
+  }
+  ${getPopupBodyModifiedStyled}
+`
+export const PopupFooter = styled.div<{ $isLeft?: boolean }>`
+  display: inline-grid;
+  grid-auto-flow: column;
+  grid-template-columns: min-content auto;
+  background-color: var(--pri-clr-bg);
+  padding: 15px 30px;
+  aside {
+    display: grid;
+    grid-auto-flow: column;
+    grid-gap: 8px;
+    &:first-child {
+      justify-content: start;
+      align-items: center;
+    }
+    &:last-child {
+      justify-content: end;
+      @media only screen and (max-width: 767px) {
+        &[data-type="shipping"] {
+          grid-template-columns: 1fr 1fr;
+          grid-template-rows: 1fr 1fr;
+          > button {
+            width: max-content;
+          }
+        }
+      }
+    }
+  }
+  ${({ $isLeft }: { $isLeft?: boolean }) => {
+    if ($isLeft) {
+      return css` 
+        grid-template-columns: 40% 60%;
+      `
+    }
+  }}
+`
+export const PopupQuestionWrapper = styled.section<{ $width?: string | number }>`
+  padding: 20px 24px;
+  display: grid;
+  grid-auto-flow: column;
+  grid-template-columns: 30px auto;
+  grid-gap: 20px;
+  align-content: start;
+  ${({ $width }: { $width?: string | number }) => {
+    if ($width) {
+      return css` 
+        max-width: ${$width};
+      `
+    }
+  }}  
+`