@pareto-engineering/design-system 5.0.0 → 5.0.2

package/dist/es/g/FormBuilder/common/Builder/common/Section/Section.js

@@ -23,8 +23,7 @@ const Section = ({
   className: userClassName,
   style,
   index,
-  handleDeleteSection,
-  customInputMap
+  handleDeleteSection
   // ...otherProps
 }) => {
   const {
@@ -56,8 +55,7 @@ const Section = ({
         sectionIndex: index,
         inputIndex: indx,
         onDelete: handleDeleteInput,
-        onCopy: handleCopyInput,
-        customInputMap: customInputMap
+        onCopy: handleCopyInput
       }),
       identifier: input.name
     }));

package/dist/es/g/FormBuilder/common/Renderer/Renderer.js

@@ -65,8 +65,7 @@ const Renderer = ({
   fileUploadStatus,
   handleFileDelete,
   onFileUpload,
-  shouldUpdateInputStateInRealTime = true,
-  customInputMap
+  shouldUpdateInputStateInRealTime = true
   // ...otherProps
 }) => {
   const [currentSectionIndex, setCurrentSectionIndex] = useState(0);
@@ -143,8 +142,7 @@ const Renderer = ({
       fileUploadStatus: fileUploadStatus,
       handleFileDelete: handleFileDelete,
       onFileUpload: onFileUpload,
-      sectionIndex: sectionIndex,
-      customInputMap: customInputMap
+      sectionIndex: sectionIndex
     }))), /*#__PURE__*/React.createElement("div", {
       className: "navigator-container"
     }, updatedFormData.sections.length > 1 && /*#__PURE__*/React.createElement(Button, {

package/dist/es/g/FormBuilder/common/Renderer/common/Section/Section.js

@@ -34,50 +34,40 @@ const Section = ({
   fileUploadStatus,
   handleFileDelete,
   onFileUpload,
-  sectionIndex,
-  customInputMap
+  sectionIndex
   // ...otherProps
-}) => {
-  const customInputTypes = customInputMap ? Object.keys(customInputMap) : [];
-  return /*#__PURE__*/React.createElement("div", {
-    id: id,
-    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
-    style: style
-  }, /*#__PURE__*/React.createElement("p", {
-    className: "h3"
-  }, title), /*#__PURE__*/React.createElement(ExpandableLexicalPreview, {
-    nodes: description,
-    name: "instructions"
-  }), inputs?.map((input, inputIndex) => {
-    const isFileInput = input.type === 'file';
-    const isCustomInput = customInputTypes.includes(input.type);
-    const CustomInputComponent = isCustomInput ? customInputMap[input.type].component : null;
-    return !isCustomInput ? /*#__PURE__*/React.createElement(FormInput, _extends({
-      key: input.name
-    }, input, {
-      disabled: readOnly
-    }, isFileInput && {
-      uploadStatus: fileUploadStatus,
-      handleFileDelete,
-      onChange: files => {
-        const filesToUpload = files?.filter(file => file instanceof File).map(file => ({
-          file,
-          name: file.name,
-          mimeType: file.type,
-          type: fileTypeMapper[getFileType(file)] || 'Generic',
-          title: file.name,
-          sectionIndex,
-          inputIndex
-        }));
-        onFileUpload(filesToUpload);
-      }
-    })) : /*#__PURE__*/React.createElement(CustomInputComponent, _extends({
-      key: input.name
-    }, input, {
-      disabled: readOnly
-    }));
+}) => /*#__PURE__*/React.createElement("div", {
+  id: id,
+  className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
+  style: style
+}, /*#__PURE__*/React.createElement("p", {
+  className: "h3"
+}, title), /*#__PURE__*/React.createElement(ExpandableLexicalPreview, {
+  nodes: description,
+  name: "instructions"
+}), inputs?.map((input, inputIndex) => {
+  const isFileInput = input.type === 'file';
+  return /*#__PURE__*/React.createElement(FormInput, _extends({
+    key: input.name
+  }, input, {
+    disabled: readOnly
+  }, isFileInput && {
+    uploadStatus: fileUploadStatus,
+    handleFileDelete,
+    onChange: files => {
+      const filesToUpload = files?.filter(file => file instanceof File).map(file => ({
+        file,
+        name: file.name,
+        mimeType: file.type,
+        type: fileTypeMapper[getFileType(file)] || 'Generic',
+        title: file.name,
+        sectionIndex,
+        inputIndex
+      }));
+      onFileUpload(filesToUpload);
+    }
   }));
-};
+}));
 Section.propTypes = {
   /**
    * The HTML id for this element

package/dist/es/utils/formatting.js

@@ -0,0 +1,109 @@
+export const DATE_FORMATS = {
+  HUMAN_READABLE: 'human_readable',
+  TIME: 'time',
+  DATETIME: 'datetime',
+  CHART_DATE: 'chart_date',
+  CHART_TIME: 'chart_time',
+  WEEKDAY_DATE: 'weekday_date',
+  DAY_VIEW: 'day_view'
+};
+const isValidDate = date => date instanceof Date && !Number.isNaN(date);
+const isTimeSliceFormat = input => {
+  const timeSliceRegex = /^([01]?[0-9]|2[0-3]):[0-5][0-9]$/;
+  return timeSliceRegex.test(input);
+};
+const createTimeFromSlice = timeSlice => {
+  const [hours, minutes] = timeSlice.split(':').map(Number);
+  const date = new Date();
+  date.setHours(hours, minutes, 0, 0);
+  return date;
+};
+const format12Hour = date => {
+  const hour = date.getHours();
+  const ampm = hour >= 12 ? 'PM' : 'AM';
+  const hour12 = hour % 12 || 12;
+  return `${hour12} ${ampm}`;
+};
+const shouldShowYear = date => {
+  const currentYear = new Date().getFullYear();
+  return date.getFullYear() !== currentYear;
+};
+export const formatTime = seconds => {
+  if (!seconds) return '0s';
+  const hours = Math.floor(seconds / 3600);
+  const minutes = Math.floor(seconds % 3600 / 60);
+  const remainingSeconds = Math.floor(seconds % 60);
+  const parts = [];
+  if (hours > 0) parts.push(`${hours}h`);
+  if (minutes > 0 || hours > 0 && remainingSeconds > 0) parts.push(`${minutes}m`);
+  if (remainingSeconds > 0) parts.push(`${remainingSeconds}s`);
+
+  // Cater for decimal seconds
+  if (parts.length === 0) return '0s';
+  return parts.join(' ');
+};
+const parseDate = input => {
+  if (input instanceof Date) return input;
+  if (typeof input === 'number') return new Date(input);
+  if (typeof input === 'string') {
+    if (isTimeSliceFormat(input)) {
+      return createTimeFromSlice(input);
+    }
+    const parsed = new Date(input);
+    if (isValidDate(parsed)) return parsed;
+    const timestamp = parseInt(input, 10);
+    if (!Number.isNaN(timestamp)) {
+      const date = new Date(timestamp * 1000);
+      if (isValidDate(date)) return date;
+    }
+  }
+  return null;
+};
+const formatStrategies = {
+  [DATE_FORMATS.CHART_DATE]: date => {
+    const monthDay = date.toLocaleDateString('en-US', {
+      month: 'short',
+      day: 'numeric',
+      timeZone: 'UTC'
+    });
+    return shouldShowYear(date) ? `${monthDay} ${date.getFullYear()}` : monthDay;
+  },
+  [DATE_FORMATS.CHART_TIME]: date => format12Hour(date),
+  [DATE_FORMATS.HUMAN_READABLE]: date => date.toLocaleDateString('en-US', {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+    timeZone: 'UTC'
+  }),
+  default: date => date.toISOString()
+};
+export const formatDate = (input, format = DATE_FORMATS.HUMAN_READABLE) => {
+  try {
+    if (typeof input === 'string' && isTimeSliceFormat(input)) {
+      if (format === DATE_FORMATS.CHART_TIME || format === DATE_FORMATS.TIME) {
+        const date = createTimeFromSlice(input);
+        if (format === DATE_FORMATS.CHART_TIME) {
+          return format12Hour(date);
+        }
+        return date.toLocaleTimeString('en-US', {
+          hour: '2-digit',
+          minute: '2-digit',
+          timeZone: 'UTC'
+        });
+      }
+      return input;
+    }
+    const date = parseDate(input);
+    if (!date && (typeof input === 'string' || typeof input === 'number')) {
+      return input.toString();
+    }
+    const formatStrategy = formatStrategies[format] || formatStrategies.default;
+    return formatStrategy(date);
+  } catch (error) {
+    return 'Invalid Date';
+  }
+};
+export const snakeCaseToTitleCase = word => {
+  const result = word.replace(/([A-Z])/g, ' $1');
+  return result.charAt(0).toUpperCase() + result.slice(1);
+};

package/dist/es/utils/index.js

@@ -1 +1,2 @@
-export { useWindowSize, useDynamicPosition, useOutsideClick } from "./hooks";
+export { useWindowSize, useDynamicPosition, useOutsideClick } from "./hooks";
+export { formatTime, formatDate, DATE_FORMATS, snakeCaseToTitleCase } from "./formatting";

package/jest.config.js

@@ -10,6 +10,9 @@ module.exports = {
   moduleNameMapper:{
     '^.+\\.(css|scss)$'                :'<rootDir>/tests/staticStub.js',
     '^.+\\.(mdx)$'                     :'<rootDir>/tests/staticStub.js',
+    'react-markdown'                   :'<rootDir>/tests/emptyMock.js',
+    'remark-math'                      :'<rootDir>/tests/emptyMock.js',
+    'rehype-mathjax'                   :'<rootDir>/tests/emptyMock.js',
     // https://jestjs.io/docs/webpack#mocking-css-modules
     '^@pareto-engineering/bem$'        :'identity-obj-proxy',
     '^@pareto-engineering/bem/exports$':'identity-obj-proxy',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pareto-engineering/design-system",
-  "version": "5.0.0",
+  "version": "5.0.2",
   "description": "",
   "main": "dist/cjs/index.js",
   "module": "dist/es/index.js",
@@ -63,6 +63,7 @@
     "@pareto-engineering/bem": "^5.0.0",
     "@pareto-engineering/styles": "^5.0.0",
     "@pareto-engineering/utils": "^5.0.0",
+    "better-react-mathjax": "^2.0.3",
     "codemirror": "^6.0.1",
     "date-fns": "^2.29.3",
     "downshift": "^6.1.12",
@@ -77,11 +78,14 @@
     "react-day-picker": "^8.10.0",
     "react-dom": "^18.2.0",
     "react-helmet-async": "^1.3.0",
+    "react-markdown": "^9.0.1",
     "react-relay": "^15.0.0",
     "react-router-dom": "^5.3.4",
     "recharts": "^2.13.3",
-    "relay-test-utils": "^15.0.0"
+    "rehype-mathjax": "^6.0.0",
+    "relay-test-utils": "^15.0.0",
+    "remark-math": "^6.0.0"
   },
   "browserslist": "> 2%",
-  "gitHead": "6892e855aadac7d1c0e4a8f00570e644ba9cfb55"
+  "gitHead": "af1d9f8a840222f80506834a9ed5402c4465b69a"
 }

package/src/stories/a/AreaChart.stories.jsx

@@ -4,7 +4,7 @@ import React from 'react'
 import { AreaChart } from 'ui'
 
 export default {
-  title    :'a/AreaChart',
+  title    :'a/Charts/AreaChart',
   component:AreaChart,
 }
 

package/src/stories/a/BarChart.stories.jsx

@@ -0,0 +1,89 @@
+// front/packages/design-system/src/ui/a/BarChart/BarChart.stories.jsx
+
+import React from 'react'
+import { BarChart } from 'ui'
+
+export default {
+  title    :'a/Charts/BarChart',
+  component:BarChart,
+}
+
+const data = [
+  {
+    date:'Jan', pendingReview:200, accepted:150, rejected:100, toRevise:250, revised:50,
+  },
+  {
+    date:'Feb', pendingReview:180, accepted:160, rejected:120, toRevise:240, revised:60,
+  },
+  {
+    date:'Mar', pendingReview:220, accepted:140, rejected:110, toRevise:230, revised:70,
+  },
+  {
+    date:'Apr', pendingReview:210, accepted:130, rejected:130, toRevise:220, revised:80,
+  },
+  {
+    date:'May', pendingReview:230, accepted:120, rejected:140, toRevise:210, revised:90,
+  },
+  {
+    date:'Jun', pendingReview:240, accepted:110, rejected:150, toRevise:200, revised:100,
+  },
+  {
+    date:'Jul', pendingReview:250, accepted:100, rejected:160, toRevise:190, revised:110,
+  },
+  {
+    date:'Aug', pendingReview:260, accepted:90, rejected:170, toRevise:180, revised:120,
+  },
+  {
+    date:'Sep', pendingReview:270, accepted:80, rejected:180, toRevise:170, revised:130,
+  },
+  {
+    date:'Oct', pendingReview:280, accepted:70, rejected:190, toRevise:160, revised:140,
+  },
+  {
+    date:'Nov', pendingReview:290, accepted:60, rejected:200, toRevise:150, revised:150,
+  },
+  {
+    date:'Dec', pendingReview:300, accepted:50, rejected:210, toRevise:140, revised:160,
+  },
+]
+
+const Template = (args) => (
+  <div style={{ height: '100%', width: '100%' }}>
+    <BarChart {...args} />
+  </div>
+)
+
+export const Default = Template.bind({})
+Default.args = {
+  data,
+  title :'Throughput',
+  xKey  :'date',
+  yKeys :['pendingReview', 'accepted', 'rejected', 'toRevise', 'revised'],
+  xLabel:'Date',
+  yLabel:'Submissions',
+  colors:['purple', 'green', 'orange', 'blue', 'red'],
+  height:400,
+}
+
+const TemplateSideBySide = (args) => (
+  <div style={{ display: 'flex', gap: '20px' }}>
+    <div style={{ flex: 1 }}>
+      {/* eslint-disable-next-line react/destructuring-assignment */}
+      <BarChart {...args[0]} />
+    </div>
+    <div style={{ flex: 1 }}>
+      {/* eslint-disable-next-line react/destructuring-assignment */}
+      <BarChart {...args[1]} />
+    </div>
+  </div>
+)
+
+export const SideBySide = TemplateSideBySide.bind({})
+SideBySide.args = [
+  {
+    ...Default.args,
+  },
+  {
+    ...Default.args,
+  },
+]

package/src/stories/a/PieChart.stories.jsx

@@ -0,0 +1,53 @@
+import React from 'react'
+import { PieChart } from 'ui'
+
+export default {
+  title    :'a/Charts/PieChart',
+  component:PieChart,
+}
+
+const data = [
+  { status: 'pendingReview', value: 230 },
+  { status: 'accepted', value: 350 },
+  { status: 'rejected', value: 80 },
+  { status: 'toRevise', value: 10 },
+  { status: 'revised', value: 60 },
+]
+
+const Template = (args) => (
+  <div style={{ height: '100%', width: '100%' }}>
+    <PieChart {...args} />
+  </div>
+)
+
+export const Default = Template.bind({})
+Default.args = {
+  data,
+  valueKey:'value',
+  labelKey:'status',
+  colors  :['#8CB0F8', '#7F7CF6', '#FFD66E', '#E8E9ED', '#F6BC7E'],
+  height  :400,
+}
+
+const TemplateSideBySide = (args) => (
+  <div style={{ display: 'flex', gap: '20px' }}>
+    <div style={{ flex: 1 }}>
+      {/* eslint-disable-next-line react/destructuring-assignment */}
+      <PieChart {...args[0]} />
+    </div>
+    <div style={{ flex: 1 }}>
+      {/* eslint-disable-next-line react/destructuring-assignment */}
+      <PieChart {...args[1]} />
+    </div>
+  </div>
+)
+
+export const SideBySide = TemplateSideBySide.bind({})
+SideBySide.args = [
+  {
+    ...Default.args,
+  },
+  {
+    ...Default.args,
+  },
+]