feat(common): add component, helpers & hooks to common libs

Author: louiskhenghao

libs/common/README.md

@@ -1,7 +1,11 @@
-# common
+# @crudx/common
 
-This library was generated with [Nx](https://nx.dev).
+This library is contains common helpers, hooks & components
 
-## Running unit tests
+---
 
-Run `nx test common` to execute the unit tests via [Jest](https://jestjs.io).
+## Installation
+
+```bash
+yarn add @crudx/common dayjs numeral react react-dom
+```

libs/common/project.json

@@ -20,9 +20,10 @@
         "tsConfig": "libs/common/tsconfig.lib.json",
         "project": "libs/common/package.json",
         "entryFile": "libs/common/src/index.ts",
-        "external": ["react", "react-dom", "react/jsx-runtime"],
         "rollupConfig": "@nx/react/plugins/bundle-rollup",
         "compiler": "babel",
+        "format": ["cjs", "esm"],
+        "external": ["dayjs", "numeral", "react", "react-dom"],
         "assets": [
           {
             "glob": "libs/common/README.md",

libs/common/src/components/CloneElement/README.md

@@ -0,0 +1,35 @@
+# CloneElement
+
+Inject props to target component
+
+## Props
+
+```TypeScript
+{
+  [key: string]: any;
+};
+```
+
+---
+
+## Example
+
+```TypeScript
+// import from package
+import { CloneElement } from "@crudx/common";
+
+// example of component
+const Button = (props) => {
+  const :{ children, ...restProps } = props;
+  return <button {...restProps}>{children}</button>
+}
+
+// usage
+<CloneElement
+  onClick={() => {
+    console.log('do something')
+  }}
+>
+  <Button>Testing</Button>
+</CloneElement>,
+```

libs/common/src/components/CloneElement/index.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+
+import { CloneElementProps } from './props';
+
+/**
+ * ===========================
+ * MAIN
+ * ===========================
+ */
+export const CloneElement: React.FC<CloneElementProps> = (props) => {
+  const { children, ...restProps } = props;
+
+  // =============== VIEW
+  const childrenWithProps = React.Children.map(children, (child: any) => {
+    if (!child || typeof child === 'boolean') {
+      return null;
+    }
+    return React.cloneElement(child, restProps);
+  });
+
+  return childrenWithProps;
+};
+
+/**
+ * ===========================
+ * EXPORTS
+ * ===========================
+ */
+export * from './props';
+export default CloneElement;

libs/common/src/components/CloneElement/props.ts

@@ -0,0 +1,15 @@
+/**
+ * ===========================
+ * MAIN
+ * ===========================
+ */
+export type CloneElementProps = {
+  [key: string]: any;
+};
+
+/**
+ * ===========================
+ * EXPORTS
+ * ===========================
+ */
+export default CloneElementProps;

libs/common/src/components/DateTime/README.md

@@ -0,0 +1,67 @@
+# DateTime
+
+This component help to display date time easily
+
+## Props
+
+```TypeScript
+type DateTimeProps = {
+  /**
+   * date object or date string
+   */
+  date?: any;
+  /**
+   * display format, `date`, `datetime` is preset, otherwise custom format
+   * default to `datetime`
+   */
+  kind?: 'date' | 'date2' | 'datetime' | string;
+  /**
+   * the date format, will take place if provided
+   */
+  format?: string;
+  /**
+   * whether should display relative time
+   * default `false`
+   */
+  relative?: boolean;
+  /**
+   * set locale time
+   */
+  locale?: string;
+  /**
+   * prefix of time
+   */
+  prefix?: ReactNode;
+  /**
+   * postfix of time
+   */
+  postfix?: ReactNode;
+}
+```
+
+---
+
+## Example
+
+```TypeScript
+// import from package
+import { DateTime } from "@crudx/common";
+
+const date = new Date();
+
+// simple usage
+<DateTime date={date} />
+
+// with kind
+// kind `date`, "DD, MMM YYYY"
+<DateTime date={date} kind="date" />
+
+// kind `datetime`, "Do, MMM YYYY hh:mm:A"
+<DateTime date={date} kind="datetime" />
+
+// kind `custom`, refer to this https://day.js.org/docs/en/display/format
+<DateTime date={date} kind="D (ddd) MMM, YYYY"/>
+
+// relative time - example `1 hours ago`
+<DateTime date={date} relative={true} />
+```

libs/common/src/components/DateTime/helpers.tsx

@@ -0,0 +1,33 @@
+import dayjs from 'dayjs';
+
+/**
+ * ===========================
+ * MAIN
+ * ===========================
+ */
+// function to calculate next update
+export const calculateNextUpdate = (date) => {
+  const now = dayjs();
+  const diffInSeconds = now.diff(date, 'second');
+
+  if (diffInSeconds < 60) {
+    // less than a minute ago, update every 5 seconds
+    return 5000;
+  } else if (diffInSeconds < 3600) {
+    // less than an hour ago, update every 30 seconds
+    return 30000;
+  } else if (diffInSeconds < 86400) {
+    // less than a day ago, update every 5 minutes
+    return 300000;
+  } else {
+    // more than a day ago, update every hour
+    return 3600000;
+  }
+};
+
+/**
+ * ===========================
+ * EXPORTS
+ * ===========================
+ */
+export default { calculateNextUpdate };

libs/common/src/components/DateTime/index.tsx

@@ -0,0 +1,75 @@
+import React, { useEffect, useMemo, useState } from 'react';
+
+import { formatDateTime } from '../../helpers/date';
+
+import { calculateNextUpdate } from './helpers';
+import { DateTimeProps } from './props';
+
+/**
+ * ===========================
+ * MAIN
+ * ===========================
+ */
+export const DateTime: React.FC<DateTimeProps> = (props) => {
+  const {
+    date,
+    kind = 'datetime',
+    format,
+    prefix,
+    postfix,
+    ...restProps
+  } = props;
+
+  // =============== STATE
+  const [tick, setTick] = useState(0);
+  const [datetime, setDateTime] = useState('');
+
+  // =============== HELPERS
+  // function to get date format
+  const finalFormat = useMemo(() => {
+    if (format) return format;
+    if (kind === 'date') {
+      return 'DD, MMM YYYY';
+    }
+    if (kind === 'date2') {
+      return 'DD-MM-YYYY';
+    }
+    if (kind === 'datetime') {
+      return 'Do, MMM YYYY hh:mm:A';
+    }
+    return 'DD, MMM YYYY';
+  }, [format, kind]);
+
+  // =============== EFFECTS
+  useEffect(() => {
+    const time = formatDateTime(date, { format: finalFormat, ...restProps });
+    setDateTime(time);
+  }, [date, finalFormat, restProps]);
+
+  useEffect(() => {
+    const updateInterval = calculateNextUpdate(date);
+    const timeoutId = setTimeout(() => {
+      if (!restProps.relative) return;
+      setDateTime(formatDateTime(date, { format: finalFormat, ...restProps }));
+      setTick(tick + 1);
+    }, updateInterval);
+    return () => clearTimeout(timeoutId);
+  }, [date, tick, finalFormat, restProps]);
+
+  // =============== VIEWS
+  return (
+    <>
+      {prefix}
+      {datetime}
+      {postfix}
+    </>
+  );
+};
+
+/**
+ * ===========================
+ * EXPORT
+ * ===========================
+ */
+export * from './props';
+export default DateTime;

libs/common/src/components/DateTime/props.ts

@@ -0,0 +1,46 @@
+import { ReactNode } from 'react';
+
+/**
+ * ===========================
+ * MAIN
+ * ===========================
+ */
+export type DateTimeProps = {
+  /**
+   * date object or date string
+   */
+  date?: any;
+  /**
+   * display format, `date`, `datetime` is preset, otherwise custom format
+   * default to `datetime`
+   */
+  kind?: 'date' | 'date2' | 'datetime' | string;
+  /**
+   * the date format, will take place if provided
+   */
+  format?: string;
+  /**
+   * whether should display relative time
+   * default `false`
+   */
+  relative?: boolean;
+  /**
+   * set locale time
+   */
+  locale?: string;
+  /**
+   * prefix of time
+   */
+  prefix?: ReactNode;
+  /**
+   * postfix of time
+   */
+  postfix?: ReactNode;
+};
+
+/**
+ * ===========================
+ * EXPORT
+ * ===========================
+ */
+export default DateTimeProps;