anim-3d-obj 1.1.225 → 1.2.0

package/dist/esm/components/styles/Scene.js

@@ -0,0 +1,15 @@
+import styled from "styled-components";
+import React from "react";
+export const SceneStyle = (props) => {
+    const { width = 0, height = 0, perspective = 600, perspectiveOrigin = "50% 50%", zIndex = 10, children = {}, } = props;
+    const SceneStyleDiv = styled.div `
+    width: ${width}px;
+    height: ${height}px;
+    -webkit-perspective: ${perspective}px;
+    perspective: ${perspective}px;
+    -webkit-perspective-origin: ${perspectiveOrigin};
+    perspective-origin: ${perspectiveOrigin};
+  `;
+    return (React.createElement("div", { style: { zIndex } },
+        React.createElement(SceneStyleDiv, null, children)));
+};

package/dist/esm/index.d.ts

@@ -0,0 +1 @@
+export * from "./components";

package/dist/esm/index.js

@@ -0,0 +1 @@
+export * from "./components";

package/package.json

@@ -1,57 +1,41 @@
 {
    "name": "anim-3d-obj",
-   "version": "1.1.225",
-   "private": false,
+   "version": "1.2.0",
    "repository": {
       "type": "git",
       "url": "https://github.com/mdnelles/anim-3d-obj-npm-publisher.git"
    },
-   "homepage": "https://mdnelles.github.io/a3o-playground",
-   "dependencies": {
-      "@reduxjs/toolkit": "^1.9.5",
-      "react": "^18.2.0",
-      "react-dom": "^18.2.0",
-      "react-scripts": "5.0.1",
-      "styled-components": "^6.0.4"
-   },
+   "homepage": "https://github.com/mdnelles/anim-3d-obj-npm-publisher.git",
+   "description": "React library for creating 3D objects quickly.  Also these objects can be animated",
+   "mainOLD": "dist/cjs/index.js",
+   "main": "dist/cjs/components/Obj.js",
+   "module": "dist/esm/components/Obj.js",
+   "files": [
+      "dist"
+   ],
    "scripts": {
-      "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"
-   },
-   "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"
-      ]
+      "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": {
-      "@babel/cli": "^7.22.9",
-      "@babel/core": "^7.22.9",
-      "@babel/preset-env": "^7.22.9",
-      "@testing-library/jest-dom": "^5.17.0",
-      "@testing-library/react": "^14.0.0",
-      "@testing-library/user-event": "^14.4.3",
-      "@types/jest": "^29.5.3",
-      "@types/node": "^20.4.2",
-      "@types/react": "^18.2.15",
-      "@types/react-dom": "^18.2.7",
+      "@types/node": "^18.11.9",
+      "@types/react": "^18.0.25",
+      "@types/react-dom": "^18.0.8",
       "@types/styled-components": "^5.1.26",
-      "typescript": "^5.1.6"
+      "prettier": "^3.0.0",
+      "react": "^18.2.0",
+      "react-dom": "^18.2.0",
+      "typescript": "^4.8.4"
+   },
+   "peerDependencies": {
+      "react": "^18.2.0",
+      "react-dom": "^18.2.0"
+   },
+   "dependencies": {
+      "styled-components": "^5.3.6"
    },
    "keywords": [
       "React",

package/babel.config.json

@@ -1,18 +0,0 @@
-{
-  "presets": [
-    [
-      "@babel/env",
-      {
-        "targets": {
-          "edge": "17",
-          "firefox": "60",
-          "chrome": "67",
-          "safari": "11.1"
-        },
-        "useBuiltIns": "usage",
-        "corejs": "3.6.5"
-      }
-    ],
-    "@babel/preset-react"
-  ]
-}

package/jestconfig.json

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

package/public/index.html

@@ -1,43 +0,0 @@
-<!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

@@ -1,25 +0,0 @@
-{
-  "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

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

package/src/components/Face.tsx

@@ -1,95 +0,0 @@
-import styled from "styled-components";
-import { FaceProps } from "./types";
-
-export default function Face(props: FaceProps): JSX.Element {
-   let display = true;
-   let {
-      depth = 10,
-      global = { css: "", body: "" },
-      height = 10,
-      face,
-      width = 100,
-   } = props;
-
-   let transform;
-   let tranz = +height / 2;
-   const body = face.body ? face.body : global.body;
-
-   ////////////////////////////////////////////////////////////////////////////// BOTTOM
-   if (face.name === "bottom") {
-      tranz = +height - +depth / 2;
-      height = +depth;
-      transform = `transform: rotateX(-90deg) translateZ(${tranz}px);`;
-   } else if (face.name === "bottom_rear") {
-      tranz = +height - +depth / 2;
-      height = +depth;
-      transform = `transform: rotateX(-90deg) translateZ(${tranz}px)  translateY(${height}px)  `;
-   } else if (face.name === "bottom_front") {
-      tranz = +height - +depth / 2;
-      height = +depth;
-      transform = `transform: rotateX(-90deg) translateZ(${tranz}px)  translateY(${-height}px)  `;
-
-      ////////////////////////////////////////////////////////////////////////////// TOPS
-   } else if (face.name === "top") {
-      height = +depth;
-      if (!!depth) tranz = +depth / 2;
-      transform = `transform: rotateX(90deg) translateZ(${tranz}px);`;
-   } else if (face.name === "top_rear") {
-      height = +depth;
-      if (!!depth) tranz = +depth / 2;
-      transform = `transform: rotateX(90deg) translateZ(${tranz}px) translateY(-${
-         tranz * 2
-      }px)  `;
-   } else if (face.name === "top_front") {
-      height = +depth;
-      if (!!depth) tranz = +depth / 2;
-
-      transform = `transform: rotateX(90deg) translateZ(${tranz}px) translateY(${
-         tranz * 2
-      }px)  `;
-   } else if (face.name === "front") {
-      if (!!depth) tranz = +depth / 2;
-      transform = `transform: rotateY(0deg) translateZ(${tranz}px);`;
-   } else if (face.name === "back") {
-      if (!!depth) tranz = +depth / 2;
-      transform = `transform: rotateY(180deg) translateZ(${tranz}px);`;
-   } else if (face.name === "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 (face.name === "left") {
-      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);`;
-   } else {
-      //console.log(face.name + " is not a recognized face.name");
-      display = false;
-   }
-
-   const Specs: any = styled.section`
-      ${face.css || global.css}
-      width: ${width}px;
-      position: absolute;
-      height: ${height}px;
-      ${transform}
-   `;
-
-   return display ? <Specs>{body}</Specs> : <></>;
-}

package/src/components/Obj.tsx

@@ -1,53 +0,0 @@
-import { ObjWrapper } from "./styles/Global";
-import { AnimWrap } from "./styles/AnimWrap";
-import { SceneStyle } from "./styles/Scene";
-import Face from "./Face";
-import { FaceType, ObjProps } from "./types";
-import React from "react";
-
-export default function Obj(props: ObjProps): JSX.Element {
-   let {
-      anim1,
-      anim2,
-      width = 5,
-      height = 5,
-      depth = 5,
-      global = {},
-      faces,
-      perspective,
-      perspectiveOrigin,
-      zIndex,
-   } = props;
-
-   // process config
-   const buildFace = (face: FaceType): any => {
-      const details = {
-         width,
-         height,
-         depth,
-         face,
-         global,
-      };
-      return <Face {...details} key={face.name} />;
-   };
-
-   return (
-      <SceneStyle
-         width={width}
-         height={height}
-         perspective={perspective}
-         perspectiveOrigin={perspectiveOrigin}
-         zIndex={zIndex}
-      >
-         <AnimWrap animSpecs={anim1}>
-            <AnimWrap animSpecs={anim2}>
-               <ObjWrapper>
-                  {faces && faces[0]
-                     ? faces.map((face) => (face.name ? buildFace(face) : null))
-                     : null}
-               </ObjWrapper>
-            </AnimWrap>
-         </AnimWrap>
-      </SceneStyle>
-   );
-}

package/src/components/index.ts

@@ -1,4 +0,0 @@
-import * as Face from "./Face";
-import * as Obj from "./Obj";
-
-export { Face, Obj };

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

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

package/src/components/styles/AnimWrap.tsx

@@ -1,90 +0,0 @@
-import styled from "styled-components";
-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,
-      swing,
-      swingDecay,
-      noAnim,
-   } = allAnims({ degreesHi: AS.degreesHi, degreesLow: AS.degreesLow });
-
-   let theAnim: string | any = "noAnim";
-
-   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 if (AS.name === "swing") theAnim = swing;
-   else if (AS.name === "swingDecay") theAnim = swingDecay;
-   else theAnim = noAnim;
-
-   const AnimWrapDiv: any = styled.div`
-      width: 100%;
-      height: 100%;
-      position: relative;
-      transform-style: preserve-3d;
-      border: ${AS.border};
-      -webkit-animation-duration: ${AS.duration}s;
-      animation-duration: ${AS.duration}s;
-      -webkit-animation-iteration-count: ${AS.iterationCount};
-      animation-iteration-count: ${AS.iterationCount};
-      -webkit-animation-name: ${theAnim};
-      animation-name: ${theAnim};
-      -webkit-animation-fill-mode: ${AS.fillMode};
-      animation-fill-mode: ${AS.fillMode};
-      -webkit-animation-play-state: ${AS.animationPlayState};
-      animation-play-state: ${AS.animationPlayState};
-      animation-direction: ${AS.direction};
-      -webkit-animation-direction: ${AS.direction};
-      -webkit-animation-timing-function: ${AS.timing};
-      animation-timing-function: ${AS.timing};
-      -webkit-animation-delay: ${AS.delay}s;
-      animation-delay: ${AS.delay}s;
-   `;
-
-   return <AnimWrapDiv>{children}</AnimWrapDiv>;
-};

package/src/components/styles/Global.tsx

@@ -1,28 +0,0 @@
-import styled from "styled-components";
-import React from "react";
-
-interface ObjWrapperProps {
-   showCenterDiv?: boolean | string | number;
-   children?: any;
-}
-
-export const ObjWrapper = (props: ObjWrapperProps): any => {
-   const { showCenterDiv = false, children = "" } = props;
-
-   const Wrapper: any = showCenterDiv
-      ? styled.section`
-           width: 100%;
-           height: 100%;
-           position: relative;
-           transform-style: preserve-3d;
-           border: 1px solid #0f0;
-        `
-      : styled.section`
-           width: 100%;
-           height: 100%;
-           position: relative;
-           transform-style: preserve-3d;
-        `;
-
-   return <Wrapper>{children}</Wrapper>;
-};

package/src/components/styles/Scene.tsx

@@ -1,37 +0,0 @@
-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/components/types.d.ts

@@ -1,42 +0,0 @@
-export interface FaceType {
-   name?: string;
-   css?: string | undefined;
-   body?: any;
-}
-
-export interface ObjProps {
-   anim1?: object | undefined;
-   anim2?: object | undefined;
-   children?: any;
-   depth?: number;
-   global?: { border?: string; bgc?: string; opac?: number | string } | any;
-   height?: number | string;
-   faces?: FaceType[];
-   perspective?: string | number | undefined;
-   perspectiveOrigin?: string | undefined;
-   showCenterDiv?: string | number | boolean | undefined;
-   tranz?: number | undefined;
-   txt?: string | any;
-   width?: number;
-   zIndex?: number | undefined;
-}
-
-export interface GlobalType {
-   css?: string;
-   body?: string;
-}
-
-export interface FaceProps {
-   children?: any;
-   depth?: number | any;
-   face: FaceType;
-   global?: any;
-   height?: number | string;
-   width?: number | string;
-}
-
-export interface SpecsProps {
-   width: number;
-   height: number;
-   transform: string;
-}

package/tsconfig.json

@@ -1,20 +0,0 @@
-{
-   "compilerOptions": {
-      "allowSyntheticDefaultImports": true,
-      "declaration": true,
-      "esModuleInterop": true,
-      "jsx": "react",
-      "lib": ["es5", "es2015", "es2016", "dom", "esnext"],
-      "types": ["node"],
-      "module": "es2015",
-      "moduleResolution": "node",
-      "noImplicitAny": true,
-      "outDir": "dist/esm",
-      "sourceMap": false,
-      "strict": true,
-      "target": "es6",
-      "noUnusedLocals": false,
-      "noUnusedParameters": false
-   },
-   "include": ["src/**/*.ts", "src/**/*.tsx"]
-}