Tooltip component: I18nLink component: I18nBtnChangeLocale component:onClick event for instance. You\'ll need to find workarounds for this kinds of things.I18nBtnChangeLocale is a great example of that. No props, but changes the language for the whole app anyway, it\'s quite a powerful integration and very simple to use.\n void;
}
diff --git a/src/components/i18n/I18nLink.tsx b/src/components/i18n/I18nLink.tsx
index 539267242..d6ebdb2a7 100644
--- a/src/components/i18n/I18nLink.tsx
+++ b/src/components/i18n/I18nLink.tsx
@@ -12,26 +12,102 @@ import {
type ParamValueToForward = string | number | Array;
-type Props = {
+export type Props = {
+ /**
+ * Optional decorator for the path that will be shown in the browser URL bar.
+ */
as?: string;
+
+ /**
+ * React node as children.
+ */
children: React.ReactNode;
+
+ /**
+ * Additional CSS classes.
+ */
className?: string;
+
+ /**
+ * The path or URL to navigate to.
+ */
href: string;
+
+ /**
+ * The active locale is automatically prepended. locale allows for providing a different locale.
+ *
+ * @default current locale
+ */
locale?: string; // The locale can be specified, but it'll fallback to the current locale if unspecified
+
+ /**
+ * Parameters to inject into the url, necessary when using route params (other than `locale`).
+ *
+ * Example:
+ *
+ * `/products/[id]` with `params={{ id: 5 }}` becomes `/products/5`
+ */
params?: { [key: string]: ParamValueToForward };
+
+ /**
+ * Forces Link to send the href property to its child.
+ *
+ * @default false
+ */
passHref?: boolean;
+
+ /**
+ * Prefetch the page in the background.
+ * Any that is in the viewport (initially or through scroll) will be preloaded.
+ * Prefetch can be disabled by passing prefetch={false}.
+ * Pages using Static Generation will preload JSON files with the data for faster page transitions.
+ *
+ * @default true
+ */
prefetch?: boolean;
+
+ /**
+ * Query to inject to the url, necessary when using route query param.
+ *
+ * Example:
+ *
+ * `/products` with `query={{ userId: 1 }}` becomes `/products?userId=1`
+ */
query?: { [key: string]: ParamValueToForward };
+
+ /**
+ * Replace the current history state instead of adding a new url into the stack.
+ *
+ * @default false
+ */
replace?: boolean;
+
+ /**
+ * Scroll to the top of the page after a navigation.
+ *
+ * @default true
+ */
scroll?: boolean;
+
+ /**
+ * Update the path of the current page without rerunning `getStaticProps`, `getServerSideProps` or `getInitialProps`.
+ *
+ * @default false
+ */
shallow?: boolean;
+
+ /**
+ * Disabled on Storybook, as it crashes the UI.
+ */
wrapChildrenAsLink?: boolean; // Helper to avoid writing redundant code
};
/**
* Wrapper around the native Next.js component. Handles localised links.
*
- * Use the current active locale by default
+ * Uses the current active locale by default.
+ *
+ * [Read why we don't use the official Next.js `Link` component](https://unlyed.github.io/next-right-now/guides/i18n/#official-i18n-routing-implementation) Tip
*
* @example Recommended usage
* Homepage
diff --git a/src/components/pageLayouts/Footer.tsx b/src/components/pageLayouts/Footer.tsx
index e11dba8d1..8f2f7b14b 100644
--- a/src/components/pageLayouts/Footer.tsx
+++ b/src/components/pageLayouts/Footer.tsx
@@ -1,21 +1,21 @@
-import { css } from '@emotion/react';
-import { useTheme } from '@emotion/react';
+import {
+ css,
+ useTheme,
+} from '@emotion/react';
import React from 'react';
import { useTranslation } from 'react-i18next';
-
import { NRN_CO_BRANDING_LOGO_URL } from '../../constants';
import useCustomer from '../../hooks/useCustomer';
import { CSSStyles } from '../../types/CSSStyles';
import { Asset } from '../../types/data/Asset';
import { Customer } from '../../types/data/Customer';
-import { CustomerTheme } from '../../types/data/CustomerTheme';
import { SIZE_XS } from '../../utils/assets/logo';
import GraphCMSAsset from '../assets/GraphCMSAsset';
import Logo from '../assets/Logo';
import I18nBtnChangeLocale from '../i18n/I18nBtnChangeLocale';
import I18nLink from '../i18n/I18nLink';
-type Props = {
+export type Props = {
style?: CSSStyles;
};
diff --git a/src/components/pageLayouts/Head.tsx b/src/components/pageLayouts/Head.tsx
index 42d5596d6..3599d9543 100644
--- a/src/components/pageLayouts/Head.tsx
+++ b/src/components/pageLayouts/Head.tsx
@@ -24,7 +24,7 @@ export type HeadProps = {
* https://github.com/vercel/next.js#populating-head
*/
const Head: React.FunctionComponent = (props): JSX.Element => {
- const defaultDescription = 'Flexible production-grade boilerplate with Next.js 9, Vercel and TypeScript. Includes multiple opt-in presets using Airtable, Analytics, CSS-in-JS, Monitoring, End-to-end testing, Internationalization, CI/CD and SaaS B2B multiple single-tenants (monorepo) support';
+ const defaultDescription = 'Flexible production-grade boilerplate with Next.js 9, Vercel and TypeScript. Includes multiple opt-in presets using Storybook, GraphQL, Analytics, CSS-in-JS, Monitoring, End-to-end testing, Internationalization, CI/CD and SaaS B2B multiple single-tenants (monorepo) support';
const defaultMetaURL = 'https://github.com/UnlyEd/next-right-now';
const defaultMetaImage = '';
const defaultFavicon = '';
diff --git a/src/components/pageLayouts/Nav.tsx b/src/components/pageLayouts/Nav.tsx
index 999bea851..c6f1a745a 100644
--- a/src/components/pageLayouts/Nav.tsx
+++ b/src/components/pageLayouts/Nav.tsx
@@ -1,8 +1,10 @@
import { Amplitude } from '@amplitude/react-amplitude';
-import { css } from '@emotion/react';
+import {
+ css,
+ useTheme,
+} from '@emotion/react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import classnames from 'classnames';
-import { useTheme } from '@emotion/react';
import kebabCase from 'lodash.kebabcase';
import map from 'lodash.map';
import {
@@ -24,10 +26,8 @@ import {
UncontrolledDropdown,
} from 'reactstrap';
import useI18n, { I18n } from '../../hooks/useI18n';
-import customerContext, { CustomerContext } from '../../stores/customerContext';
import { LogEvent } from '../../types/Amplitude';
import { Asset } from '../../types/data/Asset';
-import { CustomerTheme } from '../../types/data/CustomerTheme';
import { SidebarLink } from '../../types/SidebarLink';
import {
isActive,
@@ -40,14 +40,17 @@ import { NATIVE_FEATURES_SIDEBAR_LINKS } from '../doc/NativeFeaturesSidebar';
import I18nLink from '../i18n/I18nLink';
import Tooltip from '../utils/Tooltip';
-type Props = {};
+export type Props = {};
const Nav: React.FunctionComponent = () => {
const { t } = useTranslation();
const router: NextRouter = useRouter();
const theme = useTheme();
const { locale }: I18n = useI18n();
- const { primaryColor, logo } = theme;
+ const {
+ primaryColor,
+ logo,
+ } = theme;
return (
@@ -83,12 +86,12 @@ const Nav: React.FunctionComponent = () => {
}
.navItemsMenu {
- padding:0 10px;
+ padding: 0 10px;
@media (max-width: 991.98px) {
a {
font-size: 12px;
- color: rgba(0,0,0,0.30) !important;
+ color: rgba(0, 0, 0, 0.30) !important;
}
}
}
@@ -150,7 +153,11 @@ const Nav: React.FunctionComponent = () => {
= () => {
Native features
{
map(NATIVE_FEATURES_SIDEBAR_LINKS, (link: SidebarLink) => {
- const { label, href, params = null } = link;
+ const {
+ label,
+ href,
+ params = null,
+ } = link;
+
return (
@@ -206,7 +218,12 @@ const Nav: React.FunctionComponent = () => {
Built-in features
{
map(BUILT_IN_FEATURES_SIDEBAR_LINKS, (link: SidebarLink) => {
- const { label, href, params = null } = link;
+ const {
+ label,
+ href,
+ params = null,
+ } = link;
+
return (
@@ -223,7 +240,12 @@ const Nav: React.FunctionComponent = () => {
Built-in utilities
{
map(BUILT_IN_UTILITIES_SIDEBAR_LINKS, (link: SidebarLink) => {
- const { label, href, params = null } = link;
+ const {
+ label,
+ href,
+ params = null,
+ } = link;
+
return (
diff --git a/src/components/pageLayouts/PreviewModeBanner.tsx b/src/components/pageLayouts/PreviewModeBanner.tsx
index 6706e8989..f20afdc2f 100644
--- a/src/components/pageLayouts/PreviewModeBanner.tsx
+++ b/src/components/pageLayouts/PreviewModeBanner.tsx
@@ -1,6 +1,8 @@
-import { css } from '@emotion/react';
+import {
+ css,
+ useTheme,
+} from '@emotion/react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { useTheme } from '@emotion/react';
import {
NextRouter,
useRouter,
@@ -10,21 +12,19 @@ import {
Trans,
useTranslation,
} from 'react-i18next';
-
import usePreviewMode, { PreviewMode } from '../../hooks/usePreviewMode';
-import { CustomerTheme } from '../../types/data/CustomerTheme';
import { stringifyQueryParameters } from '../../utils/app/router';
import {
startPreviewMode,
stopPreviewMode,
} from '../../utils/nextjs/previewMode';
-import ExternalLink from '../utils/ExternalLink';
import Btn from '../utils/Btn';
+import ExternalLink from '../utils/ExternalLink';
import Tooltip from '../utils/Tooltip';
-type Props = {}
+export type Props = {}
-const ExplanationTooltipOverlay: React.FunctionComponent = (): JSX.Element => {
+export const ExplanationTooltipOverlay: React.FunctionComponent = (): JSX.Element => {
return (
= (props): JSX.Element =
const queryParameters: string = stringifyQueryParameters(router);
const { t } = useTranslation();
const {
- secondaryColor, secondaryColorVariant1, onSecondaryColor,
+ secondaryColor,
+ secondaryColorVariant1,
+ onSecondaryColor,
} = useTheme();
if (process.env.NEXT_PUBLIC_APP_STAGE === 'production') {
diff --git a/src/components/pageLayouts/QuickPreviewBanner.tsx b/src/components/pageLayouts/QuickPreviewBanner.tsx
index b1be9944b..979bee6a9 100644
--- a/src/components/pageLayouts/QuickPreviewBanner.tsx
+++ b/src/components/pageLayouts/QuickPreviewBanner.tsx
@@ -1,7 +1,9 @@
-import { css } from '@emotion/react';
+import {
+ css,
+ useTheme,
+} from '@emotion/react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { createLogger } from '@unly/utils-simple-logger';
-import { useTheme } from '@emotion/react';
import {
NextRouter,
useRouter,
@@ -10,7 +12,6 @@ import React, { Fragment } from 'react';
import { useTranslation } from 'react-i18next';
import useCustomer from '../../hooks/useCustomer';
import { Customer } from '../../types/data/Customer';
-import { CustomerTheme } from '../../types/data/CustomerTheme';
import I18nBtnChangeLocale from '../i18n/I18nBtnChangeLocale';
import Btn from '../utils/Btn';
import Tooltip from '../utils/Tooltip';
@@ -20,7 +21,7 @@ const logger = createLogger({
label: fileLabel,
});
-type Props = {
+export type Props = {
ExplanationTooltipOverlay?: React.FunctionComponent;
LeftActions?: React.FunctionComponent;
quickPreviewTitle?: string;
@@ -44,7 +45,9 @@ const QuickPreviewBanner: React.FunctionComponent = (props): JSX.Element
quickPreviewTitle,
} = props;
const {
- secondaryColor, secondaryColorVariant1, onSecondaryColor,
+ secondaryColor,
+ secondaryColorVariant1,
+ onSecondaryColor,
} = useTheme();
const { t } = useTranslation();
const router: NextRouter = useRouter();
@@ -87,7 +90,7 @@ const QuickPreviewBanner: React.FunctionComponent = (props): JSX.Element
align-items: center;
}
}
- `}
+ `}
>
{
diff --git a/src/components/rehydration/DisplayOnBrowserMount.tsx b/src/components/rehydration/DisplayOnBrowserMount.tsx
index 7d444e7e7..100f38665 100644
--- a/src/components/rehydration/DisplayOnBrowserMount.tsx
+++ b/src/components/rehydration/DisplayOnBrowserMount.tsx
@@ -6,7 +6,7 @@ import React, {
useState,
} from 'react';
-type Props = {
+export type Props = {
children: React.ReactNode;
deps?: DependencyList;
};
diff --git a/src/components/svg/Animated3Dots.tsx b/src/components/svg/Animated3Dots.tsx
index 41c4e04a4..09050a368 100644
--- a/src/components/svg/Animated3Dots.tsx
+++ b/src/components/svg/Animated3Dots.tsx
@@ -1,5 +1,9 @@
import React from 'react';
+export type Props = {
+ fill: string;
+};
+
/**
* An animated composant featuring 3 animated dots "...".
*
@@ -8,7 +12,7 @@ import React from 'react';
*
* @see https://animate.style
*/
-const Animated3Dots = (props): JSX.Element => {
+const Animated3Dots = (props: Props): JSX.Element => {
return (