feat(console): init layout (#289)

.vscode/scss.code-snippets

@@ -9,7 +9,7 @@
 		"scope": "scss",
 		"prefix": "use",
 		"body": [
-			"@use '/src/scss${1:/}'${2: as $3};",
+			"@use '@/scss${1:/}'${2: as $3};",
 			"$0"
 		],
 		"description": "Add @use in header."
@@ -18,7 +18,7 @@
 		"scope": "scss",
 		"prefix": "useu",
 		"body": [
-			"@use '/src/scss/underscore' as _;",
+			"@use '@/scss/underscore' as _;",
 			"$0"
 		],
 		"description": "Add @use underscore in header."

.vscode/tsx.code-snippets

@@ -10,7 +10,7 @@
 		"scope": "javascriptreact,typescriptreact",
 		"prefix": "isc",
 		"body": [
-			"import styles from './index.module.scss';",
+			"import * as styles from './index.module.scss';",
 			"$0"
 		],
 		"description": "Import SCSS styles from the same directory."

packages/console/package.json

@@ -38,11 +38,17 @@
     "stylelint": "^13.13.1",
     "typescript": "^4.5.5"
   },
+  "alias": {
+    "@/*": "./src/$1"
+  },
   "eslintConfig": {
     "extends": "@silverhand/react"
   },
   "stylelint": {
-    "extends": "@silverhand/eslint-config-react/.stylelintrc"
+    "extends": "@silverhand/eslint-config-react/.stylelintrc",
+    "rules": {
+      "color-function-notation": "legacy"
+    }
   },
   "prettier": "@silverhand/eslint-config/.prettierrc"
 }

packages/console/src/App.module.scss

@@ -1,3 +1,14 @@
-.app {
-  color: #aaa;
+.skeleton {
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  display: flex;
+  flex-direction: column;
+
+  .content {
+    flex-grow: 1;
+    display: flex;
+  }
 }

packages/console/src/App.tsx

@@ -1,7 +1,19 @@
 import React from 'react';
 
+import './scss/normalized.scss';
 import * as styles from './App.module.scss';
+import Content from './components/Content';
+import Sidebar from './components/Sidebar';
+import Topbar from './components/Topbar';
 
 export const App = () => {
-  return <h1 className={styles.app}>Hello world!</h1>;
+  return (
+    <div className={styles.skeleton}>
+      <Topbar />
+      <div className={styles.content}>
+        <Sidebar />
+        <Content />
+      </div>
+    </div>
+  );
 };

packages/console/src/components/Content/index.module.scss

@@ -0,0 +1,3 @@
+.content {
+  flex-grow: 1;
+}

packages/console/src/components/Content/index.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+import * as styles from './index.module.scss';
+
+const Content = () => {
+  return <div className={styles.content}>Content</div>;
+};
+
+export default Content;

packages/console/src/components/Sidebar/index.module.scss

@@ -0,0 +1,9 @@
+@use '@/scss/underscore' as _;
+
+.sidebar {
+  padding: _.unit(3);
+  flex-grow: 0;
+  flex-shrink: 0;
+  // TO-DO: remove after fulfilled with components
+  width: 250px;
+}

packages/console/src/components/Sidebar/index.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+import * as styles from './index.module.scss';
+
+const Sidebar = () => {
+  return <div className={styles.sidebar}>Sidebar</div>;
+};
+
+export default Sidebar;

packages/console/src/components/Topbar/index.module.scss

@@ -0,0 +1,9 @@
+@use '@/scss/underscore' as _;
+
+.topbar {
+  height: 80px;
+  width: 100%;
+  padding: _.unit(3) _.unit(8);
+  display: flex;
+  align-items: center;
+}

packages/console/src/components/Topbar/index.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+import * as styles from './index.module.scss';
+
+const Topbar = () => {
+  return <div className={styles.topbar}>Admin Console</div>;
+};
+
+export default Topbar;

packages/console/src/scss/_underscore.scss

@@ -0,0 +1,10 @@
+@function unit($factor: 1, $unit: 'px') {
+  @return #{$factor * 4}#{$unit};
+}
+
+@mixin flex-colomn {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}

packages/console/src/scss/normalized.scss

@@ -0,0 +1,15 @@
+body {
+  margin: 0;
+  padding: 0;
+  font-family: sans-serif;
+  background: rgb(#e5e1ec, 50%);
+}
+
+* {
+  box-sizing: border-box;
+}
+
+input {
+  border: none;
+  outline: none;
+}

packages/console/tsconfig.json

@@ -1,6 +1,15 @@
 {
   "extends": "@silverhand/ts-config-react/tsconfig.base",
+  "compilerOptions": {
+    "baseUrl": "./",
+    "paths": {
+      "@/*": [
+        "./src/*"
+      ]
+    }
+  },
   "include": [
-    "src"
+    "src",
+    "jest.config.ts"
   ]
 }