anim-3d-obj 1.1.21 → 1.1.22

package/dist/{esm/components/styles/Anims.js → components/styles/Anims.ts}

@@ -1,7 +1,14 @@
-import { keyframes } from 'styled-components';
-export const allAnims = (props) => {
-    const { degreesLow = 0, degreesHi = 0 } = props;
-    const X360 = keyframes `
+import { keyframes } from "styled-components";
+
+interface AllAnimsProps {
+   degreesLow?: number;
+   degreesHi?: number;
+}
+
+export const allAnims = (props: AllAnimsProps) => {
+   const { degreesLow = 0, degreesHi = 0 } = props;
+
+   const X360 = keyframes`
    from {
       -webkit-transform: rotateX(360deg);
       transform: rotateX(360deg);
@@ -11,8 +18,9 @@ export const allAnims = (props) => {
       transform: rotateX(0deg);
    }
 }`;
-    //////// Y360
-    const Y360 = keyframes `
+
+   //////// Y360
+   const Y360 = keyframes`
     from {
         -webkit-transform: rotateY(360deg);
         transform: rotateY(360deg);
@@ -21,14 +29,16 @@ export const allAnims = (props) => {
         -webkit-transform: rotateY(0deg);
         transform: rotateY(0deg);
     }`;
-    const fadeInkf = keyframes `
+
+   const fadeInkf = keyframes`
     from {
         opacity: 0;
     }
     to {
         opacity: 1;
     }`;
-    const wobY = keyframes `
+
+   const wobY = keyframes`
     0% {
         -webkit-transform: rotateY(${degreesLow}deg);
         transform: rotateY(${degreesLow}deg);
@@ -41,7 +51,8 @@ export const allAnims = (props) => {
         -webkit-transform: rotateY(${degreesLow}deg);
         transform: rotateY(${degreesLow}deg);
     }`;
-    const wobX = keyframes `
+
+   const wobX = keyframes`
     0% {
         -webkit-transform: rotateX(${degreesLow}deg);
         transform: rotateX(${degreesLow}deg);
@@ -54,8 +65,8 @@ export const allAnims = (props) => {
         -webkit-transform: rotateX(${degreesLow}deg);
         transform: rotateX(${degreesLow}deg);
     }`;
-    /* ============================== x-axis 0-180 >180 - 360 */
-    const fwdx018 = keyframes `
+   /* ============================== x-axis 0-180 >180 - 360 */
+   const fwdx018 = keyframes`
     from {
         -webkit-transform: rotateX(360deg);
         transform: rotateX(360deg);
@@ -64,7 +75,7 @@ export const allAnims = (props) => {
         -webkit-transform: rotateX(180deg);
         transform: rotateX(180deg);
     }`;
-    const fwdx1836 = keyframes `
+   const fwdx1836 = keyframes`
     from {
         -webkit-transform: rotateX(180deg);
         transform: rotateX(180deg);
@@ -73,8 +84,8 @@ export const allAnims = (props) => {
         -webkit-transform: rotateX(0deg);
         transform: rotateX(0deg);
     }`;
-    /* ============================= x-axis 0-90, 90-180, 180-270, 270-360 */
-    const fwdx09 = keyframes `
+   /* ============================= x-axis 0-90, 90-180, 180-270, 270-360 */
+   const fwdx09 = keyframes`
     from {
        -webkit-transform: rotateX(360deg);
        transform: rotateX(360deg);
@@ -83,7 +94,7 @@ export const allAnims = (props) => {
        -webkit-transform: rotateX(90deg);
        transform: rotateX(90deg);
     }`;
-    const fwdx918 = keyframes `
+   const fwdx918 = keyframes`
     from {
         -webkit-transform: rotateX(-90deg);
         transform: rotateX(-90deg);
@@ -92,7 +103,7 @@ export const allAnims = (props) => {
         -webkit-transform: rotateX(-180deg);
         transform: rotateX(-180deg);
     }`;
-    const fwdx1827 = keyframes `
+   const fwdx1827 = keyframes`
     from {
         -webkit-transform: rotateX(-180deg);
         transform: rotateX(-180deg);
@@ -101,7 +112,7 @@ export const allAnims = (props) => {
         -webkit-transform: rotateX(-270deg);
         transform: rotateX(-270deg);
     }`;
-    const fwdx2736 = keyframes `
+   const fwdx2736 = keyframes`
     from {
         -webkit-transform: rotateX(-270deg);
         transform: rotateX(-270deg);
@@ -110,8 +121,9 @@ export const allAnims = (props) => {
         -webkit-transform: rotateX(-360deg);
         transform: rotateX(-360deg);
     }`;
-    /* ============================== y-axis 0-180 >180 - 360 */
-    const fwdy018 = keyframes `
+
+   /* ============================== y-axis 0-180 >180 - 360 */
+   const fwdy018 = keyframes`
    from {
        -webkit-transform: rotateY(360deg);
        transform: rotateY(360deg);
@@ -120,7 +132,7 @@ export const allAnims = (props) => {
        -webkit-transform: rotateY(180deg);
        transform: rotateY(180deg);
    }`;
-    const fwdy1836 = keyframes `
+   const fwdy1836 = keyframes`
    from {
        -webkit-transform: rotateY(180deg);
        transform: rotateY(180deg);
@@ -129,8 +141,9 @@ export const allAnims = (props) => {
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }`;
-    /* ============================= y-axis 0-90, 90-180, 180-270, 270-360 */
-    const fwdy09 = keyframes `
+
+   /* ============================= y-axis 0-90, 90-180, 180-270, 270-360 */
+   const fwdy09 = keyframes`
    from {
       -webkit-transform: rotateY(360deg);
       transform: rotateY(360deg);
@@ -139,7 +152,7 @@ export const allAnims = (props) => {
       -webkit-transform: rotateY(90deg);
       transform: rotateY(90deg);
    }`;
-    const fwdy918 = keyframes `
+   const fwdy918 = keyframes`
    from {
        -webkit-transform: rotateY(-90deg);
        transform: rotateY(-90deg);
@@ -148,7 +161,7 @@ export const allAnims = (props) => {
        -webkit-transform: rotateY(-180deg);
        transform: rotateY(-180deg);
    }`;
-    const fwdy1827 = keyframes `
+   const fwdy1827 = keyframes`
    from {
        -webkit-transform: rotateY(-180deg);
        transform: rotateY(-180deg);
@@ -157,7 +170,7 @@ export const allAnims = (props) => {
        -webkit-transform: rotateY(-270deg);
        transform: rotateY(-270deg);
    }`;
-    const fwdy2736 = keyframes `
+   const fwdy2736 = keyframes`
    from {
        -webkit-transform: rotateY(-270deg);
        transform: rotateY(-270deg);
@@ -166,12 +179,14 @@ export const allAnims = (props) => {
        -webkit-transform: rotateY(-360deg);
        transform: rotateY(-360deg);
    }`;
-    /* ============================= floating */
-    const floatX = keyframes `
+
+   /* ============================= floating */
+   const floatX = keyframes`
    0% { -webkit-transform: translate(0,  0px); -ms-transform: translate(0,  0px); transform: translate(0,  0px); }
    50%  { -webkit-transform: translate(0, 15px); -ms-transform: translate(0, 15px); transform: translate(0, 15px); }
    100%   { -webkit-transform: translate(0, -0px); -ms-transform: translate(0, -0px); transform: translate(0, -0px); }`;
-    const floatShadow = keyframes `
+
+   const floatShadow = keyframes`
         0% {
             -webkit-box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
                     box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
@@ -193,7 +208,8 @@ export const allAnims = (props) => {
                 -ms-transform: translateY(0px);
                     transform: translateY(0px);
         }`;
-    const pulseSM = keyframes `
+
+   const pulseSM = keyframes`
    0% {
     -webkit-transform: scale(0.9);
         -ms-transform: scale(0.9);
@@ -209,7 +225,8 @@ export const allAnims = (props) => {
             -ms-transform: scale(0.9);
                 transform: scale(0.9);
     }`;
-    const pulseMD = keyframes `
+
+   const pulseMD = keyframes`
     0% {
      -webkit-transform: scale(0.7);
          -ms-transform: scale(0.7);
@@ -225,7 +242,8 @@ export const allAnims = (props) => {
              -ms-transform: scale(0.7);
                  transform: scale(0.7);
      }`;
-    const pulseLG = keyframes `
+
+   const pulseLG = keyframes`
     0% {
      -webkit-transform: scale(0.5);
          -ms-transform: scale(0.5);
@@ -241,31 +259,32 @@ export const allAnims = (props) => {
              -ms-transform: scale(0.5);
                  transform: scale(0.5);
      }`;
-    const noAnim = keyframes ``;
-    return {
-        X360,
-        Y360,
-        fadeInkf,
-        wobY,
-        wobX,
-        fwdx018,
-        fwdx1836,
-        fwdx09,
-        fwdx918,
-        fwdx1827,
-        fwdx2736,
-        fwdy018,
-        fwdy1836,
-        fwdy09,
-        fwdy918,
-        fwdy1827,
-        fwdy2736,
-        floatX,
-        floatShadow,
-        pulseSM,
-        pulseMD,
-        pulseLG,
-        noAnim
-    };
+
+   const noAnim = keyframes``;
+
+   return {
+      X360,
+      Y360,
+      fadeInkf,
+      wobY,
+      wobX,
+      fwdx018,
+      fwdx1836,
+      fwdx09,
+      fwdx918,
+      fwdx1827,
+      fwdx2736,
+      fwdy018,
+      fwdy1836,
+      fwdy09,
+      fwdy918,
+      fwdy1827,
+      fwdy2736,
+      floatX,
+      floatShadow,
+      pulseSM,
+      pulseMD,
+      pulseLG,
+      noAnim,
+   };
 };
-//# sourceMappingURL=Anims.js.map

package/dist/components/styles/Global.ts

@@ -0,0 +1,7 @@
+import styled from "styled-components";
+export const ObjWrapper = styled.div`
+   width: 100%;
+   height: 100%;
+   position: relative;
+   transform-style: preserve-3d;
+`;

package/dist/components/styles/Scene.tsx

@@ -0,0 +1,37 @@
+import styled from "styled-components";
+import React from "react";
+
+interface SceneStyleProps {
+   width?: number | string;
+   height?: number | string;
+   perspective?: number | string | undefined;
+   perspectiveOrigin?: string | undefined;
+   zIndex?: number | undefined;
+   children: any;
+}
+
+export const SceneStyle = (props: SceneStyleProps) => {
+   const {
+      width = 0,
+      height = 0,
+      perspective = 600,
+      perspectiveOrigin = "50% 50%",
+      zIndex = 10,
+      children = {},
+   } = props;
+
+   const SceneStyleDiv: any = styled.div`
+      width: ${width}px;
+      height: ${height}px;
+      -webkit-perspective: ${perspective}px;
+      perspective: ${perspective}px;
+      -webkit-perspective-origin: ${perspectiveOrigin};
+      perspective-origin: ${perspectiveOrigin};
+   `;
+
+   return (
+      <div style={{ zIndex }}>
+         <SceneStyleDiv>{children}</SceneStyleDiv>
+      </div>
+   );
+};

package/dist/index.ts

@@ -0,0 +1,6 @@
+import Face from "./components/Face";
+import { Cuboid } from "./components/Cuboid";
+import { Card } from "./components/Card";
+import { Ribbon } from "./components/Ribbon";
+
+export { Face, Cuboid, Card, Ribbon };

package/package.json

@@ -1,39 +1,54 @@
 {
    "name": "anim-3d-obj",
-   "repository": {
-      "type": "git",
-      "url": "https://github.com/mdnelles/Component-Library"
+   "version": "1.1.22",
+   "private": false,
+   "dependencies": {
+      "@reduxjs/toolkit": "^1.8.5",
+      "@testing-library/jest-dom": "^5.16.5",
+      "@testing-library/react": "^13.3.0",
+      "@testing-library/user-event": "^14.4.3",
+      "@types/jest": "^28.1.7",
+      "@types/node": "^18.7.9",
+      "@types/react": "^18.0.17",
+      "@types/react-dom": "^18.0.6",
+      "react": "^18.2.0",
+      "react-dom": "^18.2.0",
+      "react-redux": "^8.0.2",
+      "react-scripts": "5.0.1",
+      "styled-components": "^5.3.5",
+      "typescript": "^4.7.4",
+      "web-vitals": "^2.1.4"
    },
-   "homepage": "https://github.com/mdnelles/anim-3d-objs-launchers",
-   "version": "1.1.21",
-   "description": "React library for creating 3D objects quickly.  Also these objects can be animated",
-   "main": "dist/cjs/index.js",
-   "module": "dist/esm/index.js",
-   "files": [
-      "dist"
-   ],
    "scripts": {
-      "build": "rm -rf dist/ && prettier --write src/ && npm run build:esm && npm run build:cjs",
-      "build:esm": "tsc",
-      "build:cjs": "tsc --module CommonJS --outDir dist/cjs"
+      "start": "react-scripts start",
+      "build": "rm -rf dist && NODE_ENV=production babel src/lib --out-dir dist --copy-files",
+      "build:ra": "react-scripts build",
+      "test": "react-scripts test",
+      "eject": "react-scripts eject"
    },
-   "author": "mdnelles",
-   "license": "MIT",
-   "devDependencies": {
-      "@types/node": "^17.0.21",
-      "@types/react": "^17.0.37",
-      "@types/react-dom": "^17.0.11",
-      "@types/styled-components": "^5.1.25",
-      "react": "^18.2.0",
-      "react-dom": "^18.2.0",
-      "typescript": "^4.5.2"
+   "eslintConfig": {
+      "extends": [
+         "react-app",
+         "react-app/jest"
+      ]
    },
-   "peerDependencies": {
-      "react": "^18.2.0",
-      "react-dom": "^18.2.0"
+   "browserslist": {
+      "production": [
+         ">0.2%",
+         "not dead",
+         "not op_mini all"
+      ],
+      "development": [
+         "last 1 chrome version",
+         "last 1 firefox version",
+         "last 1 safari version"
+      ]
    },
-   "dependencies": {
-      "styled-components": "^5.3.5"
+   "devDependencies": {
+      "@types/styled-components": "^5.1.26",
+      "@babel/cli": "^7.18.10",
+      "@babel/core": "^7.18.10",
+      "@babel/preset-env": "^7.18.10"
    },
    "keywords": [
       "React",

package/public/index.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React Redux App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>

package/public/manifest.json

@@ -0,0 +1,15 @@
+{
+   "short_name": "React App",
+   "name": "Create React App Sample",
+   "icons": [
+      {
+         "src": "favicon.ico",
+         "sizes": "64x64 32x32 24x24 16x16",
+         "type": "image/x-icon"
+      }
+   ],
+   "start_url": ".",
+   "display": "standalone",
+   "theme_color": "#000000",
+   "background_color": "#ffffff"
+}

package/public/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

package/src/App.css

@@ -0,0 +1,11 @@
+/*
+* Prefixed by https://autoprefixer.github.io
+* PostCSS: v8.4.12,
+* Autoprefixer: v10.4.4
+* Browsers: last 4 version
+*/
+
+body {
+   height: 100%;
+   background-color: "#999";
+}

package/src/App.test.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+import { render } from "@testing-library/react";
+import { Provider } from "react-redux";
+import App from "./App";
+
+test("renders learn react link", () => {
+   const { getByText } = render(<App />);
+
+   expect(getByText(/learn/i)).toBeInTheDocument();
+});

package/src/App.tsx

@@ -0,0 +1,115 @@
+import { Cuboid } from "./lib/components/Cuboid";
+import { Ribbon } from "./lib/components/Ribbon";
+import { AnimSpecsProps } from "./lib/components/styles/Anim";
+//import { Cuboid,Card } from "anim-3d-objs";
+
+function App() {
+   const faceprops = {
+      front: true,
+      back: true,
+      left: true,
+      right: true,
+      top: true,
+      bottom: true,
+   };
+
+   const global: object = {
+      // // face individual styles (over rides global)
+      css: `
+         border: 1px solid #900;
+         background-color: red;
+         color:white;
+         opacity: 0.7;
+         backface-visibility: visible;
+         font-family: Arial, Helvetica, sans-serif;
+         `,
+      body: " ",
+   };
+   const anim1Specs: object = {
+      border: "wobX",
+      degreesHi: -45, // degrees if spin
+      degreesLow: 45, // degrees if spin
+      delay: 0,
+      direction: "normal", //normal altenating reverse
+      duration: 8,
+      fillMode: "forward", // node forward backward both
+      iterationCount: "infinite",
+      name: "Y360",
+      timing: "ease-in-out", // linear ease ease-in-out
+   };
+   const anim2Specs: object = {
+      border: "",
+      degreesHi: 0, // degrees if spin
+      degreesLow: 180, // degrees if spin
+      delay: 2,
+      direction: "normal", //normal altenating reverse
+      duration: 8,
+      fillMode: "forward", // node forward backward both
+      iterationCount: "infinite",
+      name: "Y360",
+      timing: "ease-in-out", // linear ease ease-in-out
+   };
+
+   const custom: object = {
+      // face individual styles (over rides global)
+      bottom: {
+         css: `
+         background-color: #F00;
+         opacity: 0.7;
+         backface-visibility: visible;
+         font-size:30px;
+         text-align:center;
+         line-height:8;
+         color:white;
+         `,
+         body: " ",
+      },
+      back: {
+         css: `
+         background-color: #900;
+         opacity: 0.7;
+         backface-visibility: visible;
+         color:white;         
+         font-size:30px;
+         text-align:center;
+         line-height:8;
+         `,
+         body: "BACK",
+      },
+      topr: {
+         css: `
+         background-color: #500;
+         opacity: 0.7;
+         backface-visibility: visible;
+         font-size:30px;
+         text-align:center;
+         line-height:8;
+         color:white;
+            `,
+         body: "TOPR",
+      },
+   };
+
+   return (
+      <div style={{ padding: 150 }}>
+         <Cuboid
+            width={300}
+            height={400}
+            depth={600}
+            perspectiveOrigin='50% 50%'
+            perspective={900}
+            zIndex={10}
+            custom={custom}
+            anim1Specs={anim1Specs}
+            anim2Specs={anim2Specs}
+            faces={faceprops}
+            global={global}
+         >
+            {}
+         </Cuboid>
+         <div style={{ padding: 5 }} />
+      </div>
+   );
+}
+
+export default App;

package/src/index.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { createRoot } from "react-dom/client";
+import { Provider } from "react-redux";
+import App from "./App";
+import reportWebVitals from "./reportWebVitals";
+
+const container = document.getElementById("root")!;
+const root = createRoot(container);
+
+root.render(
+   <React.StrictMode>
+      <App />
+   </React.StrictMode>
+);
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals();