Update common components

src/common/Base.tsx

@@ -1,5 +1,5 @@
 import { CSSProperties, DetailedHTMLProps, FC, HTMLAttributes, LegacyRef, useMemo } from 'react';
-import { ColorVariantType, OverflowType, PositionType } from './types';
+import { ColorVariantType, FloatType, OverflowType, PositionType } from './types';
 
 export interface BaseProps<T = HTMLElement> extends DetailedHTMLProps<HTMLAttributes<T>, T>
 {
@@ -11,6 +11,7 @@ export interface BaseProps<T = HTMLElement> extends DetailedHTMLProps<HTMLAttrib
     fullHeight?: boolean;
     overflow?: OverflowType;
     position?: PositionType;
+    float?: FloatType;
     pointer?: boolean;
     textColor?: ColorVariantType;
     classNames?: string[];
@@ -18,7 +19,7 @@ export interface BaseProps<T = HTMLElement> extends DetailedHTMLProps<HTMLAttrib
 
 export const Base: FC<BaseProps<HTMLDivElement>> = props =>
 {
-    const { ref = null, innerRef = null, fit = false, grow = false, shrink = false, fullWidth = false, fullHeight = false, overflow = null, position = null, pointer = false, textColor = null, classNames = [], className = '', style = {}, ...rest } = props;
+    const { ref = null, innerRef = null, fit = false, grow = false, shrink = false, fullWidth = false, fullHeight = false, overflow = null, position = null, float = null, pointer = false, textColor = null, classNames = [], className = '', style = {}, ...rest } = props;
 
     const getClassNames = useMemo(() =>
     {
@@ -36,6 +37,8 @@ export const Base: FC<BaseProps<HTMLDivElement>> = props =>
 
         if(position) newClassNames.push('position-' + position);
 
+        if(float) newClassNames.push('float-' + float);
+
         if(pointer) newClassNames.push('cursor-pointer');
 
         if(textColor) newClassNames.push('text-' + textColor);
@@ -43,7 +46,7 @@ export const Base: FC<BaseProps<HTMLDivElement>> = props =>
         if(classNames.length) newClassNames.push(...classNames);
 
         return newClassNames;
-    }, [ fit, grow, shrink, fullWidth, fullHeight, overflow, position, pointer, textColor, classNames ]);
+    }, [ fit, grow, shrink, fullWidth, fullHeight, overflow, position, float, pointer, textColor, classNames ]);
 
     const getClassName = useMemo(() =>
     {

src/common/Grid.tsx

@@ -2,7 +2,7 @@ import { FC, useMemo } from 'react';
 import { CSSProperties } from 'styled-components';
 import { Base, BaseProps } from './Base';
 import { GridContextProvider } from './GridContext';
-import { SpacingType } from './types';
+import { AlignItemType, AlignSelfType, JustifyContentType, SpacingType } from './types';
 
 export interface GridProps extends BaseProps<HTMLDivElement>
 {
@@ -10,11 +10,15 @@ export interface GridProps extends BaseProps<HTMLDivElement>
     gap?: SpacingType;
     maxContent?: boolean;
     columnCount?: number;
+    center?: boolean;
+    alignSelf?: AlignSelfType;
+    alignItems?: AlignItemType;
+    justifyContent?: JustifyContentType;
 }
 
 export const Grid: FC<GridProps> = props =>
 {
-    const { inline = false, gap = 2, maxContent = false, columnCount = 0, fullHeight = true, classNames = [], style = {}, ...rest } = props;
+    const { inline = false, gap = 2, maxContent = false, columnCount = 0, center = false, alignSelf = null, alignItems = null, justifyContent = null, fullHeight = true, classNames = [], style = {}, ...rest } = props;
 
     const getClassNames = useMemo(() =>
     {
@@ -28,10 +32,18 @@ export const Grid: FC<GridProps> = props =>
 
         if(maxContent) newClassNames.push('flex-basis-max-content');
 
+        if(alignSelf) newClassNames.push('align-self-' + alignSelf);
+
+        if(alignItems) newClassNames.push('align-items-' + alignItems);
+
+        if(justifyContent) newClassNames.push('justify-content-' + justifyContent);
+
+        if(!alignItems && !justifyContent && center) newClassNames.push('align-items-center', 'justify-content-center');
+
         if(classNames.length) newClassNames.push(...classNames);
 
         return newClassNames;
-    }, [ inline, gap, maxContent, classNames ]);
+    }, [ inline, gap, maxContent, alignSelf, alignItems, justifyContent, center, classNames ]);
 
     const getStyle = useMemo(() =>
     {

src/common/Text.tsx

@@ -1,12 +1,13 @@
 import { FC, useMemo } from 'react';
 import { Base, BaseProps } from './Base';
-import { ColorVariantType, FontSizeType, FontWeightType } from './types';
+import { ColorVariantType, FontSizeType, FontWeightType, TextAlignType } from './types';
 
 export interface TextProps extends BaseProps<HTMLDivElement>
 {
     variant?: ColorVariantType;
     fontWeight?: FontWeightType;
     fontSize?: FontSizeType;
+    align?: TextAlignType;
     bold?: boolean;
     underline?: boolean;
     italics?: boolean;
@@ -14,11 +15,13 @@ export interface TextProps extends BaseProps<HTMLDivElement>
     center?: boolean;
     textEnd?: boolean;
     small?: boolean;
+    wrap?: boolean;
+    textBreak?: boolean;
 }
 
 export const Text: FC<TextProps> = props =>
 {
-    const { variant = 'black', fontWeight = null, fontSize = 0, bold = false, underline = false, italics = false, truncate = false, center = false, textEnd = false, small = false, ...rest } = props;
+    const { variant = 'black', fontWeight = null, fontSize = 0, align = null, bold = false, underline = false, italics = false, truncate = false, center = false, textEnd = false, small = false, wrap = false, textBreak = false, ...rest } = props;
 
     const getClassNames = useMemo(() =>
     {
@@ -32,6 +35,8 @@ export const Text: FC<TextProps> = props =>
 
         if(fontSize) newClassNames.push('fs-' + fontSize);
 
+        if(align) newClassNames.push('text-' + align);
+
         if(underline) newClassNames.push('text-decoration-underline');
 
         if(italics) newClassNames.push('fst-italic');
@@ -44,8 +49,12 @@ export const Text: FC<TextProps> = props =>
 
         if(small) newClassNames.push('small');
 
+        if(wrap) newClassNames.push('text-wrap');
+
+        if(textBreak) newClassNames.push('text-break');
+
         return newClassNames;
-    }, [ variant, fontWeight, fontSize, bold, underline, italics, truncate, center, textEnd, small ]);
+    }, [ variant, fontWeight, fontSize, align, bold, underline, italics, truncate, center, textEnd, small, wrap, textBreak ]);
 
     return <Base classNames={ getClassNames } { ...rest } />;
 }

src/common/types/FloatType.ts

@@ -0,0 +1 @@
+export type FloatType = 'start' | 'end' | 'none';

src/common/types/FontSizeType.ts

@@ -1 +1 @@
-export type FontSizeType = 1 | 2 | 3 | 4 | 5;
+export type FontSizeType = 1 | 2 | 3 | 4 | 5 | 6;

src/common/types/TextAlignType.ts

@@ -0,0 +1 @@
+export type TextAlignType = 'start' | 'center' | 'end';

src/common/types/index.ts

@@ -3,9 +3,11 @@ export * from './AlignSelfType';
 export * from './ButtonSizeType';
 export * from './ColorVariantType';
 export * from './ColumnSizesType';
+export * from './FloatType';
 export * from './FontSizeType';
 export * from './FontWeightType';
 export * from './JustifyContentType';
 export * from './OverflowType';
 export * from './PositionType';
 export * from './SpacingType';
+export * from './TextAlignType';