initial commit

Author: Lokesh r

index.js

@@ -1,13 +1,13 @@
-import React, { Suspense } from 'react';
-import ReactDOM from 'react-dom';
-import Loader from 'uielements/loader/loader.component';
+import React, { Suspense } from "react";
+import ReactDOM from "react-dom";
+import Loader from "./src/components/loader/loader.component";
 
-const App = React.lazy(() => import('./src/app'));
+const App = React.lazy(() => import("./src/app"));
 
 const Index = () => (
-    <Suspense fallback={<Loader />}>
-        <App />
-    </Suspense>
+  <Suspense fallback={<Loader />}>
+    <App />
+  </Suspense>
 );
 
-ReactDOM.render(<Index />, document.getElementById('root'));
+ReactDOM.render(<Index />, document.getElementById("root"));

package-lock.json

@@ -28,8 +28,13 @@
     "@babel/core": "^7.9.0",
     "@babel/preset-env": "^7.9.0",
     "@babel/preset-react": "^7.9.4",
+    "@risingstack/react-easy-state": "^6.3.0",
+    "animejs": "^3.2.0",
+    "antd": "^4.2.4",
     "autoprefixer": "^9.7.6",
     "babel-loader": "^8.1.0",
+    "dynamics.js": "^1.1.5",
+    "kute.js": "^1.6.6",
     "postcss-cli": "^7.1.0",
     "prop-types": "^15.7.2",
     "react": "^16.13.1",

package.json

@@ -1,15 +1,16 @@
-import React from 'react';
-import Button from 'uielements/button/button.component';
-import logo from './logo.png';
-import 'assets/css/main.css';
-import './app.scss';
+import React, { useEffect } from "react";
+import { store, autoEffect } from "@risingstack/react-easy-state";
+import "antd/dist/antd.css";
+import "assets/css/main.css";
+import "./app.scss";
+import Grid from "./components/layout/grid";
+import { appStore } from "./store";
+import animator from "./services/animator";
+
+autoEffect(() => {
+  animator(appStore.path);
+});
 
 export default function App() {
-  return (
-    <div className="bg-blue-900 flex flex-col justify-center items-center p-20">
-      <p className="text-4xl text-blue-100">Welcom To React Boilerplate!</p>
-      <img src={logo} className="app--image" alt="logo" />
-      <Button buttonText="Get Started!" />
-    </div>
-  );
+  return <Grid />;
 }

src/app.jsx

@@ -1,5 +1,21 @@
-.app--image {
-    height: 200px;
-    animation: rotation 10s infinite linear;
-    -webkit-animation:rotation 10s infinite linear;
+#blob {
+  fill: #b33771;
+}
+
+.ant-slider-step {
+  background: rgba(179, 55, 113, 0.16);
+}
+
+.ant-slider-handle {
+  border: solid 3px #b33771;
+  width: 24px;
+  height: 24px;
+  margin-top: -9px;
+  &:focus,
+  &.ant-tooltip-open {
+    border-color: #6d214f;
+  }
+}
+.ant-slider:hover .ant-slider-handle:not(.ant-tooltip-open) {
+  border-color: #6d214f;
 }