diff --git a/.pnp.js b/.pnp.js
index 88b409e32..bfe6d1139 100755
--- a/.pnp.js
+++ b/.pnp.js
@@ -3650,6 +3650,7 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
["@babel/preset-env", "virtual:73f25cc0d3f57943fa9b1d737e4809af7a52a784e0ac5fed74b4e1e083308ab7ae2fd45a5424a8bc7ff7caab067690c9357630d657cbd636d6037acc1557fdc2#npm:7.11.5"],
["@babel/preset-react", "virtual:22157ea722f8d6428f1fcf0a6f7f6c7d6b902d9c785256c60a65fe6cd0db76ebccc7c1457ee047df0ba6909ff018e300c4f4957a60f5b670089810dfc417af9b#npm:7.10.4"],
["@lowdefy/helpers", "workspace:packages/helpers"],
+ ["@lowdefy/type", "workspace:packages/type"],
["babel-jest", "virtual:60db6f885fdb292d52f611575208c6b51b9a272733d90fe8edc7853309da56cfe1d45553d3d82ff571709e87d3dd377b35bef19a5ed1bf366956f0c695b30f9d#npm:26.5.2"],
["babel-loader", "virtual:22157ea722f8d6428f1fcf0a6f7f6c7d6b902d9c785256c60a65fe6cd0db76ebccc7c1457ee047df0ba6909ff018e300c4f4957a60f5b670089810dfc417af9b#npm:8.1.0"],
["babel-plugin-import", "npm:1.13.1"],
diff --git a/packages/blockTools/demo/IconSpinner.js b/packages/blockTools/demo/IconSpinner.js
new file mode 100644
index 000000000..23a43f7e8
--- /dev/null
+++ b/packages/blockTools/demo/IconSpinner.js
@@ -0,0 +1,38 @@
+/*
+ Copyright 2020 Lowdefy, Inc
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+*/
+
+import React from 'react';
+import { IconSpinner } from '../src';
+import Wrapper from './Wrapper';
+
+const Examples = () => (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+
+
+);
+
+export default Examples;
diff --git a/packages/blockTools/demo/Skeleton.js b/packages/blockTools/demo/Skeleton.js
new file mode 100644
index 000000000..b7145ce5d
--- /dev/null
+++ b/packages/blockTools/demo/Skeleton.js
@@ -0,0 +1,35 @@
+/*
+ Copyright 2020 Lowdefy, Inc
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+*/
+
+import React from 'react';
+import Wrapper from './Wrapper';
+import { Skeleton } from '../src';
+
+const Examples = () => (
+ <>
+
+
+
+
+
+
+
+
+
+
+);
+
+export default Examples;
diff --git a/packages/blockTools/demo/SkeletonAvatar.js b/packages/blockTools/demo/SkeletonAvatar.js
new file mode 100644
index 000000000..4b908eca2
--- /dev/null
+++ b/packages/blockTools/demo/SkeletonAvatar.js
@@ -0,0 +1,41 @@
+/*
+ Copyright 2020 Lowdefy, Inc
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+*/
+
+import React from 'react';
+import { SkeletonAvatar } from '../src';
+import Wrapper from './Wrapper';
+
+const Examples = () => (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+);
+
+export default Examples;
diff --git a/packages/blockTools/demo/SkeletonButton.js b/packages/blockTools/demo/SkeletonButton.js
new file mode 100644
index 000000000..dea8038d0
--- /dev/null
+++ b/packages/blockTools/demo/SkeletonButton.js
@@ -0,0 +1,41 @@
+/*
+ Copyright 2020 Lowdefy, Inc
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+*/
+
+import React from 'react';
+import { SkeletonButton } from '../src';
+import Wrapper from './Wrapper';
+
+const Examples = () => (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+);
+
+export default Examples;
diff --git a/packages/blockTools/demo/SkeletonInput.js b/packages/blockTools/demo/SkeletonInput.js
new file mode 100644
index 000000000..623b76de9
--- /dev/null
+++ b/packages/blockTools/demo/SkeletonInput.js
@@ -0,0 +1,50 @@
+/*
+ Copyright 2020 Lowdefy, Inc
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+*/
+
+import React from 'react';
+import { SkeletonInput } from '../src';
+import Wrapper from './Wrapper';
+
+const Examples = () => (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+);
+
+export default Examples;
diff --git a/packages/blockTools/demo/SkeletonParagraph.js b/packages/blockTools/demo/SkeletonParagraph.js
new file mode 100644
index 000000000..e18379b29
--- /dev/null
+++ b/packages/blockTools/demo/SkeletonParagraph.js
@@ -0,0 +1,38 @@
+/*
+ Copyright 2020 Lowdefy, Inc
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+*/
+
+import React from 'react';
+import { SkeletonParagraph } from '../src';
+import Wrapper from './Wrapper';
+
+const Examples = () => (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+
+
+);
+
+export default Examples;
diff --git a/packages/blockTools/demo/Spinner.js b/packages/blockTools/demo/Spinner.js
new file mode 100644
index 000000000..f86e01cc5
--- /dev/null
+++ b/packages/blockTools/demo/Spinner.js
@@ -0,0 +1,41 @@
+/*
+ Copyright 2020 Lowdefy, Inc
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+*/
+
+import React from 'react';
+import { Spinner } from '../src';
+import Wrapper from './Wrapper';
+
+const Examples = () => (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+);
+
+export default Examples;
diff --git a/packages/blockTools/demo/Wrapper.js b/packages/blockTools/demo/Wrapper.js
new file mode 100644
index 000000000..91b030306
--- /dev/null
+++ b/packages/blockTools/demo/Wrapper.js
@@ -0,0 +1,26 @@
+/*
+ Copyright 2020 Lowdefy, Inc
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+*/
+
+import React from 'react';
+
+const Wrapper = ({ children, title, style }) => (
+ <>
+
{title}
+
{children}
+
+);
+
+export default Wrapper;
diff --git a/packages/blockTools/demo/index.js b/packages/blockTools/demo/index.js
index 95d08646a..885024146 100644
--- a/packages/blockTools/demo/index.js
+++ b/packages/blockTools/demo/index.js
@@ -14,14 +14,18 @@
limitations under the License.
*/
-import React from 'react';
import { render } from 'react-dom';
+import IconSpinner from './IconSpinner';
+import React from 'react';
+import Skeleton from './Skeleton';
+import SkeletonAvatar from './SkeletonAvatar';
+import SkeletonButton from './SkeletonButton';
+import SkeletonInput from './SkeletonInput';
+import SkeletonParagraph from './SkeletonParagraph';
+import Spinner from './Spinner';
import { makeCssClass, ErrorBoundary } from '../src';
-// eslint-disable-next-line no-undef
-const documentCtx = document;
-
const ErrorComp = () =>
{this.unknown}
;
const FallbackComp = ({ name, error }) => (
@@ -43,15 +47,19 @@ const Demo = () => (
}>
-
{"makeCssClass({ color: 'red' })"} :
Red text
-
-
Loading component :
+
+
+
+
+
+
+
);
export default Demo;
-render(, documentCtx.querySelector('#root'));
+render(, document.querySelector('#root'));
diff --git a/packages/blockTools/package.json b/packages/blockTools/package.json
index 8e0c162d9..b17bc3244 100644
--- a/packages/blockTools/package.json
+++ b/packages/blockTools/package.json
@@ -27,7 +27,7 @@
],
"scripts": {
"start": "webpack serve",
- "build": "babel src --out-dir dist",
+ "build": "babel src --copy-files --out-dir dist",
"test": "jest --coverage",
"prepare": "yarn build",
"prepublishOnly": "yarn build",
@@ -35,6 +35,7 @@
},
"dependencies": {
"@lowdefy/helpers": "1.0.0",
+ "@lowdefy/type": "1.0.1",
"create-emotion": "10.0.27",
"react": "17.0.0-rc.2",
"react-dom": "17.0.0-rc.2"
diff --git a/packages/blockTools/src/Skeleton/Skeleton.css b/packages/blockTools/src/Skeleton/Skeleton.css
new file mode 100644
index 000000000..7e299f74f
--- /dev/null
+++ b/packages/blockTools/src/Skeleton/Skeleton.css
@@ -0,0 +1,44 @@
+/*
+ Copyright 2020 Lowdefy, Inc
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+*/
+
+.skeleton {
+ position: relative;
+ overflow: hidden;
+ background: #f1f1f1;
+}
+
+.skeleton::before {
+ content: '';
+ display: block;
+ position: absolute;
+ left: -100%;
+ max-width: 600px;
+ top: 0;
+ height: 200%;
+ width: 100%;
+ background: linear-gradient(to right, transparent 0%, #eaeaea 50%, transparent 100%);
+ animation: load 1.8s infinite;
+ /* transform: rotate(45deg); */
+}
+
+@keyframes load {
+ from {
+ left: -100%;
+ }
+ to {
+ left: 100%;
+ }
+}
diff --git a/packages/blockTools/src/Skeleton/Skeleton.js b/packages/blockTools/src/Skeleton/Skeleton.js
new file mode 100644
index 000000000..932083a98
--- /dev/null
+++ b/packages/blockTools/src/Skeleton/Skeleton.js
@@ -0,0 +1,30 @@
+/*
+ Copyright 2020 Lowdefy, Inc
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+*/
+
+import React from 'react';
+import blockDefaults from '../blockDefaults';
+import './Skeleton.css';
+
+const Skeleton = ({ properties, methods }) => {
+ return (
+
+ );
+};
+
+export default blockDefaults(Skeleton);
diff --git a/packages/blockTools/src/Skeleton/SkeletonAvatar.js b/packages/blockTools/src/Skeleton/SkeletonAvatar.js
new file mode 100644
index 000000000..7fa7c577c
--- /dev/null
+++ b/packages/blockTools/src/Skeleton/SkeletonAvatar.js
@@ -0,0 +1,48 @@
+/*
+ Copyright 2020 Lowdefy, Inc
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+*/
+
+import React from 'react';
+import type from '@lowdefy/type';
+import blockDefaults from '../blockDefaults';
+import Skeleton from './Skeleton';
+
+const SkeletonAvatar = ({ properties, methods }) => {
+ let size = properties.size || 32;
+ if (type.isString(size)) {
+ switch (properties.size) {
+ case 'small':
+ size = 24;
+ break;
+ case 'large':
+ size = 40;
+ break;
+ default:
+ size = 32;
+ }
+ }
+ return (
+
+ );
+};
+
+export default blockDefaults(SkeletonAvatar);
diff --git a/packages/blockTools/src/Skeleton/SkeletonButton.js b/packages/blockTools/src/Skeleton/SkeletonButton.js
new file mode 100644
index 000000000..551be9743
--- /dev/null
+++ b/packages/blockTools/src/Skeleton/SkeletonButton.js
@@ -0,0 +1,45 @@
+/*
+ Copyright 2020 Lowdefy, Inc
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+*/
+
+import React from 'react';
+import blockDefaults from '../blockDefaults';
+import Skeleton from './Skeleton';
+
+const SkeletonButton = ({ properties, methods }) => {
+ let height = properties.height || 32;
+ switch (properties.size) {
+ case 'small':
+ height = 24;
+ break;
+ case 'large':
+ height = 40;
+ break;
+ default:
+ height = 32;
+ }
+ return (
+
+ );
+};
+
+export default blockDefaults(SkeletonButton);
diff --git a/packages/blockTools/src/Skeleton/SkeletonInput.js b/packages/blockTools/src/Skeleton/SkeletonInput.js
new file mode 100644
index 000000000..7e797e6ee
--- /dev/null
+++ b/packages/blockTools/src/Skeleton/SkeletonInput.js
@@ -0,0 +1,56 @@
+/*
+ Copyright 2020 Lowdefy, Inc
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+*/
+
+import React from 'react';
+import blockDefaults from '../blockDefaults';
+import Skeleton from './Skeleton';
+
+const SkeletonInput = ({ properties, methods }) => {
+ let inputHeight;
+ switch (properties.size) {
+ case 'small':
+ inputHeight = 24;
+ break;
+ case 'large':
+ inputHeight = 40;
+ break;
+ default:
+ inputHeight = 32;
+ }
+ return (
+
+ {properties.label !== false && (
+
+ )}
+
+
+ );
+};
+
+export default blockDefaults(SkeletonInput);
diff --git a/packages/blockTools/src/Skeleton/SkeletonParagraph.js b/packages/blockTools/src/Skeleton/SkeletonParagraph.js
new file mode 100644
index 000000000..c376a8e7a
--- /dev/null
+++ b/packages/blockTools/src/Skeleton/SkeletonParagraph.js
@@ -0,0 +1,40 @@
+/*
+ Copyright 2020 Lowdefy, Inc
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+*/
+
+import React from 'react';
+import blockDefaults from '../blockDefaults';
+import Skeleton from './Skeleton';
+
+const SkeletonParagraph = ({ properties, methods }) => {
+ const lines = [...Array(properties.lines || 4).keys()];
+ return (
+
+ {lines.map((key) => (
+
+ ))}
+
+ );
+};
+
+export default blockDefaults(SkeletonParagraph);
diff --git a/packages/blockTools/src/Spinner/IconSpinner.css b/packages/blockTools/src/Spinner/IconSpinner.css
new file mode 100644
index 000000000..f889b5509
--- /dev/null
+++ b/packages/blockTools/src/Spinner/IconSpinner.css
@@ -0,0 +1,29 @@
+/*
+ Copyright 2020 Lowdefy, Inc
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+*/
+
+.icon-spinner {
+ animation: spin-animation 1s infinite linear;
+ display: inline-block;
+}
+
+@keyframes spin-animation {
+ 0% {
+ transform: rotate(0deg);
+ }
+ 100% {
+ transform: rotate(359deg);
+ }
+}
diff --git a/packages/blockTools/src/Spinner/IconSpinner.js b/packages/blockTools/src/Spinner/IconSpinner.js
new file mode 100644
index 000000000..1e498eef6
--- /dev/null
+++ b/packages/blockTools/src/Spinner/IconSpinner.js
@@ -0,0 +1,64 @@
+/*
+ Copyright 2020 Lowdefy, Inc
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+*/
+
+import React from 'react';
+import type from '@lowdefy/type';
+import blockDefaults from '../blockDefaults';
+import './IconSpinner.css';
+
+const IconSpinner = ({ properties, methods }) => {
+ let size = properties.size || 20;
+ if (type.isString(size)) {
+ switch (properties.size) {
+ case 'small':
+ size = 20;
+ break;
+ case 'large':
+ size = 32;
+ break;
+ default:
+ size = 24;
+ }
+ }
+ return (
+
+
+
+ );
+};
+
+export default blockDefaults(IconSpinner);
diff --git a/packages/blockTools/src/Spinner/LogoSpinner.css b/packages/blockTools/src/Spinner/LogoSpinner.css
new file mode 100644
index 000000000..85325d13b
--- /dev/null
+++ b/packages/blockTools/src/Spinner/LogoSpinner.css
@@ -0,0 +1,43 @@
+/*
+ Copyright 2020 Lowdefy, Inc
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+*/
+
+.loading-bar {
+ animation: loading-bar-morph 0.5s linear alternate 0s infinite;
+ transform-origin: bottom;
+}
+
+@keyframes loading-bar-morph {
+ 0% {
+ transform: scaleY(0.6);
+ }
+ 100% {
+ transform: scaleY(0.95) translateY(5%);
+ }
+}
+
+.loading-bar-sm {
+ animation: loading-bar-morph-sm 0.5s linear alternate 0s infinite;
+ transform-origin: bottom;
+}
+
+@keyframes loading-bar-morph-sm {
+ 0% {
+ transform: scaleY(1.4) translateY(5%);
+ }
+ 100% {
+ transform: scaleY(0.9);
+ }
+}
diff --git a/packages/blockTools/src/Spinner/LogoSpinner.js b/packages/blockTools/src/Spinner/LogoSpinner.js
new file mode 100644
index 000000000..77a748676
--- /dev/null
+++ b/packages/blockTools/src/Spinner/LogoSpinner.js
@@ -0,0 +1,49 @@
+/*
+ Copyright 2020 Lowdefy, Inc
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+*/
+
+import React from 'react';
+import './LogoSpinner.css';
+
+const LogoSpinner = ({ color, barColor }) => (
+
+
+
+);
+
+export default LogoSpinner;
diff --git a/packages/blockTools/src/Spinner/Spinner.js b/packages/blockTools/src/Spinner/Spinner.js
new file mode 100644
index 000000000..c928a5441
--- /dev/null
+++ b/packages/blockTools/src/Spinner/Spinner.js
@@ -0,0 +1,45 @@
+/*
+ Copyright 2020 Lowdefy, Inc
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+*/
+
+import React from 'react';
+import LogoSpinner from './LogoSpinner';
+import blockDefaults from '../blockDefaults';
+
+const Loading = ({ properties, methods }) => {
+ return (
+
+
+
+
+ {properties.message}
+
+
+
+ );
+};
+
+export default blockDefaults(Loading);
diff --git a/packages/blockTools/src/index.js b/packages/blockTools/src/index.js
index 805934f17..0d8c6a5fd 100644
--- a/packages/blockTools/src/index.js
+++ b/packages/blockTools/src/index.js
@@ -16,18 +16,28 @@
import blockDefaults from './blockDefaults';
import ErrorBoundary from './ErrorBoundary';
-import getEmotionCss from './getEmotionCss';
-import Loading from './Loading';
import makeCssClass from './makeCssClass.js';
import mediaToCssObject from './mediaToCssObject.js';
+import IconSpinner from './Spinner/IconSpinner';
+import Skeleton from './Skeleton/Skeleton';
+import SkeletonAvatar from './Skeleton/SkeletonAvatar';
+import SkeletonButton from './Skeleton/SkeletonButton';
+import SkeletonInput from './Skeleton/SkeletonInput';
+import SkeletonParagraph from './Skeleton/SkeletonParagraph';
+import Spinner from './Spinner/Spinner';
import useRunAfterUpdate from './useRunAfterUpdate';
export {
blockDefaults,
ErrorBoundary,
- getEmotionCss,
- Loading,
+ IconSpinner,
makeCssClass,
mediaToCssObject,
+ Skeleton,
+ SkeletonAvatar,
+ SkeletonButton,
+ SkeletonInput,
+ SkeletonParagraph,
+ Spinner,
useRunAfterUpdate,
};
diff --git a/yarn.lock b/yarn.lock
index dd73bc244..13d291ca0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2836,6 +2836,7 @@ __metadata:
"@babel/preset-env": 7.11.5
"@babel/preset-react": 7.10.4
"@lowdefy/helpers": 1.0.0
+ "@lowdefy/type": 1.0.1
babel-jest: 26.5.2
babel-loader: 8.1.0
babel-plugin-import: 1.13.1