feat: revamp collection details

package.json

@@ -81,6 +81,7 @@
     "@storybook/addon-postcss": "^2.0.0",
     "@storybook/react": "^6.4.9",
     "@storybook/theming": "^6.4.9",
+    "@tailwindcss/forms": "^0.4.0",
     "@tailwindcss/line-clamp": "^0.3.1",
     "@types/react-table": "^7.7.9",
     "@typescript-eslint/parser": "^5.9.1",

src/components/atoms/checkbox/checkbox.stories.tsx

@@ -0,0 +1,17 @@
+import { ComponentMeta, ComponentStory } from "@storybook/react"
+import React from "react"
+import Checkbox from "."
+
+export default {
+  title: "Atoms/Checkbox",
+  component: Checkbox,
+} as ComponentMeta<typeof Checkbox>
+
+const Template: ComponentStory<typeof Checkbox> = (args) => (
+  <Checkbox {...args} />
+)
+
+export const Default = Template.bind({})
+Default.args = {
+  label: "Checkbox",
+}

src/components/atoms/checkbox/index.tsx

@@ -0,0 +1,35 @@
+import clsx from "clsx"
+import React, { useImperativeHandle } from "react"
+
+type CheckboxProps = React.InputHTMLAttributes<HTMLInputElement> & {
+  label: string
+}
+
+const Checkbox = React.forwardRef(
+  ({ label, value, className, id, ...rest }: CheckboxProps, ref) => {
+    const checkboxRef = React.useRef<HTMLInputElement>(null)
+
+    useImperativeHandle(ref, () => checkboxRef.current)
+    return (
+      <label
+        className={clsx(
+          "flex items-center inter-base-semibold cursor-pointer",
+          className
+        )}
+        htmlFor={id}
+      >
+        <input
+          type="checkbox"
+          ref={checkboxRef}
+          className="form-checkbox w-[20px] h-[20px] rounded-base text-violet-60 focus:ring-0 mr-small border-grey-30"
+          value={value}
+          id={id}
+          {...rest}
+        />
+        {label}
+      </label>
+    )
+  }
+)
+
+export default Checkbox

src/components/fundamentals/icons/check-icon.tsx

@@ -4,7 +4,7 @@ import IconProps from "./types/icon-type"
 const CheckIcon: React.FC<IconProps> = ({
   size = "24px",
   color = "currentColor",
-  attributes,
+  ...attributes
 }) => {
   return (
     <svg

src/components/molecules/indeterminate-checkbox/index.tsx

@@ -0,0 +1,58 @@
+import React, { forwardRef, useEffect, useRef } from "react"
+import CheckIcon from "../../fundamentals/icons/check-icon"
+
+interface Props {
+  indeterminate?: boolean
+  name: string
+}
+
+const useCombinedRefs = (...refs): React.MutableRefObject<any> => {
+  const targetRef = React.useRef()
+
+  React.useEffect(() => {
+    refs.forEach((ref) => {
+      if (!ref) {
+        return
+      }
+
+      if (typeof ref === "function") {
+        ref(targetRef.current)
+      } else {
+        ref.current = targetRef.current
+      }
+    })
+  }, [refs])
+
+  return targetRef
+}
+
+const IndeterminateCheckbox = forwardRef<HTMLInputElement, Props>(
+  ({ indeterminate, ...rest }, ref: React.Ref<HTMLInputElement>) => {
+    const defaultRef = useRef(null)
+    const combinedRef = useCombinedRefs(ref, defaultRef)
+
+    useEffect(() => {
+      if (combinedRef?.current) {
+        combinedRef.current.indeterminate = indeterminate ?? false
+      }
+    }, [combinedRef, indeterminate])
+
+    return (
+      <div className="items-center h-full flex">
+        <div
+          onClick={() => combinedRef.current?.click()}
+          className={`w-5 h-5 flex justify-center text-grey-0 border-grey-30 border cursor-pointer rounded-base ${
+            combinedRef.current?.checked && "bg-violet-60"
+          }`}
+        >
+          <span className="self-center">
+            {combinedRef.current?.checked && <CheckIcon size={16} />}
+          </span>
+        </div>
+        <input type="checkbox" className="hidden" ref={combinedRef} {...rest} />
+      </div>
+    )
+  }
+)
+
+export default IndeterminateCheckbox

src/components/molecules/table/index.tsx

@@ -83,12 +83,14 @@ const Table: TableType = React.forwardRef(
     return (
       <div className="flex flex-col">
         <div className="w-full flex justify-between mb-2">
-          {filteringOptions && (
+          {filteringOptions ? (
             <div className="flex mb-2 self-end">
               {Array.isArray(filteringOptions)
                 ? filteringOptions.map((fo) => <FilteringOptions {...fo} />)
                 : filteringOptions}
             </div>
+          ) : (
+            <span />
           )}
           <div className="flex">
             {enableSearch && (

src/components/molecules/view-raw/index.tsx

@@ -1,10 +1,10 @@
-import React, { useState } from "react"
-import ReactJson from "react-json-view"
 import * as Collapsible from "@radix-ui/react-collapsible"
-import ChevronDownIcon from "../../fundamentals/icons/chevron-down"
-import Button from "../../fundamentals/button"
 import clsx from "clsx"
+import React, { useState } from "react"
+import ReactJson from "react-json-view"
 import useClipboard from "../../../hooks/use-clipboard"
+import Button from "../../fundamentals/button"
+import ChevronDownIcon from "../../fundamentals/icons/chevron-down"
 import ClipboardCopyIcon from "../../fundamentals/icons/clipboard-copy-icon"
 
 type ViewRawProps = {
@@ -31,7 +31,8 @@ const ViewRaw: React.FC<ViewRawProps> = ({ raw, title = "Data", name }) => {
             <p className="inter-base-semibold">
               {title}{" "}
               <span className="inter-base-regular text-grey-50">
-                ({Object.keys(raw).length})
+                ({Object.keys(raw).length}{" "}
+                {Object.keys(raw).length === 1 ? "item" : "items"})
               </span>
             </p>
             <Button variant="ghost" size="small" className="text-grey-50">
@@ -49,11 +50,11 @@ const ViewRaw: React.FC<ViewRawProps> = ({ raw, title = "Data", name }) => {
             <ReactJson
               src={raw}
               enableClipboard={false}
-              shouldCollapse={false}
               style={{
                 fontFamily: "Roboto Mono",
                 fontSize: "12px",
               }}
+              shouldCollapse={false}
               name={name}
             />
           </div>
@@ -63,7 +64,10 @@ const ViewRaw: React.FC<ViewRawProps> = ({ raw, title = "Data", name }) => {
               variant="ghost"
               size="small"
               type="button"
-              onClick={handleCopy}
+              onClick={(e) => {
+                e.currentTarget.blur()
+                handleCopy()
+              }}
             >
               <ClipboardCopyIcon size={20} />
             </Button>

src/components/organisms/add-product-modal/index.tsx

@@ -0,0 +1,59 @@
+import React from "react"
+import Button from "../../fundamentals/button"
+import Modal from "../../molecules/modal"
+import AddProductsTable from "../../templates/collection-product-table/add-product-table"
+
+type AddProductModalProps = {
+  handleClose: () => void
+  onSubmit: (ids: any[]) => void
+  collectionProducts: any[]
+}
+
+const AddProductModal: React.FC<AddProductModalProps> = ({
+  handleClose,
+  onSubmit,
+  collectionProducts,
+}) => {
+  const [selectedProducts, setSelectedProducts] = React.useState<any[]>([])
+
+  const handleSelectProduct = () => {
+    if (selectedProducts.length > 0) {
+      onSubmit(selectedProducts.map((p) => p.id))
+    }
+  }
+
+  return (
+    <Modal handleClose={handleClose}>
+      <Modal.Body>
+        <Modal.Header handleClose={handleClose}>
+          <h3 className="inter-xlarge-semibold">Add Products</h3>
+        </Modal.Header>
+        <Modal.Content>
+          <div className="h-[650px]">
+            <AddProductsTable
+              addedProducts={collectionProducts}
+              setProducts={setSelectedProducts}
+            />
+          </div>
+        </Modal.Content>
+        <Modal.Footer>
+          <div className="flex items-center justify-end gap-x-xsmall w-full">
+            <Button variant="ghost" size="small" className="w-eventButton">
+              Cancel
+            </Button>
+            <Button
+              variant="primary"
+              size="small"
+              className="w-eventButton"
+              onClick={handleSelectProduct}
+            >
+              Save
+            </Button>
+          </div>
+        </Modal.Footer>
+      </Modal.Body>
+    </Modal>
+  )
+}
+
+export default AddProductModal