forstok-ui-lib 5.3.6 → 5.4.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "forstok-ui-lib",
-  "version": "5.3.6",
+  "version": "5.4.4",
   "description": "Forstok UI Components Library",
   "path": "dist",
   "main": "dist/index.js",
@@ -39,7 +39,9 @@
     "@types/react": "^19.0.2",
     "@types/react-datepicker": "^6.2.0",
     "@types/react-dom": "^19.0.2",
+    "approvejs": "^3.1.2",
     "html-to-text": "^9.0.5",
+    "moment": "^2.30.1",
     "moment-range": "^4.0.2",
     "npm-force-resolutions": "^0.0.10",
     "react": "^19.0.0",

package/src/assets/images/icons/edit-white.svg

@@ -0,0 +1,5 @@
+<?xml version='1.0' encoding='utf-8'?>
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 129 129" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 129 129" style="fill: #fff;">
+  <path d="m119.2,114.3h-109.4c-2.3,0-4.1,1.9-4.1,4.1s1.9,4.1 4.1,4.1h109.5c2.3,0 4.1-1.9 4.1-4.1s-1.9-4.1-4.2-4.1z"/>
+  <path d="m5.7,78l-.1,19.5c0,1.1 0.4,2.2 1.2,3 0.8,0.8 1.8,1.2 2.9,1.2l19.4-.1c1.1,0 2.1-0.4 2.9-1.2l67-67c1.6-1.6 1.6-4.2 0-5.9l-19.2-19.4c-1.6-1.6-4.2-1.6-5.9-1.77636e-15l-13.4,13.5-53.6,53.5c-0.7,0.8-1.2,1.8-1.2,2.9zm71.2-61.1l13.5,13.5-7.6,7.6-13.5-13.5 7.6-7.6zm-62.9,62.9l49.4-49.4 13.5,13.5-49.4,49.3-13.6,.1 .1-13.5z"/>
+</svg>

package/src/assets/images/icons/loading-red.svg

@@ -0,0 +1,27 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="uil-default">
+    <rect x="0" y="0" width="100" height="100" fill="none" class="bk"></rect>
+    <rect x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#FF585C' transform='rotate(0 50 50) translate(0 -30)'>
+        <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0s' repeatCount='indefinite'/></rect>
+    <rect x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#FF585C' transform='rotate(30 50 50) translate(0 -30)'>
+        <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.08333333333333333s' repeatCount='indefinite'/></rect>
+    <rect x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#FF585C' transform='rotate(60 50 50) translate(0 -30)'>
+        <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.16666666666666666s' repeatCount='indefinite'/></rect>
+    <rect x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#FF585C' transform='rotate(90 50 50) translate(0 -30)'>
+        <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.25s' repeatCount='indefinite'/></rect>
+    <rect x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#FF585C' transform='rotate(120 50 50) translate(0 -30)'>
+        <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.3333333333333333s' repeatCount='indefinite'/></rect>
+    <rect x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#FF585C' transform='rotate(150 50 50) translate(0 -30)'>
+        <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.4166666666666667s' repeatCount='indefinite'/></rect>
+    <rect x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#FF585C' transform='rotate(180 50 50) translate(0 -30)'>
+        <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.5s' repeatCount='indefinite'/></rect>
+    <rect x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#FF585C' transform='rotate(210 50 50) translate(0 -30)'>
+        <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.5833333333333334s' repeatCount='indefinite'/></rect>
+    <rect x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#FF585C' transform='rotate(240 50 50) translate(0 -30)'>
+        <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.6666666666666666s' repeatCount='indefinite'/></rect>
+    <rect x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#FF585C' transform='rotate(270 50 50) translate(0 -30)'>
+        <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.75s' repeatCount='indefinite'/></rect>
+    <rect x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#FF585C' transform='rotate(300 50 50) translate(0 -30)'>
+        <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.8333333333333334s' repeatCount='indefinite'/></rect>
+    <rect x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='#FF585C' transform='rotate(330 50 50) translate(0 -30)'>
+        <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.9166666666666666s' repeatCount='indefinite'/></rect>
+</svg>

package/src/assets/javascripts/function.ts

@@ -1,5 +1,8 @@
+import approve from 'approvejs'
 import { ReactNode } from 'react';
 import { TMessage, TMessageQuestion } from '../../components/message/typed';
+import { TObject } from '../../typeds/base.typed';
+import { errorTitle } from './helper';
 
 export const getStorage = (name: string, type: string = 'string', defaultVal?: any, loadName: string = 'load') => {
   let result: any;
@@ -79,6 +82,10 @@ export const formatNumber = (n?: string | number, flag?: boolean) => {
   return result;
 }
 
+export const IsNumeric = (val?: any) => {
+  return Number(parseFloat(val)) === val;
+}
+
 export const generateMessage = (type: string, value: string | ReactNode, callback?: () => void, timer?: number) => {
   let result: TMessage = {
     $type: type,
@@ -112,24 +119,326 @@ export const currencyNumber = (value: number) => {
 }
 
 export const evUpdateInputRc = (input?: HTMLInputElement, value?: string | number) => {
-  if (!input) return false
+  if (!input) {
+    return false;
+  }
   const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
     window.HTMLInputElement.prototype,
     "value"
-  )?.set
-  nativeInputValueSetter && nativeInputValueSetter.call(input, (value === undefined ? '' : value))
-  const inputEvent = new Event('input', { bubbles: true})
-  input.dispatchEvent(inputEvent)
+  )?.set;
+  nativeInputValueSetter && nativeInputValueSetter.call(input, (value === undefined ? '' : value));
+  const inputEvent = new Event('input', { bubbles: true});
+  input.dispatchEvent(inputEvent);
 }
 
 export const getSizeContainer = (full?: boolean) => {
-  const height = window.innerHeight
-  const width = window.innerWidth
-  let result = { width: width, height: height }  
+  const height = window.innerHeight;
+  const width = window.innerWidth;
+  let result = { width: width, height: height };
   if (width >= 1366) {
-    result.width = width - 220 - 64
+    result.width = width - 220 - 64;
   } else if (width >= 1280) {
-    result.width = width - 187 - 32
+    result.width = width - 187 - 32;
+  }
+  return result;
+}
+
+export const generateValueTable = (input: string|number, key: string) => {
+  let result = input;
+  if (key && input !== '') {
+    const _key = key.toLowerCase();
+    const _input = (typeof input === 'string') ? parseInt(input) : input;
+    if (/price/.test(_key)) {
+      result = currencyNumber(_input);
+    } else if (/width/.test(_key) || /length/.test(_key) || /height/.test(_key)) {
+      result = input + ' cm';
+    } else if (/weight/.test(_key)) {
+      result = input + ' gr';
+    } else if(/discount/.test(_key)) {
+      result = input + ' %';
+    }
+  }
+  return result;
+}
+
+export const generateValue = (type: string, value: any) => {
+  let result: any;
+  switch (type) {
+    case 'String':
+      result = value ? value.toString().trim() : '';
+      break
+    case 'Integer':
+      result = (value !== '' && value !== null) ? parseInt(value) : null;
+      break
+    case 'Currency':
+      result = (value !== '' && value !== null) ? parseInt(formatNumber(value, false)) : null;
+      break 
+    case 'Boolean':
+      case 'Array':
+      result = value;
+      break
+    default:
+      result = value.toString().trim();
+  }
+  return result;
+}
+
+export const validateByApproveJs = (head: TObject, value: any, title?: string, valueMatch?: any) => {
+  let result: TObject = { approved: true };
+  let _title: string = title || errorTitle(head.name);
+  if (head.key.indexOf('options-option') !== -1) {
+    if (value === '') {
+      result = { approved: false, errors: [_title+' is required'] };
+    }
+  }
+  if (head?.validations) {
+    const typeData: string = head?.typeData || 'String';
+    let rules: TObject = { title: _title };
+    if (head.validations?.required) {
+      switch (typeData) {
+        case 'String':
+          rules.required = true;
+        break
+        case 'Integer': 
+        case 'Currency':
+          const _value = (typeof value === 'undefined') ? '' : (isNaN(value) ? '' : value);
+          const requiredIntegerRule = {
+            expects: [
+              'value'
+            ],
+            message: '{title} is required',
+            validate: (value: any, pars: TObject) => {
+              return pars.value !== '' && pars.value !== null
+            }
+          };
+          approve.addTest(requiredIntegerRule, 'requiredIntegerRule');
+          rules.requiredIntegerRule = {
+            value: _value
+          };
+        break 
+        case 'Array':
+          const requiredArrayRule = {
+            expects: [
+              'value'
+            ],
+            message: '{title} is required',
+            validate: (value: any, pars: TObject) => {
+              return pars.value?.length || (pars.value && Object.keys(pars.value).length) ? true : false 
+            }
+          };
+          approve.addTest(requiredArrayRule, 'requiredArrayRule');
+          rules.requiredArrayRule = {
+            value: value
+          };
+        break
+        default: 
+          rules.required = true;
+      }
+    }
+
+    if(('min' in head.validations && head.validations.min !== null) && ('max' in head.validations && head.validations.max !== null)) {
+      switch (typeData) {
+        case 'Integer':
+        case 'Currency':
+          const minMaxIntegerRule = {
+            expects: [
+              'value'
+            ],
+            message: '{title} min '+head.validations.min+' and max '+head.validations.max,
+            validate: (value: any, pars: TObject) => {
+              return (pars.value >= head.validations.min && pars.value <= head.validations.max) || pars.value === '' || typeof pars.value === 'undefined'
+            }
+          };
+          approve.addTest(minMaxIntegerRule, 'minMaxIntegerRule');
+          rules.minMaxIntegerRule = {
+            value: value
+          };
+        break
+        case 'Array':
+          const minMaxArrayRule = {
+            expects: [
+              'value'
+            ],
+            message: '{title} must be a minimum of '+head.validations.min+' and a maximum of '+head.validations.max,
+            validate: (value: any, pars: TObject) => {
+              return pars.value ? (pars.value.length >= head.validations.min &&  pars.value.length <= head.validations.max) : (head.validations.min === 0 ? true : false)
+            }
+          };
+          approve.addTest(minMaxArrayRule, 'minMaxArrayRule');
+          rules.minMaxArrayRule = {
+            value: value
+          };
+        break
+        default: 
+          rules.min = head.validations.min;
+          rules.max = head.validations.max;
+      }
+    }
+    else if('min' in head.validations && head.validations.min !== null) {
+      switch (typeData) {
+        case 'Integer':
+        case 'Currency':
+          const minIntegerRule = {
+            expects: [
+              'value'
+            ],
+            message: '{title} min '+head.validations.min,
+            validate: (value: any, pars: TObject) => {
+              return pars.value >= head.validations.min || pars.value === '' || typeof pars.value === 'undefined'
+            }
+          };
+          approve.addTest(minIntegerRule, 'minIntegerRule');
+          rules.minIntegerRule = {
+            value: value
+          };
+        break
+        case 'Array':
+          const minArrayRule = {
+            expects: [
+              'value'
+            ],
+            message: '{title} must be a minimum of '+head.validations.min,
+            validate: (value: any, pars: TObject) => {
+              return pars.value ? (pars.value.length >= head.validations.min) : (head.validations.min === 0 ? true : false)
+            }
+          };
+          approve.addTest(minArrayRule, 'minArrayRule');
+          rules.minArrayRule = {
+            value: value
+          };
+        break
+        default: 
+          rules.min = head.validations.min;
+      }
+    }
+    else if('max' in head.validations && head.validations.max !== null) {
+      switch (typeData) {
+        case 'Integer':
+        case 'Currency':
+          const maxIntegerRule = {
+            expects: [
+              'value'
+            ],
+            message: '{title} max '+head.validations.max,
+            validate: (value: any, pars: TObject) => {
+              return pars.value <= head.validations.max || pars.value === '' || typeof pars.value === 'undefined'
+            }
+          };
+          approve.addTest(maxIntegerRule, 'maxIntegerRule');
+          rules.maxIntegerRule = {
+            value: value
+          };
+        break
+        case 'Array':
+          const maxArrayRule = {
+            expects: [
+              'value'
+            ],
+            message: '{title} must be a maximum of '+head.validations.max,
+            validate: (value: any, pars: TObject) => {
+              return pars?.value?.length <= head.validations.max
+            }
+          };
+          approve.addTest(maxArrayRule, 'maxArrayRule');
+          rules.maxArrayRule = {
+            value: value
+          };
+        break
+        default: 
+          rules.max = head.validations.max;
+      }
+    }
+
+    if('lessEqual' in head.validations) {
+      const lessEqualRule = {
+        expects: [
+          'value',
+          'valueMatch',
+        ],
+        message: '{title} is less than or equal {valueMatch}',
+        validate: (value: any, pars: TObject) => {
+          return (IsNumeric(value) && IsNumeric(pars?.valueMatch)) ? (value <= pars.valueMatch) : true
+        }
+      };
+      approve.addTest(lessEqualRule, 'lessEqualRule');
+      rules.lessEqualRule = {
+        value: value,
+        valueMatch: valueMatch
+      };
+    }
+
+    if('less' in head.validations) {
+      const lessRule = {
+        expects: [
+          'value',
+          'valueMatch',
+        ],
+        message: '{title} is less than {valueMatch}',
+        validate: (value: any, pars: TObject) => {
+          return (IsNumeric(value) && IsNumeric(pars?.valueMatch)) ? (value < pars.valueMatch) : true
+        }
+      };
+      approve.addTest(lessRule, 'lessRule');
+      rules.lessRule = {
+        value: value,
+        valueMatch: valueMatch 
+      };
+    }
+
+    if(head.validations?.greaterEqual) {
+      const greaterEqualRule = {
+        expects: [
+          'value',
+          'valueMatch',
+        ],
+        message: '{title} is greater than or equal {valueMatch}',
+        validate: (value: any, pars: TObject) => {
+          return (IsNumeric(value) && IsNumeric(pars?.valueMatch)) ? (value >= pars.valueMatch) : true
+        }
+      };
+      approve.addTest(greaterEqualRule, 'greaterEqualRule');
+      rules.greaterEqualRule = {
+        value: value,
+        valueMatch: valueMatch
+      };
+    }
+
+    if(head.validations?.greater) {
+      const greaterRule = {
+        expects: [
+          'value',
+          'valueMatch',
+        ],
+        message: '{title} is greater than {valueMatch}',
+        validate: (value: any, pars: TObject) => {
+          return (IsNumeric(value) && IsNumeric(pars?.valueMatch)) ? (value > pars.valueMatch) : true
+        }
+      };
+      approve.addTest(greaterRule, 'greaterRule');
+      rules.greaterRule = {
+        value: value,
+        valueMatch: valueMatch
+      };
+    }
+
+    result = approve.value(value, rules);
   }
   return result
+} 
+
+export const evGenerateValueMatch = (validation?: TObject, data?: any) => {
+  let result = undefined;
+  if (validation && Object.keys(validation).length) {
+    const keyArr = ['lessEqual', 'greaterEqual', 'less', 'greater'];
+    const key = keyArr.find((_key) => _key in validation);
+    if (data && key) {
+      const obj = validation[key];
+      if(obj && obj in data) result = data[obj];
+    }
+  }
+  return result;
+}
+
+export const unescapeHTML = (value?: string) => {
+  return value ? value.replace(/&lt;/g,'<').replace(/&gt;/g,'>').replace(/&amp;/g,'&') : value as string
 }

package/src/assets/javascripts/helper.ts

@@ -8,4 +8,51 @@ export const dateRangeStatus = (value: string) => {
 export const dateRangeDays = (value: string) => {
   const dayObj: TObject = { 'today': 0, 'lastweek': 6, 'lastsecondweek': 13 ,'lastmonth': 29, 'lastquart': 89, 'custom': 0 }
   return dayObj[value]
+}
+
+export const pageMasterTable = (value: string) => {
+  switch (value) {
+    case 'create-master': case 'edit-master':
+      return 'master'
+    case 'create-listing': case 'edit-listing':
+      return 'listing'
+    case 'confirm-adjustment': case 'confirm-inbound': case 'confirm-outbound': case 'create-adjustment': case 'create-inbound': case 'create-outbound': case 'create-transfer': case 'create-price':
+      return 'stock'
+    case 'create-promotion': 
+      return 'promotion'
+    case 'create-paymentreceive':
+      return 'payment'
+    case 'edit-picklist': case 'create-picklist':
+      return 'picklist'  
+    default:
+      return ''
+  }
+}
+
+export const errorTitle = (name: string) => {
+  switch (name) {
+    case 'Quantity on Hand' :
+      return 'Quantity'
+    case 'Variant Option 1' :
+      return 'Variant Option'
+    case 'Variant Type 1' :
+      return 'Variant Type'
+    case 'Variant Option 2' :
+      return 'Variant Option'
+    case 'Variant Type 2' :
+      return 'Variant Type'
+    case 'variants-sku':
+      return 'Master SKU'
+    default:
+      return name
+  }
+}
+
+export const colorCommonQuantity = (value: number) => {
+  if(value <= 0) {
+    return 'red';
+  }
+  else {
+    return 'green';
+  }
 }

package/src/assets/stylesheets/shares.styles.ts

@@ -1,6 +1,14 @@
 import styled, { css } from 'styled-components';
 import { responseWidth, formLabel} from './bases.styles';
 
+const initialStyles = css `
+  width: 32px;
+  height: 32px;
+  align-items: center;
+  display: grid;
+  background-color: #000;
+`
+
 const getTabsContentModFunc = ({ $mode }:{ $mode?: string }) => {
   let style = ``
   if ($mode === 'list') {
@@ -60,6 +68,46 @@ const getInputGroupModFunc = ({ $mode, $required }:{ $mode?: string, $required?:
   }
   return style
 }
+const getBulkActionWrapperModifiedStyled = ({ $isOpen }:{ $isOpen?: boolean }) => {
+  let style = ``
+  if ($isOpen) {
+    style += `
+      transition: bottom .2s;
+      bottom: 0;
+      @media (max-width: 767.9px) {
+        @keyframes droptoup {
+          50% { 
+            bottom: -100px; 
+          }
+          50% { 
+            bottom: -50px; 
+          }
+          100% { 
+            bottom: 0px; 
+          }
+        }
+        &._refMasterTableBulkWrapper {
+          display: grid;
+          left: 0;
+          animation: droptoup .075s linear;
+          bottom: 0;
+          overflow-x: hidden;
+          & + ._refDropdownOverlay {
+            display: block;
+            width: 100%;
+            height: 100%;
+            position: fixed;
+            top: 0;
+            left: 0;
+            z-index: 100;
+            background-color: rgba(0, 0, 0, .1);
+          }
+        }
+      }
+    `
+  }
+  return style
+}
 
 export const PanelContainer = styled.section`
   position: relative;
@@ -324,4 +372,124 @@ export const BoxContainer = styled.aside`
   @media only screen and (min-width: 768px) {
     padding-bottom: 16px;
   }
+`
+export const BulkActionWrapper = styled.aside<{ $isOpen?: boolean }>`
+  position: fixed;
+  z-index: 101;
+  bottom: -100%;
+  left: 0px;
+  width: 100%;
+  background-color: var(--ter-clr-bg);
+  display: inline-grid;
+  grid-auto-flow: column;
+  grid-template-columns: max-content auto;
+  justify-content: start;
+  grid-gap: 10px;
+  padding: 14px 1em 8px;
+  transition: bottom .2s ease-in-out;
+  overflow: auto;
+  white-space: nowrap;
+  i {
+    position: relative;
+    top: 5px;
+  }
+  span {
+    position: relative;
+    top: 7px;
+  }
+  button, a {
+    padding: 6px 16px;
+    font-size: 13px;
+    min-height: unset;
+    height: auto;
+    margin: 0;
+  }
+  @media (max-width: 767.9px) {
+    &._refMasterTableBulkWrapper {
+      position: fixed;
+      width: 100vw;
+      border: 1px solid #E3E3E3;
+      background: #FFFFFF;
+      z-index: 102;
+      box-shadow: 0px 4px 4px rgb(0 0 0 / 25%);
+      border-radius: 10px 10px 0px 0px;
+      display: none;
+      >i, >span, >button { display: none; }
+      >section {
+        padding: 1em;
+        >section >article {
+          display: inline-grid;
+          grid-auto-flow: row;
+          grid-gap: 12px;
+          width: 100%;
+        }
+      }
+      & + ._refDropdownOverlay {
+        display:none;
+      }
+    }
+  }
+  ${getBulkActionWrapperModifiedStyled}
+`
+export const InitialContainer = styled.span`
+  ${initialStyles}
+  align-items: center;
+  display: grid;
+  color: #fff;
+  text-align: center;
+  border-radius: var(--ter-rd);
+`
+export const MasterTableActionWrapper = styled.section<{ $mode?: string }>`
+  height: 35px;
+  border-bottom: 1px solid var(--tab-clr-ln);
+  background-color: var(--pri-clr-bg);
+  > div {
+    height: 35px !important;
+    > div {
+      display: inline-grid;
+      width: 100%;
+      grid-auto-flow: column;
+      grid-template-columns: min-content;
+      grid-gap: 5px;
+    }
+  }
+  ${({ $mode }:{ $mode?: string }) => {
+    if ($mode === 'picklist') {
+      return css` 
+        background-color: var(--ter-clr-bg);
+        border-top: 1px solid var(--tab-clr-ln);
+        height: 50px;
+        > div {
+          height: 50px !important;
+        }
+      `
+    }
+  }}
+`
+export const FigureWraper = styled.figure<{ $size?: string, $mode?: string }>` 
+  margin: 0;
+  position: relative;
+  overflow: hidden;
+  border: 1px solid var(--pri-clr-ln);
+  background-color: var(--pri-clr-bg);
+  border-radius: var(--ter-rd);
+  width: 30px;
+  height: 30px;
+  align-self: start;
+  > img {
+    object-fit: contain;
+    width: 100%;
+    height: 100%;
+    background-color: var(--pri-clr-bg);
+  }
+  ${({ $size }:{ $size?: string }) => {
+    let style = ``;
+    if ($size) {
+      style += ` 
+        width:${$size};  
+        height:${$size};
+      `
+    }
+    return style;
+  }}
 `

package/src/components/button/styles.ts

@@ -202,6 +202,19 @@ const getButtonModifiedStyled = ({ $mode, $isIndicatorArrow, $isShown, $isLoadin
           height: 16px;
         }
       `
+    } else if (iconLeft === 'add') {
+      style += `
+        &:before { 
+          content: '+'; 
+          color: #118EC5;
+          position: absolute;
+          left: 12px;
+          top: 7px;
+          width: 14px;
+          height: 16px;
+          font-size: 16px;
+        }
+      `
     }
   }
   if ($isIndicatorArrow) {

package/src/components/index.ts

@@ -23,6 +23,8 @@ export { default as TextAreaRefComponent } from './textarea/ref';
 export { default as DateComponent } from './date';
 export { default as DateTimeComponent } from './datetime';
 export { default as RadioComponent } from './radio';
+export { default as SwitchComponent } from './switch';
+export { default as MasterTableComponent } from './masterTable';
 
 export * from './dropdown/typed';
 export * from './message/typed';