boxible - npm Package Compare versions

Comparing version 1.7.6 to 1.7.7

dist/box.d.ts

 /// <reference types="react" />
 import type { Property } from 'csstype';
-import { GenericProps, ScreenSizeNames, SIZES, ALIGN_MAP, ALIGN_CONTENT_MAP, BASIS, JUSTIFY_MAP, FLEX } from './styles';
+import { GenericProps, ScreenSizeNames, SIZES, ALIGN_MAP, ALIGN_SELF_MAP, ALIGN_CONTENT_MAP, BASIS, JUSTIFY_MAP, FLEX } from './styles';
 declare const DIRECTION_MAP: Record<string, string>;
@@ -21,5 +21,7 @@ interface FlexGrowShrinkI {
     align?: keyof typeof ALIGN_MAP | Partial<Record<ScreenSizeNames, keyof typeof ALIGN_MAP>>;
+    justify?: keyof typeof JUSTIFY_MAP | Partial<Record<ScreenSizeNames, keyof typeof JUSTIFY_MAP>>;
+    alignSelf?: keyof typeof ALIGN_SELF_MAP | Partial<Record<ScreenSizeNames, keyof typeof ALIGN_SELF_MAP>>;
+    justifySelf?: keyof typeof ALIGN_SELF_MAP | Partial<Record<ScreenSizeNames, keyof typeof ALIGN_SELF_MAP>>;
     alignContent?: keyof typeof ALIGN_CONTENT_MAP | Partial<Record<ScreenSizeNames, keyof typeof ALIGN_CONTENT_MAP>>;
     direction?: keyof typeof DIRECTION_MAP | Partial<Record<ScreenSizeNames, keyof typeof DIRECTION_MAP>>;
-    justify?: keyof typeof JUSTIFY_MAP | Partial<Record<ScreenSizeNames, keyof typeof JUSTIFY_MAP>>;
     flex?: FlexGrowT;
@@ -34,3 +36,5 @@ basis?: string | number | keyof typeof BASIS;
     className?: string;
+    gridArea?: string;
 }
+export declare const boxiblePropNames: string[];
 export declare function extractBoxibleProps<T extends object = {}>(props: T & BoxProps): [Partial<BoxProps>, Partial<T>];
@@ -37,0 +41,0 @@ declare const buildBox: () => import("@emotion/styled").StyledComponent<{

dist/boxible.js

@@ -60,3 +60,6 @@ import styled from '@emotion/styled';
   start: 'flex-start',
-  stretch: 'stretch'
+  stretch: 'stretch',
+  left: 'left',
+  right: 'right',
+  baseline: 'baseline'
 };
@@ -73,10 +76,2 @@ const ALIGN_MAP = {
 
-  if (props.alignSelf) {
-    styles['alignSelf'] = ALIGN_SELF_MAP[props.alignSelf];
-  }
-
-  if (props.gridArea) {
-    styles['gridArea'] = props.gridArea;
-  }
-
   if (props.margin) {
@@ -261,4 +256,4 @@ Object.assign(styles, edgeStyle('margin', props.margin));
 };
-const OWN_PROPS = ['basis', 'align', 'alignContent', 'direction', 'overflowProp', 'flex', 'justify', 'as', 'centered', 'gap', 'height', 'width', 'fill', 'wrap', 'margin', 'pad', 'padding', 'alignSelf', 'gridArea'];
-const CONSUMED_PROPS = OWN_PROPS.concat(['className']);
+const boxiblePropNames = ['basis', 'align', 'alignContent', 'direction', 'overflowProp', 'flex', 'justify', 'as', 'centered', 'gap', 'height', 'width', 'fill', 'wrap', 'margin', 'pad', 'padding', 'alignSelf', 'gridArea'];
+const CONSUMED_PROPS = boxiblePropNames.concat(['className']);
 function extractBoxibleProps(props) {
@@ -280,3 +275,3 @@ const boxProps = {};
 const buildBox = () => styled('div', {
-  shouldForwardProp: prop => !OWN_PROPS.includes(prop)
+  shouldForwardProp: prop => !boxiblePropNames.includes(prop)
 })`
@@ -293,2 +288,8 @@ display: flex;
     ${({
+  alignSelf
+}) => alignSelf && responsiveStyle(alignSelf, 'align-self', ALIGN_SELF_MAP)}
+    ${({
+  justifySelf
+}) => justifySelf && responsiveStyle(justifySelf, 'justify-self', ALIGN_SELF_MAP)}
+    ${({
   alignContent
@@ -326,2 +327,5 @@ }) => alignContent && responsiveStyle(alignContent, 'align-content', ALIGN_CONTENT_MAP)}
 }) => wrap && wrapStyle(wrap)}
+    ${({
+  gridArea
+}) => gridArea ? `grid-area: ${gridArea};` : ''}
     ${props => genericStyles(props)}
@@ -334,3 +338,3 @@ `;
 
-export { ALIGN_CONTENT_MAP, ALIGN_MAP, ALIGN_SELF_MAP, BASIS, Box, FLEX, JUSTIFY_MAP, SCREEN_SIZES, SIZES, edgeStyle, extractBoxibleProps, genericStyles, overflowStyle };
+export { ALIGN_CONTENT_MAP, ALIGN_MAP, ALIGN_SELF_MAP, BASIS, Box, FLEX, JUSTIFY_MAP, SCREEN_SIZES, SIZES, boxiblePropNames, edgeStyle, extractBoxibleProps, genericStyles, overflowStyle };
 //# sourceMappingURL=boxible.js.map

dist/boxible.modern.js

@@ -77,3 +77,6 @@ import styled from '@emotion/styled';
   start: 'flex-start',
-  stretch: 'stretch'
+  stretch: 'stretch',
+  left: 'left',
+  right: 'right',
+  baseline: 'baseline'
 };
@@ -90,10 +93,2 @@ const ALIGN_MAP = {
 
-  if (props.alignSelf) {
-    styles['alignSelf'] = ALIGN_SELF_MAP[props.alignSelf];
-  }
-
-  if (props.gridArea) {
-    styles['gridArea'] = props.gridArea;
-  }
-
   if (props.margin) {
@@ -282,4 +277,4 @@ Object.assign(styles, edgeStyle('margin', props.margin));
 
-const OWN_PROPS = ['basis', 'align', 'alignContent', 'direction', 'overflowProp', 'flex', 'justify', 'as', 'centered', 'gap', 'height', 'width', 'fill', 'wrap', 'margin', 'pad', 'padding', 'alignSelf', 'gridArea'];
-const CONSUMED_PROPS = OWN_PROPS.concat(['className']);
+const boxiblePropNames = ['basis', 'align', 'alignContent', 'direction', 'overflowProp', 'flex', 'justify', 'as', 'centered', 'gap', 'height', 'width', 'fill', 'wrap', 'margin', 'pad', 'padding', 'alignSelf', 'gridArea'];
+const CONSUMED_PROPS = boxiblePropNames.concat(['className']);
 function extractBoxibleProps(props) {
@@ -301,3 +296,3 @@ const boxProps = {};
 const buildBox = () => styled('div', {
-  shouldForwardProp: prop => !OWN_PROPS.includes(prop)
+  shouldForwardProp: prop => !boxiblePropNames.includes(prop)
 })(_t || (_t = _`
@@ -321,2 +316,5 @@ display: flex;
     ${0}
+    ${0}
+    ${0}
+    ${0}
 `), ({
@@ -327,2 +325,6 @@ centered
 }) => align && responsiveStyle(align, 'align-items', ALIGN_MAP), ({
+  alignSelf
+}) => alignSelf && responsiveStyle(alignSelf, 'align-self', ALIGN_SELF_MAP), ({
+  justifySelf
+}) => justifySelf && responsiveStyle(justifySelf, 'justify-self', ALIGN_SELF_MAP), ({
   alignContent
@@ -349,3 +351,5 @@ }) => alignContent && responsiveStyle(alignContent, 'align-content', ALIGN_CONTENT_MAP), ({
   wrap
-}) => wrap && wrapStyle(wrap), props => genericStyles(props));
+}) => wrap && wrapStyle(wrap), ({
+  gridArea
+}) => gridArea ? `grid-area: ${gridArea};` : '', props => genericStyles(props));
 
@@ -356,3 +360,3 @@ const box = buildBox();
 
-export { ALIGN_CONTENT_MAP, ALIGN_MAP, ALIGN_SELF_MAP, BASIS, Box, FLEX, JUSTIFY_MAP, SCREEN_SIZES, SIZES, edgeStyle, extractBoxibleProps, genericStyles, overflowStyle };
+export { ALIGN_CONTENT_MAP, ALIGN_MAP, ALIGN_SELF_MAP, BASIS, Box, FLEX, JUSTIFY_MAP, SCREEN_SIZES, SIZES, boxiblePropNames, edgeStyle, extractBoxibleProps, genericStyles, overflowStyle };
 //# sourceMappingURL=boxible.modern.js.map

dist/boxible.umd.js

@@ -67,3 +67,6 @@ (function (global, factory) {
       start: 'flex-start',
-      stretch: 'stretch'
+      stretch: 'stretch',
+      left: 'left',
+      right: 'right',
+      baseline: 'baseline'
     };
@@ -80,10 +83,2 @@ const ALIGN_MAP = {
 
-      if (props.alignSelf) {
-        styles['alignSelf'] = ALIGN_SELF_MAP[props.alignSelf];
-      }
-
-      if (props.gridArea) {
-        styles['gridArea'] = props.gridArea;
-      }
-
       if (props.margin) {
@@ -268,4 +263,4 @@ Object.assign(styles, edgeStyle('margin', props.margin));
     };
-    const OWN_PROPS = ['basis', 'align', 'alignContent', 'direction', 'overflowProp', 'flex', 'justify', 'as', 'centered', 'gap', 'height', 'width', 'fill', 'wrap', 'margin', 'pad', 'padding', 'alignSelf', 'gridArea'];
-    const CONSUMED_PROPS = OWN_PROPS.concat(['className']);
+    const boxiblePropNames = ['basis', 'align', 'alignContent', 'direction', 'overflowProp', 'flex', 'justify', 'as', 'centered', 'gap', 'height', 'width', 'fill', 'wrap', 'margin', 'pad', 'padding', 'alignSelf', 'gridArea'];
+    const CONSUMED_PROPS = boxiblePropNames.concat(['className']);
     function extractBoxibleProps(props) {
@@ -287,3 +282,3 @@ const boxProps = {};
     const buildBox = () => styled__default["default"]('div', {
-      shouldForwardProp: prop => !OWN_PROPS.includes(prop)
+      shouldForwardProp: prop => !boxiblePropNames.includes(prop)
     })`
@@ -300,2 +295,8 @@ display: flex;
     ${({
+  alignSelf
+}) => alignSelf && responsiveStyle(alignSelf, 'align-self', ALIGN_SELF_MAP)}
+    ${({
+  justifySelf
+}) => justifySelf && responsiveStyle(justifySelf, 'justify-self', ALIGN_SELF_MAP)}
+    ${({
   alignContent
@@ -333,2 +334,5 @@ }) => alignContent && responsiveStyle(alignContent, 'align-content', ALIGN_CONTENT_MAP)}
 }) => wrap && wrapStyle(wrap)}
+    ${({
+  gridArea
+}) => gridArea ? `grid-area: ${gridArea};` : ''}
     ${props => genericStyles(props)}
@@ -350,2 +354,3 @@ `;
     exports.SIZES = SIZES;
+    exports.boxiblePropNames = boxiblePropNames;
     exports.edgeStyle = edgeStyle;
@@ -352,0 +357,0 @@ exports.extractBoxibleProps = extractBoxibleProps;

dist/styles.d.ts

@@ -71,2 +71,5 @@ import { CSSObject } from '@emotion/react';
     stretch: string;
+    left: string;
+    right: string;
+    baseline: string;
 };
@@ -82,4 +85,2 @@ export declare const ALIGN_MAP: {
 export interface GenericProps {
-    alignSelf?: keyof typeof ALIGN_SELF_MAP;
-    gridArea?: string;
     margin?: number | string | Size | Area | Side;
@@ -86,0 +87,0 @@ padding?: number | string | Size | Area | Side;

package.json

 {
   "name": "boxible",
-  "version": "1.7.6",
+  "version": "1.7.7",
   "type": "module",
@@ -5,0 +5,0 @@ "description": "Typescript React component to set flexbox properties on a element",

src/box.ts

@@ -7,3 +7,3 @@ import styled, { CSSObject } from '@emotion/styled'
     GenericProps, ScreenSizeNames,
-    SIZES, SCREEN_SIZES, ALIGN_MAP, ALIGN_CONTENT_MAP, BASIS, JUSTIFY_MAP, FLEX,
+    SIZES, SCREEN_SIZES, ALIGN_MAP, ALIGN_SELF_MAP, ALIGN_CONTENT_MAP, BASIS, JUSTIFY_MAP, FLEX,
 } from './styles'
@@ -142,5 +142,7 @@
     align?: keyof typeof ALIGN_MAP | Partial<Record<ScreenSizeNames, keyof typeof ALIGN_MAP>>,
+    justify?: keyof typeof JUSTIFY_MAP | Partial<Record<ScreenSizeNames, keyof typeof JUSTIFY_MAP>>,
+    alignSelf?: keyof typeof ALIGN_SELF_MAP | Partial<Record<ScreenSizeNames, keyof typeof ALIGN_SELF_MAP>>,
+    justifySelf?: keyof typeof ALIGN_SELF_MAP | Partial<Record<ScreenSizeNames, keyof typeof ALIGN_SELF_MAP>>,
     alignContent?: keyof typeof ALIGN_CONTENT_MAP | Partial<Record<ScreenSizeNames, keyof typeof ALIGN_CONTENT_MAP>>,
     direction?: keyof typeof DIRECTION_MAP | Partial<Record<ScreenSizeNames, keyof typeof DIRECTION_MAP>>,
-    justify?: keyof typeof JUSTIFY_MAP | Partial<Record<ScreenSizeNames, keyof typeof JUSTIFY_MAP>>,
     flex?: FlexGrowT
@@ -155,5 +157,6 @@ basis?: string | number | keyof typeof BASIS
     className?: string
+    gridArea?: string
 }
 
-const OWN_PROPS = [
+export const boxiblePropNames = [
     'basis', 'align', 'alignContent', 'direction', 'overflowProp', 'flex', 'justify', 'as', 'centered',
@@ -163,3 +166,3 @@ 'gap', 'height', 'width', 'fill', 'wrap', 'margin', 'pad', 'padding', 'alignSelf', 'gridArea'
 
-const CONSUMED_PROPS = OWN_PROPS.concat([
+const CONSUMED_PROPS = boxiblePropNames.concat([
     'className'
@@ -183,3 +186,3 @@ ])
 const buildBox = () => styled('div', {
-    shouldForwardProp: (prop) => !OWN_PROPS.includes(prop as string)
+    shouldForwardProp: (prop) => !boxiblePropNames.includes(prop as string)
 }) <BoxProps>`
@@ -191,2 +194,4 @@ display: flex;
     ${({ align }) => align && responsiveStyle(align, 'align-items', ALIGN_MAP)}
+    ${({ alignSelf }) => alignSelf && responsiveStyle(alignSelf, 'align-self', ALIGN_SELF_MAP)}
+    ${({ justifySelf }) => justifySelf && responsiveStyle(justifySelf, 'justify-self', ALIGN_SELF_MAP)}
     ${({ alignContent }) => alignContent && responsiveStyle(alignContent, 'align-content', ALIGN_CONTENT_MAP)}
@@ -203,2 +208,3 @@ ${({ direction }) => direction && responsiveStyle(direction, '', DIRECTION_MAP)}
     ${({ wrap }) => wrap && wrapStyle(wrap)}
+    ${({ gridArea }) => gridArea ? `grid-area: ${gridArea};` : ''}
     ${props => genericStyles(props)}
@@ -205,0 +211,0 @@ `

src/styles.ts

@@ -83,4 +83,8 @@ import { CSSObject } from '@emotion/react'
     stretch: 'stretch',
+    left: 'left',
+    right: 'right',
+    baseline: 'baseline',
 }
 
+
 export const ALIGN_MAP = {
@@ -93,7 +97,6 @@ baseline: 'baseline',
 }
+
 export type AlignNames = keyof typeof ALIGN_MAP
 
 export interface GenericProps {
-    alignSelf?: keyof typeof ALIGN_SELF_MAP
-    gridArea?: string
     margin?: number | string | Size | Area | Side
@@ -105,8 +108,2 @@ padding?: number | string | Size | Area | Side
     const styles: CSSObject = {}
-    if (props.alignSelf) {
-        styles['alignSelf'] = ALIGN_SELF_MAP[props.alignSelf]
-    }
-    if (props.gridArea) {
-        styles['gridArea'] = props.gridArea
-    }
     if (props.margin) {
@@ -113,0 +110,0 @@ Object.assign(styles, edgeStyle('margin', props.margin))

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

312316

increased by1.35%

Lines of code

3246

increased by1%

No dependency changes