├── react-ga-consent ├── .env ├── src │ ├── react-app-env.d.ts │ ├── ga-utils.ts │ ├── index.tsx │ ├── index.css │ ├── App.css │ └── App.tsx ├── public │ ├── robots.txt │ ├── favicon.ico │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── index.html ├── README.md ├── .gitignore ├── tsconfig.json └── package.json ├── .DS_Store ├── export-charts-pdf ├── src │ ├── react-app-env.d.ts │ ├── setupTests.ts │ ├── App.css │ ├── index.css │ ├── reportWebVitals.ts │ ├── Chart.tsx │ ├── index.tsx │ ├── App.tsx │ ├── utils.ts │ └── options.ts ├── public │ ├── robots.txt │ ├── favicon.ico │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── index.html ├── .vscode │ └── settings.json ├── README.md ├── .gitignore ├── tsconfig.json └── package.json ├── nextjs-dashboard-layout ├── .eslintrc.json ├── next.config.js ├── public │ ├── favicon.ico │ └── vercel.svg ├── pages │ ├── smb.tsx │ ├── index.tsx │ ├── orders.tsx │ ├── retail.tsx │ ├── corporate.tsx │ ├── customers.tsx │ ├── inventory.tsx │ ├── new-orders.tsx │ ├── completed-orders.tsx │ ├── _app.tsx │ ├── api │ │ └── hello.ts │ └── _document.tsx ├── components │ ├── Footer │ │ ├── index.tsx │ │ └── styles.ts │ ├── Sidebar │ │ ├── styles.ts │ │ └── index.tsx │ ├── DashboardLayout │ │ ├── styles.ts │ │ └── index.tsx │ ├── ExpandIcon │ │ └── index.tsx │ ├── MenuItemsList │ │ └── index.tsx │ ├── Header │ │ ├── styles.ts │ │ └── index.tsx │ └── MenuItem │ │ ├── styles.ts │ │ └── index.tsx ├── next-env.d.ts ├── styles │ ├── globals.css │ └── Home.module.css ├── .gitignore ├── tsconfig.json ├── package.json ├── README.md ├── constants │ └── menu-items.ts └── yarn.lock ├── react-native-i18n ├── translations │ ├── en.json │ ├── es.json │ ├── be.json │ ├── de.json │ ├── fr.json │ └── index.ts ├── assets │ ├── icon.png │ ├── splash.png │ ├── favicon.png │ └── adaptive-icon.png ├── tsconfig.json ├── babel.config.js ├── .expo-shared │ └── assets.json ├── README.md ├── app.json ├── App.tsx ├── i18n.config.ts ├── utils │ ├── languageDetectorPlugin.ts │ └── script.js ├── package.json └── LanguagePicker.tsx ├── .gitignore ├── README.md └── LICENSE /react-ga-consent/.env: -------------------------------------------------------------------------------- 1 | REACT_APP_GOOGLE_ANALYTICS_ID=UA-XXXXXXXXX -------------------------------------------------------------------------------- /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KaterinaLupacheva/tutorials/HEAD/.DS_Store -------------------------------------------------------------------------------- /export-charts-pdf/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /react-ga-consent/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /nextjs-dashboard-layout/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /react-native-i18n/translations/en.json: -------------------------------------------------------------------------------- 1 | { 2 | "HELLO": "Hello", 3 | "PRESS": "Press" 4 | } -------------------------------------------------------------------------------- /react-native-i18n/translations/es.json: -------------------------------------------------------------------------------- 1 | { 2 | "HELLO": "Hola", 3 | "PRESS": "Prensa" 4 | } -------------------------------------------------------------------------------- /react-native-i18n/translations/be.json: -------------------------------------------------------------------------------- 1 | { 2 | "HELLO": "Прывітанне", 3 | "PRESS": "Прэс" 4 | } -------------------------------------------------------------------------------- /react-native-i18n/translations/de.json: -------------------------------------------------------------------------------- 1 | { 2 | "HELLO": "Hallo", 3 | "PRESS": "Drücken Sie" 4 | } -------------------------------------------------------------------------------- /react-native-i18n/translations/fr.json: -------------------------------------------------------------------------------- 1 | { 2 | "HELLO": "Bonjour", 3 | "PRESS": "Presse" 4 | } -------------------------------------------------------------------------------- /react-ga-consent/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /export-charts-pdf/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /react-ga-consent/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KaterinaLupacheva/tutorials/HEAD/react-ga-consent/public/favicon.ico -------------------------------------------------------------------------------- /react-ga-consent/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KaterinaLupacheva/tutorials/HEAD/react-ga-consent/public/logo192.png -------------------------------------------------------------------------------- /react-ga-consent/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KaterinaLupacheva/tutorials/HEAD/react-ga-consent/public/logo512.png -------------------------------------------------------------------------------- /react-native-i18n/assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KaterinaLupacheva/tutorials/HEAD/react-native-i18n/assets/icon.png -------------------------------------------------------------------------------- /react-native-i18n/assets/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KaterinaLupacheva/tutorials/HEAD/react-native-i18n/assets/splash.png -------------------------------------------------------------------------------- /export-charts-pdf/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KaterinaLupacheva/tutorials/HEAD/export-charts-pdf/public/favicon.ico -------------------------------------------------------------------------------- /export-charts-pdf/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KaterinaLupacheva/tutorials/HEAD/export-charts-pdf/public/logo192.png -------------------------------------------------------------------------------- /export-charts-pdf/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KaterinaLupacheva/tutorials/HEAD/export-charts-pdf/public/logo512.png -------------------------------------------------------------------------------- /react-native-i18n/assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KaterinaLupacheva/tutorials/HEAD/react-native-i18n/assets/favicon.png -------------------------------------------------------------------------------- /export-charts-pdf/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "editor.defaultFormatter": "esbenp.prettier-vscode", 3 | "editor.formatOnSave": true 4 | } -------------------------------------------------------------------------------- /nextjs-dashboard-layout/next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | module.exports = { 3 | reactStrictMode: true, 4 | } 5 | -------------------------------------------------------------------------------- /react-native-i18n/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "expo/tsconfig.base", 3 | "compilerOptions": { 4 | "strict": true 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /nextjs-dashboard-layout/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KaterinaLupacheva/tutorials/HEAD/nextjs-dashboard-layout/public/favicon.ico -------------------------------------------------------------------------------- /react-native-i18n/assets/adaptive-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KaterinaLupacheva/tutorials/HEAD/react-native-i18n/assets/adaptive-icon.png -------------------------------------------------------------------------------- /react-native-i18n/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = function(api) { 2 | api.cache(true); 3 | return { 4 | presets: ['babel-preset-expo'], 5 | }; 6 | }; 7 | -------------------------------------------------------------------------------- /nextjs-dashboard-layout/pages/smb.tsx: -------------------------------------------------------------------------------- 1 | import type { NextPage } from "next"; 2 | 3 | const SMB: NextPage = () => { 4 | return
SMB
; 5 | }; 6 | 7 | export default SMB; 8 | -------------------------------------------------------------------------------- /nextjs-dashboard-layout/pages/index.tsx: -------------------------------------------------------------------------------- 1 | import type { NextPage } from "next"; 2 | 3 | const Home: NextPage = () => { 4 | return
Content
; 5 | }; 6 | 7 | export default Home; 8 | -------------------------------------------------------------------------------- /nextjs-dashboard-layout/pages/orders.tsx: -------------------------------------------------------------------------------- 1 | import type { NextPage } from "next"; 2 | 3 | const Orders: NextPage = () => { 4 | return
Orders
; 5 | }; 6 | 7 | export default Orders; 8 | -------------------------------------------------------------------------------- /nextjs-dashboard-layout/pages/retail.tsx: -------------------------------------------------------------------------------- 1 | import type { NextPage } from "next"; 2 | 3 | const Retail: NextPage = () => { 4 | return
Retail
; 5 | }; 6 | 7 | export default Retail; 8 | -------------------------------------------------------------------------------- /nextjs-dashboard-layout/components/Footer/index.tsx: -------------------------------------------------------------------------------- 1 | import { FooterContainer } from "./styles"; 2 | 3 | export default function Footer() { 4 | return Footer; 5 | } 6 | -------------------------------------------------------------------------------- /nextjs-dashboard-layout/pages/corporate.tsx: -------------------------------------------------------------------------------- 1 | import type { NextPage } from "next"; 2 | 3 | const Corporate: NextPage = () => { 4 | return
Corporate
; 5 | }; 6 | 7 | export default Corporate; 8 | -------------------------------------------------------------------------------- /nextjs-dashboard-layout/pages/customers.tsx: -------------------------------------------------------------------------------- 1 | import type { NextPage } from "next"; 2 | 3 | const Customers: NextPage = () => { 4 | return
Customers
; 5 | }; 6 | 7 | export default Customers; 8 | -------------------------------------------------------------------------------- /nextjs-dashboard-layout/pages/inventory.tsx: -------------------------------------------------------------------------------- 1 | import type { NextPage } from "next"; 2 | 3 | const Inventory: NextPage = () => { 4 | return
Inventory
; 5 | }; 6 | 7 | export default Inventory; 8 | -------------------------------------------------------------------------------- /nextjs-dashboard-layout/pages/new-orders.tsx: -------------------------------------------------------------------------------- 1 | import type { NextPage } from "next"; 2 | 3 | const NewOrders: NextPage = () => { 4 | return
New Orders
; 5 | }; 6 | 7 | export default NewOrders; 8 | -------------------------------------------------------------------------------- /react-native-i18n/.expo-shared/assets.json: -------------------------------------------------------------------------------- 1 | { 2 | "12bb71342c6255bbf50437ec8f4441c083f47cdb74bd89160c15e4f43e52a1cb": true, 3 | "40b842e832070c58deac6aa9e08fa459302ee3f9da492c7e77d93d2fbf4a56fd": true 4 | } 5 | -------------------------------------------------------------------------------- /react-ga-consent/src/ga-utils.ts: -------------------------------------------------------------------------------- 1 | import * as ReactGA from "react-ga"; 2 | 3 | export const initGA = (id: string) => { 4 | if (process.env.NODE_ENV === "production") { 5 | ReactGA.initialize(id); 6 | } 7 | }; 8 | -------------------------------------------------------------------------------- /nextjs-dashboard-layout/pages/completed-orders.tsx: -------------------------------------------------------------------------------- 1 | import type { NextPage } from "next"; 2 | 3 | const CompletedOrders: NextPage = () => { 4 | return
Completed Orders
; 5 | }; 6 | 7 | export default CompletedOrders; 8 | -------------------------------------------------------------------------------- /react-native-i18n/translations/index.ts: -------------------------------------------------------------------------------- 1 | export { default as be } from "./be.json"; 2 | export { default as en } from "./en.json"; 3 | export { default as de } from "./de.json"; 4 | export { default as es } from "./es.json"; 5 | export { default as fr } from "./fr.json"; 6 | -------------------------------------------------------------------------------- /export-charts-pdf/src/setupTests.ts: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /nextjs-dashboard-layout/next-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | /// 4 | 5 | // NOTE: This file should not be edited 6 | // see https://nextjs.org/docs/basic-features/typescript for more information. 7 | -------------------------------------------------------------------------------- /react-ga-consent/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | 6 | ReactDOM.render( 7 | 8 | 9 | , 10 | document.getElementById('root') 11 | ); 12 | -------------------------------------------------------------------------------- /nextjs-dashboard-layout/components/Footer/styles.ts: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | 3 | export const FooterContainer = styled.footer` 4 | display: flex; 5 | background: #00022e; 6 | height: 50px; 7 | align-items: center; 8 | justify-content: center; 9 | color: #fc86aa; 10 | `; 11 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | /react-ga-consent/node_modules 2 | /react-native-i18next/node_modules 3 | /react-native-i18next/script/secret.json 4 | node_modules/ 5 | .expo/ 6 | npm-debug.* 7 | *.jks 8 | *.p8 9 | *.p12 10 | *.key 11 | *.mobileprovision 12 | *.orig.* 13 | web-build/ 14 | 15 | # macOS 16 | .DS_Store 17 | 18 | secret.json -------------------------------------------------------------------------------- /nextjs-dashboard-layout/components/Sidebar/styles.ts: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | 3 | export const SidebarContainer = styled.aside<{ isOpened: boolean }>` 4 | background: #d8dcd6; 5 | width: ${(props) => (props.isOpened ? "20vw" : "0vw")}; 6 | transition: width 0.5s; 7 | overflow: hidden; 8 | `; 9 | -------------------------------------------------------------------------------- /react-native-i18n/README.md: -------------------------------------------------------------------------------- 1 | Source code for the tutorial [React Native Internationalization with i18next](https://ramonak.io/posts/react-native-internationalization) 2 | 3 | ## To run locally 4 | 5 | 1. Clone this repo 6 | 2. Run ```cd react-native-i18n``` 7 | 3. Run ```npm install``` 8 | 4. Run ```npm run ios``` or ```npm run android``` 9 | -------------------------------------------------------------------------------- /export-charts-pdf/README.md: -------------------------------------------------------------------------------- 1 | Source code for the tutorial [Export multiple charts to PDF with React and jsPDF](https://ramonak.io/posts/highcharts-react-pdf) 2 | 3 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). 4 | 5 | ## Run the code 6 | 7 | 1. Clone this repo 8 | 2. Run ```npm install``` 9 | 3. Run ```npm start``` 10 | -------------------------------------------------------------------------------- /nextjs-dashboard-layout/styles/globals.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | padding: 0; 4 | margin: 0; 5 | font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, 6 | Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; 7 | } 8 | 9 | a { 10 | color: inherit; 11 | text-decoration: none; 12 | } 13 | 14 | * { 15 | box-sizing: border-box; 16 | } 17 | -------------------------------------------------------------------------------- /react-ga-consent/README.md: -------------------------------------------------------------------------------- 1 | Source code for the tutorial [React: enable Google Analytics after a user grants consent](https://ramonak.io/posts/react-google-analytics-consent) 2 | 3 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). 4 | 5 | ## Run the code 6 | 7 | 1. Clone this repo 8 | 2. Run ```npm install``` 9 | 3. Run ```npm start``` 10 | -------------------------------------------------------------------------------- /nextjs-dashboard-layout/pages/_app.tsx: -------------------------------------------------------------------------------- 1 | import "../styles/globals.css"; 2 | import type { AppProps } from "next/app"; 3 | import DashboardLayout from "../components/DashboardLayout"; 4 | 5 | function MyApp({ Component, pageProps }: AppProps) { 6 | return ( 7 | 8 | 9 | 10 | ); 11 | } 12 | 13 | export default MyApp; 14 | -------------------------------------------------------------------------------- /nextjs-dashboard-layout/pages/api/hello.ts: -------------------------------------------------------------------------------- 1 | // Next.js API route support: https://nextjs.org/docs/api-routes/introduction 2 | import type { NextApiRequest, NextApiResponse } from 'next' 3 | 4 | type Data = { 5 | name: string 6 | } 7 | 8 | export default function handler( 9 | req: NextApiRequest, 10 | res: NextApiResponse 11 | ) { 12 | res.status(200).json({ name: 'John Doe' }) 13 | } 14 | -------------------------------------------------------------------------------- /react-ga-consent/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /export-charts-pdf/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /export-charts-pdf/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | display: flex; 3 | flex-direction: column; 4 | align-items: center; 5 | padding: 40px 0; 6 | } 7 | 8 | .custom-chart { 9 | height: 100%; 10 | margin-bottom: 50px; 11 | } 12 | 13 | .row { 14 | display: flex; 15 | } 16 | 17 | .button { 18 | background: black; 19 | color: white; 20 | border: black; 21 | padding: 4px; 22 | cursor: pointer; 23 | margin-bottom: 30px; 24 | } 25 | -------------------------------------------------------------------------------- /export-charts-pdf/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /react-ga-consent/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /nextjs-dashboard-layout/components/DashboardLayout/styles.ts: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | 3 | export const Container = styled.div` 4 | text-align: center; 5 | display: flex; 6 | flex-direction: column; 7 | min-height: 100vh; 8 | color: #000133; 9 | `; 10 | 11 | export const Content = styled.div` 12 | display: flex; 13 | flex: 1; 14 | `; 15 | 16 | export const PageContainer = styled.div` 17 | padding: 20px; 18 | width: 80vw; 19 | `; 20 | -------------------------------------------------------------------------------- /nextjs-dashboard-layout/components/ExpandIcon/index.tsx: -------------------------------------------------------------------------------- 1 | import { ExpandMore, ExpandLess } from "@styled-icons/material"; 2 | 3 | type ExpandIconPros = { 4 | isExpanded: boolean; 5 | handleClick: () => void; 6 | }; 7 | 8 | export default function ExpandIcon({ 9 | isExpanded, 10 | handleClick, 11 | }: ExpandIconPros) { 12 | return isExpanded ? ( 13 | 14 | ) : ( 15 | 16 | ); 17 | } 18 | -------------------------------------------------------------------------------- /nextjs-dashboard-layout/components/MenuItemsList/index.tsx: -------------------------------------------------------------------------------- 1 | import { MenuItem as MenuItemType } from "../../constants/menu-items"; 2 | import MenuItem from "../MenuItem"; 3 | 4 | type MenuItemsListProps = { 5 | options: MenuItemType[]; 6 | }; 7 | 8 | export default function MenuItemsList({ options }: MenuItemsListProps) { 9 | return ( 10 | <> 11 | {options.map((option) => ( 12 | 13 | ))} 14 | 15 | ); 16 | } 17 | -------------------------------------------------------------------------------- /nextjs-dashboard-layout/components/Sidebar/index.tsx: -------------------------------------------------------------------------------- 1 | import { SidebarContainer } from "./styles"; 2 | import { MENU_ITEMS } from "../../constants/menu-items"; 3 | import MenuItemsList from "../MenuItemsList"; 4 | 5 | type SidebarProps = { 6 | isOpened: boolean; 7 | }; 8 | 9 | export default function Sidebar({ isOpened }: SidebarProps) { 10 | return ( 11 | 12 | 13 | 14 | ); 15 | } 16 | -------------------------------------------------------------------------------- /export-charts-pdf/src/reportWebVitals.ts: -------------------------------------------------------------------------------- 1 | import { ReportHandler } from 'web-vitals'; 2 | 3 | const reportWebVitals = (onPerfEntry?: ReportHandler) => { 4 | if (onPerfEntry && onPerfEntry instanceof Function) { 5 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 6 | getCLS(onPerfEntry); 7 | getFID(onPerfEntry); 8 | getFCP(onPerfEntry); 9 | getLCP(onPerfEntry); 10 | getTTFB(onPerfEntry); 11 | }); 12 | } 13 | }; 14 | 15 | export default reportWebVitals; 16 | -------------------------------------------------------------------------------- /export-charts-pdf/src/Chart.tsx: -------------------------------------------------------------------------------- 1 | import HighchartsReact from "highcharts-react-official"; 2 | import Highcharts from "highcharts"; 3 | 4 | type ChartProps = { 5 | chartOptions: Highcharts.Options; 6 | }; 7 | 8 | export default function Chart({ chartOptions }: ChartProps) { 9 | return ( 10 |
11 | 16 |
17 | ); 18 | } 19 | -------------------------------------------------------------------------------- /nextjs-dashboard-layout/components/Header/styles.ts: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | 3 | export const HeaderContainer = styled.header` 4 | display: flex; 5 | background: #00022e; 6 | height: 50px; 7 | align-items: center; 8 | justify-content: center; 9 | color: #fc86aa; 10 | `; 11 | 12 | export const TitleContainer = styled.div` 13 | margin: auto; 14 | `; 15 | 16 | export const IconContainer = styled.div` 17 | padding: 10px; 18 | cursor: pointer; 19 | 20 | & svg { 21 | height: 30px; 22 | } 23 | `; 24 | -------------------------------------------------------------------------------- /export-charts-pdf/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | 7 | ReactDOM.render( 8 | 9 | 10 | , 11 | document.getElementById('root') 12 | ); 13 | 14 | // If you want to start measuring performance in your app, pass a function 15 | // to log results (for example: reportWebVitals(console.log)) 16 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 17 | reportWebVitals(); 18 | -------------------------------------------------------------------------------- /nextjs-dashboard-layout/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | *.pem 21 | 22 | # debug 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | 27 | # local env files 28 | .env.local 29 | .env.development.local 30 | .env.test.local 31 | .env.production.local 32 | 33 | # vercel 34 | .vercel 35 | 36 | # typescript 37 | *.tsbuildinfo 38 | -------------------------------------------------------------------------------- /nextjs-dashboard-layout/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "strict": true, 8 | "forceConsistentCasingInFileNames": true, 9 | "noEmit": true, 10 | "esModuleInterop": true, 11 | "module": "esnext", 12 | "moduleResolution": "node", 13 | "resolveJsonModule": true, 14 | "isolatedModules": true, 15 | "jsx": "preserve", 16 | "incremental": true 17 | }, 18 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], 19 | "exclude": ["node_modules"] 20 | } 21 | -------------------------------------------------------------------------------- /nextjs-dashboard-layout/components/Header/index.tsx: -------------------------------------------------------------------------------- 1 | import { HeaderContainer, TitleContainer, IconContainer } from "./styles"; 2 | import { Menu, ChevronLeft } from "@styled-icons/material"; 3 | 4 | type HeaderProps = { 5 | isOpened: boolean; 6 | toggleDrawer: () => void; 7 | }; 8 | 9 | export default function Header({ isOpened, toggleDrawer }: HeaderProps) { 10 | return ( 11 | 12 | 13 | {isOpened ? : } 14 | 15 | Header 16 | 17 | ); 18 | } 19 | -------------------------------------------------------------------------------- /export-charts-pdf/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /react-ga-consent/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Tutorials source code 2 | 3 | This repo contains a source code for my [blog posts](https://ramonak.io/) demo apps. 4 | 5 | ## Content 6 | 7 | - [React: enable Google Analytics after a user grants consent](https://github.com/KaterinaLupacheva/tutorials/tree/master/react-ga-consent) 8 | - [React Native Internationalization with i18next](https://github.com/KaterinaLupacheva/tutorials/tree/master/react-native-i18n) 9 | - [Next.js Dashboard Layout](https://github.com/KaterinaLupacheva/tutorials/tree/master/nextjs-dashboard-layout) 10 | - [Export charts to PDF](https://github.com/KaterinaLupacheva/tutorials/tree/master/export-charts-pdf) 11 | -------------------------------------------------------------------------------- /export-charts-pdf/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": [ 5 | "dom", 6 | "dom.iterable", 7 | "esnext" 8 | ], 9 | "allowJs": true, 10 | "skipLibCheck": true, 11 | "esModuleInterop": true, 12 | "allowSyntheticDefaultImports": true, 13 | "strict": true, 14 | "forceConsistentCasingInFileNames": true, 15 | "noFallthroughCasesInSwitch": true, 16 | "module": "esnext", 17 | "moduleResolution": "node", 18 | "resolveJsonModule": true, 19 | "isolatedModules": true, 20 | "noEmit": true, 21 | "jsx": "react-jsx" 22 | }, 23 | "include": [ 24 | "src" 25 | ] 26 | } 27 | -------------------------------------------------------------------------------- /nextjs-dashboard-layout/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "nextjs-dashboard-layout", 3 | "private": true, 4 | "scripts": { 5 | "dev": "next dev", 6 | "build": "next build", 7 | "start": "next start", 8 | "lint": "next lint" 9 | }, 10 | "dependencies": { 11 | "@styled-icons/material": "^10.34.0", 12 | "next": "12.0.4", 13 | "react": "17.0.2", 14 | "react-dom": "17.0.2", 15 | "styled-components": "^5.3.3" 16 | }, 17 | "devDependencies": { 18 | "@types/node": "16.11.10", 19 | "@types/react": "17.0.37", 20 | "@types/styled-components": "^5.1.15", 21 | "eslint": "7", 22 | "eslint-config-next": "12.0.4", 23 | "typescript": "4.5.2" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /react-ga-consent/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 40vmin; 7 | pointer-events: none; 8 | } 9 | 10 | @media (prefers-reduced-motion: no-preference) { 11 | .App-logo { 12 | animation: App-logo-spin infinite 20s linear; 13 | } 14 | } 15 | 16 | .App-header { 17 | background-color: #282c34; 18 | min-height: 100vh; 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | justify-content: center; 23 | font-size: calc(10px + 2vmin); 24 | color: white; 25 | } 26 | 27 | .App-link { 28 | color: #61dafb; 29 | } 30 | 31 | @keyframes App-logo-spin { 32 | from { 33 | transform: rotate(0deg); 34 | } 35 | to { 36 | transform: rotate(360deg); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /react-ga-consent/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": [ 5 | "es2017", 6 | "dom", 7 | "dom.iterable", 8 | "esnext" 9 | ], 10 | "allowJs": true, 11 | "skipLibCheck": true, 12 | "esModuleInterop": true, 13 | "allowSyntheticDefaultImports": true, 14 | "strict": true, 15 | "forceConsistentCasingInFileNames": true, 16 | "module": "esnext", 17 | "moduleResolution": "node", 18 | "resolveJsonModule": true, 19 | "isolatedModules": true, 20 | "noEmit": true, 21 | "jsx": "react-jsx", 22 | "noFallthroughCasesInSwitch": true 23 | }, 24 | "exclude": [ 25 | "node_modules", 26 | "build" 27 | ], 28 | "include": [ 29 | "src" 30 | ] 31 | } 32 | -------------------------------------------------------------------------------- /export-charts-pdf/src/App.tsx: -------------------------------------------------------------------------------- 1 | import "./App.css"; 2 | import Chart from "./Chart"; 3 | import { 4 | barChartOptions, 5 | columnChartOptions, 6 | lineChartOptions, 7 | } from "./options"; 8 | import { exportMultipleChartsToPdf } from "./utils"; 9 | 10 | function App() { 11 | return ( 12 |
13 | 16 | 17 | 18 | 19 |
20 | 21 | 22 |
23 |
24 | ); 25 | } 26 | 27 | export default App; 28 | -------------------------------------------------------------------------------- /nextjs-dashboard-layout/components/MenuItem/styles.ts: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | 3 | export const MenuItemContainer = styled.a<{ depth: number }>` 4 | display: flex; 5 | flex-direction: row; 6 | font-size: 20px; 7 | padding: 10px 0px 10px 10px; 8 | align-items: center; 9 | justify-content: space-between; 10 | 11 | & svg { 12 | height: 30px; 13 | margin-right: 10px; 14 | } 15 | 16 | &:hover { 17 | background-color: #00022e; 18 | color: #fc86aa; 19 | opacity: 0.5; 20 | cursor: pointer; 21 | } 22 | 23 | .menu-item { 24 | display: flex; 25 | flex-direction: row; 26 | align-items: center; 27 | margin-left: ${({ depth }) => `${depth}rem`}; 28 | } 29 | 30 | &.selected { 31 | background-color: #00022e; 32 | color: #fff; 33 | } 34 | `; 35 | -------------------------------------------------------------------------------- /react-native-i18n/app.json: -------------------------------------------------------------------------------- 1 | { 2 | "expo": { 3 | "name": "react-native-i18next", 4 | "slug": "react-native-i18next", 5 | "version": "1.0.0", 6 | "orientation": "portrait", 7 | "icon": "./assets/icon.png", 8 | "splash": { 9 | "image": "./assets/splash.png", 10 | "resizeMode": "contain", 11 | "backgroundColor": "#ffffff" 12 | }, 13 | "updates": { 14 | "fallbackToCacheTimeout": 0 15 | }, 16 | "assetBundlePatterns": [ 17 | "**/*" 18 | ], 19 | "ios": { 20 | "supportsTablet": true 21 | }, 22 | "android": { 23 | "adaptiveIcon": { 24 | "foregroundImage": "./assets/adaptive-icon.png", 25 | "backgroundColor": "#FFFFFF" 26 | } 27 | }, 28 | "web": { 29 | "favicon": "./assets/favicon.png" 30 | } 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /nextjs-dashboard-layout/components/DashboardLayout/index.tsx: -------------------------------------------------------------------------------- 1 | import Header from "../Header"; 2 | import Footer from "../Footer"; 3 | import Sidebar from "../Sidebar"; 4 | import { Container, Content, PageContainer } from "./styles"; 5 | import { useState } from "react"; 6 | 7 | type DashboardLayoutProps = { 8 | children: React.ReactNode; 9 | }; 10 | 11 | export default function DashboardLayout({ children }: DashboardLayoutProps) { 12 | const [isOpened, setOpened] = useState(false); 13 | 14 | const toggleDrawer = () => { 15 | setOpened((prev) => !prev); 16 | }; 17 | 18 | return ( 19 | 20 |
21 | 22 | 23 | {children} 24 | 25 |