@autobusal/common 0.0.7 → 0.0.9

package/ChangeLanguage/ChangeLanguage.tsx

@@ -30,15 +30,15 @@ const ChangeLanguage = ({ type, t, i18n, onClose }: Props): JSX.Element => {
 
   const available = data.preferences.languages.available;
 
-  const items = available.map(item => (
-    <ButtonChange onClick={ () => onChange(item) }>
+  const items = available.map((item, index) => (
+    <ButtonChange key={ index } onClick={ () => onChange(item) }>
       <IoGlobeOutline />
       { `${ t('languages.change', { ns: 'common' }) } ${ t(`languages.${ item }`, { ns: 'common' }) }` }
     </ButtonChange>
   ));
 
   return (
-    <Container ref={ ref } $type={ type } $languages={ available.length }>
+    <Container ref={ ref } className="change-language" $type={ type } $languages={ available.length }>
       <Title>{ t('languages.title', { ns: 'common' }) }</Title>
 
       <ContainerButtons>

package/ChangeLanguage/styles.ts

@@ -1,4 +1,4 @@
-import styled, { css } from 'styled-components';
+import styled from 'styled-components';
 
 export const Container = styled.div<{
   $type: 'top' | 'bottom'
@@ -6,19 +6,12 @@ export const Container = styled.div<{
 }>`
   position: absolute;
   bottom: calc((-1 * ${ props => props.$languages } * 27px) - 50px - 8px);
-  left: 0;
+  right: 0;
   z-index: 101;
-  width: 200px;
   padding: 10px;
   background-color: ${ props => props.theme.background.normal };
   box-shadow: ${ props => props.theme.boxShadow };
   border-radius: ${ props => props.theme.borderRadius };
-
-// //   // @todo: de verificat in private
-// //   ${ props => props.$type === 'bottom' && css`
-// //     // top: auto;
-// //     // bottom: 30px;
-// //   ` }
 `;
 
 export const Title = styled.h5`

package/Loading/Loading.tsx

@@ -0,0 +1,56 @@
+import { SpinnerRoundFilled, SpinnerCircularFixed } from 'spinners-react';
+import { useSystemTheme } from '@autobusal/providers';
+import Skeleton from 'react-loading-skeleton';
+import { ContainerGeneral
+  // , ContainerInline
+  , ContainerParagraph } from './styles';
+import 'react-loading-skeleton/dist/skeleton.css';
+
+export const General = (): JSX.Element => {
+  const theme = useSystemTheme();
+
+  const options = {
+    speed: 75,
+    thickness: 120,
+    color: (theme === 'light' ? '#CECECE' : '#F2F2F2'),
+    size: '40px'
+  };
+
+  return (
+    <ContainerGeneral>
+      { import.meta.env.VITE_APP_TYPE === 'normal'
+        ? <SpinnerRoundFilled size={ options.size } color={ options.color } speed={ options.speed } thickness={ options.thickness } />
+        : <SpinnerCircularFixed size={ options.size } color={ options.color } speed={ options.speed } thickness={ options.thickness } />
+      }
+    </ContainerGeneral>
+  )
+};
+
+// interface InlineProps {
+//   text: string
+// }
+
+// export const Inline = ({ text }: InlineProps): JSX.Element => (
+//   <ContainerInline>
+//     <SpinnerRoundFilled
+//       size="30px"
+//       color="#FBC02D"
+//       speed={ 75 }
+//       thickness={ 120 }
+//     />
+
+//     { text }
+//   </ContainerInline>
+// );
+
+interface ParagraphProps {
+  count?: number
+}
+
+export const Paragraph = ({ count = 3 }: ParagraphProps): JSX.Element => (
+  <ContainerParagraph>
+    <Skeleton count={ count - 1 } /> <br />
+    <Skeleton count={ count + 1 } /> <br />
+    <Skeleton count={ count } />
+  </ContainerParagraph>
+);

package/Loading/styles.ts

@@ -0,0 +1,22 @@
+import styled from 'styled-components';
+
+export const ContainerGeneral = styled.div`
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+// export const ContainerInline = styled.div`
+//   display: flex;
+//   gap: 10px;
+//   align-items: center;
+//   justify-content: center;
+//   font-size: ${ props => props.theme.size.info };
+//   color: ${ props => props.theme.faded };
+// `;
+
+export const ContainerParagraph = styled.div`
+  padding: 15px 0;
+`;

package/Modal/Modal.tsx

@@ -0,0 +1,37 @@
+import { AiOutlineClose } from 'react-icons/ai';
+import { useOverflow } from '@autobusal/hooks';
+import { Paragraph } from '../index';
+import { Background, Container, Title, ButtonClose } from './styles';
+
+interface Props {
+  loading?: boolean
+  width: number
+  title: string
+  content: JSX.Element
+  onClose: () => void
+}
+
+const Modal = ({ loading, width, title, content, onClose }: Props): JSX.Element => {
+  // hide the scroll
+  useOverflow();
+
+  return (
+    <>
+      <Background />
+
+      <Container className="box" $width={ width }>
+        <Title>
+          <h1>{ title }</h1>
+
+          <ButtonClose type="button" onClick={ onClose }>
+            <AiOutlineClose />
+          </ButtonClose>
+        </Title>
+
+        { loading ? <Paragraph /> : content }
+      </Container>
+    </>
+  );
+};
+
+export default Modal;

package/Modal/styles.ts

@@ -0,0 +1,49 @@
+import styled from 'styled-components';
+
+export const Background = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 1002;
+  width: 100%;
+  height: 100%;
+  background-color: ${ props => props.theme.menu.transparent };
+  backdrop-filter: blur(25px);
+  -webkit-backdrop-filter: blur(25px);
+`;
+
+export const Container = styled.div<{ $width: number }>`
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  z-index: 1003;
+  width: 90%;
+  max-width: ${ props => props.$width }px;
+  max-height: 80%;
+  overflow-y: auto;
+  padding: 15px;
+  text-align: left;
+  border-top: 4px solid $yellow;
+  transform: translate(-50%, -50%);
+`;
+
+export const Title = styled.div`
+  display: flex;
+  margin-bottom: 15px;
+
+  & > h1 {
+    margin: 0;
+  }
+`;
+
+export const ButtonClose = styled.button`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 26px;
+  height: 26px;
+  margin-left: auto;
+  font-size: ${ props => props.theme.size.m };
+  background: ${ props => props.theme.primary.neutral };
+  border-radius: 100px;
+`;

package/index.ts

@@ -1,11 +1,14 @@
 import CookieNotification from './CookieNotification/CookieNotification';
 import ChangeLanguage from './ChangeLanguage/ChangeLanguage';
 import { Button } from './Button/Button';
+import { General, Paragraph } from './Loading/Loading';
 import Meta from './Meta';
 
 export {
   Button,
   CookieNotification,
   ChangeLanguage,
-  Meta
+  General,
+  Meta,
+  Paragraph
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@autobusal/common",
-  "version": "0.0.7",
+  "version": "0.0.9",
   "type": "module",
   "main": "index.ts",
   "dependencies": {