@cbryant24/styled-react - npm Package Compare versions

Comparing version 0.0.10 to 0.0.11

lib/animations/getAnimation.js

 import React, { useState, useEffect } from 'react';
-import { validateAnimation } from '../utils'
+import { validateAnimation } from '../utils';
+import { colorStyle } from 'styled-system';
+import { keyframes } from 'styled-components';
 
@@ -15,2 +17,3 @@ // create appropriate animation css properties
 
+
   // runs only on component mount to start timer for delay property in animation css
@@ -20,2 +23,3 @@ useEffect(() => {
     validateAnimation(animation);
+    checkAnimationType();
 
@@ -199,3 +203,3 @@ //Set delay_waited regardless of specified or not
     return animation.animation_fill_mode;
-  }
+  };
 
@@ -207,3 +211,3 @@ //TODO: add validation check that correct animation-timing-function is provided
     return animation.animation_timing_function;
-  }
+  };
 
@@ -215,4 +219,54 @@ //TODO: add validation check that correct animation-direction is provided
     return animation.animation_direction;
-  }
+  };
 
+  function checkAnimationType() {
+    if (animation.in && typeof animation.in !== 'function') {
+      let animationKeyframes = '';
+      Object.keys(animation.in).forEach( frame => {
+        let cssFrames       = '';
+        const cssProperties = Object.keys(animation.in[frame]);
+
+        cssProperties.forEach( cssProperty => {
+          cssFrames = `${cssFrames} ${cssProperty}: ${ animation.in[frame][cssProperty] }`
+        });
+
+        animationKeyframes = `${animationKeyframes} ${frame} { ${cssFrames} }`;
+      });
+
+      animation.in = keyframes`${animationKeyframes}`;
+    }
+
+    if (animation.continuous && typeof animation.continuous !== 'function') {
+      let animationKeyframes = '';
+      Object.keys(animation.continuous).forEach( frame => {
+        let cssFrames       = '';
+        const cssProperties = Object.keys(animation.continuous[frame]);
+
+        cssProperties.forEach( cssProperty => {
+          cssFrames = `${cssFrames} ${cssProperty}: ${ animation.continuous[frame][cssProperty] }`
+        });
+
+        animationKeyframes = `${animationKeyframes} ${frame} { ${cssFrames} }`;
+      });
+
+      animation.continuous = keyframes`${animationKeyframes}`;
+    }
+
+    if (animation.out && typeof animation.out !== 'function') {
+      let animationKeyframes = '';
+      Object.keys(animation.out).forEach( frame => {
+        let cssFrames       = '';
+        const cssProperties = Object.keys(animation.out[frame]);
+
+        cssProperties.forEach( cssProperty => {
+          cssFrames = `${cssFrames} ${cssProperty}: ${ animation.out[frame][cssProperty] }`
+        });
+
+        animationKeyframes = `${animationKeyframes} ${frame} { ${cssFrames} }`;
+      });
+
+      animation.out = keyframes`${animationKeyframes}`;
+    }
+  };
+
   // build animation object for styled-component conversion to css
@@ -228,7 +282,6 @@ const getAnimationValues = () => {
       iteration: getCurrentIteration(),
-    }
+    };
 
-
     return timedAnimation;
-  }
+  };
 
@@ -235,0 +288,0 @@ return delay_waited && transite_in ? getAnimationValues() : '';

lib/Box.js

 import React from 'react';
 import styled from 'styled-components';
-import cleanElement from 'clean-element';
 import systemStyledCSS from '@styled-system/css';
 import { css } from 'styled-components';
 
-import { ALL, addPseudo, filterProps, addThemeStyle, addCssProperties } from './utils';
+import { ALL, addPseudo, filterProps, addThemeStyle, addCssProperties, addThemeStyleAnimation } from './utils';
 import { getAnimation } from './animations';
@@ -24,3 +23,3 @@
 // base Box element which all other elements inherit to allow css props and theme styling
-const Box = styled(cleanElement(Base))(
+const Box = styled(Base)(
   {
@@ -36,3 +35,2 @@ boxSizing: 'border-box',
     const { animation, before, after, children, ...restProps } = props;
-    // debugger
     return props.pseudo ? addPseudo(restProps) : null
@@ -42,3 +40,2 @@ },
     if (!props.animation) return;
-
     const animationProperties = getAnimation(props);
@@ -128,4 +125,22 @@
   props => props.themeStyle ? addThemeStyle(props) : '',
+  props => props.themeStyle ? props => {
+    const themeStyles = addThemeStyleAnimation(props);
+    if (themeStyles.animation) {
+      const animationProperties = getAnimation(themeStyles);
+
+      return (
+        css`
+          animation-name: ${animationProperties.animation};
+          animation-duration: ${animationProperties.duration};
+          animation-iteration-count: ${animationProperties.iteration};
+          animation-timing-function: ${animationProperties.animationTimingFunction};
+          animation-direction: ${animationProperties.animationDirection};
+          animation-fill-mode: ${animationProperties.animationFillMode};
+          animation-play-state: running;
+        `
+      );
+    }
+  } : ''
 )
 
 export default Box;

lib/index.js

@@ -6,2 +6,4 @@ //TODO: ADD REACT MEMO, CALLBACK, REF HOOKS TO SAVE RENDERS
 //TODO: Make field show text for password smaller and allow to be set externally
+//TODO: Fix error when passing themeStyle with no corresponding property name in theme on the link and error ends up as property name
+
 // Styled-Components Functions
@@ -28,4 +30,3 @@ export { keyframes as keyframes } from 'styled-components';
 // // Link 
-// export { default as Link } from './link';
-// export { LinkProvider as LinkProvider } from './link';
+export { default as createLink } from './Link';
 
@@ -32,0 +33,0 @@ // Elements

lib/ThemeProvider.js

@@ -7,2 +7,4 @@ import React, { Fragment } from 'react';
 const ThemeProvider = ({ theme=defaultTheme, ...props }) => {
+  // console.log('IM THE THEME')
+  // theme.keyframes = keyframes;
 
@@ -9,0 +11,0 @@ return (

lib/utils/filterProps.js

@@ -398,3 +398,6 @@ import { omit } from 'lodash';
     "pl",
-    "pr"
+    "pr",
+    "hover",
+    ":before",
+    ":aftr"
 ])}

lib/utils/index.js

 import { filterProps } from './filterProps';
 import { cssListArr, cssListObj, pseudoClasses, pseudoElements } from './cssHelpers';
 import { validateAnimation } from './cssValidators';
-import { addCssProperties, addPseudo, addThemeStyle, styleBuildRemove, removeStyles } from './utilsStyles';
+import { addCssProperties, addPseudo, addThemeStyle, styleBuildRemove, removeStyles, addThemeStyleAnimation } from './utilsStyles';
 import { addProps } from './addProps';
@@ -17,2 +17,3 @@ import {
   addCssProperties,
+  addThemeStyleAnimation,
   removeStyles,
@@ -19,0 +20,0 @@ cssListArr,

lib/utils/utilsStyles.js

@@ -50,2 +50,4 @@ import { system } from 'styled-system';
 
+// TODO: DRY addThemeStyle && addThemeStyleAnimation && addThemeStylePsuedoAnimation possibly 
+// returning an object with the three necesary values and destructuring them off
 // hooks into theme and adds appropriate styling determined by string or array of strings of appropriate theme objects
@@ -65,4 +67,6 @@ export const addThemeStyle = props => {
       combinedStyle = {...combinedStyle, ...addPseudo(combinedStyle, true)}
+    
+    const { animation, ...combinedStylesNoAnimation } = combinedStyle;
 
-    return styledCSS(combinedStyle);
+    return styledCSS(combinedStylesNoAnimation);
   }
@@ -84,5 +88,35 @@
 
-  return styledCSS(themedStyles)
+  const { animation, ...themedStylesNoAnimation} = themedStyles;
+
+  return styledCSS(themedStylesNoAnimation);
 }
 
+export const addThemeStyleAnimation = props => {
+  console.log('WE OUTCHEA', props);
+  // if (!props.themeStyle) return;
+
+  if (Array.isArray(props.themeStyle)) {
+    let combinedStyle = {};
+
+    props.themeStyle.forEach( style => {
+      const themeVals = themeGet(style)(props);
+      combinedStyle = { ...combinedStyle, ...themeVals }
+    });
+
+    return combinedStyle.animation
+  }
+
+  let themedStyles = themeGet(props.themeStyle)(props);
+  // try {
+  //   if (themedStyles.pseudo) 
+  //   themedStyles = {...themedStyles, ...addPseudo(themedStyles, true)}
+  // } catch(err) {
+  //   console.log('error with getting theme style invalid theme name');
+  //   return err;
+  // }
+  console.log("IM IN THE THEMED ANIMATIONs", themedStyles);
+  return themedStyles;
+}
+
+
 //TODO: add another property for string/array and removal of styles to object version if remove is not null
@@ -98,2 +132,3 @@ // checks if the style is string or array then returns an object with themeStyle property for later parsing in
 
+
 // remove styles from object takes array to remove multiple or string to remove one  
@@ -100,0 +135,0 @@ // if no value for remove original styles returned

package.json

 {
   "name": "@cbryant24/styled-react",
-  "version": "0.0.10",
-  "description": "Styles can be applied to components by writing css styles directly as props",
+  "version": "0.0.11",
+  "description": "CSS Styles can be applied to components by writing css styles as props or themeing",
   "main": "dist/index.js",
@@ -6,0 +6,0 @@ "keywords": [

README.md

@@ -67,2 +67,4 @@ # Styled-React
 
+<small>*animations currently are not able be included in themeing</small>
+
 ## Global Style
@@ -102,2 +104,28 @@
 
+### Links
+
+An `a` tag is currently exported for general linking.
+
+Currently Styled-React is setup to use `react-router`. To create a link provide the exported `react-router-dom` `Link` to the `createLink` function exported from the Styled-React library. The `createLink` function returns a `react-router-dom Link` that can now be styled as normal with themeing included
+
+```javascript
+import { Link } from 'react-router-dom';
+import { Div, createLink } from '@cbryant24/styled-react';
+
+const App = () => {
+  const StyledLink = createLink(Link);
+
+  return (
+    <Div width="20rem" height="20rem" backgroundColor="black" fontSize={[1]}>
+      <StyledLink
+        themeStyle={'linkStyle'}
+        fontSize={[2]}
+        color="white"
+        to="/home"
+      >Home</StyledLink>
+    </Div>
+  )
+}
+```
+
 ### Field
@@ -313,30 +341,24 @@
 
-A function `keyframes` is made available to create custom animations. To create a custom animation pass the created keyframes animation to Animated component in the appropriate places where keyframes are expected.
+To create a custom pass an object representing a keyframes definition. The animation property uses css actual names so properites with a hyphen need to follow the same style in this object.
 
+
+
 ```javascript
-  import { keyframes } from '@cbryant24/styled-react';
+  const customAnimation = {
+      in: {
+        from: { opacity: 0 },
+        to: { opacity: 1 }
+      },
+      delay_between: 4,
+      out: {
+        from: { 'background-color': 'red' },
+        to: { 'background-color': 'yellow' }
+      },
+      // continuous: flashingEyesHere,
+      duration_out: 3,
+      duration_in: 3
+  };
 
-  const slideInTop = keyframes`
-    0% {
-      transform: translateY(-1000px);
-      opacity: 0;
-    }
-    100% {
-      transform: translateY(0);
-      opacity: 1;
-    }
-  `;
-
   <Box
-    animation={{
-      delay_in: 5,
-      in: slideInTop,
-      duration_in: 1,
-      continuous: RotateAnimations.RotateInCenter,
-      duration_continuous: 1,
-      out: FadeAnimations.FadeOutTop,
-      duration_out: 1,
-      delay_between: 5,
-      animation_fill_mode: 'forwards'
-    }}
+    animation={animation}
   >
@@ -343,0 +365,0 @@ I'm animating

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1510024

increased by1.74%

Number of package files

51

increased by2%

Lines of code

7927

increased by2.79%

Number of lines in readme file

600

increased by3.81%

No dependency changes