Merge pull request #162 from moderntribe/feature/sitedetails

Site Details screen

packages/sitedetails/.eslintignore

@@ -0,0 +1,2 @@
+node_modules
+dist

packages/sitedetails/.eslintrc.json

@@ -0,0 +1,88 @@
+{
+    "root": true,
+    "env": {
+        "browser": true,
+        "es2021": true
+    },
+    "extends": [
+        "eslint:recommended",
+        "plugin:@wordpress/eslint-plugin/recommended-with-formatting"
+    ],
+    "parser": "@typescript-eslint/parser",
+    "parserOptions": {
+        "requireConfigFile": false,
+        "ecmaVersion": 12,
+        "sourceType": "module"
+    },
+		"plugins": [
+			"@typescript-eslint"
+		],
+    "settings": {
+        "import/resolver": {
+            "node": {
+                "extensions": [".js", ".jsx", ".ts", ".tsx"]
+            },
+            "alias": {
+                "extensions": [".js", ".jsx", ".ts", ".tsx"],
+								"map": [
+									["@site", "./src"]
+								]
+            }
+        },
+		"react": {
+			"version": "17.0.2"
+		}
+    },
+    "rules": {
+        "no-unused-vars": "off",
+				"@typescript-eslint/no-unused-vars": "error",
+				"@wordpress/i18n-text-domain": [ "warn", {
+					"allowedTextDomain": [ "moderntribe-sitebuilder" ]
+				} ],
+        "array-bracket-spacing": ["warn", "never"],
+        "block-spacing": ["warn", "always"],
+        "comma-dangle": ["warn", {
+            "arrays": "only-multiline",
+            "objects": "only-multiline",
+            "imports": "never",
+            "exports": "never",
+            "functions": "never"
+        }],
+        "comma-spacing": [ "warn",{
+            "before": false,
+            "after": true
+        }],
+        "eol-last": ["warn", "always"],
+        "indent": ["warn", "tab"],
+        "jsdoc/tag-lines": ["warn", "always", {
+            "count": 0
+        }],
+        "jsx-quotes": ["warn", "prefer-double"],
+        "linebreak-style": ["warn", "unix"],
+        "no-alert": "warn",
+        "no-console": "warn",
+        "no-eval": "warn",
+        "no-implied-eval":"warn",
+        "no-template-curly-in-string": "warn",
+        "no-useless-concat":"warn",
+        "object-curly-spacing": ["warn", "always"],
+        "quotes": ["warn", "single"],
+        "semi": ["warn", "always"],
+        "space-before-function-paren": ["warn", {
+            "anonymous": "always",
+            "named": "never",
+            "asyncArrow": "always"
+        }],
+        "space-in-parens": ["warn", "never"],
+        "spaced-comment": ["warn", "always"],
+        "no-undef": "off"
+    },
+    "overrides": [
+        {
+            "files": ["webpack.mix.js"],
+            "env": {
+                "amd": true
+            }
+        }
+    ]
+}

packages/sitedetails/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @moderntribe/sitedetails
+
+## 1.0.0
+
+### Major Changes
+
+- Initial release of the WME Sitedetails package.

packages/sitedetails/package.json

@@ -0,0 +1,62 @@
+{
+	"name": "@moderntribe/sitedetails",
+	"version": "1.0.0",
+	"description": "Sitedetails foundation",
+	"source": "src/index.tsx",
+	"main": "dist/umd/index.js",
+	"module": "dist/esm/index.js",
+	"types": "dist/esm/index.d.ts",
+	"files": [
+		"dist"
+	],
+	"scripts": {
+		"build": "rollup --config node:@moderntribe/rollup-config --environment NODE_ENV:production",
+		"dev": "yalc=true rollup --config node:@moderntribe/rollup-config --watch",
+		"lint": "eslint . --ext ts,tsx",
+		"lint:fix": "eslint . --fix --ext ts,tsx",
+		"test": "echo \"Error: no test specified\" && exit 1"
+	},
+	"author": "",
+	"dependencies": {
+		"@moderntribe/wme-ui": "workspace:*",
+		"@moderntribe/wme-utils": "workspace:*"
+	},
+	"peerDependencies": {
+		"@emotion/react": "^11.9.3",
+		"@emotion/styled": "^11.9.3",
+		"@mui/icons-material": "^5.8.4",
+		"@mui/material": "^5.9.2",
+		"@mui/utils": "^5.9.1",
+		"@wordpress/element": "^4.12.0",
+		"@wordpress/html-entities": "^3.14.0",
+		"@wordpress/i18n": "^4.14.0",
+		"react": "^17.0.2",
+		"react-dom": "^17.0.2",
+		"react-router-dom": "^6.4.2"
+	},
+	"devDependencies": {
+		"@babel/preset-react": "^7.18.6",
+		"@moderntribe/rollup-config": "workspace:*",
+		"@moderntribe/tsconfig": "workspace:*",
+		"@types/jquery": "^3.5.14",
+		"@types/node": "^18.7.16",
+		"@types/react": "^17.0.52",
+		"@types/react-dom": "^17.0.18",
+		"@typescript-eslint/eslint-plugin": "^5.33.1",
+		"@typescript-eslint/parser": "^5.33.1",
+		"@wordpress/eslint-plugin": "^12.9.0",
+		"eslint": "^8.22.0",
+		"eslint-config-prettier": "^8.5.0",
+		"eslint-import-resolver-alias": "^1.1.2",
+		"eslint-import-resolver-typescript": "^3.4.1",
+		"eslint-plugin-import": "^2.26.0",
+		"eslint-plugin-prettier": "^4.2.1",
+		"prettier": "^2.7.1",
+		"rollup": "^2.79.0",
+		"rollup-plugin-copy": "^3.4.0",
+		"rollup-plugin-shell": "^1.0.8",
+		"ts-loader": "^9.3.1",
+		"typescript": "^4.7.4",
+		"wp-types": "^3.60.0"
+	}
+}

packages/sitedetails/sitedetails.d.ts

@@ -0,0 +1,67 @@
+/* eslint-disable no-unused-vars */
+/* eslint-disable spaced-comment */
+/* eslint-disable no-redeclare */
+/// <reference types="node" />
+/// <reference types="react" />
+/// <reference types="react-dom" />
+
+export {};
+
+declare module '*.gif' {
+	const src: string;
+	export default src;
+}
+
+declare module '*.jpg' {
+	const src: string;
+	export default src;
+}
+
+declare module '*.jpeg' {
+	const src: string;
+	export default src;
+}
+
+declare module '*.png' {
+	const src: string;
+	export default src;
+}
+
+declare module '*.webp' {
+	const src: string;
+	export default src;
+}
+
+declare module '*.svg' {
+	import * as React from 'react';
+
+	export const ReactComponent: React.FunctionComponent<React.SVGProps<
+		SVGSVGElement
+	> & { title?: string }>;
+
+	const src: string;
+	export default src;
+}
+
+declare global {
+	interface Window {
+		site_details: any;
+		wp: any;
+		wpApiSettings: any;
+	}
+
+	interface SetupCardAccordionInterface {
+		id: string;
+		header: string;
+		subHeader?: string;
+		chipBackground?: ChipProps['color'];
+		chipText?: string;
+		expanded?: boolean;
+	}
+
+	interface PasswordStrengthType {
+		label: 'weak' | 'medium' | 'strong';
+		color: 'error' | 'warning' | 'success';
+	}
+
+}

packages/sitedetails/src/SiteDetails.tsx

@@ -0,0 +1,20 @@
+import { lazy } from 'react';
+import { ThemeProvider, createTheme } from '@mui/material';
+import { theme as WME_THEME } from '@moderntribe/wme-ui';
+import { HashRouter, Routes, Route } from 'react-router-dom';
+import Loadable from '@site/components/Loadable';
+
+const SetupScreen = Loadable(lazy(() => import('@site/setup/SetupScreen')));
+const storeBuilderTheme = createTheme(WME_THEME);
+
+const SiteDetails = () => (
+	<ThemeProvider theme={ storeBuilderTheme }>
+		<HashRouter>
+			<Routes>
+				<Route path="/" element={ <SetupScreen fullscreen={ true } /> } />
+			</Routes>
+		</HashRouter>
+	</ThemeProvider>
+);
+
+export default SiteDetails;

packages/sitedetails/src/assets/images/index.d.ts

@@ -0,0 +1,5 @@
+declare module '*.jpg';
+declare module '*.png';
+declare module '*.jpeg';
+declare module '*.jpg';
+declare module '*.gif';

packages/sitedetails/src/components/Loadable.tsx

@@ -0,0 +1,17 @@
+import { Suspense } from 'react';
+import { Loading } from './Loading';
+
+const Loadable = <T extends { fullscreen?: boolean }>(Component: React.ComponentType<T>) => (props: T) => {
+	const {
+		fullscreen,
+	} = props;
+	return (
+		<Suspense
+			fallback={ <Loading fullscreen={ fullscreen } /> }
+		>
+			<Component { ...props } />
+		</Suspense>
+	);
+};
+
+export default Loadable;

packages/sitedetails/src/components/Loading.tsx

@@ -0,0 +1,72 @@
+import { Box, styled } from '@mui/material';
+import type { BoxProps } from '@mui/material/Box';
+
+export interface LoaderContainerInterface extends BoxProps {
+	fullscreen?: boolean;
+}
+
+const StyledLoaderContainer = styled(Box, {
+	name: 'WmeLoader',
+	slot: 'Root',
+	shouldForwardProp: (prop) => prop !== 'fullscreen',
+})<LoaderContainerInterface>(({ fullscreen }) => ({
+	textAlign: 'center',
+
+	...(fullscreen && {
+		display: 'grid',
+		placeItems: 'center',
+		position: 'absolute',
+		height: '100vh',
+		width: '100%',
+	})
+}));
+
+const StyledLoader = styled(Box, {
+	name: 'WmeLoader',
+	slot: 'Loader',
+})(() => ({
+	'@keyframes wme-ball-loader': {
+		'33%': {
+			transform: 'translateY(24px)'
+		},
+		'66%': {
+			transform: 'translateY(-24px)'
+		},
+		'100%': {
+			transform: 'translateY(0)'
+		}
+	},
+	'& > div:nth-of-type(1)': {
+		animation: 'wme-ball-loader 0.7s -0.14s infinite ease-in-out',
+	},
+	'& > div:nth-of-type(2)': {
+		animation: 'wme-ball-loader 0.7s -0.07s infinite ease-in-out',
+	},
+	'& > div:nth-of-type(3)': {
+		animation: 'wme-ball-loader 0.7s 0s infinite ease-in-out',
+	}
+}));
+
+const StyledLoaderBall = styled(Box, {
+	name: 'WmeLoader',
+	slot: 'Ball',
+})(({ theme }) => ({
+	backgroundColor: theme.palette.border.ui,
+	width: '15px',
+	height: '15px',
+	borderRadius: '50%',
+	margin: '5px',
+	display: 'inline-block',
+}));
+
+export function Loading(props: LoaderContainerInterface) {
+	return (
+		<StyledLoaderContainer { ...props }>
+			<StyledLoader>
+				<StyledLoaderBall />
+				<StyledLoaderBall />
+				<StyledLoaderBall />
+			</StyledLoader>
+		</StyledLoaderContainer>
+	);
+}

packages/sitedetails/src/components/index.ts

@@ -0,0 +1,2 @@
+export * from './Loadable';
+export * from './Loading';

packages/sitedetails/src/constants/index.ts

@@ -0,0 +1,7 @@
+export const SITE_DETAILS = window.site_details;
+
+export const ASSETS_URL = SITE_DETAILS.assets_url;
+
+export const IMAGE_DIR = `${ ASSETS_URL }images/`;
+
+export const CARDS: SetupCardAccordionInterface[] = SITE_DETAILS.cards || [];

packages/sitedetails/src/index.tsx

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

packages/sitedetails/src/logos/NexcessLogo.tsx

@@ -0,0 +1,14 @@
+const NexcessLogo = () => (
+	<svg width="120" height="24" viewBox="0 0 120 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<path d="M18.7816 23.7764H15.4199L3.36171 5.09602V23.7764H0V0H3.36171L15.4199 18.7853V0H18.7816V23.7764Z" fill="black" />
+		<path d="M36.7787 16.642H23.6715C24.1111 19.7995 26.2191 21.1934 28.6317 21.1585C30.6697 21.1235 32.6378 20.1393 33.5569 17.896L36.479 19.0501C35.1203 22.3426 31.9984 23.9413 28.6367 23.9763C24.186 24.0112 20.3848 21.1585 20.3848 15.2831C20.3848 9.40766 24.186 6.55488 28.6367 6.58986C33.0873 6.62483 36.8886 9.40766 36.8886 15.2831C36.8886 15.7577 36.8537 16.2023 36.7887 16.642H36.7787ZM23.6715 13.8242H33.5868C33.0773 10.7316 31.0044 9.44263 28.6267 9.40766C26.249 9.37268 24.1761 10.7316 23.6666 13.8242H23.6715Z" fill="black" />
+		<path d="M45.8505 15.2531L45.9205 15.1132L51.8297 6.79468H47.9535L44.0823 12.6001L40.2111 6.79468H36.3398L42.2491 15.1132L42.319 15.2531L44.0823 17.866L48.0584 23.7764H51.8946L45.8505 15.2531Z" fill="black" />
+		<path d="M36.2744 23.7764H40.1107L44.0818 17.866H40.4653L36.2744 23.7764Z" fill="black" />
+		<path d="M51.1152 15.2831C51.1152 9.40766 54.9165 6.55488 59.3672 6.58986C62.7988 6.62483 65.686 8.28853 67.0097 11.7508L64.0576 12.84C63.2084 10.4618 61.4401 9.44263 59.3722 9.40766C56.6548 9.37268 54.3121 11.1413 54.3121 15.2831C54.3121 19.4248 56.6548 21.1934 59.3722 21.1585C61.4451 21.1235 63.2084 20.1043 64.0576 17.7262L67.0097 18.8153C65.686 22.2776 62.7988 23.9463 59.3672 23.9763C54.9165 24.0112 51.1152 21.1585 51.1152 15.2831Z" fill="black" />
+		<path d="M84.3979 16.642H71.2907C71.7303 19.7995 73.8382 21.1934 76.2508 21.1585C78.2888 21.1235 80.2569 20.1393 81.176 17.896L84.0982 19.0501C82.7395 22.3426 79.6175 23.9413 76.2558 23.9763C71.8052 24.0112 68.0039 21.1585 68.0039 15.2831C68.0039 9.40766 71.8052 6.55488 76.2558 6.58986C80.7065 6.62483 84.5078 9.40766 84.5078 15.2831C84.5078 15.7577 84.4728 16.2023 84.4079 16.642H84.3979ZM71.2907 13.8242H81.206C80.6965 10.7316 78.6235 9.44263 76.2458 9.40766C73.8682 9.37268 71.7952 10.7316 71.2857 13.8242H71.2907Z" fill="black" />
+		<path d="M85.6211 19.19L88.8479 18.5105C89.1526 20.3791 90.851 21.2634 92.7541 21.2634C94.6572 21.2634 96.6253 20.3791 96.6253 18.3407C96.6253 14.5386 85.9258 18.8503 85.9258 11.7158C85.9258 6.82466 90.9509 6.55487 92.7541 6.55487C94.4524 6.55487 98.7982 6.79468 99.5475 10.5617L96.4905 11.446C96.0809 9.67743 94.6572 9.06791 92.7541 9.06791C90.851 9.06791 89.2575 9.74738 89.2575 11.7158C89.2575 15.6578 99.9571 11.1063 99.9571 18.3407C99.9571 23.5366 94.6273 23.9813 92.7591 23.9813C91.0608 23.9813 86.1706 23.5716 85.6261 19.19H85.6211Z" fill="black" />
+		<path d="M101.246 19.19L104.473 18.5105C104.778 20.3791 106.476 21.2634 108.379 21.2634C110.282 21.2634 112.25 20.3791 112.25 18.3407C112.25 14.5386 101.551 18.8503 101.551 11.7158C101.551 6.82466 106.576 6.55487 108.379 6.55487C110.077 6.55487 114.423 6.79468 115.172 10.5617L112.115 11.446C111.706 9.67743 110.282 9.06791 108.379 9.06791C106.476 9.06791 104.883 9.74738 104.883 11.7158C104.883 15.6578 115.582 11.1063 115.582 18.3407C115.582 23.5366 110.252 23.9813 108.384 23.9813C106.686 23.9813 101.796 23.5716 101.251 19.19H101.246Z" fill="black" />
+	</svg>
+);
+
+export default NexcessLogo;

packages/sitedetails/src/logos/index.ts

@@ -0,0 +1 @@
+export { default as NexcessLogo } from './NexcessLogo';