=> import('views/components/Footer'), {
17 | fallback: ,
18 | });
19 |
20 | const App = (): JSX.Element => {
21 | const [value, setValue] = useState('1');
22 |
23 | return (
24 |
25 |
26 |
27 |
28 | Home {value}
29 |
32 |
35 |
38 |
39 |
40 |
41 |
42 |
43 |
44 | );
45 | };
46 |
47 | export default isDev ? hot(module)(App) : App;
48 |
--------------------------------------------------------------------------------
/public/development/injector.css:
--------------------------------------------------------------------------------
1 | @keyframes injectorLoaderIn {
2 | 0% {
3 | transform: translate3d(-50%, 0, 0);
4 | opacity: 0;
5 | }
6 |
7 | 100% {
8 | transform: translate3d(-50%, -70px, 0);
9 | opacity: 0.93;
10 | }
11 | }
12 |
13 | @keyframes injectorLoaderOut {
14 | 0% {
15 | transform: translate(-50%, -70px);
16 | opacity: 0.93;
17 | }
18 |
19 | 85% {
20 | transform: translate(-50%, -70px) scale(1);
21 | opacity: 0.93;
22 | }
23 |
24 | 95% {
25 | transform: translate(-50%, -75px) scale(1.1);
26 | opacity: 0.93;
27 | }
28 |
29 | 100% {
30 | transform: translate(-50%, 0) scale(1);
31 | opacity: 0;
32 | }
33 | }
34 |
35 | .injector-loader-element {
36 | position: fixed;
37 | top: 100%;
38 | left: 50%;
39 | background-color: #333;
40 | color: #fff;
41 | padding: 10px 15px;
42 | border-radius: 6px;
43 | font-family: "Helvetica", sans-serif;
44 | font-size: 14px;
45 | font-weight: 600;
46 | box-shadow: 0 5px 20px 3px rgba(0, 0, 0, 0.15);
47 | }
48 |
49 | .injector-loader-element:hover {
50 | opacity: 1;
51 | }
52 |
53 | body:not(.injector--loading) .injector-loader-element {
54 | animation: injectorLoaderOut 2.3s ease forwards;
55 | }
56 |
57 | body.injector--loading .injector-loader-element {
58 | animation: injectorLoaderIn 2s ease forwards;
59 | }
60 |
--------------------------------------------------------------------------------
/public/development/injector.js:
--------------------------------------------------------------------------------
1 | const body = document.querySelector("body");
2 |
3 | const filterRegExp = RegExp(/(\.js$|\.css$)/);
4 |
5 | const injector = {
6 | createLoadingElement: () => {
7 | const loaderElement = document.createElement("div");
8 | loaderElement.className = "injector-loader-element";
9 | loaderElement.innerHTML = "Injecting...";
10 | document.body.appendChild(loaderElement);
11 | },
12 | destroyLoadingElement: () => {
13 | const loaderElement = document.querySelector("div.injector-loader-element");
14 | document.body.removeChild(loaderElement);
15 | },
16 | setLoading: async () => {
17 | await injector.createLoadingElement();
18 | body.classList.add("injector--loading");
19 | },
20 | setLoaded: () => {
21 | body.classList.remove("injector--loading");
22 | },
23 | injectScripts: async () => {
24 | await fetch("/asset-manifest.json")
25 | .then(res => res.json())
26 | .then(res => {
27 | Object.values(res.files)
28 | .filter(file => filterRegExp.test(file))
29 | .forEach(file => file && import(file));
30 | });
31 | },
32 | init: async () => {
33 | injector.setLoading();
34 | await injector.injectScripts();
35 | injector.setLoaded();
36 | setTimeout(injector.destroyLoadingElement, 5000);
37 | },
38 | };
39 |
40 | injector.init();
41 |
--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | extends: ['airbnb', 'plugin:@typescript-eslint/recommended'],
3 | parser: '@typescript-eslint/parser',
4 | plugins: ['@typescript-eslint', 'prettier', 'import'],
5 | env: {
6 | browser: true,
7 | node: true,
8 | },
9 | globals: {
10 | window: false,
11 | document: false,
12 | it: false,
13 | describe: false,
14 | },
15 | settings: {
16 | 'import/parsers': {
17 | '@typescript-eslint/parser': ['.ts', '.tsx'],
18 | },
19 | 'import/resolver': {
20 | typescript: {},
21 | node: {
22 | extensions: ['.js', '.jsx', '.ts', '.tsx'],
23 | },
24 | },
25 | },
26 | rules: {
27 | 'react/jsx-filename-extension': [2, { extensions: ['.js', '.jsx', '.ts', '.tsx'] }],
28 | 'import/no-extraneous-dependencies': [2, { devDependencies: ['**/test.tsx', '**/test.ts'] }],
29 | '@typescript-eslint/indent': [2, 2],
30 | '@typescript-eslint/explicit-function-return-type': 0,
31 | '@typescript-eslint/no-explicit-any': 0,
32 | 'import/no-extraneous-dependencies': 0,
33 | 'import/prefer-default-export': 0,
34 | 'react/jsx-one-expression-per-line': 0,
35 | 'react/jsx-props-no-spreading': 0,
36 | 'react/prop-types': 0,
37 | 'implicit-arrow-linebreak': 0,
38 | 'operator-linebreak': [1, 'after'],
39 | 'import/no-unresolved': [2, { ignore: ['RootTypes'] }],
40 | },
41 | };
42 |
--------------------------------------------------------------------------------
/config/utils/index.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable */
2 |
3 | /**
4 | * Helper functions and variables for the loaders
5 | * @param {Array} rules - The rules array coming from the config.modules.rules,
6 | * @return {any}
7 | */
8 | const loaderUtil = rules => {
9 | /** The index of oneOf in the rules */
10 | const oneOfIndex = rules.findIndex(item => item["oneOf"]);
11 |
12 | /** The oneOf rule */
13 | const oneOf = rules[oneOfIndex].oneOf;
14 |
15 | /**
16 | * Find a specfic loader within the oneOf
17 | * @param {string} loader - RegEx testing each loader
18 | * @return {any} The Loader
19 | */
20 | const findLoader = loader =>
21 | oneOf.find(item => {
22 | return new RegExp(loader).test(item.loader);
23 | });
24 |
25 | /** The fileLoader object */
26 | const fileLoader = findLoader("file-loader");
27 |
28 | return {
29 | oneOfIndex,
30 | oneOf,
31 | findLoader,
32 | fileLoader,
33 | };
34 | };
35 |
36 | // Environment variables
37 | const envs = {
38 | bundleAnalyzer: process.env.BUNDLE_ANALYZER === "true",
39 | criticalCSS: process.env.CRIT_CSS === "true",
40 | gzip: process.env.GZIP === "true",
41 | hashBuild: process.env.HASH_BUILD === "true",
42 | polyfill: process.env.POLYFILL === "true",
43 | profiler: process.env.PROFILER === "true",
44 | proxy: process.env.PROXY === "true",
45 | sourceMap: process.env.SOURCE_MAP === "true",
46 | };
47 |
48 | module.exports = {
49 | envs,
50 | loaderUtil,
51 | };
52 |
--------------------------------------------------------------------------------
/config/setup/utils/logger.js:
--------------------------------------------------------------------------------
1 | const colors = require("colors/safe");
2 |
3 | // Color Functions
4 | const color = {
5 | bold: value => colors.bold(value),
6 | dim: value => colors.gray(value),
7 | warn: value => colors.yellow(value),
8 | underline: value => colors.underline(value),
9 | error: value => colors.red(value),
10 | highlight: value => colors.blue(value),
11 | };
12 |
13 | const spacer = amount => (amount > 0 ? new Array(amount).fill("").forEach(() => print(``)) : null);
14 |
15 | const print = (string, variant, space = [0, 0]) => {
16 | // Pre String Space
17 | spacer(space[0]);
18 |
19 | switch (variant) {
20 | case "bold":
21 | console.log(color.bold(string));
22 | break;
23 | case "dim":
24 | console.log(color.dim(string));
25 | break;
26 | case "error":
27 | console.log(color.error(string));
28 | break;
29 | case "warn":
30 | console.log(color.warn(string));
31 | break;
32 | case "underline":
33 | console.log(color.underline(string));
34 | break;
35 | default:
36 | console.log(string);
37 | break;
38 | }
39 |
40 | // Post String Space
41 | spacer(space[1]);
42 | };
43 |
44 | const printFeatureConf = features => {
45 | features.forEach(feature => {
46 | print(` {`);
47 | Object.entries(feature).forEach(([key, value]) => {
48 | print(` ${color.bold(`${key}:`)} ${value}`);
49 | });
50 | print(` }`, null, [0, 1]);
51 | });
52 | };
53 |
54 | module.exports = {
55 | ...color,
56 | spacer,
57 | print,
58 | printFeatureConf,
59 | };
60 |
--------------------------------------------------------------------------------
/config/setup/schema.js:
--------------------------------------------------------------------------------
1 | // The Questions
2 | const schema = {
3 | name: {
4 | properties: {
5 | machine: {
6 | description: "Machine name [only lowercase]",
7 | message: "Name must be only be lowercase letters",
8 | pattern: /^[a-z]+$/,
9 | required: true,
10 | },
11 | title: {
12 | description: "Project title [letters and spaces]",
13 | message: "Name must be only letters and spaces, and no foreign characters",
14 | pattern: /^[a-zA-Z-\s]+$/,
15 | required: true,
16 | },
17 | },
18 | },
19 | packages: {
20 | properties: {
21 | package: {
22 | message: "You must select a package by entering it's number [0-9]",
23 | description: "Which package do you want to setup? [1 is default]",
24 | pattern: /[0-9]/,
25 | default: "1",
26 | required: true,
27 | },
28 | },
29 | },
30 | features: {
31 | properties: {
32 | features: {
33 | message: "Do you want customize the package?",
34 | description: "yes|y or no|n",
35 | pattern: /(y|yes|n|no)/,
36 | default: "no",
37 | required: true,
38 | },
39 | },
40 | },
41 | git: {
42 | properties: {
43 | ownRepo: {
44 | message:
45 | "Keep empty to get an empty repo or enter a valid git repository SSH URL. like [git@github.com:user/repo.git]",
46 | description: "SSH Url",
47 | default: "no",
48 | pattern: /^(no|(https|git)(:\/\/|@)([^\/:]+)[\/:]([^\/:]+)\/(.+).git)$/,
49 | },
50 | },
51 | },
52 | };
53 |
54 | module.exports = {
55 | schema,
56 | };
57 |
--------------------------------------------------------------------------------
/public/favicons/safari-pinned-tab.svg:
--------------------------------------------------------------------------------
1 |
2 |
4 |
31 |
--------------------------------------------------------------------------------
/config/setup/packages.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable */
2 |
3 | // Utilities
4 | const { dim } = require("./utils");
5 |
6 | // Read more about the different packages here: https://github.com/adaptdk/react_boilerplate
7 | const packages = [
8 | {
9 | type: "break",
10 | title: "Typescript",
11 | },
12 | {
13 | id: "1",
14 | title: "Base",
15 | branch: "typescript/base",
16 | features: [{ name: "proxy" }],
17 | },
18 | {
19 | id: "2",
20 | title: "Complex",
21 | branch: "typescript/complex",
22 | features: [{ name: "proxy" }],
23 | },
24 | {
25 | id: "3",
26 | title: "Widgets",
27 | branch: "typescript/widgets",
28 | features: [{ name: "proxy" }],
29 | },
30 | {
31 | type: "break",
32 | title: "Regular",
33 | },
34 | {
35 | id: "4",
36 | title: "Base",
37 | branch: "regular/base",
38 | features: [{ name: "proxy" }],
39 | },
40 | {
41 | id: "5",
42 | title: "Complex",
43 | branch: "regular/complex",
44 | features: [{ name: "proxy" }],
45 | },
46 | ];
47 |
48 | // Features that have multiple structures
49 | // This will not be used, if none of the packages includes one of it's features.
50 | const features = [
51 | {
52 | name: "proxy",
53 | title: "Proxy another site?",
54 | description: `Do you want to proxy the site onto another local environment? ${dim(
55 | "You can always enable later in config/config-overrides.js"
56 | )}`,
57 | schema: {
58 | properties: {
59 | proxy: {
60 | message: `Add URL or keep empty to continue without proxying. ${dim(
61 | "You can always enable later in config/config-overrides.js"
62 | )}`,
63 | description: "Local Env. URL",
64 | pattern: /(no|^htt(ps|p).*(:|.))/,
65 | default: "no",
66 | required: true,
67 | },
68 | },
69 | },
70 | },
71 | ];
72 |
73 | module.exports = {
74 | packages,
75 | features,
76 | };
77 |
--------------------------------------------------------------------------------
/config/utils/proxy.js:
--------------------------------------------------------------------------------
1 | const cssRegExp = RegExp(/(\.css$)/);
2 | const jsRegExp = RegExp(/(\.js$)/);
3 | const gzipRegExp = RegExp(/gzip/);
4 |
5 | const settingHeaders = (proxyRes, req, res) => {
6 | if (jsRegExp.test(req.path)) res.setHeader("Content-Type", "application/javascript");
7 |
8 | if (cssRegExp.test(req.path)) res.setHeader("Content-Type", "text/css");
9 |
10 | if (gzipRegExp.test(proxyRes.headers["content-encoding"])) res.setHeader("Content-Encoding", "gzip");
11 | };
12 |
13 | const appendToProxyResponse = inject => (proxyRes, req, res) => {
14 | if (Array.isArray(inject)) inject = inject.join("");
15 |
16 | // Handle error codes
17 | if (proxyRes.statusCode === 404) {
18 | res.sendStatus(proxyRes.statusCode);
19 | return;
20 | }
21 |
22 | // Setting Headers
23 | settingHeaders(proxyRes, req, res);
24 |
25 | if (proxyRes.headers["content-type"] && proxyRes.headers["content-type"].indexOf("text/html") >= 0) {
26 | let body = Buffer.from("");
27 | // Create flag to detect modification
28 | let responseModified = false;
29 | // need to remove this header as we may modify the response
30 | if (proxyRes.headers["content-length"]) delete proxyRes.headers["content-length"];
31 |
32 | // Listen to Proxy Response.
33 | proxyRes.on("data", data => {
34 | body = Buffer.concat([body, data]);
35 | // The Tag which we're going to inject before
36 | const tag = "