@bitrise/bitkit 13.38.0 → 13.39.1-alpha.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "13.38.0",
+  "version": "13.39.1-alpha.0",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@github.com/bitrise-io/bitkit.git"

package/src/Components/DraggableCard/DraggableCard.theme.ts

@@ -0,0 +1,54 @@
+/* eslint-disable no-underscore-dangle */
+import { createMultiStyleConfigHelpers } from '@chakra-ui/styled-system';
+
+const keys = ['card', 'wrapper', 'handler'];
+const { defineMultiStyleConfig } = createMultiStyleConfigHelpers(keys);
+
+const DraggableCardTheme = defineMultiStyleConfig({
+  baseStyle: ({ isDragging, isOverlay }) => {
+    const style: Record<string, any> = {
+      card: {
+        _hover: {
+          borderColor: isDragging ? undefined : 'border/regular',
+        },
+      },
+      wrapper: {
+        position: 'relative',
+        padding: '16',
+        paddingInlineStart: '32',
+        display: 'flex',
+        visibility: isDragging ? 'hidden' : 'visible',
+      },
+      handler: {
+        cursor: isOverlay ? 'grabbing' : 'grab',
+        position: 'absolute',
+        left: 0,
+        top: 0,
+        bottom: 0,
+        padding: '8',
+        borderStartRadius: 7,
+        color: 'icon/tertiary',
+        _hover: {
+          backgroundColor: isOverlay ? 'background/active' : 'background/hover',
+          color: 'icon/secondary',
+        },
+      },
+    };
+
+    if (isDragging) {
+      style.card.backgroundColor = 'background/secondary';
+      style.card.borderColor = 'border/strong';
+      style.card.borderStyle = 'dashed';
+    }
+    if (isOverlay) {
+      style.card._hover = {
+        borderColor: 'border/strong',
+        boxShadow: 'large',
+      };
+    }
+
+    return style;
+  },
+});
+
+export default DraggableCardTheme;

package/src/Components/DraggableCard/DraggableCard.tsx

@@ -0,0 +1,39 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable no-underscore-dangle */
+import { ForwardedRef, forwardRef } from 'react';
+import { useMultiStyleConfig } from '@chakra-ui/react';
+import Box from '../Box/Box';
+import Card, { CardProps } from '../Card/Card';
+
+export interface DraggableCardProps extends CardProps {
+  activatorListeners?: any;
+  activatorRef?: ForwardedRef<HTMLElement>;
+  isDragging?: boolean;
+  isOverlay?: boolean;
+}
+
+const DraggableCard = forwardRef<HTMLDivElement, DraggableCardProps>((props, ref) => {
+  const { activatorListeners, activatorRef, children, cursor, isDragging, isOverlay, ...rest } = props;
+
+  const style = useMultiStyleConfig('DraggableCard', props);
+
+  return (
+    <Card ref={ref} {...rest} sx={style.card}>
+      <Box visibility={isDragging ? 'hidden' : 'visible'} sx={style.wrapper}>
+        <Box as="button" ref={activatorRef} {...activatorListeners} sx={style.handler}>
+          <svg width="8" height="12" viewBox="0 0 8 12" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+            <circle cx="2" cy="2" r="1" />
+            <circle cx="6" cy="2" r="1" />
+            <circle cx="2" cy="6" r="1" />
+            <circle cx="6" cy="6" r="1" />
+            <circle cx="2" cy="10" r="1" />
+            <circle cx="6" cy="10" r="1" />
+          </svg>
+        </Box>
+        {children}
+      </Box>
+    </Card>
+  );
+});
+
+export default DraggableCard;

package/src/Components/components.theme.ts

@@ -47,6 +47,7 @@ import Filter from './Filter/Filter.theme';
 import Toggletip from './Toggletip/Toggletip.theme';
 import FilterSwitch from './Filter/FilterSwitch/FilterSwitch.theme';
 import TagsInput from './Form/TagsInput/TagsInput.theme';
+import DraggableCard from './DraggableCard/DraggableCard.theme';
 
 const components = {
   Accordion,
@@ -69,6 +70,7 @@ const components = {
   CodeSnippet,
   DatePickerDay,
   DefinitionTooltip,
+  DraggableCard,
   ExpandableCard,
   FileInput,
   Filter,

package/src/index.ts

@@ -327,3 +327,6 @@ export { default as DateInput, dateInputDateFormat } from './Components/Form/Dat
 
 export type { TagsInputProps } from './Components/Form/TagsInput/TagsInput';
 export { default as TagsInput } from './Components/Form/TagsInput/TagsInput';
+
+export type { DraggableCardProps } from './Components/DraggableCard/DraggableCard';
+export { default as DraggableCard } from './Components/DraggableCard/DraggableCard';