boxible - npm Package Compare versions

Comparing version 0.0.4 to 0.0.5

dist/box.d.ts

@@ -1,2 +0,2 @@
-import { GenericPropsI, Area, SizeT, ALIGN_MAP, ALIGN_CONTENT, BASIS, JUSTIFY, FLEX } from './styles';
+import { GenericPropsI, Area, Size, Side, ALIGN_MAP, ALIGN_CONTENT, BASIS, JUSTIFY, FLEX } from './styles';
 declare type directionT = 'column' | 'row';
@@ -23,3 +23,3 @@ interface FlexGrowShrinkI {
     justify?: keyof typeof JUSTIFY;
-    gap?: boolean | SizeT;
+    gap?: boolean | Size;
     height?: string | MinMaxI;
@@ -31,5 +31,5 @@ width?: string | MinMaxI;
     id?: string | number;
-    pad?: SizeT | Area;
+    pad?: Size | Area | Side;
 }
 export declare const Box: import("styled-components").StyledComponent<"div", any, BoxProps, never>;
 export {};

dist/index.js

@@ -89,7 +89,14 @@ var styled = require('styled-components');
 };
+const SIDES = ['top', 'right', 'left', 'bottom', 'horizontal', 'vertical'];
 const edgeStyle = (kind, data) => {
   if (typeof data === 'string') {
-    return {
-      [kind]: SIZES[data] || data
-    };
+    if (SIDES.includes(data)) {
+      data = {
+        [`${data}`]: SIZES.default
+      };
+    } else {
+      return {
+        [kind]: SIZES[data] || data
+      };
+    }
   }
@@ -96,0 +103,0 @@

dist/index.modern.js

@@ -88,7 +88,14 @@ import styled, { css } from 'styled-components';
 };
+const SIDES = ['top', 'right', 'left', 'bottom', 'horizontal', 'vertical'];
 const edgeStyle = (kind, data) => {
   if (typeof data === 'string') {
-    return {
-      [kind]: SIZES[data] || data
-    };
+    if (SIDES.includes(data)) {
+      data = {
+        [`${data}`]: SIZES.default
+      };
+    } else {
+      return {
+        [kind]: SIZES[data] || data
+      };
+    }
   }
@@ -95,0 +102,0 @@

dist/index.module.js

@@ -85,7 +85,14 @@ import styled, { css } from 'styled-components';
 };
+const SIDES = ['top', 'right', 'left', 'bottom', 'horizontal', 'vertical'];
 const edgeStyle = (kind, data) => {
   if (typeof data === 'string') {
-    return {
-      [kind]: SIZES[data] || data
-    };
+    if (SIDES.includes(data)) {
+      data = {
+        [`${data}`]: SIZES.default
+      };
+    } else {
+      return {
+        [kind]: SIZES[data] || data
+      };
+    }
   }
@@ -92,0 +99,0 @@

dist/index.umd.js

@@ -92,7 +92,14 @@ (function (global, factory) {
     };
+    const SIDES = ['top', 'right', 'left', 'bottom', 'horizontal', 'vertical'];
     const edgeStyle = (kind, data) => {
       if (typeof data === 'string') {
-        return {
-          [kind]: SIZES[data] || data
-        };
+        if (SIDES.includes(data)) {
+          data = {
+            [`${data}`]: SIZES.default
+          };
+        } else {
+          return {
+            [kind]: SIZES[data] || data
+          };
+        }
       }
@@ -99,0 +106,0 @@

dist/styles.d.ts

@@ -9,3 +9,3 @@ import { CSSObject, DefaultTheme, FlattenSimpleInterpolation } from 'styled-components';
 export declare type edgeKindT = "margin" | "border" | "padding";
-export declare type sizesT = keyof typeof SIZES;
+export declare type Size = keyof typeof SIZES;
 export declare const ALIGN_CONTENT: {
@@ -42,10 +42,10 @@ around: string;
 export interface Area {
-    horizontal?: sizesT | string;
-    vertical?: sizesT | string;
-    top?: sizesT | string;
-    bottom?: sizesT | string;
-    left?: sizesT | string;
-    right?: sizesT | string;
+    horizontal?: Size | string;
+    vertical?: Size | string;
+    top?: Size | string;
+    bottom?: Size | string;
+    left?: Size | string;
+    right?: Size | string;
 }
-export declare type AreaKey = keyof Area;
+export declare type Side = keyof Area;
 export declare const ALIGN_SELF_MAP: {
@@ -64,8 +64,7 @@ center: string;
 };
-export declare type SizeT = keyof typeof SIZES;
 export interface GenericPropsI {
     alignSelf?: keyof typeof ALIGN_SELF_MAP;
     gridArea?: string;
-    margin?: SizeT | Area;
-    padding?: SizeT | Area;
+    margin?: Size | Area | Side;
+    padding?: Size | Area | Side;
 }
@@ -80,3 +79,3 @@ export declare const genericStyles: (props: GenericPropsI & {
 export declare const overflowStyle: (overflowProp: string | overflowI) => FlattenSimpleInterpolation;
-export declare const edgeStyle: (kind: edgeKindT, data: string | sizesT | Area) => CSSObject;
+export declare const edgeStyle: (kind: edgeKindT, data: string | Size | Area) => CSSObject;
 export {};

package.json

 {
   "name": "boxible",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "Typescript React component to set flexbox properties on a element",
@@ -5,0 +5,0 @@ "repository": "https://github.com/nathanstitt/boxible",

src/box.ts

 import styled, { css } from 'styled-components'
 import {
-    edgeStyle, overflowStyle, genericStyles, GenericPropsI, Area, SizeT,
+    edgeStyle, overflowStyle, genericStyles, GenericPropsI, Area, Size, Side,
     SIZES, ALIGN_MAP, ALIGN_CONTENT, BASIS, JUSTIFY, FLEX,
@@ -126,3 +126,3 @@ } from './styles'
     justify?: keyof typeof JUSTIFY
-    gap?: boolean | SizeT
+    gap?: boolean | Size
     height?: string | MinMaxI
@@ -134,3 +134,3 @@ width?: string | MinMaxI
     id?: string | number
-    pad?: SizeT | Area
+    pad?: Size | Area | Side
 }
@@ -137,0 +137,0 @@

src/styles.ts

@@ -11,3 +11,3 @@ import { css, CSSObject, DefaultTheme, FlattenSimpleInterpolation } from 'styled-components'
 export type edgeKindT = "margin" | "border" | "padding"
-export type sizesT = keyof typeof SIZES
+export type Size = keyof typeof SIZES
 
@@ -50,11 +50,11 @@ export const  ALIGN_CONTENT = {
 export interface Area {
-    horizontal?: sizesT | string
-    vertical?: sizesT | string
-    top?: sizesT | string
-    bottom?: sizesT | string
-    left?: sizesT | string
-    right?: sizesT | string
+    horizontal?: Size | string
+    vertical?: Size | string
+    top?: Size | string
+    bottom?: Size | string
+    left?: Size | string
+    right?: Size | string
 }
 
-export type AreaKey = keyof Area
+export type Side = keyof Area
 
@@ -76,3 +76,2 @@ export const ALIGN_SELF_MAP = {
 
-export type SizeT = keyof typeof SIZES
 
@@ -82,4 +81,4 @@ export interface GenericPropsI {
     gridArea?: string
-    margin?: SizeT | Area
-    padding?: SizeT | Area
+    margin?: Size | Area | Side
+    padding?: Size | Area | Side
 }
@@ -121,8 +120,14 @@
 
+const SIDES = ['top', 'right', 'left', 'bottom', 'horizontal', 'vertical']
+
 export const edgeStyle = (
     kind: edgeKindT,
-    data: string | sizesT | Area,
+    data: string | Size | Area,
 ):CSSObject => {
     if (typeof data === 'string') {
-        return { [kind]: SIZES[data] || data }
+        if (SIDES.includes(data)) {
+            data = { [`${data}`]: SIZES.default }
+        } else {
+            return { [kind]: SIZES[data] || data }
+        }
     }
@@ -129,0 +134,0 @@ const styles: CSSObject = {}

No alert changes

Improved metrics

Total package byte prevSize

104614

2.48%

Lines of code

1357

2.34%

No dependency changes