@bikdotai/bik-component-library 0.0.384-beta.28 → 0.0.384

package/dist/esm/components/product-picker-v2/rearrangeScreen.d.ts

@@ -1,18 +0,0 @@
-import React from 'react';
-import { SelectedItems } from '.';
-import { SelectedCollectionsActions } from './reducers';
-import { OUT_OF_STOCK_ACTION } from './type';
-interface RearrangeScreenInterface {
-    selectedCollections: SelectedItems;
-    selectedCollectionsDispatch: React.Dispatch<SelectedCollectionsActions>;
-    setScreen: React.Dispatch<React.SetStateAction<string>>;
-    rearrangeViewType: 'grid' | 'list';
-    outOfStockAction?: OUT_OF_STOCK_ACTION;
-}
-/**
- * Screen will be opened on two conditions -
- * 1. When startupScreen is 'rearrange'- Here, this screen will be opened as beginning.
-     2. When rearrangeAfterSelectionEnabled is true - Here instead of selected products screen, rearrange screen will be opened
- */
-export declare const RearrangeScreen: (props: RearrangeScreenInterface) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/esm/components/product-picker-v2/rearrangeScreen.js

@@ -1 +0,0 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import o from"../../assets/icons/arrow_left.svg.js";import{useState as r,useEffect as s}from"react";import{DragDropContext as c}from"react-beautiful-dnd";import{COLORS as i}from"../../constants/Theme.js";import{IconButton as n}from"../icon-button/IconButton.js";import{BodyCaption as l}from"../TypographyStyle.js";import{EmptyState as a}from"./emptyState.js";import{parseSelectedVariantsToArray as d}from"./helpers/ProductHelper.js";import{SelectedScreenHeader as p}from"./style.js";import{VariantsList as m,VariantsGrid as f}from"./variantComponents.js";const h=h=>{const{selectedCollections:u,selectedCollectionsDispatch:j,setScreen:y,rearrangeViewType:S,outOfStockAction:g}=h,[b,C]=r(d(u));s((()=>{C(d(u))}),[u]);return e(c,Object.assign({onDragEnd:e=>{if(!e.destination)return;const t=b,[o]=t.splice(e.source.index,1);t.splice(e.destination.index,0,o),t.forEach(((e,t)=>{e.displayOrder=t})),C(t)}},{children:[e(p,{children:[t(n,{Icon:o,width:16,height:16,color:i.content.secondary,onClick:()=>{y("collections")}}),t(l,Object.assign({color:i.content.secondary},{children:"All Products"}))]}),Object.keys(u).length>0?"list"===S?t(m,{selectedVariants:b,setSelectedVariants:C,selectedCollectionsDispatch:j,outOfStockAction:g}):t(f,{selectedVariants:b,setSelectedVariants:C,selectedCollectionsDispatch:j}):t(a,{title:"No Products Selected",subtitle:"Selected products will appear here"})]}))};export{h as RearrangeScreen};

package/dist/esm/components/product-picker-v2/variant.d.ts

@@ -1,32 +0,0 @@
-/// <reference types="react" />
-import { ProductVariant } from './modal';
-import { SelectedCollectionsActions } from './reducers';
-import { OUT_OF_STOCK_ACTION } from './type';
-/**
- * Extended type from Product Variant, which contains ids and name.
- */
-export type ProductVariantForRearrange = ProductVariant & {
-    variantId: string;
-    productId: string;
-    collectionId: string;
-    productName: string;
-};
-/**
- * Props type for variant card in rearrange screen
- */
-export interface VariantCardInterface {
-    data: ProductVariantForRearrange;
-    selectedCollectionsDispatch?: React.Dispatch<SelectedCollectionsActions>;
-    outOfStockAction?: OUT_OF_STOCK_ACTION;
-    onDelete?: () => void;
-}
-/**
- * Variant card in list view format.
- * Displays image, name and delete icon
- */
-export declare const VariantCardListView: (props: VariantCardInterface) => import("react/jsx-runtime").JSX.Element;
-/**
- * Variant card in grid view format.
- * Displays only image
- */
-export declare const VariantCardGridView: (props: VariantCardInterface) => import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/product-picker-v2/variant.js

@@ -1 +0,0 @@
-import{jsxs as t,jsx as e,Fragment as o}from"react/jsx-runtime";import i from"../../assets/icons/delete.svg.js";import r from"../../assets/icons/drag_handle.svg.js";import{COLORS as a}from"../../constants/Theme.js";import{IconButton as n}from"../icon-button/IconButton.js";import{ShimmerImage as l}from"../shimmer-image/ShimmerImage.js";import{TitleRegular as s}from"../TypographyStyle.js";import{truncate as c}from"./collectionScreen.js";import{ProductHelper as m}from"./helpers/ProductHelper.js";import{VariantCardListStyle as d,VariantCardGridStyle as h}from"./style.js";import{Tooltip as p}from"../tooltips/Tooltip.js";import{Tag as g}from"../tag/Tag.js";const j=h=>{const{data:j,selectedCollectionsDispatch:u,outOfStockAction:f}=h,b=m.getProductLabels(j,f),y=t=>{let e;return e=j.name.includes(j.productName)?j.name:`${j.productName} ${j.name}`,t?c(e,34,!0):e};return t(d,{children:[e(r,{width:24,height:24,color:a.content.placeholder}),e("div",{children:e(l,{width:40,height:40,imageUrl:j.image,alt:"Item",borderRadius:4},j.variantId)}),t("div",Object.assign({className:"tooltip-title-tag"},{children:[e(p,Object.assign({body:y(!1),placement:"bottom",delay:400},{children:e(s,{children:y(!0)})})),b?e("div",Object.assign({style:{width:90,display:"flex"}},{children:e(g,{tagText:b,type:"warning",theme:"light"})})):e(o,{})]})),e(n,{Icon:()=>e(i,{width:24,height:24,color:a.content.placeholder}),onClick:()=>{u&&u({type:"variantUnselected",data:{productId:j.productId,variantId:j.variantId,collectionId:j.collectionId}}),h.onDelete&&h.onDelete()}})]})},u=t=>{const{data:o}=t;return e(h,{children:e(p,Object.assign({body:o.name,alwaysVisible:!1,variant:"dark",placement:"bottom"},{children:e(l,{width:72,height:72,imageUrl:o.image,alt:"Item",borderRadius:4})}))})};export{u as VariantCardGridView,j as VariantCardListView};

package/dist/esm/components/product-picker-v2/variantComponents.d.ts

@@ -1,21 +0,0 @@
-/// <reference types="react" />
-import { SelectedCollectionsActions } from './reducers';
-import { OUT_OF_STOCK_ACTION } from './type';
-import { ProductVariantForRearrange } from './variant';
-/**
- * Props for list of variants - applicable both in list and grid view
- */
-export type VariantsComponentProps = {
-    selectedVariants: ProductVariantForRearrange[];
-    setSelectedVariants: React.Dispatch<React.SetStateAction<ProductVariantForRearrange[]>>;
-    selectedCollectionsDispatch: React.Dispatch<SelectedCollectionsActions>;
-    outOfStockAction?: OUT_OF_STOCK_ACTION;
-};
-/**
- * Returns a react component of variants list, which are eligible to drag and drop.
- */
-export declare const VariantsList: ({ selectedVariants, setSelectedVariants, selectedCollectionsDispatch, outOfStockAction, }: VariantsComponentProps) => import("react/jsx-runtime").JSX.Element;
-/**
- * Returns a react component of variants grid, which are eligible to drag and drop.
- */
-export declare const VariantsGrid: ({ selectedVariants }: VariantsComponentProps) => import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/product-picker-v2/variantComponents.js

@@ -1 +0,0 @@
-import{jsx as e,jsxs as r}from"react/jsx-runtime";import{useState as a}from"react";import{Droppable as t,Draggable as s}from"react-beautiful-dnd";import{COLORS as n}from"../../constants/Theme.js";import{VariantCardListView as d,VariantCardGridView as i}from"./variant.js";const l=i=>{let{selectedVariants:l,setSelectedVariants:o,selectedCollectionsDispatch:c,outOfStockAction:p}=i;const[g,b]=a(-1);function f(e){if(null==e?void 0:e.transform){const r=`translate(0px, ${e.transform.split(",").pop()}`;return Object.assign(Object.assign({},e),{transform:r})}return e}return e(t,Object.assign({droppableId:"droppable-list"},{children:(a,t)=>r("div",Object.assign({},a.droppableProps,{ref:a.innerRef,style:Object.assign({backgroundColor:n.surface.subdued,padding:"0.05px",height:l.length<8?"550px":"100%"},a.droppableProps.style)},{children:[l.map(((r,a)=>e("div",Object.assign({style:{background:n.surface.hovered,margin:"5px",boxShadow:a===g?"0px 4px 12px rgba(0, 0, 0, 0.12)":""},onMouseEnter:()=>b(a),onMouseLeave:()=>b(-1)},{children:e(s,Object.assign({draggableId:`${r.productId}-${r.variantId}`,index:a},{children:(t,s)=>e("div",Object.assign({ref:t.innerRef},t.draggableProps,t.dragHandleProps,{style:f(Object.assign(Object.assign({},t.draggableProps.style),t.draggableSnapshot))},{children:e(d,{data:r,selectedCollectionsDispatch:c,onDelete:()=>{const e=l.slice();e[a].displayOrder=null,e.splice(a,1),o(e)},outOfStockAction:p},`${r.productId}-${r.variantId}`)}))}),`${r.productId}-${r.variantId}`)}),`${r.productId}-${r.variantId}`))),a.placeholder&&t.isDraggingOver?e("div",Object.assign({style:{background:n.surface.hovered,margin:"5px"}},{children:a.placeholder})):null]}))}))},o=a=>{let{selectedVariants:n}=a;return e(t,Object.assign({droppableId:"droppable-horizontal"},{children:a=>r("div",Object.assign({},a.droppableProps,{ref:a.innerRef,style:Object.assign(Object.assign({},a.droppableProps.style),{display:"flex"})},{children:[e(t,Object.assign({droppableId:"droppable-vertical",direction:"horizontal"},{children:a=>r("div",Object.assign({},a.droppableProps,{ref:a.innerRef,style:Object.assign(Object.assign({},a.droppableProps.style),{display:"flex",flexWrap:"wrap",flexDirection:"row"})},{children:[n.map(((a,t)=>e(s,Object.assign({draggableId:`${a.productId}-${a.variantId}`,index:t},{children:(t,s)=>r("div",Object.assign({ref:t.innerRef},t.draggableProps,t.dragHandleProps,{children:[e(i,{data:a}),t.placeholder]}))}),`${a.productId}-${a.variantId}`))),a.placeholder]}))})),a.placeholder]}))}))};export{o as VariantsGrid,l as VariantsList};