dev to master

.eslintignore

@@ -0,0 +1 @@
+**/*.scss

.gitignore

@@ -0,0 +1,4 @@
+node_modules
+dist
+*.lock
+*.log

babel.config.js

@@ -0,0 +1,4 @@
+module.exports = {
+  plugins: [["babel-plugin-transform-remove-imports", { test: "(?:dhtmlx)" }]],
+  presets: ["@babel/preset-env", "@babel/preset-react"]
+};

enzyme.config.js

@@ -0,0 +1,5 @@
+/** Used in jest.config.js */
+import { configure } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+
+configure({ adapter: new Adapter() });

jest.config.js

@@ -0,0 +1,42 @@
+// For a detailed explanation regarding each configuration property, visit:
+// https://jestjs.io/docs/en/configuration.html
+
+module.exports = {
+  // Automatically clear mock calls and instances between every test
+  clearMocks: true,
+
+  // An array of glob patterns indicating a set of files for which coverage information should be collected
+  collectCoverageFrom: ["src/**/*.{js,jsx,mjs}"],
+
+  // The directory where Jest should output its coverage files
+  coverageDirectory: "coverage",
+
+  // An array of file extensions your modules use
+  moduleFileExtensions: ["js", "json", "jsx"],
+
+  // The paths to modules that run some code to configure or set up the testing environment before each test
+  setupFiles: ["<rootDir>/enzyme.config.js"],
+
+  // The test environment that will be used for testing
+  testEnvironment: "jsdom",
+
+  // The glob patterns Jest uses to detect test files
+  testMatch: ["**/__tests__/**/*.js?(x)", "**/?(*.)+(spec|test).js?(x)"],
+
+  // An array of regexp pattern strings that are matched against all test paths, matched tests are skipped
+  testPathIgnorePatterns: ["\\\\node_modules\\\\"],
+
+  // This option sets the URL for the jsdom environment. It is reflected in properties such as location.href
+  testURL: "http://localhost",
+
+  // An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation
+  transformIgnorePatterns: ["<rootDir>/node_modules/"],
+
+  // Indicates whether each individual test should be reported during the run
+  verbose: false,
+
+  moduleNameMapper: {
+    "^.+\\.(css|less|scss)$": "babel-jest",
+    "^~/(.*)$": "<rootDir>/src/$1"
+  }
+};

package.json

@@ -0,0 +1,71 @@
+{
+  "name": "remotelock",
+  "version": "1.0.0",
+  "main": "index.js",
+  "scripts": {
+    "start": "webpack serve",
+    "build": "webpack --mode production",
+    "test": "jest",
+    "test:watch": "jest --watchAll",
+    "test:coverage": "jest --coverage --colors"
+  },
+  "dependencies": {
+    "autoprefixer": "^10.3.1",
+    "axios": "^0.21.1",
+    "bootstrap": "^5.0.2",
+    "bootstrap-scss": "^5.0.2",
+    "classnames": "^2.2.5",
+    "dayjs": "^1.10.6",
+    "react": "^17.0.2",
+    "react-bootstrap": "^2.0.0-beta.4",
+    "react-dom": "^17.0.2",
+    "react-feather": "^2.0.9",
+    "react-redux": "7.1.0",
+    "redux": "4.0.4",
+    "redux-form": "8.2.6",
+    "redux-mock-store": "^1.5.4",
+    "redux-thunk": "^2.3.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.0.0",
+    "@babel/polyfill": "^7.0.0-beta.51",
+    "@babel/preset-env": "^7.0.0-beta.51",
+    "@babel/preset-react": "^7.0.0-beta.51",
+    "babel-core": "^7.0.0-bridge.0",
+    "babel-jest": "^23.4.2",
+    "babel-loader": "^8.2.2",
+    "babel-plugin-transform-remove-imports": "^1.5.2",
+    "chai": "^4.1.2",
+    "cross-env": "^6.0.3",
+    "css-loader": "^2.1.0",
+    "deep-freeze": "^0.0.1",
+    "enzyme": "^3.3.0",
+    "enzyme-adapter-react-16": "^1.1.1",
+    "html-webpack-plugin": "^5.3.1",
+    "husky": "^1.3.1",
+    "jest": "^23.4.2",
+    "jsdom": "^11.12.0",
+    "lint-staged": "^10.0.8",
+    "node-sass": "4.14.0",
+    "pretty-quick": "^2.0.1",
+    "sass-loader": "7.1.0",
+    "sinon": "^6.1.5",
+    "style-loader": "^0.23.1",
+    "url-loader": "^0.5.7",
+    "webpack": "^5.38.1",
+    "webpack-cli": "^4.7.2",
+    "webpack-dev-server": "^3.11.2"
+  },
+  "author": "Programmers.io",
+  "license": "MIT",
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*.{js,ts,tsx,scss}": [
+      "pretty-quick --staged"
+    ]
+  }
+}

src/__test__/app.test.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { expect } from 'chai';
+import App from '../App';
+
+describe('src/app.test.js', () => {
+  describe('<App />', () => {
+    it('should render tabs properly', () => {
+      const wrapper = shallow(<App/>);
+      expect(wrapper.find('Tabs')).to.have.length(1);
+    });
+  });
+});

src/_fonts.scss

@@ -0,0 +1,63 @@
+
+@mixin font-open-sans-light {
+  font: {
+    family: 'Open Sans', sans-serif;
+    weight: 300;
+  }
+}
+
+@mixin font-open-sans-regular {
+  font: {
+    family: 'Open Sans', sans-serif;
+    weight: 400;
+  }
+}
+
+@mixin font-open-sans-semibold {
+  font: {
+    family: 'Open Sans', sans-serif;
+    weight: 600;
+  }
+}
+
+@mixin base-font {
+  @include font-open-sans-regular;
+  font-size: 13px;
+  color: $var-colors-grey-ultradark;
+}
+
+@mixin heading-1 {
+  @include font-open-sans-light;
+  font-size: 24px;
+  color: $var-font-color-1;
+}
+
+@mixin heading-2 {
+  @include font-open-sans-regular;
+  font-size: 20px;
+  color: $var-font-color-1;
+}
+
+@mixin heading-3 {
+  @include font-open-sans-regular;
+  font-size: 18px;
+  color: $var-colors-grey-ultradark;
+}
+
+@mixin heading-4 {
+  @include font-open-sans-semibold;
+  font-size: 16px;
+  color: $var-colors-grey-ultradark;
+}
+
+@mixin heading-5 {
+  @include font-open-sans-regular;
+  font-size: 15px;
+  color: $var-colors-grey-ultradark;
+}
+
+@mixin heading-6 {
+  @include font-open-sans-semibold;
+  font-size: 13px;
+  color: $var-colors-grey-ultradark;
+}

src/_mixins.scss

@@ -0,0 +1,10 @@
+@mixin ellipsis() {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+@mixin link-text {
+  color: $var-colors-blue-primary;
+  text-decoration: none;
+}

src/_variables.scss

@@ -0,0 +1,56 @@
+$var-colors-red: #ff5555;
+$var-colors-white-smoke: #eff0f0;
+$var-colors-grey-light: #d7d7d7;
+$var-colors-grey-med: #b7b7b7;
+$var-colors-grey-med-dark: #808080;
+$var-colors-grey-dark: #555;
+$var-colors-grey-ultradark: #333333;
+$var-colors-blue-primary: #015595;
+
+$colors-error: #ec3d3d;
+$colors-error-light: #f4e9e9;
+$colors-info: #00acd7;
+$colors-info-light: #e8f0f4;
+$colors-warning-light: #f7ebc5;
+
+$border-radius: 4px;
+
+$box-shadow-low: 0px 0px 1px rgba(0, 0, 0, 0.25), 0px 1px 2px rgba(0, 0, 0, 0.15),
+  0px 1px 4px rgba(0, 0, 0, 0.1);
+$inset-box-shadow-low: inset 0px 0px 1px rgba(0, 0, 0, 0.25), inset 0px 1px 2px rgba(0, 0, 0, 0.15),
+  inset 0px 1px 4px rgba(0, 0, 0, 0.1);
+
+$box-shadow-medium-low: 0px 0px 1px rgba(0, 0, 0, 0.25), 0px 2px 4px rgba(0, 0, 0, 0.15),
+  0px 2px 8px rgba(0, 0, 0, 0.1);
+
+$box-shadow-medium: 0px 0px 1px rgba(0, 0, 0, 0.25), 0px 4px 8px rgba(0, 0, 0, 0.15),
+  0px 4px 16px rgba(0, 0, 0, 0.1);
+$inset-box-shadow-medium: inset 0px 0px 1px rgba(0, 0, 0, 0.25),
+  inset 0px 4px 8px rgba(0, 0, 0, 0.15), inset 0px 4px 16px rgba(0, 0, 0, 0.1);
+
+$box-shadow-high: 0px 0px 1px rgba(0, 0, 0, 0.25), 0px 8px 16px rgba(0, 0, 0, 0.15),
+  0px 8px 32px rgba(0, 0, 0, 0.1);
+
+$var-font-color-1: $var-colors-blue-primary;
+$var-text-light: #6c6d6d;
+
+// Breakpoints
+$breakpoint-hand: 576px;
+$breakpoint-lap: 768px;
+$breakpoint-desk: 1024px;
+
+// Avatar sizes
+$avatar-size: 2.3rem;
+
+// Export Colors
+// By exporting these, we make the values
+// available for use in components
+:export {
+  varColorsRed: $var-colors-red;
+  varColorsWhiteSmoke: $var-colors-white-smoke;
+  varColorsGreyLight: $var-colors-grey-light;
+  varColorsGreyMed: $var-colors-grey-med;
+  varColorsGreyMedDark: $var-colors-grey-med-dark;
+  varColorsGreyDark: $var-colors-grey-dark;
+  varColorsGreyUltradark: $var-colors-grey-ultradark;
+}

src/app.js

@@ -0,0 +1,31 @@
+import React from "react";
+import { Container, Tabs, Tab } from "react-bootstrap";
+import { Devices, Users } from "~/components";
+import "bootstrap/dist/css/bootstrap.min.css";
+import "~/theme.scss";
+import "~/global.scss";
+import "~/app.scss";
+
+const App = () => {
+  return (
+    <div className="App">
+      <Container className="app-content py-3">
+        <Tabs
+          variant="pills"
+          defaultActiveKey="devices"
+          id="pages-tab"
+          className="page-tabs mb-3"
+        >
+          <Tab eventKey="devices" title="Devices" className="page-tab">
+            <Devices />
+          </Tab>
+          <Tab eventKey="users" title="Users" className="page-tab">
+            <Users />
+          </Tab>
+        </Tabs>
+      </Container>
+    </div>
+  );
+};
+
+export default App;

src/app.scss

@@ -0,0 +1,31 @@
+.page-tabs {
+  background-color: $var-colors-grey-med;
+  border-radius: 10px;
+  padding: 5px;
+
+  .nav-item {
+    @media screen and (max-width: $breakpoint-lap) {
+      flex: 1;
+    }
+
+    .nav-link {
+      color: #000;
+      font-weight: 700;
+      @media screen and (max-width: $breakpoint-lap) {
+        width: 100%;
+      }
+
+      &.active {
+        background-color: white;
+        color: #000;
+      }
+    }
+  }
+
+  .show {
+    > .nav-linke {
+      background-color: white;
+      color: #000;
+    }
+  }
+}

src/bootstrap.js

@@ -0,0 +1,15 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import { Provider } from "react-redux";
+import store from "~/store";
+
+import App from "./App";
+
+ReactDOM.render(
+  <React.StrictMode>
+    <Provider store={store}>
+      <App />
+    </Provider>
+  </React.StrictMode>,
+  document.getElementById("root")
+);

src/components/deviceCard/DeviceCard.js

@@ -0,0 +1,26 @@
+import React from "react";
+import { Card } from "react-bootstrap";
+import { ToggleStatus } from "~/components";
+import "./DeviceCard.scss";
+
+const DeviceCard = props => {
+  const { id, attributes: { name, model_number, state } = {} } = props.info;
+  return (
+    <Card>
+      <Card.Body>
+        <div className="d-flex align-self-stretch align-items-stretch h-100">
+          <div className="icon">&nbsp;</div>
+          <div className="ms-2 c-details flex-fill">
+            <h4 className="card-title h4">{name}</h4>
+            <p className="card-text">{model_number}</p>
+            <div className="toggleStatus">
+              <ToggleStatus id={id} state={state} />
+            </div>
+          </div>
+        </div>
+      </Card.Body>
+    </Card>
+  );
+};
+
+export default DeviceCard;