re-structure to monorepo.

packages/webapp/src/components/Utils/Choose.tsx

@@ -0,0 +1,32 @@
+// @ts-nocheck
+import React from 'react';
+import PropTypes from 'prop-types';
+import { If } from './If';
+
+export const Choose = (props) => {
+  let when = null;
+  let otherwise = null;
+
+  React.Children.forEach(props.children, (children) => {
+    if (children.props.condition === undefined) {
+      otherwise = children;
+    } else if (!when && children.props.condition === true) {
+      when = children;
+    }
+  });
+
+  return when || otherwise;
+};
+
+Choose.propTypes = {
+  children: PropTypes.node,
+};
+
+Choose.When = If;
+
+Choose.Otherwise = ({ render, children }) => (render ? render() : children);
+
+Choose.Otherwise.propTypes = {
+  children: PropTypes.node,
+  render: PropTypes.func,
+};

packages/webapp/src/components/Utils/For.tsx

@@ -0,0 +1,11 @@
+// @ts-nocheck
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export const For = ({ render, of }) =>
+  of.map((item, index) => render(item, index));
+
+For.propTypes = {
+  of: PropTypes.array.isRequired,
+  render: PropTypes.func.isRequired,
+};

packages/webapp/src/components/Utils/FormatDate.tsx

@@ -0,0 +1,20 @@
+// @ts-nocheck
+import React from 'react';
+import moment from 'moment';
+import intl from 'react-intl-universal';
+
+/**
+ * Format the given date.
+ */
+export function FormatDate({ value, format = 'YYYY MMM DD' }) {
+  const localizedFormat = intl.get(`date_formats.${format}`);
+
+  return moment(value).format(localizedFormat);
+}
+
+/**
+ * Format date table cell.
+ */
+export function FormatDateCell({ value, column: { formatDate } }) {
+  return <FormatDate value={value} {...formatDate} />;
+}

packages/webapp/src/components/Utils/FormatNumber.tsx

@@ -0,0 +1,11 @@
+// @ts-nocheck
+import React from 'react';
+import { formattedAmount } from '@/utils';
+
+export function FormatNumber({ value, currency = '', noZero }) {
+  return formattedAmount(value, currency, { noZero });
+}
+
+export function FormatNumberCell({ value, column: { formatNumber } }) {
+  return <FormatNumber value={value} {...formatNumber} />;
+}

packages/webapp/src/components/Utils/If.tsx

@@ -0,0 +1,12 @@
+// @ts-nocheck
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export const If = (props) =>
+  props.condition ? (props.render ? props.render() : props.children) : null;
+
+If.propTypes = {
+  // condition: PropTypes.bool.isRequired,
+  children: PropTypes.node,
+  render: PropTypes.func,
+};

packages/webapp/src/components/Utils/Join.tsx

@@ -0,0 +1,14 @@
+// @ts-nocheck
+import React from 'react';
+
+export function Join({ items, sep }) {
+  return items.length > 0
+    ? items.reduce((result, item) => (
+        <>
+          {result}
+          {sep}
+          {item}
+        </>
+      ))
+    : null;
+}

packages/webapp/src/components/Utils/index.tsx

@@ -0,0 +1,7 @@
+// @ts-nocheck
+export * from './FormatNumber';
+export * from './FormatDate';
+export * from './Join';
+export * from './Choose';
+export * from './For';
+export * from './If'