@digigov/nextjs 0.6.7 → 0.6.8

package/CHANGELOG.md

@@ -1,6 +1,11 @@
 # Change Log - @digigov/nextjs
 
-This log was last generated on Fri, 02 Dec 2022 11:20:56 GMT and should not be manually modified.
+This log was last generated on Mon, 16 Jan 2023 13:05:21 GMT and should not be manually modified.
+
+## 0.6.8
+Mon, 16 Jan 2023 13:05:21 GMT
+
+_Version update only_
 
 ## 0.6.7
 Fri, 02 Dec 2022 11:20:56 GMT

package/esm/index.js

@@ -1,4 +1,4 @@
-/** @license Digigov v0.6.7
+/** @license Digigov v0.6.8
  *
  * This source code is licensed under the BSD-2-Clause license found in the
  * LICENSE file in the root directory of this source tree.

package/libs-ui/react-core/src/Base/index.d.ts

@@ -13,25 +13,25 @@ declare type PolymorphicRef<C extends React.ElementType> = React.ComponentPropsW
  */
 export declare type BaseProps<C extends React.ElementType> = PolymorphicComponentPropWithRef<C, {
     /** margin is optional. It has not a default value. */
-    margin?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
+    margin?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
     /** marginTop is optional. It has not a default value. */
-    marginTop?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
+    marginTop?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
     /** marginBottom is optional. It has not a default value. */
-    marginBottom?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
+    marginBottom?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
     /** marginLeft is optional. It has not a default value. */
-    marginLeft?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
+    marginLeft?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
     /** marginRight is optional. It has not a default value. */
-    marginRight?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
+    marginRight?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
     /** padding is optional. It has not a default value. */
-    padding?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
+    padding?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
     /** paddingTop is optional. It has not a default value. */
-    paddingTop?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
+    paddingTop?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
     /** paddingBottom is optional. It has not a default value. */
-    paddingBottom?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
+    paddingBottom?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
     /** paddingLeft is optional. It has not a default value. */
-    paddingLeft?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
+    paddingLeft?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
     /** paddingRight is optional. It has not a default value. */
-    paddingRight?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
+    paddingRight?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
     /**  printHidden is optional. Default value is false. When true, the component is hidden at print. */
     printHidden?: boolean;
 }>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@digigov/nextjs",
-	"version": "0.6.7",
+	"version": "0.6.8",
 	"description": "next specific utilities for @digigov apps",
 	"author": "GRNET Developers <devs@lists.grnet.gr>",
 	"license": "BSD-2-Clause",
@@ -10,7 +10,7 @@
 		"main": "dist/index.js"
 	},
 	"peerDependencies": {
-		"@digigov/ui": "0.28.3",
+		"@digigov/ui": "0.29.0",
 		"@material-ui/core": "4.11.3",
 		"@material-ui/icons": "4.11.2",
 		"clsx": "1.1.1",

package/src/App.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import App from 'next/app';
+import Head from 'next/head';
+import { LinkProvider } from '@digigov/ui/core/Link';
+import NextLink from '@digigov/nextjs/Link';
+import dynamic from 'next/dynamic';
+import type { AppProps } from '@digigov/ui/app/App';
+import { I18NProvider } from '@digigov/ui/app/i18n';
+import { withTranslation, WithTranslation } from 'react-i18next';
+import { i18n } from 'i18next';
+
+const DigiGOVApp = dynamic(() => import('@digigov/ui/app/App'), {
+  ssr: false,
+}) as React.FC<AppProps>;
+export interface DigiGOVNextAppProps extends AppProps, WithTranslation {
+  children?: React.ReactNode;
+  t: (string) => string;
+  i18n: i18n;
+}
+class DigiGOVNextApp extends App<DigiGOVNextAppProps> {
+  componentDidMount(): void {
+    // Remove the server-side injected CSS.
+    const jssStyles = document.querySelector('#jss-server-side');
+    if (jssStyles && jssStyles.parentElement) {
+      jssStyles.parentElement.removeChild(jssStyles);
+    }
+    this.updateHtmlLang();
+  }
+
+  componentDidUpdate(): void {
+    this.updateHtmlLang();
+  }
+
+  updateHtmlLang(): void {
+    document.documentElement.lang = this.props.i18n.language;
+  }
+
+  render(): React.ReactElement {
+    const { Component, pageProps, t, i18n } = this.props;
+    return (
+      <I18NProvider
+        t={(str) => (typeof str === 'string' ? t(str) : str)}
+        i18n={i18n}
+      >
+        <LinkProvider component={NextLink}>
+          <Head>
+            <meta
+              name="viewport"
+              content="minimum-scale=1, initial-scale=1, width=device-width"
+            />
+          </Head>
+          <DigiGOVApp>
+            <Component {...pageProps} />
+          </DigiGOVApp>
+        </LinkProvider>
+      </I18NProvider>
+    );
+  }
+}
+const DigiGOVNextAppWithTranslation = withTranslation()(DigiGOVNextApp);
+export default DigiGOVNextAppWithTranslation;

package/src/Document.tsx

@@ -0,0 +1,73 @@
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+import React from 'react';
+import Document, { Html, Head, Main, NextScript } from 'next/document';
+
+export function Fonts() {
+  return (
+    <>
+      <link
+        rel="stylesheet"
+        href="https://fonts.googleapis.com/icon?family=Material+Icons"
+      />
+      <link
+        rel="stylesheet"
+        href="https://fonts.googleapis.com/css?family=Roboto:300,400,500"
+      />
+    </>
+  );
+}
+export default class DigiGOVDocument extends Document {
+  render() {
+    return (
+      <Html>
+        <Head>
+          <script
+            type="text/javascript"
+            dangerouslySetInnerHTML={{
+              __html: `if (window.document.documentMode) alert('Internet Explorer is not supported. Please use a modern browser!');
+`,
+            }}
+          ></script>
+          {/* PWA primary color */}
+          <Fonts />
+        </Head>
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    );
+  }
+}
+
+DigiGOVDocument.getInitialProps = async (ctx) => {
+  // Resolution order
+  //
+  // On the server:
+  // 1. app.getInitialProps
+  // 2. page.getInitialProps
+  // 3. document.getInitialProps
+  // 4. app.render
+  // 5. page.render
+  // 6. document.render
+  //
+  // On the server with error:
+  // 1. document.getInitialProps
+  // 2. app.render
+  // 3. page.render
+  // 4. document.render
+  //
+  // On the client
+  // 1. app.getInitialProps
+  // 2. page.getInitialProps
+  // 3. app.render
+  // 4. page.render
+
+  // Render app and page and get the context of the page with collected side effects.
+  const initialProps = await Document.getInitialProps(ctx);
+
+  return {
+    ...initialProps,
+    // Styles fragment is rendered after the app and page rendering finish.
+  };
+};

package/src/Image.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import NextImage, { ImageProps } from 'next/image';
+import { useBasePath } from '@digigov/nextjs/hooks';
+
+const Image: React.FC<ImageProps> = ({ src, ...rest }) => {
+  const basePathSrc = useBasePath(src);
+  return <NextImage src={basePathSrc} {...rest} />;
+};
+
+export default Image;

package/src/Link.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { LinkProps } from '@digigov/ui/core/Link';
+import Link from 'next/link';
+import LinkBase from '@digigov/react-core/LinkBase';
+
+const NextLink: React.ForwardRefRenderFunction<HTMLAnchorElement, LinkProps> = (
+  props,
+  ref
+) => {
+  const { href, ...other } = props;
+  const isExternalLink =
+    //check if url has a file extension
+    /^(?:[a-z]+:)?\/\/|.pdf|.docx?|.xlsx?/i.test(href || '') ||
+    // or if props has a target or rel
+    other.target === '_blank';
+
+  if (isExternalLink) {
+    return (
+      <LinkBase ref={ref} href={href || '#'} {...other}>
+        {props.children}
+      </LinkBase>
+    );
+  }
+  return (
+    <Link href={href || '#'} {...other}>
+      <LinkBase ref={ref} {...other}>
+        {props.children}
+      </LinkBase>
+    </Link>
+  );
+};
+
+export default React.forwardRef(NextLink);

package/src/hooks.ts

@@ -0,0 +1,6 @@
+import { useRouter } from 'next/router';
+
+export function useBasePath(src: string): string {
+  const router = useRouter();
+  return router.basePath + src;
+}

package/src/i18n.tsx

@@ -0,0 +1,18 @@
+import i18n, { Resource, TFunction } from 'i18next';
+import { initReactI18next } from 'react-i18next';
+
+export default function initI18n(
+  resources: Resource,
+  language = 'el'
+): Promise<TFunction> {
+  return i18n
+    .use(initReactI18next) // passes i18n down to react-i18next
+    .init({
+      resources: resources,
+      lng: language,
+      keySeparator: '.', // we use keys in form messages.welcome
+      interpolation: {
+        escapeValue: false, // react already safes from xss
+      },
+    });
+}