anim-3d-obj 1.1.13 → 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,11 +1,8 @@
-
 # 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
@@ -17,6 +14,7 @@ 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
@@ -27,8 +25,7 @@ speed wobble(y) 3 sides https://codesandbox.io/s/anim-3d-obj-3-sides-wobble-y-ax
 
 ## Authors
 
-- [@mdnelles](https://github.com/mdnelles)
-
+-  [@mdnelles](https://github.com/mdnelles)
 
 ## Demo
 
@@ -65,7 +62,8 @@ const indivStyles: object = {
    };
 ```
 
-and 
+and
+
 ```
          <Cuboid
             width={260}
@@ -88,9 +86,10 @@ will produce the following
 
 ##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};
+      opacity: ${opac ? opac : globalStyles.opac};
       position: ${position};
       left: ${left};
       margin: ${margin};
@@ -98,9 +97,9 @@ for things like `background-image: url("myImg.png");` they can be done in `moreS
       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};
+      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,49 +1,65 @@
 {
-   "name": "anim-3d-obj",
-   "version": "1.1.13",
-   "private": false,
-   "dependencies": {
-      "@reduxjs/toolkit": "^1.8.2",
-      "@testing-library/jest-dom": "^5.16.4",
-      "@testing-library/react": "^13.3.0",
-      "@testing-library/user-event": "^14.2.0",
-      "@types/jest": "^28.1.1",
-      "@types/node": "^17.0.42",
-      "@types/react": "^18.0.12",
-      "@types/react-dom": "^18.0.5",
-      "react": "^18.1.0",
-      "react-dom": "^18.1.0",
-      "react-redux": "^8.0.2",
-      "react-scripts": "5.0.1",
-      "styled-components": "^5.3.5",
-      "typescript": "^4.7.3",
-      "web-vitals": "^2.1.4"
-   },
-   "scripts": {
-      "start": "react-scripts start",
-      "build": "react-scripts build",
-      "test": "react-scripts test",
-      "eject": "react-scripts eject"
-   },
-   "eslintConfig": {
-      "extends": [
-         "react-app",
-         "react-app/jest"
-      ]
-   },
-   "browserslist": {
-      "production": [
-         ">0.2%",
-         "not dead",
-         "not op_mini all"
-      ],
-      "development": [
-         "last 1 chrome version",
-         "last 1 firefox version",
-         "last 1 safari version"
-      ]
-   },
-   "devDependencies": {
-      "@types/styled-components": "^5.1.25"
-   }
+  "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"
+    ],
+    "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/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

@@ -1,112 +1,61 @@
-import styled from "styled-components";
-import React from "react";
-import { AnimWrap } from "./styles/AnimWrap";
-import { SceneStyle } from "./styles/Scene";
-import { CuboidProps } from "./Faces/FaceInter";
-import Face from "./Faces/Face";
+//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'
 
-const CuboidWrapper = styled.div`
-   width: 100%;
-   height: 100%;
-   position: relative;
-   transform-style: preserve-3d;
-`;
+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 Cuboid = (props: CuboidProps): any => {
-   let color = "#eee",
-      fontWeight: number | string = 800,
-      fontFamily: string = "helvetica",
-      textShadow: string = "1px 1px #555",
-      lineHeight: number = 1.2,
-      fontSize: number | string = 20,
-      textAlign: string | any = "center";
+  const buildFace = (faceType: any): any => {
+    return (
+      <Face
+        width={width}
+        height={height}
+        depth={depth}
+        faceType={faceType}
+        id={faceType}
+        tranz={tranz}
+        global={global}
+        custom={custom}
+      />
+    )
+  }
 
-   let {
-      animSpecs = {},
-      width = 5,
-      height = 5,
-      depth = 5,
-      faces,
-      globalStyles,
-      indivStyles,
-      tranz = (+height / 2) | 0,
-      perspectiveOrigin,
-      zIndex,
-   } = props;
-
-   const buildFace = (faceType: any, child: any): any => {
-      //const { faceType, child } = props;
-
-      return (
-         <Face
-            width={width}
-            height={height}
-            depth={depth}
-            faceType={faceType}
-            id={faceType}
-            tranz={tranz}
-            // if specified opac / bgc / border will over-ride globalStyles
-            globalStyles={globalStyles}
-            indivStyles={indivStyles}
-         >
-            <div
-               style={{
-                  color,
-                  fontWeight,
-                  textShadow,
-                  lineHeight,
-                  fontSize,
-                  fontFamily,
-                  textAlign,
-               }}
-            >
-               {child}
-            </div>
-         </Face>
-      );
-   };
-
-   return (
-      <SceneStyle
-         width={width}
-         height={height}
-         perspectiveOrigin={perspectiveOrigin}
-         zIndex={zIndex}
-      >
-         <AnimWrap
-            duration={animSpecs.anim1duration}
-            iterationCount={animSpecs.anim1count}
-            animName={animSpecs.anim1}
-            animLow={animSpecs.anim1low}
-            animHi={animSpecs.anim1hi}
-            animDirection={animSpecs.anim1direction}
-         >
-            <AnimWrap
-               duration={animSpecs.anim2duration}
-               iterationCount={animSpecs.anim2count}
-               animName={animSpecs.anim2}
-               animLow={animSpecs.anim2low}
-               animHi={animSpecs.anim2hi}
-               animDirection={animSpecs.anim2direction}
-            >
-               <CuboidWrapper>
-                  {!!faces && !!faces.front
-                     ? buildFace("front", "FRONT")
-                     : null}
-                  {!!faces && !!faces.right
-                     ? buildFace("right", "RIGHT")
-                     : null}
-                  {!!faces && !!faces.back ? buildFace("back", "BACK") : null}
-                  {!!faces && !!faces.left ? buildFace("left", "LEFT") : null}
-                  {!!faces && !!faces.top ? buildFace("top", "TOP") : null}
-                  {!!faces && !!faces.bottom
-                     ? buildFace("bottom", "BOTTOM")
-                     : null}
-               </CuboidWrapper>
-            </AnimWrap>
-         </AnimWrap>
-      </SceneStyle>
-   );
-};
-
-export default Cuboid;
+  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

@@ -1,105 +1,72 @@
-import styled from "styled-components";
-import React from "react";
-import { FaceProps, VarsProps } from "./FaceInter";
+import styled from 'styled-components'
+import { FaceProps } from './FaceInter'
 
-const Face = (props: FaceProps): any => {
-   let {
-      bfv = false,
-      bgc = false,
-      border = false,
-      children,
-      depth = 10,
-      faceType,
-      globalStyles = {},
-      fontFamily,
-      height = 10,
-      indivStyles = false,
-      left = 0,
-      margin = 0,
-      opac = false,
-      padding = 20,
-      position = "absolute",
-      top = 0,
-      tranz = 80,
-      width = 100,
-   } = props;
+const Face = (props: FaceProps): JSX.Element => {
+  let { height = 10, tranz = 80, width = 100 } = props
 
-   let transform;
+  const { depth = 10, faceType, global = {}, custom = false } = props
 
-   const setCustomVars = (vars: VarsProps, props: FaceProps): boolean => {
-      bfv = !!vars && !!vars.bfv ? vars.bfv : props.bfv;
-      bgc = !!vars && !!vars.bgc ? vars.bgc : props.bgc;
-      opac = !!vars && !!vars.opac ? vars.opac : props.opac;
-      border = !!vars && !!vars.border ? vars.border : props.border;
-      fontFamily =
-         !!vars && !!vars.fontFamily ? vars.fontFamily : props.fontFamily;
-      return true;
-   };
+  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);`
+  }
 
-   if (faceType === "bottom") {
-      tranz = +height - +depth / 2;
-      height = +depth;
-      transform = `transform: rotateX(-90deg) translateZ(${tranz}px);`;
-      setCustomVars(indivStyles["bottom"], props);
-   } else if (faceType === "top") {
-      height = +depth;
-      if (!!depth) tranz = +depth / 2;
-      transform = `transform: rotateX(90deg) translateZ(${tranz}px);`;
-      setCustomVars(indivStyles["top"], props);
-   } else if (faceType === "front") {
-      if (!!depth) tranz = +depth / 2;
-      transform = `transform: rotateY(0deg) translateZ(${tranz}px);`;
-      setCustomVars(indivStyles["front"], props);
-   } else if (faceType === "back") {
-      if (!!depth) tranz = +depth / 2;
-      transform = `transform: rotateY(180deg) translateZ(${tranz}px);`;
-      setCustomVars(indivStyles["back"], props);
-   } 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);`;
-      setCustomVars(indivStyles["right"], props);
-   } else {
-      if (height > width && !depth) {
-         console.log(1);
-         tranz = -(+height / 2 - +width);
-         width = +height;
-      } else if (width > height && !depth) {
-         console.log(2);
-         tranz = +height / 2;
-         height = +width;
-      } else {
-         tranz = +depth / 2;
-         width = +depth;
-      }
-      transform = `transform: rotateY(-90deg) translateZ(${tranz}px);`;
-      setCustomVars(indivStyles["left"], props);
-   }
+  //const BackFlip: any = styled.section``;
 
-   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};
-   `;
-   return <Specs>{children}</Specs>;
-};
+  const Specs: any = styled.section`
+    ${styles}
+    width: ${width}px;
+    position: absolute;
+    height: ${height}px;
+    ${transform};
+  `
 
-export default Face;
+  return <Specs>{body}</Specs>
+}
+
+export default Face