├── .gitignore ├── 3d-force-chart ├── .env ├── .eslintignore ├── .eslintrc ├── .gitignore ├── .prettierrc ├── README.md ├── README_CRA.md ├── e2e │ ├── app.test.tsx │ ├── global.d.ts │ ├── jest.config.js │ └── puppeteer_standalone.js ├── generate-react-cli.json ├── jest-puppeteer.config.js ├── package.json ├── public │ ├── data │ │ └── power_network.json │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt ├── src │ ├── App.scss │ ├── App.test.tsx │ ├── App.tsx │ ├── AppRouter.test.tsx │ ├── AppRouter.tsx │ ├── assets │ │ └── README │ ├── components │ │ ├── README │ │ └── Simple3DForceGraph │ │ │ ├── Simple3DForceGraph.tsx │ │ │ └── types.ts │ ├── index.scss │ ├── index.tsx │ ├── logo.svg │ ├── react-app-env.d.ts │ ├── recoil │ │ ├── atoms │ │ │ └── README │ │ └── selectors │ │ │ ├── README │ │ │ └── forceGraphSelectors.ts │ ├── redux │ │ └── store.ts │ ├── serviceWorker.ts │ ├── setupTests.ts │ └── widgets │ │ ├── NetworkWidget │ │ ├── NetworkWidget.scss │ │ ├── NetworkWidget.test.tsx │ │ └── NetworkWidget.tsx │ │ └── README ├── templates │ ├── component │ │ ├── TemplateName.scss │ │ ├── TemplateName.test.tsx │ │ └── TemplateName.tsx │ ├── d3 │ │ └── TemplateName.tsx │ ├── d3class │ │ └── TemplateName.tsx │ ├── d3widget │ │ ├── TemplateName.tsx │ │ └── types.ts │ ├── d3widgetcomponent │ │ ├── TemplateName.tsx │ │ └── TemplateNameHelper.tsx │ ├── materialui │ │ └── TemplateName.tsx │ ├── page │ │ ├── TemplateName.scss │ │ ├── TemplateName.test.tsx │ │ └── TemplateName.tsx │ ├── recoil │ │ ├── TemplateName.test.tsx │ │ └── TemplateName.tsx │ └── widget │ │ └── TemplateName.tsx └── tsconfig.json ├── LICENSE ├── README.md ├── SECURITY.md ├── area-brush ├── .env ├── .eslintignore ├── .eslintrc ├── .gitignore ├── .prettierrc ├── README.md ├── README_CRA.md ├── e2e │ ├── app.test.tsx │ ├── global.d.ts │ ├── jest.config.js │ └── puppeteer_standalone.js ├── generate-react-cli.json ├── jest-puppeteer.config.js ├── package.json ├── public │ ├── data │ │ └── area.csv │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt ├── src │ ├── App.scss │ ├── App.test.tsx │ ├── App.tsx │ ├── AppRouter.test.tsx │ ├── AppRouter.tsx │ ├── assets │ │ └── README │ ├── components │ │ ├── Brush │ │ │ ├── Brush.tsx │ │ │ └── BrushHelper.tsx │ │ └── README │ ├── features │ │ └── README │ ├── hooks │ │ ├── README │ │ └── WindowDimensions.tsx │ ├── index.scss │ ├── index.tsx │ ├── layout │ │ └── README │ ├── logo.svg │ ├── model │ │ └── README │ ├── pages │ │ └── README │ ├── react-app-env.d.ts │ ├── recoil │ │ ├── atoms │ │ │ └── README │ │ └── selectors │ │ │ └── README │ ├── redux │ │ └── store.ts │ ├── serviceWorker.ts │ ├── setupTests.ts │ └── widgets │ │ ├── ChartWidget │ │ ├── ChartWidget.scss │ │ ├── ChartWidget.tsx │ │ └── types.ts │ │ └── README ├── templates │ ├── component │ │ ├── TemplateName.scss │ │ ├── TemplateName.test.tsx │ │ └── TemplateName.tsx │ ├── d3 │ │ └── TemplateName.tsx │ ├── d3class │ │ └── TemplateName.tsx │ ├── d3widget │ │ ├── TemplateName.tsx │ │ └── types.ts │ ├── d3widgetcomponent │ │ ├── TemplateName.tsx │ │ └── TemplateNameHelper.tsx │ ├── materialui │ │ └── TemplateName.tsx │ ├── page │ │ ├── TemplateName.scss │ │ ├── TemplateName.test.tsx │ │ └── TemplateName.tsx │ ├── recoil │ │ ├── TemplateName.test.tsx │ │ └── TemplateName.tsx │ └── widget │ │ └── TemplateName.tsx └── tsconfig.json ├── area-chart-with-brush ├── .env ├── .eslintignore ├── .eslintrc ├── .gitignore ├── .prettierrc ├── README.md ├── README_CRA.md ├── e2e │ ├── app.test.tsx │ ├── global.d.ts │ ├── jest.config.js │ └── puppeteer_standalone.js ├── generate-react-cli.json ├── jest-puppeteer.config.js ├── package.json ├── public │ ├── data │ │ └── area.csv │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt ├── src │ ├── App.old │ ├── App.scss │ ├── App.test.tsx │ ├── App.tsx │ ├── AppRouter.test.tsx │ ├── AppRouter.tsx │ ├── assets │ │ └── README │ ├── components │ │ ├── AreaChart │ │ │ ├── AreaChart.scss │ │ │ ├── AreaChart.test.tsx │ │ │ ├── AreaChart.tsx │ │ │ └── AreaChartHelper.tsx │ │ ├── Brush │ │ │ ├── Brush.scss │ │ │ ├── Brush.test.tsx │ │ │ └── Brush.tsx │ │ └── README │ ├── features │ │ └── README │ ├── hooks │ │ ├── README │ │ └── WindowDimensions.tsx │ ├── index.scss │ ├── index.tsx │ ├── layout │ │ └── README │ ├── logo.svg │ ├── model │ │ └── README │ ├── pages │ │ └── README │ ├── react-app-env.d.ts │ ├── recoil │ │ ├── atoms │ │ │ └── README │ │ └── selectors │ │ │ └── README │ ├── redux │ │ └── store.ts │ ├── serviceWorker.ts │ ├── setupTests.ts │ └── widgets │ │ ├── ChartWidget │ │ ├── ChartWidget.scss │ │ ├── ChartWidget.test.tsx │ │ ├── ChartWidget.tsx │ │ └── types.ts │ │ └── README ├── templates │ ├── component │ │ ├── TemplateName.scss │ │ ├── TemplateName.test.tsx │ │ └── TemplateName.tsx │ ├── d3 │ │ └── TemplateName.tsx │ ├── d3class │ │ └── TemplateName.tsx │ ├── d3widget │ │ ├── TemplateName.tsx │ │ └── types.ts │ ├── d3widgetcomponent │ │ ├── TemplateName.tsx │ │ └── TemplateNameHelper.tsx │ ├── materialui │ │ └── TemplateName.tsx │ ├── page │ │ ├── TemplateName.scss │ │ ├── TemplateName.test.tsx │ │ └── TemplateName.tsx │ ├── recoil │ │ ├── TemplateName.test.tsx │ │ └── TemplateName.tsx │ └── widget │ │ └── TemplateName.tsx └── tsconfig.json ├── basic-charts ├── .env ├── .eslintignore ├── .eslintrc ├── .gitignore ├── .prettierrc ├── README.md ├── README_CRA.md ├── e2e │ ├── app.test.tsx │ ├── global.d.ts │ ├── jest.config.js │ └── puppeteer_standalone.js ├── generate-react-cli.json ├── jest-puppeteer.config.js ├── package.json ├── public │ ├── data │ │ ├── area.csv │ │ ├── bar.csv │ │ ├── line.csv │ │ ├── pie.csv │ │ └── scatter.csv │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt ├── src │ ├── App.scss │ ├── App.test.tsx │ ├── App.tsx │ ├── AppRouter.test.tsx │ ├── AppRouter.tsx │ ├── assets │ │ └── README │ ├── components │ │ ├── BasicAreaChart │ │ │ ├── BasicAreaChart.scss │ │ │ ├── BasicAreaChart.test.tsx │ │ │ ├── BasicAreaChart.tsx │ │ │ └── types.ts │ │ ├── BasicBarChart │ │ │ ├── BasicBarChart.scss │ │ │ ├── BasicBarChart.test.tsx │ │ │ ├── BasicBarChart.tsx │ │ │ └── types.ts │ │ ├── BasicLineChart │ │ │ ├── BasicLineChart.scss │ │ │ ├── BasicLineChart.test.tsx │ │ │ ├── BasicLineChart.tsx │ │ │ └── types.ts │ │ ├── BasicPieChart │ │ │ ├── BasicPieChart.scss │ │ │ ├── BasicPieChart.test.tsx │ │ │ ├── BasicPieChart.tsx │ │ │ └── types.ts │ │ ├── BasicScatterChart │ │ │ ├── BasicScatterChart.scss │ │ │ ├── BasicScatterChart.test.tsx │ │ │ ├── BasicScatterChart.tsx │ │ │ └── types.ts │ │ └── README │ ├── features │ │ └── README │ ├── index.scss │ ├── index.tsx │ ├── layout │ │ └── README │ ├── logo.svg │ ├── model │ │ └── README │ ├── pages │ │ └── README │ ├── react-app-env.d.ts │ ├── recoil │ │ ├── atoms │ │ │ └── README │ │ └── selectors │ │ │ └── README │ ├── redux │ │ └── store.ts │ ├── serviceWorker.ts │ └── setupTests.ts ├── templates │ ├── component │ │ ├── component.js │ │ ├── component.tsx │ │ ├── style.scss │ │ ├── test.js │ │ └── test.tsx │ ├── d3 │ │ └── component.tsx │ ├── d3class │ │ └── component.tsx │ ├── page │ │ ├── component.tsx │ │ ├── style.scss │ │ └── test.tsx │ └── recoil │ │ ├── component.tsx │ │ └── test.tsx └── tsconfig.json ├── binary-tree-ts ├── BinaryTree.tsx └── LinkedList.tsx ├── bisector ├── .env ├── .eslintignore ├── .eslintrc ├── .gitignore ├── .prettierrc ├── README.md ├── README_CRA.md ├── e2e │ ├── app.test.tsx │ ├── global.d.ts │ ├── jest.config.js │ └── puppeteer_standalone.js ├── generate-react-cli.json ├── jest-puppeteer.config.js ├── package.json ├── public │ ├── data │ │ └── line.csv │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt ├── src │ ├── App.scss │ ├── App.test.tsx │ ├── App.tsx │ ├── AppRouter.test.tsx │ ├── AppRouter.tsx │ ├── assets │ │ └── README │ ├── components │ │ ├── LineChartBisector │ │ │ ├── LineChartBisector.tsx │ │ │ └── LineChartHelper.tsx │ │ ├── LineChartDateBisector │ │ │ ├── LineChartDateBisector.tsx │ │ │ └── LineChartDateBisectorHelper.tsx │ │ └── README │ ├── features │ │ └── README │ ├── hooks │ │ ├── README │ │ └── WindowDimensions.tsx │ ├── index.scss │ ├── index.tsx │ ├── layout │ │ └── README │ ├── logo.svg │ ├── model │ │ └── README │ ├── pages │ │ └── README │ ├── react-app-env.d.ts │ ├── recoil │ │ ├── atoms │ │ │ └── README │ │ └── selectors │ │ │ └── README │ ├── redux │ │ └── store.ts │ ├── serviceWorker.ts │ ├── setupTests.ts │ └── widgets │ │ ├── LineChartBisectorWidget │ │ ├── LineChartBisectorWidget.tsx │ │ └── types.ts │ │ ├── LineChartDateBisectorWidget │ │ ├── LineChartDateBisectorWidget.tsx │ │ └── types.ts │ │ └── README ├── templates │ ├── component │ │ ├── TemplateName.scss │ │ ├── TemplateName.test.tsx │ │ └── TemplateName.tsx │ ├── d3 │ │ └── TemplateName.tsx │ ├── d3class │ │ └── TemplateName.tsx │ ├── d3widget │ │ ├── TemplateName.tsx │ │ └── types.ts │ ├── d3widgetcomponent │ │ ├── TemplateName.tsx │ │ └── TemplateNameHelper.tsx │ ├── materialui │ │ └── TemplateName.tsx │ ├── page │ │ ├── TemplateName.scss │ │ ├── TemplateName.test.tsx │ │ └── TemplateName.tsx │ ├── recoil │ │ ├── TemplateName.test.tsx │ │ └── TemplateName.tsx │ └── widget │ │ └── TemplateName.tsx └── tsconfig.json ├── bubble-chart ├── .env ├── .eslintignore ├── .eslintrc ├── .gitignore ├── .prettierrc ├── README.md ├── README_CRA.md ├── e2e │ ├── app.test.tsx │ ├── global.d.ts │ ├── jest.config.js │ └── puppeteer_standalone.js ├── generate-react-cli.json ├── jest-puppeteer.config.js ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt ├── src │ ├── App.scss │ ├── App.test.tsx │ ├── App.tsx │ ├── AppRouter.test.tsx │ ├── AppRouter.tsx │ ├── assets │ │ └── README │ ├── components │ │ ├── BubbleChart │ │ │ ├── BubbleChart.scss │ │ │ ├── BubbleChart.test.tsx │ │ │ ├── BubbleChart.tsx │ │ │ └── types.tsx │ │ └── README │ ├── features │ │ └── README │ ├── hooks │ │ └── README │ ├── index.scss │ ├── index.tsx │ ├── layout │ │ └── README │ ├── logo.svg │ ├── model │ │ └── README │ ├── pages │ │ └── README │ ├── react-app-env.d.ts │ ├── recoil │ │ ├── atoms │ │ │ └── README │ │ └── selectors │ │ │ └── README │ ├── redux │ │ └── store.ts │ ├── serviceWorker.ts │ ├── setupTests.ts │ └── widgets │ │ └── README ├── templates │ ├── component │ │ ├── component.js │ │ ├── component.tsx │ │ ├── style.scss │ │ ├── test.js │ │ └── test.tsx │ ├── d3 │ │ └── component.tsx │ ├── d3class │ │ └── component.tsx │ ├── materialui │ │ └── materialui.tsx │ ├── page │ │ ├── component.tsx │ │ ├── style.scss │ │ └── test.tsx │ ├── recoil │ │ ├── component.tsx │ │ └── test.tsx │ └── widget │ │ └── Widget.tsx └── tsconfig.json ├── donut-chart ├── .env ├── .eslintignore ├── .eslintrc ├── .gitignore ├── .prettierrc ├── README.md ├── README_CRA.md ├── e2e │ ├── app.test.tsx │ ├── global.d.ts │ ├── jest.config.js │ └── puppeteer_standalone.js ├── generate-react-cli.json ├── jest-puppeteer.config.js ├── package.json ├── public │ ├── data │ │ └── donut.csv │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt ├── src │ ├── App.scss │ ├── App.test.tsx │ ├── App.tsx │ ├── AppRouter.test.tsx │ ├── AppRouter.tsx │ ├── assets │ │ └── README │ ├── components │ │ ├── DonutChart │ │ │ ├── DonutChart.scss │ │ │ ├── DonutChart.test.tsx │ │ │ ├── DonutChart.tsx │ │ │ └── DonutChartHelper.tsx │ │ └── README │ ├── features │ │ └── README │ ├── hooks │ │ ├── README │ │ └── WindowDimensions.tsx │ ├── index.scss │ ├── index.tsx │ ├── layout │ │ └── README │ ├── logo.svg │ ├── model │ │ └── README │ ├── pages │ │ └── README │ ├── react-app-env.d.ts │ ├── recoil │ │ ├── atoms │ │ │ └── README │ │ └── selectors │ │ │ └── README │ ├── redux │ │ └── store.ts │ ├── serviceWorker.ts │ ├── setupTests.ts │ └── widgets │ │ ├── DonutChartWidget │ │ ├── DonutChartWidget.scss │ │ ├── DonutChartWidget.test.tsx │ │ ├── DonutChartWidget.tsx │ │ └── types.ts │ │ └── README ├── templates │ ├── component │ │ ├── TemplateName.scss │ │ ├── TemplateName.test.tsx │ │ └── TemplateName.tsx │ ├── d3 │ │ └── TemplateName.tsx │ ├── d3class │ │ └── TemplateName.tsx │ ├── d3widget │ │ ├── TemplateName.tsx │ │ └── types.ts │ ├── d3widgetcomponent │ │ ├── TemplateName.tsx │ │ └── TemplateNameHelper.tsx │ ├── materialui │ │ └── TemplateName.tsx │ ├── page │ │ ├── TemplateName.scss │ │ ├── TemplateName.test.tsx │ │ └── TemplateName.tsx │ ├── recoil │ │ ├── TemplateName.test.tsx │ │ └── TemplateName.tsx │ └── widget │ │ └── TemplateName.tsx └── tsconfig.json ├── e2e_ts_testing_with_puppeteer ├── .env ├── .eslintignore ├── .eslintrc ├── .gitignore ├── .prettierrc ├── README.md ├── README_CRA.md ├── e2e │ ├── app.test.tsx │ ├── global.d.ts │ ├── jest.config.js │ └── puppeteer_standalone.js ├── generate-react-cli.json ├── jest-puppeteer.config.js ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt ├── src │ ├── App.css │ ├── App.test.tsx │ ├── App.tsx │ ├── assets │ │ └── README │ ├── components │ │ └── README │ ├── features │ │ └── README │ ├── index.css │ ├── index.tsx │ ├── layout │ │ └── README │ ├── logo.svg │ ├── model │ │ └── README │ ├── pages │ │ └── README │ ├── react-app-env.d.ts │ ├── recoil │ │ ├── atoms │ │ │ └── README │ │ └── selectors │ │ │ └── README │ ├── redux │ │ └── store.ts │ ├── serviceWorker.ts │ └── setupTests.ts ├── templates │ └── component │ │ ├── component.js │ │ ├── style.scss │ │ └── test.js └── tsconfig.json ├── ecr-ecs-github-ci-cd └── getting-started │ ├── .dockerignore │ ├── .github │ └── workflows │ │ ├── aws.yml │ │ └── build.yml │ ├── .gitignore │ ├── Dockerfile │ ├── Jenkinsfile │ ├── LICENSE │ ├── README.md │ ├── app │ ├── package.json │ ├── spec │ │ ├── persistence │ │ │ └── sqlite.spec.js │ │ └── routes │ │ │ ├── addItem.spec.js │ │ │ ├── deleteItem.spec.js │ │ │ ├── getItems.spec.js │ │ │ └── updateItem.spec.js │ ├── src │ │ ├── index.js │ │ ├── persistence │ │ │ ├── index.js │ │ │ ├── mysql.js │ │ │ └── sqlite.js │ │ ├── routes │ │ │ ├── addItem.js │ │ │ ├── deleteItem.js │ │ │ ├── getItems.js │ │ │ └── updateItem.js │ │ └── static │ │ │ ├── css │ │ │ ├── bootstrap.min.css │ │ │ ├── font-awesome │ │ │ │ ├── all.min.css │ │ │ │ ├── fa-brands-400.eot │ │ │ │ ├── fa-brands-400.svg#fontawesome │ │ │ │ ├── fa-brands-400.ttf │ │ │ │ ├── fa-brands-400.woff │ │ │ │ ├── fa-brands-400.woff2 │ │ │ │ ├── fa-regular-400.eot │ │ │ │ ├── fa-regular-400.svg#fontawesome │ │ │ │ ├── fa-regular-400.ttf │ │ │ │ ├── fa-regular-400.woff │ │ │ │ ├── fa-regular-400.woff2 │ │ │ │ ├── fa-solid-900.eot │ │ │ │ ├── fa-solid-900.svg#fontawesome │ │ │ │ ├── fa-solid-900.ttf │ │ │ │ ├── fa-solid-900.woff │ │ │ │ └── fa-solid-900.woff2 │ │ │ └── styles.css │ │ │ ├── index.html │ │ │ └── js │ │ │ ├── app.js │ │ │ ├── babel.min.js │ │ │ ├── react-bootstrap.js │ │ │ ├── react-dom.production.min.js │ │ │ └── react.production.min.js │ └── yarn.lock │ ├── build.sh │ ├── devops │ └── task-definition.json │ ├── docker-compose.yml │ ├── mkdocs.yml │ ├── requirements.txt │ └── yarn.lock ├── force-chart ├── .env ├── .eslintignore ├── .eslintrc ├── .gitignore ├── .prettierrc ├── README.md ├── README_CRA.md ├── e2e │ ├── app.test.tsx │ ├── global.d.ts │ ├── jest.config.js │ └── puppeteer_standalone.js ├── generate-react-cli.json ├── jest-puppeteer.config.js ├── package.json ├── public │ ├── data │ │ └── power_network.json │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt ├── src │ ├── App.scss │ ├── App.test.tsx │ ├── App.tsx │ ├── AppRouter.test.tsx │ ├── AppRouter.tsx │ ├── assets │ │ └── README │ ├── components │ │ ├── README │ │ └── SimpleForceGraph │ │ │ ├── Circle.tsx │ │ │ ├── Circles.tsx │ │ │ ├── Label.tsx │ │ │ ├── Labels.tsx │ │ │ ├── Link.tsx │ │ │ ├── Links.tsx │ │ │ ├── SimpleForceGraph.scss │ │ │ ├── SimpleForceGraph.tsx │ │ │ └── types.ts │ ├── features │ │ └── README │ ├── hooks │ │ └── README │ ├── index.scss │ ├── index.tsx │ ├── layout │ │ └── README │ ├── logo.svg │ ├── model │ │ └── README │ ├── pages │ │ └── README │ ├── react-app-env.d.ts │ ├── recoil │ │ ├── atoms │ │ │ └── README │ │ └── selectors │ │ │ ├── README │ │ │ └── powerChartSelectors.ts │ ├── redux │ │ └── store.ts │ ├── serviceWorker.ts │ ├── setupTests.ts │ └── widgets │ │ ├── NetworksWidget │ │ ├── NetworksWidget.scss │ │ └── NetworksWidget.tsx │ │ └── README ├── templates │ ├── component │ │ ├── component.js │ │ ├── component.tsx │ │ ├── style.scss │ │ ├── test.js │ │ └── test.tsx │ ├── d3 │ │ └── component.tsx │ ├── d3class │ │ └── component.tsx │ ├── materialui │ │ └── materialui.tsx │ ├── page │ │ ├── component.tsx │ │ ├── style.scss │ │ └── test.tsx │ ├── recoil │ │ ├── component.tsx │ │ └── test.tsx │ └── widget │ │ └── Widget.tsx └── tsconfig.json ├── functional-class-components ├── README.md ├── README_CRA.md ├── e2e │ ├── app.test.tsx │ ├── global.d.ts │ ├── jest.config.js │ └── puppeteer_standalone.js ├── generate-react-cli.json ├── jest-puppeteer.config.js ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt ├── src │ ├── App.scss │ ├── App.test.tsx │ ├── App.tsx │ ├── AppRouter.test.tsx │ ├── AppRouter.tsx │ ├── assets │ │ └── README │ ├── components │ │ ├── MyCounter │ │ │ ├── MyClassCounter.tsx │ │ │ └── MyCounter.tsx │ │ ├── README │ │ └── SpecialButton │ │ │ └── SpecialButton.tsx │ ├── features │ │ └── README │ ├── index.scss │ ├── index.tsx │ ├── layout │ │ ├── Centered │ │ │ ├── Centered.styles.ts │ │ │ ├── Centered.tsx │ │ │ └── index.ts │ │ └── README │ ├── logo.svg │ ├── model │ │ └── README │ ├── pages │ │ └── README │ ├── react-app-env.d.ts │ ├── recoil │ │ ├── atoms │ │ │ └── README │ │ └── selectors │ │ │ └── README │ ├── redux │ │ └── store.ts │ ├── serviceWorker.ts │ └── setupTests.ts ├── templates │ ├── component │ │ ├── component.js │ │ ├── component.tsx │ │ ├── style.scss │ │ ├── test.js │ │ └── test.tsx │ └── page │ │ ├── component.tsx │ │ ├── style.scss │ │ └── test.tsx ├── tsconfig.json └── yarn.lock ├── hello-jest-enzyme-ts ├── README.md ├── README_CRA.md ├── e2e │ ├── app.test.tsx │ ├── global.d.ts │ ├── jest.config.js │ └── puppeteer_standalone.js ├── generate-react-cli.json ├── jest-puppeteer.config.js ├── package.json ├── public │ ├── calculator-input.jpg │ ├── calculator.jpg │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt ├── src │ ├── App.scss │ ├── App.test.tsx │ ├── App.tsx │ ├── AppRouter.test.tsx │ ├── AppRouter.tsx │ ├── assets │ │ └── README │ ├── components │ │ ├── Calculator │ │ │ ├── Calculator.scss │ │ │ ├── Calculator.test.tsx │ │ │ ├── Calculator.tsx │ │ │ └── __snapshots__ │ │ │ │ └── Calculator.test.tsx.snap │ │ └── README │ ├── features │ │ └── README │ ├── index.scss │ ├── index.tsx │ ├── layout │ │ └── README │ ├── logo.svg │ ├── model │ │ └── README │ ├── pages │ │ └── README │ ├── react-app-env.d.ts │ ├── recoil │ │ ├── atoms │ │ │ └── README │ │ └── selectors │ │ │ └── README │ ├── redux │ │ └── store.ts │ ├── serviceWorker.ts │ └── setupTests.ts ├── templates │ ├── component │ │ ├── component.js │ │ ├── component.tsx │ │ ├── style.scss │ │ ├── test.js │ │ └── test.tsx │ └── page │ │ ├── component.tsx │ │ ├── style.scss │ │ └── test.tsx ├── tsconfig.json └── yarn.lock ├── hello-jest-enzyme ├── README.md ├── package.json ├── public │ ├── calculator-input.jpg │ ├── calculator.jpg │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt └── src │ ├── App.css │ ├── App.js │ ├── App.test.js │ ├── components │ ├── Calculator.css │ ├── Calculator.js │ └── Calculator.spec.js │ ├── index.css │ ├── index.js │ ├── logo.svg │ ├── serviceWorker.js │ └── setupTests.js ├── hello-preprocessors ├── .gitignore ├── README.md ├── config-overrides-less.js ├── config-overrides-stylus.js ├── config-overrides.js ├── package-less.json ├── package-postcss.json ├── package.json ├── postcss.config.js ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt ├── src │ ├── App.css │ ├── App.less │ ├── App.pcss │ ├── App.scss │ ├── App.styl │ ├── App.test.tsx │ ├── App.tsx │ ├── index.css │ ├── index.tsx │ ├── logo.svg │ ├── react-app-env.d.ts │ ├── serviceWorker.ts │ └── setupTests.ts ├── tsconfig.json └── yarn.lock ├── hello-redux ├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt └── src │ ├── App.css │ ├── App.js │ ├── App.test.js │ ├── index.css │ ├── index.js │ ├── js │ ├── actions │ │ └── MenuActions.js │ ├── index.js │ ├── reducers │ │ ├── MenuReducer.js │ │ └── RootReducer.js │ └── store │ │ └── index.js │ ├── logo.svg │ ├── serviceWorker.js │ └── setupTests.js ├── hello-world-react ├── .gitignore ├── hello_world.html ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt └── src │ ├── App.css │ ├── App.js │ ├── App.test.js │ ├── header │ ├── header.css │ └── header.js │ ├── index.css │ ├── index.js │ ├── logo.svg │ ├── main │ ├── main.css │ └── main.js │ ├── serviceWorker.js │ └── setupTests.js ├── histogram-d3-ts ├── .env ├── .eslintignore ├── .eslintrc ├── .gitignore ├── .prettierrc ├── README.md ├── README_CRA.md ├── e2e │ ├── app.test.tsx │ ├── global.d.ts │ ├── jest.config.js │ └── puppeteer_standalone.js ├── generate-react-cli.json ├── jest-puppeteer.config.js ├── package.json ├── public │ ├── data │ │ ├── README │ │ └── historicalPrice.csv │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt ├── src │ ├── App.scss │ ├── App.test.tsx │ ├── App.tsx │ ├── AppRouter.test.tsx │ ├── AppRouter.tsx │ ├── assets │ │ └── README │ ├── components │ │ ├── Histogram │ │ │ ├── Histogram.scss │ │ │ ├── Histogram.test.tsx │ │ │ ├── Histogram.tsx │ │ │ └── types.ts │ │ ├── PriceTableList │ │ │ ├── PriceTableList.scss │ │ │ ├── PriceTableList.test.tsx │ │ │ ├── PriceTableList.tsx │ │ │ └── types.ts │ │ └── README │ ├── features │ │ └── README │ ├── index.scss │ ├── index.tsx │ ├── layout │ │ └── README │ ├── logo.svg │ ├── model │ │ ├── README │ │ ├── historicalPriceObject.ts │ │ └── index.ts │ ├── pages │ │ └── README │ ├── react-app-env.d.ts │ ├── recoil │ │ ├── atoms │ │ │ ├── README │ │ │ └── historicalPriceAtoms.ts │ │ └── selectors │ │ │ ├── README │ │ │ └── historicalPriceSelectors.ts │ ├── redux │ │ └── store.ts │ ├── serviceWorker.ts │ ├── setupTests.ts │ └── widgets │ │ ├── HistogramWidget │ │ ├── HistogramWidget.scss │ │ ├── HistogramWidget.test.tsx │ │ └── HistogramWidget.tsx │ │ └── README ├── templates │ ├── component │ │ ├── component.js │ │ ├── component.tsx │ │ ├── style.scss │ │ ├── test.js │ │ └── test.tsx │ ├── d3 │ │ └── component.tsx │ ├── d3class │ │ └── component.tsx │ ├── materialui │ │ └── materialui.tsx │ ├── page │ │ ├── component.tsx │ │ ├── style.scss │ │ └── test.tsx │ ├── recoil │ │ ├── component.tsx │ │ └── test.tsx │ ├── templates │ │ ├── component │ │ │ ├── component.js │ │ │ ├── component.tsx │ │ │ ├── style.scss │ │ │ ├── test.js │ │ │ └── test.tsx │ │ ├── d3 │ │ │ └── component.tsx │ │ ├── d3class │ │ │ └── component.tsx │ │ ├── materialui │ │ │ └── materialui.tsx │ │ ├── page │ │ │ ├── component.tsx │ │ │ ├── style.scss │ │ │ └── test.tsx │ │ ├── recoil │ │ │ ├── component.tsx │ │ │ └── test.tsx │ │ └── widget │ │ │ └── Widget.tsx │ └── widget │ │ └── Widget.tsx └── tsconfig.json ├── hooks └── src │ └── hooks │ ├── AnimationFrame.tsx │ ├── ScrollToTop.tsx │ └── WindowDimensions.tsx ├── mailchimp-newsletter ├── .eslintrc ├── .gitignore ├── .prettierrc ├── generate-react-cli.json ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt ├── src │ ├── App.scss │ ├── App.tsx │ ├── components │ │ └── Subscribe │ │ │ ├── SubscribeForm.styles.ts │ │ │ └── SubscribeForm.tsx │ ├── index.scss │ ├── index.tsx │ ├── layout │ │ └── Centered │ │ │ ├── Centered.styles.ts │ │ │ ├── Centered.tsx │ │ │ └── index.ts │ ├── logo.svg │ ├── react-app-env.d.ts │ ├── serviceWorker.ts │ └── setupTests.ts ├── templates │ └── component │ │ ├── component.js │ │ ├── style.scss │ │ └── test.js ├── tsconfig.json └── yarn.lock ├── material-ui-ts ├── .eslintignore ├── .eslintrc ├── .gitignore ├── .prettierrc ├── generate-react-cli.json ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt ├── src │ ├── App.scss │ ├── App.test.tsx │ ├── App.tsx │ ├── components │ │ ├── UserButton │ │ │ ├── UserButton.scss │ │ │ └── UserButton.tsx │ │ └── UserListButton │ │ │ └── UserListButton.tsx │ ├── index.scss │ ├── index.tsx │ ├── layout │ │ └── Header │ │ │ ├── Header.scss │ │ │ ├── Header.test.tsx │ │ │ └── Header.tsx │ ├── logo.svg │ ├── react-app-env.d.ts │ ├── serviceWorker.ts │ └── setupTests.ts ├── templates │ └── component │ │ ├── component.js │ │ ├── style.scss │ │ └── test.js ├── tsconfig.json └── yarn.lock ├── mern-login ├── .eslintrc ├── .gitignore ├── .prettierrc ├── backend │ ├── config.json │ ├── models │ │ └── database.js │ ├── mongodb │ │ └── users.json │ ├── package.json │ ├── roomsdb-local.json │ ├── roomsdb.json │ ├── server.js │ ├── services │ │ └── validate.js │ └── utils │ │ └── log.js ├── generate-react-cli.json ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt ├── src │ ├── App.css │ ├── App.test.tsx │ ├── App.tsx │ ├── AppRouter.tsx │ ├── assets │ │ └── toast │ │ │ ├── check.svg │ │ │ ├── error.svg │ │ │ ├── info.svg │ │ │ └── warning.svg │ ├── components │ │ ├── Login │ │ │ ├── LoginForm.styles.ts │ │ │ └── LoginForm.tsx │ │ └── Toast │ │ │ ├── ToastComponent.scss │ │ │ ├── ToastComponent.tsx │ │ │ ├── ToastNotification.scss │ │ │ └── ToastNotification.tsx │ ├── features │ │ ├── Authentication │ │ │ ├── userSlice.ts │ │ │ └── userUISlice.ts │ │ └── Notification │ │ │ ├── notificationEnums.ts │ │ │ └── notificationSlice.ts │ ├── index.css │ ├── index.scss │ ├── index.tsx │ ├── layout │ │ └── Centered │ │ │ ├── Centered.styles.ts │ │ │ ├── Centered.tsx │ │ │ └── index.ts │ ├── logo.svg │ ├── model │ │ ├── index.ts │ │ └── users.ts │ ├── pages │ │ ├── LoginPage │ │ │ ├── LoginPage.scss │ │ │ └── LoginPage.tsx │ │ └── MembersPage │ │ │ ├── MembersPage.scss │ │ │ └── MembersPage.tsx │ ├── react-app-env.d.ts │ ├── redux │ │ ├── actions │ │ │ └── userActions.ts │ │ ├── store.ts │ │ └── types.ts │ ├── serviceWorker.ts │ ├── setupTests.ts │ └── utils │ │ ├── CheckAuthentication.ts │ │ ├── GuestsRoute.tsx │ │ └── MembersRoute.tsx ├── templates │ └── component │ │ ├── component.js │ │ ├── style.scss │ │ └── test.js ├── tsconfig.json └── yarn.lock ├── optimize-ts ├── .env ├── .eslintignore ├── .eslintrc ├── .gitignore ├── .prettierrc ├── README.md ├── README_CRA.md ├── e2e │ ├── app.test.tsx │ ├── global.d.ts │ ├── jest.config.js │ └── puppeteer_standalone.js ├── generate-react-cli.json ├── jest-puppeteer.config.js ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt ├── src │ ├── App.scss │ ├── App.test.tsx │ ├── App.tsx │ ├── AppRouter.test.tsx │ ├── AppRouter.tsx │ ├── assets │ │ └── README │ ├── components │ │ ├── README │ │ └── ScrollToTop │ │ │ └── ScrollToTop.tsx │ ├── features │ │ └── README │ ├── index.scss │ ├── index.tsx │ ├── layout │ │ └── README │ ├── logo.svg │ ├── model │ │ └── README │ ├── pages │ │ ├── MyPage │ │ │ ├── MyPage.scss │ │ │ ├── MyPage.test.tsx │ │ │ ├── MyPage.tsx │ │ │ └── math.tsx │ │ └── README │ ├── react-app-env.d.ts │ ├── recoil │ │ ├── atoms │ │ │ └── README │ │ └── selectors │ │ │ └── README │ ├── redux │ │ └── store.ts │ ├── serviceWorker.ts │ └── setupTests.ts ├── templates │ ├── component │ │ ├── component.js │ │ ├── component.tsx │ │ ├── style.scss │ │ ├── test.js │ │ └── test.tsx │ └── page │ │ ├── component.tsx │ │ ├── style.scss │ │ └── test.tsx └── tsconfig.json ├── react-chart-libraries ├── .env ├── .eslintignore ├── .eslintrc ├── .gitignore ├── .prettierrc ├── README.md ├── README_CRA.md ├── e2e │ ├── app.test.tsx │ ├── global.d.ts │ ├── jest.config.js │ └── puppeteer_standalone.js ├── generate-react-cli.json ├── jest-puppeteer.config.js ├── package.json ├── public │ ├── data │ │ ├── area.csv │ │ ├── bar.csv │ │ ├── calendar.json │ │ ├── line.csv │ │ ├── pie.csv │ │ └── scatter.csv │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt ├── src │ ├── App.scss │ ├── App.test.tsx │ ├── App.tsx │ ├── AppRouter.test.tsx │ ├── AppRouter.tsx │ ├── assets │ │ └── README │ ├── components │ │ ├── README │ │ ├── SimpleBarGraph │ │ │ └── SimpleBarGraph.tsx │ │ ├── SimpleCalendarChart │ │ │ └── SimpleCalendarChart.tsx │ │ ├── SimpleLineChart │ │ │ ├── SimpleLineChart.tsx │ │ │ └── types.ts │ │ ├── SimplePie │ │ │ └── SimplePie.tsx │ │ └── SimpleReactVizChart │ │ │ └── SimpleReactVizChart.tsx │ ├── features │ │ └── README │ ├── hooks │ │ └── README │ ├── index.scss │ ├── index.tsx │ ├── layout │ │ └── README │ ├── logo.svg │ ├── model │ │ └── README │ ├── pages │ │ └── README │ ├── react-app-env.d.ts │ ├── recoil │ │ ├── atoms │ │ │ └── README │ │ └── selectors │ │ │ ├── README │ │ │ ├── calendarDataSelectors.ts │ │ │ └── lineDataSelectors.ts │ ├── redux │ │ └── store.ts │ ├── serviceWorker.ts │ ├── setupTests.ts │ └── widgets │ │ └── README ├── templates │ ├── component │ │ ├── component.js │ │ ├── component.tsx │ │ ├── style.scss │ │ ├── test.js │ │ └── test.tsx │ ├── d3 │ │ └── component.tsx │ ├── d3class │ │ └── component.tsx │ ├── materialui │ │ └── materialui.tsx │ ├── page │ │ ├── component.tsx │ │ ├── style.scss │ │ └── test.tsx │ ├── recoil │ │ ├── component.tsx │ │ └── test.tsx │ └── widget │ │ └── Widget.tsx └── tsconfig.json ├── react-d3-hello-world ├── README.md ├── README_CRA.md ├── e2e │ ├── app.test.tsx │ ├── global.d.ts │ ├── jest.config.js │ └── puppeteer_standalone.js ├── generate-react-cli.json ├── jest-puppeteer.config.js ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt ├── src │ ├── App.scss │ ├── App.test.tsx │ ├── App.tsx │ ├── AppRouter.test.tsx │ ├── AppRouter.tsx │ ├── assets │ │ └── README │ ├── components │ │ ├── CircleWithEvents │ │ │ ├── CircleWithD3Events.tsx │ │ │ ├── CircleWithEvents.scss │ │ │ └── CircleWithEvents.tsx │ │ ├── HelloD3 │ │ │ ├── HelloD3.scss │ │ │ ├── HelloD3.test.tsx │ │ │ └── HelloD3.tsx │ │ ├── HelloD3Class │ │ │ ├── HelloD3Class.scss │ │ │ ├── HelloD3Class.test.tsx │ │ │ └── HelloD3Class.tsx │ │ ├── HelloD3Data │ │ │ ├── HelloD3Data.scss │ │ │ ├── HelloD3Data.test.tsx │ │ │ └── HelloD3Data.tsx │ │ ├── HelloJSXData │ │ │ ├── HelloJSXData.scss │ │ │ ├── HelloJSXData.test.tsx │ │ │ └── HelloJSXData.tsx │ │ ├── HelloSVG │ │ │ ├── HelloSVG.scss │ │ │ ├── HelloSVG.test.tsx │ │ │ └── HelloSVG.tsx │ │ ├── JSXCanvas │ │ │ ├── JSXCanvas.scss │ │ │ ├── JSXCanvas.test.tsx │ │ │ └── JSXCanvas.tsx │ │ ├── PulsatingCircle │ │ │ ├── PulsatingCircle.tsx │ │ │ └── PulsatingCircleD3.tsx │ │ ├── README │ │ └── SimpleChart │ │ │ ├── SimpleChart.scss │ │ │ ├── SimpleChart.test.tsx │ │ │ └── SimpleChart.tsx │ ├── features │ │ └── README │ ├── index.scss │ ├── index.tsx │ ├── layout │ │ └── README │ ├── logo.svg │ ├── model │ │ └── README │ ├── pages │ │ └── README │ ├── react-app-env.d.ts │ ├── recoil │ │ ├── atoms │ │ │ └── README │ │ └── selectors │ │ │ └── README │ ├── redux │ │ └── store.ts │ ├── serviceWorker.ts │ └── setupTests.ts ├── templates │ ├── component │ │ ├── component.js │ │ ├── component.tsx │ │ ├── style.scss │ │ ├── test.js │ │ └── test.tsx │ ├── d3 │ │ └── component.tsx │ ├── d3class │ │ └── component.tsx │ ├── page │ │ ├── component.tsx │ │ ├── style.scss │ │ └── test.tsx │ └── recoil │ │ ├── component.tsx │ │ └── test.tsx ├── tsconfig.json └── yarn.lock ├── react-routing-ts ├── .eslintrc ├── .gitignore ├── .prettierrc ├── generate-react-cli.json ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt ├── src │ ├── App.scss │ ├── App.test.tsx │ ├── App.tsx │ ├── components │ │ ├── UserButton │ │ │ ├── UserButton.scss │ │ │ └── UserButton.tsx │ │ └── UserListButton │ │ │ └── UserListButton.tsx │ ├── features │ │ └── Authentication │ │ │ └── authenticationSlice.ts │ ├── index.scss │ ├── index.tsx │ ├── layout │ │ └── Header │ │ │ ├── Header.scss │ │ │ ├── Header.test.tsx │ │ │ └── Header.tsx │ ├── logo.svg │ ├── pages │ │ ├── NotFoundPage │ │ │ ├── NotFoundPage.scss │ │ │ ├── NotFoundPage.test.tsx │ │ │ └── NotFoundPage.tsx │ │ ├── SubMenu1Page │ │ │ ├── SubMenu1Page.scss │ │ │ ├── SubMenu1Page.test.tsx │ │ │ └── SubMenu1Page.tsx │ │ └── SubMenu2Page │ │ │ ├── SubMenu2Page.scss │ │ │ ├── SubMenu2Page.test.tsx │ │ │ └── SubMenu2Page.tsx │ ├── react-app-env.d.ts │ ├── redux │ │ └── store.ts │ ├── serviceWorker.ts │ └── setupTests.ts ├── templates │ └── component │ │ ├── component.js │ │ ├── style.scss │ │ └── test.js ├── tsconfig.json └── yarn.lock ├── react-typescript-redux-login ├── .eslintrc ├── .gitignore ├── .prettierrc ├── generate-react-cli.json ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt ├── src │ ├── App.css │ ├── App.test.tsx │ ├── App.tsx │ ├── AppRouter.tsx │ ├── api │ │ └── login │ │ │ ├── index.ts │ │ │ └── login.ts │ ├── assets │ │ └── toast │ │ │ ├── check.svg │ │ │ ├── error.svg │ │ │ ├── info.svg │ │ │ └── warning.svg │ ├── components │ │ ├── Login │ │ │ ├── LoginForm.styles.ts │ │ │ └── LoginForm.tsx │ │ └── Toast │ │ │ ├── ToastComponent.scss │ │ │ ├── ToastComponent.tsx │ │ │ ├── ToastNotification.scss │ │ │ └── ToastNotification.tsx │ ├── features │ │ └── Notification │ │ │ ├── notificationEnums.ts │ │ │ └── notificationSlice.ts │ ├── index.css │ ├── index.scss │ ├── index.tsx │ ├── layout │ │ └── Centered │ │ │ ├── Centered.styles.ts │ │ │ ├── Centered.tsx │ │ │ └── index.ts │ ├── logo.svg │ ├── model │ │ ├── index.ts │ │ └── members.ts │ ├── pages │ │ └── LoginPage │ │ │ ├── LoginPage.scss │ │ │ └── LoginPage.tsx │ ├── react-app-env.d.ts │ ├── redux │ │ └── store.ts │ ├── serviceWorker.ts │ └── setupTests.ts ├── templates │ └── component │ │ ├── component.js │ │ ├── style.scss │ │ └── test.js ├── tsconfig.json └── yarn.lock ├── recoil-contact ├── .eslintrc ├── .gitignore ├── .prettierrc ├── generate-react-cli.json ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt ├── src │ ├── App.scss │ ├── App.test.tsx │ ├── App.tsx │ ├── AppRouter.tsx │ ├── api │ │ └── books │ │ │ └── api.js │ ├── components │ │ └── Contact │ │ │ ├── ContactForm.styles.ts │ │ │ └── ContactForm.tsx │ ├── features │ │ └── Counter │ │ │ └── Counter.tsx │ ├── index.scss │ ├── index.tsx │ ├── layout │ │ └── Centered │ │ │ ├── Centered.styles.ts │ │ │ ├── Centered.tsx │ │ │ └── index.ts │ ├── logo.svg │ ├── model │ │ ├── contactObject.ts │ │ └── index.ts │ ├── pages │ │ ├── BooksPage │ │ │ ├── BookDetail.tsx │ │ │ ├── BooksPage.scss │ │ │ └── BooksPage.tsx │ │ └── ContactPage │ │ │ ├── ContactPage.scss │ │ │ └── ContactPage.tsx │ ├── react-app-env.d.ts │ ├── recoil │ │ ├── atoms │ │ │ ├── booksAtoms.ts │ │ │ ├── contactAtoms.ts │ │ │ └── counterAtoms.ts │ │ └── selectors │ │ │ ├── booksSelectors.ts │ │ │ └── contactSelectors.ts │ ├── serviceWorker.ts │ └── setupTests.ts ├── templates │ └── component │ │ ├── component.js │ │ ├── style.scss │ │ └── test.js ├── tsconfig.json └── yarn.lock ├── recoil-medium-articles ├── .eslintrc ├── .gitignore ├── .prettierrc ├── generate-react-cli.json ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt ├── src │ ├── App.scss │ ├── App.test.tsx │ ├── App.tsx │ ├── api │ │ └── books │ │ │ └── api.js │ ├── components │ │ └── Articles │ │ │ ├── ArticleListItem.tsx │ │ │ └── Articles.tsx │ ├── index.scss │ ├── index.tsx │ ├── layout │ │ └── Centered │ │ │ ├── Centered.styles.ts │ │ │ ├── Centered.tsx │ │ │ └── index.ts │ ├── logo.svg │ ├── react-app-env.d.ts │ ├── recoil │ │ └── selectors │ │ │ └── articlesSelectors.ts │ ├── serviceWorker.ts │ └── setupTests.ts ├── templates │ └── component │ │ ├── component.js │ │ ├── style.scss │ │ └── test.js ├── tsconfig.json └── yarn.lock ├── recoil-testimonials ├── .eslintrc ├── .gitignore ├── .prettierrc ├── generate-react-cli.json ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt ├── src │ ├── App.scss │ ├── App.tsx │ ├── api │ │ └── testimonals │ │ │ └── api.js │ ├── components │ │ └── Testimonals │ │ │ ├── Testimonals.scss │ │ │ ├── Testimonals.tsx │ │ │ └── TestimonialsItem.tsx │ ├── index.scss │ ├── index.tsx │ ├── layout │ │ └── Centered │ │ │ ├── Centered.styles.ts │ │ │ ├── Centered.tsx │ │ │ └── index.ts │ ├── logo.svg │ ├── react-app-env.d.ts │ ├── recoil │ │ └── selectors │ │ │ └── testimonialsSelectors.ts │ ├── serviceWorker.ts │ └── setupTests.ts ├── templates │ └── component │ │ ├── component.js │ │ ├── style.scss │ │ └── test.js ├── tsconfig.json └── yarn.lock ├── redux-cart ├── package.json └── src │ ├── App.css │ ├── App.js │ ├── App.test.js │ ├── app │ └── store.js │ ├── features │ └── cart │ │ ├── Cart.js │ │ ├── Cart.module.css │ │ └── cartSlice.js │ ├── index.css │ ├── index.js │ ├── logo.svg │ ├── serviceWorker.js │ └── setupTests.js ├── starter-project ├── .eslintignore ├── .eslintrc ├── .gitignore ├── .prettierrc ├── generate-react-cli.json ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt ├── src │ ├── App.css │ ├── App.test.tsx │ ├── App.tsx │ ├── index.css │ ├── index.tsx │ ├── logo.svg │ ├── react-app-env.d.ts │ ├── serviceWorker.ts │ └── setupTests.ts ├── template │ ├── .eslintignore │ ├── .eslintrc │ ├── .prettierrc │ ├── generate-react-cli.json │ ├── gitignore │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ ├── src │ │ ├── App.css │ │ ├── App.test.tsx │ │ ├── App.tsx │ │ ├── index.css │ │ ├── index.tsx │ │ ├── logo.svg │ │ ├── react-app-env.d.ts │ │ ├── serviceWorker.ts │ │ └── setupTests.ts │ ├── template.json │ ├── templates │ │ └── component │ │ │ ├── component.js │ │ │ ├── style.scss │ │ │ └── test.js │ ├── tsconfig.json │ └── yarn.lock ├── templates │ └── component │ │ ├── component.js │ │ ├── style.scss │ │ └── test.js ├── tsconfig.json └── yarn.lock ├── ts-clock-app ├── TypeScriptCheatsheet.tsx ├── dist │ ├── main.js │ └── main.js.map ├── index.html ├── package.json ├── src │ ├── App.tsx │ ├── components │ │ ├── clock.css │ │ └── clock.tsx │ └── index.tsx ├── tsconfig.json ├── webpack.config.js └── yarn.lock ├── word-cloud ├── .env ├── .eslintignore ├── .eslintrc ├── .gitignore ├── .prettierrc ├── README.md ├── README_CRA.md ├── e2e │ ├── app.test.tsx │ ├── global.d.ts │ ├── jest.config.js │ └── puppeteer_standalone.js ├── generate-react-cli.json ├── jest-puppeteer.config.js ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt ├── src │ ├── App.scss │ ├── App.test.tsx │ ├── App.tsx │ ├── AppRouter.test.tsx │ ├── AppRouter.tsx │ ├── assets │ │ └── README │ ├── components │ │ ├── README │ │ └── WordCloud │ │ │ ├── WordCloud.scss │ │ │ ├── WordCloud.tsx │ │ │ └── WordCloudHelper.tsx │ ├── features │ │ └── README │ ├── hooks │ │ └── README │ ├── index.scss │ ├── index.tsx │ ├── layout │ │ └── README │ ├── logo.svg │ ├── model │ │ └── README │ ├── pages │ │ └── README │ ├── react-app-env.d.ts │ ├── recoil │ │ ├── atoms │ │ │ └── README │ │ └── selectors │ │ │ └── README │ ├── redux │ │ └── store.ts │ ├── serviceWorker.ts │ ├── setupTests.ts │ └── widgets │ │ ├── README │ │ └── WordCloudWidget │ │ ├── WordCloudWidget.scss │ │ ├── WordCloudWidget.test.tsx │ │ ├── WordCloudWidget.tsx │ │ └── types.ts ├── templates │ ├── component │ │ ├── TemplateName.scss │ │ ├── TemplateName.test.tsx │ │ └── TemplateName.tsx │ ├── d3 │ │ └── TemplateName.tsx │ ├── d3class │ │ └── TemplateName.tsx │ ├── d3widget │ │ ├── TemplateName.tsx │ │ └── types.ts │ ├── d3widgetcomponent │ │ ├── TemplateName.tsx │ │ └── TemplateNameHelper.tsx │ ├── materialui │ │ └── TemplateName.tsx │ ├── page │ │ ├── TemplateName.scss │ │ ├── TemplateName.test.tsx │ │ └── TemplateName.tsx │ ├── recoil │ │ ├── TemplateName.test.tsx │ │ └── TemplateName.tsx │ └── widget │ │ └── TemplateName.tsx └── tsconfig.json ├── world-map-chart ├── .env ├── .eslintignore ├── .eslintrc ├── .gitignore ├── .prettierrc ├── README.md ├── README_CRA.md ├── e2e │ ├── app.test.tsx │ ├── global.d.ts │ ├── jest.config.js │ └── puppeteer_standalone.js ├── generate-react-cli.json ├── jest-puppeteer.config.js ├── package.json ├── public │ ├── data │ │ ├── coordinates.csv │ │ └── world-110m.json │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt ├── src │ ├── App.scss │ ├── App.test.tsx │ ├── App.tsx │ ├── AppRouter.test.tsx │ ├── AppRouter.tsx │ ├── assets │ │ └── README │ ├── components │ │ ├── README │ │ └── WorldMap │ │ │ ├── RotatingRoundWorldMap.tsx │ │ │ ├── RotatingRoundWorldMapWithCoordinates.tsx │ │ │ ├── RoundWorldMap.tsx │ │ │ ├── WorldMap.scss │ │ │ ├── WorldMap.test.tsx │ │ │ ├── WorldMap.tsx │ │ │ ├── WorldMapAtlas.tsx │ │ │ └── types.tsx │ ├── features │ │ └── README │ ├── hooks │ │ ├── AnimationFrame.tsx │ │ └── README │ ├── index.scss │ ├── index.tsx │ ├── layout │ │ └── README │ ├── logo.svg │ ├── model │ │ └── README │ ├── pages │ │ └── README │ ├── react-app-env.d.ts │ ├── recoil │ │ ├── atoms │ │ │ └── README │ │ └── selectors │ │ │ └── README │ ├── redux │ │ └── store.ts │ ├── serviceWorker.ts │ ├── setupTests.ts │ └── widgets │ │ └── README ├── templates │ ├── component │ │ ├── component.js │ │ ├── component.tsx │ │ ├── style.scss │ │ ├── test.js │ │ └── test.tsx │ ├── d3 │ │ └── component.tsx │ ├── d3class │ │ └── component.tsx │ ├── materialui │ │ └── materialui.tsx │ ├── page │ │ ├── component.tsx │ │ ├── style.scss │ │ └── test.tsx │ ├── recoil │ │ ├── component.tsx │ │ └── test.tsx │ └── widget │ │ └── Widget.tsx └── tsconfig.json └── world-map-widget ├── .env ├── .eslintignore ├── .eslintrc ├── .gitignore ├── .prettierrc ├── README.md ├── README_CRA.md ├── e2e ├── app.test.tsx ├── global.d.ts ├── jest.config.js └── puppeteer_standalone.js ├── generate-react-cli.json ├── jest-puppeteer.config.js ├── package.json ├── public ├── clients-logo │ └── README ├── data │ ├── client-list.csv │ └── world-110m.json ├── favicon.ico ├── index.html ├── logo192.png ├── logo512.png ├── manifest.json └── robots.txt ├── src ├── App.scss ├── App.test.tsx ├── App.tsx ├── AppRouter.test.tsx ├── AppRouter.tsx ├── assets │ ├── README │ └── about │ │ └── EliEladElrom.jpg ├── components │ ├── ClientList │ │ ├── ClientList.scss │ │ ├── ClientList.test.tsx │ │ └── ClientList.tsx │ ├── ClientListDetail │ │ ├── ClientListDetail.scss │ │ ├── ClientListDetail.test.tsx │ │ └── ClientListDetail.tsx │ ├── PulsatingCircle │ │ ├── PulsatingCircle.scss │ │ ├── PulsatingCircle.test.tsx │ │ └── PulsatingCircle.tsx │ ├── README │ └── WorldMap │ │ ├── WorldMap.scss │ │ ├── WorldMap.test.tsx │ │ ├── WorldMap.tsx │ │ └── types.tsx ├── features │ └── README ├── hooks │ ├── AnimationFrame.tsx │ └── README ├── index.scss ├── index.tsx ├── layout │ └── README ├── logo.svg ├── model │ ├── README │ ├── clientsObject.ts │ ├── index.ts │ └── mapObject.ts ├── pages │ └── README ├── react-app-env.d.ts ├── recoil │ ├── atoms │ │ └── README │ └── selectors │ │ ├── README │ │ ├── clientsSelectors.ts │ │ └── mapSelectors.ts ├── redux │ └── store.ts ├── serviceWorker.ts ├── setupTests.ts └── widgets │ ├── ClientsWidget │ ├── ClientsWidget.scss │ ├── ClientsWidget.test.tsx │ └── ClientsWidget.tsx │ └── README ├── templates ├── component │ ├── component.js │ ├── component.tsx │ ├── style.scss │ ├── test.js │ └── test.tsx ├── d3 │ └── component.tsx ├── d3class │ └── component.tsx ├── materialui │ └── materialui.tsx ├── page │ ├── component.tsx │ ├── style.scss │ └── test.tsx ├── recoil │ ├── component.tsx │ └── test.tsx └── widget │ └── Widget.tsx └── tsconfig.json /3d-force-chart/.env: -------------------------------------------------------------------------------- 1 | SKIP_PREFLIGHT_CHECK=true 2 | BROWSER=none 3 | -------------------------------------------------------------------------------- /3d-force-chart/.eslintignore: -------------------------------------------------------------------------------- 1 | build/* 2 | public/* 3 | docs/* 4 | templates/* 5 | src/react-app-env.d.ts 6 | src/serviceWorker.ts 7 | e2e/jest.config.js 8 | e2e/puppeteer_standalone.js 9 | jest-puppeteer.config.js -------------------------------------------------------------------------------- /3d-force-chart/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "trailingComma": "es5", 3 | "printWidth": 200, 4 | "semi": false, 5 | "singleQuote": true, 6 | "tabWidth": 2 7 | } 8 | 9 | -------------------------------------------------------------------------------- /3d-force-chart/e2e/global.d.ts: -------------------------------------------------------------------------------- 1 | // globals defined in jest.config.js need to be included in this `d.ts` 2 | // file to avoid TS lint errors 3 | declare let SERVER_URL: string 4 | declare let JEST_TIMEOUT: number -------------------------------------------------------------------------------- /3d-force-chart/e2e/jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | preset: 'jest-puppeteer', 3 | globals: { 4 | SERVER_URL: 'http://localhost:3000', 5 | JEST_TIMEOUT: 50000 6 | }, 7 | testRegex: './*\\.test\\.tsx$' 8 | } 9 | console.log('RUNNING E2E INTEGRATION TESTS - MAKE SURE PORT 3000 IS NOT IN USAGE') -------------------------------------------------------------------------------- /3d-force-chart/jest-puppeteer.config.js: -------------------------------------------------------------------------------- 1 | // jest-puppeteer.config.js 2 | module.exports = { 3 | server: { 4 | command: `yarn start`, 5 | port: 3000, 6 | launchTimeout: 20000, 7 | debug: true, 8 | }, 9 | } 10 | -------------------------------------------------------------------------------- /3d-force-chart/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EliEladElrom/react-tutorials/7616e3024e2b709a7e40b9862e0008193cfd9636/3d-force-chart/public/favicon.ico -------------------------------------------------------------------------------- /3d-force-chart/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EliEladElrom/react-tutorials/7616e3024e2b709a7e40b9862e0008193cfd9636/3d-force-chart/public/logo192.png -------------------------------------------------------------------------------- /3d-force-chart/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EliEladElrom/react-tutorials/7616e3024e2b709a7e40b9862e0008193cfd9636/3d-force-chart/public/logo512.png -------------------------------------------------------------------------------- /3d-force-chart/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /3d-force-chart/src/AppRouter.test.tsx: -------------------------------------------------------------------------------- 1 | // src/AppRouter.test.tsx 2 | import React from 'react' 3 | import { shallow } from 'enzyme' 4 | import AppRouter from './AppRouter' 5 | 6 | describe('', () => { 7 | let component 8 | 9 | beforeEach(() => { 10 | component = shallow() 11 | }) 12 | 13 | test('renders without crashing', () => { 14 | expect(component.length).toBe(1) 15 | }) 16 | }) 17 | -------------------------------------------------------------------------------- /3d-force-chart/src/assets/README: -------------------------------------------------------------------------------- 1 | Break down your assets by names: about, home, etc. -------------------------------------------------------------------------------- /3d-force-chart/src/index.scss: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; 4 | -webkit-font-smoothing: antialiased; 5 | -moz-osx-font-smoothing: grayscale; 6 | } 7 | 8 | code { 9 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; 10 | } 11 | -------------------------------------------------------------------------------- /3d-force-chart/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /3d-force-chart/src/redux/store.ts: -------------------------------------------------------------------------------- 1 | // src/redux/store.ts 2 | 3 | import { configureStore, combineReducers } from '@reduxjs/toolkit' 4 | 5 | const store = configureStore({ 6 | reducer: combineReducers({ 7 | // your reducers goes here 8 | }), 9 | }) 10 | 11 | export default store 12 | -------------------------------------------------------------------------------- /3d-force-chart/src/widgets/NetworkWidget/NetworkWidget.scss: -------------------------------------------------------------------------------- 1 | .wrapperDiv { 2 | width: 100%; 3 | height: 100%; 4 | clip-path: inset(10px 20px 30px 40px); 5 | } 6 | 7 | .selectedText { 8 | font-size: 13px; 9 | color: #373636; 10 | } -------------------------------------------------------------------------------- /3d-force-chart/src/widgets/README: -------------------------------------------------------------------------------- 1 | components goes here, you can generate with generate-react-cli, examples; 2 | $ npx generate-react-cli component MyWidget --type=widget 3 | 4 | // d3 Widget & Chart Component 5 | $ npx generate-react-cli component LineChart --type=d3WidgetComponent 6 | $ npx generate-react-cli component LineChartWidget --type=d3Widget -------------------------------------------------------------------------------- /3d-force-chart/templates/component/TemplateName.scss: -------------------------------------------------------------------------------- 1 | .TemplateName { 2 | } -------------------------------------------------------------------------------- /3d-force-chart/templates/page/TemplateName.scss: -------------------------------------------------------------------------------- 1 | .TemplateName { 2 | } -------------------------------------------------------------------------------- /area-brush/.env: -------------------------------------------------------------------------------- 1 | SKIP_PREFLIGHT_CHECK=true 2 | BROWSER=none 3 | -------------------------------------------------------------------------------- /area-brush/.eslintignore: -------------------------------------------------------------------------------- 1 | build/* 2 | public/* 3 | docs/* 4 | templates/* 5 | src/react-app-env.d.ts 6 | src/serviceWorker.ts 7 | e2e/jest.config.js 8 | e2e/puppeteer_standalone.js 9 | jest-puppeteer.config.js -------------------------------------------------------------------------------- /area-brush/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "trailingComma": "es5", 3 | "printWidth": 200, 4 | "semi": false, 5 | "singleQuote": true, 6 | "tabWidth": 2 7 | } 8 | 9 | -------------------------------------------------------------------------------- /area-brush/e2e/global.d.ts: -------------------------------------------------------------------------------- 1 | // globals defined in jest.config.js need to be included in this `d.ts` 2 | // file to avoid TS lint errors 3 | declare let SERVER_URL: string 4 | declare let JEST_TIMEOUT: number -------------------------------------------------------------------------------- /area-brush/e2e/jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | preset: 'jest-puppeteer', 3 | globals: { 4 | SERVER_URL: 'http://localhost:3000', 5 | JEST_TIMEOUT: 50000 6 | }, 7 | testRegex: './*\\.test\\.tsx$' 8 | } 9 | console.log('RUNNING E2E INTEGRATION TESTS - MAKE SURE PORT 3000 IS NOT IN USAGE') -------------------------------------------------------------------------------- /area-brush/jest-puppeteer.config.js: -------------------------------------------------------------------------------- 1 | // jest-puppeteer.config.js 2 | module.exports = { 3 | server: { 4 | command: `yarn start`, 5 | port: 3000, 6 | launchTimeout: 20000, 7 | debug: true, 8 | }, 9 | } 10 | -------------------------------------------------------------------------------- /area-brush/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EliEladElrom/react-tutorials/7616e3024e2b709a7e40b9862e0008193cfd9636/area-brush/public/favicon.ico -------------------------------------------------------------------------------- /area-brush/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EliEladElrom/react-tutorials/7616e3024e2b709a7e40b9862e0008193cfd9636/area-brush/public/logo192.png -------------------------------------------------------------------------------- /area-brush/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EliEladElrom/react-tutorials/7616e3024e2b709a7e40b9862e0008193cfd9636/area-brush/public/logo512.png -------------------------------------------------------------------------------- /area-brush/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /area-brush/src/AppRouter.test.tsx: -------------------------------------------------------------------------------- 1 | // src/AppRouter.test.tsx 2 | import React from 'react' 3 | import { shallow } from 'enzyme' 4 | import AppRouter from './AppRouter' 5 | 6 | describe('', () => { 7 | let component 8 | 9 | beforeEach(() => { 10 | component = shallow() 11 | }) 12 | 13 | test('renders without crashing', () => { 14 | expect(component.length).toBe(1) 15 | }) 16 | }) 17 | -------------------------------------------------------------------------------- /area-brush/src/assets/README: -------------------------------------------------------------------------------- 1 | Break down your assets by names: about, home, etc. -------------------------------------------------------------------------------- /area-brush/src/features/README: -------------------------------------------------------------------------------- 1 | features components goes here. -------------------------------------------------------------------------------- /area-brush/src/hooks/README: -------------------------------------------------------------------------------- 1 | Hooks goes here. Check out some hooks examples here: 2 | https://github.com/EliEladElrom/react-tutorials -------------------------------------------------------------------------------- /area-brush/src/index.scss: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; 4 | -webkit-font-smoothing: antialiased; 5 | -moz-osx-font-smoothing: grayscale; 6 | } 7 | 8 | code { 9 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; 10 | } 11 | -------------------------------------------------------------------------------- /area-brush/src/layout/README: -------------------------------------------------------------------------------- 1 | layout components goes here, you can generate with generate-react-cli, example; 2 | $ npx generate-react-cli component BoxLayout --type=layout -------------------------------------------------------------------------------- /area-brush/src/pages/README: -------------------------------------------------------------------------------- 1 | Pages components goes here, you can generate with generate-react-cli, example; 2 | $ npx generate-react-cli component HomePage --type=page -------------------------------------------------------------------------------- /area-brush/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /area-brush/src/redux/store.ts: -------------------------------------------------------------------------------- 1 | // src/redux/store.ts 2 | 3 | import { configureStore, combineReducers } from '@reduxjs/toolkit' 4 | 5 | const store = configureStore({ 6 | reducer: combineReducers({ 7 | // your reducers goes here 8 | }), 9 | }) 10 | 11 | export default store 12 | -------------------------------------------------------------------------------- /area-brush/src/widgets/ChartWidget/ChartWidget.scss: -------------------------------------------------------------------------------- 1 | .ChartWidget { 2 | } -------------------------------------------------------------------------------- /area-brush/src/widgets/README: -------------------------------------------------------------------------------- 1 | components goes here, you can generate with generate-react-cli, examples; 2 | $ npx generate-react-cli component MyWidget --type=widget 3 | 4 | // d3 Widget & Chart Component 5 | $ npx generate-react-cli component LineChart --type=d3WidgetComponent 6 | $ npx generate-react-cli component LineChartWidget --type=d3Widget -------------------------------------------------------------------------------- /area-brush/templates/component/TemplateName.scss: -------------------------------------------------------------------------------- 1 | .TemplateName { 2 | } -------------------------------------------------------------------------------- /area-brush/templates/page/TemplateName.scss: -------------------------------------------------------------------------------- 1 | .TemplateName { 2 | } -------------------------------------------------------------------------------- /area-chart-with-brush/.env: -------------------------------------------------------------------------------- 1 | SKIP_PREFLIGHT_CHECK=true 2 | BROWSER=none 3 | -------------------------------------------------------------------------------- /area-chart-with-brush/.eslintignore: -------------------------------------------------------------------------------- 1 | build/* 2 | public/* 3 | docs/* 4 | templates/* 5 | src/react-app-env.d.ts 6 | src/serviceWorker.ts 7 | e2e/jest.config.js 8 | e2e/puppeteer_standalone.js 9 | jest-puppeteer.config.js -------------------------------------------------------------------------------- /area-chart-with-brush/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "trailingComma": "es5", 3 | "printWidth": 200, 4 | "semi": false, 5 | "singleQuote": true, 6 | "tabWidth": 2 7 | } 8 | 9 | -------------------------------------------------------------------------------- /area-chart-with-brush/e2e/global.d.ts: -------------------------------------------------------------------------------- 1 | // globals defined in jest.config.js need to be included in this `d.ts` 2 | // file to avoid TS lint errors 3 | declare let SERVER_URL: string 4 | declare let JEST_TIMEOUT: number -------------------------------------------------------------------------------- /area-chart-with-brush/e2e/jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | preset: 'jest-puppeteer', 3 | globals: { 4 | SERVER_URL: 'http://localhost:3000', 5 | JEST_TIMEOUT: 50000 6 | }, 7 | testRegex: './*\\.test\\.tsx$' 8 | } 9 | console.log('RUNNING E2E INTEGRATION TESTS - MAKE SURE PORT 3000 IS NOT IN USAGE') -------------------------------------------------------------------------------- /area-chart-with-brush/jest-puppeteer.config.js: -------------------------------------------------------------------------------- 1 | // jest-puppeteer.config.js 2 | module.exports = { 3 | server: { 4 | command: `yarn start`, 5 | port: 3000, 6 | launchTimeout: 20000, 7 | debug: true, 8 | }, 9 | } 10 | -------------------------------------------------------------------------------- /area-chart-with-brush/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EliEladElrom/react-tutorials/7616e3024e2b709a7e40b9862e0008193cfd9636/area-chart-with-brush/public/favicon.ico -------------------------------------------------------------------------------- /area-chart-with-brush/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EliEladElrom/react-tutorials/7616e3024e2b709a7e40b9862e0008193cfd9636/area-chart-with-brush/public/logo192.png -------------------------------------------------------------------------------- /area-chart-with-brush/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EliEladElrom/react-tutorials/7616e3024e2b709a7e40b9862e0008193cfd9636/area-chart-with-brush/public/logo512.png -------------------------------------------------------------------------------- /area-chart-with-brush/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /area-chart-with-brush/src/assets/README: -------------------------------------------------------------------------------- 1 | Break down your assets by names: about, home, etc. -------------------------------------------------------------------------------- /area-chart-with-brush/src/components/AreaChart/AreaChart.scss: -------------------------------------------------------------------------------- 1 | .AreaChart { 2 | } -------------------------------------------------------------------------------- /area-chart-with-brush/src/components/Brush/Brush.scss: -------------------------------------------------------------------------------- 1 | .Brush { 2 | } -------------------------------------------------------------------------------- /area-chart-with-brush/src/features/README: -------------------------------------------------------------------------------- 1 | features components goes here. -------------------------------------------------------------------------------- /area-chart-with-brush/src/hooks/README: -------------------------------------------------------------------------------- 1 | Hooks goes here. Check out some hooks examples here: 2 | https://github.com/EliEladElrom/react-tutorials -------------------------------------------------------------------------------- /area-chart-with-brush/src/index.scss: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; 4 | -webkit-font-smoothing: antialiased; 5 | -moz-osx-font-smoothing: grayscale; 6 | } 7 | 8 | code { 9 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; 10 | } 11 | -------------------------------------------------------------------------------- /area-chart-with-brush/src/layout/README: -------------------------------------------------------------------------------- 1 | layout components goes here, you can generate with generate-react-cli, example; 2 | $ npx generate-react-cli component BoxLayout --type=layout -------------------------------------------------------------------------------- /area-chart-with-brush/src/pages/README: -------------------------------------------------------------------------------- 1 | Pages components goes here, you can generate with generate-react-cli, example; 2 | $ npx generate-react-cli component HomePage --type=page -------------------------------------------------------------------------------- /area-chart-with-brush/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /area-chart-with-brush/src/redux/store.ts: -------------------------------------------------------------------------------- 1 | // src/redux/store.ts 2 | 3 | import { configureStore, combineReducers } from '@reduxjs/toolkit' 4 | 5 | const store = configureStore({ 6 | reducer: combineReducers({ 7 | // your reducers goes here 8 | }), 9 | }) 10 | 11 | export default store 12 | -------------------------------------------------------------------------------- /area-chart-with-brush/src/widgets/ChartWidget/ChartWidget.scss: -------------------------------------------------------------------------------- 1 | .ChartWidget { 2 | } -------------------------------------------------------------------------------- /area-chart-with-brush/src/widgets/README: -------------------------------------------------------------------------------- 1 | components goes here, you can generate with generate-react-cli, examples; 2 | $ npx generate-react-cli component MyWidget --type=widget 3 | 4 | // d3 Widget & Chart Component 5 | $ npx generate-react-cli component LineChart --type=d3WidgetComponent 6 | $ npx generate-react-cli component LineChartWidget --type=d3Widget -------------------------------------------------------------------------------- /area-chart-with-brush/templates/component/TemplateName.scss: -------------------------------------------------------------------------------- 1 | .TemplateName { 2 | } -------------------------------------------------------------------------------- /area-chart-with-brush/templates/page/TemplateName.scss: -------------------------------------------------------------------------------- 1 | .TemplateName { 2 | } -------------------------------------------------------------------------------- /basic-charts/.env: -------------------------------------------------------------------------------- 1 | SKIP_PREFLIGHT_CHECK=true 2 | BROWSER=none 3 | -------------------------------------------------------------------------------- /basic-charts/.eslintignore: -------------------------------------------------------------------------------- 1 | build/* 2 | public/* 3 | docs/* 4 | templates/* 5 | src/react-app-env.d.ts 6 | src/serviceWorker.ts 7 | e2e/jest.config.js 8 | e2e/puppeteer_standalone.js 9 | jest-puppeteer.config.js -------------------------------------------------------------------------------- /basic-charts/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "trailingComma": "es5", 3 | "printWidth": 200, 4 | "semi": false, 5 | "singleQuote": true, 6 | "tabWidth": 2 7 | } 8 | 9 | -------------------------------------------------------------------------------- /basic-charts/e2e/global.d.ts: -------------------------------------------------------------------------------- 1 | // globals defined in jest.config.js need to be included in this `d.ts` 2 | // file to avoid TS lint errors 3 | declare let SERVER_URL: string 4 | declare let JEST_TIMEOUT: number -------------------------------------------------------------------------------- /basic-charts/e2e/jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | preset: 'jest-puppeteer', 3 | globals: { 4 | SERVER_URL: 'http://localhost:3000', 5 | JEST_TIMEOUT: 50000 6 | }, 7 | testRegex: './*\\.test\\.tsx$' 8 | } 9 | console.log('RUNNING E2E INTEGRATION TESTS - MAKE SURE PORT 3000 IS NOT IN USAGE') -------------------------------------------------------------------------------- /basic-charts/jest-puppeteer.config.js: -------------------------------------------------------------------------------- 1 | // jest-puppeteer.config.js 2 | module.exports = { 3 | server: { 4 | command: `yarn start`, 5 | port: 3000, 6 | launchTimeout: 20000, 7 | debug: true, 8 | }, 9 | } 10 | -------------------------------------------------------------------------------- /basic-charts/public/data/bar.csv: -------------------------------------------------------------------------------- 1 | framework,carat 2 | jQuery,43.3 3 | React.js,35.9 4 | Angular,25.1 5 | ASP.NET,21.9 6 | Express,21.2 7 | .NET Core,19.1 8 | Vue.js,17.3 9 | Spring,16.4 10 | Angular.js,16.1 11 | Django,14.2 12 | Flask,14.2 13 | Laravel,11.1 14 | Rails,7.0 15 | Symfony,14.4 16 | Gatsby, 4.0 17 | Drupal, 3.2 -------------------------------------------------------------------------------- /basic-charts/public/data/pie.csv: -------------------------------------------------------------------------------- 1 | name,value 2 | a,25 3 | b,3 4 | c,45 5 | d,7 6 | e,20 -------------------------------------------------------------------------------- /basic-charts/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EliEladElrom/react-tutorials/7616e3024e2b709a7e40b9862e0008193cfd9636/basic-charts/public/favicon.ico -------------------------------------------------------------------------------- /basic-charts/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EliEladElrom/react-tutorials/7616e3024e2b709a7e40b9862e0008193cfd9636/basic-charts/public/logo192.png -------------------------------------------------------------------------------- /basic-charts/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EliEladElrom/react-tutorials/7616e3024e2b709a7e40b9862e0008193cfd9636/basic-charts/public/logo512.png -------------------------------------------------------------------------------- /basic-charts/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /basic-charts/src/AppRouter.test.tsx: -------------------------------------------------------------------------------- 1 | // src/AppRouter.test.tsx 2 | import React from 'react' 3 | import { shallow } from 'enzyme' 4 | import AppRouter from './AppRouter' 5 | 6 | describe('', () => { 7 | let component 8 | 9 | beforeEach(() => { 10 | component = shallow() 11 | }) 12 | 13 | test('renders without crashing', () => { 14 | expect(component.length).toBe(1) 15 | }) 16 | }) 17 | -------------------------------------------------------------------------------- /basic-charts/src/assets/README: -------------------------------------------------------------------------------- 1 | Break down your assets by names: about, home, etc. -------------------------------------------------------------------------------- /basic-charts/src/components/BasicAreaChart/BasicAreaChart.scss: -------------------------------------------------------------------------------- 1 | .basicBarChart { 2 | } 3 | -------------------------------------------------------------------------------- /basic-charts/src/components/BasicAreaChart/types.ts: -------------------------------------------------------------------------------- 1 | /* 2 | Author: Eli Elad Elrom 3 | Website: https://EliElrom.com 4 | License: MIT License 5 | Component: src/component/BasicAreaChart/types.ts 6 | */ 7 | 8 | export namespace Types { 9 | // eslint-disable-next-line @typescript-eslint/naming-convention 10 | export type data = { 11 | date: string 12 | value: number 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /basic-charts/src/components/BasicBarChart/BasicBarChart.scss: -------------------------------------------------------------------------------- 1 | .basicBarChart { 2 | } 3 | 4 | .bar { 5 | fill: tomato; 6 | } 7 | -------------------------------------------------------------------------------- /basic-charts/src/components/BasicBarChart/types.ts: -------------------------------------------------------------------------------- 1 | /* 2 | Author: Eli Elad Elrom 3 | Website: https://EliElrom.com 4 | License: MIT License 5 | Component: src/component/BasicBarChart/types.ts 6 | */ 7 | 8 | export namespace Types { 9 | export type Data = { 10 | framework: string 11 | value: number 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /basic-charts/src/components/BasicLineChart/BasicLineChart.scss: -------------------------------------------------------------------------------- 1 | .basicLineChart { 2 | } 3 | -------------------------------------------------------------------------------- /basic-charts/src/components/BasicLineChart/types.ts: -------------------------------------------------------------------------------- 1 | /* 2 | Author: Eli Elad Elrom 3 | Website: https://EliElrom.com 4 | License: MIT License 5 | Component: src/component/BasicLineChart/types.ts 6 | */ 7 | 8 | export namespace Types { 9 | export type Data = { 10 | date: string 11 | value: number 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /basic-charts/src/components/BasicPieChart/BasicPieChart.scss: -------------------------------------------------------------------------------- 1 | .basicPieChart { 2 | } 3 | -------------------------------------------------------------------------------- /basic-charts/src/components/BasicPieChart/types.ts: -------------------------------------------------------------------------------- 1 | /* 2 | Author: Eli Elad Elrom 3 | Website: https://EliElrom.com 4 | License: MIT License 5 | Component: src/component/BasicPieChart/types.ts 6 | */ 7 | 8 | export namespace Types { 9 | export type Data = { 10 | name: string 11 | value: number 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /basic-charts/src/components/BasicScatterChart/BasicScatterChart.scss: -------------------------------------------------------------------------------- 1 | .basicScatterChart { 2 | } 3 | -------------------------------------------------------------------------------- /basic-charts/src/components/BasicScatterChart/types.ts: -------------------------------------------------------------------------------- 1 | /* 2 | Author: Eli Elad Elrom 3 | Website: https://EliElrom.com 4 | License: MIT License 5 | Component: src/component/BasicScatterChart/types.ts 6 | */ 7 | 8 | export namespace Types { 9 | export type Data = { 10 | price: number 11 | carat: number 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /basic-charts/src/components/README: -------------------------------------------------------------------------------- 1 | components goes here, you can generate with generate-react-cli, examples; 2 | $ npx generate-react-cli component UserButton 3 | $ npx generate-react-cli component Rectangle --type=d3class 4 | $ npx generate-react-cli component Rectangle --type=d3 5 | $ npx generate-react-cli component Login --type=recoil -------------------------------------------------------------------------------- /basic-charts/src/features/README: -------------------------------------------------------------------------------- 1 | features components goes here. -------------------------------------------------------------------------------- /basic-charts/src/index.scss: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; 4 | -webkit-font-smoothing: antialiased; 5 | -moz-osx-font-smoothing: grayscale; 6 | } 7 | 8 | code { 9 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; 10 | } 11 | -------------------------------------------------------------------------------- /basic-charts/src/layout/README: -------------------------------------------------------------------------------- 1 | layout components goes here, you can generate with generate-react-cli, example; 2 | $ npx generate-react-cli component BoxLayout --type=layout -------------------------------------------------------------------------------- /basic-charts/src/pages/README: -------------------------------------------------------------------------------- 1 | Pages components goes here, you can generate with generate-react-cli, example; 2 | $ npx generate-react-cli component HomePage --type=page -------------------------------------------------------------------------------- /basic-charts/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /basic-charts/src/recoil/atoms/README: -------------------------------------------------------------------------------- 1 | Recoil atoms goes here, example: userAtoms.ts; 2 | 3 | /* 4 | Author: Eli Elad Elrom 5 | Website: https://EliElrom.com 6 | License: MIT License 7 | File: src/recoil/atoms/userAtoms.ts 8 | */ 9 | 10 | import { atom } from 'recoil' 11 | import { initUser } from '../../model' 12 | 13 | export const userState = atom({ 14 | key: 'UserState', 15 | default: initUser(), 16 | }) -------------------------------------------------------------------------------- /basic-charts/src/redux/store.ts: -------------------------------------------------------------------------------- 1 | // src/redux/store.ts 2 | 3 | import { configureStore, combineReducers } from '@reduxjs/toolkit' 4 | 5 | const store = configureStore({ 6 | reducer: combineReducers({ 7 | // your reducers goes here 8 | }), 9 | }) 10 | 11 | export default store 12 | -------------------------------------------------------------------------------- /basic-charts/templates/component/style.scss: -------------------------------------------------------------------------------- 1 | .TemplateName { 2 | } -------------------------------------------------------------------------------- /basic-charts/templates/component/test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { shallow } from 'enzyme'; 3 | import TemplateName from './TemplateName'; 4 | 5 | describe('', () => { 6 | let component; 7 | 8 | beforeEach(() => { 9 | component = shallow(); 10 | }); 11 | 12 | test('It should mount', () => { 13 | expect(component.length).toBe(1); 14 | }); 15 | }); 16 | -------------------------------------------------------------------------------- /basic-charts/templates/page/style.scss: -------------------------------------------------------------------------------- 1 | .TemplateName { 2 | } -------------------------------------------------------------------------------- /bisector/.env: -------------------------------------------------------------------------------- 1 | SKIP_PREFLIGHT_CHECK=true 2 | BROWSER=none 3 | -------------------------------------------------------------------------------- /bisector/.eslintignore: -------------------------------------------------------------------------------- 1 | build/* 2 | public/* 3 | docs/* 4 | templates/* 5 | src/react-app-env.d.ts 6 | src/serviceWorker.ts 7 | e2e/jest.config.js 8 | e2e/puppeteer_standalone.js 9 | jest-puppeteer.config.js -------------------------------------------------------------------------------- /bisector/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "trailingComma": "es5", 3 | "printWidth": 200, 4 | "semi": false, 5 | "singleQuote": true, 6 | "tabWidth": 2 7 | } 8 | 9 | -------------------------------------------------------------------------------- /bisector/e2e/global.d.ts: -------------------------------------------------------------------------------- 1 | // globals defined in jest.config.js need to be included in this `d.ts` 2 | // file to avoid TS lint errors 3 | declare let SERVER_URL: string 4 | declare let JEST_TIMEOUT: number -------------------------------------------------------------------------------- /bisector/e2e/jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | preset: 'jest-puppeteer', 3 | globals: { 4 | SERVER_URL: 'http://localhost:3000', 5 | JEST_TIMEOUT: 50000 6 | }, 7 | testRegex: './*\\.test\\.tsx$' 8 | } 9 | console.log('RUNNING E2E INTEGRATION TESTS - MAKE SURE PORT 3000 IS NOT IN USAGE') -------------------------------------------------------------------------------- /bisector/jest-puppeteer.config.js: -------------------------------------------------------------------------------- 1 | // jest-puppeteer.config.js 2 | module.exports = { 3 | server: { 4 | command: `yarn start`, 5 | port: 3000, 6 | launchTimeout: 20000, 7 | debug: true, 8 | }, 9 | } 10 | -------------------------------------------------------------------------------- /bisector/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EliEladElrom/react-tutorials/7616e3024e2b709a7e40b9862e0008193cfd9636/bisector/public/favicon.ico -------------------------------------------------------------------------------- /bisector/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EliEladElrom/react-tutorials/7616e3024e2b709a7e40b9862e0008193cfd9636/bisector/public/logo192.png -------------------------------------------------------------------------------- /bisector/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EliEladElrom/react-tutorials/7616e3024e2b709a7e40b9862e0008193cfd9636/bisector/public/logo512.png -------------------------------------------------------------------------------- /bisector/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /bisector/src/AppRouter.test.tsx: -------------------------------------------------------------------------------- 1 | // src/AppRouter.test.tsx 2 | import React from 'react' 3 | import { shallow } from 'enzyme' 4 | import AppRouter from './AppRouter' 5 | 6 | describe('', () => { 7 | let component 8 | 9 | beforeEach(() => { 10 | component = shallow() 11 | }) 12 | 13 | test('renders without crashing', () => { 14 | expect(component.length).toBe(1) 15 | }) 16 | }) 17 | -------------------------------------------------------------------------------- /bisector/src/assets/README: -------------------------------------------------------------------------------- 1 | Break down your assets by names: about, home, etc. -------------------------------------------------------------------------------- /bisector/src/features/README: -------------------------------------------------------------------------------- 1 | features components goes here. -------------------------------------------------------------------------------- /bisector/src/hooks/README: -------------------------------------------------------------------------------- 1 | Hooks goes here. Check out some hooks examples here: 2 | https://github.com/EliEladElrom/react-tutorials -------------------------------------------------------------------------------- /bisector/src/index.scss: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; 4 | -webkit-font-smoothing: antialiased; 5 | -moz-osx-font-smoothing: grayscale; 6 | } 7 | 8 | code { 9 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; 10 | } 11 | -------------------------------------------------------------------------------- /bisector/src/layout/README: -------------------------------------------------------------------------------- 1 | layout components goes here, you can generate with generate-react-cli, example; 2 | $ npx generate-react-cli component BoxLayout --type=layout -------------------------------------------------------------------------------- /bisector/src/pages/README: -------------------------------------------------------------------------------- 1 | Pages components goes here, you can generate with generate-react-cli, example; 2 | $ npx generate-react-cli component HomePage --type=page -------------------------------------------------------------------------------- /bisector/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /bisector/src/redux/store.ts: -------------------------------------------------------------------------------- 1 | // src/redux/store.ts 2 | 3 | import { configureStore, combineReducers } from '@reduxjs/toolkit' 4 | 5 | const store = configureStore({ 6 | reducer: combineReducers({ 7 | // your reducers goes here 8 | }), 9 | }) 10 | 11 | export default store 12 | -------------------------------------------------------------------------------- /bisector/src/widgets/README: -------------------------------------------------------------------------------- 1 | components goes here, you can generate with generate-react-cli, examples; 2 | $ npx generate-react-cli component MyWidget --type=widget 3 | 4 | // d3 Widget & Chart Component 5 | $ npx generate-react-cli component LineChart --type=d3WidgetComponent 6 | $ npx generate-react-cli component LineChartWidget --type=d3Widget -------------------------------------------------------------------------------- /bisector/templates/component/TemplateName.scss: -------------------------------------------------------------------------------- 1 | .TemplateName { 2 | } -------------------------------------------------------------------------------- /bisector/templates/page/TemplateName.scss: -------------------------------------------------------------------------------- 1 | .TemplateName { 2 | } -------------------------------------------------------------------------------- /bubble-chart/.env: -------------------------------------------------------------------------------- 1 | SKIP_PREFLIGHT_CHECK=true 2 | BROWSER=none 3 | -------------------------------------------------------------------------------- /bubble-chart/.eslintignore: -------------------------------------------------------------------------------- 1 | build/* 2 | public/* 3 | docs/* 4 | templates/* 5 | src/react-app-env.d.ts 6 | src/serviceWorker.ts 7 | e2e/jest.config.js 8 | e2e/puppeteer_standalone.js 9 | jest-puppeteer.config.js -------------------------------------------------------------------------------- /bubble-chart/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "trailingComma": "es5", 3 | "printWidth": 200, 4 | "semi": false, 5 | "singleQuote": true, 6 | "tabWidth": 2 7 | } 8 | 9 | -------------------------------------------------------------------------------- /bubble-chart/e2e/global.d.ts: -------------------------------------------------------------------------------- 1 | // globals defined in jest.config.js need to be included in this `d.ts` 2 | // file to avoid TS lint errors 3 | declare let SERVER_URL: string 4 | declare let JEST_TIMEOUT: number -------------------------------------------------------------------------------- /bubble-chart/e2e/jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | preset: 'jest-puppeteer', 3 | globals: { 4 | SERVER_URL: 'http://localhost:3000', 5 | JEST_TIMEOUT: 50000 6 | }, 7 | testRegex: './*\\.test\\.tsx$' 8 | } 9 | console.log('RUNNING E2E INTEGRATION TESTS - MAKE SURE PORT 3000 IS NOT IN USAGE') -------------------------------------------------------------------------------- /bubble-chart/jest-puppeteer.config.js: -------------------------------------------------------------------------------- 1 | // jest-puppeteer.config.js 2 | module.exports = { 3 | server: { 4 | command: `yarn start`, 5 | port: 3000, 6 | launchTimeout: 20000, 7 | debug: true, 8 | }, 9 | } 10 | -------------------------------------------------------------------------------- /bubble-chart/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EliEladElrom/react-tutorials/7616e3024e2b709a7e40b9862e0008193cfd9636/bubble-chart/public/favicon.ico -------------------------------------------------------------------------------- /bubble-chart/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EliEladElrom/react-tutorials/7616e3024e2b709a7e40b9862e0008193cfd9636/bubble-chart/public/logo192.png -------------------------------------------------------------------------------- /bubble-chart/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EliEladElrom/react-tutorials/7616e3024e2b709a7e40b9862e0008193cfd9636/bubble-chart/public/logo512.png -------------------------------------------------------------------------------- /bubble-chart/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /bubble-chart/src/AppRouter.test.tsx: -------------------------------------------------------------------------------- 1 | // src/AppRouter.test.tsx 2 | import React from 'react' 3 | import { shallow } from 'enzyme' 4 | import AppRouter from './AppRouter' 5 | 6 | describe('', () => { 7 | let component 8 | 9 | beforeEach(() => { 10 | component = shallow() 11 | }) 12 | 13 | test('renders without crashing', () => { 14 | expect(component.length).toBe(1) 15 | }) 16 | }) 17 | -------------------------------------------------------------------------------- /bubble-chart/src/assets/README: -------------------------------------------------------------------------------- 1 | Break down your assets by names: about, home, etc. -------------------------------------------------------------------------------- /bubble-chart/src/components/BubbleChart/BubbleChart.scss: -------------------------------------------------------------------------------- 1 | .buttonFixed { 2 | position: fixed; 3 | top: 25px; 4 | left: 25px; 5 | } 6 | 7 | .bubbleText { 8 | text-shadow: 1px 0 0 darkslategrey, 0 1px 0 darkslategrey, -1px 0 0 darkslategrey, 0 -1px 0 darkslategrey; 9 | } 10 | -------------------------------------------------------------------------------- /bubble-chart/src/components/BubbleChart/types.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | Author: Eli Elad Elrom 3 | Website: https://EliElrom.com 4 | License: MIT License 5 | Component: src/component/BubbleChart/types.ts 6 | */ 7 | 8 | export namespace Types { 9 | export type Data = { 10 | id: number 11 | name: string 12 | size: number 13 | fillColor: string 14 | } 15 | 16 | export type ForceData = { 17 | size: number 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /bubble-chart/src/features/README: -------------------------------------------------------------------------------- 1 | features components goes here. -------------------------------------------------------------------------------- /bubble-chart/src/hooks/README: -------------------------------------------------------------------------------- 1 | Hooks goes here. Check out some hooks examples here: 2 | https://github.com/EliEladElrom/react-tutorials -------------------------------------------------------------------------------- /bubble-chart/src/index.scss: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; 4 | -webkit-font-smoothing: antialiased; 5 | -moz-osx-font-smoothing: grayscale; 6 | } 7 | 8 | code { 9 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; 10 | } 11 | -------------------------------------------------------------------------------- /bubble-chart/src/layout/README: -------------------------------------------------------------------------------- 1 | layout components goes here, you can generate with generate-react-cli, example; 2 | $ npx generate-react-cli component BoxLayout --type=layout -------------------------------------------------------------------------------- /bubble-chart/src/pages/README: -------------------------------------------------------------------------------- 1 | Pages components goes here, you can generate with generate-react-cli, example; 2 | $ npx generate-react-cli component HomePage --type=page -------------------------------------------------------------------------------- /bubble-chart/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /bubble-chart/src/recoil/atoms/README: -------------------------------------------------------------------------------- 1 | Recoil atoms goes here, example: userAtoms.ts; 2 | 3 | /* 4 | Author: Eli Elad Elrom 5 | Website: https://EliElrom.com 6 | License: MIT License 7 | File: src/recoil/atoms/userAtoms.ts 8 | */ 9 | 10 | import { atom } from 'recoil' 11 | import { initUser } from '../../model' 12 | 13 | export const userState = atom({ 14 | key: 'UserState', 15 | default: initUser(), 16 | }) -------------------------------------------------------------------------------- /bubble-chart/src/redux/store.ts: -------------------------------------------------------------------------------- 1 | // src/redux/store.ts 2 | 3 | import { configureStore, combineReducers } from '@reduxjs/toolkit' 4 | 5 | const store = configureStore({ 6 | reducer: combineReducers({ 7 | // your reducers goes here 8 | }), 9 | }) 10 | 11 | export default store 12 | -------------------------------------------------------------------------------- /bubble-chart/src/widgets/README: -------------------------------------------------------------------------------- 1 | components goes here, you can generate with generate-react-cli, examples; 2 | $ npx generate-react-cli component MyWidget --type=widget -------------------------------------------------------------------------------- /bubble-chart/templates/component/style.scss: -------------------------------------------------------------------------------- 1 | .TemplateName { 2 | } -------------------------------------------------------------------------------- /bubble-chart/templates/component/test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { shallow } from 'enzyme'; 3 | import TemplateName from './TemplateName'; 4 | 5 | describe('', () => { 6 | let component; 7 | 8 | beforeEach(() => { 9 | component = shallow(); 10 | }); 11 | 12 | test('It should mount', () => { 13 | expect(component.length).toBe(1); 14 | }); 15 | }); 16 | -------------------------------------------------------------------------------- /bubble-chart/templates/page/style.scss: -------------------------------------------------------------------------------- 1 | .TemplateName { 2 | } -------------------------------------------------------------------------------- /donut-chart/.env: -------------------------------------------------------------------------------- 1 | SKIP_PREFLIGHT_CHECK=true 2 | BROWSER=none 3 | -------------------------------------------------------------------------------- /donut-chart/.eslintignore: -------------------------------------------------------------------------------- 1 | build/* 2 | public/* 3 | docs/* 4 | templates/* 5 | src/react-app-env.d.ts 6 | src/serviceWorker.ts 7 | e2e/jest.config.js 8 | e2e/puppeteer_standalone.js 9 | jest-puppeteer.config.js -------------------------------------------------------------------------------- /donut-chart/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "trailingComma": "es5", 3 | "printWidth": 200, 4 | "semi": false, 5 | "singleQuote": true, 6 | "tabWidth": 2 7 | } 8 | 9 | -------------------------------------------------------------------------------- /donut-chart/e2e/global.d.ts: -------------------------------------------------------------------------------- 1 | // globals defined in jest.config.js need to be included in this `d.ts` 2 | // file to avoid TS lint errors 3 | declare let SERVER_URL: string 4 | declare let JEST_TIMEOUT: number -------------------------------------------------------------------------------- /donut-chart/e2e/jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | preset: 'jest-puppeteer', 3 | globals: { 4 | SERVER_URL: 'http://localhost:3000', 5 | JEST_TIMEOUT: 50000 6 | }, 7 | testRegex: './*\\.test\\.tsx$' 8 | } 9 | console.log('RUNNING E2E INTEGRATION TESTS - MAKE SURE PORT 3000 IS NOT IN USAGE') -------------------------------------------------------------------------------- /donut-chart/jest-puppeteer.config.js: -------------------------------------------------------------------------------- 1 | // jest-puppeteer.config.js 2 | module.exports = { 3 | server: { 4 | command: `yarn start`, 5 | port: 3000, 6 | launchTimeout: 20000, 7 | debug: true, 8 | }, 9 | } 10 | -------------------------------------------------------------------------------- /donut-chart/public/data/donut.csv: -------------------------------------------------------------------------------- 1 | name,value 2 | Dog,15 3 | Cat,25 4 | Horse,30 5 | Monkey,5 6 | Mouse,12 7 | Zebra,8 8 | Elephant,13 9 | Snake,12 10 | Cow,14 -------------------------------------------------------------------------------- /donut-chart/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EliEladElrom/react-tutorials/7616e3024e2b709a7e40b9862e0008193cfd9636/donut-chart/public/favicon.ico -------------------------------------------------------------------------------- /donut-chart/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EliEladElrom/react-tutorials/7616e3024e2b709a7e40b9862e0008193cfd9636/donut-chart/public/logo192.png -------------------------------------------------------------------------------- /donut-chart/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EliEladElrom/react-tutorials/7616e3024e2b709a7e40b9862e0008193cfd9636/donut-chart/public/logo512.png -------------------------------------------------------------------------------- /donut-chart/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /donut-chart/src/AppRouter.test.tsx: -------------------------------------------------------------------------------- 1 | // src/AppRouter.test.tsx 2 | import React from 'react' 3 | import { shallow } from 'enzyme' 4 | import AppRouter from './AppRouter' 5 | 6 | describe('', () => { 7 | let component 8 | 9 | beforeEach(() => { 10 | component = shallow() 11 | }) 12 | 13 | test('renders without crashing', () => { 14 | expect(component.length).toBe(1) 15 | }) 16 | }) 17 | -------------------------------------------------------------------------------- /donut-chart/src/assets/README: -------------------------------------------------------------------------------- 1 | Break down your assets by names: about, home, etc. -------------------------------------------------------------------------------- /donut-chart/src/components/DonutChart/DonutChart.scss: -------------------------------------------------------------------------------- 1 | .DonutChart { 2 | } -------------------------------------------------------------------------------- /donut-chart/src/features/README: -------------------------------------------------------------------------------- 1 | features components goes here. -------------------------------------------------------------------------------- /donut-chart/src/hooks/README: -------------------------------------------------------------------------------- 1 | Hooks goes here. Check out some hooks examples here: 2 | https://github.com/EliEladElrom/react-tutorials -------------------------------------------------------------------------------- /donut-chart/src/index.scss: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; 4 | -webkit-font-smoothing: antialiased; 5 | -moz-osx-font-smoothing: grayscale; 6 | } 7 | 8 | code { 9 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; 10 | } 11 | -------------------------------------------------------------------------------- /donut-chart/src/layout/README: -------------------------------------------------------------------------------- 1 | layout components goes here, you can generate with generate-react-cli, example; 2 | $ npx generate-react-cli component BoxLayout --type=layout -------------------------------------------------------------------------------- /donut-chart/src/pages/README: -------------------------------------------------------------------------------- 1 | Pages components goes here, you can generate with generate-react-cli, example; 2 | $ npx generate-react-cli component HomePage --type=page -------------------------------------------------------------------------------- /donut-chart/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /donut-chart/src/redux/store.ts: -------------------------------------------------------------------------------- 1 | // src/redux/store.ts 2 | 3 | import { configureStore, combineReducers } from '@reduxjs/toolkit' 4 | 5 | const store = configureStore({ 6 | reducer: combineReducers({ 7 | // your reducers goes here 8 | }), 9 | }) 10 | 11 | export default store 12 | -------------------------------------------------------------------------------- /donut-chart/src/widgets/DonutChartWidget/DonutChartWidget.scss: -------------------------------------------------------------------------------- 1 | .DonutChartWidget { 2 | } -------------------------------------------------------------------------------- /donut-chart/src/widgets/README: -------------------------------------------------------------------------------- 1 | components goes here, you can generate with generate-react-cli, examples; 2 | $ npx generate-react-cli component MyWidget --type=widget 3 | 4 | // d3 Widget & Chart Component 5 | $ npx generate-react-cli component LineChart --type=d3WidgetComponent 6 | $ npx generate-react-cli component LineChartWidget --type=d3Widget -------------------------------------------------------------------------------- /donut-chart/templates/component/TemplateName.scss: -------------------------------------------------------------------------------- 1 | .TemplateName { 2 | } -------------------------------------------------------------------------------- /donut-chart/templates/page/TemplateName.scss: -------------------------------------------------------------------------------- 1 | .TemplateName { 2 | } -------------------------------------------------------------------------------- /e2e_ts_testing_with_puppeteer/.env: -------------------------------------------------------------------------------- 1 | SKIP_PREFLIGHT_CHECK=true 2 | BROWSER=none 3 | -------------------------------------------------------------------------------- /e2e_ts_testing_with_puppeteer/.eslintignore: -------------------------------------------------------------------------------- 1 | build/* 2 | public/* 3 | docs/* 4 | templates/* 5 | src/react-app-env.d.ts 6 | src/serviceWorker.ts 7 | e2e/jest.config.js 8 | e2e/puppeteer_standalone.js 9 | jest-puppeteer.config.js -------------------------------------------------------------------------------- /e2e_ts_testing_with_puppeteer/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "trailingComma": "es5", 3 | "printWidth": 100, 4 | "semi": false, 5 | "singleQuote": true, 6 | "tabWidth": 2 7 | } 8 | 9 | -------------------------------------------------------------------------------- /e2e_ts_testing_with_puppeteer/e2e/global.d.ts: -------------------------------------------------------------------------------- 1 | // globals defined in jest.config.js need to be included in this `d.ts` 2 | // file to avoid TS lint errors 3 | declare let SERVER_URL: string 4 | declare let JEST_TIMEOUT: number -------------------------------------------------------------------------------- /e2e_ts_testing_with_puppeteer/e2e/jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | preset: 'jest-puppeteer', 3 | globals: { 4 | SERVER_URL: 'http://localhost:3000', 5 | JEST_TIMEOUT: 10000 6 | }, 7 | testRegex: './*\\.test\\.tsx$' 8 | } 9 | console.log('RUNNING E2E INTEGRATION TESTS - MAKE SURE PORT 3000 IS NOT IN USAGE') -------------------------------------------------------------------------------- /e2e_ts_testing_with_puppeteer/jest-puppeteer.config.js: -------------------------------------------------------------------------------- 1 | // jest-puppeteer.config.js 2 | module.exports = { 3 | server: { 4 | command: `yarn start`, 5 | port: 3000, 6 | launchTimeout: 20000, 7 | debug: true, 8 | }, 9 | } 10 | -------------------------------------------------------------------------------- /e2e_ts_testing_with_puppeteer/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EliEladElrom/react-tutorials/7616e3024e2b709a7e40b9862e0008193cfd9636/e2e_ts_testing_with_puppeteer/public/favicon.ico -------------------------------------------------------------------------------- /e2e_ts_testing_with_puppeteer/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EliEladElrom/react-tutorials/7616e3024e2b709a7e40b9862e0008193cfd9636/e2e_ts_testing_with_puppeteer/public/logo192.png -------------------------------------------------------------------------------- /e2e_ts_testing_with_puppeteer/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EliEladElrom/react-tutorials/7616e3024e2b709a7e40b9862e0008193cfd9636/e2e_ts_testing_with_puppeteer/public/logo512.png -------------------------------------------------------------------------------- /e2e_ts_testing_with_puppeteer/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /e2e_ts_testing_with_puppeteer/src/App.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { shallow } from 'enzyme' 3 | import App from './App' 4 | 5 | describe('', () => { 6 | let component 7 | 8 | beforeEach(() => { 9 | component = shallow() 10 | }) 11 | 12 | test('It should mount', () => { 13 | expect(component.length).toBe(1) 14 | }) 15 | }) 16 | -------------------------------------------------------------------------------- /e2e_ts_testing_with_puppeteer/src/assets/README: -------------------------------------------------------------------------------- 1 | Break down your assets by names: about, home, etc. -------------------------------------------------------------------------------- /e2e_ts_testing_with_puppeteer/src/components/README: -------------------------------------------------------------------------------- 1 | components goes here, you can generate with generate-react-cli, example; 2 | $ npx generate-react-cli component UserButton -------------------------------------------------------------------------------- /e2e_ts_testing_with_puppeteer/src/features/README: -------------------------------------------------------------------------------- 1 | features components goes here. -------------------------------------------------------------------------------- /e2e_ts_testing_with_puppeteer/src/layout/README: -------------------------------------------------------------------------------- 1 | layout components goes here, you can generate with generate-react-cli, example; 2 | $ npx generate-react-cli component BoxLayout --type=layout -------------------------------------------------------------------------------- /e2e_ts_testing_with_puppeteer/src/model/README: -------------------------------------------------------------------------------- 1 | place all your object model files here, for example: userObject.ts 2 | 3 | export interface userObject { 4 | email: string 5 | password: string 6 | } 7 | 8 | export const initUser = (): userObject => ({ 9 | email: '', 10 | password: '', 11 | }) 12 | -------------------------------------------------------------------------------- /e2e_ts_testing_with_puppeteer/src/pages/README: -------------------------------------------------------------------------------- 1 | Pages components goes here, you can generate with generate-react-cli, example; 2 | $ npx generate-react-cli component HomePage --type=page -------------------------------------------------------------------------------- /e2e_ts_testing_with_puppeteer/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /e2e_ts_testing_with_puppeteer/src/recoil/atoms/README: -------------------------------------------------------------------------------- 1 | Recoil atoms goes here, example: userAtoms.ts; 2 | 3 | // src/recoil/atoms/userAtoms.ts 4 | import { atom } from 'recoil' 5 | import { initUser } from '../../model' 6 | 7 | export const userState = atom({ 8 | key: 'UserState', 9 | default: initUser(), 10 | }) -------------------------------------------------------------------------------- /e2e_ts_testing_with_puppeteer/src/redux/store.ts: -------------------------------------------------------------------------------- 1 | // src/redux/store.ts 2 | 3 | import { configureStore, combineReducers } from '@reduxjs/toolkit' 4 | 5 | const store = configureStore({ 6 | reducer: combineReducers({ 7 | // your reducers goes here 8 | }), 9 | }) 10 | 11 | export default store 12 | -------------------------------------------------------------------------------- /e2e_ts_testing_with_puppeteer/templates/component/style.scss: -------------------------------------------------------------------------------- 1 | .TemplateName { 2 | font-family: 'Open Sans', sans-serif; 3 | font-weight: 700; 4 | } -------------------------------------------------------------------------------- /ecr-ecs-github-ci-cd/getting-started/.dockerignore: -------------------------------------------------------------------------------- 1 | node_modules -------------------------------------------------------------------------------- /ecr-ecs-github-ci-cd/getting-started/.github/workflows/build.yml: -------------------------------------------------------------------------------- 1 | name: Build 2 | on: [push, pull_request] 3 | jobs: 4 | build: 5 | name: Build 6 | runs-on: ubuntu-latest 7 | steps: 8 | - uses: actions/checkout@v2 9 | - name: Build 10 | uses: docker/build-push-action@v1 11 | with: 12 | push: false 13 | -------------------------------------------------------------------------------- /ecr-ecs-github-ci-cd/getting-started/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | -------------------------------------------------------------------------------- /ecr-ecs-github-ci-cd/getting-started/app/src/persistence/index.js: -------------------------------------------------------------------------------- 1 | if (process.env.MYSQL_HOST) module.exports = require('./mysql'); 2 | else module.exports = require('./sqlite'); 3 | -------------------------------------------------------------------------------- /ecr-ecs-github-ci-cd/getting-started/app/src/routes/addItem.js: -------------------------------------------------------------------------------- 1 | const db = require('../persistence'); 2 | const uuid = require('uuid/v4'); 3 | 4 | module.exports = async (req, res) => { 5 | const item = { 6 | id: uuid(), 7 | name: req.body.name, 8 | completed: false, 9 | }; 10 | 11 | await db.storeItem(item); 12 | res.send(item); 13 | }; 14 | -------------------------------------------------------------------------------- /ecr-ecs-github-ci-cd/getting-started/app/src/routes/deleteItem.js: -------------------------------------------------------------------------------- 1 | const db = require('../persistence'); 2 | 3 | module.exports = async (req, res) => { 4 | await db.removeItem(req.params.id); 5 | res.sendStatus(200); 6 | }; 7 | -------------------------------------------------------------------------------- /ecr-ecs-github-ci-cd/getting-started/app/src/routes/getItems.js: -------------------------------------------------------------------------------- 1 | const db = require('../persistence'); 2 | 3 | module.exports = async (req, res) => { 4 | const items = await db.getItems(); 5 | res.send(items); 6 | }; 7 | -------------------------------------------------------------------------------- /ecr-ecs-github-ci-cd/getting-started/app/src/routes/updateItem.js: -------------------------------------------------------------------------------- 1 | const db = require('../persistence'); 2 | 3 | module.exports = async (req, res) => { 4 | await db.updateItem(req.params.id, { 5 | name: req.body.name, 6 | completed: req.body.completed, 7 | }); 8 | const item = await db.getItem(req.params.id); 9 | res.send(item); 10 | }; 11 | -------------------------------------------------------------------------------- /ecr-ecs-github-ci-cd/getting-started/app/src/static/css/font-awesome/fa-brands-400.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EliEladElrom/react-tutorials/7616e3024e2b709a7e40b9862e0008193cfd9636/ecr-ecs-github-ci-cd/getting-started/app/src/static/css/font-awesome/fa-brands-400.eot -------------------------------------------------------------------------------- /ecr-ecs-github-ci-cd/getting-started/app/src/static/css/font-awesome/fa-brands-400.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EliEladElrom/react-tutorials/7616e3024e2b709a7e40b9862e0008193cfd9636/ecr-ecs-github-ci-cd/getting-started/app/src/static/css/font-awesome/fa-brands-400.ttf -------------------------------------------------------------------------------- /ecr-ecs-github-ci-cd/getting-started/app/src/static/css/font-awesome/fa-brands-400.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EliEladElrom/react-tutorials/7616e3024e2b709a7e40b9862e0008193cfd9636/ecr-ecs-github-ci-cd/getting-started/app/src/static/css/font-awesome/fa-brands-400.woff -------------------------------------------------------------------------------- /ecr-ecs-github-ci-cd/getting-started/app/src/static/css/font-awesome/fa-brands-400.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EliEladElrom/react-tutorials/7616e3024e2b709a7e40b9862e0008193cfd9636/ecr-ecs-github-ci-cd/getting-started/app/src/static/css/font-awesome/fa-brands-400.woff2 -------------------------------------------------------------------------------- /ecr-ecs-github-ci-cd/getting-started/app/src/static/css/font-awesome/fa-regular-400.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EliEladElrom/react-tutorials/7616e3024e2b709a7e40b9862e0008193cfd9636/ecr-ecs-github-ci-cd/getting-started/app/src/static/css/font-awesome/fa-regular-400.eot -------------------------------------------------------------------------------- /ecr-ecs-github-ci-cd/getting-started/app/src/static/css/font-awesome/fa-regular-400.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EliEladElrom/react-tutorials/7616e3024e2b709a7e40b9862e0008193cfd9636/ecr-ecs-github-ci-cd/getting-started/app/src/static/css/font-awesome/fa-regular-400.ttf -------------------------------------------------------------------------------- /ecr-ecs-github-ci-cd/getting-started/app/src/static/css/font-awesome/fa-regular-400.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EliEladElrom/react-tutorials/7616e3024e2b709a7e40b9862e0008193cfd9636/ecr-ecs-github-ci-cd/getting-started/app/src/static/css/font-awesome/fa-regular-400.woff -------------------------------------------------------------------------------- /ecr-ecs-github-ci-cd/getting-started/app/src/static/css/font-awesome/fa-regular-400.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EliEladElrom/react-tutorials/7616e3024e2b709a7e40b9862e0008193cfd9636/ecr-ecs-github-ci-cd/getting-started/app/src/static/css/font-awesome/fa-regular-400.woff2 -------------------------------------------------------------------------------- /ecr-ecs-github-ci-cd/getting-started/app/src/static/css/font-awesome/fa-solid-900.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EliEladElrom/react-tutorials/7616e3024e2b709a7e40b9862e0008193cfd9636/ecr-ecs-github-ci-cd/getting-started/app/src/static/css/font-awesome/fa-solid-900.eot -------------------------------------------------------------------------------- /ecr-ecs-github-ci-cd/getting-started/app/src/static/css/font-awesome/fa-solid-900.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EliEladElrom/react-tutorials/7616e3024e2b709a7e40b9862e0008193cfd9636/ecr-ecs-github-ci-cd/getting-started/app/src/static/css/font-awesome/fa-solid-900.ttf -------------------------------------------------------------------------------- /ecr-ecs-github-ci-cd/getting-started/app/src/static/css/font-awesome/fa-solid-900.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EliEladElrom/react-tutorials/7616e3024e2b709a7e40b9862e0008193cfd9636/ecr-ecs-github-ci-cd/getting-started/app/src/static/css/font-awesome/fa-solid-900.woff -------------------------------------------------------------------------------- /ecr-ecs-github-ci-cd/getting-started/app/src/static/css/font-awesome/fa-solid-900.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EliEladElrom/react-tutorials/7616e3024e2b709a7e40b9862e0008193cfd9636/ecr-ecs-github-ci-cd/getting-started/app/src/static/css/font-awesome/fa-solid-900.woff2 -------------------------------------------------------------------------------- /ecr-ecs-github-ci-cd/getting-started/build.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | 3 | set -e 4 | 5 | if [ $1 == "--push" ]; then 6 | WILL_PUSH=1 7 | else 8 | WILL_PUSH=0 9 | fi 10 | 11 | docker buildx build \ 12 | --platform linux/amd64,linux/arm64 \ 13 | -t docker/getting-started:latest \ 14 | $( (( $WILL_PUSH == 1 )) && printf %s '--push' ) . 15 | -------------------------------------------------------------------------------- /ecr-ecs-github-ci-cd/getting-started/docker-compose.yml: -------------------------------------------------------------------------------- 1 | version: "3.7" 2 | 3 | services: 4 | docs: 5 | build: 6 | context: . 7 | dockerfile: Dockerfile 8 | target: dev 9 | ports: 10 | - 8000:8000 11 | volumes: 12 | - ./:/app 13 | -------------------------------------------------------------------------------- /ecr-ecs-github-ci-cd/getting-started/requirements.txt: -------------------------------------------------------------------------------- 1 | mkdocs==1.2.3 2 | mkdocs-material==4.6.3 3 | mkdocs-minify-plugin==0.2.3 4 | pygments==2.7.4 5 | pymdown-extensions==7.0 6 | -------------------------------------------------------------------------------- /ecr-ecs-github-ci-cd/getting-started/yarn.lock: -------------------------------------------------------------------------------- 1 | # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. 2 | # yarn lockfile v1 3 | 4 | 5 | -------------------------------------------------------------------------------- /force-chart/.env: -------------------------------------------------------------------------------- 1 | SKIP_PREFLIGHT_CHECK=true 2 | BROWSER=none 3 | -------------------------------------------------------------------------------- /force-chart/.eslintignore: -------------------------------------------------------------------------------- 1 | build/* 2 | public/* 3 | docs/* 4 | templates/* 5 | src/react-app-env.d.ts 6 | src/serviceWorker.ts 7 | e2e/jest.config.js 8 | e2e/puppeteer_standalone.js 9 | jest-puppeteer.config.js -------------------------------------------------------------------------------- /force-chart/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "trailingComma": "es5", 3 | "printWidth": 200, 4 | "semi": false, 5 | "singleQuote": true, 6 | "tabWidth": 2 7 | } 8 | 9 | -------------------------------------------------------------------------------- /force-chart/e2e/global.d.ts: -------------------------------------------------------------------------------- 1 | // globals defined in jest.config.js need to be included in this `d.ts` 2 | // file to avoid TS lint errors 3 | declare let SERVER_URL: string 4 | declare let JEST_TIMEOUT: number -------------------------------------------------------------------------------- /force-chart/e2e/jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | preset: 'jest-puppeteer', 3 | globals: { 4 | SERVER_URL: 'http://localhost:3000', 5 | JEST_TIMEOUT: 50000 6 | }, 7 | testRegex: './*\\.test\\.tsx$' 8 | } 9 | console.log('RUNNING E2E INTEGRATION TESTS - MAKE SURE PORT 3000 IS NOT IN USAGE') -------------------------------------------------------------------------------- /force-chart/jest-puppeteer.config.js: -------------------------------------------------------------------------------- 1 | // jest-puppeteer.config.js 2 | module.exports = { 3 | server: { 4 | command: `yarn start`, 5 | port: 3000, 6 | launchTimeout: 20000, 7 | debug: true, 8 | }, 9 | } 10 | -------------------------------------------------------------------------------- /force-chart/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EliEladElrom/react-tutorials/7616e3024e2b709a7e40b9862e0008193cfd9636/force-chart/public/favicon.ico -------------------------------------------------------------------------------- /force-chart/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EliEladElrom/react-tutorials/7616e3024e2b709a7e40b9862e0008193cfd9636/force-chart/public/logo192.png -------------------------------------------------------------------------------- /force-chart/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EliEladElrom/react-tutorials/7616e3024e2b709a7e40b9862e0008193cfd9636/force-chart/public/logo512.png -------------------------------------------------------------------------------- /force-chart/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /force-chart/src/AppRouter.test.tsx: -------------------------------------------------------------------------------- 1 | // src/AppRouter.test.tsx 2 | import React from 'react' 3 | import { shallow } from 'enzyme' 4 | import AppRouter from './AppRouter' 5 | 6 | describe('', () => { 7 | let component 8 | 9 | beforeEach(() => { 10 | component = shallow() 11 | }) 12 | 13 | test('renders without crashing', () => { 14 | expect(component.length).toBe(1) 15 | }) 16 | }) 17 | -------------------------------------------------------------------------------- /force-chart/src/assets/README: -------------------------------------------------------------------------------- 1 | Break down your assets by names: about, home, etc. -------------------------------------------------------------------------------- /force-chart/src/features/README: -------------------------------------------------------------------------------- 1 | features components goes here. -------------------------------------------------------------------------------- /force-chart/src/hooks/README: -------------------------------------------------------------------------------- 1 | Hooks goes here. Check out some hooks examples here: 2 | https://github.com/EliEladElrom/react-tutorials -------------------------------------------------------------------------------- /force-chart/src/index.scss: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; 4 | -webkit-font-smoothing: antialiased; 5 | -moz-osx-font-smoothing: grayscale; 6 | } 7 | 8 | code { 9 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; 10 | } 11 | -------------------------------------------------------------------------------- /force-chart/src/layout/README: -------------------------------------------------------------------------------- 1 | layout components goes here, you can generate with generate-react-cli, example; 2 | $ npx generate-react-cli component BoxLayout --type=layout -------------------------------------------------------------------------------- /force-chart/src/pages/README: -------------------------------------------------------------------------------- 1 | Pages components goes here, you can generate with generate-react-cli, example; 2 | $ npx generate-react-cli component HomePage --type=page -------------------------------------------------------------------------------- /force-chart/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /force-chart/src/recoil/atoms/README: -------------------------------------------------------------------------------- 1 | Recoil atoms goes here, example: userAtoms.ts; 2 | 3 | /* 4 | Author: Eli Elad Elrom 5 | Website: https://EliElrom.com 6 | License: MIT License 7 | File: src/recoil/atoms/userAtoms.ts 8 | */ 9 | 10 | import { atom } from 'recoil' 11 | import { initUser } from '../../model' 12 | 13 | export const userState = atom({ 14 | key: 'UserState', 15 | default: initUser(), 16 | }) -------------------------------------------------------------------------------- /force-chart/src/redux/store.ts: -------------------------------------------------------------------------------- 1 | // src/redux/store.ts 2 | 3 | import { configureStore, combineReducers } from '@reduxjs/toolkit' 4 | 5 | const store = configureStore({ 6 | reducer: combineReducers({ 7 | // your reducers goes here 8 | }), 9 | }) 10 | 11 | export default store 12 | -------------------------------------------------------------------------------- /force-chart/src/widgets/NetworksWidget/NetworksWidget.scss: -------------------------------------------------------------------------------- 1 | .wrapperDiv { 2 | width: 800px; 3 | height: 350px; 4 | clip-path: inset(10px 20px 30px 40px); 5 | } 6 | 7 | .selectedText { 8 | font-size: 13px; 9 | color: #373636; 10 | } 11 | -------------------------------------------------------------------------------- /force-chart/src/widgets/README: -------------------------------------------------------------------------------- 1 | components goes here, you can generate with generate-react-cli, examples; 2 | $ npx generate-react-cli component MyWidget --type=widget -------------------------------------------------------------------------------- /force-chart/templates/component/style.scss: -------------------------------------------------------------------------------- 1 | .TemplateName { 2 | } -------------------------------------------------------------------------------- /force-chart/templates/component/test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { shallow } from 'enzyme'; 3 | import TemplateName from './TemplateName'; 4 | 5 | describe('', () => { 6 | let component; 7 | 8 | beforeEach(() => { 9 | component = shallow(); 10 | }); 11 | 12 | test('It should mount', () => { 13 | expect(component.length).toBe(1); 14 | }); 15 | }); 16 | -------------------------------------------------------------------------------- /force-chart/templates/page/style.scss: -------------------------------------------------------------------------------- 1 | .TemplateName { 2 | } -------------------------------------------------------------------------------- /functional-class-components/e2e/global.d.ts: -------------------------------------------------------------------------------- 1 | // globals defined in jest.config.js need to be included in this `d.ts` 2 | // file to avoid TS lint errors 3 | declare let SERVER_URL: string 4 | declare let JEST_TIMEOUT: number -------------------------------------------------------------------------------- /functional-class-components/e2e/jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | preset: 'jest-puppeteer', 3 | globals: { 4 | SERVER_URL: 'http://localhost:3000', 5 | JEST_TIMEOUT: 10000 6 | }, 7 | testRegex: './*\\.test\\.tsx$' 8 | } 9 | console.log('RUNNING E2E INTEGRATION TESTS - MAKE SURE PORT 3000 IS NOT IN USAGE') -------------------------------------------------------------------------------- /functional-class-components/jest-puppeteer.config.js: -------------------------------------------------------------------------------- 1 | // jest-puppeteer.config.js 2 | module.exports = { 3 | server: { 4 | command: `yarn start`, 5 | port: 3000, 6 | launchTimeout: 20000, 7 | debug: true, 8 | }, 9 | } 10 | -------------------------------------------------------------------------------- /functional-class-components/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EliEladElrom/react-tutorials/7616e3024e2b709a7e40b9862e0008193cfd9636/functional-class-components/public/favicon.ico -------------------------------------------------------------------------------- /functional-class-components/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EliEladElrom/react-tutorials/7616e3024e2b709a7e40b9862e0008193cfd9636/functional-class-components/public/logo192.png -------------------------------------------------------------------------------- /functional-class-components/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EliEladElrom/react-tutorials/7616e3024e2b709a7e40b9862e0008193cfd9636/functional-class-components/public/logo512.png -------------------------------------------------------------------------------- /functional-class-components/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /functional-class-components/src/assets/README: -------------------------------------------------------------------------------- 1 | Break down your assets by names: about, home, etc. -------------------------------------------------------------------------------- /functional-class-components/src/components/README: -------------------------------------------------------------------------------- 1 | components goes here, you can generate with generate-react-cli, example; 2 | $ npx generate-react-cli component UserButton -------------------------------------------------------------------------------- /functional-class-components/src/features/README: -------------------------------------------------------------------------------- 1 | features components goes here. -------------------------------------------------------------------------------- /functional-class-components/src/layout/Centered/Centered.styles.ts: -------------------------------------------------------------------------------- 1 | import { createStyles, Theme } from '@material-ui/core/styles' 2 | 3 | export default (theme: Theme) => 4 | createStyles({ 5 | '@global': { 6 | 'body, html, #root': { 7 | paddingTop: 40, 8 | width: '100%', 9 | }, 10 | }, 11 | container: { 12 | maxWidth: '400px', 13 | margin: '0 auto', 14 | }, 15 | }) 16 | -------------------------------------------------------------------------------- /functional-class-components/src/layout/Centered/index.ts: -------------------------------------------------------------------------------- 1 | export { Centered } from './Centered' 2 | -------------------------------------------------------------------------------- /functional-class-components/src/layout/README: -------------------------------------------------------------------------------- 1 | layout components goes here, you can generate with generate-react-cli, example; 2 | $ npx generate-react-cli component BoxLayout --type=layout -------------------------------------------------------------------------------- /functional-class-components/src/model/README: -------------------------------------------------------------------------------- 1 | place all your object model files here, for example: userObject.ts 2 | 3 | export interface userObject { 4 | email: string 5 | password: string 6 | } 7 | 8 | export const initUser = (): userObject => ({ 9 | email: '', 10 | password: '', 11 | }) 12 | -------------------------------------------------------------------------------- /functional-class-components/src/pages/README: -------------------------------------------------------------------------------- 1 | Pages components goes here, you can generate with generate-react-cli, example; 2 | $ npx generate-react-cli component HomePage --type=page -------------------------------------------------------------------------------- /functional-class-components/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /functional-class-components/src/recoil/atoms/README: -------------------------------------------------------------------------------- 1 | Recoil atoms goes here, example: userAtoms.ts; 2 | 3 | // src/recoil/atoms/userAtoms.ts 4 | import { atom } from 'recoil' 5 | import { initUser } from '../../model' 6 | 7 | export const userState = atom({ 8 | key: 'UserState', 9 | default: initUser(), 10 | }) -------------------------------------------------------------------------------- /functional-class-components/src/redux/store.ts: -------------------------------------------------------------------------------- 1 | // src/redux/store.ts 2 | 3 | import { configureStore, combineReducers } from '@reduxjs/toolkit' 4 | 5 | const store = configureStore({ 6 | reducer: combineReducers({ 7 | // your reducers goes here 8 | }), 9 | }) 10 | 11 | export default store 12 | -------------------------------------------------------------------------------- /functional-class-components/templates/component/style.scss: -------------------------------------------------------------------------------- 1 | .TemplateName { 2 | } -------------------------------------------------------------------------------- /functional-class-components/templates/page/style.scss: -------------------------------------------------------------------------------- 1 | .TemplateName { 2 | } -------------------------------------------------------------------------------- /hello-jest-enzyme-ts/e2e/global.d.ts: -------------------------------------------------------------------------------- 1 | // globals defined in jest.config.js need to be included in this `d.ts` 2 | // file to avoid TS lint errors 3 | declare let SERVER_URL: string 4 | declare let JEST_TIMEOUT: number -------------------------------------------------------------------------------- /hello-jest-enzyme-ts/e2e/jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | preset: 'jest-puppeteer', 3 | globals: { 4 | SERVER_URL: 'http://localhost:3000', 5 | JEST_TIMEOUT: 30000 6 | }, 7 | testRegex: './*\\.test\\.tsx$' 8 | } 9 | console.log('RUNNING E2E INTEGRATION TESTS - MAKE SURE PORT 3000 IS NOT IN USAGE') -------------------------------------------------------------------------------- /hello-jest-enzyme-ts/jest-puppeteer.config.js: -------------------------------------------------------------------------------- 1 | // jest-puppeteer.config.js 2 | module.exports = { 3 | server: { 4 | command: `yarn start`, 5 | port: 3000, 6 | launchTimeout: 20000, 7 | debug: true, 8 | }, 9 | } 10 | -------------------------------------------------------------------------------- /hello-jest-enzyme-ts/public/calculator-input.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EliEladElrom/react-tutorials/7616e3024e2b709a7e40b9862e0008193cfd9636/hello-jest-enzyme-ts/public/calculator-input.jpg -------------------------------------------------------------------------------- /hello-jest-enzyme-ts/public/calculator.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EliEladElrom/react-tutorials/7616e3024e2b709a7e40b9862e0008193cfd9636/hello-jest-enzyme-ts/public/calculator.jpg -------------------------------------------------------------------------------- /hello-jest-enzyme-ts/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EliEladElrom/react-tutorials/7616e3024e2b709a7e40b9862e0008193cfd9636/hello-jest-enzyme-ts/public/favicon.ico -------------------------------------------------------------------------------- /hello-jest-enzyme-ts/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EliEladElrom/react-tutorials/7616e3024e2b709a7e40b9862e0008193cfd9636/hello-jest-enzyme-ts/public/logo192.png -------------------------------------------------------------------------------- /hello-jest-enzyme-ts/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EliEladElrom/react-tutorials/7616e3024e2b709a7e40b9862e0008193cfd9636/hello-jest-enzyme-ts/public/logo512.png -------------------------------------------------------------------------------- /hello-jest-enzyme-ts/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /hello-jest-enzyme-ts/src/App.tsx: -------------------------------------------------------------------------------- 1 | // src/App.tsx 2 | 3 | import React from 'react' 4 | import './App.scss' 5 | import Calculator from './components/Calculator/Calculator' 6 | 7 | function App() { 8 | return ( 9 |
10 | 11 |
12 | ) 13 | } 14 | 15 | export default App 16 | -------------------------------------------------------------------------------- /hello-jest-enzyme-ts/src/assets/README: -------------------------------------------------------------------------------- 1 | Break down your assets by names: about, home, etc. -------------------------------------------------------------------------------- /hello-jest-enzyme-ts/src/components/Calculator/Calculator.scss: -------------------------------------------------------------------------------- 1 | .calculator-output { 2 | background: url('/calculator-input.jpg') no-repeat right top; 3 | color: #fff; 4 | font-size: 50px; 5 | width: 464px; 6 | height: 120px; 7 | text-align: center; 8 | display: flex; 9 | justify-content: center; 10 | align-items: center; 11 | } 12 | -------------------------------------------------------------------------------- /hello-jest-enzyme-ts/src/components/README: -------------------------------------------------------------------------------- 1 | components goes here, you can generate with generate-react-cli, example; 2 | $ npx generate-react-cli component UserButton -------------------------------------------------------------------------------- /hello-jest-enzyme-ts/src/features/README: -------------------------------------------------------------------------------- 1 | features components goes here. -------------------------------------------------------------------------------- /hello-jest-enzyme-ts/src/layout/README: -------------------------------------------------------------------------------- 1 | layout components goes here, you can generate with generate-react-cli, example; 2 | $ npx generate-react-cli component BoxLayout --type=layout -------------------------------------------------------------------------------- /hello-jest-enzyme-ts/src/model/README: -------------------------------------------------------------------------------- 1 | place all your object model files here, for example: userObject.ts 2 | 3 | export interface userObject { 4 | email: string 5 | password: string 6 | } 7 | 8 | export const initUser = (): userObject => ({ 9 | email: '', 10 | password: '', 11 | }) 12 | -------------------------------------------------------------------------------- /hello-jest-enzyme-ts/src/pages/README: -------------------------------------------------------------------------------- 1 | Pages components goes here, you can generate with generate-react-cli, example; 2 | $ npx generate-react-cli component HomePage --type=page -------------------------------------------------------------------------------- /hello-jest-enzyme-ts/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /hello-jest-enzyme-ts/src/recoil/atoms/README: -------------------------------------------------------------------------------- 1 | Recoil atoms goes here, example: userAtoms.ts; 2 | 3 | // src/recoil/atoms/userAtoms.ts 4 | import { atom } from 'recoil' 5 | import { initUser } from '../../model' 6 | 7 | export const userState = atom({ 8 | key: 'UserState', 9 | default: initUser(), 10 | }) -------------------------------------------------------------------------------- /hello-jest-enzyme-ts/src/redux/store.ts: -------------------------------------------------------------------------------- 1 | // src/redux/store.ts 2 | 3 | import { configureStore, combineReducers } from '@reduxjs/toolkit' 4 | 5 | const store = configureStore({ 6 | reducer: combineReducers({ 7 | // your reducers goes here 8 | }), 9 | }) 10 | 11 | export default store 12 | -------------------------------------------------------------------------------- /hello-jest-enzyme-ts/templates/component/style.scss: -------------------------------------------------------------------------------- 1 | .TemplateName { 2 | } -------------------------------------------------------------------------------- /hello-jest-enzyme-ts/templates/component/test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { shallow } from 'enzyme' 3 | import TemplateName from './TemplateName' 4 | 5 | describe('', () => { 6 | let component 7 | 8 | beforeEach(() => { 9 | component = shallow() 10 | }); 11 | 12 | test('It should mount', () => { 13 | expect(component.length).toBe(1) 14 | }) 15 | }) 16 | -------------------------------------------------------------------------------- /hello-jest-enzyme-ts/templates/page/style.scss: -------------------------------------------------------------------------------- 1 | .TemplateName { 2 | } -------------------------------------------------------------------------------- /hello-jest-enzyme/public/calculator-input.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EliEladElrom/react-tutorials/7616e3024e2b709a7e40b9862e0008193cfd9636/hello-jest-enzyme/public/calculator-input.jpg -------------------------------------------------------------------------------- /hello-jest-enzyme/public/calculator.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EliEladElrom/react-tutorials/7616e3024e2b709a7e40b9862e0008193cfd9636/hello-jest-enzyme/public/calculator.jpg -------------------------------------------------------------------------------- /hello-jest-enzyme/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EliEladElrom/react-tutorials/7616e3024e2b709a7e40b9862e0008193cfd9636/hello-jest-enzyme/public/favicon.ico -------------------------------------------------------------------------------- /hello-jest-enzyme/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EliEladElrom/react-tutorials/7616e3024e2b709a7e40b9862e0008193cfd9636/hello-jest-enzyme/public/logo192.png -------------------------------------------------------------------------------- /hello-jest-enzyme/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EliEladElrom/react-tutorials/7616e3024e2b709a7e40b9862e0008193cfd9636/hello-jest-enzyme/public/logo512.png -------------------------------------------------------------------------------- /hello-jest-enzyme/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /hello-jest-enzyme/src/App.js: -------------------------------------------------------------------------------- 1 | // src/App.js 2 | 3 | import React from 'react'; 4 | import './App.css'; 5 | import Calculator from "./components/Calculator"; 6 | 7 | function App() { 8 | return ( 9 |
10 | 11 |
12 | ); 13 | } 14 | 15 | export default App; -------------------------------------------------------------------------------- /hello-jest-enzyme/src/components/Calculator.css: -------------------------------------------------------------------------------- 1 | .calculator-output 2 | { 3 | background:url('/calculator-input.jpg') no-repeat right top; 4 | color:#fff; 5 | font-size:50px; 6 | width: 464px; 7 | height: 120px; 8 | text-align: center; 9 | display: flex; 10 | justify-content: center; 11 | align-items: center; 12 | } -------------------------------------------------------------------------------- /hello-preprocessors/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: [ 3 | require('postcss-nested'), 4 | require('autoprefixer'), 5 | ], 6 | }; 7 | -------------------------------------------------------------------------------- /hello-preprocessors/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EliEladElrom/react-tutorials/7616e3024e2b709a7e40b9862e0008193cfd9636/hello-preprocessors/public/favicon.ico -------------------------------------------------------------------------------- /hello-preprocessors/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EliEladElrom/react-tutorials/7616e3024e2b709a7e40b9862e0008193cfd9636/hello-preprocessors/public/logo192.png -------------------------------------------------------------------------------- /hello-preprocessors/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EliEladElrom/react-tutorials/7616e3024e2b709a7e40b9862e0008193cfd9636/hello-preprocessors/public/logo512.png -------------------------------------------------------------------------------- /hello-preprocessors/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /hello-preprocessors/src/App.less: -------------------------------------------------------------------------------- 1 | // src/App.less 2 | 3 | body { 4 | background: green; 5 | } -------------------------------------------------------------------------------- /hello-preprocessors/src/App.pcss: -------------------------------------------------------------------------------- 1 | // src/App.pcss 2 | 3 | body { 4 | background: yellow; 5 | } -------------------------------------------------------------------------------- /hello-preprocessors/src/App.scss: -------------------------------------------------------------------------------- 1 | // src/App.scss 2 | 3 | body { 4 | background: orange; 5 | } -------------------------------------------------------------------------------- /hello-preprocessors/src/App.styl: -------------------------------------------------------------------------------- 1 | // src/App.styl 2 | 3 | body { 4 | background: deeppink; 5 | } -------------------------------------------------------------------------------- /hello-preprocessors/src/App.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render } from '@testing-library/react'; 3 | import App from './App'; 4 | 5 | test('renders learn react link', () => { 6 | const { getByText } = render(); 7 | const linkElement = getByText(/learn react/i); 8 | expect(linkElement).toBeInTheDocument(); 9 | }); 10 | -------------------------------------------------------------------------------- /hello-preprocessors/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /hello-preprocessors/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/extend-expect'; 6 | -------------------------------------------------------------------------------- /hello-redux/.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 | -------------------------------------------------------------------------------- /hello-redux/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EliEladElrom/react-tutorials/7616e3024e2b709a7e40b9862e0008193cfd9636/hello-redux/public/favicon.ico -------------------------------------------------------------------------------- /hello-redux/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EliEladElrom/react-tutorials/7616e3024e2b709a7e40b9862e0008193cfd9636/hello-redux/public/logo192.png -------------------------------------------------------------------------------- /hello-redux/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EliEladElrom/react-tutorials/7616e3024e2b709a7e40b9862e0008193cfd9636/hello-redux/public/logo512.png -------------------------------------------------------------------------------- /hello-redux/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /hello-redux/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render } from '@testing-library/react'; 3 | import App from './App'; 4 | 5 | test('renders learn react link', () => { 6 | const { getByText } = render(); 7 | const linkElement = getByText(/learn react/i); 8 | expect(linkElement).toBeInTheDocument(); 9 | }); 10 | -------------------------------------------------------------------------------- /hello-redux/src/js/actions/MenuActions.js: -------------------------------------------------------------------------------- 1 | // src/js/actions/MenuActions.js 2 | 3 | export const USER_LOGIN = "USER_LOGIN"; 4 | export const USER_LOGOUT = "USER_LOGOUT"; 5 | 6 | export function showLogin() { 7 | return { type: USER_LOGIN }; 8 | } 9 | 10 | export function showLogout() { 11 | return { type: USER_LOGOUT }; 12 | } -------------------------------------------------------------------------------- /hello-redux/src/js/reducers/RootReducer.js: -------------------------------------------------------------------------------- 1 | // src/js/reducers/RootReducer.js 2 | import { combineReducers } from "redux"; 3 | import MenuReducer from "./MenuReducer"; 4 | 5 | export default combineReducers({ 6 | MenuReducer 7 | }); -------------------------------------------------------------------------------- /hello-redux/src/js/store/index.js: -------------------------------------------------------------------------------- 1 | // src/js/store/index.js 2 | import { createStore } from "redux"; 3 | import rootReducer from "../reducers/RootReducer"; 4 | 5 | const store = createStore(rootReducer); 6 | 7 | export default store; -------------------------------------------------------------------------------- /hello-redux/src/setupTests.js: -------------------------------------------------------------------------------- 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/extend-expect'; 6 | -------------------------------------------------------------------------------- /hello-world-react/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EliEladElrom/react-tutorials/7616e3024e2b709a7e40b9862e0008193cfd9636/hello-world-react/public/favicon.ico -------------------------------------------------------------------------------- /hello-world-react/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EliEladElrom/react-tutorials/7616e3024e2b709a7e40b9862e0008193cfd9636/hello-world-react/public/logo192.png -------------------------------------------------------------------------------- /hello-world-react/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EliEladElrom/react-tutorials/7616e3024e2b709a7e40b9862e0008193cfd9636/hello-world-react/public/logo512.png -------------------------------------------------------------------------------- /hello-world-react/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /hello-world-react/src/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './App.css'; 3 | import Header from "./header/header"; 4 | import Main from "./main/main"; 5 | 6 | function App() { 7 | return ( 8 |
9 |
10 |
11 |
12 | ); 13 | } 14 | 15 | export default App; 16 | -------------------------------------------------------------------------------- /hello-world-react/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render } from '@testing-library/react'; 3 | import App from './App'; 4 | 5 | test('renders learn react link', () => { 6 | const { getByText } = render(); 7 | const linkElement = getByText(/learn react/i); 8 | expect(linkElement).toBeInTheDocument(); 9 | }); 10 | -------------------------------------------------------------------------------- /hello-world-react/src/header/header.css: -------------------------------------------------------------------------------- 1 | .Header { 2 | border: 2px solid grey; 3 | text-align: center; 4 | padding: 20px; 5 | margin: 10px; 6 | } -------------------------------------------------------------------------------- /hello-world-react/src/main/main.css: -------------------------------------------------------------------------------- 1 | .Main { 2 | border: 2px solid grey; 3 | text-align: center; 4 | padding: 20%; 5 | margin: 10px; 6 | } -------------------------------------------------------------------------------- /hello-world-react/src/main/main.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './main.css'; 3 | 4 | const Main = vars => { 5 | return (
App Version Number #{vars.version}
); 6 | }; 7 | export default Main; -------------------------------------------------------------------------------- /hello-world-react/src/setupTests.js: -------------------------------------------------------------------------------- 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/extend-expect'; 6 | -------------------------------------------------------------------------------- /histogram-d3-ts/.env: -------------------------------------------------------------------------------- 1 | SKIP_PREFLIGHT_CHECK=true 2 | BROWSER=none 3 | -------------------------------------------------------------------------------- /histogram-d3-ts/.eslintignore: -------------------------------------------------------------------------------- 1 | build/* 2 | public/* 3 | docs/* 4 | templates/* 5 | src/react-app-env.d.ts 6 | src/serviceWorker.ts 7 | e2e/jest.config.js 8 | e2e/puppeteer_standalone.js 9 | jest-puppeteer.config.js -------------------------------------------------------------------------------- /histogram-d3-ts/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "trailingComma": "es5", 3 | "printWidth": 200, 4 | "semi": false, 5 | "singleQuote": true, 6 | "tabWidth": 2 7 | } 8 | 9 | -------------------------------------------------------------------------------- /histogram-d3-ts/e2e/global.d.ts: -------------------------------------------------------------------------------- 1 | // globals defined in jest.config.js need to be included in this `d.ts` 2 | // file to avoid TS lint errors 3 | declare let SERVER_URL: string 4 | declare let JEST_TIMEOUT: number -------------------------------------------------------------------------------- /histogram-d3-ts/e2e/jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | preset: 'jest-puppeteer', 3 | globals: { 4 | SERVER_URL: 'http://localhost:3000', 5 | JEST_TIMEOUT: 50000 6 | }, 7 | testRegex: './*\\.test\\.tsx$' 8 | } 9 | console.log('RUNNING E2E INTEGRATION TESTS - MAKE SURE PORT 3000 IS NOT IN USAGE') -------------------------------------------------------------------------------- /histogram-d3-ts/jest-puppeteer.config.js: -------------------------------------------------------------------------------- 1 | // jest-puppeteer.config.js 2 | module.exports = { 3 | server: { 4 | command: `yarn start`, 5 | port: 3000, 6 | launchTimeout: 20000, 7 | debug: true, 8 | }, 9 | } 10 | -------------------------------------------------------------------------------- /histogram-d3-ts/public/data/README: -------------------------------------------------------------------------------- 1 | Date source: 2 | https://ethereumprice.org/history/?start=2020-01-01&end=2020-12-12¤cy=USD -------------------------------------------------------------------------------- /histogram-d3-ts/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EliEladElrom/react-tutorials/7616e3024e2b709a7e40b9862e0008193cfd9636/histogram-d3-ts/public/favicon.ico -------------------------------------------------------------------------------- /histogram-d3-ts/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EliEladElrom/react-tutorials/7616e3024e2b709a7e40b9862e0008193cfd9636/histogram-d3-ts/public/logo192.png -------------------------------------------------------------------------------- /histogram-d3-ts/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EliEladElrom/react-tutorials/7616e3024e2b709a7e40b9862e0008193cfd9636/histogram-d3-ts/public/logo512.png -------------------------------------------------------------------------------- /histogram-d3-ts/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /histogram-d3-ts/src/assets/README: -------------------------------------------------------------------------------- 1 | Break down your assets by names: about, home, etc. -------------------------------------------------------------------------------- /histogram-d3-ts/src/components/Histogram/Histogram.scss: -------------------------------------------------------------------------------- 1 | .histogram { 2 | padding-top: 50px; 3 | } 4 | .sliderDiv { 5 | width: 400px; 6 | padding-left: 50px; 7 | padding-top: 20px; 8 | } 9 | svg text { 10 | fill: white; 11 | } 12 | -------------------------------------------------------------------------------- /histogram-d3-ts/src/components/Histogram/types.ts: -------------------------------------------------------------------------------- 1 | /* 2 | Author: Eli Elad Elrom 3 | Website: https://EliElrom.com 4 | License: MIT License 5 | Component: src/component/Histogram/types.ts 6 | */ 7 | 8 | export namespace Types { 9 | export type Data = { 10 | price: number 11 | } 12 | export type BarsNode = { 13 | x0: number 14 | x1: number 15 | length: number 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /histogram-d3-ts/src/components/PriceTableList/PriceTableList.scss: -------------------------------------------------------------------------------- 1 | .priceTableListTableCellHead { 2 | background-color: #343434; 3 | } 4 | 5 | .priceTableListTableCell { 6 | background-color: #515151; 7 | } 8 | -------------------------------------------------------------------------------- /histogram-d3-ts/src/components/PriceTableList/types.ts: -------------------------------------------------------------------------------- 1 | /* 2 | Author: Eli Elad Elrom 3 | Website: https://EliElrom.com 4 | License: MIT License 5 | Component: src/component/PriceTableList/types.ts 6 | */ 7 | 8 | export namespace Types { 9 | export type Data = { 10 | price: number 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /histogram-d3-ts/src/features/README: -------------------------------------------------------------------------------- 1 | features components goes here. -------------------------------------------------------------------------------- /histogram-d3-ts/src/index.scss: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; 4 | -webkit-font-smoothing: antialiased; 5 | -moz-osx-font-smoothing: grayscale; 6 | } 7 | 8 | code { 9 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; 10 | } 11 | -------------------------------------------------------------------------------- /histogram-d3-ts/src/layout/README: -------------------------------------------------------------------------------- 1 | layout components goes here, you can generate with generate-react-cli, example; 2 | $ npx generate-react-cli component BoxLayout --type=layout -------------------------------------------------------------------------------- /histogram-d3-ts/src/model/index.ts: -------------------------------------------------------------------------------- 1 | /* 2 | Author: Eli Elad Elrom 3 | Website: https://EliElrom.com 4 | License: MIT License 5 | File: src/model/index.ts 6 | */ 7 | 8 | export * from './historicalPriceObject' 9 | -------------------------------------------------------------------------------- /histogram-d3-ts/src/pages/README: -------------------------------------------------------------------------------- 1 | Pages components goes here, you can generate with generate-react-cli, example; 2 | $ npx generate-react-cli component HomePage --type=page -------------------------------------------------------------------------------- /histogram-d3-ts/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /histogram-d3-ts/src/recoil/atoms/README: -------------------------------------------------------------------------------- 1 | Recoil atoms goes here, example: userAtoms.ts; 2 | 3 | /* 4 | Author: Eli Elad Elrom 5 | Website: https://EliElrom.com 6 | License: MIT License 7 | File: src/recoil/atoms/userAtoms.ts 8 | */ 9 | 10 | import { atom } from 'recoil' 11 | import { initUser } from '../../model' 12 | 13 | export const userState = atom({ 14 | key: 'UserState', 15 | default: initUser(), 16 | }) -------------------------------------------------------------------------------- /histogram-d3-ts/src/redux/store.ts: -------------------------------------------------------------------------------- 1 | // src/redux/store.ts 2 | 3 | import { configureStore, combineReducers } from '@reduxjs/toolkit' 4 | 5 | const store = configureStore({ 6 | reducer: combineReducers({ 7 | // your reducers goes here 8 | }), 9 | }) 10 | 11 | export default store 12 | -------------------------------------------------------------------------------- /histogram-d3-ts/src/widgets/HistogramWidget/HistogramWidget.scss: -------------------------------------------------------------------------------- 1 | .priceTableListDivWrapper { 2 | padding-top: 100px; 3 | width: 500px; 4 | height: 500px; 5 | } 6 | -------------------------------------------------------------------------------- /histogram-d3-ts/src/widgets/README: -------------------------------------------------------------------------------- 1 | components goes here, you can generate with generate-react-cli, examples; 2 | $ npx generate-react-cli component MyWidget --type=widget -------------------------------------------------------------------------------- /histogram-d3-ts/templates/component/style.scss: -------------------------------------------------------------------------------- 1 | .TemplateName { 2 | } -------------------------------------------------------------------------------- /histogram-d3-ts/templates/page/style.scss: -------------------------------------------------------------------------------- 1 | .TemplateName { 2 | } -------------------------------------------------------------------------------- /histogram-d3-ts/templates/templates/component/style.scss: -------------------------------------------------------------------------------- 1 | .TemplateName { 2 | } -------------------------------------------------------------------------------- /histogram-d3-ts/templates/templates/page/style.scss: -------------------------------------------------------------------------------- 1 | .TemplateName { 2 | } -------------------------------------------------------------------------------- /mailchimp-newsletter/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "trailingComma": "es5", 3 | "printWidth": 100, 4 | "semi": false, 5 | "singleQuote": true, 6 | "tabWidth": 2 7 | } 8 | 9 | -------------------------------------------------------------------------------- /mailchimp-newsletter/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EliEladElrom/react-tutorials/7616e3024e2b709a7e40b9862e0008193cfd9636/mailchimp-newsletter/public/favicon.ico -------------------------------------------------------------------------------- /mailchimp-newsletter/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EliEladElrom/react-tutorials/7616e3024e2b709a7e40b9862e0008193cfd9636/mailchimp-newsletter/public/logo192.png -------------------------------------------------------------------------------- /mailchimp-newsletter/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EliEladElrom/react-tutorials/7616e3024e2b709a7e40b9862e0008193cfd9636/mailchimp-newsletter/public/logo512.png -------------------------------------------------------------------------------- /mailchimp-newsletter/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /mailchimp-newsletter/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom' 3 | import './index.scss' 4 | import * as serviceWorker from './serviceWorker' 5 | import App from "./App"; 6 | 7 | ReactDOM.render(, document.getElementById('root')) 8 | 9 | serviceWorker.unregister() 10 | -------------------------------------------------------------------------------- /mailchimp-newsletter/src/layout/Centered/Centered.styles.ts: -------------------------------------------------------------------------------- 1 | import { createStyles, Theme } from '@material-ui/core/styles' 2 | 3 | export default (theme: Theme) => 4 | createStyles({ 5 | '@global': { 6 | 'body, html, #root': { 7 | paddingTop: 40, 8 | width: '100%', 9 | }, 10 | }, 11 | container: { 12 | maxWidth: '400px', 13 | margin: '0 auto', 14 | }, 15 | }) 16 | -------------------------------------------------------------------------------- /mailchimp-newsletter/src/layout/Centered/index.ts: -------------------------------------------------------------------------------- 1 | export { Centered } from './Centered' 2 | -------------------------------------------------------------------------------- /mailchimp-newsletter/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /mailchimp-newsletter/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/extend-expect' 6 | -------------------------------------------------------------------------------- /mailchimp-newsletter/templates/component/style.scss: -------------------------------------------------------------------------------- 1 | .TemplateName { 2 | font-family: 'Open Sans', sans-serif; 3 | font-weight: 700; 4 | } -------------------------------------------------------------------------------- /material-ui-ts/.eslintignore: -------------------------------------------------------------------------------- 1 | build/* 2 | public/* 3 | docs/* 4 | templates/* 5 | src/react-app-env.d.ts 6 | src/serviceWorker.ts -------------------------------------------------------------------------------- /material-ui-ts/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "trailingComma": "es5", 3 | "printWidth": 100, 4 | "semi": false, 5 | "singleQuote": true, 6 | "tabWidth": 2 7 | } 8 | 9 | -------------------------------------------------------------------------------- /material-ui-ts/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EliEladElrom/react-tutorials/7616e3024e2b709a7e40b9862e0008193cfd9636/material-ui-ts/public/favicon.ico -------------------------------------------------------------------------------- /material-ui-ts/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EliEladElrom/react-tutorials/7616e3024e2b709a7e40b9862e0008193cfd9636/material-ui-ts/public/logo192.png -------------------------------------------------------------------------------- /material-ui-ts/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EliEladElrom/react-tutorials/7616e3024e2b709a7e40b9862e0008193cfd9636/material-ui-ts/public/logo512.png -------------------------------------------------------------------------------- /material-ui-ts/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /material-ui-ts/src/App.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { render } from '@testing-library/react' 3 | import App from './App' 4 | 5 | test('renders learn react link', () => { 6 | const { getByText } = render() 7 | const linkElement = getByText(/learn react/i) 8 | expect(linkElement).toBeInTheDocument() 9 | }) 10 | -------------------------------------------------------------------------------- /material-ui-ts/src/App.tsx: -------------------------------------------------------------------------------- 1 | // src/App.tsx 2 | 3 | import React from 'react' 4 | import './App.scss' 5 | 6 | function App() { 7 | return ( 8 |
9 |
App page
10 |
11 | ) 12 | } 13 | 14 | export default App 15 | -------------------------------------------------------------------------------- /material-ui-ts/src/components/UserButton/UserButton.scss: -------------------------------------------------------------------------------- 1 | .MemberButton { 2 | font-family: 'Open Sans', sans-serif; 3 | font-weight: 700; 4 | } 5 | -------------------------------------------------------------------------------- /material-ui-ts/src/index.scss: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 4 | 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; 5 | -webkit-font-smoothing: antialiased; 6 | -moz-osx-font-smoothing: grayscale; 7 | } 8 | 9 | code { 10 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; 11 | } 12 | -------------------------------------------------------------------------------- /material-ui-ts/src/layout/Header/Header.scss: -------------------------------------------------------------------------------- 1 | .Header { 2 | } 3 | -------------------------------------------------------------------------------- /material-ui-ts/src/layout/Header/Header.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { shallow } from 'enzyme' 3 | import Header from './Header' 4 | 5 | describe('
', () => { 6 | let component 7 | 8 | beforeEach(() => { 9 | component = shallow(
) 10 | }) 11 | 12 | test('It should mount', () => { 13 | expect(component.length).toBe(1) 14 | }) 15 | }) 16 | -------------------------------------------------------------------------------- /material-ui-ts/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /material-ui-ts/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/extend-expect' 6 | -------------------------------------------------------------------------------- /material-ui-ts/templates/component/style.scss: -------------------------------------------------------------------------------- 1 | .TemplateName { 2 | } -------------------------------------------------------------------------------- /mern-login/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "trailingComma": "es5", 3 | "printWidth": 100, 4 | "semi": false, 5 | "singleQuote": true, 6 | "tabWidth": 2 7 | } 8 | 9 | -------------------------------------------------------------------------------- /mern-login/backend/config.json: -------------------------------------------------------------------------------- 1 | { "version": "v0.6.6" } -------------------------------------------------------------------------------- /mern-login/backend/models/database.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright 2020 Elad Elrom, All Rights Reserved. 3 | * Code licensed under the BSD License: 4 | * @author Elad Elrom 5 | */ 6 | 7 | let usersSchema = { 8 | email: 'String', 9 | password: 'String' 10 | }; 11 | 12 | if (typeof exports != 'undefined' ) { 13 | exports.usersSchema = usersSchema; 14 | } 15 | -------------------------------------------------------------------------------- /mern-login/backend/roomsdb-local.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "db-config", 3 | "version": "1.0", 4 | "environment": { 5 | "host":"localhost", 6 | "user":"root", 7 | "password":"", 8 | "dsn": "YourSite" 9 | } 10 | } -------------------------------------------------------------------------------- /mern-login/backend/roomsdb.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "db-config", 3 | "version": "1.0", 4 | "environment": { 5 | "host":"localhost", 6 | "user":"root", 7 | "password":"", 8 | "dsn": "YourSite" 9 | } 10 | } -------------------------------------------------------------------------------- /mern-login/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EliEladElrom/react-tutorials/7616e3024e2b709a7e40b9862e0008193cfd9636/mern-login/public/favicon.ico -------------------------------------------------------------------------------- /mern-login/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EliEladElrom/react-tutorials/7616e3024e2b709a7e40b9862e0008193cfd9636/mern-login/public/logo192.png -------------------------------------------------------------------------------- /mern-login/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EliEladElrom/react-tutorials/7616e3024e2b709a7e40b9862e0008193cfd9636/mern-login/public/logo512.png -------------------------------------------------------------------------------- /mern-login/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /mern-login/src/App.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { render } from '@testing-library/react' 3 | import App from './App' 4 | 5 | test('renders learn react link', () => { 6 | const { getByText } = render() 7 | const linkElement = getByText(/learn react/i) 8 | expect(linkElement).toBeInTheDocument() 9 | }) 10 | -------------------------------------------------------------------------------- /mern-login/src/features/Notification/notificationEnums.ts: -------------------------------------------------------------------------------- 1 | // src/features/Notification/notificationEnums.ts 2 | 3 | export enum notificationTypesEnums { 4 | Success = 'Success', 5 | Fail = 'Fail', 6 | Info = 'Info', 7 | Warning = 'Warning', 8 | } 9 | 10 | export enum backgroundColorEnums { 11 | Success = '#5bb85a', 12 | Fail = '#d94948', 13 | Info = '#55bede', 14 | Warning = '#f0a54b', 15 | } 16 | -------------------------------------------------------------------------------- /mern-login/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 4 | 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; 5 | -webkit-font-smoothing: antialiased; 6 | -moz-osx-font-smoothing: grayscale; 7 | } 8 | 9 | code { 10 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; 11 | } 12 | -------------------------------------------------------------------------------- /mern-login/src/index.scss: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 4 | 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; 5 | -webkit-font-smoothing: antialiased; 6 | -moz-osx-font-smoothing: grayscale; 7 | padding-top: 0px; 8 | } 9 | -------------------------------------------------------------------------------- /mern-login/src/index.tsx: -------------------------------------------------------------------------------- 1 | // src/index.tsx 2 | 3 | import React from 'react' 4 | import ReactDOM from 'react-dom' 5 | import './index.scss' 6 | import AppRouter from './AppRouter' 7 | import * as serviceWorker from './serviceWorker' 8 | 9 | ReactDOM.render(, document.getElementById('root')) 10 | 11 | serviceWorker.unregister() 12 | -------------------------------------------------------------------------------- /mern-login/src/layout/Centered/Centered.styles.ts: -------------------------------------------------------------------------------- 1 | import { createStyles, Theme } from '@material-ui/core/styles' 2 | 3 | export default (theme: Theme) => 4 | createStyles({ 5 | '@global': { 6 | 'body, html, #root': { 7 | paddingTop: 40, 8 | width: '100%', 9 | }, 10 | }, 11 | container: { 12 | maxWidth: '400px', 13 | margin: '0 auto', 14 | }, 15 | }) 16 | -------------------------------------------------------------------------------- /mern-login/src/layout/Centered/index.ts: -------------------------------------------------------------------------------- 1 | export { Centered } from './Centered' 2 | -------------------------------------------------------------------------------- /mern-login/src/model/index.ts: -------------------------------------------------------------------------------- 1 | export * from './users' -------------------------------------------------------------------------------- /mern-login/src/model/users.ts: -------------------------------------------------------------------------------- 1 | export interface users { 2 | email: string 3 | password: string 4 | } 5 | 6 | export const initUser = (): users => ({ 7 | email: '', 8 | password: '', 9 | }) 10 | -------------------------------------------------------------------------------- /mern-login/src/pages/LoginPage/LoginPage.scss: -------------------------------------------------------------------------------- 1 | .LoginPage { 2 | font-family: 'Open Sans', sans-serif; 3 | font-weight: 700; 4 | } 5 | -------------------------------------------------------------------------------- /mern-login/src/pages/MembersPage/MembersPage.scss: -------------------------------------------------------------------------------- 1 | .MembersPage { 2 | font-family: 'Open Sans', sans-serif; 3 | font-weight: 700; 4 | padding-left: 20px; 5 | } 6 | -------------------------------------------------------------------------------- /mern-login/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /mern-login/src/redux/types.ts: -------------------------------------------------------------------------------- 1 | export const SET_AUTHENTICATED = 'SET_AUTHENTICATED' 2 | export const SET_UNAUTHENTICATED = 'SET_UNAUTHENTICATED' 3 | export const SET_USER = 'SET_USER' 4 | export const LOADING_USER = 'LOADING_USER' 5 | export const SET_ERRORS = 'SET_ERRORS' 6 | export const LOADING_UI = 'LOADING_UI' 7 | export const CLEAR_ERRORS = 'CLEAR_ERRORS' 8 | -------------------------------------------------------------------------------- /mern-login/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/extend-expect' 6 | -------------------------------------------------------------------------------- /mern-login/templates/component/style.scss: -------------------------------------------------------------------------------- 1 | .TemplateName { 2 | font-family: 'Open Sans', sans-serif; 3 | font-weight: 700; 4 | } -------------------------------------------------------------------------------- /optimize-ts/.env: -------------------------------------------------------------------------------- 1 | SKIP_PREFLIGHT_CHECK=true 2 | BROWSER=none 3 | -------------------------------------------------------------------------------- /optimize-ts/.eslintignore: -------------------------------------------------------------------------------- 1 | build/* 2 | public/* 3 | docs/* 4 | templates/* 5 | src/react-app-env.d.ts 6 | src/serviceWorker.ts 7 | e2e/jest.config.js 8 | e2e/puppeteer_standalone.js 9 | jest-puppeteer.config.js -------------------------------------------------------------------------------- /optimize-ts/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "trailingComma": "es5", 3 | "printWidth": 100, 4 | "semi": false, 5 | "singleQuote": true, 6 | "tabWidth": 2 7 | } 8 | 9 | -------------------------------------------------------------------------------- /optimize-ts/e2e/global.d.ts: -------------------------------------------------------------------------------- 1 | // globals defined in jest.config.js need to be included in this `d.ts` 2 | // file to avoid TS lint errors 3 | declare let SERVER_URL: string 4 | declare let JEST_TIMEOUT: number -------------------------------------------------------------------------------- /optimize-ts/e2e/jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | preset: 'jest-puppeteer', 3 | globals: { 4 | SERVER_URL: 'http://localhost:3000', 5 | JEST_TIMEOUT: 10000 6 | }, 7 | testRegex: './*\\.test\\.tsx$' 8 | } 9 | console.log('RUNNING E2E INTEGRATION TESTS - MAKE SURE PORT 3000 IS NOT IN USAGE') -------------------------------------------------------------------------------- /optimize-ts/jest-puppeteer.config.js: -------------------------------------------------------------------------------- 1 | // jest-puppeteer.config.js 2 | module.exports = { 3 | server: { 4 | command: `yarn start`, 5 | port: 3000, 6 | launchTimeout: 20000, 7 | debug: true, 8 | }, 9 | } 10 | -------------------------------------------------------------------------------- /optimize-ts/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EliEladElrom/react-tutorials/7616e3024e2b709a7e40b9862e0008193cfd9636/optimize-ts/public/favicon.ico -------------------------------------------------------------------------------- /optimize-ts/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EliEladElrom/react-tutorials/7616e3024e2b709a7e40b9862e0008193cfd9636/optimize-ts/public/logo192.png -------------------------------------------------------------------------------- /optimize-ts/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EliEladElrom/react-tutorials/7616e3024e2b709a7e40b9862e0008193cfd9636/optimize-ts/public/logo512.png -------------------------------------------------------------------------------- /optimize-ts/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /optimize-ts/src/AppRouter.test.tsx: -------------------------------------------------------------------------------- 1 | // src/AppRouter.test.tsx 2 | import React from 'react' 3 | import { shallow } from 'enzyme' 4 | import AppRouter from './AppRouter' 5 | 6 | describe('', () => { 7 | let component 8 | 9 | beforeEach(() => { 10 | component = shallow() 11 | }) 12 | 13 | test('renders without crashing', () => { 14 | expect(component.length).toBe(1) 15 | }) 16 | }) 17 | -------------------------------------------------------------------------------- /optimize-ts/src/assets/README: -------------------------------------------------------------------------------- 1 | Break down your assets by names: about, home, etc. -------------------------------------------------------------------------------- /optimize-ts/src/components/README: -------------------------------------------------------------------------------- 1 | components goes here, you can generate with generate-react-cli, example; 2 | $ npx generate-react-cli component UserButton -------------------------------------------------------------------------------- /optimize-ts/src/features/README: -------------------------------------------------------------------------------- 1 | features components goes here. -------------------------------------------------------------------------------- /optimize-ts/src/index.scss: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 4 | 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; 5 | -webkit-font-smoothing: antialiased; 6 | -moz-osx-font-smoothing: grayscale; 7 | } 8 | 9 | code { 10 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; 11 | } 12 | -------------------------------------------------------------------------------- /optimize-ts/src/layout/README: -------------------------------------------------------------------------------- 1 | layout components goes here, you can generate with generate-react-cli, example; 2 | $ npx generate-react-cli component BoxLayout --type=layout -------------------------------------------------------------------------------- /optimize-ts/src/model/README: -------------------------------------------------------------------------------- 1 | place all your object model files here, for example: userObject.ts 2 | 3 | export interface userObject { 4 | email: string 5 | password: string 6 | } 7 | 8 | export const initUser = (): userObject => ({ 9 | email: '', 10 | password: '', 11 | }) 12 | -------------------------------------------------------------------------------- /optimize-ts/src/pages/MyPage/MyPage.scss: -------------------------------------------------------------------------------- 1 | .MyPage { 2 | } 3 | -------------------------------------------------------------------------------- /optimize-ts/src/pages/MyPage/math.tsx: -------------------------------------------------------------------------------- 1 | // src/page/MyPage/math.tsx 2 | 3 | export function square(x: number) { 4 | return x * x 5 | } 6 | 7 | export function cube(x: number) { 8 | return x * x * x 9 | } 10 | 11 | export function add(x: number, y: number) { 12 | return x + y 13 | } 14 | -------------------------------------------------------------------------------- /optimize-ts/src/pages/README: -------------------------------------------------------------------------------- 1 | Pages components goes here, you can generate with generate-react-cli, example; 2 | $ npx generate-react-cli component HomePage --type=page -------------------------------------------------------------------------------- /optimize-ts/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /optimize-ts/src/recoil/atoms/README: -------------------------------------------------------------------------------- 1 | Recoil atoms goes here, example: userAtoms.ts; 2 | 3 | // src/recoil/atoms/userAtoms.ts 4 | import { atom } from 'recoil' 5 | import { initUser } from '../../model' 6 | 7 | export const userState = atom({ 8 | key: 'UserState', 9 | default: initUser(), 10 | }) -------------------------------------------------------------------------------- /optimize-ts/src/redux/store.ts: -------------------------------------------------------------------------------- 1 | // src/redux/store.ts 2 | 3 | import { configureStore, combineReducers } from '@reduxjs/toolkit' 4 | 5 | const store = configureStore({ 6 | reducer: combineReducers({ 7 | // your reducers goes here 8 | }), 9 | }) 10 | 11 | export default store 12 | -------------------------------------------------------------------------------- /optimize-ts/templates/component/style.scss: -------------------------------------------------------------------------------- 1 | .TemplateName { 2 | } -------------------------------------------------------------------------------- /optimize-ts/templates/page/style.scss: -------------------------------------------------------------------------------- 1 | .TemplateName { 2 | } -------------------------------------------------------------------------------- /react-chart-libraries/.env: -------------------------------------------------------------------------------- 1 | SKIP_PREFLIGHT_CHECK=true 2 | BROWSER=none 3 | -------------------------------------------------------------------------------- /react-chart-libraries/.eslintignore: -------------------------------------------------------------------------------- 1 | build/* 2 | public/* 3 | docs/* 4 | templates/* 5 | src/react-app-env.d.ts 6 | src/serviceWorker.ts 7 | e2e/jest.config.js 8 | e2e/puppeteer_standalone.js 9 | jest-puppeteer.config.js -------------------------------------------------------------------------------- /react-chart-libraries/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "trailingComma": "es5", 3 | "printWidth": 200, 4 | "semi": false, 5 | "singleQuote": true, 6 | "tabWidth": 2 7 | } 8 | 9 | -------------------------------------------------------------------------------- /react-chart-libraries/e2e/global.d.ts: -------------------------------------------------------------------------------- 1 | // globals defined in jest.config.js need to be included in this `d.ts` 2 | // file to avoid TS lint errors 3 | declare let SERVER_URL: string 4 | declare let JEST_TIMEOUT: number -------------------------------------------------------------------------------- /react-chart-libraries/e2e/jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | preset: 'jest-puppeteer', 3 | globals: { 4 | SERVER_URL: 'http://localhost:3000', 5 | JEST_TIMEOUT: 50000 6 | }, 7 | testRegex: './*\\.test\\.tsx$' 8 | } 9 | console.log('RUNNING E2E INTEGRATION TESTS - MAKE SURE PORT 3000 IS NOT IN USAGE') -------------------------------------------------------------------------------- /react-chart-libraries/jest-puppeteer.config.js: -------------------------------------------------------------------------------- 1 | // jest-puppeteer.config.js 2 | module.exports = { 3 | server: { 4 | command: `yarn start`, 5 | port: 3000, 6 | launchTimeout: 20000, 7 | debug: true, 8 | }, 9 | } 10 | -------------------------------------------------------------------------------- /react-chart-libraries/public/data/bar.csv: -------------------------------------------------------------------------------- 1 | framework,carat 2 | jQuery,43.3 3 | React.js,35.9 4 | Angular,25.1 5 | ASP.NET,21.9 6 | Express,21.2 7 | .NET Core,19.1 8 | Vue.js,17.3 9 | Spring,16.4 10 | Angular.js,16.1 11 | Django,14.2 12 | Flask,14.2 13 | Laravel,11.1 14 | Rails,7.0 15 | Symfony,14.4 16 | Gatsby, 4.0 17 | Drupal, 3.2 -------------------------------------------------------------------------------- /react-chart-libraries/public/data/pie.csv: -------------------------------------------------------------------------------- 1 | name,value 2 | a,25 3 | b,3 4 | c,45 5 | d,7 6 | e,20 -------------------------------------------------------------------------------- /react-chart-libraries/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EliEladElrom/react-tutorials/7616e3024e2b709a7e40b9862e0008193cfd9636/react-chart-libraries/public/favicon.ico -------------------------------------------------------------------------------- /react-chart-libraries/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EliEladElrom/react-tutorials/7616e3024e2b709a7e40b9862e0008193cfd9636/react-chart-libraries/public/logo192.png -------------------------------------------------------------------------------- /react-chart-libraries/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EliEladElrom/react-tutorials/7616e3024e2b709a7e40b9862e0008193cfd9636/react-chart-libraries/public/logo512.png -------------------------------------------------------------------------------- /react-chart-libraries/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /react-chart-libraries/src/assets/README: -------------------------------------------------------------------------------- 1 | Break down your assets by names: about, home, etc. -------------------------------------------------------------------------------- /react-chart-libraries/src/components/SimpleLineChart/types.ts: -------------------------------------------------------------------------------- 1 | /* 2 | Author: Eli Elad Elrom 3 | Website: https://EliElrom.com 4 | License: MIT License 5 | Component: src/component/SimpleLineChart/types.ts 6 | */ 7 | 8 | export namespace Types { 9 | export type Data = { 10 | date: string 11 | value: number 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /react-chart-libraries/src/features/README: -------------------------------------------------------------------------------- 1 | features components goes here. -------------------------------------------------------------------------------- /react-chart-libraries/src/hooks/README: -------------------------------------------------------------------------------- 1 | Hooks goes here. Check out some hooks examples here: 2 | https://github.com/EliEladElrom/react-tutorials -------------------------------------------------------------------------------- /react-chart-libraries/src/index.scss: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; 4 | -webkit-font-smoothing: antialiased; 5 | -moz-osx-font-smoothing: grayscale; 6 | } 7 | 8 | code { 9 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; 10 | } 11 | -------------------------------------------------------------------------------- /react-chart-libraries/src/layout/README: -------------------------------------------------------------------------------- 1 | layout components goes here, you can generate with generate-react-cli, example; 2 | $ npx generate-react-cli component BoxLayout --type=layout -------------------------------------------------------------------------------- /react-chart-libraries/src/pages/README: -------------------------------------------------------------------------------- 1 | Pages components goes here, you can generate with generate-react-cli, example; 2 | $ npx generate-react-cli component HomePage --type=page -------------------------------------------------------------------------------- /react-chart-libraries/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /react-chart-libraries/src/recoil/atoms/README: -------------------------------------------------------------------------------- 1 | Recoil atoms goes here, example: userAtoms.ts; 2 | 3 | /* 4 | Author: Eli Elad Elrom 5 | Website: https://EliElrom.com 6 | License: MIT License 7 | File: src/recoil/atoms/userAtoms.ts 8 | */ 9 | 10 | import { atom } from 'recoil' 11 | import { initUser } from '../../model' 12 | 13 | export const userState = atom({ 14 | key: 'UserState', 15 | default: initUser(), 16 | }) -------------------------------------------------------------------------------- /react-chart-libraries/src/redux/store.ts: -------------------------------------------------------------------------------- 1 | // src/redux/store.ts 2 | 3 | import { configureStore, combineReducers } from '@reduxjs/toolkit' 4 | 5 | const store = configureStore({ 6 | reducer: combineReducers({ 7 | // your reducers goes here 8 | }), 9 | }) 10 | 11 | export default store 12 | -------------------------------------------------------------------------------- /react-chart-libraries/src/widgets/README: -------------------------------------------------------------------------------- 1 | components goes here, you can generate with generate-react-cli, examples; 2 | $ npx generate-react-cli component MyWidget --type=widget -------------------------------------------------------------------------------- /react-chart-libraries/templates/component/style.scss: -------------------------------------------------------------------------------- 1 | .TemplateName { 2 | } -------------------------------------------------------------------------------- /react-chart-libraries/templates/page/style.scss: -------------------------------------------------------------------------------- 1 | .TemplateName { 2 | } -------------------------------------------------------------------------------- /react-d3-hello-world/e2e/global.d.ts: -------------------------------------------------------------------------------- 1 | // globals defined in jest.config.js need to be included in this `d.ts` 2 | // file to avoid TS lint errors 3 | declare let SERVER_URL: string 4 | declare let JEST_TIMEOUT: number -------------------------------------------------------------------------------- /react-d3-hello-world/e2e/jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | preset: 'jest-puppeteer', 3 | globals: { 4 | SERVER_URL: 'http://localhost:3000', 5 | JEST_TIMEOUT: 50000 6 | }, 7 | testRegex: './*\\.test\\.tsx$' 8 | } 9 | console.log('RUNNING E2E INTEGRATION TESTS - MAKE SURE PORT 3000 IS NOT IN USAGE') -------------------------------------------------------------------------------- /react-d3-hello-world/jest-puppeteer.config.js: -------------------------------------------------------------------------------- 1 | // jest-puppeteer.config.js 2 | module.exports = { 3 | server: { 4 | command: `yarn start`, 5 | port: 3000, 6 | launchTimeout: 20000, 7 | debug: true, 8 | }, 9 | } 10 | -------------------------------------------------------------------------------- /react-d3-hello-world/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EliEladElrom/react-tutorials/7616e3024e2b709a7e40b9862e0008193cfd9636/react-d3-hello-world/public/favicon.ico -------------------------------------------------------------------------------- /react-d3-hello-world/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EliEladElrom/react-tutorials/7616e3024e2b709a7e40b9862e0008193cfd9636/react-d3-hello-world/public/logo192.png -------------------------------------------------------------------------------- /react-d3-hello-world/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EliEladElrom/react-tutorials/7616e3024e2b709a7e40b9862e0008193cfd9636/react-d3-hello-world/public/logo512.png -------------------------------------------------------------------------------- /react-d3-hello-world/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /react-d3-hello-world/src/assets/README: -------------------------------------------------------------------------------- 1 | Break down your assets by names: about, home, etc. -------------------------------------------------------------------------------- /react-d3-hello-world/src/components/CircleWithEvents/CircleWithEvents.scss: -------------------------------------------------------------------------------- 1 | .circle { 2 | cursor: pointer; 3 | width: 150px; 4 | height: 150px; 5 | fill: #6666; 6 | } 7 | -------------------------------------------------------------------------------- /react-d3-hello-world/src/components/HelloD3/HelloD3.scss: -------------------------------------------------------------------------------- 1 | .HelloD3 { 2 | } 3 | -------------------------------------------------------------------------------- /react-d3-hello-world/src/components/HelloD3Class/HelloD3Class.scss: -------------------------------------------------------------------------------- 1 | .HelloD3Class { 2 | } 3 | -------------------------------------------------------------------------------- /react-d3-hello-world/src/components/HelloD3Data/HelloD3Data.scss: -------------------------------------------------------------------------------- 1 | .HelloD3Data { 2 | } 3 | -------------------------------------------------------------------------------- /react-d3-hello-world/src/components/HelloJSXData/HelloJSXData.scss: -------------------------------------------------------------------------------- 1 | .HelloJSXData { 2 | } 3 | -------------------------------------------------------------------------------- /react-d3-hello-world/src/components/HelloSVG/HelloSVG.scss: -------------------------------------------------------------------------------- 1 | .myRect { 2 | fill: #ba2121; 3 | } 4 | -------------------------------------------------------------------------------- /react-d3-hello-world/src/components/JSXCanvas/JSXCanvas.scss: -------------------------------------------------------------------------------- 1 | .JSXCanvas { 2 | } 3 | -------------------------------------------------------------------------------- /react-d3-hello-world/src/components/README: -------------------------------------------------------------------------------- 1 | components goes here, you can generate with generate-react-cli, examples; 2 | $ npx generate-react-cli component UserButton 3 | $ npx generate-react-cli component Rectangle --type=d3class 4 | $ npx generate-react-cli component Rectangle --type=d3 5 | $ npx generate-react-cli component Login --type=recoil -------------------------------------------------------------------------------- /react-d3-hello-world/src/components/SimpleChart/SimpleChart.scss: -------------------------------------------------------------------------------- 1 | .SimpleChart { 2 | } 3 | -------------------------------------------------------------------------------- /react-d3-hello-world/src/features/README: -------------------------------------------------------------------------------- 1 | features components goes here. -------------------------------------------------------------------------------- /react-d3-hello-world/src/index.scss: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; 4 | -webkit-font-smoothing: antialiased; 5 | -moz-osx-font-smoothing: grayscale; 6 | } 7 | 8 | code { 9 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; 10 | } 11 | -------------------------------------------------------------------------------- /react-d3-hello-world/src/layout/README: -------------------------------------------------------------------------------- 1 | layout components goes here, you can generate with generate-react-cli, example; 2 | $ npx generate-react-cli component BoxLayout --type=layout -------------------------------------------------------------------------------- /react-d3-hello-world/src/pages/README: -------------------------------------------------------------------------------- 1 | Pages components goes here, you can generate with generate-react-cli, example; 2 | $ npx generate-react-cli component HomePage --type=page -------------------------------------------------------------------------------- /react-d3-hello-world/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /react-d3-hello-world/src/recoil/atoms/README: -------------------------------------------------------------------------------- 1 | Recoil atoms goes here, example: userAtoms.ts; 2 | 3 | /* 4 | Author: Eli Elad Elrom 5 | Website: https://EliElrom.com 6 | License: MIT License 7 | File: src/recoil/atoms/userAtoms.ts 8 | */ 9 | 10 | import { atom } from 'recoil' 11 | import { initUser } from '../../model' 12 | 13 | export const userState = atom({ 14 | key: 'UserState', 15 | default: initUser(), 16 | }) -------------------------------------------------------------------------------- /react-d3-hello-world/src/redux/store.ts: -------------------------------------------------------------------------------- 1 | // src/redux/store.ts 2 | 3 | import { configureStore, combineReducers } from '@reduxjs/toolkit' 4 | 5 | const store = configureStore({ 6 | reducer: combineReducers({ 7 | // your reducers goes here 8 | }), 9 | }) 10 | 11 | export default store 12 | -------------------------------------------------------------------------------- /react-d3-hello-world/templates/component/style.scss: -------------------------------------------------------------------------------- 1 | .TemplateName { 2 | } -------------------------------------------------------------------------------- /react-d3-hello-world/templates/page/style.scss: -------------------------------------------------------------------------------- 1 | .TemplateName { 2 | } -------------------------------------------------------------------------------- /react-routing-ts/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "trailingComma": "es5", 3 | "printWidth": 100, 4 | "semi": false, 5 | "singleQuote": true, 6 | "tabWidth": 2 7 | } 8 | 9 | -------------------------------------------------------------------------------- /react-routing-ts/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EliEladElrom/react-tutorials/7616e3024e2b709a7e40b9862e0008193cfd9636/react-routing-ts/public/favicon.ico -------------------------------------------------------------------------------- /react-routing-ts/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EliEladElrom/react-tutorials/7616e3024e2b709a7e40b9862e0008193cfd9636/react-routing-ts/public/logo192.png -------------------------------------------------------------------------------- /react-routing-ts/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EliEladElrom/react-tutorials/7616e3024e2b709a7e40b9862e0008193cfd9636/react-routing-ts/public/logo512.png -------------------------------------------------------------------------------- /react-routing-ts/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /react-routing-ts/src/App.scss: -------------------------------------------------------------------------------- 1 | .App { 2 | padding-left: 20px; 3 | } -------------------------------------------------------------------------------- /react-routing-ts/src/App.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { render } from '@testing-library/react' 3 | import App from './App' 4 | 5 | test('renders learn react link', () => { 6 | const { getByText } = render() 7 | const linkElement = getByText(/learn react/i) 8 | expect(linkElement).toBeInTheDocument() 9 | }) 10 | -------------------------------------------------------------------------------- /react-routing-ts/src/App.tsx: -------------------------------------------------------------------------------- 1 | // src/App.tsx 2 | 3 | import React from 'react' 4 | import './App.scss' 5 | 6 | function App() { 7 | return ( 8 |
9 |
App page
10 |
11 | ) 12 | } 13 | 14 | export default App 15 | -------------------------------------------------------------------------------- /react-routing-ts/src/components/UserButton/UserButton.scss: -------------------------------------------------------------------------------- 1 | .MemberButton { 2 | font-family: 'Open Sans', sans-serif; 3 | font-weight: 700; 4 | } 5 | -------------------------------------------------------------------------------- /react-routing-ts/src/layout/Header/Header.scss: -------------------------------------------------------------------------------- 1 | .Header { 2 | } 3 | 4 | .heading { 5 | } 6 | 7 | .subheading { 8 | font-weight: 300; 9 | } 10 | 11 | .NavLinkItem { 12 | color: black; 13 | max-width: 360px; 14 | text-decoration: none; 15 | } 16 | 17 | .NavLinkItem-selected nav { 18 | background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%); 19 | } -------------------------------------------------------------------------------- /react-routing-ts/src/layout/Header/Header.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { shallow } from 'enzyme' 3 | import Header from './Header' 4 | 5 | describe('
', () => { 6 | let component 7 | 8 | beforeEach(() => { 9 | component = shallow(
) 10 | }) 11 | 12 | test('It should mount', () => { 13 | expect(component.length).toBe(1) 14 | }) 15 | }) 16 | -------------------------------------------------------------------------------- /react-routing-ts/src/pages/NotFoundPage/NotFoundPage.scss: -------------------------------------------------------------------------------- 1 | .NotFoundPage { 2 | } -------------------------------------------------------------------------------- /react-routing-ts/src/pages/SubMenu1Page/SubMenu1Page.scss: -------------------------------------------------------------------------------- 1 | .SubMenu1Page { 2 | } -------------------------------------------------------------------------------- /react-routing-ts/src/pages/SubMenu2Page/SubMenu2Page.scss: -------------------------------------------------------------------------------- 1 | .SubMenu2Page { 2 | } -------------------------------------------------------------------------------- /react-routing-ts/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /react-routing-ts/src/redux/store.ts: -------------------------------------------------------------------------------- 1 | // src/redux/store.ts 2 | 3 | import { configureStore, combineReducers } from '@reduxjs/toolkit' 4 | import authReducer from '../features/Authentication/authenticationSlice' 5 | 6 | const store = configureStore({ 7 | reducer: combineReducers({ 8 | authentication: authReducer, 9 | }), 10 | }) 11 | 12 | export default store 13 | -------------------------------------------------------------------------------- /react-routing-ts/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/extend-expect' 6 | -------------------------------------------------------------------------------- /react-routing-ts/templates/component/style.scss: -------------------------------------------------------------------------------- 1 | .TemplateName { 2 | } -------------------------------------------------------------------------------- /react-typescript-redux-login/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "trailingComma": "es5", 3 | "printWidth": 100, 4 | "semi": false, 5 | "singleQuote": true, 6 | "tabWidth": 2 7 | } 8 | 9 | -------------------------------------------------------------------------------- /react-typescript-redux-login/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EliEladElrom/react-tutorials/7616e3024e2b709a7e40b9862e0008193cfd9636/react-typescript-redux-login/public/favicon.ico -------------------------------------------------------------------------------- /react-typescript-redux-login/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EliEladElrom/react-tutorials/7616e3024e2b709a7e40b9862e0008193cfd9636/react-typescript-redux-login/public/logo192.png -------------------------------------------------------------------------------- /react-typescript-redux-login/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EliEladElrom/react-tutorials/7616e3024e2b709a7e40b9862e0008193cfd9636/react-typescript-redux-login/public/logo512.png -------------------------------------------------------------------------------- /react-typescript-redux-login/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /react-typescript-redux-login/src/App.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { render } from '@testing-library/react' 3 | import App from './App' 4 | 5 | test('renders learn react link', () => { 6 | const { getByText } = render() 7 | const linkElement = getByText(/learn react/i) 8 | expect(linkElement).toBeInTheDocument() 9 | }) 10 | -------------------------------------------------------------------------------- /react-typescript-redux-login/src/api/login/index.ts: -------------------------------------------------------------------------------- 1 | export { isValidLogin } from './login' 2 | -------------------------------------------------------------------------------- /react-typescript-redux-login/src/api/login/login.ts: -------------------------------------------------------------------------------- 1 | // src/api/login/login.ts 2 | 3 | import { members } from '../../model' 4 | 5 | export const isValidLogin = (loginInfo: members): boolean => 6 | loginInfo.username === 'admin' && loginInfo.password === 'admin' 7 | -------------------------------------------------------------------------------- /react-typescript-redux-login/src/index.scss: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 4 | 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; 5 | -webkit-font-smoothing: antialiased; 6 | -moz-osx-font-smoothing: grayscale; 7 | padding-top: 120px; 8 | } 9 | -------------------------------------------------------------------------------- /react-typescript-redux-login/src/index.tsx: -------------------------------------------------------------------------------- 1 | // src/index.tsx 2 | 3 | import React from 'react' 4 | import ReactDOM from 'react-dom' 5 | import './index.scss' 6 | import AppRouter from './AppRouter' 7 | import * as serviceWorker from './serviceWorker' 8 | 9 | ReactDOM.render(, document.getElementById('root')) 10 | 11 | serviceWorker.unregister() 12 | -------------------------------------------------------------------------------- /react-typescript-redux-login/src/layout/Centered/index.ts: -------------------------------------------------------------------------------- 1 | export { Centered } from './Centered' 2 | -------------------------------------------------------------------------------- /react-typescript-redux-login/src/model/index.ts: -------------------------------------------------------------------------------- 1 | export * from './members' 2 | -------------------------------------------------------------------------------- /react-typescript-redux-login/src/model/members.ts: -------------------------------------------------------------------------------- 1 | // src/model/members.ts 2 | 3 | export interface members { 4 | username: string 5 | password: string 6 | } 7 | 8 | export const initMember = (): members => ({ 9 | username: '', 10 | password: '', 11 | }) 12 | -------------------------------------------------------------------------------- /react-typescript-redux-login/src/pages/LoginPage/LoginPage.scss: -------------------------------------------------------------------------------- 1 | .LoginPage { 2 | font-family: 'Open Sans', sans-serif; 3 | font-weight: 700; 4 | } 5 | -------------------------------------------------------------------------------- /react-typescript-redux-login/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /react-typescript-redux-login/src/redux/store.ts: -------------------------------------------------------------------------------- 1 | // src/redux/store.ts 2 | 3 | import { configureStore, combineReducers } from '@reduxjs/toolkit' 4 | import notificationSlice from '../features/Notification/notificationSlice' 5 | 6 | const store = configureStore({ 7 | reducer: combineReducers({ 8 | notification: notificationSlice, 9 | }), 10 | }) 11 | 12 | export default store -------------------------------------------------------------------------------- /react-typescript-redux-login/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/extend-expect' 6 | -------------------------------------------------------------------------------- /react-typescript-redux-login/templates/component/style.scss: -------------------------------------------------------------------------------- 1 | .TemplateName { 2 | font-family: 'Open Sans', sans-serif; 3 | font-weight: 700; 4 | } -------------------------------------------------------------------------------- /recoil-contact/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "trailingComma": "es5", 3 | "printWidth": 100, 4 | "semi": false, 5 | "singleQuote": true, 6 | "tabWidth": 2 7 | } 8 | 9 | -------------------------------------------------------------------------------- /recoil-contact/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EliEladElrom/react-tutorials/7616e3024e2b709a7e40b9862e0008193cfd9636/recoil-contact/public/favicon.ico -------------------------------------------------------------------------------- /recoil-contact/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EliEladElrom/react-tutorials/7616e3024e2b709a7e40b9862e0008193cfd9636/recoil-contact/public/logo192.png -------------------------------------------------------------------------------- /recoil-contact/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EliEladElrom/react-tutorials/7616e3024e2b709a7e40b9862e0008193cfd9636/recoil-contact/public/logo512.png -------------------------------------------------------------------------------- /recoil-contact/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /recoil-contact/src/App.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { render } from '@testing-library/react' 3 | import App from './App' 4 | 5 | test('renders learn react link', () => { 6 | const { getByText } = render() 7 | const linkElement = getByText(/learn react/i) 8 | expect(linkElement).toBeInTheDocument() 9 | }) 10 | -------------------------------------------------------------------------------- /recoil-contact/src/index.scss: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 4 | 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; 5 | -webkit-font-smoothing: antialiased; 6 | -moz-osx-font-smoothing: grayscale; 7 | } 8 | 9 | code { 10 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; 11 | } 12 | -------------------------------------------------------------------------------- /recoil-contact/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom' 3 | import './index.scss' 4 | import AppRouter from './AppRouter' 5 | import * as serviceWorker from './serviceWorker' 6 | 7 | ReactDOM.render(, document.getElementById('root')) 8 | 9 | serviceWorker.unregister() 10 | -------------------------------------------------------------------------------- /recoil-contact/src/layout/Centered/Centered.styles.ts: -------------------------------------------------------------------------------- 1 | import { createStyles, Theme } from '@material-ui/core/styles' 2 | 3 | export default (theme: Theme) => 4 | createStyles({ 5 | '@global': { 6 | 'body, html, #root': { 7 | paddingTop: 40, 8 | width: '100%', 9 | }, 10 | }, 11 | container: { 12 | maxWidth: '400px', 13 | margin: '0 auto', 14 | }, 15 | }) 16 | -------------------------------------------------------------------------------- /recoil-contact/src/layout/Centered/index.ts: -------------------------------------------------------------------------------- 1 | export { Centered } from './Centered' 2 | -------------------------------------------------------------------------------- /recoil-contact/src/model/contactObject.ts: -------------------------------------------------------------------------------- 1 | export interface contactObject { 2 | name: string 3 | email: string 4 | message: string 5 | } 6 | 7 | export const initContact = (): contactObject => ({ 8 | name: '', 9 | email: '', 10 | message: '', 11 | }) 12 | -------------------------------------------------------------------------------- /recoil-contact/src/model/index.ts: -------------------------------------------------------------------------------- 1 | export * from './contactObject' 2 | -------------------------------------------------------------------------------- /recoil-contact/src/pages/BooksPage/BooksPage.scss: -------------------------------------------------------------------------------- 1 | .BooksPageMain { 2 | padding-left: 20px; 3 | } -------------------------------------------------------------------------------- /recoil-contact/src/pages/ContactPage/ContactPage.scss: -------------------------------------------------------------------------------- 1 | .Contact { 2 | padding-left: 20px; 3 | } 4 | -------------------------------------------------------------------------------- /recoil-contact/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /recoil-contact/src/recoil/atoms/booksAtoms.ts: -------------------------------------------------------------------------------- 1 | // src/recoil/atoms/booksAtoms.ts 2 | 3 | import { atom } from 'recoil' 4 | 5 | export const currentBookIDState = atom({ 6 | key: 'currentBookID', 7 | default: '', 8 | }) 9 | -------------------------------------------------------------------------------- /recoil-contact/src/recoil/atoms/contactAtoms.ts: -------------------------------------------------------------------------------- 1 | // src/recoil/atoms/contactAtoms.ts 2 | 3 | import { atom } from 'recoil' 4 | import { initContact } from '../../model' 5 | 6 | export const contactState = atom({ 7 | key: 'ContactState', 8 | default: initContact(), 9 | }) 10 | -------------------------------------------------------------------------------- /recoil-contact/src/recoil/atoms/counterAtoms.ts: -------------------------------------------------------------------------------- 1 | // src/recoil/atoms/counterAtoms.ts 2 | 3 | import { atom } from 'recoil' 4 | 5 | export const countState = atom({ 6 | key: 'CountState', 7 | default: 1, 8 | }) 9 | -------------------------------------------------------------------------------- /recoil-contact/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/extend-expect' 6 | -------------------------------------------------------------------------------- /recoil-contact/templates/component/style.scss: -------------------------------------------------------------------------------- 1 | .TemplateName { 2 | font-family: 'Open Sans', sans-serif; 3 | font-weight: 700; 4 | } -------------------------------------------------------------------------------- /recoil-medium-articles/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "trailingComma": "es5", 3 | "printWidth": 100, 4 | "semi": false, 5 | "singleQuote": true, 6 | "tabWidth": 2 7 | } 8 | 9 | -------------------------------------------------------------------------------- /recoil-medium-articles/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EliEladElrom/react-tutorials/7616e3024e2b709a7e40b9862e0008193cfd9636/recoil-medium-articles/public/favicon.ico -------------------------------------------------------------------------------- /recoil-medium-articles/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EliEladElrom/react-tutorials/7616e3024e2b709a7e40b9862e0008193cfd9636/recoil-medium-articles/public/logo192.png -------------------------------------------------------------------------------- /recoil-medium-articles/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EliEladElrom/react-tutorials/7616e3024e2b709a7e40b9862e0008193cfd9636/recoil-medium-articles/public/logo512.png -------------------------------------------------------------------------------- /recoil-medium-articles/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /recoil-medium-articles/src/App.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { render } from '@testing-library/react' 3 | import App from './App' 4 | 5 | test('renders learn react link', () => { 6 | const { getByText } = render() 7 | const linkElement = getByText(/learn react/i) 8 | expect(linkElement).toBeInTheDocument() 9 | }) 10 | -------------------------------------------------------------------------------- /recoil-medium-articles/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom' 3 | import './index.scss' 4 | import * as serviceWorker from './serviceWorker' 5 | import App from "./App"; 6 | 7 | ReactDOM.render(, document.getElementById('root')) 8 | 9 | serviceWorker.unregister() 10 | -------------------------------------------------------------------------------- /recoil-medium-articles/src/layout/Centered/Centered.styles.ts: -------------------------------------------------------------------------------- 1 | import { createStyles, Theme } from '@material-ui/core/styles' 2 | 3 | export default (theme: Theme) => 4 | createStyles({ 5 | '@global': { 6 | 'body, html, #root': { 7 | paddingTop: 40, 8 | width: '100%', 9 | }, 10 | }, 11 | container: { 12 | maxWidth: '400px', 13 | margin: '0 auto', 14 | }, 15 | }) 16 | -------------------------------------------------------------------------------- /recoil-medium-articles/src/layout/Centered/index.ts: -------------------------------------------------------------------------------- 1 | export { Centered } from './Centered' 2 | -------------------------------------------------------------------------------- /recoil-medium-articles/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /recoil-medium-articles/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/extend-expect' 6 | -------------------------------------------------------------------------------- /recoil-medium-articles/templates/component/style.scss: -------------------------------------------------------------------------------- 1 | .TemplateName { 2 | font-family: 'Open Sans', sans-serif; 3 | font-weight: 700; 4 | } -------------------------------------------------------------------------------- /recoil-testimonials/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "trailingComma": "es5", 3 | "printWidth": 100, 4 | "semi": false, 5 | "singleQuote": true, 6 | "tabWidth": 2 7 | } 8 | 9 | -------------------------------------------------------------------------------- /recoil-testimonials/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EliEladElrom/react-tutorials/7616e3024e2b709a7e40b9862e0008193cfd9636/recoil-testimonials/public/favicon.ico -------------------------------------------------------------------------------- /recoil-testimonials/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EliEladElrom/react-tutorials/7616e3024e2b709a7e40b9862e0008193cfd9636/recoil-testimonials/public/logo192.png -------------------------------------------------------------------------------- /recoil-testimonials/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EliEladElrom/react-tutorials/7616e3024e2b709a7e40b9862e0008193cfd9636/recoil-testimonials/public/logo512.png -------------------------------------------------------------------------------- /recoil-testimonials/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /recoil-testimonials/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom' 3 | import './index.scss' 4 | import * as serviceWorker from './serviceWorker' 5 | import App from "./App"; 6 | 7 | ReactDOM.render(, document.getElementById('root')) 8 | 9 | serviceWorker.unregister() 10 | -------------------------------------------------------------------------------- /recoil-testimonials/src/layout/Centered/Centered.styles.ts: -------------------------------------------------------------------------------- 1 | import { createStyles, Theme } from '@material-ui/core/styles' 2 | 3 | export default (theme: Theme) => 4 | createStyles({ 5 | '@global': { 6 | 'body, html, #root': { 7 | paddingTop: 40, 8 | width: '100%', 9 | }, 10 | }, 11 | container: { 12 | maxWidth: '400px', 13 | margin: '0 auto', 14 | }, 15 | }) 16 | -------------------------------------------------------------------------------- /recoil-testimonials/src/layout/Centered/index.ts: -------------------------------------------------------------------------------- 1 | export { Centered } from './Centered' 2 | -------------------------------------------------------------------------------- /recoil-testimonials/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /recoil-testimonials/src/recoil/selectors/testimonialsSelectors.ts: -------------------------------------------------------------------------------- 1 | // src/recoil/selectors/testimonialsSelectors.ts 2 | 3 | import { selector } from 'recoil' 4 | import { getTestimonals } from '../../api/testimonals/api' 5 | 6 | export const getTestimonialsPosts = selector({ 7 | key: 'GetTestimonialsPosts', 8 | get: async () => { 9 | const response = await getTestimonals() 10 | return response 11 | }, 12 | }) 13 | -------------------------------------------------------------------------------- /recoil-testimonials/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/extend-expect' 6 | -------------------------------------------------------------------------------- /recoil-testimonials/templates/component/style.scss: -------------------------------------------------------------------------------- 1 | .TemplateName { 2 | font-family: 'Open Sans', sans-serif; 3 | font-weight: 700; 4 | } -------------------------------------------------------------------------------- /redux-cart/src/App.js: -------------------------------------------------------------------------------- 1 | // src/App.js 2 | 3 | import React from 'react'; 4 | import { Cart } from './features/cart/Cart'; 5 | import './App.css'; 6 | 7 | function App() { 8 | return ( 9 |
10 | 11 |
12 | ); 13 | } 14 | 15 | export default App; -------------------------------------------------------------------------------- /redux-cart/src/app/store.js: -------------------------------------------------------------------------------- 1 | // src/app/store.js 2 | 3 | import { configureStore } from '@reduxjs/toolkit' 4 | import cartReducer from "../features/cart/cartSlice"; 5 | 6 | const store = configureStore({ 7 | reducer: { 8 | cart: cartReducer 9 | } 10 | }) 11 | 12 | export default store -------------------------------------------------------------------------------- /redux-cart/src/features/cart/Cart.module.css: -------------------------------------------------------------------------------- 1 | .row-left { 2 | width: 20%; 3 | float: left; 4 | } 5 | 6 | .row-right { 7 | width: 80%; 8 | float:right; 9 | } 10 | 11 | .button { 12 | margin: 10px; 13 | padding: 5px; 14 | cursor: pointer; 15 | background-color: grey; 16 | } -------------------------------------------------------------------------------- /redux-cart/src/setupTests.js: -------------------------------------------------------------------------------- 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/extend-expect'; 6 | -------------------------------------------------------------------------------- /starter-project/.eslintignore: -------------------------------------------------------------------------------- 1 | build/* 2 | public/* 3 | docs/* 4 | templates/* 5 | src/react-app-env.d.ts 6 | src/serviceWorker.ts 7 | -------------------------------------------------------------------------------- /starter-project/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "trailingComma": "es5", 3 | "printWidth": 100, 4 | "semi": false, 5 | "singleQuote": true, 6 | "tabWidth": 2 7 | } 8 | 9 | -------------------------------------------------------------------------------- /starter-project/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EliEladElrom/react-tutorials/7616e3024e2b709a7e40b9862e0008193cfd9636/starter-project/public/favicon.ico -------------------------------------------------------------------------------- /starter-project/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EliEladElrom/react-tutorials/7616e3024e2b709a7e40b9862e0008193cfd9636/starter-project/public/logo192.png -------------------------------------------------------------------------------- /starter-project/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EliEladElrom/react-tutorials/7616e3024e2b709a7e40b9862e0008193cfd9636/starter-project/public/logo512.png -------------------------------------------------------------------------------- /starter-project/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /starter-project/src/App.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { render } from '@testing-library/react' 3 | import App from './App' 4 | 5 | test('renders learn react link', () => { 6 | const { getByText } = render() 7 | const linkElement = getByText(/learn react/i) 8 | expect(linkElement).toBeInTheDocument() 9 | }) 10 | -------------------------------------------------------------------------------- /starter-project/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 4 | 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; 5 | -webkit-font-smoothing: antialiased; 6 | -moz-osx-font-smoothing: grayscale; 7 | } 8 | 9 | code { 10 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; 11 | } 12 | -------------------------------------------------------------------------------- /starter-project/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /starter-project/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/extend-expect' 6 | -------------------------------------------------------------------------------- /starter-project/template/.eslintignore: -------------------------------------------------------------------------------- 1 | build/* 2 | public/* 3 | docs/* 4 | templates/* 5 | src/react-app-env.d.ts 6 | src/serviceWorker.ts 7 | -------------------------------------------------------------------------------- /starter-project/template/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "trailingComma": "es5", 3 | "printWidth": 100, 4 | "semi": false, 5 | "singleQuote": true, 6 | "tabWidth": 2 7 | } 8 | 9 | -------------------------------------------------------------------------------- /starter-project/template/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EliEladElrom/react-tutorials/7616e3024e2b709a7e40b9862e0008193cfd9636/starter-project/template/public/favicon.ico -------------------------------------------------------------------------------- /starter-project/template/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EliEladElrom/react-tutorials/7616e3024e2b709a7e40b9862e0008193cfd9636/starter-project/template/public/logo192.png -------------------------------------------------------------------------------- /starter-project/template/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EliEladElrom/react-tutorials/7616e3024e2b709a7e40b9862e0008193cfd9636/starter-project/template/public/logo512.png -------------------------------------------------------------------------------- /starter-project/template/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /starter-project/template/src/App.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { render } from '@testing-library/react' 3 | import App from './App' 4 | 5 | test('renders learn react link', () => { 6 | const { getByText } = render() 7 | const linkElement = getByText(/learn react/i) 8 | expect(linkElement).toBeInTheDocument() 9 | }) 10 | -------------------------------------------------------------------------------- /starter-project/template/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /starter-project/template/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/extend-expect' 6 | -------------------------------------------------------------------------------- /starter-project/template/templates/component/style.scss: -------------------------------------------------------------------------------- 1 | .TemplateName { 2 | font-family: 'Open Sans', sans-serif; 3 | font-weight: 700; 4 | } -------------------------------------------------------------------------------- /starter-project/templates/component/style.scss: -------------------------------------------------------------------------------- 1 | .TemplateName { 2 | font-family: 'Open Sans', sans-serif; 3 | font-weight: 700; 4 | } -------------------------------------------------------------------------------- /ts-clock-app/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "outDir": "./dist/", 4 | "sourceMap": true, 5 | "noImplicitAny": true, 6 | "module": "commonjs", 7 | "target": "es6", 8 | "jsx": "react" 9 | } 10 | } -------------------------------------------------------------------------------- /word-cloud/.env: -------------------------------------------------------------------------------- 1 | SKIP_PREFLIGHT_CHECK=true 2 | BROWSER=none 3 | -------------------------------------------------------------------------------- /word-cloud/.eslintignore: -------------------------------------------------------------------------------- 1 | build/* 2 | public/* 3 | docs/* 4 | templates/* 5 | src/react-app-env.d.ts 6 | src/serviceWorker.ts 7 | e2e/jest.config.js 8 | e2e/puppeteer_standalone.js 9 | jest-puppeteer.config.js -------------------------------------------------------------------------------- /word-cloud/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "trailingComma": "es5", 3 | "printWidth": 200, 4 | "semi": false, 5 | "singleQuote": true, 6 | "tabWidth": 2 7 | } 8 | 9 | -------------------------------------------------------------------------------- /word-cloud/e2e/global.d.ts: -------------------------------------------------------------------------------- 1 | // globals defined in jest.config.js need to be included in this `d.ts` 2 | // file to avoid TS lint errors 3 | declare let SERVER_URL: string 4 | declare let JEST_TIMEOUT: number -------------------------------------------------------------------------------- /word-cloud/e2e/jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | preset: 'jest-puppeteer', 3 | globals: { 4 | SERVER_URL: 'http://localhost:3000', 5 | JEST_TIMEOUT: 50000 6 | }, 7 | testRegex: './*\\.test\\.tsx$' 8 | } 9 | console.log('RUNNING E2E INTEGRATION TESTS - MAKE SURE PORT 3000 IS NOT IN USAGE') -------------------------------------------------------------------------------- /word-cloud/jest-puppeteer.config.js: -------------------------------------------------------------------------------- 1 | // jest-puppeteer.config.js 2 | module.exports = { 3 | server: { 4 | command: `yarn start`, 5 | port: 3000, 6 | launchTimeout: 20000, 7 | debug: true, 8 | }, 9 | } 10 | -------------------------------------------------------------------------------- /word-cloud/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EliEladElrom/react-tutorials/7616e3024e2b709a7e40b9862e0008193cfd9636/word-cloud/public/favicon.ico -------------------------------------------------------------------------------- /word-cloud/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EliEladElrom/react-tutorials/7616e3024e2b709a7e40b9862e0008193cfd9636/word-cloud/public/logo192.png -------------------------------------------------------------------------------- /word-cloud/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EliEladElrom/react-tutorials/7616e3024e2b709a7e40b9862e0008193cfd9636/word-cloud/public/logo512.png -------------------------------------------------------------------------------- /word-cloud/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /word-cloud/src/AppRouter.test.tsx: -------------------------------------------------------------------------------- 1 | // src/AppRouter.test.tsx 2 | import React from 'react' 3 | import { shallow } from 'enzyme' 4 | import AppRouter from './AppRouter' 5 | 6 | describe('', () => { 7 | let component 8 | 9 | beforeEach(() => { 10 | component = shallow() 11 | }) 12 | 13 | test('renders without crashing', () => { 14 | expect(component.length).toBe(1) 15 | }) 16 | }) 17 | -------------------------------------------------------------------------------- /word-cloud/src/assets/README: -------------------------------------------------------------------------------- 1 | Break down your assets by names: about, home, etc. -------------------------------------------------------------------------------- /word-cloud/src/components/WordCloud/WordCloud.scss: -------------------------------------------------------------------------------- 1 | .WordCloud { 2 | } 3 | -------------------------------------------------------------------------------- /word-cloud/src/features/README: -------------------------------------------------------------------------------- 1 | features components goes here. -------------------------------------------------------------------------------- /word-cloud/src/hooks/README: -------------------------------------------------------------------------------- 1 | Hooks goes here. Check out some hooks examples here: 2 | https://github.com/EliEladElrom/react-tutorials -------------------------------------------------------------------------------- /word-cloud/src/index.scss: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; 4 | -webkit-font-smoothing: antialiased; 5 | -moz-osx-font-smoothing: grayscale; 6 | } 7 | 8 | code { 9 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; 10 | } 11 | -------------------------------------------------------------------------------- /word-cloud/src/layout/README: -------------------------------------------------------------------------------- 1 | layout components goes here, you can generate with generate-react-cli, example; 2 | $ npx generate-react-cli component BoxLayout --type=layout -------------------------------------------------------------------------------- /word-cloud/src/pages/README: -------------------------------------------------------------------------------- 1 | Pages components goes here, you can generate with generate-react-cli, example; 2 | $ npx generate-react-cli component HomePage --type=page -------------------------------------------------------------------------------- /word-cloud/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /word-cloud/src/redux/store.ts: -------------------------------------------------------------------------------- 1 | // src/redux/store.ts 2 | 3 | import { configureStore, combineReducers } from '@reduxjs/toolkit' 4 | 5 | const store = configureStore({ 6 | reducer: combineReducers({ 7 | // your reducers goes here 8 | }), 9 | }) 10 | 11 | export default store 12 | -------------------------------------------------------------------------------- /word-cloud/src/widgets/README: -------------------------------------------------------------------------------- 1 | components goes here, you can generate with generate-react-cli, examples; 2 | $ npx generate-react-cli component MyWidget --type=widget 3 | 4 | // d3 Widget & Chart Component 5 | $ npx generate-react-cli component LineChart --type=d3WidgetComponent 6 | $ npx generate-react-cli component LineChartWidget --type=d3Widget -------------------------------------------------------------------------------- /word-cloud/src/widgets/WordCloudWidget/WordCloudWidget.scss: -------------------------------------------------------------------------------- 1 | .WordCloudWidget { 2 | } 3 | -------------------------------------------------------------------------------- /word-cloud/templates/component/TemplateName.scss: -------------------------------------------------------------------------------- 1 | .TemplateName { 2 | } -------------------------------------------------------------------------------- /word-cloud/templates/page/TemplateName.scss: -------------------------------------------------------------------------------- 1 | .TemplateName { 2 | } -------------------------------------------------------------------------------- /world-map-chart/.env: -------------------------------------------------------------------------------- 1 | SKIP_PREFLIGHT_CHECK=true 2 | BROWSER=none 3 | -------------------------------------------------------------------------------- /world-map-chart/.eslintignore: -------------------------------------------------------------------------------- 1 | build/* 2 | public/* 3 | docs/* 4 | templates/* 5 | src/react-app-env.d.ts 6 | src/serviceWorker.ts 7 | e2e/jest.config.js 8 | e2e/puppeteer_standalone.js 9 | jest-puppeteer.config.js -------------------------------------------------------------------------------- /world-map-chart/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "trailingComma": "es5", 3 | "printWidth": 200, 4 | "semi": false, 5 | "singleQuote": true, 6 | "tabWidth": 2 7 | } 8 | 9 | -------------------------------------------------------------------------------- /world-map-chart/e2e/global.d.ts: -------------------------------------------------------------------------------- 1 | // globals defined in jest.config.js need to be included in this `d.ts` 2 | // file to avoid TS lint errors 3 | declare let SERVER_URL: string 4 | declare let JEST_TIMEOUT: number -------------------------------------------------------------------------------- /world-map-chart/e2e/jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | preset: 'jest-puppeteer', 3 | globals: { 4 | SERVER_URL: 'http://localhost:3000', 5 | JEST_TIMEOUT: 50000 6 | }, 7 | testRegex: './*\\.test\\.tsx$' 8 | } 9 | console.log('RUNNING E2E INTEGRATION TESTS - MAKE SURE PORT 3000 IS NOT IN USAGE') -------------------------------------------------------------------------------- /world-map-chart/jest-puppeteer.config.js: -------------------------------------------------------------------------------- 1 | // jest-puppeteer.config.js 2 | module.exports = { 3 | server: { 4 | command: `yarn start`, 5 | port: 3000, 6 | launchTimeout: 20000, 7 | debug: true, 8 | }, 9 | } 10 | -------------------------------------------------------------------------------- /world-map-chart/public/data/coordinates.csv: -------------------------------------------------------------------------------- 1 | id,latitude,longitude 2 | 1,-73.9919,40.7529 3 | 2,-70.0007884457405,40.75509010847814 4 | -------------------------------------------------------------------------------- /world-map-chart/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EliEladElrom/react-tutorials/7616e3024e2b709a7e40b9862e0008193cfd9636/world-map-chart/public/favicon.ico -------------------------------------------------------------------------------- /world-map-chart/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EliEladElrom/react-tutorials/7616e3024e2b709a7e40b9862e0008193cfd9636/world-map-chart/public/logo192.png -------------------------------------------------------------------------------- /world-map-chart/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EliEladElrom/react-tutorials/7616e3024e2b709a7e40b9862e0008193cfd9636/world-map-chart/public/logo512.png -------------------------------------------------------------------------------- /world-map-chart/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /world-map-chart/src/assets/README: -------------------------------------------------------------------------------- 1 | Break down your assets by names: about, home, etc. -------------------------------------------------------------------------------- /world-map-chart/src/components/WorldMap/WorldMap.scss: -------------------------------------------------------------------------------- 1 | .WorldMap { 2 | } 3 | -------------------------------------------------------------------------------- /world-map-chart/src/features/README: -------------------------------------------------------------------------------- 1 | features components goes here. -------------------------------------------------------------------------------- /world-map-chart/src/hooks/README: -------------------------------------------------------------------------------- 1 | Hooks goes here. Check out some hooks examples here: 2 | https://github.com/EliEladElrom/react-tutorials -------------------------------------------------------------------------------- /world-map-chart/src/index.scss: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; 4 | -webkit-font-smoothing: antialiased; 5 | -moz-osx-font-smoothing: grayscale; 6 | } 7 | 8 | code { 9 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; 10 | } 11 | -------------------------------------------------------------------------------- /world-map-chart/src/layout/README: -------------------------------------------------------------------------------- 1 | layout components goes here, you can generate with generate-react-cli, example; 2 | $ npx generate-react-cli component BoxLayout --type=layout -------------------------------------------------------------------------------- /world-map-chart/src/pages/README: -------------------------------------------------------------------------------- 1 | Pages components goes here, you can generate with generate-react-cli, example; 2 | $ npx generate-react-cli component HomePage --type=page -------------------------------------------------------------------------------- /world-map-chart/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /world-map-chart/src/recoil/atoms/README: -------------------------------------------------------------------------------- 1 | Recoil atoms goes here, example: userAtoms.ts; 2 | 3 | /* 4 | Author: Eli Elad Elrom 5 | Website: https://EliElrom.com 6 | License: MIT License 7 | File: src/recoil/atoms/userAtoms.ts 8 | */ 9 | 10 | import { atom } from 'recoil' 11 | import { initUser } from '../../model' 12 | 13 | export const userState = atom({ 14 | key: 'UserState', 15 | default: initUser(), 16 | }) -------------------------------------------------------------------------------- /world-map-chart/src/redux/store.ts: -------------------------------------------------------------------------------- 1 | // src/redux/store.ts 2 | 3 | import { configureStore, combineReducers } from '@reduxjs/toolkit' 4 | 5 | const store = configureStore({ 6 | reducer: combineReducers({ 7 | // your reducers goes here 8 | }), 9 | }) 10 | 11 | export default store 12 | -------------------------------------------------------------------------------- /world-map-chart/src/widgets/README: -------------------------------------------------------------------------------- 1 | components goes here, you can generate with generate-react-cli, examples; 2 | $ npx generate-react-cli component MyWidget --type=widget -------------------------------------------------------------------------------- /world-map-chart/templates/component/style.scss: -------------------------------------------------------------------------------- 1 | .TemplateName { 2 | } -------------------------------------------------------------------------------- /world-map-chart/templates/page/style.scss: -------------------------------------------------------------------------------- 1 | .TemplateName { 2 | } -------------------------------------------------------------------------------- /world-map-widget/.env: -------------------------------------------------------------------------------- 1 | SKIP_PREFLIGHT_CHECK=true 2 | BROWSER=none 3 | -------------------------------------------------------------------------------- /world-map-widget/.eslintignore: -------------------------------------------------------------------------------- 1 | build/* 2 | public/* 3 | docs/* 4 | templates/* 5 | src/react-app-env.d.ts 6 | src/serviceWorker.ts 7 | e2e/jest.config.js 8 | e2e/puppeteer_standalone.js 9 | jest-puppeteer.config.js -------------------------------------------------------------------------------- /world-map-widget/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "trailingComma": "es5", 3 | "printWidth": 200, 4 | "semi": false, 5 | "singleQuote": true, 6 | "tabWidth": 2 7 | } 8 | 9 | -------------------------------------------------------------------------------- /world-map-widget/e2e/global.d.ts: -------------------------------------------------------------------------------- 1 | // globals defined in jest.config.js need to be included in this `d.ts` 2 | // file to avoid TS lint errors 3 | declare let SERVER_URL: string 4 | declare let JEST_TIMEOUT: number -------------------------------------------------------------------------------- /world-map-widget/e2e/jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | preset: 'jest-puppeteer', 3 | globals: { 4 | SERVER_URL: 'http://localhost:3000', 5 | JEST_TIMEOUT: 50000 6 | }, 7 | testRegex: './*\\.test\\.tsx$' 8 | } 9 | console.log('RUNNING E2E INTEGRATION TESTS - MAKE SURE PORT 3000 IS NOT IN USAGE') -------------------------------------------------------------------------------- /world-map-widget/jest-puppeteer.config.js: -------------------------------------------------------------------------------- 1 | // jest-puppeteer.config.js 2 | module.exports = { 3 | server: { 4 | command: `yarn start`, 5 | port: 3000, 6 | launchTimeout: 20000, 7 | debug: true, 8 | }, 9 | } 10 | -------------------------------------------------------------------------------- /world-map-widget/public/clients-logo/README: -------------------------------------------------------------------------------- 1 | LOGOs goes here -------------------------------------------------------------------------------- /world-map-widget/public/data/client-list.csv: -------------------------------------------------------------------------------- 1 | id,name,logo,description,address,city,state,country,latitude,longitude,website -------------------------------------------------------------------------------- /world-map-widget/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EliEladElrom/react-tutorials/7616e3024e2b709a7e40b9862e0008193cfd9636/world-map-widget/public/favicon.ico -------------------------------------------------------------------------------- /world-map-widget/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EliEladElrom/react-tutorials/7616e3024e2b709a7e40b9862e0008193cfd9636/world-map-widget/public/logo192.png -------------------------------------------------------------------------------- /world-map-widget/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EliEladElrom/react-tutorials/7616e3024e2b709a7e40b9862e0008193cfd9636/world-map-widget/public/logo512.png -------------------------------------------------------------------------------- /world-map-widget/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /world-map-widget/src/assets/README: -------------------------------------------------------------------------------- 1 | Break down your assets by names: about, home, etc. -------------------------------------------------------------------------------- /world-map-widget/src/assets/about/EliEladElrom.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EliEladElrom/react-tutorials/7616e3024e2b709a7e40b9862e0008193cfd9636/world-map-widget/src/assets/about/EliEladElrom.jpg -------------------------------------------------------------------------------- /world-map-widget/src/components/ClientList/ClientList.scss: -------------------------------------------------------------------------------- 1 | .ClientList { 2 | } 3 | -------------------------------------------------------------------------------- /world-map-widget/src/components/ClientListDetail/ClientListDetail.scss: -------------------------------------------------------------------------------- 1 | .ClientListDetail { 2 | } 3 | 4 | .about-image { 5 | padding-left: 20px; 6 | padding-right: 20px; 7 | width: 100px; 8 | -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */ 9 | filter: grayscale(100%); 10 | } 11 | -------------------------------------------------------------------------------- /world-map-widget/src/components/PulsatingCircle/PulsatingCircle.scss: -------------------------------------------------------------------------------- 1 | .PulsatingCircle { 2 | } 3 | -------------------------------------------------------------------------------- /world-map-widget/src/components/WorldMap/WorldMap.scss: -------------------------------------------------------------------------------- 1 | .WorldMap { 2 | } 3 | -------------------------------------------------------------------------------- /world-map-widget/src/features/README: -------------------------------------------------------------------------------- 1 | features components goes here. -------------------------------------------------------------------------------- /world-map-widget/src/hooks/README: -------------------------------------------------------------------------------- 1 | Hooks goes here. Check out some hooks examples here: 2 | https://github.com/EliEladElrom/react-tutorials -------------------------------------------------------------------------------- /world-map-widget/src/index.scss: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; 4 | -webkit-font-smoothing: antialiased; 5 | -moz-osx-font-smoothing: grayscale; 6 | } 7 | 8 | code { 9 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; 10 | } 11 | -------------------------------------------------------------------------------- /world-map-widget/src/layout/README: -------------------------------------------------------------------------------- 1 | layout components goes here, you can generate with generate-react-cli, example; 2 | $ npx generate-react-cli component BoxLayout --type=layout -------------------------------------------------------------------------------- /world-map-widget/src/model/index.ts: -------------------------------------------------------------------------------- 1 | /* 2 | Author: Eli Elad Elrom 3 | Website: https://EliElrom.com 4 | License: MIT License 5 | Component: src/model/index.ts 6 | */ 7 | 8 | export * from './mapObject' 9 | export * from './clientsObject' 10 | -------------------------------------------------------------------------------- /world-map-widget/src/pages/README: -------------------------------------------------------------------------------- 1 | Pages components goes here, you can generate with generate-react-cli, example; 2 | $ npx generate-react-cli component HomePage --type=page -------------------------------------------------------------------------------- /world-map-widget/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /world-map-widget/src/recoil/atoms/README: -------------------------------------------------------------------------------- 1 | Recoil atoms goes here, example: userAtoms.ts; 2 | 3 | /* 4 | Author: Eli Elad Elrom 5 | Website: https://EliElrom.com 6 | License: MIT License 7 | File: src/recoil/atoms/userAtoms.ts 8 | */ 9 | 10 | import { atom } from 'recoil' 11 | import { initUser } from '../../model' 12 | 13 | export const userState = atom({ 14 | key: 'UserState', 15 | default: initUser(), 16 | }) -------------------------------------------------------------------------------- /world-map-widget/src/redux/store.ts: -------------------------------------------------------------------------------- 1 | // src/redux/store.ts 2 | 3 | import { configureStore, combineReducers } from '@reduxjs/toolkit' 4 | 5 | const store = configureStore({ 6 | reducer: combineReducers({ 7 | // your reducers goes here 8 | }), 9 | }) 10 | 11 | export default store 12 | -------------------------------------------------------------------------------- /world-map-widget/src/widgets/ClientsWidget/ClientsWidget.scss: -------------------------------------------------------------------------------- 1 | .PreviousClients { 2 | } 3 | -------------------------------------------------------------------------------- /world-map-widget/src/widgets/README: -------------------------------------------------------------------------------- 1 | components goes here, you can generate with generate-react-cli, examples; 2 | $ npx generate-react-cli component MyWidget --type=widget -------------------------------------------------------------------------------- /world-map-widget/templates/component/style.scss: -------------------------------------------------------------------------------- 1 | .TemplateName { 2 | } -------------------------------------------------------------------------------- /world-map-widget/templates/page/style.scss: -------------------------------------------------------------------------------- 1 | .TemplateName { 2 | } --------------------------------------------------------------------------------