Update common layout components

src/common/Base.tsx

@@ -1,4 +1,5 @@
 import { CSSProperties, DetailedHTMLProps, FC, HTMLAttributes, LegacyRef, useMemo } from 'react';
+import { ColorVariantType } from './types/ColorVariantType';
 import { OverflowType } from './types/OverflowType';
 import { PositionType } from './types/PositionType';
 
@@ -13,12 +14,13 @@ export interface BaseProps<T = HTMLElement> extends DetailedHTMLProps<HTMLAttrib
     overflow?: OverflowType;
     position?: PositionType;
     pointer?: boolean;
+    textColor?: ColorVariantType;
     classNames?: string[];
 }
 
 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, classNames = [], className = '', style = {}, ...rest } = 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 getClassNames = useMemo(() =>
     {
@@ -38,10 +40,12 @@ export const Base: FC<BaseProps<HTMLDivElement>> = props =>
 
         if(pointer) newClassNames.push('cursor-pointer');
 
+        if(textColor) newClassNames.push('text-' + textColor);
+
         if(classNames.length) newClassNames.push(...classNames);
 
         return newClassNames;
-    }, [ fit, grow, shrink, fullWidth, fullHeight, overflow, position, pointer, classNames ]);
+    }, [ fit, grow, shrink, fullWidth, fullHeight, overflow, position, pointer, textColor, classNames ]);
 
     const getClassName = useMemo(() =>
     {

src/common/Column.tsx

@@ -1,4 +1,5 @@
 import { FC, useMemo } from 'react';
+import { useGridContext } from './context/GridContext';
 import { Flex, FlexProps } from './Flex';
 import { ColumnSizesType } from './types/ColumnSizesType';
 
@@ -11,17 +12,25 @@ export interface ColumnProps extends FlexProps
 export const Column: FC<ColumnProps> = props =>
 {
     const { size = 0, column = true, gap = 2, classNames = [], ...rest } = props;
+    const { isCssGrid = false } = useGridContext();
 
     const getClassNames = useMemo(() =>
     {
         const newClassNames: string[] = [];
 
-        if(size) newClassNames.push('g-col-' + size);
+        if(size)
+        {
+            let colClassName = `col-${ size }`;
+
+            if(isCssGrid) colClassName = `g-${ colClassName }`;
+
+            newClassNames.push(colClassName);
+        }
 
         if(classNames.length) newClassNames.push(...classNames);
 
         return newClassNames;
-    }, [ size, classNames ]);
+    }, [ size, isCssGrid, classNames ]);
 
     return <Flex classNames={ getClassNames } column={ column } gap={ gap } { ...rest } />;
 }

src/common/Grid.tsx

@@ -1,5 +1,6 @@
 import { CSSProperties, FC, useMemo } from 'react';
 import { Base, BaseProps } from './Base';
+import { GridContextProvider } from './context/GridContext';
 import { SpacingType } from './types/SpacingType';
 
 export interface GridProps extends BaseProps<HTMLDivElement>
@@ -10,11 +11,12 @@ export interface GridProps extends BaseProps<HTMLDivElement>
     grow?: boolean;
     inline?: boolean;
     gap?: SpacingType;
+    maxContent?: boolean;
 }
 
 export const Grid: FC<GridProps> = props =>
 {
-    const { columnCount = 0, columnMinWidth = 40, columnMinHeight = 40, grow = false, inline = false, gap = 2, classNames = [], style = {}, ...rest } = props;
+    const { columnCount = 0, columnMinWidth = 40, columnMinHeight = 40, grow = false, inline = false, gap = 2, maxContent = false, classNames = [], style = {}, ...rest } = props;
 
     const getClassNames = useMemo(() =>
     {
@@ -48,10 +50,16 @@ export const Grid: FC<GridProps> = props =>
             newStyle.gridTemplateColumns = 'repeat(auto-fill, minmax(var(--nitro-grid-column-min-width, 45px), 1fr)';
         }
 
+        if(maxContent) newStyle.gridTemplateRows = 'max-content';
+
         if(Object.keys(style).length) newStyle = { ...newStyle, ...style };
 
         return newStyle;
-    }, [ columnCount, columnMinWidth, columnMinHeight, grow, style ]);
+    }, [ columnCount, columnMinWidth, columnMinHeight, grow, maxContent, style ]);
 
-    return <Base classNames={ getClassNames } style={ getStyle } { ...rest } />;
+    return (
+        <GridContextProvider value={ { isCssGrid: true } }>
+            <Base classNames={ getClassNames } style={ getStyle } { ...rest } />
+        </GridContextProvider>
+    );
 }

src/common/Text.tsx

@@ -9,15 +9,18 @@ export interface TextProps extends BaseProps<HTMLDivElement>
     variant?: ColorVariantType;
     fontWeight?: FontWeightType;
     fontSize?: FontSizeType;
+    bold?: boolean;
     underline?: boolean;
+    italics?: boolean;
     truncate?: boolean;
     center?: boolean;
     textEnd?: boolean;
+    small?: boolean;
 }
 
 export const Text: FC<TextProps> = props =>
 {
-    const { variant = 'black', fontWeight = null, fontSize = 0, underline = false, truncate = false, center = false, textEnd = false, ...rest } = 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 getClassNames = useMemo(() =>
     {
@@ -25,20 +28,26 @@ export const Text: FC<TextProps> = props =>
 
         if(variant) newClassNames.push('text-' + variant);
 
+        if(bold) newClassNames.push('fw-bold');
+
         if(fontWeight) newClassNames.push('fw-' + fontWeight);
 
         if(fontSize) newClassNames.push('fs-' + fontSize);
 
         if(underline) newClassNames.push('text-decoration-underline');
 
+        if(italics) newClassNames.push('fst-italic');
+
         if(truncate) newClassNames.push('text-truncate');
 
         if(center) newClassNames.push('text-center');
 
         if(textEnd) newClassNames.push('text-end');
 
+        if(small) newClassNames.push('small');
+
         return newClassNames;
-    }, [ variant, fontWeight, fontSize, underline, truncate, center, textEnd ]);
+    }, [ variant, fontWeight, fontSize, bold, underline, italics, truncate, center, textEnd, small ]);
 
     return <Base classNames={ getClassNames } { ...rest } />;
 }

src/common/context/GridContext.tsx

@@ -0,0 +1,17 @@
+import { createContext, FC, ProviderProps, useContext } from 'react';
+
+export interface IGridContext
+{
+    isCssGrid: boolean;
+}
+
+const GridContext = createContext<IGridContext>({
+    isCssGrid: false
+});
+
+export const GridContextProvider: FC<ProviderProps<IGridContext>> = props =>
+{
+    return <GridContext.Provider value={ props.value }>{ props.children }</GridContext.Provider>
+}
+
+export const useGridContext = () => useContext(GridContext);

src/common/types/ColorVariantType.ts

@@ -1 +1 @@
-export type ColorVariantType = 'primary' | 'success' | 'danger' | 'secondary' | 'link' | 'black' | 'white' | 'dark' | 'warning';
+export type ColorVariantType = 'primary' | 'success' | 'danger' | 'secondary' | 'link' | 'black' | 'white' | 'dark' | 'warning' | 'muted';