removed ui-library from boxes example

Author: bennobuilder

examples/react/release/boxes/package.json

@@ -7,28 +7,25 @@
     "@agile-ts/logger": "^0.0.7",
     "@agile-ts/proxytree": "^0.0.5",
     "@agile-ts/react": "^0.1.2",
-    "@chakra-ui/react": "^1.6.3",
-    "@emotion/react": "^11.4.0",
-    "@emotion/styled": "^11.3.0",
-    "framer-motion": "^4.1.17",
+    "lodash": "^4.17.21",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-draggable": "^4.4.3",
     "react-feather": "^2.0.9",
     "react-resizable": "^1.11.1",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
-    "styled-components": "^5.3.0",
-    "typescript": "^4.1.2",
-    "web-vitals": "^1.0.1"
+    "styled-components": "^5.3.0"
   },
   "devDependencies": {
+    "@types/lodash": "^4.14.171",
     "@types/node": "^12.0.0",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
     "@types/react-resizable": "^1.7.2",
     "@types/react-router-dom": "^5.1.7",
-    "@types/styled-components": "^5.1.11"
+    "@types/styled-components": "^5.1.11",
+    "typescript": "^4.1.2"
   },
   "scripts": {
     "start": "react-scripts start",

examples/react/release/boxes/src/components/BounceSpinner.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import styled from 'styled-components';
+
+// https://tobiasahlin.com/spinkit/
+const BounceSpinner: React.FC = () => {
+  return (
+    <Container>
+      <DoubleBounce1 />
+      <DoubleBounce2 />
+    </Container>
+  );
+};
+
+export default BounceSpinner;
+
+const Container = styled.div`
+  width: 40px;
+  height: 40px;
+  position: relative;
+  margin: 100px auto;
+`;
+
+const DoubleBounce = styled.div`
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  background-color: #000000;
+  opacity: 0.6;
+  position: absolute;
+  top: 0;
+  left: 0;
+
+  @-webkit-keyframes sk-bounce {
+    0%,
+    100% {
+      -webkit-transform: scale(0);
+    }
+    50% {
+      -webkit-transform: scale(1);
+    }
+  }
+
+  @keyframes sk-bounce {
+    0%,
+    100% {
+      transform: scale(0);
+      -webkit-transform: scale(0);
+    }
+    50% {
+      transform: scale(1);
+      -webkit-transform: scale(1);
+    }
+  }
+
+  -webkit-animation: sk-bounce 2s infinite ease-in-out;
+  animation: sk-bounce 2s infinite ease-in-out;
+`;
+
+const DoubleBounce1 = styled(DoubleBounce)``;
+const DoubleBounce2 = styled(DoubleBounce)`
+  -webkit-animation-delay: -1s;
+  animation-delay: -1s;
+`;

examples/react/release/boxes/src/components/Card.tsx renamed to examples/react/release/boxes/src/components/EditProperties/components/Card.tsx

@@ -12,9 +12,10 @@ const Container = styled.div`
   top: 20px;
   right: 20px;
   background: #ffffff;
-  padding: 10px;
+  padding: 5px 10px 0 10px;
   align-items: flex-start;
   justify-content: flex-start;
   box-shadow: rgba(99, 99, 99, 0.2) 0 2px 8px 0;
   border-radius: 4px;
+  z-index: 1000;
 `;

examples/react/release/boxes/src/components/EditProperties/components/ImageInfo.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const Info = ({ label, value }: { label: string; value?: string }) => {
+  return (
+    <Container>
+      <Title>{label}</Title>
+      {value == null ? <Skeleton /> : <Description>{value}</Description>}
+    </Container>
+  );
+};
+
+export default Info;
+
+const Container = styled.div`
+  max-width: 175px;
+`;
+
+const Title = styled.div`
+  font-size: 14px;
+  font-weight: 500;
+`;
+
+const Description = styled.div`
+  font-size: 14px;
+`;
+
+const Skeleton = styled.div`
+  width: 100%;
+  height: 21px;
+  border-radius: 4px;
+  background: linear-gradient(
+      70deg,
+      #ccca 30%,
+      rgba(224, 223, 223, 0.67),
+      #ccca 60%
+    )
+    right/300% 100%;
+  animation: loading 1s linear infinite;
+
+  @keyframes loading {
+    to {
+      background-position: left;
+    }
+  }
+`;

examples/react/release/boxes/src/components/EditProperties/components/ImageInfo/components/Info.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { SELECTED_ELEMENT } from '../../../../core/entities/ui/ui.controller';
+import { useProxy } from '@agile-ts/react';
+import core from '../../../../core';
+import Info from './components/Info';
+import styled from 'styled-components';
+
+type ImageInfoProps = {
+  fallback?: boolean;
+};
+
+const ImageInfo: React.FC<ImageInfoProps> = (props) => {
+  const { fallback } = props;
+
+  const element = useProxy(SELECTED_ELEMENT);
+  const [imageInfo, setImageInfo] = React.useState<{
+    author: string;
+    url: string;
+  } | null>(null);
+
+  React.useEffect(() => {
+    const imageId = element?.image?.id;
+    if (imageId != null) {
+      core.ui.fetchImage(imageId).then((value) => {
+        setImageInfo(value);
+      });
+    }
+  }, [element?.image?.id]);
+
+  return (
+    <Container>
+      <Info label="Author" value={imageInfo?.author} />
+      <Info label="Image URL" value={imageInfo?.url} />
+    </Container>
+  );
+};
+
+export default ImageInfo;
+
+const Container = styled.div`
+  align-items: flex-start;
+  width: 100%;
+  margin-bottom: 10px;
+`;

examples/react/release/boxes/src/components/EditProperties/components/ImageInfo/index.tsx

@@ -0,0 +1,90 @@
+import React from 'react';
+import styled from 'styled-components';
+
+interface PropertyInputProps {
+  label: string;
+  value: number;
+  onChange: (value: number) => void;
+}
+
+const PropertyInput: React.FC<PropertyInputProps> = (props) => {
+  const { label, value, onChange } = props;
+  const [currentValue, setCurrentValue] = React.useState<string>(
+    value.toString()
+  );
+  const [lastValue, setLastValue] = React.useState<string>(value.toString());
+
+  React.useEffect(() => {
+    setCurrentValue(value.toString());
+    setLastValue(value.toString());
+  }, [value]);
+
+  return (
+    <>
+      <Label>{label}</Label>
+      <InputContainer>
+        <Input
+          value={currentValue}
+          onChange={(event) => {
+            const value = event.target.value.replace(/\D/g, '');
+            setCurrentValue(value);
+          }}
+          inputMode={'numeric'}
+          onFocus={() => {
+            setLastValue(currentValue);
+          }}
+          onBlur={() => {
+            if (/^\d+$/.test(currentValue)) {
+              onChange(parseInt(currentValue));
+            } else {
+              setCurrentValue(lastValue);
+            }
+          }}
+        />
+        <PxInputLabel>px</PxInputLabel>
+      </InputContainer>
+    </>
+  );
+};
+
+export default PropertyInput;
+
+const Label = styled.div`
+  font-size: 12px;
+  font-weight: bold;
+  line-height: 1;
+  margin-bottom: 5px;
+`;
+
+const InputContainer = styled.div`
+  position: relative;
+`;
+
+const PxInputLabel = styled.div`
+  position: absolute;
+  top: 15%;
+  right: 10px;
+  text-align: center;
+
+  font-size: 12px;
+`;
+
+const Input = styled.input`
+  display: block;
+  box-sizing: border-box;
+  width: 100%;
+  border-radius: 4px;
+  border: 1px solid #dce8f3;
+  background-color: #edf2f7;
+  padding: 5px 10px;
+  margin-bottom: 10px;
+  font-size: 14px;
+
+  :hover {
+    background-color: #deebf3;
+  }
+
+  :focus {
+    background-color: #ffffff;
+  }
+`;

examples/react/release/boxes/src/components/EditProperties/components/Property/components/PropertyInput.tsx

@@ -1,29 +1,27 @@
-import core from '../../../core';
+import core from '../../../../core';
 import { useProxy } from '@agile-ts/react';
-import _ from 'lodash';
+import lodash from 'lodash';
 import React from 'react';
-import PropertyInput from './PropertyInput';
+import PropertyInput from './components/PropertyInput';
 
 interface PropertyProps {
   label: string;
   path: string;
   id: number | string;
+  onChange: (newValue: number) => void;
 }
 
 const Property: React.FC<PropertyProps> = (props) => {
-  const { label, path, id } = props;
+  const { label, path, id, onChange } = props;
+
   const ELEMENT = core.ui.ELEMENTS.getItem(id);
   const element = useProxy(ELEMENT, { componentId: 'Property', deps: [id] });
 
   return (
     <PropertyInput
       label={label}
-      value={_.get(element, path)}
-      onChange={(newValue) => {
-        ELEMENT?.set((v) => {
-          return _.set(v, path, newValue);
-        });
-      }}
+      value={lodash.get(element, path)}
+      onChange={onChange}
     />
   );
 };