@autobusal/providers 1.0.0 → 1.0.2

package/Notifications/Notifications.tsx

@@ -0,0 +1,56 @@
+import { Toaster } from 'react-hot-toast';
+import useSystemTheme from '../Styles/hooks/useSystemTheme';
+import { GetSettings } from '../services';
+
+interface Props {
+  children: JSX.Element
+}
+
+export const Provider = ({ children }: Props): JSX.Element => {
+  const { data } = GetSettings();
+
+  const mode = useSystemTheme();
+
+  const ourTheme: any = data.colors[mode as keyof typeof data.colors];
+
+  return (
+    <>
+      { children }
+
+      <Toaster
+        position="top-right"
+        gutter={ 12 }
+        toastOptions={{
+          style: {
+            padding: '6px 10px',
+            fontSize: data.theme.size.xs,
+            color: ourTheme.font.normal,
+            fontWeight: '700',
+            background: ourTheme.background.normal,
+            borderRadius: ourTheme.borderRadius,
+            boxShadow: ourTheme.boxShadow
+          },
+
+          success: {
+            style: {
+              background: ourTheme.font.success,
+              color: '#FFFFFF'
+            }
+          },
+
+          error: {
+            style: {
+              background: ourTheme.font.error,
+              color: '#FFFFFF'
+            }
+          }
+        }}
+        containerStyle={{
+          top: '70px'
+        }}
+      />
+    </>
+  );
+};
+
+export default Provider;

package/Providers.tsx

@@ -0,0 +1,27 @@
+import { Suspense } from 'react';
+import Queries from './Queries/Queries';
+import Styles from './Styles/Styles';
+import Notifications from './Notifications/Notifications';
+import Setup from './Setup/Setup';
+
+interface Props {
+  type: 'normal' | 'whitelabel'
+  loading: JSX.Element
+  children: JSX.Element
+}
+
+const Providers = ({ type, loading, children }: Props): JSX.Element => (
+  <Queries>
+    <Styles>
+      <Notifications>
+        <Setup type={ type }>
+          <Suspense fallback={ loading }>
+            { children }
+          </Suspense>
+        </Setup>
+      </Notifications>
+    </Styles>
+  </Queries>
+);
+
+export default Providers;

package/Queries/Queries.tsx

@@ -0,0 +1,22 @@
+import { QueryClientProvider, QueryClient } from '@tanstack/react-query';
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      refetchOnWindowFocus: false,
+      retry: false
+    }
+  }
+});
+
+interface Props {
+  children: JSX.Element
+}
+
+const Queries = ({ children }: Props): JSX.Element => (
+  <QueryClientProvider client={ queryClient }>
+    { children }
+  </QueryClientProvider>
+);
+
+export default Queries;

package/Queries/apiClient.ts

@@ -0,0 +1,49 @@
+import axios from 'axios';
+// import i18next from 'i18next';
+// import { error } from '@utilities/notify';
+
+const apiClient = axios.create({
+  baseURL: import.meta.env.VITE_API_OBT,
+  withCredentials: true
+});
+
+apiClient.interceptors.request.use(
+  config => {
+//   //   const token = localStorage.getItem('token');
+
+//   //   if (token !== null) {
+//   //     config.headers.Authorization = token;
+//   //   }
+
+    return config;
+  }
+);
+
+apiClient.interceptors.response.use(response => (
+  response
+), err => {
+  console.log(err.response);
+
+//   if (err.response) {
+//   // if we have a 401, we go to the logout page
+//   // if (err.response.status === 401) {
+//   //   alert(401);
+//   // }
+
+//     // @todo: how to handle 404?
+
+//     // if we have a 422 error, we display the message
+//     if (err.response.status === 422) {
+//       error(err.response.data.message);
+//     }
+//   } else if (err.request) {
+//     // if we have a 500 error, we display an error message
+//     error(i18next.t('server_error', { ns: 'general' }))
+//   } else {
+//     console.log('ERROR', err.message);
+//   }
+
+  return err;
+});
+
+export default apiClient;

package/Setup/Preload.tsx

@@ -0,0 +1,39 @@
+import { Helmet } from 'react-helmet';
+import { SettingsData } from '../types';
+
+interface Props {
+  data: SettingsData
+  children: JSX.Element
+}
+
+// @todo: De adaugat din tema Favicons
+const Preload = ({ data, children }: Props): JSX.Element => {
+  // we arrange the font family names before inserting them
+  const fontTitle = data.theme.fontFamily.title.replace(/\ /g, '+');
+  const fontContent = data.theme.fontFamily.content.replace(/\ /g, '+');
+
+  return (
+    <>
+      <Helmet>
+        <title>{ data.preferences.company }</title>
+
+        {/* <!-- Favicons --> */}
+        {/* <link rel="apple-touch-icon" sizes="180x180" href="/favicons/apple-touch-icon.png" /> */}
+        {/* <link rel="icon" type="image/png" sizes="32x32" href="/favicons/favicon-32x32.png" /> */}
+        {/* <link rel="icon" type="image/png" sizes="16x16" href="/favicons/favicon-16x16.png" /> */}
+        {/* <link rel="manifest" href="/favicons/site.webmanifest" /> */}
+        {/* <link rel="mask-icon" href="/favicons/safari-pinned-tab.svg" color="#5bbad5" /> */}
+        {/* <link rel="shortcut icon" href="/favicons/favicon.ico" /> */}
+        {/* <meta name="msapplication-TileColor" content="#ffffff" /> */}
+        {/* <meta name="msapplication-config" content="/favicons/browserconfig.xml" /> */}
+        {/* <meta name="theme-color" content="#ffffff" /> */}
+
+        <link href={ `https://fonts.googleapis.com/css2?family=${ fontTitle }:wght@700&family=${ fontContent }:wght@300;400;700&display=swap` } rel="stylesheet" />
+      </Helmet>
+
+      { children }
+    </>
+  );
+};
+
+export default Preload;

package/Setup/Setup.tsx

@@ -0,0 +1,25 @@
+import Preload from './Preload';
+import languages from './utilities/languages';
+import analytics from './utilities/analytics';
+import { GetSettings } from '../services';
+
+interface Props {
+  type: 'normal' | 'whitelabel'
+  children: JSX.Element
+}
+
+const Setup = ({ type, children }: Props): JSX.Element => {
+  const { data } = GetSettings();
+
+  languages(type, data.preferences.languages.default);
+
+  analytics(data.preferences.googleAnalyticsID);
+
+  return (
+    <Preload data={ data }>
+      { children }
+    </Preload>
+  );
+};
+
+export default Setup;

package/Setup/utilities/analytics.ts

@@ -0,0 +1,9 @@
+import ReactGA from 'react-ga4';
+
+const analytics = (id: string | null): void => {
+  if (id !== null) {
+    ReactGA.initialize(id);
+  }
+};
+
+export default analytics;

package/Setup/utilities/languages.ts

@@ -0,0 +1,25 @@
+import i18next from 'i18next';
+import Backend from 'i18next-http-backend';
+import { initReactI18next } from 'react-i18next';
+
+const languages = (type: string, defaultLanguage: string): void => {
+  const currentLanguage = localStorage.getItem('language');
+
+  i18next
+    .use(Backend)
+    .use(initReactI18next)
+    .init({
+      interpolation: {
+        escapeValue: false
+      },
+      lng: currentLanguage ?? defaultLanguage,
+      fallbackLng: defaultLanguage,
+      debug: true,
+      backend: {
+        loadPath: `${ import.meta.env.VITE_API_OBT }/languages/${ type }/{{lng}}/{{ns}}.json`
+      },
+      ns: 'general'
+    });
+};
+
+export default languages;

package/Styles/GlobalStyles.ts

@@ -0,0 +1,112 @@
+import { createGlobalStyle } from 'styled-components';
+
+const GlobalStyles = createGlobalStyle`
+  * {
+    outline: none;
+    box-sizing: border-box;
+  }
+
+  html {
+    height: 100%;
+    font-family: sans-serif;
+    -webkit-text-size-adjust: 100%;
+    -ms-text-size-adjust: 100%;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  }
+
+  body {
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    font-family: '${props => props.theme.fontFamily.content}', sans-serif;
+    color: ${ props => props.theme.font.normal };
+    font-size: ${ props => props.theme.size.m };
+    line-height: ${ props => props.theme.lineHeight.content };
+    background: ${ props => props.theme.background.normal };
+  }
+
+  #root {
+    width: 100%;
+    height: 100%;
+  }
+  
+  a {
+    color: ${ props => props.theme.font.normal };
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+  
+  button {
+    all: unset;
+    box-sizing: border-box;
+    cursor: pointer;
+  }
+
+  h1, h2, h3, h4, h5, h6 {
+    display: block;
+    margin: 0 0 20px 0;
+    padding: 0;
+    font-weight: 700;
+    line-height: ${ props => props.theme.lineHeight.title };
+    font-family: ${ props => props.theme.fontFamily.title };
+  }
+  
+  h1 {
+    font-size: ${ props => props.theme.size.xxl };
+  }
+  h2, h3 {
+    font-size: ${ props => props.theme.size.xl };
+  }
+  h4, h5, h6 {
+    font-size: ${ props => props.theme.size.l };
+  }
+
+  input[type='text'], input[type='number'], input[type='email'], input[type='password'], textarea, select {
+    display: block;
+    width: 100%;
+    height: 38px;
+    padding: 0 10px;
+    font-size: ${ props => props.theme.size.m };
+    font-weight: 700;
+    color: ${ props => props.theme.font.normal };
+    background: ${ props => props.theme.background.normal };
+    border: 1px solid ${ props => props.theme.font.faded };
+    border-radius: ${ props => props.theme.borderRadius };
+    -webkit-appearance: none;
+  }
+
+  input[type='checkbox'] {
+    -webkit-appearance: checkbox;
+  }
+
+  input[type='radio'] {
+    display: inline-block;
+    margin-right: 5px;
+    -webkit-appearance: radio;
+  }
+
+  select {
+    padding: 0 10px;
+    font-size: ${ props => props.theme.size.m };
+  }
+
+  textarea {
+    min-height: 120px;
+    resize: vertical;
+    padding: 10px;
+    font-family: '${props => props.theme.fontFamily.content}', sans-serif;
+    font-size: ${ props => props.theme.size.s };
+    line-height: ${ props => props.theme.lineHeight.title };
+    font-weight: 700;
+  }
+
+  p {
+    padding: 0;
+    margin: 0;
+  }
+`;
+
+export default GlobalStyles;

package/Styles/Styles.tsx

@@ -0,0 +1,24 @@
+import { ThemeProvider } from 'styled-components';
+import useSystemTheme from './hooks/useSystemTheme';
+import GlobalStyles from './GlobalStyles';
+import { GetSettings } from '../services';
+
+interface Props {
+  children: JSX.Element
+}
+
+const Styles = ({ children }: Props): JSX.Element => {
+  const { data } = GetSettings();
+
+  const mode = useSystemTheme();
+
+  return (
+    <ThemeProvider theme={ { ...data.colors[mode as keyof typeof data.colors], ...data.theme } }>
+      <GlobalStyles />
+
+      { children }
+    </ThemeProvider>
+  );
+};
+
+export default Styles;

package/Styles/hooks/useSystemTheme.ts

@@ -0,0 +1,18 @@
+import { useState, useEffect } from 'react';
+
+const useSystemTheme = (): string => {
+  const queryDarkMode = window.matchMedia("(prefers-color-scheme: dark)");
+
+  const [ theme, setTheme ] = useState<string>(queryDarkMode.matches ? 'dark' : 'light');
+
+  // setup a listener to respond to future changes of the system theme
+  useEffect(() => {
+    queryDarkMode.addEventListener('change', (event: MediaQueryListEvent) => {
+      setTheme(event.matches ? 'dark' : 'light');
+    })
+  });
+
+  return theme;
+};
+
+export default useSystemTheme;

package/index.ts

@@ -1 +1,8 @@
-alert('Hello World');
+import Providers from './Providers';
+import apiClient from './Queries/apiClient';
+
+export {
+  apiClient
+};
+
+export default Providers;

package/package.json

@@ -1,5 +1,17 @@
 {
   "name": "@autobusal/providers",
-  "version": "1.0.0",
-  "type": "module"
-}
+  "version": "1.0.2",
+  "type": "module",
+  "main": "index.ts",
+  "dependencies": {
+    "@tanstack/react-query": "^5.0.5",
+    "axios": "^1.5.1",
+    "i18next": "^23.6.0",
+    "i18next-http-backend": "^2.2.2",
+    "react-ga4": "^2.1.0",
+    "react-helmet": "^6.1.0",
+    "react-hot-toast": "^2.4.1",
+    "react-i18next": "^13.3.1",
+    "styled-components": "^6.1.0"
+  }
+}

package/services.ts

@@ -0,0 +1,18 @@
+import { useSuspenseQuery, UseSuspenseQueryResult } from '@tanstack/react-query';
+import apiClient from './Queries/apiClient';
+import { SettingsData } from './types';
+
+export const GetSettings = (): UseSuspenseQueryResult<SettingsData> => (
+  useSuspenseQuery({
+    queryKey: ['get-settings'],
+    queryFn: async () => (
+      await apiClient
+        .get('/api/settings/get')
+        .then(response => (
+          response.data
+        ))
+        .catch(() => {})
+    ),
+    staleTime: Infinity
+  })
+);

package/types.ts

@@ -0,0 +1,25 @@
+export interface SettingsData {
+  preferences: {
+    company: string
+    logo: string
+
+    googleAnalyticsID: string | null
+
+    languages: {
+      available: string[]
+      default: string
+    }
+  }
+
+  theme: {
+    fontFamily: any
+    lineHeight: any
+    size: any
+    borderRadius: string
+  }
+
+  colors: {
+    light: any
+    dark: any
+  }
+}