Ver 0.4.11

next.config.mjs

@@ -1,5 +1,4 @@
 /** @type {import('next').NextConfig} */
-
 const nextConfig = {
   output: 'export',
   trailingSlash: true,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "nextjs-website-starter",
-  "version": "0.3.7",
+  "version": "0.4.11",
   "description": "TODO: Some public website using NextJS",
   "private": true,
   "author": {

.prettierrc.js → prettier.config.js

@@ -1,4 +1,8 @@
-module.exports = {
+/**
+ * @see https://prettier.io/docs/en/configuration.html
+ * @type {import("prettier").Config}
+ */
+const configPrettier = {
   printWidth: 120, // max 120 chars in line, code is easy to read
   useTabs: false, // use spaces instead of tabs
   tabWidth: 2, // "visual width" of of the "tab"
@@ -8,6 +12,8 @@ module.exports = {
   bracketSpacing: true, // import { some } ... instead of import {some} ...
   arrowParens: 'always', // braces even for single param in arrow functions (a) => { }
   jsxSingleQuote: false, // "" for react props, like in html
-  jsxBracketSameLine: false, // pretty JSX
+  bracketSameLine: false, // pretty JSX
   endOfLine: 'lf', // 'lf' for linux, 'crlf' for windows, we need to use 'lf' for git
 };
+
+module.exports = configPrettier;

src/app/(main)/contact/page.tsx

@@ -9,7 +9,7 @@ import BlockContactForm from './BlockContactForm';
  */
 const ContactPage = () => {
   return (
-    <Wrapper tag="article">
+    <Wrapper htmlTag="article">
       <BlockContactForm />
       <BlockSocialMedia />
     </Wrapper>

src/app/(main)/download/page.tsx

@@ -8,7 +8,7 @@ import BlockDownloadButtons from './BlockDownloadButtons';
  */
 const PageDownload = () => {
   return (
-    <Wrapper tag="article">
+    <Wrapper htmlTag="article">
       <Typo variant="header2">Download</Typo>
       <Typo variant="paragraph">
         <strong>{APP_NAME}</strong> is a small and simple utility... {'Some text here. '.repeat(10)}

src/app/(main)/home/page.tsx

@@ -11,7 +11,7 @@ import Picture from '@/components/Picture';
  */
 const HomePage = () => {
   return (
-    <Wrapper tag="article">
+    <Wrapper htmlTag="article">
       <Typo variant="header1">{APP_NAME}</Typo>
       <Typo variant="paragraph">
         <strong>{APP_NAME}</strong> {'Paragraph of text. '.repeat(10)}
@@ -76,8 +76,6 @@ const HomePage = () => {
         <Picture variant="second" />
       </Stack>
 
-      <Typo variant="paragraph">{'Another paragraph of text. '.repeat(10)}</Typo>
-
       <Typo variant="header1">Video</Typo>
       <Stack alignItems="center" padding="1rem 0">
         <Video video="demo" />

src/app/(main)/layout.tsx

@@ -3,12 +3,12 @@ import type { Metadata, Viewport } from 'next';
 import { APP_NAME, PUBLIC_URL } from '@/config';
 import { OPEN_GRAPH_DEFAULT } from '@/app/config';
 import { FONTS } from '@/style';
-import Analytics from '@/components/Analytics';
-import Advertising from '@/components/Advertising';
-import Header from '@/components/Header';
-import Footer from '@/components/Footer';
-import MobileOrDesktop from '@/components/MobileOrDesktop';
-import StylesInjector from '@/components/StylesInjector';
+import Analytics from '@/components/tooling/Analytics';
+import Advertising from '@/components/tooling/Advertising';
+import Header from '@/components/layout/Header';
+import Footer from '@/components/layout/Footer';
+import MobileOrDesktop from '@/components/tooling/MobileOrDesktop';
+import StylesInjector from '@/components/tooling/StylesInjector';
 import './main.css';
 
 export const metadata: Metadata = {

src/app/(main)/legal/page.tsx

@@ -7,7 +7,7 @@ import { Link, Typo, Wrapper } from '@/components';
  */
 const LegalPage = () => {
   return (
-    <Wrapper tag="article">
+    <Wrapper htmlTag="article">
       <Typo variant="header1">Legal Documents</Typo>
       <Typo variant="list">
         <li>

src/app/(main)/legal/privacy-policy/page.tsx

@@ -9,7 +9,7 @@ const PRIVACY_POLICY_DATE = 'TODO: 2024-01-05'; // TODO: put your date here or u
  */
 const PrivacyPolicyPage = () => {
   return (
-    <Wrapper tag="article">
+    <Wrapper htmlTag="article">
       <Typo variant="header1">Privacy Policy</Typo>
 
       <Typo variant="header2">What information do we collect?</Typo>

src/app/(main)/legal/terms-conditions/page.tsx

@@ -7,7 +7,7 @@ import { Link, Typo, Wrapper } from '@/components';
  */
 const TermsAndConditionsPage = () => {
   return (
-    <Wrapper tag="article">
+    <Wrapper htmlTag="article">
       <Typo variant="header1">Terms and Conditions</Typo>
 
       <Typo variant="paragraph">
@@ -29,7 +29,7 @@ const TermsAndConditionsPage = () => {
         The Owner hereby authorize you to download, view, copy, and print text and graphics documents
         (&quot;Documents&quot;) from the Site subject to the following:
       </Typo>
-      <Typo variant="list" tag="ol">
+      <Typo variant="list" htmlTag="ol">
         <li>The Documents may be used solely for personal, informational, and non-commercial purposes.</li>
         <li>Documents may not be modified or altered in any way.</li>
         <li>

src/app/(main)/sitemap/page.tsx

@@ -17,7 +17,7 @@ const SitemapPage = async () => {
   // });
 
   return (
-    <Wrapper tag="article">
+    <Wrapper htmlTag="article">
       <Typo variant="header1">Sitemap</Typo>
       <Typo variant="list">
         <li>

src/app/(unstyled)/layout.tsx

@@ -1,7 +1,7 @@
 import { FunctionComponent, PropsWithChildren } from 'react';
-import Analytics from '@/components/Analytics';
+import Analytics from '@/components/tooling/Analytics';
 import './unstyled.css';
-import StylesInjector from '../../components/StylesInjector';
+import StylesInjector from '../../components/tooling/StylesInjector';
 
 /**
  * Layout for (unstyled) pages, renders head and body tags

src/components/ContactForm/ContactForm.tsx

@@ -1,7 +1,7 @@
 'use client';
 import { FormEvent, useState } from 'react';
 import emailjs, { isEmailJsInitialized } from '@/lib/emailjs';
-import Button from '../Button';
+import Button from '../common/Button';
 import styles from './ContactForm.module.css';
 
 /**

src/components/DownloadButton/DownloadButton.tsx

@@ -2,7 +2,7 @@
 import { FunctionComponent } from 'react';
 import { gaPageView } from '@/lib/ga';
 import { APP_NAME } from '@/config';
-import Button, { ButtonProps } from '../Button/Button';
+import Button, { ButtonProps } from '../common/Button/Button';
 
 const LOCAL_FILES = {
   exe: '/files/_TODO_PRODUCT_INSTALLER_.exe',

src/components/Logo/Logo.tsx

@@ -1,6 +1,6 @@
 import { FunctionComponent, HTMLAttributes, useMemo } from 'react';
 import Image from 'next/image';
-import Link from '../Link';
+import Link from '../common/Link';
 import styles from './Logo.module.css';
 
 type LogoSize = 'small' | 'medium' | 'large';

src/components/Picture/Picture.tsx

@@ -3,7 +3,7 @@ import { FunctionComponent } from 'react';
 import Image, { ImageProps } from 'next/image';
 import { useIsMobile } from '@/hooks';
 import { PictureProps } from '@/utils';
-import Link from '../Link';
+import Link from '../common/Link';
 import { PICTURES, PICTURE_MULTIPLIER_DESKTOP, PICTURE_MULTIPLIER_MOBILE } from './config';
 
 interface Props extends Partial<ImageProps> {

src/components/SocialMedia/SocialMedia.tsx

@@ -2,8 +2,8 @@ import { FunctionComponent } from 'react';
 import { APP_NAME } from '@/config';
 import { ObjectPropByName } from '@/utils';
 import { IconName } from '../Icon';
-import Button from '../Button';
-import Stack, { StackProps } from '../Stack/Stack';
+import Button from '../common/Button';
+import Stack, { StackProps } from '../common/Stack/Stack';
 
 // TODO: put all known social media links here
 export const SOCIAL_MEDIA: ObjectPropByName = {

src/components/Button/Button.test.tsx → src/components/common/Button/Button.test.tsx

@@ -1,7 +1,7 @@
 import { render, screen } from '@testing-library/react';
 import { randomText } from '@/utils/text';
 import { BUTTON_MARGIN, BUTTON_VARIANT } from '@/style';
-import { ICONS } from '../Icon';
+import { ICONS } from '../../Icon';
 import Button, { ButtonVariant } from './Button';
 
 const ComponentToTest = Button;

src/components/Button/Button.tsx → src/components/common/Button/Button.tsx

@@ -8,7 +8,7 @@ import {
   ICON_COLOR_INVERTED,
   ICON_COLOR_NORMAL,
 } from '@/style';
-import Icon, { IconName } from '../Icon';
+import Icon, { IconName } from '../../Icon';
 import Link from '../Link';
 import Stack from '../Stack';
 import styles from './Button.module.css';

src/components/HtmlTag/HtmlTag.tsx → src/components/common/HtmlTag/HtmlTag.tsx

@@ -9,7 +9,7 @@ interface Props extends HTMLAttributes<HTMLElement> {
  * @component HtmlTag
  * @param {string} tag - tag name to render
  */
-const HtmlTag: FunctionComponent<Props> = ({ tag, children, ...restOfProps }) =>
+const HtmlTag: FunctionComponent<Props> = ({ children, tag, ...restOfProps }) =>
   createElement(tag, restOfProps, children);
 
 export default HtmlTag;

src/components/Link/Link.test.tsx → src/components/common/Link/Link.test.tsx

@@ -3,7 +3,7 @@ import { useRouter } from 'next/router';
 import mockRouter from 'next-router-mock';
 import { render, screen } from '@testing-library/react';
 import { act } from 'react-dom/test-utils';
-import { randomText } from '../../utils';
+import { randomText } from '../../../utils';
 import Link, { LinkProps } from './Link';
 /* IMPORTANT! To get 'next/router' working with tests, add into "jest.setup.js/ts" file following:
 ---

src/components/common/Link/index.tsx

@@ -0,0 +1,3 @@
+import Link from './Link';
+
+export default Link;

src/components/Stack/Stack.test.tsx → src/components/common/Stack/Stack.test.tsx

@@ -137,12 +137,12 @@ describe('<Stack/> component', () => {
     expect(element).toBeDefined();
     expect(element.tagName.toLowerCase()).toBe('div');
 
-    const tagsToVerify: StackProps['tag'][] = ['div', 'span', 'p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
+    const tagsToVerify: StackProps['htmlTag'][] = ['div', 'span', 'p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
     for (const tag of tagsToVerify) {
       text = `property .tag is ${tag}`;
       testId = randomText(8);
       render(
-        <ComponentToTest data-testid={testId} tag={tag}>
+        <ComponentToTest data-testid={testId} htmlTag={tag}>
           {text}
         </ComponentToTest>
       );

src/components/Stack/Stack.tsx → src/components/common/Stack/Stack.tsx

@@ -8,10 +8,10 @@ export interface StackProps extends PropsWithChildren<HTMLAttributes<HTMLDivElem
   alignSelf?: 'auto' | 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch';
   direction?: 'row' | 'column' | 'column-reverse' | 'row-reverse';
   gap?: number | string;
+  htmlTag?: keyof JSX.IntrinsicElements;
   justifyContent?: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly' | 'stretch';
   margin?: number | string;
   padding?: number | string;
-  tag?: keyof JSX.IntrinsicElements;
 }
 
 /**
@@ -21,6 +21,7 @@ export interface StackProps extends PropsWithChildren<HTMLAttributes<HTMLDivElem
  * @param {string} [alignSelf] - align-self CSS property
  * @param {string} [direction] - row, column or reversed, defaults to 'column'
  * @param {number | string} [gap] - controls space between children elements
+ * @param {string} [htmlTag] - HTML tag to render, defaults to 'div'
  * @param {string} [justifyContent] - justify-content CSS property
  * @param {number | string} [margin] - margin around the container
  * @param {number | string} [padding] - padding inside the container
@@ -33,11 +34,11 @@ export const Stack: FunctionComponent<StackProps> = ({
   className,
   direction = 'column',
   gap,
+  htmlTag = 'div',
   justifyContent,
   margin,
   padding,
   style,
-  tag = 'div',
   ...restOfProps
 }) => {
   const classToRender = useMemo(
@@ -62,7 +63,7 @@ export const Stack: FunctionComponent<StackProps> = ({
   }, [alignContent, alignItems, alignSelf, gap, justifyContent, margin, padding, style]);
 
   return (
-    <HtmlTag className={classToRender} tag={tag} style={styleToRender} {...restOfProps}>
+    <HtmlTag className={classToRender} tag={htmlTag} style={styleToRender} {...restOfProps}>
       {children}
     </HtmlTag>
   );

src/components/common/Stack/index.ts

@@ -0,0 +1,3 @@
+import Stack from './Stack';
+
+export default Stack;

src/components/Typo/Typo.test.tsx → src/components/common/Typo/Typo.test.tsx

@@ -43,12 +43,12 @@ describe('<Typo/> component', () => {
     expect(element).toBeDefined();
     expect(element.tagName.toLowerCase()).toBe('span');
 
-    const tagsToVerify: TypoProps['tag'][] = ['div', 'span', 'p', 'ul', 'ol', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
+    const tagsToVerify: TypoProps['htmlTag'][] = ['div', 'span', 'p', 'ul', 'ol', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
     for (const tag of tagsToVerify) {
       text = `property .tag is ${tag}`;
       testId = randomText(8);
       render(
-        <ComponentToTest data-testid={testId} tag={tag}>
+        <ComponentToTest data-testid={testId} htmlTag={tag}>
           {text}
         </ComponentToTest>
       );

src/components/Typo/Typo.tsx → src/components/common/Typo/Typo.tsx

@@ -1,52 +1,19 @@
-// 'use client';
+'use client';
 import { FunctionComponent, HTMLAttributes, PropsWithChildren, ReactNode, useMemo } from 'react';
 import { useIsMobile } from '@/hooks/layout';
-import { FONTS } from '@/style';
 import HtmlTag from '../HtmlTag';
+import { TypoAlign, TypoColor, TypoVariant } from './types';
+import { getFontByVariant, getTagByVariant } from './utlils';
 import styles from './Typo.module.css';
 
-type TypoColor = 'dark' | 'light' | 'primary' | 'secondary' | string;
-type TypoVariant = 'text' | 'paragraph' | 'header1' | 'header2' | 'header3' | 'list';
-type TypoAlign = 'center' | 'left' | 'right' | 'justify';
-
-function getTagByVariant(variant: TypoVariant): keyof JSX.IntrinsicElements {
-  // TODO: Synch with Figma
-  switch (variant) {
-    case 'header1':
-      return 'h1';
-    case 'header2':
-      return 'h2';
-    case 'header3':
-      return 'h3';
-    case 'paragraph':
-      return 'p';
-    case 'list':
-      return 'ul';
-    default:
-      return 'span'; // 'text' variant and any other unknown variants
-  }
-}
-
-function getFontByVariant(variant: TypoVariant): string {
-  // TODO: If we will use single font, we can remove this function
-  switch (variant) {
-    case 'header1':
-    case 'header2':
-    case 'header3':
-      return FONTS.poppins.className;
-    default:
-      return FONTS.inter.className;
-  }
-}
-
 export interface TypoProps extends PropsWithChildren<HTMLAttributes<HTMLElement>> {
   align?: TypoAlign;
   bold?: boolean;
   capitalize?: boolean;
   className?: string;
   children: ReactNode;
   color?: TypoColor;
-  tag?: keyof JSX.IntrinsicElements;
+  htmlTag?: keyof JSX.IntrinsicElements;
   variant?: TypoVariant;
   underline?: boolean;
   uppercase?: boolean;
@@ -73,7 +40,7 @@ const Typo: FunctionComponent<TypoProps> = ({
   color = 'dark',
   style,
   variant = 'text',
-  tag = getTagByVariant(variant), // Must be defined after .variant property!!!
+  htmlTag = getTagByVariant(variant), // Must be defined after .variant property!!!
   underline,
   uppercase,
   ...restOfProps
@@ -106,7 +73,7 @@ const Typo: FunctionComponent<TypoProps> = ({
   );
 
   return (
-    <HtmlTag className={classToRender} style={styleToRender} tag={tag} {...restOfProps}>
+    <HtmlTag className={classToRender} style={styleToRender} tag={htmlTag} {...restOfProps}>
       {children}
     </HtmlTag>
   );

src/components/Typo/index.ts → src/components/common/Typo/index.ts

@@ -1,3 +1,4 @@
 import Typo from './Typo';
 
+export * from './types';
 export default Typo;