@convoy/dapper - npm Package Compare versions

Comparing version 2.0.77 to 2.0.84

package.json

 {
   "name": "@convoy/dapper",
-  "version": "2.0.77",
+  "version": "2.0.84",
   "description": "Styling library",
@@ -5,0 +5,0 @@ "license": "Apache-2.0",

README.md

@@ -6,4 +6,4 @@ # Dapper
 
-Dapper is a Javascript/TypeScript styling library (CSS-in-JS or CSS-in-TS). It features:
- - Dynamic styles using modes, (i.e. in React it styles based on props and state)
+Dapper is a Javascript/TypeScript styling library ([CSS-in-JS](https://speakerdeck.com/vjeux/react-css-in-js) or CSS-in-TS). It features:
+ - Dynamic styles using modes, (i.e. in React, it styles based on props and state)
  - TypeScript autocomplete and build-time checks
@@ -29,3 +29,3 @@
 ## TypeScript/Javascript
-Most examples are shown in TypeScript, but dapper works great with Javascript. TypeScript provides autocompletion of your styles and build time checks that those styles exist.
+Most examples are shown in TypeScript, but dapper works great with Javascript. TypeScript provides autocompletion of your styles and at build time checks that those styles exist.
 
@@ -55,5 +55,13 @@ ## React usage
 ```
+Dapper generates a `<style>` element dynamically with autogenerated classes for each style rule.
 
+The above generates the following CSS:
+```
+.dapper-root-a {
+  padding: 5px;
+}
+```
+
 ### Dynamic Styles
-Dapper enables dynamic styles using modes, a series of functions that defines all the different "modes" or ways your component can look. This creates a nice separation of concerns removing a lot of if/else branching logic from your render function.
+Dapper enables dynamic styles using "modes", a series of functions that defines all the different "modes" or ways your component can look. This creates a nice separation of concerns removing a lot of if/else branching logic from your render function.
 
@@ -112,4 +120,58 @@ ```tsx
 
+The above generates the following CSS:
+```
+.dapper-root-a {
+  background-color: #EEE;
+}
+
+.dapper-root-highlight-b {
+  background-color: #FFF;
+}
+
+.dapper-input-tooLong-c {
+  color: red;
+},
+```
+and applies clases like `.dapper-input-highlight-b` dynamically to the div if `props.highlight` is `true`, and similarly adds `.dapper-input-tooLong-c` to the input when `state.value.length > 8`.
+
+## Pseudo-selectors and psuedo-elements
+CSS pseudo-selectors, such as `:hover` and `:active` and pseudo-elements such as `::before` and `::after` are supported as you might expect.
+
+```tsx
+import * as dapper from '@convoy/dapper';
+
+const STYLES = dapper.compile({
+  root: {
+    ':hover': {
+      backgroundColor: '#EEE',
+    },
+    '::after': {
+      content: '"+"',
+    },
+  },
+});
+
+export default class Button extends React.Component<Props, State> {
+  styles = dapper.reactTo(this, STYLES);
+
+  render() {
+    return (
+      <div className={this.styles.root} />
+    );
+  }
+}
+```
+The above generates the following CSS:
+```
+.dapper-root-a:hover {
+  background-color: #EEE;
+}
+
+.dapper-root-a::after {
+  content: "+";
+}
+```
+
 ## Placeholders
-Placeholders allow you to reference other styles names inside of a style rule. This can be helpful for cascading styles.
+Placeholders allow you to reference other styles names inside of a style rule. This can be helpful for cascading styles. Such as in this example, when `child` should look different when inside of `parentA` vs `parentB`.
 
@@ -125,3 +187,3 @@ ```tsx
   },
-  parentA: {
+  parentB: {
     '{child}': {
@@ -154,3 +216,17 @@ backgroundColor: 'blue',
 ```
+The above generates the following CSS:
+```
+.dapper-parentA-a .dapper-child-c {
+  background-color: red;
+}
 
+.dapper-parentB-b .dapper-child-c {
+  background-color: blue;
+}
+
+.dapper-child-c {
+  padding: 5px;
+}
+```
+
 ## Parent selectors
@@ -183,5 +259,12 @@ Parent selectors allow you to swap in the current selector into a new location in a selector. This is helpful when you want to prefix the generated classname for things like global classnames.
 
-## Hover
-Placeholders and parent selectors makes it easy to support things like styling subelements based on pseudo class selectors of parents, like hover. This helps avoid creating onMouseEnter, onMouseLeave handlers.
+The above generates the following CSS:
+```
+html.wf-loading .dapper-root-a {
+  opacity: 0,
+}
+```
 
+## Hover on parent element
+Placeholders and parent selectors makes it easy to support things like styling child elements based on pseudo class selectors of parents, like hover. This helps avoid creating onMouseEnter, onMouseLeave handlers.
+
 ```tsx
@@ -213,5 +296,15 @@ import * as dapper from '@convoy/dapper';
 ```
+The above generates the following CSS:
+```
+.dapper-root-a {
+  padding: 5px;
+}
 
+.dapper-root-a:hover .dapper-child-b {
+  background-color: #EEE;
+}
+```
+
 ## Media queries
-Dapper supports media queries even nested media queries.
+Dapper supports media queries, including nested media queries.
 ```tsx
@@ -224,4 +317,6 @@ import * as dapper from '@convoy/dapper';
     '@media (max-width: 800px)': {
-      width: 100,
-      '@media (max-height: 500px)': {
+      '@media (orientation:landscape)': {
+        width: 100,
+      },
+      '@media (orientation:portrait)': {
         width: 60,
@@ -243,2 +338,18 @@ },
 ```
+The above generates the following CSS:
+```
+.dapper-root-a {
+  width: 200px;
+}
+@media (max-width: 800px) and (orientation:landscape) {
+  .dapper-root-a {
+    width: 100px;
+  }
+}
+@media (max-width: 800px) and (orientation:portrait) {
+  .dapper-root-a {
+    width: 60px;
+  }
+}
+```
 
@@ -267,3 +378,32 @@ ## Nesting media queries/modes/pseudo
 ```
+The above generates the following CSS:
+```
+.dapper-root-a.dapper-root-small-b {
+  padding: 2px;
+}
+.dapper-root-a.dapper-root-medium-b {
+  padding: 4px;
+}
+.dapper-root-a.dapper-root-large-b {
+  padding: 8px;
+}
+.dapper-root-a:hover {
+  background-color: '#EEE';
+}
+.dapper-root-a:focus {
+  background-color: '#DDD';
+}
+@media (max-width: 500px) {
+  .dapper-root-a {
+    width: 100px;
+  }
+}
+@media (min-width: 500px) {
+  .dapper-root-a {
+    width: 400px;
+  }
+}
 
+```
+
 ## keyframes (CSS Animations)
@@ -290,3 +430,40 @@ Dappers keyframes function generates CSS animation names which can then be referenced in styles.
 ```
+The above generates the following CSS:
+```
+@keyframes dapper-anim-a {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.dapper-root-a {
+  animation: 5s dapper-anim-a linear;
+}
+```
 
+## paddingHorizontal, paddingVertical, marginHorizontal and marginVertical
+Dapper supports easy ways to add the same padding and margin on to the top and bottom or the left and right using paddingHorizontal and paddingVertical or the margin equivalents.
+
+```tsx
+import * as dapper from '@convoy/dapper';
+
+const STYLES = dapper.compile({
+  root: {
+    paddingHorizontal: 4,
+    paddingVertical: 8,
+  },
+});
+```
+The above generates the following CSS:
+```
+.dapper-root-a {
+  paddingLeft: 4px;
+  paddingRight: 4px;
+  paddingTop: 8px;
+  paddingBottom: 8px;
+}
+```
+
 ## renderStatic (arbitrary CSS)
@@ -308,2 +485,16 @@ Sometimes you need to add arbitrary CSS to a document, such as when you are working with a third party library that controls its portion of the DOM tree.
 ```
+The above generates the following CSS:
+```
+html, body {
+  background-color: #CCFFFF;
+}
+@media (max-width: 800px) {
+  html, body {
+    background-color: #FFCCFF;
+  }
+}
+.pac-container {
+  background-color: #EEE;
+}
+```
 
@@ -343,3 +534,3 @@ ## configure (Configuration settings)
 ## compute
-Dapper exposes a `compute` function which takes the output of `compile`, any functions that define the modes and an object that defines the current state to compute the modes with and returns the classnames of the various styles. This function is useful outside of React contexts and when rendering items in a list which have their own modes that aren't based directly on props or state. In React, we primarily use `reactTo`, which is a simple wrapper around `compute` that uses the component as the state to compute modes from.
+Dapper exposes a `compute` function which takes the output of `compile`, any functions that define the modes and an object that defines the current state to compute the modes with and returns the classnames of the various styles. This function is useful even outside of React contexts or when rendering items in a list which have their own modes that aren't based directly on props or state. In React, we primarily use `reactTo`, which is a simple wrapper around `compute` that uses the component as the state to compute modes from.
 
@@ -346,0 +537,0 @@ ```tsx

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

113640

increased by3.36%

Number of lines in readme file

569

increased by50.53%

No dependency changes