@autobusal/common 0.0.1 → 0.0.3

package/Button/Button.tsx

@@ -0,0 +1,28 @@
+import { RiLoader2Fill } from 'react-icons/ri';
+import { ButtonStyled } from './styles';
+
+interface Props {
+  type?: 'button' | 'submit'
+  size?: 'medium' | 'small'
+  loading?: boolean
+  active?: boolean
+  subtype?: 'secondary' | 'delete'
+  text: string | JSX.Element
+  noMargin?: boolean
+  maxWidth?: number
+  onClick?: any
+}
+
+export const Button = ({ type, size, loading, active, subtype, text, noMargin, maxWidth, onClick }: Props) => (
+  <ButtonStyled
+    $size={ size }
+    type={ loading ? 'button' : type }
+    $active={ active ?? true }
+    $subtype={ subtype }
+    $margin={ noMargin ? false : true }
+    $maxWidth={ maxWidth }
+    onClick={ onClick }
+  >
+    { loading ? <RiLoader2Fill /> : text }
+  </ButtonStyled>
+);

package/Button/styles.ts

@@ -0,0 +1,71 @@
+import styled, { css } from 'styled-components';
+
+interface ButtonType {
+  $size?: 'medium' | 'small'
+  $active: boolean
+  $subtype?: 'secondary' | 'delete'
+  $margin: boolean
+  $maxWidth?: number
+}
+
+export const ButtonStyled = styled.button<ButtonType>`
+  display: flex;
+  gap: 6px;
+  height: 38px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  ${ props => props.$margin && css`
+    margin-top: 12px;
+  ` }
+  align-items: center;
+  justify-content: center;
+  padding: 0 20px;
+  font-weight: 700;
+  background: ${ props => props.theme.primary.normal };
+  border: 1px solid ${ props => props.theme.primary.normal };
+  border-radius: 100px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+
+  ${ props => props.$size === 'medium' && css`
+    height: 32px;
+  ` }
+
+  ${ props => props.$size === 'small' && css`
+    height: 26px;
+    padding: 0 10px;
+    font-size: calc(${ props => props.theme.size.xs } + 1px);
+  ` }
+
+  ${ props => props.$active === false && css`
+    opacity: .6;
+  ` }
+
+  ${ props => props.$subtype === 'secondary' && css`
+    background: ${ props => props.theme.forground.neutral };
+    border: 1px solid ${ props => props.theme.foreground.neutral };
+
+    &:hover {
+      box-shadow: 0 4px 15px ${ props => props.theme.foreground.neutral } !important;
+    }
+  `  }
+
+  ${ props => props.$subtype === 'delete' && css`
+    color: #FFF;
+    background: ${ props => props.theme.font.error };
+    border: 1px solid ${ props => props.theme.font.error };
+
+    &:hover {
+      box-shadow: 0 4px 15px ${ props => props.theme.font.error } !important;
+    }
+  ` }
+
+  ${ props => props.$maxWidth && css<ButtonType>`
+    max-width: ${ props => props.$maxWidth }px;
+  ` }
+
+  &:hover {
+    box-shadow: 0 4px 15px ${ props => props.theme.primary.normal };
+  }
+`;

package/CookieNotification/CookieNotification.tsx

@@ -0,0 +1,41 @@
+import { useState } from 'react';
+import { TFunction } from 'i18next';
+import { Button } from '../Button/Button';
+import { Container, Info } from './styles';
+
+interface Props {
+  t: TFunction<'common'>
+}
+
+const CookieNotification = ({ t }: Props): (JSX.Element | null) => {
+  const status = document.cookie.indexOf('CookieNotification=viewed') == -1;
+
+  const [ show, setShow ] = useState<boolean>(status);
+
+  const onClick = (): void => {
+    setShow(false);
+
+    const CookieDate = new Date();
+    CookieDate.setFullYear(CookieDate.getFullYear() + 1);
+
+    document.cookie = 'AutobusCookieNotification=viewed; expires=' + CookieDate.toUTCString() + "; path=/; SameSite=None; Secure";
+  };
+
+  if (! show) {
+    return null;
+  }
+
+  return (
+    <Container>
+      <Info>{ t('cookies.content', { ns: 'common' }) }</Info>
+
+      <Button
+        type="button"
+        size="medium"
+        text={ t('cookies.agree', { ns: 'common' }) }
+        onClick={ onClick } />
+    </Container>
+  );
+};
+
+export default CookieNotification;

package/CookieNotification/styles.ts

@@ -0,0 +1,17 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+  position: fixed;
+  bottom: 20px;
+  left: 4%;
+  z-index: 500;
+  width: 92%;
+  padding: 15px;
+  background-color: ${ props => props.theme.foreground.normal };
+  box-shadow: ${ props => props.theme.boxShadow };
+  border-radius: ${ props => props.theme.borderRadius };
+`;
+
+export const Info = styled.div`
+  font-weight: 700;
+`;

package/index.ts

@@ -1,5 +1,7 @@
+import CookieNotification from './CookieNotification/CookieNotification';
 import Meta from './Meta';
 
 export {
+  CookieNotification,
   Meta
 };

package/package.json

@@ -1,9 +1,13 @@
 {
   "name": "@autobusal/common",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "type": "module",
   "main": "index.ts",
   "dependencies": {
-    "react-helmet": "^6.1.0"
+    "i18next": "^23.7.18",
+    "react": "^18.2.0",
+    "react-helmet": "^6.1.0",
+    "react-icons": "^5.0.1",
+    "styled-components": "^6.1.8"
   }
 }