fixing missing align and justify props on Code0Components

Author: nicosammito

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@code0-tech/pictor",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "description": "A simple template for a custom React component library",
   "scripts": {
     "dev": "npm run storybook:dev",

package.json

@@ -25,36 +25,39 @@ export interface Code0ComponentProps {
     pb?: StyleProp<number | `${number}`>
     pl?: StyleProp<number | `${number}`>
     pr?: StyleProp<number | `${number}`>
-    bg?: React.CSSProperties['backgroundColor'];
-    c?: React.CSSProperties['color'];
-    opacity?: React.CSSProperties['opacity'];
-    ff?: StyleProp<'mono' | 'text' | 'heading' | (string & {})>;
-    fz?: StyleProp<Code0FontSizes | number | `${number}`>;
-    fw?: StyleProp<React.CSSProperties['fontWeight']>;
-    lts?: StyleProp<React.CSSProperties['letterSpacing']>;
-    ta?: StyleProp<React.CSSProperties['textAlign']>;
-    lh?: StyleProp<number | (string & {})>;
-    fs?: StyleProp<React.CSSProperties['fontStyle']>;
-    tt?: StyleProp<React.CSSProperties['textTransform']>;
-    td?: StyleProp<React.CSSProperties['textDecoration']>;
-    w?: StyleProp<React.CSSProperties['width']>;
-    miw?: StyleProp<React.CSSProperties['minWidth']>;
-    maw?: StyleProp<React.CSSProperties['maxWidth']>;
-    h?: StyleProp<React.CSSProperties['height']>;
-    mih?: StyleProp<React.CSSProperties['minHeight']>;
-    mah?: StyleProp<React.CSSProperties['maxHeight']>;
-    bgsz?: StyleProp<React.CSSProperties['backgroundSize']>;
-    bgp?: StyleProp<React.CSSProperties['backgroundPosition']>;
-    bgr?: StyleProp<React.CSSProperties['backgroundRepeat']>;
-    bga?: StyleProp<React.CSSProperties['backgroundAttachment']>;
-    pos?: StyleProp<React.CSSProperties['position']>;
-    top?: StyleProp<React.CSSProperties['top']>;
-    left?: StyleProp<React.CSSProperties['left']>;
-    bottom?: StyleProp<React.CSSProperties['bottom']>;
-    right?: StyleProp<React.CSSProperties['right']>;
-    inset?: StyleProp<React.CSSProperties['inset']>;
-    display?: StyleProp<React.CSSProperties['display']>;
-    flex?: StyleProp<React.CSSProperties['flex']>;
+    bg?: React.CSSProperties['backgroundColor']
+    c?: React.CSSProperties['color']
+    opacity?: React.CSSProperties['opacity']
+    ff?: StyleProp<'mono' | 'text' | 'heading' | (string & {})>
+    fz?: StyleProp<Code0FontSizes | number | `${number}`>
+    fw?: StyleProp<React.CSSProperties['fontWeight']>
+    lts?: StyleProp<React.CSSProperties['letterSpacing']>
+    ta?: StyleProp<React.CSSProperties['textAlign']>
+    lh?: StyleProp<number | (string & {})>
+    fs?: StyleProp<React.CSSProperties['fontStyle']>
+    tt?: StyleProp<React.CSSProperties['textTransform']>
+    td?: StyleProp<React.CSSProperties['textDecoration']>
+    w?: StyleProp<React.CSSProperties['width']>
+    miw?: StyleProp<React.CSSProperties['minWidth']>
+    maw?: StyleProp<React.CSSProperties['maxWidth']>
+    h?: StyleProp<React.CSSProperties['height']>
+    mih?: StyleProp<React.CSSProperties['minHeight']>
+    mah?: StyleProp<React.CSSProperties['maxHeight']>
+    bgsz?: StyleProp<React.CSSProperties['backgroundSize']>
+    bgp?: StyleProp<React.CSSProperties['backgroundPosition']>
+    bgr?: StyleProp<React.CSSProperties['backgroundRepeat']>
+    bga?: StyleProp<React.CSSProperties['backgroundAttachment']>
+    pos?: StyleProp<React.CSSProperties['position']>
+    top?: StyleProp<React.CSSProperties['top']>
+    left?: StyleProp<React.CSSProperties['left']>
+    bottom?: StyleProp<React.CSSProperties['bottom']>
+    right?: StyleProp<React.CSSProperties['right']>
+    inset?: StyleProp<React.CSSProperties['inset']>
+    display?: StyleProp<React.CSSProperties['display']>
+    flex?: StyleProp<React.CSSProperties['flex']>
+    align?: StyleProp<React.CSSProperties['alignItems']>
+    justify?: StyleProp<React.CSSProperties['justifyContent']>
+    tf?: StyleProp<React.CSSProperties['transform']>
 }
 
 export interface Code0Component<T> extends Code0ComponentProps, HTMLProps<T> {

src/utils/types.ts

@@ -71,14 +71,17 @@ const createStyle = (styles: Code0Component<any>): CSSProperties => ({
     ...(styles.right ? {right: styles.right} : {}),
     ...(styles.display ? {display: styles.display} : {}),
     ...(styles.flex ? {flex: styles.flex} : {}),
+    ...(styles.align ? {alignItems: styles.align} : {}),
+    ...(styles.justify ? {justifyContent: styles.justify} : {}),
+    ...(styles.tf ? {transform: styles.tf} : {}),
 
 })
 
 export const mergeCode0Props = <T extends HTMLElement>(cn: string, rest: Code0Component<T>): HTMLProps<T> => {
 
     const style = createStyle(rest)
     const newProps: Code0Component<T> = rest;
-    const keys: (keyof Code0ComponentProps)[] = ["m", "my", "mx", "mt", "mb", "ml", "mr", "p", "py", "px", "pt", "pb", "pl", "pr", "bg", "c", "opacity", "ff", "fz", "fw", "lts", "ta", "lh", "fs", "tt", "td", "w", "miw", "maw", "h", "mih", "mah", "bgsz", "bgp", "bgr", "bga", "pos", "top", "left", "bottom", "right", "inset", "display", "flex"]
+    const keys: (keyof Code0ComponentProps)[] = ["m", "my", "mx", "mt", "mb", "ml", "mr", "p", "py", "px", "pt", "pb", "pl", "pr", "bg", "c", "opacity", "ff", "fz", "fw", "lts", "ta", "lh", "fs", "tt", "td", "w", "miw", "maw", "h", "mih", "mah", "bgsz", "bgp", "bgr", "bga", "pos", "top", "left", "bottom", "right", "inset", "display", "flex", "align", "justify", "tf"]
 
     keys.forEach(key => {
         delete newProps[key]