From c1f73bebd031f719846db64466d1f63a96bd4f04 Mon Sep 17 00:00:00 2001
From: Bill <billsonnn@live.com>
Date: Fri, 24 Sep 2021 01:38:23 -0400
Subject: [PATCH] Add layout components

---
 src/assets/styles/bootstrap/_utilities.scss   |  8 +++
 src/assets/styles/grid.scss                   | 44 ------------
 src/assets/styles/index.scss                  |  1 -
 src/assets/styles/scrollbars.scss             | 49 ++++++++++---
 src/layout/card/NitroCardView.scss            | 11 +--
 .../card/content/NitroCardContentView.tsx     |  2 +-
 src/layout/card/grid/NitroCardGridView.scss   | 71 +------------------
 src/layout/card/grid/NitroCardGridView.tsx    |  4 +-
 src/layout/common/NitroLayoutColumns.type.ts  |  1 +
 src/layout/common/NitroLayoutOverflow.type.ts |  1 +
 src/layout/common/NitroLayoutPosition.type.ts |  1 +
 src/layout/common/NitroLayoutSpacing.type.ts  |  1 +
 src/layout/common/index.ts                    |  4 ++
 .../flex-column/NitroLayoutFlexColumn.tsx     | 28 ++++++++
 .../NitroLayoutFlexColumn.types.ts            |  9 +++
 src/layout/grid/NitroLayoutGrid.tsx           | 24 +++++++
 src/layout/grid/NitroLayoutGrid.types.ts      |  7 ++
 .../grid/column/NitroLayoutGridColumn.tsx     | 19 +++++
 .../column/NitroLayoutGridColumn.types.ts     |  8 +++
 19 files changed, 163 insertions(+), 130 deletions(-)
 delete mode 100644 src/assets/styles/grid.scss
 create mode 100644 src/layout/common/NitroLayoutColumns.type.ts
 create mode 100644 src/layout/common/NitroLayoutOverflow.type.ts
 create mode 100644 src/layout/common/NitroLayoutPosition.type.ts
 create mode 100644 src/layout/common/NitroLayoutSpacing.type.ts
 create mode 100644 src/layout/common/index.ts
 create mode 100644 src/layout/flex-column/NitroLayoutFlexColumn.tsx
 create mode 100644 src/layout/flex-column/NitroLayoutFlexColumn.types.ts
 create mode 100644 src/layout/grid/NitroLayoutGrid.tsx
 create mode 100644 src/layout/grid/NitroLayoutGrid.types.ts
 create mode 100644 src/layout/grid/column/NitroLayoutGridColumn.tsx
 create mode 100644 src/layout/grid/column/NitroLayoutGridColumn.types.ts

diff --git a/src/assets/styles/bootstrap/_utilities.scss b/src/assets/styles/bootstrap/_utilities.scss
index 960d6f1a..7c6c7231 100644
--- a/src/assets/styles/bootstrap/_utilities.scss
+++ b/src/assets/styles/bootstrap/_utilities.scss
@@ -42,6 +42,14 @@ $utilities: map-merge(
       property: overflow,
       values: auto hidden visible scroll,
     ),
+    "overflow-x": (
+      property: overflow-x,
+      values: auto hidden visible scroll,
+    ),
+    "overflow-y": (
+      property: overflow-y,
+      values: auto hidden visible scroll,
+    ),
     // scss-docs-end utils-overflow
     // scss-docs-start utils-display
     "display": (
diff --git a/src/assets/styles/grid.scss b/src/assets/styles/grid.scss
deleted file mode 100644
index 3a23cb69..00000000
--- a/src/assets/styles/grid.scss
+++ /dev/null
@@ -1,44 +0,0 @@
-$grid-options: (
-    "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"
-);
-
-.grid-items {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    justify-content: space-between;
-    align-content: flex-start;
-    width: 100%;
-    margin-top: -3px;
-    overflow: hidden;
-
-    @each $option in $grid-options {
-        &.grid-#{$option} {
-            .grid-item {
-                width: calc(1 / #{$option} * 100% - (1 - 1 / #{$option}) * 3px);
-
-                &:nth-child(#{$option}n) {
-                    margin-right: 0;
-                }
-            }
-        }
-    }
-}
-
-.row-grid {
-    margin: 0 !important;
-    
-    .col {
-        padding: 0 !important;
-    }
-}
-
-@each $option in $grid-options {
-    .row-grid {
-        &.row-cols-#{$option} {
-            .col:nth-child(#{$option}n) {
-                padding-left: 10px !important;
-            }
-        }
-    }
-}
diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss
index 6e6aa7aa..ee7ae10f 100644
--- a/src/assets/styles/index.scss
+++ b/src/assets/styles/index.scss
@@ -7,7 +7,6 @@
 @import '../node_modules/animate.css/animate.min.css';
 @import './scrollbars';
 @import './slider';
-@import './grid';
 @import './icons';
 @import './utils';
 
diff --git a/src/assets/styles/scrollbars.scss b/src/assets/styles/scrollbars.scss
index f4120813..b2d976db 100644
--- a/src/assets/styles/scrollbars.scss
+++ b/src/assets/styles/scrollbars.scss
@@ -1,22 +1,53 @@
 ::-webkit-scrollbar {
     width: 0.5rem;
-    height: 0.5rem;
+
+    &:horizontal {
+        height: 0.5rem;
+    }
+
+    &:not(:horizontal) {
+        width: 0.5rem;
+    }
 }
 
 ::-webkit-scrollbar-track {
-    background-clip: padding-box;
-    border-right: 0.25rem solid rgba($black, .1);
+
+    &:horizontal {
+        border-bottom: 0.25rem solid rgba($black, .1);
+    }
+
+    &:not(:horizontal) {
+        border-right: 0.25rem solid rgba($black, .1);
+    }
 }
 
 ::-webkit-scrollbar-thumb {
-    background-clip: padding-box;
-    border-right: 0.25rem solid rgba($primary, .4);
 
-    &:hover {
-        border-right: 0.25rem solid rgba($primary, .8);
+    &:horizontal {
+        border-bottom: 0.25rem solid rgba($primary, .4);
+
+        &:hover {
+            border-bottom: 0.25rem solid rgba($primary, .8);
+        }
+    
+        &:active {
+            border-bottom: 0.25rem solid $secondary;
+        }
     }
 
-    &:active {
-        border-right: 0.25rem solid $secondary;
+    &:not(:horizontal) {
+        border-right: 0.25rem solid rgba($primary, .4);
+
+        &:hover {
+            border-right: 0.25rem solid rgba($primary, .8);
+        }
+
+        &:active {
+            border-right: 0.25rem solid $secondary;
+        }
     }
 }
+
+::-webkit-scrollbar-corner {
+    background: rgba($black, .1);
+}
diff --git a/src/layout/card/NitroCardView.scss b/src/layout/card/NitroCardView.scss
index 84390259..7e82a515 100644
--- a/src/layout/card/NitroCardView.scss
+++ b/src/layout/card/NitroCardView.scss
@@ -36,12 +36,13 @@ $nitro-card-tabs-height: 33px;
         }
     
         .nitro-card {
-            width: 100%;
-            height: 100%;
+            max-width: 75%;
+            max-height: calc(100% - 20px);
+            margin: 10px auto 10px;
     
-            &.rounded {
-                border-radius: 0 !important;
-            }
+            // &.rounded {
+            //     border-radius: 0 !important;
+            // }
         }
     }
 }
diff --git a/src/layout/card/content/NitroCardContentView.tsx b/src/layout/card/content/NitroCardContentView.tsx
index ee3c1a72..8565b3ab 100644
--- a/src/layout/card/content/NitroCardContentView.tsx
+++ b/src/layout/card/content/NitroCardContentView.tsx
@@ -8,7 +8,7 @@ export const NitroCardContentView: FC<NitroCardContentViewProps> = props =>
     const { simple = false } = useNitroCardContext();
     
     return (
-        <div className={ `container-fluid bg-light content-area d-flex flex-column overflow-hidden ${ (simple ? 'simple' : '') } ${ className || '' }` } { ...rest }>
+        <div className={ `container-fluid bg-light content-area d-flex flex-column overflow-auto ${ (simple ? 'simple' : '') } ${ className || '' }` } { ...rest }>
             { children }
         </div>
     );
diff --git a/src/layout/card/grid/NitroCardGridView.scss b/src/layout/card/grid/NitroCardGridView.scss
index 71acb2ee..948bb63b 100644
--- a/src/layout/card/grid/NitroCardGridView.scss
+++ b/src/layout/card/grid/NitroCardGridView.scss
@@ -1,71 +1,6 @@
-.nitro-card-grid {
-    width: 100%;
-
-    .row-cols-3 {
-
-        .col {
-            padding-right: 0.25rem;
-
-            &:nth-child(3n+3) {
-                padding-right: 0;
-            }
-        }
-    }
-
-    .row-cols-4 {
-
-        .col {
-            padding-right: 0.25rem;
-
-            &:nth-child(4n+4) {
-                padding-right: 0;
-            }
-        }
-    }
-    
-    .row-cols-5 {
-
-        .col {
-            padding-right: 0.25rem;
-
-            &:nth-child(5n+5) {
-                padding-right: 0;
-            }
-        }
-    }
-
-    .row-cols-6 {
-
-        .col {
-            padding-right: 0.25rem;
-
-            &:nth-child(6n+6) {
-                padding-right: 0;
-            }
-        }
-    }
-
-    .row-cols-7 {
-
-        .col {
-            padding-right: 0.25rem;
-
-            &:nth-child(7n+7) {
-                padding-right: 0;
-            }
-        }
-    }
-
-    .row-cols-8 {
-
-        .col {
-            padding-right: 0.25rem;
-
-            &:nth-child(8n+8) {
-                padding-right: 0;
-            }
-        }
-    }
+.nitro-grid {
+    --nitro-grid-column-min-width: 45px;
+    grid-template-columns: repeat(auto-fill, minmax(var(--nitro-grid-column-min-width, 45px), 1fr));
 }
 
 @import './item/NitroCardGridItemView.scss';
diff --git a/src/layout/card/grid/NitroCardGridView.tsx b/src/layout/card/grid/NitroCardGridView.tsx
index 8fd178e0..a9e611bc 100644
--- a/src/layout/card/grid/NitroCardGridView.tsx
+++ b/src/layout/card/grid/NitroCardGridView.tsx
@@ -7,7 +7,7 @@ export const NitroCardGridView: FC<NitroCardGridViewProps> = props =>
 
     const getClassName = useMemo(() =>
     {
-        let newClassName = `grid gap-${ gap } overflow-auto`;
+        let newClassName = `grid gap-${ gap } nitro-grid overflow-auto`;
 
         if(className && className.length) newClassName += ' ' + className;
 
@@ -18,7 +18,7 @@ export const NitroCardGridView: FC<NitroCardGridViewProps> = props =>
     {
         const newStyle = { ...style };
 
-        newStyle['--bs-columns'] = columns.toString();
+        //newStyle['--bs-columns'] = columns.toString();
 
         return newStyle;
     }, [ style, columns ]);
diff --git a/src/layout/common/NitroLayoutColumns.type.ts b/src/layout/common/NitroLayoutColumns.type.ts
new file mode 100644
index 00000000..242c622d
--- /dev/null
+++ b/src/layout/common/NitroLayoutColumns.type.ts
@@ -0,0 +1 @@
+export type NitroLayoutColumns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
diff --git a/src/layout/common/NitroLayoutOverflow.type.ts b/src/layout/common/NitroLayoutOverflow.type.ts
new file mode 100644
index 00000000..0ee52c0f
--- /dev/null
+++ b/src/layout/common/NitroLayoutOverflow.type.ts
@@ -0,0 +1 @@
+export type NitroLayoutOverflow = 'hidden' | 'auto';
diff --git a/src/layout/common/NitroLayoutPosition.type.ts b/src/layout/common/NitroLayoutPosition.type.ts
new file mode 100644
index 00000000..41f7dd67
--- /dev/null
+++ b/src/layout/common/NitroLayoutPosition.type.ts
@@ -0,0 +1 @@
+export type NitroLayoutPosition = 'static' | 'relative' | 'fixed' | 'absolute' | 'sticky';
diff --git a/src/layout/common/NitroLayoutSpacing.type.ts b/src/layout/common/NitroLayoutSpacing.type.ts
new file mode 100644
index 00000000..96e53311
--- /dev/null
+++ b/src/layout/common/NitroLayoutSpacing.type.ts
@@ -0,0 +1 @@
+export type NitroLayoutSpacing = 1 | 2 | 3 | 4 | 5;
diff --git a/src/layout/common/index.ts b/src/layout/common/index.ts
new file mode 100644
index 00000000..8cdcb281
--- /dev/null
+++ b/src/layout/common/index.ts
@@ -0,0 +1,4 @@
+export * from './NitroLayoutColumns.type';
+export * from './NitroLayoutOverflow.type';
+export * from './NitroLayoutPosition.type';
+export * from './NitroLayoutSpacing.type';
diff --git a/src/layout/flex-column/NitroLayoutFlexColumn.tsx b/src/layout/flex-column/NitroLayoutFlexColumn.tsx
new file mode 100644
index 00000000..73533809
--- /dev/null
+++ b/src/layout/flex-column/NitroLayoutFlexColumn.tsx
@@ -0,0 +1,28 @@
+import { FC, useMemo } from 'react';
+import { NitroLayoutFlexColumnProps } from './NitroLayoutFlexColumn.types';
+
+export const NitroLayoutFlexColumn: FC<NitroLayoutFlexColumnProps> = props =>
+{
+    const { className = '', overflow = null, position = null, gap = null, children = null, ...rest } = props;
+
+    const getClassName = useMemo(() =>
+    {
+        let newClassName = 'd-flex flex-column';
+
+        if(overflow && overflow.length) newClassName += ` overflow-${ overflow }`;
+
+        if(position && position.length) newClassName += ` position-${ position }`;
+
+        if(gap && gap >= 1) newClassName += ` gap-${ gap }`;
+
+        if(className && className.length) newClassName += ` ${ className }`;
+
+        return newClassName;
+    }, [ className, overflow, position, gap ]);
+
+    return (
+        <div className={ getClassName } { ...rest }>
+            { children }
+        </div>
+    );
+}
diff --git a/src/layout/flex-column/NitroLayoutFlexColumn.types.ts b/src/layout/flex-column/NitroLayoutFlexColumn.types.ts
new file mode 100644
index 00000000..14a56589
--- /dev/null
+++ b/src/layout/flex-column/NitroLayoutFlexColumn.types.ts
@@ -0,0 +1,9 @@
+import { DetailsHTMLAttributes } from 'react';
+import { NitroLayoutOverflow, NitroLayoutPosition, NitroLayoutSpacing } from '../common';
+
+export interface NitroLayoutFlexColumnProps extends DetailsHTMLAttributes<HTMLDivElement>
+{
+    overflow?: NitroLayoutOverflow;
+    position?: NitroLayoutPosition;
+    gap?: NitroLayoutSpacing;
+}
diff --git a/src/layout/grid/NitroLayoutGrid.tsx b/src/layout/grid/NitroLayoutGrid.tsx
new file mode 100644
index 00000000..f2fb7b3e
--- /dev/null
+++ b/src/layout/grid/NitroLayoutGrid.tsx
@@ -0,0 +1,24 @@
+import { FC, useMemo } from 'react';
+import { NitroLayoutGridProps } from './NitroLayoutGrid.types';
+
+export const NitroLayoutGrid: FC<NitroLayoutGridProps> = props =>
+{
+    const { className = '', gap = 3, children = null, ...rest } = props;
+
+    const getClassName = useMemo(() =>
+    {
+        let newClassName = 'grid h-100';
+
+        if(gap >= 1) newClassName += ` gap-${ gap }`;
+
+        if(className && className.length) newClassName += ' ' + className;
+
+        return newClassName;
+    }, [ className, gap ]);
+
+    return (
+        <div className={ getClassName } { ...rest }>
+            { children }
+        </div>
+    );
+}
diff --git a/src/layout/grid/NitroLayoutGrid.types.ts b/src/layout/grid/NitroLayoutGrid.types.ts
new file mode 100644
index 00000000..fbd0d24d
--- /dev/null
+++ b/src/layout/grid/NitroLayoutGrid.types.ts
@@ -0,0 +1,7 @@
+import { DetailsHTMLAttributes } from 'react';
+import { NitroLayoutSpacing } from '../common';
+
+export interface NitroLayoutGridProps extends DetailsHTMLAttributes<HTMLDivElement>
+{
+    gap?: NitroLayoutSpacing;
+}
diff --git a/src/layout/grid/column/NitroLayoutGridColumn.tsx b/src/layout/grid/column/NitroLayoutGridColumn.tsx
new file mode 100644
index 00000000..f169ca09
--- /dev/null
+++ b/src/layout/grid/column/NitroLayoutGridColumn.tsx
@@ -0,0 +1,19 @@
+import { FC, useMemo } from 'react';
+import { NitroLayoutFlexColumn } from '../../flex-column/NitroLayoutFlexColumn';
+import { NitroLayoutGridColumnProps } from './NitroLayoutGridColumn.types';
+
+export const NitroLayoutGridColumn: FC<NitroLayoutGridColumnProps> = props =>
+{
+    const { className = '', size = 12, gap = 3, ...rest } = props;
+
+    const getClassName = useMemo(() =>
+    {
+        let newClassName = `g-col-${ size }`;
+
+        if(className && className.length) newClassName += ' ' + className;
+
+        return newClassName;
+    }, [ className, size ]);
+
+    return <NitroLayoutFlexColumn className={ getClassName } gap={ gap } overflow="auto" { ...rest } />
+}
diff --git a/src/layout/grid/column/NitroLayoutGridColumn.types.ts b/src/layout/grid/column/NitroLayoutGridColumn.types.ts
new file mode 100644
index 00000000..c88c3fb0
--- /dev/null
+++ b/src/layout/grid/column/NitroLayoutGridColumn.types.ts
@@ -0,0 +1,8 @@
+import { NitroLayoutColumns, NitroLayoutSpacing } from '../../common';
+import { NitroLayoutFlexColumnProps } from '../../flex-column/NitroLayoutFlexColumn.types';
+
+export interface NitroLayoutGridColumnProps extends NitroLayoutFlexColumnProps
+{
+    size?: NitroLayoutColumns;
+    gap?: NitroLayoutSpacing;
+}