diff options
Diffstat (limited to 'packages/components/src/global')
| -rw-r--r-- | packages/components/src/global/globalCssVariables.scss | 160 | ||||
| -rw-r--r-- | packages/components/src/global/globalCssVariables.scss.d.ts | 17 | ||||
| -rw-r--r-- | packages/components/src/global/globalEnums.tsx | 52 | ||||
| -rw-r--r-- | packages/components/src/global/globalTypes.ts | 76 | ||||
| -rw-r--r-- | packages/components/src/global/globalUtils.tsx | 93 | ||||
| -rw-r--r-- | packages/components/src/global/index.ts | 3 |
6 files changed, 401 insertions, 0 deletions
diff --git a/packages/components/src/global/globalCssVariables.scss b/packages/components/src/global/globalCssVariables.scss new file mode 100644 index 000000000..ebc44106d --- /dev/null +++ b/packages/components/src/global/globalCssVariables.scss @@ -0,0 +1,160 @@ +// colors +$white: #ffffff; +$off-white: #fdfdfd; +$light-gray: #dfdfdf; +$medium-gray: #9f9f9f; +$dark-gray: #323232; +$black: #000000; +$light-blue: #bdddf5; +$light-blue-transparent: #bdddf590; +$medium-blue: #4476f7; + +$medium-blue-transparent: #4477f733; + +$medium-blue-alt: #4476f73d; +$pink: #e0217d; +$yellow: #f5d747; + +$close-red: #e48282; + +$drop-shadow: '#32323215'; + +//popup +$success-green: #4bb543; +$error-red: #ff9494; + +// background +$hover-background: rgba(0, 0, 0, 0.2); +$modal-background: rgba(0, 0, 0, 0.3); + +// sizes +$xsmall: 20px; +$small: 30px; +$medium: 40px; +$large: 50px; + +// text-sizes +$icon-fontSize: 15px; +$large-fontSize: 15px; +$medium-fontSize: 11px; +$small-fontSize: 9px; +$xsmall-fontSize: 7px; + +// fonts +$default-font: 'Roboto', Verdana, sans-serif; + +//padding +$minimum-padding: 4px; +$medium-padding: 16px; +$large-padding: 32px; + +//icon sizes +$icon-size: 28px; + +// fonts +$sans-serif: 'Roboto', sans-serif; +$large-header: 16px; +$body-text: 12px; +$small-text: 9px; +// $sans-serif: "Roboto Slab", sans-serif; + +// misc values +$search-thumnail-size: 130; +$topbar-height: 50px; +$antimodemenu-height: 36px; + +// dragged items +$contextMenu-zindex: 100000; // context menu shows up over everything +$radialMenu-zindex: 100000; // context menu shows up over everything + +// borders +$standard-border: solid 1px #9f9f9f; +$padding: 0px 5px; +// border radius +$standard-border-radius: 5px; + +// shadow +$standard-shadow: 0px 3px 4px rgba(0, 0, 0, 0.3); +$standard-button-shadow: + rgb(0 0 0 / 20%) 0px 2px 4px -1px, + rgb(0 0 0 / 14%) 0px 4px 5px 0px, + rgb(0 0 0 / 12%) 0px 1px 10px 0px; + +$dashboardselector-height: 32px; +$mainTextInput-zindex: 999; // then text input overlay so that it's context menu will appear over decorations, etc +$docDecorations-zindex: 998; // then doc decorations appear over everything else +$remoteCursors-zindex: 997; // ... not sure what level the remote cursors should go -- is this right? +$COLLECTION_BORDER_WIDTH: 0; +$SCHEMA_DIVIDER_WIDTH: 4; +$MINIMIZED_ICON_SIZE: 24; +$MAX_ROW_HEIGHT: 44px; +$DFLT_IMAGE_NATIVE_DIM: 900px; +$LEFT_MENU_WIDTH: 60px; +$TREE_BULLET_WIDTH: 20px; + +:export { + contextMenuZindex: $contextMenu-zindex; + SCHEMA_DIVIDER_WIDTH: $SCHEMA_DIVIDER_WIDTH; + COLLECTION_BORDER_WIDTH: $COLLECTION_BORDER_WIDTH; + MINIMIZED_ICON_SIZE: $MINIMIZED_ICON_SIZE; + MAX_ROW_HEIGHT: $MAX_ROW_HEIGHT; + SEARCH_THUMBNAIL_SIZE: $search-thumnail-size; + ANTIMODEMENU_HEIGHT: $antimodemenu-height; + DASHBOARD_SELECTOR_HEIGHT: $dashboardselector-height; + DFLT_IMAGE_NATIVE_DIM: $DFLT_IMAGE_NATIVE_DIM; + LEFT_MENU_WIDTH: $LEFT_MENU_WIDTH; + TREE_BULLET_WIDTH: $TREE_BULLET_WIDTH; +} + +.form-wrapper { + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: flex-start; + gap: 0px; + padding-bottom: 5px; + + .formLabel { + display: flex; + font-family: $default-font; + text-transform: uppercase; + opacity: 0.8; + min-width: 'fit-content'; + } + + &.left { + flex-direction: row; + align-items: center; + gap: 3px; + + .formLabel { + text-align: left; + } + } + + &.right { + flex-direction: row-reverse; + justify-content: flex-end; + align-items: center; + gap: 3px; + + .formLabel { + text-align: right; + } + } + + &.top { + flex-direction: column; + gap: 1px; + } + + &.top-start { + flex-direction: column; + align-items: flex-start; + } + + &.top-end { + flex-direction: column; + align-items: flex-end; + } +} diff --git a/packages/components/src/global/globalCssVariables.scss.d.ts b/packages/components/src/global/globalCssVariables.scss.d.ts new file mode 100644 index 000000000..59c2b3585 --- /dev/null +++ b/packages/components/src/global/globalCssVariables.scss.d.ts @@ -0,0 +1,17 @@ + +interface IGlobalScss { + contextMenuZindex: string; // context menu shows up over everything + SCHEMA_DIVIDER_WIDTH: string; + COLLECTION_BORDER_WIDTH: string; + MINIMIZED_ICON_SIZE: string; + MAX_ROW_HEIGHT: string; + SEARCH_THUMBNAIL_SIZE: string; + ANTIMODEMENU_HEIGHT: string; + DASHBOARD_SELECTOR_HEIGHT: string; + DFLT_IMAGE_NATIVE_DIM: string; + LEFT_MENU_WIDTH: string; + TREE_BULLET_WIDTH: string; +} +declare const globalCssVariables: IGlobalScss; + +export = globalCssVariables;
\ No newline at end of file diff --git a/packages/components/src/global/globalEnums.tsx b/packages/components/src/global/globalEnums.tsx new file mode 100644 index 000000000..bdeacccdb --- /dev/null +++ b/packages/components/src/global/globalEnums.tsx @@ -0,0 +1,52 @@ +export enum Colors { + BLACK = "#000000", + DARK_GRAY = "#323232", + MEDIUM_GRAY = "#9F9F9F", + LIGHT_GRAY = "#DFDFDF", + WHITE = "#FFFFFF", + MEDIUM_BLUE = "#4476F7", + MEDIUM_BLUE_ALT = "#4476f73d", // REDUCED OPACITY + LIGHT_BLUE = "#BDDDF5", + PINK = "#E0217D", + YELLOW = "#F5D747", + DROP_SHADOW = "#32323215", + ERROR_RED = "#FF9494", + SUCCESS_GREEN = "#4BB543", + TRANSPARENT = "transparent" +} + +export enum FontSize { + JUMBO_ICON = "5rem", + ICON = "3rem", + HEADER = "1.6rem", + DEFAULT = "1rem", + SECONDARY = "1.3rem", + LABEL = "0.6rem" +} + +export enum Padding { + MINIMUM_PADDING = "4px", + SMALL_PADDING = "8px", + MEDIUM_PADDING = "16px", + LARGE_PADDING = "32px", +} + +export enum IconSizes { + ICON_SIZE = "28px", +} + +export enum Borders { + STANDARD = "solid 1px #9F9F9F", + STANDARD_BORDER_RADIUS = '5px' +} + +export enum Shadows { + STANDARD_SHADOW = "0px 3px 4px rgba(0, 0, 0, 0.3)" +} + +export enum Size { + XSMALL = "xsmall", + SMALL = "small", + MEDIUM = "medium", + LARGE = "large" +}
\ No newline at end of file diff --git a/packages/components/src/global/globalTypes.ts b/packages/components/src/global/globalTypes.ts new file mode 100644 index 000000000..764fe7422 --- /dev/null +++ b/packages/components/src/global/globalTypes.ts @@ -0,0 +1,76 @@ +import { PointerEventHandler } from 'react'; +import { Size } from './globalEnums'; + +export enum Type { + PRIM = 'primary', + SEC = 'secondary', + TERT = 'tertiary', +} + +export type Placement = 'bottom-end' | 'bottom-start' | 'bottom' | 'left-end' | 'left-start' | 'left' | 'right-end' | 'right-start' | 'right' | 'top-end' | 'top-start' | 'top'; + +export type Alignment = 'flex-start' | 'flex-end' | 'center'; + +export type TextAlignment = 'center' | 'left' | 'right'; + +export interface IGlobalProps { + // Size + size?: Size; + height?: number | string; + width?: number; + fillWidth?: boolean; + color?: string; + background?: string; + + // Type + type?: Type; + + // Status + inactive?: boolean; + + // Content + tooltip?: string; + tooltipPlacement?: Placement; + + // Label + label?: string; + hideLabel?: boolean; + + // Label when used in forms + formLabel?: string; + formLabelPlacement?: Placement; + + // Custom style + style?: React.CSSProperties; + + // Global pointer events + onPointerDown?: PointerEventHandler | undefined; + onPointerDownCapture?: PointerEventHandler | undefined; + onPointerMove?: PointerEventHandler | undefined; + onPointerMoveCapture?: PointerEventHandler | undefined; + onPointerUp?: PointerEventHandler | undefined; + onPointerUpCapture?: PointerEventHandler | undefined; + onPointerCancel?: PointerEventHandler | undefined; + onPointerCancelCapture?: PointerEventHandler | undefined; + onPointerEnter?: PointerEventHandler | undefined; + onPointerEnterCapture?: PointerEventHandler | undefined; + onPointerLeave?: PointerEventHandler | undefined; + onPointerLeaveCapture?: PointerEventHandler | undefined; + onPointerOver?: PointerEventHandler | undefined; + onPointerOverCapture?: PointerEventHandler | undefined; + onPointerOut?: PointerEventHandler | undefined; + onPointerOutCapture?: PointerEventHandler | undefined; + onGotPointerCapture?: PointerEventHandler | undefined; + onGotPointerCaptureCapture?: PointerEventHandler | undefined; + onLostPointerCapture?: PointerEventHandler | undefined; + onLostPointerCaptureCapture?: PointerEventHandler | undefined; +} + +export interface INumberProps extends IGlobalProps { + min: number; + max: number; + step?: number; + number: number; + setNumber?: (num: number) => unknown; + unit?: string; +} diff --git a/packages/components/src/global/globalUtils.tsx b/packages/components/src/global/globalUtils.tsx new file mode 100644 index 000000000..0f1e0adbc --- /dev/null +++ b/packages/components/src/global/globalUtils.tsx @@ -0,0 +1,93 @@ +import { Size } from './globalEnums' +import Color from 'color'; + +export interface ILocation { + top: number + left: number + width: number + height: number + override?: 'left' | 'bottom' | 'top' | 'right' +} + +export const getFormLabelSize = ( + size: Size | undefined, +) => { + switch (size) { + case Size.XSMALL: + return '7px' + case Size.SMALL: + return '10px' + case Size.MEDIUM: + return '13px' + case Size.LARGE: + return '14px' + default: + return '10px' + } +} + +export const getFontSize = ( + size: Size | undefined, + icon?: boolean +) => { + switch (size) { + case Size.XSMALL: + if (icon) return '11px' + return '9px' + case Size.SMALL: + if (icon) return '15px' + return '11px' + case Size.MEDIUM: + if (icon) return '17px' + return '14px' + case Size.LARGE: + if (icon) return '22px' + return '17px' + default: + if (icon) return '15px' + return '12px' + } +} + +export const getHeight = ( + height: number | undefined, + size: Size | undefined +) => { + if (height) return height + switch (size) { + case Size.XSMALL: + return 20 + case Size.SMALL: + return 30 + case Size.MEDIUM: + return 40 + case Size.LARGE: + return 50 + default: + return 30 + } +} + +export const colorConvert = (color: any) => { + try { + return color ? Color(color.toLowerCase()) : Color('transparent') + } catch (e) { + console.log('COLOR error:', e) + return Color('red') + } +} + +export const isDark = (color: any): boolean => { + if (color === undefined) return false + if (color === 'transparent') return false + if (color.startsWith?.('linear')) return false + const nonAlphaColor = color.startsWith('#') + ? (color as string).substring(0, 7) + : color.startsWith('rgba') + ? color.replace(/,.[^,]*\)/, ')').replace('rgba', 'rgb') + : color + const col = colorConvert(nonAlphaColor).rgb() + const colsum = col.red() + col.green() + col.blue() + if (colsum / col.alpha() > 400 || col.alpha() < 0.25) return false + else return true +} diff --git a/packages/components/src/global/index.ts b/packages/components/src/global/index.ts new file mode 100644 index 000000000..46fba143d --- /dev/null +++ b/packages/components/src/global/index.ts @@ -0,0 +1,3 @@ +export * from './globalEnums' +export * from './globalUtils' +export * from './globalTypes'
\ No newline at end of file |