feat: Orders list overview (#279)

medusajs · Feb 2, 2022 · 8da6d03 · 8da6d03
1 parent b8d91eb
commit 8da6d03
Show file tree

Hide file tree

Showing 28 changed files with 3,251 additions and 1,825 deletions.
diff --git a/package.json b/package.json
@@ -12,12 +12,14 @@
     "@emotion/core": "^10.0.28",
     "@emotion/styled": "^10.0.27",
     "@medusajs/medusa": "^1.1.61-alpha.14",
+    "@medusajs/medusa-js": "^1.0.11-adminc.21",
     "@popperjs/core": "^2.10.2",
     "@radix-ui/react-avatar": "^0.1.3",
     "@radix-ui/react-collapsible": "^0.1.5",
     "@radix-ui/react-dialog": "^0.1.5",
     "@radix-ui/react-dropdown-menu": "^0.1.4",
     "@radix-ui/react-popover": "^0.1.4",
+    "@radix-ui/react-portal": "^0.1.3",
     "@radix-ui/react-radio-group": "^0.1.4",
     "@radix-ui/react-tooltip": "^0.1.6",
     "@rebass/forms": "^4.0.6",
@@ -41,9 +43,9 @@
     "iso8601-duration": "^1.3.0",
     "jsonwebtoken": "^8.5.1",
     "lodash": "^4.17.21",
+    "medusa-react": "^0.1.4-adminc.21",
     "moment": "^2.27.0",
     "prop-types": "^15.7.2",
-    "qs": "^6.9.6",
     "query-string": "^6.13.1",
     "react": "^16.12.0",
     "react-collapse": "^5.0.1",
@@ -77,6 +79,7 @@
     "@storybook/react": "^6.4.9",
     "@storybook/theming": "^6.4.9",
     "@tailwindcss/line-clamp": "^0.3.1",
+    "@types/react-table": "^7.7.9",
     "@typescript-eslint/parser": "^5.9.1",
     "autoprefixer": "^10.4.1",
     "babel-loader": "^8.1.0",
@@ -87,7 +90,6 @@
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-react": "^7.28.0",
     "gatsby-plugin-postcss": "^5.4.0",
-    "medusa-react": "^0.1.2-alpha.23",
     "postcss": "^8.4.5",
     "prettier": "2.0.5",
     "react-query": "^3.34.7",

diff --git a/src/components/atoms/date-picker/date-picker.tsx b/src/components/atoms/date-picker/date-picker.tsx
@@ -1,27 +1,17 @@
+import * as PopoverPrimitive from "@radix-ui/react-popover"
+import clsx from "clsx"
+import moment from "moment"
 import React, { useEffect, useState } from "react"
 import ReactDatePicker from "react-datepicker"
 import "react-datepicker/dist/react-datepicker.css"
 import Button from "../../fundamentals/button"
-import moment from "moment"
-import ChevronRightIcon from "../../fundamentals/icons/chevron-right-icon"
 import ArrowDownIcon from "../../fundamentals/icons/arrow-down-icon"
 import ChevronLeftIcon from "../../fundamentals/icons/chevron-left-icon"
-import * as PopoverPrimitive from "@radix-ui/react-popover"
+import ChevronRightIcon from "../../fundamentals/icons/chevron-right-icon"
 import InputContainer from "../../fundamentals/input-container"
 import InputHeader from "../../fundamentals/input-header"
-import clsx from "clsx"
 import { DateTimePickerProps } from "./types"
 
-const getDateClassname = (d, tempDate) => {
-  return moment(d).format("YY,MM,DD") === moment(tempDate).format("YY,MM,DD")
-    ? "date chosen"
-    : `date ${
-        moment(d).format("YY,MM,DD") < moment(new Date()).format("YY,MM,DD")
-          ? "past"
-          : ""
-      }`
-}
-
 const DatePicker: React.FC<DateTimePickerProps> = ({
   date,
   onSubmitDate,
@@ -80,7 +70,6 @@ const DatePicker: React.FC<DateTimePickerProps> = ({
           className="rounded-rounded px-8  border border-grey-20 bg-grey-0 w-full shadow-dropdown"
         >
           <CalendarComponent date={tempDate} onChange={setTempDate} />
-
           <div className="flex w-full mb-8 mt-5">
             <Button
               variant="ghost"

diff --git a/src/components/atoms/date-picker/time-picker.tsx b/src/components/atoms/date-picker/time-picker.tsx
@@ -1,12 +1,12 @@
-import React, { useEffect, useState } from "react"
+import * as PopoverPrimitive from "@radix-ui/react-popover"
+import clsx from "clsx"
 import moment from "moment"
+import React, { useEffect, useState } from "react"
 import ArrowDownIcon from "../../fundamentals/icons/arrow-down-icon"
 import ClockIcon from "../../fundamentals/icons/clock-icon"
-import NumberScroller from "../number-scroller"
-import * as PopoverPrimitive from "@radix-ui/react-popover"
 import InputContainer from "../../fundamentals/input-container"
 import InputHeader from "../../fundamentals/input-header"
-import clsx from "clsx"
+import NumberScroller from "../number-scroller"
 import { DateTimePickerProps } from "./types"
 
 const TimePicker: React.FC<DateTimePickerProps> = ({

diff --git a/src/components/filter-dropdown-item/index.js b/src/components/filter-dropdown-item/index.js
@@ -61,7 +61,7 @@ const FilterDropdownItem = ({
 
   const prefill = () => {
     try {
-      const prefilled = filters.split(",").reduce((acc, f) => {
+      const prefilled = filters.reduce((acc, f) => {
         acc[f] = true
         return acc
       }, {})
@@ -104,7 +104,7 @@ const FilterDropdownItem = ({
 
     setChecked(checkedState)
 
-    setFilter({ open: open, filter: newFilter.join(",").toString() })
+    setFilter({ open: open, filter: newFilter })
   }
 
   return (
@@ -181,11 +181,13 @@ const DateFilter = ({
   existingFilter,
   filterTitle,
 }) => {
+  console.warn("heyo", existingDate, existingFilter)
   const [currentFilter, setCurrentFilter] = useState(
     existingFilter || undefined
   )
   const [startDate, setStartDate] = useState(null)
   const [endDate, setEndDate] = useState(new Date())
+  const [relativeFilter, setRelativeFilter] = useState(null)
   const select_ref = useRef()
   const input_ref = useRef()
 
@@ -332,7 +334,7 @@ const DateFilter = ({
         )
 
       default:
-        return <Box>{currentFilter} - comming soon!</Box>
+        return <Box>{currentFilter} - coming soon!</Box>
     }
   }
   return (

diff --git a/src/components/fundamentals/icons/details-icon.tsx b/src/components/fundamentals/icons/details-icon.tsx
@@ -0,0 +1,57 @@
+import React from "react"
+import IconProps from "./types/icon-type"
+
+const DetailsIcon: React.FC<IconProps> = ({
+  size = "16",
+  color = "currentColor",
+  ...attributes
+}) => {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...attributes}
+    >
+      <path
+        d="M15.4444 17H4.55556C3.7 17 3 16.35 3 15.5556V5.44444C3 4.65 3.7 4 4.55556 4H15.4444C16.3 4 17 4.65 17 5.44444V15.5556C17 16.35 16.3 17 15.4444 17Z"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M13 2.43994V3.43994"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M7 2.43994V3.43994"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M10 10.7632C11.1046 10.7632 12 9.86775 12 8.76318C12 7.65861 11.1046 6.76318 10 6.76318C8.89543 6.76318 8 7.65861 8 8.76318C8 9.86775 8.89543 10.7632 10 10.7632Z"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M14 14.2979C12.88 13.6312 11.52 13.2979 10 13.2979C8.48 13.2979 7.12 13.6979 6 14.2979"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
+
+export default DetailsIcon
diff --git a/src/components/fundamentals/icons/list-icon.tsx b/src/components/fundamentals/icons/list-icon.tsx
@@ -0,0 +1,64 @@
+import React from "react"
+import IconProps from "./types/icon-type"
+
+const ListIcon: React.FC<IconProps> = ({
+  size = "20px",
+  color = "currentColor",
+  ...attributes
+}) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...attributes}
+    >
+      <path
+        d="M6.66669 5H17.5"
+        stroke={color}
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M6.66669 10H17.5"
+        stroke={color}
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M6.66669 15H17.5"
+        stroke={color}
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M2.5 5H2.50875"
+        stroke={color}
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M2.5 10H2.50875"
+        stroke={color}
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M2.5 15H2.50875"
+        stroke={color}
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  )
+}
+
+export default ListIcon
diff --git a/src/components/fundamentals/icons/tile-icon.tsx b/src/components/fundamentals/icons/tile-icon.tsx
@@ -0,0 +1,50 @@
+import React from "react"
+import IconProps from "./types/icon-type"
+
+const TileIcon: React.FC<IconProps> = ({
+  size = "20px",
+  color = "currentColor",
+  ...attributes
+}) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...attributes}
+    >
+      <path
+        d="M8.5 3.5H3.5V8.5H8.5V3.5Z"
+        stroke={color}
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M16.5 3.5H11.5V8.5H16.5V3.5Z"
+        stroke={color}
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M16.5 11.5H11.5V16.5H16.5V11.5Z"
+        stroke={color}
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M8.5 11.5H3.5V16.5H8.5V11.5Z"
+        stroke={color}
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  )
+}
+
+export default TileIcon
diff --git a/src/components/fundamentals/image-placeholder.tsx b/src/components/fundamentals/image-placeholder.tsx
@@ -0,0 +1,25 @@
+import React from "react"
+import IconProps from "./icons/types/icon-type"
+
+const ImagePlaceholder: React.FC<IconProps> = ({
+  size = "38",
+  color = "#b8b8bf",
+  ...attributes
+}) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 64 48"
+    >
+      <path
+        fill={color}
+        d="M56,0H8A8,8,0,0,0,0,8V40a7.27,7.27,0,0,0,.48,2.64A8.05,8.05,0,0,0,4,46.91,8.1,8.1,0,0,0,8,48H56a8.08,8.08,0,0,0,6.72-3.65A8.18,8.18,0,0,0,64,40V8A8,8,0,0,0,56,0ZM33,42.67H8a2.35,2.35,0,0,1-.83-.16L21.65,22.75,33.52,34.61l3.76,3.76,4.27,4.3ZM58.67,40A2.68,2.68,0,0,1,56,42.67H49.12l-8-8.06,6.82-6.74,10.78,12Zm0-8.13L50,22.21a2.72,2.72,0,0,0-1.89-.88,2.53,2.53,0,0,0-1.95.78l-8.82,8.74L23.23,16.77A2.84,2.84,0,0,0,21.12,16a2.76,2.76,0,0,0-1.95,1.09L5.33,36V8A2.68,2.68,0,0,1,8,5.33H56A2.68,2.68,0,0,1,58.67,8Z"
+      />
+      <circle fill={color} cx="37.33" cy="18.67" r="5.33" />
+    </svg>
+  )
+}
+
+export default ImagePlaceholder
diff --git a/src/components/fundamentals/input-header.tsx b/src/components/fundamentals/input-header.tsx
@@ -2,7 +2,7 @@ import React from "react"
 import InfoTooltip from "../molecules/info-tooltip"
 
 export type InputHeaderProps = {
-  label: string
+  label?: string
   required?: boolean
   tooltipContent?: string
   tooltip?: React.ReactNode