anim-3d-obj 1.1.16 → 1.1.18

package/package.json

@@ -1,69 +1,91 @@
 {
   "name": "anim-3d-obj",
-  "version": "1.1.16",
+  "version": "1.1.18",
   "private": false,
+  "npm": {
+    "publish": true
+  },
   "dependencies": {
     "@babel/polyfill": "^7.12.1",
     "@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/node": "^18.7.5",
     "@types/react": "^18.0.17",
     "@types/react-dom": "^18.0.6",
+    "jest-canvas-mock": "^2.4.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-redux": "^8.0.2",
     "react-scripts": "5.0.1",
     "styled-components": "^5.3.5",
+    "ts-jest": "^28.0.8",
     "typescript": "^4.7.4",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
     "buildT": "tsc",
     "build2": "npm run build:esm && npm run build:cjs",
-    "build": "rm -rf dist && NODE_ENV=production babel ./src --out-dir dist --copy-files",
+    "build-do-rollup": "rm -rf dist && NODE_ENV=production babel ./src --out-dir dist --copy-files",
     "build:esm": "tsc -b",
     "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"
-    ]
+    "test": "jest --config jestconfig.json",
+    "rollup": "rollup -c",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook",
+    "release": "release-it"
   },
+  "author": "mxnelles",
+  "license": "ISC",
   "devDependencies": {
-    "@babel/cli": "^7.18.10",
     "@babel/core": "^7.18.10",
     "@babel/preset-env": "^7.18.10",
+    "@babel/preset-react": "^7.18.6",
+    "@babel/preset-typescript": "^7.18.6",
+    "@rollup/plugin-commonjs": "^22.0.2",
+    "@rollup/plugin-node-resolve": "^13.3.0",
+    "@rollup/plugin-typescript": "^8.3.4",
+    "@storybook/addon-actions": "^6.5.10",
+    "@storybook/addon-essentials": "^6.5.10",
+    "@storybook/addon-links": "^6.5.10",
+    "@storybook/builder-webpack5": "^6.5.10",
+    "@storybook/manager-webpack5": "^6.5.10",
+    "@storybook/preset-scss": "^1.0.3",
+    "@storybook/react": "^6.5.10",
     "@testing-library/react": "^13.3.0",
-    "@types/jest": "^28.1.6",
+    "@types/jest": "^28.1.7",
+    "@types/react": "^18.0.17",
     "@types/styled-components": "^5.1.26",
-    "@typescript-eslint/eslint-plugin": "^5.33.0",
-    "@typescript-eslint/parser": "^5.33.0",
-    "eslint": "^8.22.0",
+    "babel-jest": "^28.1.3",
+    "babel-loader": "^8.2.5",
+    "css-loader": "^6.7.1",
     "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",
+    "html-webpack-plugin": "^5.5.0",
+    "identity-obj-proxy": "^3.0.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"
+    "react": "^18.2.0",
+    "release-it": "^15.3.0",
+    "rollup": "^2.78.0",
+    "rollup-plugin-dts": "^4.2.2",
+    "rollup-plugin-postcss": "^4.0.2",
+    "sass": "^1.54.4",
+    "sass-loader": "^13.0.2",
+    "style-loader": "^3.3.1",
+    "typescript": "^4.7.4"
+  },
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "files": [
+    "dist"
+  ],
+  "types": "dist/index.d.ts",
+  "release-it": {
+    "github": {
+      "release": true
+    }
   }
 }

package/.eslintignore

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

package/.eslintrc

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

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

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/dist/components/Card.tsx

@@ -1,55 +0,0 @@
-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/dist/components/Cuboid.tsx

@@ -1,61 +0,0 @@
-//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/dist/components/Faces/Face.tsx

@@ -1,72 +0,0 @@
-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/dist/components/Faces/FaceInter.d.ts

@@ -1,39 +0,0 @@
-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/dist/components/Ribbon.tsx

@@ -1,57 +0,0 @@
-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/dist/components/styles/Anim.d.ts

@@ -1,16 +0,0 @@
-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/dist/components/styles/AnimWrap.tsx

@@ -1,92 +0,0 @@
-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>
-}