From 75d840f25926f7f38db86b623729ff006e4cb05f Mon Sep 17 00:00:00 2001 From: Bill Date: Fri, 24 Sep 2021 04:29:09 -0400 Subject: [PATCH] More base layout updates --- src/layout/base/NitroLayoutBase.tsx | 28 +++++++++++++++++++ src/layout/base/NitroLayoutBase.types.ts | 9 ++++++ src/layout/base/index.ts | 2 ++ src/layout/button/NitroLayoutButton.tsx | 26 +++++++++++++++++ src/layout/button/NitroLayoutButton.types.ts | 8 ++++++ src/layout/button/index.ts | 2 ++ .../common/NitroLayoutButtonSize.type.ts | 1 + src/layout/common/NitroLayoutVariant.type.ts | 1 + src/layout/common/index.ts | 2 ++ .../flex-column/NitroLayoutFlexColumn.tsx | 19 ++++--------- .../NitroLayoutFlexColumn.types.ts | 9 ++---- src/layout/flex-column/index.ts | 2 ++ src/layout/flex/NitroLayoutFlex.tsx | 19 +++++++++++++ src/layout/flex/NitroLayoutFlex.types.ts | 6 ++++ src/layout/flex/index.ts | 2 ++ src/layout/grid/NitroLayoutGrid.tsx | 13 +++------ src/layout/grid/NitroLayoutGrid.types.ts | 7 ++--- src/layout/grid/column/index.ts | 2 ++ src/layout/grid/index.ts | 3 ++ src/layout/index.ts | 6 ++++ src/layout/loading-habbos/index.ts | 1 + 21 files changed, 135 insertions(+), 33 deletions(-) create mode 100644 src/layout/base/NitroLayoutBase.tsx create mode 100644 src/layout/base/NitroLayoutBase.types.ts create mode 100644 src/layout/base/index.ts create mode 100644 src/layout/button/NitroLayoutButton.tsx create mode 100644 src/layout/button/NitroLayoutButton.types.ts create mode 100644 src/layout/button/index.ts create mode 100644 src/layout/common/NitroLayoutButtonSize.type.ts create mode 100644 src/layout/common/NitroLayoutVariant.type.ts create mode 100644 src/layout/flex-column/index.ts create mode 100644 src/layout/flex/NitroLayoutFlex.tsx create mode 100644 src/layout/flex/NitroLayoutFlex.types.ts create mode 100644 src/layout/flex/index.ts create mode 100644 src/layout/grid/column/index.ts create mode 100644 src/layout/grid/index.ts create mode 100644 src/layout/loading-habbos/index.ts diff --git a/src/layout/base/NitroLayoutBase.tsx b/src/layout/base/NitroLayoutBase.tsx new file mode 100644 index 00000000..7007a972 --- /dev/null +++ b/src/layout/base/NitroLayoutBase.tsx @@ -0,0 +1,28 @@ +import { FC, useMemo } from 'react'; +import { NitroLayoutBaseProps } from './NitroLayoutBase.types'; + +export const NitroLayoutBase: FC = props => +{ + const { className = '', overflow = null, position = null, gap = null, children = null, ...rest } = props; + + const getClassName = useMemo(() => + { + let newClassName = ''; + + 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 ( +
+ { children } +
+ ); +} diff --git a/src/layout/base/NitroLayoutBase.types.ts b/src/layout/base/NitroLayoutBase.types.ts new file mode 100644 index 00000000..fe2219fa --- /dev/null +++ b/src/layout/base/NitroLayoutBase.types.ts @@ -0,0 +1,9 @@ +import { ButtonHTMLAttributes, DetailedHTMLProps } from 'react'; +import { NitroLayoutOverflow, NitroLayoutPosition, NitroLayoutSpacing } from '../common'; + +export interface NitroLayoutBaseProps extends DetailedHTMLProps, HTMLDivElement> +{ + overflow?: NitroLayoutOverflow; + position?: NitroLayoutPosition; + gap?: NitroLayoutSpacing; +} diff --git a/src/layout/base/index.ts b/src/layout/base/index.ts new file mode 100644 index 00000000..f38bd839 --- /dev/null +++ b/src/layout/base/index.ts @@ -0,0 +1,2 @@ +export * from './NitroLayoutBase'; +export * from './NitroLayoutBase.types'; diff --git a/src/layout/button/NitroLayoutButton.tsx b/src/layout/button/NitroLayoutButton.tsx new file mode 100644 index 00000000..0b66a3d0 --- /dev/null +++ b/src/layout/button/NitroLayoutButton.tsx @@ -0,0 +1,26 @@ +import { FC, useMemo } from 'react'; +import { NitroLayoutButtonProps } from './NitroLayoutButton.types'; + +export const NitroLayoutButton: FC = props => +{ + const { className = '', variant = 'primary', size = null, children = null, ...rest } = props; + + const getClassName = useMemo(() => + { + let newClassName = 'btn'; + + if(variant && variant.length) newClassName += ` btn-${ variant }`; + + if(size && size.length) newClassName += ` btn-${ size }`; + + if(className && className.length) newClassName += ` ${ className }`; + + return newClassName; + }, [ className, variant, size ]); + + return ( + + ); +} diff --git a/src/layout/button/NitroLayoutButton.types.ts b/src/layout/button/NitroLayoutButton.types.ts new file mode 100644 index 00000000..cc01479d --- /dev/null +++ b/src/layout/button/NitroLayoutButton.types.ts @@ -0,0 +1,8 @@ +import { ButtonHTMLAttributes, DetailedHTMLProps } from 'react'; +import { NitroLayoutButtonSize, NitroLayoutVariant } from '../common'; + +export interface NitroLayoutButtonProps extends DetailedHTMLProps, HTMLButtonElement> +{ + variant?: NitroLayoutVariant; + size?: NitroLayoutButtonSize; +} diff --git a/src/layout/button/index.ts b/src/layout/button/index.ts new file mode 100644 index 00000000..ccfb06b3 --- /dev/null +++ b/src/layout/button/index.ts @@ -0,0 +1,2 @@ +export * from './NitroLayoutButton'; +export * from './NitroLayoutButton.types'; diff --git a/src/layout/common/NitroLayoutButtonSize.type.ts b/src/layout/common/NitroLayoutButtonSize.type.ts new file mode 100644 index 00000000..06e59028 --- /dev/null +++ b/src/layout/common/NitroLayoutButtonSize.type.ts @@ -0,0 +1 @@ +export type NitroLayoutButtonSize = 'sm' | 'lg'; diff --git a/src/layout/common/NitroLayoutVariant.type.ts b/src/layout/common/NitroLayoutVariant.type.ts new file mode 100644 index 00000000..69c4699a --- /dev/null +++ b/src/layout/common/NitroLayoutVariant.type.ts @@ -0,0 +1 @@ +export type NitroLayoutVariant = 'primary' | 'success' | 'danger'; diff --git a/src/layout/common/index.ts b/src/layout/common/index.ts index 8cdcb281..d5d007cc 100644 --- a/src/layout/common/index.ts +++ b/src/layout/common/index.ts @@ -1,4 +1,6 @@ +export * from './NitroLayoutButtonSize.type'; export * from './NitroLayoutColumns.type'; export * from './NitroLayoutOverflow.type'; export * from './NitroLayoutPosition.type'; export * from './NitroLayoutSpacing.type'; +export * from './NitroLayoutVariant.type'; diff --git a/src/layout/flex-column/NitroLayoutFlexColumn.tsx b/src/layout/flex-column/NitroLayoutFlexColumn.tsx index 73533809..7301b619 100644 --- a/src/layout/flex-column/NitroLayoutFlexColumn.tsx +++ b/src/layout/flex-column/NitroLayoutFlexColumn.tsx @@ -1,28 +1,19 @@ import { FC, useMemo } from 'react'; +import { NitroLayoutFlex } from '../flex/NitroLayoutFlex'; import { NitroLayoutFlexColumnProps } from './NitroLayoutFlexColumn.types'; export const NitroLayoutFlexColumn: FC = props => { - const { className = '', overflow = null, position = null, gap = null, children = null, ...rest } = props; + const { className = '', ...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 }`; + let newClassName = 'flex-column'; if(className && className.length) newClassName += ` ${ className }`; return newClassName; - }, [ className, overflow, position, gap ]); + }, [ className ]); - return ( -
- { children } -
- ); + return ; } diff --git a/src/layout/flex-column/NitroLayoutFlexColumn.types.ts b/src/layout/flex-column/NitroLayoutFlexColumn.types.ts index 14a56589..96ab418d 100644 --- a/src/layout/flex-column/NitroLayoutFlexColumn.types.ts +++ b/src/layout/flex-column/NitroLayoutFlexColumn.types.ts @@ -1,9 +1,6 @@ -import { DetailsHTMLAttributes } from 'react'; -import { NitroLayoutOverflow, NitroLayoutPosition, NitroLayoutSpacing } from '../common'; +import { NitroLayoutFlexProps } from '../flex/NitroLayoutFlex.types'; -export interface NitroLayoutFlexColumnProps extends DetailsHTMLAttributes +export interface NitroLayoutFlexColumnProps extends NitroLayoutFlexProps { - overflow?: NitroLayoutOverflow; - position?: NitroLayoutPosition; - gap?: NitroLayoutSpacing; + } diff --git a/src/layout/flex-column/index.ts b/src/layout/flex-column/index.ts new file mode 100644 index 00000000..4ef3d667 --- /dev/null +++ b/src/layout/flex-column/index.ts @@ -0,0 +1,2 @@ +export * from './NitroLayoutFlexColumn'; +export * from './NitroLayoutFlexColumn.types'; diff --git a/src/layout/flex/NitroLayoutFlex.tsx b/src/layout/flex/NitroLayoutFlex.tsx new file mode 100644 index 00000000..00e83a0a --- /dev/null +++ b/src/layout/flex/NitroLayoutFlex.tsx @@ -0,0 +1,19 @@ +import { FC, useMemo } from 'react'; +import { NitroLayoutBase } from '../base/NitroLayoutBase'; +import { NitroLayoutFlexProps } from './NitroLayoutFlex.types'; + +export const NitroLayoutFlex: FC = props => +{ + const { className = '', ...rest } = props; + + const getClassName = useMemo(() => + { + let newClassName = 'd-flex'; + + if(className && className.length) newClassName += ` ${ className }`; + + return newClassName; + }, [ className ]); + + return ; +} diff --git a/src/layout/flex/NitroLayoutFlex.types.ts b/src/layout/flex/NitroLayoutFlex.types.ts new file mode 100644 index 00000000..25a3818c --- /dev/null +++ b/src/layout/flex/NitroLayoutFlex.types.ts @@ -0,0 +1,6 @@ +import { NitroLayoutBaseProps } from '../base/NitroLayoutBase.types'; + +export interface NitroLayoutFlexProps extends NitroLayoutBaseProps +{ + +} diff --git a/src/layout/flex/index.ts b/src/layout/flex/index.ts new file mode 100644 index 00000000..9d9dd4c9 --- /dev/null +++ b/src/layout/flex/index.ts @@ -0,0 +1,2 @@ +export * from './NitroLayoutFlex'; +export * from './NitroLayoutFlex.types'; diff --git a/src/layout/grid/NitroLayoutGrid.tsx b/src/layout/grid/NitroLayoutGrid.tsx index f2fb7b3e..531e3b3c 100644 --- a/src/layout/grid/NitroLayoutGrid.tsx +++ b/src/layout/grid/NitroLayoutGrid.tsx @@ -1,24 +1,19 @@ import { FC, useMemo } from 'react'; +import { NitroLayoutBase } from '../base'; import { NitroLayoutGridProps } from './NitroLayoutGrid.types'; export const NitroLayoutGrid: FC = props => { - const { className = '', gap = 3, children = null, ...rest } = props; + const { className = '', gap = 3, ...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 ]); + }, [ className ]); - return ( -
- { children } -
- ); + return ; } diff --git a/src/layout/grid/NitroLayoutGrid.types.ts b/src/layout/grid/NitroLayoutGrid.types.ts index fbd0d24d..537d9003 100644 --- a/src/layout/grid/NitroLayoutGrid.types.ts +++ b/src/layout/grid/NitroLayoutGrid.types.ts @@ -1,7 +1,6 @@ -import { DetailsHTMLAttributes } from 'react'; -import { NitroLayoutSpacing } from '../common'; +import { NitroLayoutBaseProps } from '../base'; -export interface NitroLayoutGridProps extends DetailsHTMLAttributes +export interface NitroLayoutGridProps extends NitroLayoutBaseProps { - gap?: NitroLayoutSpacing; + } diff --git a/src/layout/grid/column/index.ts b/src/layout/grid/column/index.ts new file mode 100644 index 00000000..a613fa34 --- /dev/null +++ b/src/layout/grid/column/index.ts @@ -0,0 +1,2 @@ +export * from './NitroLayoutGridColumn'; +export * from './NitroLayoutGridColumn.types'; diff --git a/src/layout/grid/index.ts b/src/layout/grid/index.ts new file mode 100644 index 00000000..48709bda --- /dev/null +++ b/src/layout/grid/index.ts @@ -0,0 +1,3 @@ +export * from './column'; +export * from './NitroLayoutGrid'; +export * from './NitroLayoutGrid.types'; diff --git a/src/layout/index.ts b/src/layout/index.ts index 81e87964..2859e2a3 100644 --- a/src/layout/index.ts +++ b/src/layout/index.ts @@ -1,6 +1,12 @@ +export * from './button'; export * from './card'; +export * from './common'; export * from './draggable-window'; +export * from './flex'; +export * from './flex-column'; export * from './gift-card'; +export * from './grid'; +export * from './loading-habbos'; export * from './loading-spinner'; export * from './mini-camera'; export * from './notification-alert'; diff --git a/src/layout/loading-habbos/index.ts b/src/layout/loading-habbos/index.ts new file mode 100644 index 00000000..2b36c9c4 --- /dev/null +++ b/src/layout/loading-habbos/index.ts @@ -0,0 +1 @@ +export * from './LoadingHabbosView';