{children}
;
+};
diff --git a/apps/website-ssr/src/componentsNew/common/svgs/arrowSvg.tsx b/apps/website-ssr/src/componentsNew/common/svgs/arrowSvg.tsx
new file mode 100644
index 0000000..0bc4fb3
--- /dev/null
+++ b/apps/website-ssr/src/componentsNew/common/svgs/arrowSvg.tsx
@@ -0,0 +1,15 @@
+export const ArrowSvg = () => (
+
+);
diff --git a/apps/website-ssr/src/componentsNew/common/svgs/checkMarkSvg.tsx b/apps/website-ssr/src/componentsNew/common/svgs/checkMarkSvg.tsx
new file mode 100644
index 0000000..901ccf2
--- /dev/null
+++ b/apps/website-ssr/src/componentsNew/common/svgs/checkMarkSvg.tsx
@@ -0,0 +1,12 @@
+export const CheckMarkSvg = () => (
+
+);
diff --git a/apps/website-ssr/src/componentsNew/common/svgs/downloadSvg.tsx b/apps/website-ssr/src/componentsNew/common/svgs/downloadSvg.tsx
new file mode 100644
index 0000000..b50b809
--- /dev/null
+++ b/apps/website-ssr/src/componentsNew/common/svgs/downloadSvg.tsx
@@ -0,0 +1,20 @@
+export const DownloadSvg = () => (
+
+);
diff --git a/apps/website-ssr/src/componentsNew/common/svgs/emailSvg.tsx b/apps/website-ssr/src/componentsNew/common/svgs/emailSvg.tsx
new file mode 100644
index 0000000..0f90834
--- /dev/null
+++ b/apps/website-ssr/src/componentsNew/common/svgs/emailSvg.tsx
@@ -0,0 +1,25 @@
+export const EmailSvg = (
+
+);
diff --git a/apps/website-ssr/src/componentsNew/common/svgs/resetSvg.tsx b/apps/website-ssr/src/componentsNew/common/svgs/resetSvg.tsx
new file mode 100644
index 0000000..a05c020
--- /dev/null
+++ b/apps/website-ssr/src/componentsNew/common/svgs/resetSvg.tsx
@@ -0,0 +1,20 @@
+export const ResetSvg = () => (
+
+);
diff --git a/apps/website-ssr/src/componentsNew/common/svgs/textSvg.tsx b/apps/website-ssr/src/componentsNew/common/svgs/textSvg.tsx
new file mode 100644
index 0000000..367d925
--- /dev/null
+++ b/apps/website-ssr/src/componentsNew/common/svgs/textSvg.tsx
@@ -0,0 +1,20 @@
+export const TextSvg = (
+
+);
diff --git a/apps/website-ssr/src/componentsNew/common/svgs/vCardSvg.tsx b/apps/website-ssr/src/componentsNew/common/svgs/vCardSvg.tsx
new file mode 100644
index 0000000..f8ce2b4
--- /dev/null
+++ b/apps/website-ssr/src/componentsNew/common/svgs/vCardSvg.tsx
@@ -0,0 +1,19 @@
+export const VCardSvg = (
+
+);
diff --git a/apps/website-ssr/src/componentsNew/common/svgs/wifiSvg.tsx b/apps/website-ssr/src/componentsNew/common/svgs/wifiSvg.tsx
new file mode 100644
index 0000000..e50952e
--- /dev/null
+++ b/apps/website-ssr/src/componentsNew/common/svgs/wifiSvg.tsx
@@ -0,0 +1,13 @@
+export const WifiSvg = (
+
+);
diff --git a/apps/website-ssr/src/componentsNew/common/tabs/index.tsx b/apps/website-ssr/src/componentsNew/common/tabs/index.tsx
new file mode 100644
index 0000000..c30c398
--- /dev/null
+++ b/apps/website-ssr/src/componentsNew/common/tabs/index.tsx
@@ -0,0 +1,160 @@
+import { EmailSvg } from '@/common/svgs/emailSvg';
+import { TextSvg } from '@/common/svgs/textSvg';
+import { VCardSvg } from '@/common/svgs/vCardSvg';
+import { WifiSvg } from '@/common/svgs/wifiSvg';
+import { QrStyleContext } from '@/context/index';
+import clsx from 'clsx';
+import { motion } from 'framer-motion';
+import Link from 'next/link';
+import { useRouter } from 'next/router';
+import { useContext, useEffect, useMemo, useRef, useState } from 'react';
+
+interface Tab {
+ icon: React.ReactNode;
+ href: string;
+ id: string;
+}
+
+type TabProps = {
+ children?: React.ReactNode;
+};
+
+const Layout = ({ children }: TabProps) => {
+ const { dispatch } = useContext(QrStyleContext);
+ const tabsData: Tab[] = useMemo(
+ () => [
+ {
+ icon: TextSvg,
+ href: '/',
+ id: 'tab-1',
+ },
+ {
+ icon: EmailSvg,
+ href: '/email',
+ id: 'tab-2',
+ },
+ {
+ icon: WifiSvg,
+ href: '/wifi',
+ id: 'tab-3',
+ },
+ {
+ icon: VCardSvg,
+ href: '/vcard',
+ id: 'tab-4',
+ },
+ ],
+ []
+ );
+ const [state, setState] = useState({
+ activeTabIndex: 0,
+ tabBackground: { top: 0, height: 0, width: 0, left: 0 },
+ });
+
+ const tabsRef = useRef<(HTMLAnchorElement | null)[]>([]);
+
+ const { pathname } = useRouter();
+
+ useEffect(() => {
+ const initialActiveTabIndex = tabsData.findIndex((tab) => tab.href === pathname);
+ if (initialActiveTabIndex !== -1) {
+ setState((prevState) => ({ ...prevState, activeTabIndex: initialActiveTabIndex }));
+ const currentTab = tabsRef.current[initialActiveTabIndex];
+ setState((prevState) => ({
+ ...prevState,
+ tabBackground: {
+ top: currentTab?.offsetTop ?? 0,
+ height: currentTab?.clientHeight ?? 0,
+ width: currentTab?.clientWidth ?? 0,
+ left: currentTab?.offsetLeft ?? 0,
+ },
+ }));
+ dispatch({ type: 'SET_QR_VALUE', payload: { value: "I'm EMPTY" } });
+ }
+ }, [pathname, tabsData, dispatch]);
+
+ useEffect(() => {
+ const handleResize = () => {
+ const currentTab = tabsRef.current[state.activeTabIndex];
+ setState((prevState) => ({
+ ...prevState,
+ tabBackground: {
+ top: currentTab?.offsetTop ?? 0,
+ height: currentTab?.clientHeight ?? 0,
+ width: currentTab?.clientWidth ?? 0,
+ left: currentTab?.offsetLeft ?? 0,
+ },
+ }));
+ };
+
+ window.addEventListener('resize', handleResize);
+
+ return () => {
+ window.removeEventListener('resize', handleResize);
+ };
+ }, [state.activeTabIndex]);
+
+ return (
+
+
+ {children}
+
+ );
+};
+
+export default Layout;
diff --git a/apps/website-ssr/src/componentsNew/common/titles/index.tsx b/apps/website-ssr/src/componentsNew/common/titles/index.tsx
new file mode 100644
index 0000000..240555c
--- /dev/null
+++ b/apps/website-ssr/src/componentsNew/common/titles/index.tsx
@@ -0,0 +1,9 @@
+type TitlesProps = {
+ title: string;
+};
+
+export const H1 = ({ title }: TitlesProps) => {
+ return (
+ {title}
+ ); +}; diff --git a/apps/website-ssr/src/componentsNew/common/utils/seo.tsx b/apps/website-ssr/src/componentsNew/common/utils/seo.tsx new file mode 100644 index 0000000..de8c7ca --- /dev/null +++ b/apps/website-ssr/src/componentsNew/common/utils/seo.tsx @@ -0,0 +1,81 @@ +import { ICommon } from '@/typings/typings'; +import Head from 'next/head'; +import { useRouter } from 'next/router'; +import { Fragment } from 'react'; + +const Seo: React.FC<{ seo: ICommon['seo'] }> = ({ seo }) => { + const router = useRouter(); + + // Get the production url + const prodUrl = process.env.NEXT_PUBLIC_PROD_URL; + + // Get the meta tags + const meta = { + title: seo?.metaTitle, + site_name: seo?.siteName, + description: seo?.metaDescription, + url: prodUrl, + image: `${process.env.api}${seo?.metaImage?.data?.attributes?.url}`, + image_alt: seo?.metaImage?.data?.attributes?.alternativeText, + type: 'website', + robots: 'follow, index', + ...seo, + }; + + return ( + + {/* Default meta tags */} + +{colorButtonsJSX}
+
+ );
+};
+
+export default ColorSwitcher;
diff --git a/apps/website-ssr/src/componentsNew/common/wrappers/qrcodeDisplay/details.tsx b/apps/website-ssr/src/componentsNew/common/wrappers/qrcodeDisplay/details.tsx
new file mode 100644
index 0000000..0393c05
--- /dev/null
+++ b/apps/website-ssr/src/componentsNew/common/wrappers/qrcodeDisplay/details.tsx
@@ -0,0 +1,145 @@
+import { ArrowSvg } from '@/common/svgs/arrowSvg';
+import { CheckMarkSvg } from '@/common/svgs/checkMarkSvg';
+import { ResetSvg } from '@/common/svgs/resetSvg';
+import { ColorTypes } from '@/context/colorTypes';
+import { Disclosure, Transition } from '@headlessui/react';
+import clsx from 'clsx';
+import { motion } from 'framer-motion';
+
+type DetailsProps = {
+ title: string;
+ children: React.ReactNode;
+};
+
+export type ButtonProps = {
+ title: string;
+ active?: boolean;
+ onClick?: () => void;
+ isColorPicker?: boolean;
+ color?: ColorTypes['colors'];
+ resettable?: boolean;
+};
+
+const Details = ({ title, children }: DetailsProps) => {
+ return (
+ <>
+
+
+
+
+ );
+};
+
+export default DownloadButton;
diff --git a/apps/website-ssr/src/componentsNew/common/wrappers/qrcodeDisplay/index.tsx b/apps/website-ssr/src/componentsNew/common/wrappers/qrcodeDisplay/index.tsx
new file mode 100644
index 0000000..3d9203e
--- /dev/null
+++ b/apps/website-ssr/src/componentsNew/common/wrappers/qrcodeDisplay/index.tsx
@@ -0,0 +1,31 @@
+import { Transition } from '@headlessui/react';
+import dynamic from 'next/dynamic';
+import React, { useEffect, useState } from 'react';
+
+const QrCode = dynamic(() => import('@/common/wrappers/qrcodeDisplay/qrCode'), {
+ ssr: false,
+});
+
+const QrCodeWrapper = () => {
+ const [isMounted, setIsMounted] = useState(false);
+ useEffect(() => {
+ setIsMounted(true);
+ }, []);
+ return (
+
+
+
+
+ );
+};
+
+export default QrCodeWrapper;
diff --git a/apps/website-ssr/src/componentsNew/common/wrappers/qrcodeDisplay/inputFile.tsx b/apps/website-ssr/src/componentsNew/common/wrappers/qrcodeDisplay/inputFile.tsx
new file mode 100644
index 0000000..edc4719
--- /dev/null
+++ b/apps/website-ssr/src/componentsNew/common/wrappers/qrcodeDisplay/inputFile.tsx
@@ -0,0 +1,66 @@
+import { QrStyleContext } from '@/context/index';
+import clsx from 'clsx';
+import React, { useContext } from 'react';
+
+const FileInput = () => {
+ const { dispatch, state } = useContext(QrStyleContext);
+ const [error, setError] = React.useState('');
+
+ const onFileUpload = React.useCallback(
+ (e: React.ChangeEvent
+
+
+
+
+ {error && Error: {error}
} + + ); +}; + +export default FileInput; diff --git a/apps/website-ssr/src/componentsNew/common/wrappers/qrcodeDisplay/qrCode.tsx b/apps/website-ssr/src/componentsNew/common/wrappers/qrcodeDisplay/qrCode.tsx new file mode 100644 index 0000000..926c23d --- /dev/null +++ b/apps/website-ssr/src/componentsNew/common/wrappers/qrcodeDisplay/qrCode.tsx @@ -0,0 +1,161 @@ +import Details from '@/common/wrappers/qrcodeDisplay/details'; +import DownloadButton from '@/common/wrappers/qrcodeDisplay/downloadButton'; +import FileInput from '@/common/wrappers/qrcodeDisplay/inputFile'; +import ShapesSwitcher from '@/common/wrappers/qrcodeDisplay/shapesSwitcher'; +import { ColorsTabs } from '@/common/wrappers/qrcodeDisplay/tabs/colorsTabs'; +import { ColorTypes } from '@/context/colorTypes'; +import { QrStyleContext } from '@/context/index'; +import QRCodeStyling, { + CornerDotType, + CornerSquareType, + DotType, + DrawType, + ErrorCorrectionLevel, + FileExtension, + Mode, + Options, + TypeNumber, +} from 'qr-code-styling'; +import React, { useContext, useEffect, useRef, useState } from 'react'; + +const QRCode = () => { + const { state } = useContext(QrStyleContext); + + const toBase64 = (file: File) => { + return new Promise
+
+
+
+
+
+
+
+ {state.style === 'dot' && (
+
+
+ + + Dot Type customizations + +
+
+
+ + * Dot types "Rounded" and{' '} + "Classy" can alter the QR code's readability. +
+
+
+ );
+};
+
+export default Title;
diff --git a/apps/website-ssr/src/componentsNew/titleSection/input/emailInput.tsx b/apps/website-ssr/src/componentsNew/titleSection/input/emailInput.tsx
new file mode 100644
index 0000000..d62460c
--- /dev/null
+++ b/apps/website-ssr/src/componentsNew/titleSection/input/emailInput.tsx
@@ -0,0 +1,111 @@
+import { QrStyleContext } from '@/context/index';
+import TextField from '@mui/material/TextField';
+import { useCallback, useContext, useEffect, useState } from 'react';
+
+const EmailInput = () => {
+ const { dispatch } = useContext(QrStyleContext);
+ const [fields, setFields] = useState({
+ email: '',
+ subject: '',
+ message: '',
+ touched: {
+ email: false,
+ subject: false,
+ message: false,
+ },
+ });
+
+ useEffect(() => {
+ let timeoutId: NodeJS.Timeout;
+
+ if (fields.email && fields.subject && fields.message) {
+ timeoutId = setTimeout(() => {
+ if (validateEmail(fields.email)) {
+ const mailtoLink = `mailto:${fields.email}?subject=${encodeURIComponent(
+ fields.subject
+ )}&body=${encodeURIComponent(fields.message)}`;
+ dispatch({ type: 'SET_QR_VALUE', payload: { value: mailtoLink } });
+ } else {
+ dispatch({ type: 'SET_QR_VALUE', payload: { value: "I'm EMPTY" } });
+ }
+ }, 1000);
+ }
+
+ return () => clearTimeout(timeoutId);
+ }, [fields.email, fields.subject, fields.message, dispatch]);
+
+ const handleEmailChange = useCallback((e: React.ChangeEvent
+
+
+
+ Please enter a valid email address
+ )} ++ Your QR code will be generated automatically once you fill in all three fields{' '} + with a valid email address +
+ + ); +}; + +export default EmailInput; diff --git a/apps/website-ssr/src/componentsNew/titleSection/input/index.tsx b/apps/website-ssr/src/componentsNew/titleSection/input/index.tsx new file mode 100644 index 0000000..14afe03 --- /dev/null +++ b/apps/website-ssr/src/componentsNew/titleSection/input/index.tsx @@ -0,0 +1,24 @@ +import TextInput from '@/components/titleSection/input/textInput'; +import { InputProps } from '@/typings/typings'; +import dynamic from 'next/dynamic'; + +const EmailInput = dynamic(() => import('@/components/titleSection/input/emailInput'), { + ssr: false, +}); + +type Input = { + [key: string]: JSX.Element; +}; + +const Input = ({ typeOfInput }: InputProps) => { + const inputs: Input = { + text:{inputs[typeOfInput]}
;
+};
+
+export default Input;
diff --git a/apps/website-ssr/src/componentsNew/titleSection/input/textInput.tsx b/apps/website-ssr/src/componentsNew/titleSection/input/textInput.tsx
new file mode 100644
index 0000000..8ed5287
--- /dev/null
+++ b/apps/website-ssr/src/componentsNew/titleSection/input/textInput.tsx
@@ -0,0 +1,41 @@
+import { QrStyleContext } from '@/context/index';
+import TextField from '@mui/material/TextField';
+import { useContext, useEffect, useState } from 'react';
+
+const TextInput = () => {
+ const { state, dispatch } = useContext(QrStyleContext);
+ const [debouncedValue, setDebouncedValue] = useState(state.value);
+
+ useEffect(() => {
+ const timeoutId = setTimeout(() => {
+ if (debouncedValue === '') {
+ dispatch({ type: 'SET_QR_VALUE', payload: { value: "I'm EMPTY" } });
+ return;
+ }
+ dispatch({ type: 'SET_QR_VALUE', payload: { value: debouncedValue } });
+ }, 1000);
+
+ return () => clearTimeout(timeoutId);
+ }, [debouncedValue, dispatch]);
+
+ const handleChange = (e: React.ChangeEvent
+
+ );
+};
+
+export default TextInput;
diff --git a/apps/website-ssr/src/context/colorTypes.ts b/apps/website-ssr/src/context/colorTypes.ts
new file mode 100644
index 0000000..e36e186
--- /dev/null
+++ b/apps/website-ssr/src/context/colorTypes.ts
@@ -0,0 +1,26 @@
+export interface ColorTypes {
+ colors:
+ | 'transparent'
+ | '#1F2937' // gray-700
+ | '#9B2C2C' // red-700
+ | '#D97706' // yellow-700
+ | '#22543D' // green-700
+ | '#1D4ED8' // blue-700
+ | '#4F46E5' // indigo-700
+ | '#7C3AED' // purple-700
+ | '#E11D8F' // pink-700
+ | '#FFFFFF' // white
+ | '#000000'; // black
+ colorNames:
+ | 'Transparent'
+ | 'Gray'
+ | 'Red'
+ | 'Yellow'
+ | 'Green'
+ | 'Blue'
+ | 'Indigo'
+ | 'Purple'
+ | 'Pink'
+ | 'White'
+ | 'Black';
+}
diff --git a/apps/website-ssr/src/context/index.tsx b/apps/website-ssr/src/context/index.tsx
new file mode 100644
index 0000000..a38fcf0
--- /dev/null
+++ b/apps/website-ssr/src/context/index.tsx
@@ -0,0 +1,110 @@
+import { ColorTypes } from '@/context/colorTypes';
+import { CornerSquareType, DotType } from 'qr-code-styling';
+import React, { createContext, useMemo, useReducer } from 'react';
+
+const initialState: IState = {
+ style: 'square',
+ dotType: 'square',
+ background: 'transparent',
+ dotColor: '#FFFFFF',
+ eyeColor: '#FFFFFF',
+ value: "I'm EMPTY",
+ logoImage: '',
+};
+
+export interface IState {
+ style?: CornerSquareType;
+ dotType?: DotType;
+ background?: ColorTypes['colors'];
+ dotColor?: ColorTypes['colors'];
+ eyeColor?: ColorTypes['colors'];
+ value?: string;
+ logoImage: File | string | undefined;
+}
+
+type Actions =
+ | 'SET_QR_STYLE'
+ | 'SET_QR_VALUE'
+ | 'SET_QR_DOT_TYPE'
+ | 'SET_QR_BACKGROUND'
+ | 'SET_QR_DOT_COLOR'
+ | 'SET_QR_EYE_COLOR'
+ | 'SET_QR_LOGO_IMAGE'
+ | `SET_QR_${string}`;
+export interface IAction {
+ type: Actions;
+ payload: {
+ style?: CornerSquareType;
+ value?: string;
+ dotType?: DotType;
+ background?: ColorTypes['colors'];
+ dotColor?: ColorTypes['colors'];
+ eyeColor?: ColorTypes['colors'];
+ logoImage?: File | string;
+ };
+}
+
+export interface IContextProps {
+ state: IState;
+ dispatch: React.DispatchYour QR code will be generated automatically
++ Page Not Found +
+
+ Sorry, the page you're looking for isn't there. Maybe it got moved, or deleted?
+
+ + Website SSR + + Turbo Monorepo + +
+
+ {`SSR Working ? ${pwa ? "SSR ON!" : "Not Working - Something went wrong?"}`}
+
+ + Website SSR + + Turbo Monorepo + +
+
+ {`SSR Working ? ${pwa ? "SSR ON!" : "Not Working - Something went wrong?"}`}
+
+
+
+
+
+
+
+
+
+
+
+
+
+Boilerplate Next.js + TS + Storybook + Jest + PWA
+ +
+
+ 
+Sobre | +Tecnologias | +Prรฉ requisitos | +Comeรงando | +Comandos | +Saiba Mais | +Deploy via Vercel | +Autor + +
+ ++ +## Sobre + +Este รฉ um boilerplate criado para o [Next.js](https://nextjs.org/)! + +## Tecnologias + +As seguintes ferramentas foram usadas na construรงรฃo do projeto: + +- [TypeScript](https://www.typescriptlang.org/) +- [NextJS](https://nextjs.org/) +- [Styled Components](https://styled-components.com/) +- [Jest](https://jestjs.io/) +- [React Testing Library](https://testing-library.com/docs/react-testing-library/intro) +- [Storybook](https://storybook.js.org/) +- [Eslint](https://eslint.org/) +- [Prettier](https://prettier.io/) +- [Husky](https://github.com/typicode/husky) + +## Prรฉ requisitos + +Antes de comeรงar :checkered_flag:, vocรช precisa ter o [Git](https://git-scm.com) e o [Node](https://nodejs.org/en/) instalados em sua maquina. + +## Comeรงando + +```bash +# Clone este repositรณrio +$ git clone https://github.com/TG-Creative-Brasil/tgc-boilerplate-nextjs + +# Entre na pasta +$ cd boilerplate-react-ts + +# Instale as dependรชncias +$ yarn +#or +$ npm install + +# Para iniciar o projeto +$ yarn dev +# or +$ npm run dev + +# O app vai inicializar em
{{pascalCase name}}
+{{pascalCase name}}
+
+ + Boilerplate Next + Typescript +
++ TypeScript, ReactJS, NextJS e Styled Components +
+
++ 404 | Page Not Found +
++ Page Not Found +
+
+ Sorry, the page you're looking for isn't there. Maybe it got moved, or deleted?
+
+ + Next.js & Tailwind CSS Monorepo Template + + Turbo Monorepo + +
+
+
+
+ + {rightLinks.map(({ classNameMobile, ...link }) => ( +