@geneui/components/configs.js

The Gene UI components library designed for BI tools

// update mechanism for this section is under consideration

const clientConfigs = {};
const updateConfig = configs => {
  for (const key in configs) {
    clientConfigs[key] = configs[key];
  }
};
const breakPoints = {
  // screens
  xs: 576,
  md: 768,
  lg: 1024,
  xl: 1200,
  xxl: 1600
};
const mobileScreenSize = Number(process.env.REACT_APP_MOBILE_SIZE) || breakPoints.lg;
const screenTypes = ['desktop', 'mobile'];
const colors = ['primary', 'confirm', 'danger'];
const sizes = ['small', 'medium', 'big'];
const positions = ['top', 'right', 'bottom', 'left'];
const radius = ['default-radius', 'full-radius'];
const inputConfig = {
  type: ['text', 'color', 'number', 'password', 'textarea', 'date', 'time', 'datetime-local'],
  appearance: ['outline', 'minimal', 'light'],
  size: ['small', 'default', 'big'],
  flexibility: ['full-width', 'content-size'],
  itemsDirection: ['start', 'end'],
  cornerRadius: ['full-radius', 'smooth-radius'],
  labelAppearance: ['none', 'title', 'swap']
};
const titleConfig = {
  color: ['base', 'hero']
};
const checkboxRadioSwitcherConfig = {
  size: ['small', 'big'],
  labelPosition: ['right', 'left', 'top', 'bottom'],
  labelAlignment: ['start', 'center', 'end']
};
const tagConfig = {
  appearance: ['simple', 'minimal', 'outline', 'clean', 'light', 'colored'],
  size: ['small', 'medium', 'big'],
  flexibility: ['content-size', 'compact', 'full-width'],
  cornerRadius: ['full-radius', 'smooth-radius']
};
const stepsConfig = {
  size: ['small', 'big'],
  direction: ['horizontal', 'vertical'],
  appearance: ['steps', 'dots'],
  status: ['initial', 'current', 'success', 'fail', 'activated']
};
const popoverConfig = {
  align: ['start', 'end', 'center'],
  position: ['bottom', 'top', 'left', 'right'],
  cornerRadius: ['full-radius', 'smooth-radius'],
  behave: ['toggle', 'open']
};
const popoverV2Config = {
  onOpenClassName: 'has-popover-opened',
  align: ['start', 'end', 'center'],
  position: ['bottom', 'top', 'left', 'right'],
  cornerRadius: ['full-radius', 'smooth-radius'],
  behave: ['toggle', 'open']
};
const uploaderConfig = {
  uploaderAppearance: ['button', 'input', 'cloud', 'box'],
  uploadedItemsAppearance: ['light', 'minimal', 'detailed', 'box'],
  uploadedFilessAppearance: ['light', 'minimal'],
  gridColumnSize: {
    xs: 1,
    md: 2,
    lg: 4,
    xl: 5,
    xxl: 6
  }
};
const moduleTitleConfig = {
  cornerRadius: ['position-radius', 'no-radius', 'full-radius'],
  position: ['top', 'bottom'],
  size: ['small', 'medium', 'big', 'extra-big']
};
const widgetConfig = {
  type: ['default', 'compact', 'minimal', 'colorful'],
  size: ['small', 'medium', 'big'],
  comparisonStatus: ['initial', 'up', 'down']
};
const customScrollbarConfig = {
  size: ['medium', 'small']
};
const noDataConfig = ['data', 'image', 'search'];
const timePickerConfig = {
  appearance: ['multipleInputs', 'singleInput']
};
const optionConfig = {
  color: ['default', 'hero'],
  border: ['none', 'top', 'bottom'],
  sticky: ['none', 'top', 'bottom'],
  titlePosition: {
    start: 'start',
    center: 'center',
    end: 'end'
  }
};
const advancedSearchConfig = {
  positions: {
    right: 'right',
    left: 'left'
  }
};

export { advancedSearchConfig, breakPoints, checkboxRadioSwitcherConfig, clientConfigs, colors, customScrollbarConfig, inputConfig, mobileScreenSize, moduleTitleConfig, noDataConfig, optionConfig, popoverConfig, popoverV2Config, positions, radius, screenTypes, sizes, stepsConfig, tagConfig, timePickerConfig, titleConfig, updateConfig, uploaderConfig, widgetConfig };