anim-3d-obj 1.1.11 → 1.1.15

package/.eslintignore

@@ -0,0 +1,2 @@
+node_modules
+dist       

package/.eslintrc

@@ -0,0 +1,32 @@
+{
+  "root": true,
+  "extends": [
+    "prettier",
+    "plugin:prettier/recommended",
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:@typescript-eslint/recommended"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "plugins": ["@typescript-eslint", "prettier", "react", "react-hooks"],
+  "rules": {
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": "warn",
+    "@typescript-eslint/no-non-null-assertion": "off",
+    "@typescript-eslint/ban-ts-comment": "off",
+    "@typescript-eslint/no-explicit-any": "off"
+  },
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  },
+  "env": {
+    "browser": true,
+    "node": true
+  },
+  "globals": {
+    "JSX": true
+  }
+}

package/.prettierrc.json

@@ -0,0 +1,10 @@
+{
+   "bracketSpacing": true,
+   "singleQuote": true,
+   "trailingComma": "all",
+   "tabWidth": 2,
+   "semi": false,
+   "printWidth": 120,
+   "jsxSingleQuote": true,
+   "endOfLine": "auto"
+}

package/README.md

@@ -1,154 +1,107 @@
-# React Typescript Cuboid Builder
-
-This project allows a user to create Cuboids of any size simply by entering a set of parameters.  
-The program does the leg work with regard to calculating translationZ depth and config on the fly.
-
--   [GIT HOME](https://github.com/mdnelles/anim-3d-objs-launcher)
--   [NPM HOME](https://www.npmjs.com/package/anim-3d-obj) npm i anim-3d-obj
-
-## Examples
-
--   [6 sided Cuboid - animate X360 Y360](https://codesandbox.io/s/anim-3d-obj-all-sides-simple-bf67yg)
--   [3 sided Object - animate y-axis](https://codesandbox.io/s/anim-3d-obj-3-sides-wobble-y-axis-wglkms)
--   [Double box spin](https://codesandbox.io/s/react-anim-3d-double-box-spin-vbdhg2)
--   [2 sided object with animation wobble](https://codesandbox.io/s/anim-3d-obj-wobblex-mmidkg)
--   [Parallel divs animated x and y axis in tandem](https://codesandbox.io/s/anim-3d-obj-2-sides-simple-4057y7)
--   [Spinning Slab](https://codesandbox.io/s/react-anim-3d-pulse-kc8g0f)
-
-## Config
-
-Animations are optional. Either or both of `anim1Specs` or `anim2Specs` can be applied to the object.
-
-```typescript
-const anim1Specs: object = {
-    border: '', // while testing reveal the animation wrapper
-    degreesHi: -45, // degrees if spin
-    degreesLow: 45, // degrees if spin
-    delay: 0, // start delay in seconds
-    direction: 'normal', //normal alternating reverse
-    duration: 8, // seconds
-    fillMode: 'forwards', // node forwards backwards both
-    iterationCount: 'infinite', // number or infinte
-    name: 'Y360', // ** ANIMATIONS
-    timing: 'ease-in-out' // linear ease ease-in-out
-};
-```
-
-`** ANIMATIONS`
-
--   X360: rotate 360 degrees on the x-axis
--   Y360: rotate 360 degrees on the y-axis
--   fadeInkf: fade object in from 0 to 1 Opacity
--   wobY: wobble on y-axis (degreesHi <-> degreesLow)
--   wobX: wobble on x-axis (degreesHi <-> degreesLow)
--   fwdx018: spin object on x-axis from 0 degrees to 180 degrees
--   fwdx1836: spin object on x-axis from 180 degrees to 360 degrees
--   fwdx09: spin object on x-axis from 0 degrees to 90 degrees
--   fwdx918: spin object on x-axis from 90 degrees to 180 degrees
--   fwdx1827: spin object on x-axis from 180 degrees to 270 degrees
--   fwdx2736: spin object on x-axis from 270 degrees to 360 degrees
--   fwdy018: spin object on y-axis from 0 degrees to 180 degrees
--   fwdy1836: spin object on y-axis from 180 degrees to 360 degrees
--   fwdy09: spin object on y-axis from 0 degrees to 90 degrees
--   fwdy918: spin object on y-axis from 90 degrees to 180 degrees
--   fwdy1827: spin object on y-axis from 180 degrees to 270 degrees
--   fwdy2736: spin object on y-axis from 270 degrees to 360 degrees
--   floatX: float object so is not stationary
--   floatShadow: float object + add shadow
--   pulseSM: pulse object Small
--   pulseMD: pulse object Medium
--   pulseLG: pulse object Large
--   noAnim: no animation place holder
-
-<>
-
-GLOBAL CONFIG
-
-```typescript
-// EXAMPLE GLOBAL FACE CONFIG
-// This will be applied to all Faces that do not have their own custom config
-const global: object = {
-    // // face individual styles (over rides global)
-    css: `
-         border: 1px solid #fff;
-         background: rgb(2,0,36);
-         background: linear-gradient(180deg, rgba(255,255,255,.1) 0%, rgba(141,191,249,.7) 100%);
-         color:white;
-         text-align:center;
-         line-height:10;
-         backface-visibility: visible;
-         font-family: Arial, Helvetica, sans-serif;
-         border-radius:5px;
-         `,
-    body: ' '
-};
-```
-
-<>
-
-CUSTOM CONFIG FOR INDIVIDUAL FACES
-
-```typescript
-const custom: object = {
-      // // face individual styles (over rides global)
-      front: {
-         css: ``,
-         body: <Login />,
-      },
-      left: {
-         css: `
-         border: 1px solid #fff;
-         background: rgb(2,0,36);
-         color:white;
-         text-align: center;
-         line-height:8;`
-         body: " ",
-      },
-      right: {
-         css: ``,
-         body: " ",
-      },
-      back: {
-         css: ``,
-         body: <Logout />,
-      },
-      bottom: {
-         css: `
-         background-color:rgba(141,191,249,1);
-         -webkit-box-shadow: 0px 0px 23px 18px #858585;
-         box-shadow: 0px 0px 23px 18px #858585;
-         `,
-      },
-```
-
-## Render
-
-and
-
-```typescript
-<Cuboid
-    width={250}
-    height={300}
-    depth={250}
-    perspective={800}
-    perspectiveOrigin="50% 50%"
-    zIndex={10}
-    anim1Specs={anim1Specs}
-    anim2Specs={anim2Specs}
-    custom={custom}
-    faces={faceprops}
-    global={global}
-/>
-```
-
-will produce the following
-
-![Logo](https://raw.githubusercontent.com/mdnelles/objs-local/main/img.png?token=GHSAT0AAAAAABQVNJ4VATWQM4SI3LXSTDZWYVDOL7Q)
-
-## Authors
-
--   [@mdnelles](https://github.com/mdnelles)
-
-## License
-
-[MIT](https://choosealicense.com/licenses/mit/)
+# React Typescript Cuboid Builder
+
+This project allows a user to create Cuboids of any size simply by entering a set of parameters.  
+The program does the leg work with regard to calculating translationZ depth and config on the fly.
+
+## Deployment
+
+Install sequence
+
+```
+git clone https://github.com/mdnelles/anim-3d-objs.git
+npm i
+npm run start
+```
+
+## Examples
+
+All sided simple https://codesandbox.io/s/anim-3d-obj-all-sides-simple-sdy1q0
+
+Two sided simple https://codesandbox.io/s/anim-3d-obj-2-sides-simple-9wognm
+
+90 degree wobble on X axis https://codesandbox.io/s/anim-3d-obj-wobblex-08mxqe
+
+speed wobble(y) 3 sides https://codesandbox.io/s/anim-3d-obj-3-sides-wobble-y-axis-dceqdp
+
+## Authors
+
+-  [@mdnelles](https://github.com/mdnelles)
+
+## Demo
+
+The following code
+
+```
+const indivStyles: object = {
+      // // face individual styles (over rides global)
+      bottom: {
+         bfv: "visible",
+         fontFamily: "Helvetica",
+      },
+      front: {
+         border: "1px solid #f00",
+         bgc: "#f00",
+         bfv: "visible",
+         fontFamily: "Arial, Sans",
+      },
+      left: {
+         bgc: "yellow",
+      },
+      top: {
+         bgc: "pink",
+      },
+      right: {
+         bgc: "purple",
+      },
+      back: {
+         border: "1px solid #f00",
+         bgc: "#0f0",
+         bfv: "visible",
+         fontFamily: "Arial, Sans",
+      },
+   };
+```
+
+and
+
+```
+         <Cuboid
+            width={260}
+            depth={260}
+            height={92}
+            perspectiveOrigin='50% 50%'
+            zIndex={10}
+            animSpecs={animSpecs}
+            indivStyles={indivStyles}
+            faces={faceprops}
+            globalStyles={globalStyles}
+         >
+            {}
+         </Cuboid>
+```
+
+will produce the following
+
+![Logo](https://raw.githubusercontent.com/mdnelles/objs-local/main/img.png?token=GHSAT0AAAAAABQVNJ4VATWQM4SI3LXSTDZWYVDOL7Q)
+
+##Face Format
+for things like `background-image: url("myImg.png");` they can be done in `moreStyles` argument.
+
+```
+   const Specs: any = styled.div`
+      opacity: ${opac ? opac : globalStyles.opac};
+      position: ${position};
+      left: ${left};
+      margin: ${margin};
+      padding: ${padding};
+      width: ${width}px;
+      font-family: ${fontFamily};
+      height: ${height}px;
+      background-color: ${bgc ? bgc : globalStyles.bgc};
+      border: ${border ? border : globalStyles.border};
+      backface-visibility: ${bfv ? bfv : globalStyles.bfv};
+      ${transform}
+      top: ${top};
+      ${moreStyles}
+   `;
+```

package/jestconfig.json

@@ -0,0 +1,8 @@
+{
+  "transform": {
+    "^.+\\.(t|j)sx?$": "ts-jest"
+  },
+  "testRegex": "(/tests/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$",
+  "moduleFileExtensions": ["ts", "tsx", "js", "jsx", "json", "node"],
+  "testEnvironment": "jsdom"
+}

package/package.json

@@ -1,48 +1,65 @@
 {
-    "name": "anim-3d-obj",
-    "repository": {
-        "type": "git",
-        "url": "https://github.com/mdnelles/Component-Library"
-    },
-    "homepage": "https://github.com/mdnelles/anim-3d-objs-launcher",
-    "version": "1.1.11",
-    "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"
+  "name": "anim-3d-obj",
+  "version": "1.1.15",
+  "private": false,
+  "dependencies": {
+    "@reduxjs/toolkit": "^1.8.4",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/user-event": "^14.4.3",
+    "@types/node": "^18.7.3",
+    "@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"
+  },
+  "scripts": {
+    "buildOLD": "react-scripts build",
+    "build": "tsc",
+    "build4jest": "npm build:esm && npm build:cjs",
+    "build:esm": "tsc",
+    "build:cjs": "tsc --module commonjs --outDir dist/cjs",
+    "lint": "eslint \"{**/*,*}.{js,ts,jsx,tsx}\"",
+    "prettier": "prettier --write \"{src,tests,example/src}/**/*.{js,ts,jsx,tsx}\"",
+    "test": "jest --config jestconfig.json"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
     ],
-    "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"
-    },
-    "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"
-    },
-    "peerDependencies": {
-        "react": "^18.2.0",
-        "react-dom": "^18.2.0"
-    },
-    "dependencies": {
-        "styled-components": "^5.3.5"
-    },
-    "keywords": [
-        "React",
-        "CSS",
-        "style",
-        "animation",
-        "cube",
-        "cuboid",
-        "3d",
-        "webGL"
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@testing-library/react": "^13.3.0",
+    "@types/jest": "^28.1.6",
+    "@types/styled-components": "^5.1.26",
+    "@typescript-eslint/eslint-plugin": "^5.33.0",
+    "@typescript-eslint/parser": "^5.33.0",
+    "eslint": "^8.22.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-react": "^7.30.1",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "jest": "^28.1.3",
+    "jest-canvas-mock": "^2.4.0",
+    "jest-environment-jsdom": "^28.1.3",
+    "prettier": "^2.7.1",
+    "ts-jest": "^28.0.7"
+  }
 }

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,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "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/components/Card.tsx

@@ -0,0 +1,55 @@
+import { AnimWrap } from './styles/AnimWrap'
+import { SceneStyle } from './styles/Scene'
+import { ObjProps } from './Faces/FaceInter'
+import Face from './Faces/Face'
+import { ObjWrapper } from './styles/Global'
+
+export const Card = (props: ObjProps): any => {
+  const {
+    anim1Specs,
+    anim2Specs,
+    width = 5,
+    height = 5,
+    faces,
+    global = {},
+    custom = {},
+    tranz = (+height / 2) | 0,
+    perspective,
+    perspectiveOrigin,
+    zIndex,
+  } = props
+
+  const buildFace = (faceType: any): any => {
+    return (
+      <Face
+        width={width}
+        height={height}
+        depth={0.1}
+        faceType={faceType}
+        id={faceType}
+        tranz={tranz}
+        global={global}
+        custom={custom}
+      />
+    )
+  }
+
+  return (
+    <SceneStyle
+      width={width}
+      height={height}
+      perspective={perspective}
+      perspectiveOrigin={perspectiveOrigin}
+      zIndex={zIndex}
+    >
+      <AnimWrap animSpecs={anim1Specs}>
+        <AnimWrap animSpecs={anim2Specs}>
+          <ObjWrapper>
+            {faces && faces.front ? buildFace('front') : null}
+            {faces && faces.back ? buildFace('back') : null}
+          </ObjWrapper>
+        </AnimWrap>
+      </AnimWrap>
+    </SceneStyle>
+  )
+}

package/src/components/Cuboid.tsx

@@ -0,0 +1,61 @@
+//import React from 'react'
+import { AnimWrap } from './styles/AnimWrap'
+import { SceneStyle } from './styles/Scene'
+import { ObjProps } from './Faces/FaceInter'
+import Face from './Faces/Face'
+import { ObjWrapper } from './styles/Global'
+
+export const Cuboid = (props: ObjProps): any => {
+  const {
+    anim1Specs,
+    anim2Specs,
+    width = 5,
+    height = 5,
+    depth = 5,
+    faces,
+    global = {},
+    custom = {},
+    tranz = (+height / 2) | 0,
+    perspective,
+    perspectiveOrigin,
+    zIndex,
+  } = props
+
+  const buildFace = (faceType: any): any => {
+    return (
+      <Face
+        width={width}
+        height={height}
+        depth={depth}
+        faceType={faceType}
+        id={faceType}
+        tranz={tranz}
+        global={global}
+        custom={custom}
+      />
+    )
+  }
+
+  return (
+    <SceneStyle
+      width={width}
+      height={height}
+      perspective={perspective}
+      perspectiveOrigin={perspectiveOrigin}
+      zIndex={zIndex}
+    >
+      <AnimWrap animSpecs={anim1Specs}>
+        <AnimWrap animSpecs={anim2Specs}>
+          <ObjWrapper>
+            {faces && faces.front ? buildFace('front') : null}
+            {faces && faces.right ? buildFace('right') : null}
+            {faces && faces.back ? buildFace('back') : null}
+            {faces && faces.left ? buildFace('left') : null}
+            {faces && faces.top ? buildFace('top') : null}
+            {faces && faces.bottom ? buildFace('bottom') : null}
+          </ObjWrapper>
+        </AnimWrap>
+      </AnimWrap>
+    </SceneStyle>
+  )
+}

package/src/components/Faces/Face.tsx

@@ -0,0 +1,72 @@
+import styled from 'styled-components'
+import { FaceProps } from './FaceInter'
+
+const Face = (props: FaceProps): JSX.Element => {
+  let { height = 10, tranz = 80, width = 100 } = props
+
+  const { depth = 10, faceType, global = {}, custom = false } = props
+
+  let transform
+  const styles = custom[faceType] && custom[faceType].css ? custom[faceType].css : global.css
+  const body = custom[faceType] && custom[faceType].body ? custom[faceType].body : global.body
+  if (faceType === 'bottom') {
+    tranz = +height - +depth / 2
+    height = +depth
+    transform = `transform: rotateX(-90deg) translateZ(${tranz}px);`
+    //styles = custom["top"] ? custom : global;
+  } else if (faceType === 'top') {
+    height = +depth
+    if (depth) tranz = +depth / 2
+    transform = `transform: rotateX(90deg) translateZ(${tranz}px);`
+  } else if (faceType === 'front') {
+    if (depth) tranz = +depth / 2
+    transform = `transform: rotateY(0deg) translateZ(${tranz}px);`
+  } else if (faceType === 'back') {
+    if (depth) tranz = +depth / 2
+    transform = `transform: rotateY(180deg) translateZ(${tranz}px);`
+  } else if (faceType === 'right') {
+    if (height > width && !depth) {
+      tranz = -(+height / 2 - +width)
+      width = +height
+    } else if (width > height && !depth) {
+      tranz = +height / 2
+      height = +width
+    } else {
+      tranz = +width - +depth / 2
+      width = +depth
+    }
+    transform = `transform: rotateY(90deg) translateZ(${tranz}px);`
+    // topr is to of Ribbon which points back
+  } else if (faceType === 'topr') {
+    height = +depth
+    if (depth) tranz = +depth / 2
+    //let offset = depth / 2;
+    transform = `transform: rotateX(90deg) translateZ(${tranz}px );  `
+  } else {
+    if (height > width && !depth) {
+      tranz = -(+height / 2 - +width)
+      width = +height
+    } else if (width > height && !depth) {
+      tranz = +height / 2
+      height = +width
+    } else {
+      tranz = +depth / 2
+      width = +depth
+    }
+    transform = `transform: rotateY(-90deg) translateZ(${tranz}px);`
+  }
+
+  //const BackFlip: any = styled.section``;
+
+  const Specs: any = styled.section`
+    ${styles}
+    width: ${width}px;
+    position: absolute;
+    height: ${height}px;
+    ${transform};
+  `
+
+  return <Specs>{body}</Specs>
+}
+
+export default Face

package/src/components/Faces/FaceInter.d.ts

@@ -0,0 +1,39 @@
+export interface FaceProps {
+  children?: any
+  depth?: number | any
+  faceType?: any
+  custom?: any
+  global?: any
+  height?: number | string
+  id?: string | number | boolean
+  styles?: object | any
+  tranz?: any
+  width?: number | string
+}
+
+export interface ObjProps {
+  anim1Specs?: object | undefined
+  anim2Specs?: object | undefined
+  children?: any
+  depth?: number
+  global?: { border?: string; bgc?: string; opac?: number | string } | any
+  faces?:
+    | {
+        front: boolean
+        back: boolean
+        left: boolean
+        right: boolean
+        top: boolean
+        bottom: boolean
+      }
+    | undefined
+
+  height?: number | string
+  custom?: object | string | undefined
+  perspective?: string | number | undefined
+  perspectiveOrigin?: string | undefined
+  tranz?: number | undefined
+  txt?: string | any
+  width?: number
+  zIndex?: number | undefined
+}

package/src/components/Ribbon.tsx

@@ -0,0 +1,57 @@
+import { AnimWrap } from './styles/AnimWrap'
+import { SceneStyle } from './styles/Scene'
+import { ObjProps } from './Faces/FaceInter'
+import Face from './Faces/Face'
+import { ObjWrapper } from './styles/Global'
+
+export const Ribbon = (props: ObjProps): any => {
+  const {
+    anim1Specs,
+    anim2Specs,
+    width = 5,
+    height = 5,
+    depth = 5,
+    faces,
+    global = {},
+    custom = {},
+    tranz = (+height / 2) | 0,
+    perspective,
+    perspectiveOrigin,
+    zIndex,
+  } = props
+
+  const buildFace = (faceType: any): any => {
+    return (
+      <Face
+        width={width}
+        height={height}
+        depth={depth}
+        faceType={faceType}
+        id={faceType}
+        tranz={tranz}
+        global={global}
+        custom={custom}
+      />
+    )
+  }
+
+  return (
+    <SceneStyle
+      width={width}
+      height={height}
+      perspective={perspective}
+      perspectiveOrigin={perspectiveOrigin}
+      zIndex={zIndex}
+    >
+      <AnimWrap animSpecs={anim1Specs}>
+        <AnimWrap animSpecs={anim2Specs}>
+          <ObjWrapper>
+            {faces && faces.bottom ? buildFace('bottom') : null}
+            {faces && faces.back ? buildFace('back') : null}
+            {faces && faces.top ? buildFace('topr') : null}
+          </ObjWrapper>
+        </AnimWrap>
+      </AnimWrap>
+    </SceneStyle>
+  )
+}

package/src/components/styles/Anim.d.ts

@@ -0,0 +1,16 @@
+export interface AnimStylesProps {
+  children?: any
+  animSpecs?: any
+}
+export interface AnimSpecsProps {
+  border?: string | undefined
+  degreesHi?: number | undefined
+  degreesLow?: number | undefined
+  delay: any
+  direction?: string | undefined
+  duration?: number | string | undefined
+  fillMode?: string | undefined
+  iterationCount?: number | string | undefined
+  name?: string | undefined
+  timing?: string | undefined
+}

package/src/components/styles/AnimWrap.tsx

@@ -0,0 +1,92 @@
+import styled from 'styled-components'
+//import React from 'react'
+import { AnimStylesProps } from './Anim'
+import { allAnims } from './Anims'
+
+export const AnimWrap = (props: AnimStylesProps) => {
+  const { children, animSpecs } = props
+  const AS: any = animSpecs
+
+  const {
+    X360,
+    Y360,
+    fadeInkf,
+    wobY,
+    wobX,
+    fwdx018,
+    fwdx1836,
+    fwdx09,
+    fwdx918,
+    fwdx1827,
+    fwdx2736,
+    fwdy018,
+    fwdy1836,
+    fwdy09,
+    fwdy918,
+    fwdy1827,
+    fwdy2736,
+    floatX,
+    floatShadow,
+    pulseSM,
+    pulseMD,
+    pulseLG,
+    noAnim,
+  } = allAnims({
+    degreesHi: AS && AS.degreesHi ? AS.degreesHi : 0,
+    degreesLow: AS && AS.degreesLow ? AS.degreesLow : 0,
+  })
+
+  let theAnim: any = 'noAnim'
+  // need to iterate through all animation posibilities and not use eval() to satisfy TS
+  if (AS && AS.name) {
+    if (AS.name === 'X360') theAnim = X360
+    else if (AS.name === 'Y360') theAnim = Y360
+    else if (AS.name === 'fadeInkf') theAnim = fadeInkf
+    else if (AS.name === 'wobX') theAnim = wobX
+    else if (AS.name === 'wobY') theAnim = wobY
+    else if (AS.name === 'fwdx018') theAnim = fwdx018
+    else if (AS.name === 'fwdx1836') theAnim = fwdx1836
+    else if (AS.name === 'fwdx09') theAnim = fwdx09
+    else if (AS.name === 'fwdx918') theAnim = fwdx918
+    else if (AS.name === 'fwdx1827') theAnim = fwdx1827
+    else if (AS.name === 'fwdx2736') theAnim = fwdx2736
+    else if (AS.name === 'fwdy018') theAnim = fwdy018
+    else if (AS.name === 'fwdy1836') theAnim = fwdy1836
+    else if (AS.name === 'fwdy09') theAnim = fwdy09
+    else if (AS.name === 'fwdy918') theAnim = fwdy918
+    else if (AS.name === 'fwdy1827') theAnim = fwdy1827
+    else if (AS.name === 'fwdy2736') theAnim = fwdy2736
+    else if (AS.name === 'floatX') theAnim = floatX
+    else if (AS.name === 'floatShadow') theAnim = floatShadow
+    else if (AS.name === 'pulseSM') theAnim = pulseSM
+    else if (AS.name === 'pulseMD') theAnim = pulseMD
+    else if (AS.name === 'pulseLG') theAnim = pulseLG
+  } else theAnim = noAnim
+
+  let AnimWrapDiv: any = styled.div``
+  if (AS) {
+    AnimWrapDiv = styled.div`
+      width: 100%;
+      height: 100%;
+      position: relative;
+      transform-style: preserve-3d;
+      border: ${AS.border || ''};
+      -webkit-animation-duration: ${AS.duration || 1}s;
+      animation-duration: ${AS.duration || 1}s;
+      -webkit-animation-iteration-count: ${AS.iterationCount || 1};
+      animation-iteration-count: ${AS.iterationCount || 1};
+      -webkit-animation-name: ${theAnim || 'noAnim'};
+      animation-name: ${theAnim || 'noAnim'};
+      -webkit-animation-fill-mode: ${AS.fillMode || 'forwards'};
+      animation-fill-mode: ${AS.fillMode || 'forwards'};
+      animation-direction: ${AS.direction || 'normal'};
+      -webkit-animation-direction: ${AS.direction || 'normal'};
+      -webkit-animation-timing-function: ${AS.timing || 'linear'};
+      animation-timing-function: ${AS.timing || 'linear'};
+      -webkit-animation-delay: ${AS.delay || 0}s;
+      animation-delay: ${AS.delay || 0}s;
+    `
+  }
+
+  return <AnimWrapDiv>{children}</AnimWrapDiv>
+}

package/src/components/styles/Anims.ts

@@ -0,0 +1,290 @@
+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);
+   }
+   to {
+      -webkit-transform: rotateX(0deg);
+      transform: rotateX(0deg);
+   }
+}`
+
+  //////// Y360
+  const Y360 = keyframes`
+    from {
+        -webkit-transform: rotateY(360deg);
+        transform: rotateY(360deg);
+    }
+    to {
+        -webkit-transform: rotateY(0deg);
+        transform: rotateY(0deg);
+    }`
+
+  const fadeInkf = keyframes`
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }`
+
+  const wobY = keyframes`
+    0% {
+        -webkit-transform: rotateY(${degreesLow}deg);
+        transform: rotateY(${degreesLow}deg);
+    }
+    50% {
+        -webkit-transform: rotateY(${degreesHi}deg);
+        transform: rotateY(${degreesHi}deg);
+    }
+    100% {
+        -webkit-transform: rotateY(${degreesLow}deg);
+        transform: rotateY(${degreesLow}deg);
+    }`
+
+  const wobX = keyframes`
+    0% {
+        -webkit-transform: rotateX(${degreesLow}deg);
+        transform: rotateX(${degreesLow}deg);
+    }
+    50% {
+        -webkit-transform: rotateX(${degreesHi}deg);
+        transform: rotateX(${degreesHi}deg);
+    }
+    100% {
+        -webkit-transform: rotateX(${degreesLow}deg);
+        transform: rotateX(${degreesLow}deg);
+    }`
+  /* ============================== x-axis 0-180 >180 - 360 */
+  const fwdx018 = keyframes`
+    from {
+        -webkit-transform: rotateX(360deg);
+        transform: rotateX(360deg);
+    }
+    to {
+        -webkit-transform: rotateX(180deg);
+        transform: rotateX(180deg);
+    }`
+  const fwdx1836 = keyframes`
+    from {
+        -webkit-transform: rotateX(180deg);
+        transform: rotateX(180deg);
+    }
+    to {
+        -webkit-transform: rotateX(0deg);
+        transform: rotateX(0deg);
+    }`
+  /* ============================= x-axis 0-90, 90-180, 180-270, 270-360 */
+  const fwdx09 = keyframes`
+    from {
+       -webkit-transform: rotateX(360deg);
+       transform: rotateX(360deg);
+    }
+    to {
+       -webkit-transform: rotateX(90deg);
+       transform: rotateX(90deg);
+    }`
+  const fwdx918 = keyframes`
+    from {
+        -webkit-transform: rotateX(-90deg);
+        transform: rotateX(-90deg);
+    }
+    to {
+        -webkit-transform: rotateX(-180deg);
+        transform: rotateX(-180deg);
+    }`
+  const fwdx1827 = keyframes`
+    from {
+        -webkit-transform: rotateX(-180deg);
+        transform: rotateX(-180deg);
+    }
+    to {
+        -webkit-transform: rotateX(-270deg);
+        transform: rotateX(-270deg);
+    }`
+  const fwdx2736 = keyframes`
+    from {
+        -webkit-transform: rotateX(-270deg);
+        transform: rotateX(-270deg);
+    }
+    to {
+        -webkit-transform: rotateX(-360deg);
+        transform: rotateX(-360deg);
+    }`
+
+  /* ============================== y-axis 0-180 >180 - 360 */
+  const fwdy018 = keyframes`
+   from {
+       -webkit-transform: rotateY(360deg);
+       transform: rotateY(360deg);
+   }
+   to {
+       -webkit-transform: rotateY(180deg);
+       transform: rotateY(180deg);
+   }`
+  const fwdy1836 = keyframes`
+   from {
+       -webkit-transform: rotateY(180deg);
+       transform: rotateY(180deg);
+   }
+   to {
+       -webkit-transform: rotateY(0deg);
+       transform: rotateY(0deg);
+   }`
+
+  /* ============================= y-axis 0-90, 90-180, 180-270, 270-360 */
+  const fwdy09 = keyframes`
+   from {
+      -webkit-transform: rotateY(360deg);
+      transform: rotateY(360deg);
+   }
+   to {
+      -webkit-transform: rotateY(90deg);
+      transform: rotateY(90deg);
+   }`
+  const fwdy918 = keyframes`
+   from {
+       -webkit-transform: rotateY(-90deg);
+       transform: rotateY(-90deg);
+   }
+   to {
+       -webkit-transform: rotateY(-180deg);
+       transform: rotateY(-180deg);
+   }`
+  const fwdy1827 = keyframes`
+   from {
+       -webkit-transform: rotateY(-180deg);
+       transform: rotateY(-180deg);
+   }
+   to {
+       -webkit-transform: rotateY(-270deg);
+       transform: rotateY(-270deg);
+   }`
+  const fwdy2736 = keyframes`
+   from {
+       -webkit-transform: rotateY(-270deg);
+       transform: rotateY(-270deg);
+   }
+   to {
+       -webkit-transform: rotateY(-360deg);
+       transform: rotateY(-360deg);
+   }`
+
+  /* ============================= 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`
+        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);
+            -webkit-transform: translateY(0px);
+                -ms-transform: translateY(0px);
+                    transform: translateY(0px);
+        }
+        50% {
+            -webkit-box-shadow: 0 25px 15px 0px rgba(0,0,0,0.2);
+                    box-shadow: 0 25px 15px 0px rgba(0,0,0,0.2);
+            -webkit-transform: translateY(-20px);
+                -ms-transform: translateY(-20px);
+                    transform: translateY(-20px);
+        }
+        100% {
+            -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);
+            -webkit-transform: translateY(0px);
+                -ms-transform: translateY(0px);
+                    transform: translateY(0px);
+        }`
+
+  const pulseSM = keyframes`
+   0% {
+    -webkit-transform: scale(0.9);
+        -ms-transform: scale(0.9);
+            transform: scale(0.9);
+    }
+    70% {
+        -webkit-transform: scale(1);
+            -ms-transform: scale(1);
+                transform: scale(1);
+    }
+    100% {
+        -webkit-transform: scale(0.9);
+            -ms-transform: scale(0.9);
+                transform: scale(0.9);
+    }`
+
+  const pulseMD = keyframes`
+    0% {
+     -webkit-transform: scale(0.7);
+         -ms-transform: scale(0.7);
+             transform: scale(0.7);
+     }
+     70% {
+         -webkit-transform: scale(1);
+             -ms-transform: scale(1);
+                 transform: scale(1);
+     }
+     100% {
+         -webkit-transform: scale(0.7);
+             -ms-transform: scale(0.7);
+                 transform: scale(0.7);
+     }`
+
+  const pulseLG = keyframes`
+    0% {
+     -webkit-transform: scale(0.5);
+         -ms-transform: scale(0.5);
+             transform: scale(0.5);
+     }
+     70% {
+         -webkit-transform: scale(1);
+             -ms-transform: scale(1);
+                 transform: scale(1);
+     }
+     100% {
+         -webkit-transform: scale(0.5);
+             -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,
+  }
+}

package/src/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/src/components/styles/Scene.tsx

@@ -0,0 +1,30 @@
+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/src/index.ts

@@ -0,0 +1,9 @@
+//import MyCounter from './components/App'
+//export { MyCounter }
+
+import Face from './components/Faces/Face'
+import { Cuboid } from './components/Cuboid'
+import { Ribbon } from './components/Ribbon'
+import { Card } from './components/Card'
+
+export { Face, Cuboid, Ribbon, Card }

package/tests/common.test.tsx

@@ -0,0 +1,29 @@
+//import * as React from 'react'
+import { render } from '@testing-library/react'
+
+import 'jest-canvas-mock'
+
+import { Face, Cuboid, Ribbon, Card } from '../src'
+
+describe('Common render', () => {
+  it('renders without crashing', () => {
+    render(
+      <div>
+        <Cuboid />
+        <Face />
+        <Ribbon />
+        <Card />
+      </div>,
+    )
+  })
+})
+
+/*
+import { MyCounter } from '../src'
+
+describe('Common render', () => {
+  it('renders without crashing', () => {
+    render(<MyCounter />)
+  })
+})
+*/

package/tsconfig.json

@@ -0,0 +1,29 @@
+{
+   "compilerOptions": {
+      "target": "es5",
+      "lib": ["dom", "dom.iterable", "esnext"],
+      "allowJs": true,
+      "skipLibCheck": true,
+      "esModuleInterop": true,
+      "allowSyntheticDefaultImports": true,
+      "strict": true,
+      "forceConsistentCasingInFileNames": true,
+      "noFallthroughCasesInSwitch": true,
+      "module": "esnext",
+      "moduleResolution": "node",
+      "resolveJsonModule": true,
+      "isolatedModules": true,
+      "noEmit": true,
+      "jsx": "react-jsx",
+      "importHelpers": true,
+      "declaration": true,
+      "sourceMap": true,
+      "rootDir": "./src",
+      "outDir": "./dist/esm",
+      "noImplicitReturns": true,
+      "noUnusedLocals": true,
+      "noUnusedParameters": true
+   },
+   "include": ["src"],
+   "exclude": ["dist", "node_modules"]
+}

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2022 JTL (Saman)
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.