Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
react-trello-ts
Advanced tools
react-trello-ts - npm Package Compare versions
Comparing version 2.0.16 to 2.0.17-canary.2b1a9f5
@@ -1,15 +0,413 @@ | ||
| /// <reference types="react" /> | ||
| import { Draggable } from "./dnd/Draggable"; | ||
| import Container from "./dnd/Container"; | ||
| import { BoardContainer, BoardContainerProps } from "./controllers/BoardContainer"; | ||
| import { Lane } from "./controllers/Lane"; | ||
| import * as DefaultComponents from "./components"; | ||
| import locales from "./locales"; | ||
| export * from "./widgets"; | ||
| import createTranslate from "./helpers/createTranslate"; | ||
| export { Draggable, Container, BoardContainer, Lane, createTranslate, locales }; | ||
| export { DefaultComponents as components }; | ||
| import React, { FC, PropsWithChildren, HTMLAttributes, CSSProperties, Component, ReactElement } from 'react'; | ||
| import * as styled_components from 'styled-components'; | ||
| import { ThemedStyledFunction } from 'styled-components'; | ||
| declare const GlobalStyle: styled_components.GlobalStyleComponent<{}, styled_components.DefaultTheme>; | ||
| declare const BoardWrapper: styled_components.StyledComponent<"div", any, {}, never>; | ||
| declare const Section: styled_components.StyledComponent<"section", any, {}, never>; | ||
| declare const ScrollableLane: styled_components.StyledComponent<"div", any, { | ||
| isDraggingOver?: boolean; | ||
| }, never>; | ||
| interface AddCardLinkProps extends HTMLAttributes<HTMLAnchorElement | HTMLButtonElement> { | ||
| t: typeof _default$2; | ||
| } | ||
| declare const AddCardLink: FC<PropsWithChildren<AddCardLinkProps>>; | ||
| interface BoardData { | ||
| lanes: Lane$1[]; | ||
| } | ||
| interface Lane$1 { | ||
| id: string; | ||
| title?: string; | ||
| label?: string; | ||
| style?: CSSProperties; | ||
| cards?: Card$1[]; | ||
| currentPage?: number; | ||
| droppable?: boolean; | ||
| labelStyle?: CSSProperties; | ||
| cardStyle?: CSSProperties; | ||
| disallowAddingCard?: boolean; | ||
| [key: string]: any; | ||
| } | ||
| interface Card$1 { | ||
| id: string; | ||
| title?: string; | ||
| label?: string; | ||
| description?: string; | ||
| laneId?: string; | ||
| style?: CSSProperties; | ||
| draggable?: boolean; | ||
| [key: string]: any; | ||
| } | ||
| interface TagProps { | ||
| title: string; | ||
| color?: string; | ||
| bgcolor?: string; | ||
| tagStyle?: CSSProperties; | ||
| } | ||
| /** | ||
| * Card component type | ||
| * | ||
| * Pass in a type to the optional generic to add custom properties to the card | ||
| * | ||
| * @example | ||
| * | ||
| * type CustomCardProps = { | ||
| * dueOn: string; | ||
| * } | ||
| * | ||
| * const CustomCard: CardComponent<CustomCardProps> = ({ dueOn, ...props }) => { | ||
| * return ( | ||
| * <Card {...props}> | ||
| * <Detail>{dueOn}</Detail> | ||
| * </Card> | ||
| * ) | ||
| * } | ||
| */ | ||
| type CardComponent<TCustomCardProps extends {} = object> = FC<PropsWithChildren<CardProps & TCustomCardProps>>; | ||
| type CardProps = { | ||
| showDeleteButton?: boolean; | ||
| onDelete?: () => void; | ||
| onClick?: (e: any) => void; | ||
| onChange?: (card: Card$1) => void; | ||
| style?: CSSProperties; | ||
| tagStyle?: CSSProperties; | ||
| className?: string; | ||
| id: string; | ||
| index: number; | ||
| title?: string; | ||
| label?: string; | ||
| description?: string; | ||
| tags?: TagProps[]; | ||
| cardDraggable?: boolean; | ||
| editable?: boolean; | ||
| metadata?: Record<string, any>; | ||
| t: typeof _default$2; | ||
| }; | ||
| declare const Card: CardComponent; | ||
| type LaneFooterComponent = FC<PropsWithChildren<LaneFooterProps>>; | ||
| interface LaneFooterProps extends HTMLAttributes<HTMLDivElement> { | ||
| collapsed?: boolean; | ||
| } | ||
| declare const LaneFooter: LaneFooterComponent; | ||
| declare const _default$2: (table: any) => (key: any) => any; | ||
| type LaneHeaderProps = _LaneHeaderProps & { | ||
| [key: string]: any; | ||
| }; | ||
| interface _LaneHeaderProps extends HTMLAttributes<HTMLHeadElement> { | ||
| updateTitle?: (title: string) => void; | ||
| canAddLanes?: boolean; | ||
| onDelete?: () => void; | ||
| editLaneTitle?: boolean; | ||
| label?: string; | ||
| titleStyle?: CSSProperties; | ||
| labelStyle?: CSSProperties; | ||
| laneDraggable?: boolean; | ||
| t: typeof _default$2; | ||
| } | ||
| declare const LaneHeader: FC<PropsWithChildren<LaneHeaderProps>>; | ||
| declare const Loader: () => React.JSX.Element; | ||
| interface FormState { | ||
| title: string; | ||
| description: string; | ||
| label: string; | ||
| laneId: string; | ||
| } | ||
| interface NewCardFormProps { | ||
| laneId: string; | ||
| onCancel: () => void; | ||
| onAdd: (formState: FormState) => void; | ||
| t: typeof _default$2; | ||
| } | ||
| declare const NewCardForm: FC<NewCardFormProps>; | ||
| interface NewLaneFormProps extends HTMLAttributes<ThemedStyledFunction<"section", object, object, never>> { | ||
| onCancel: () => void; | ||
| onAdd: ({ id, title }: { | ||
| id: string; | ||
| title: string; | ||
| }) => void; | ||
| t: typeof _default$2; | ||
| } | ||
| declare const NewLaneForm: FC<PropsWithChildren<NewLaneFormProps>>; | ||
| declare const NewLaneSection: FC<PropsWithChildren<{ | ||
| t: typeof _default$2; | ||
| onClick: () => void; | ||
| }>>; | ||
| declare const components_AddCardLink: typeof AddCardLink; | ||
| declare const components_BoardWrapper: typeof BoardWrapper; | ||
| declare const components_Card: typeof Card; | ||
| declare const components_GlobalStyle: typeof GlobalStyle; | ||
| declare const components_LaneFooter: typeof LaneFooter; | ||
| declare const components_LaneHeader: typeof LaneHeader; | ||
| declare const components_Loader: typeof Loader; | ||
| declare const components_NewCardForm: typeof NewCardForm; | ||
| declare const components_NewLaneForm: typeof NewLaneForm; | ||
| declare const components_NewLaneSection: typeof NewLaneSection; | ||
| declare const components_ScrollableLane: typeof ScrollableLane; | ||
| declare const components_Section: typeof Section; | ||
| declare namespace components { | ||
| export { components_AddCardLink as AddCardLink, components_BoardWrapper as BoardWrapper, components_Card as Card, components_GlobalStyle as GlobalStyle, components_LaneFooter as LaneFooter, components_LaneHeader as LaneHeader, components_Loader as Loader, components_NewCardForm as NewCardForm, components_NewLaneForm as NewLaneForm, components_NewLaneSection as NewLaneSection, components_ScrollableLane as ScrollableLane, components_Section as Section }; | ||
| } | ||
| interface EventBusHandle { | ||
| publish: (event: EventBusEvent) => any; | ||
| } | ||
| type EventBusEvent = { | ||
| type: "ADD_CARD"; | ||
| laneId: string; | ||
| card: Card$1; | ||
| index?: number; | ||
| } | { | ||
| type: "UPDATE_CARD"; | ||
| laneId: string; | ||
| card: Card$1; | ||
| } | { | ||
| type: "REMOVE_CARD"; | ||
| laneId: string; | ||
| cardId: string; | ||
| } | { | ||
| type: "REFRESH_BOARD"; | ||
| data: BoardData; | ||
| } | { | ||
| type: "MOVE_CARD"; | ||
| fromLaneId: string; | ||
| toLaneId: string; | ||
| cardId: string; | ||
| index: number; | ||
| } | { | ||
| type: "UPDATE_CARDS"; | ||
| laneId: string; | ||
| cards: Card$1[]; | ||
| } | { | ||
| type: "UPDATE_LANES"; | ||
| lanes: BoardData["lanes"]; | ||
| } | { | ||
| type: "UPDATE_LANE"; | ||
| laneId: string; | ||
| lane: Lane$1; | ||
| }; | ||
| interface BoardContainerProps { | ||
| id?: string; | ||
| components?: Partial<typeof components>; | ||
| className?: string; | ||
| data: BoardData; | ||
| reducerData?: BoardData; | ||
| onDataChange?: (reducerData: BoardData) => void; | ||
| eventBusHandle?: (handle: EventBusHandle) => void; | ||
| onLaneScroll?: (requestedPage: any, laneId: any) => Promise<unknown>; | ||
| onCardClick?: (cardId: Card$1["id"], metadata: { | ||
| id: string; | ||
| }, card: Card$1) => void; | ||
| onBeforeCardDelete?: () => void; | ||
| onCardDelete?: (cardId: string, laneId: string) => void; | ||
| onCardAdd?: (card: Card$1, laneId: string) => void; | ||
| onCardUpdate?: (cardId: string, data: Card$1) => void; | ||
| onLaneAdd?: (laneAddParams: FormState) => void; | ||
| onLaneDelete?: () => void; | ||
| onLaneClick?: (laneId: string) => void; | ||
| onLaneUpdate?: (laneId: string, data: Lane$1) => void; | ||
| laneSortFunction?: (cardA: Card$1, cardB: Card$1) => number; | ||
| draggable?: boolean; | ||
| collapsibleLanes?: boolean; | ||
| editable?: boolean; | ||
| canAddLanes?: boolean; | ||
| hideCardDeleteAction?: boolean; | ||
| hideCardDeleteIcon?: boolean; | ||
| handleDragStart?: (cardId: string, laneId: string) => void; | ||
| handleDragEnd?: (cardId: Card$1["id"], sourceLandId: Lane$1["id"], targetLaneId: Lane$1["id"], position: number, card: Card$1) => void; | ||
| handleLaneDragStart?: (payloadId: string) => void; | ||
| handleLaneDragEnd?: (removedIndex: string, addedIndex: string, payload: Lane$1) => void; | ||
| style?: CSSProperties; | ||
| tagStyle?: CSSProperties; | ||
| laneStyle?: CSSProperties; | ||
| cardStyle?: CSSProperties; | ||
| laneDraggable?: boolean; | ||
| cardDraggable?: boolean; | ||
| cardDragClass?: string; | ||
| laneDragClass?: string; | ||
| laneDropClass?: string; | ||
| editLaneTitle?: boolean; | ||
| onCardMoveAcrossLanes?: (fromLaneId: string, toLaneId: string, cardId: string, addedIndex: string) => void; | ||
| t?: typeof _default$2; | ||
| } | ||
| declare const BoardContainer: FC<PropsWithChildren<BoardContainerProps>>; | ||
| interface LaneProps { | ||
| id: string; | ||
| index?: number; | ||
| boardId?: string; | ||
| title?: string; | ||
| label?: string; | ||
| cards?: any[]; | ||
| style?: any; | ||
| collapsibleLanes?: boolean; | ||
| className?: string; | ||
| titleStyle?: any; | ||
| titleClassName?: string; | ||
| labelStyle?: any; | ||
| labelClassName?: string; | ||
| cardStyle?: any; | ||
| cardClassName?: string; | ||
| currentPage?: number; | ||
| draggable?: boolean; | ||
| droppable?: boolean; | ||
| editable?: boolean; | ||
| canAddLanes?: boolean; | ||
| laneSortFunction?: (cardA: Card$1, cardB: Card$1) => number; | ||
| hideCardDeleteIcon?: boolean; | ||
| cardDraggable?: boolean; | ||
| cardDragClass?: string; | ||
| cardDropClass?: string; | ||
| tagStyle?: CSSProperties; | ||
| components?: Partial<typeof components>; | ||
| onLaneScroll?: (page: number, laneId: string) => Promise<unknown>; | ||
| onLaneAdd?: (params: any) => void; | ||
| onLaneDelete?: (laneId: string) => void; | ||
| onLaneUpdate?: (laneId: string, data: Lane$1) => void; | ||
| onCardClick?: (cardId: string, metadata: { | ||
| id: string; | ||
| }, card: Card$1) => void; | ||
| onCardAdd?: (card: any, laneId: string) => void; | ||
| onCardDelete?: (cardId: string, laneId: string) => void; | ||
| onCardUpdate?: (laneId: string, card: any) => void; | ||
| onBeforeCardDelete?: (callback: () => void) => void; | ||
| onCardMoveAcrossLanes?: (fromLaneId: string, toLaneId: string, cardId: string, index: string) => void; | ||
| onLaneClick?: (laneId: string) => void; | ||
| handleDragStart?: (cardId: string, laneId: string) => void; | ||
| handleDragEnd?: (cardId: string, payloadLaneId: string, laneId: string, addedIndex: number, newCard: Card$1) => void; | ||
| getCardDetails?: (laneId: string, cardIndex: number) => any; | ||
| t?: typeof _default$2; | ||
| } | ||
| declare const Lane: FC<PropsWithChildren<LaneProps>>; | ||
| interface ContainerProps { | ||
| behaviour?: "move" | "copy" | "drag-zone"; | ||
| groupName?: string; | ||
| orientation?: "horizontal" | "vertical"; | ||
| style?: object; | ||
| dragHandleSelector?: string; | ||
| className?: string; | ||
| nonDragAreaSelector?: string; | ||
| dragBeginDelay?: number; | ||
| animationDuration?: number; | ||
| autoScrollEnabled?: string; | ||
| lockAxis?: string; | ||
| dragClass?: string; | ||
| dropClass?: string; | ||
| onDragStart?: (params: any) => void; | ||
| onDragEnd?: (laneId: string, result: { | ||
| addedIndex: any; | ||
| payload: any; | ||
| }) => void; | ||
| onDrop?: (params: any) => void; | ||
| onDropReady?: (params: any) => void; | ||
| getChildPayload?: (index: number) => any; | ||
| shouldAnimateDrop?: (params: any) => boolean; | ||
| shouldAcceptDrop?: (params: any) => boolean; | ||
| onDragEnter?: (params: any) => void; | ||
| onDragLeave?: (params: any) => void; | ||
| render?: (params: any) => any; | ||
| getGhostParent?: () => any; | ||
| removeOnDropOut?: boolean; | ||
| } | ||
| declare class Container extends Component<ContainerProps> { | ||
| containerDiv: typeof Container | Element | Text; | ||
| prevContainer: typeof Container | Element | Text; | ||
| container: any; | ||
| constructor(props: any); | ||
| componentDidMount(): void; | ||
| componentWillUnmount(): void; | ||
| componentDidUpdate(): void; | ||
| render(): any; | ||
| setRef(element: any): void; | ||
| getContainerOptions(): Readonly<ContainerProps> & Readonly<{ | ||
| children?: React.ReactNode; | ||
| }> & Pick<ContainerProps, "render" | "onDragEnd" | "onDragEnter" | "onDragLeave" | "onDragStart" | "onDrop" | "onDropReady" | "getChildPayload" | "shouldAnimateDrop" | "shouldAcceptDrop" | "getGhostParent">; | ||
| } | ||
| declare class Draggable extends Component<{ | ||
| render?: () => ReactElement; | ||
| className?: string; | ||
| }> { | ||
| render(): React.JSX.Element; | ||
| } | ||
| declare const _default$1: { | ||
| en: { | ||
| translation: { | ||
| "Add another lane": string; | ||
| "Click to add card": string; | ||
| "Delete lane": string; | ||
| "Lane actions": string; | ||
| button: { | ||
| "Add lane": string; | ||
| "Add card": string; | ||
| Cancel: string; | ||
| }; | ||
| placeholder: { | ||
| title: string; | ||
| description: string; | ||
| label: string; | ||
| }; | ||
| }; | ||
| }; | ||
| ru: { | ||
| translation: { | ||
| "Add another lane": string; | ||
| "Click to add card": string; | ||
| "Delete lane": string; | ||
| "Lane actions": string; | ||
| button: { | ||
| "Add card": string; | ||
| "Add lane": string; | ||
| Cancel: string; | ||
| }; | ||
| placeholder: { | ||
| title: string; | ||
| description: string; | ||
| label: string; | ||
| }; | ||
| }; | ||
| }; | ||
| }; | ||
| type DeleteButtonProps = HTMLAttributes<HTMLDivElement>; | ||
| declare const DeleteButton: FC<PropsWithChildren<DeleteButtonProps>>; | ||
| interface EditableLabelProps { | ||
| onChange?: (labelText: string) => void; | ||
| placeholder?: string; | ||
| autoFocus?: boolean; | ||
| inline?: boolean; | ||
| value?: string; | ||
| } | ||
| declare const EditableLabel: FC<PropsWithChildren<EditableLabelProps>>; | ||
| interface InlineInputProps { | ||
| onSave?: (inputValue: string) => void; | ||
| onCancel?: () => void; | ||
| border?: boolean; | ||
| placeholder?: string; | ||
| value?: string; | ||
| autoFocus?: boolean; | ||
| resize?: "none" | "vertical" | "horizontal"; | ||
| } | ||
| declare const InlineInput: FC<InlineInputProps>; | ||
| declare const _default: ({ components, lang, ...otherProps }: BoardContainerProps & { | ||
| lang?: keyof typeof locales; | ||
| }) => JSX.Element; | ||
| export default _default; | ||
| lang?: keyof typeof _default$1; | ||
| }) => React.JSX.Element; | ||
| export { BoardContainer, Container, DeleteButton, Draggable, EditableLabel, InlineInput, Lane, components, _default$2 as createTranslate, _default as default, _default$1 as locales }; |
1956
dist/index.js
@@ -1,99 +0,1881 @@ | ||
| "use strict"; | ||
| var __create = Object.create; | ||
| var __defProp = Object.defineProperty; | ||
| var __getOwnPropDesc = Object.getOwnPropertyDescriptor; | ||
| var __getOwnPropNames = Object.getOwnPropertyNames; | ||
| var __getProtoOf = Object.getPrototypeOf; | ||
| var __hasOwnProp = Object.prototype.hasOwnProperty; | ||
| var __export = (target, all) => { | ||
| for (var name in all) | ||
| __defProp(target, name, { get: all[name], enumerable: true }); | ||
| }; | ||
| var __copyProps = (to, from, except, desc) => { | ||
| if (from && typeof from === "object" || typeof from === "function") { | ||
| for (let key of __getOwnPropNames(from)) | ||
| if (!__hasOwnProp.call(to, key) && key !== except) | ||
| __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable }); | ||
| } | ||
| return to; | ||
| }; | ||
| var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps( | ||
| // If the importer is in node compatibility mode or this is not an ESM | ||
| // file that has been converted to a CommonJS file using a Babel- | ||
| // compatible transform (i.e. "__esModule" has not been set), then set | ||
| // "default" to the CommonJS "module.exports" for node compatibility. | ||
| isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, | ||
| mod | ||
| )); | ||
| var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod); | ||
| var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); | ||
| Object.defineProperty(exports, "__esModule", { | ||
| value: true | ||
| // src/index.tsx | ||
| var src_exports = {}; | ||
| __export(src_exports, { | ||
| BoardContainer: () => BoardContainer, | ||
| Container: () => Container_default, | ||
| DeleteButton: () => DeleteButton, | ||
| Draggable: () => Draggable, | ||
| EditableLabel: () => EditableLabel, | ||
| InlineInput: () => InlineInput2, | ||
| Lane: () => Lane, | ||
| components: () => components_exports, | ||
| createTranslate: () => createTranslate_default, | ||
| default: () => src_default, | ||
| locales: () => locales_default | ||
| }); | ||
| var _exportNames = { | ||
| Draggable: true, | ||
| Container: true, | ||
| BoardContainer: true, | ||
| Lane: true, | ||
| components: true, | ||
| locales: true, | ||
| createTranslate: true | ||
| module.exports = __toCommonJS(src_exports); | ||
| var import_react21 = __toESM(require("react")); | ||
| // src/components/index.ts | ||
| var components_exports = {}; | ||
| __export(components_exports, { | ||
| AddCardLink: () => AddCardLink2, | ||
| BoardWrapper: () => BoardWrapper, | ||
| Card: () => Card, | ||
| GlobalStyle: () => GlobalStyle, | ||
| LaneFooter: () => LaneFooter2, | ||
| LaneHeader: () => LaneHeader2, | ||
| Loader: () => Loader, | ||
| NewCardForm: () => NewCardForm, | ||
| NewLaneForm: () => NewLaneForm, | ||
| NewLaneSection: () => NewLaneSection2, | ||
| ScrollableLane: () => ScrollableLane, | ||
| Section: () => Section | ||
| }); | ||
| // src/styles/Base.ts | ||
| var import_react_popopo = require("react-popopo"); | ||
| var import_styled_components = __toESM(require("styled-components")); | ||
| var GlobalStyle = import_styled_components.createGlobalStyle` | ||
| .comPlainTextContentEditable { | ||
| -webkit-user-modify: read-write-plaintext-only; | ||
| cursor: text; | ||
| } | ||
| .comPlainTextContentEditable--has-placeholder::before { | ||
| content: attr(placeholder); | ||
| opacity: 0.5; | ||
| color: inherit; | ||
| cursor: text; | ||
| } | ||
| .react_trello_dragClass { | ||
| transform: rotate(3deg); | ||
| } | ||
| .react_trello_dragLaneClass { | ||
| transform: rotate(3deg); | ||
| } | ||
| .icon-overflow-menu-horizontal:before { | ||
| content: "\\E91F"; | ||
| } | ||
| .icon-lg, .icon-sm { | ||
| color: #798d99; | ||
| } | ||
| .icon-lg { | ||
| height: 32px; | ||
| font-size: 16px; | ||
| line-height: 32px; | ||
| width: 32px; | ||
| } | ||
| `; | ||
| var CustomPopoverContainer = (0, import_styled_components.default)(import_react_popopo.PopoverContainer)` | ||
| position: absolute; | ||
| right: 10px; | ||
| flex-flow: column nowrap; | ||
| `; | ||
| var CustomPopoverContent = (0, import_styled_components.default)(import_react_popopo.PopoverContent)` | ||
| visibility: hidden; | ||
| margin-top: -5px; | ||
| opacity: 0; | ||
| position: absolute; | ||
| z-index: 10; | ||
| box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3); | ||
| transition: all 0.3s ease 0ms; | ||
| border-radius: 3px; | ||
| min-width: 7em; | ||
| flex-flow: column nowrap; | ||
| background-color: #fff; | ||
| color: #000; | ||
| padding: 5px; | ||
| left: 50%; | ||
| transform: translateX(-50%); | ||
| ${(props) => props.active && ` | ||
| visibility: visible; | ||
| opacity: 1; | ||
| transition-delay: 100ms; | ||
| `} &::before { | ||
| visibility: hidden; | ||
| } | ||
| a { | ||
| color: rgba(255, 255, 255, 0.56); | ||
| padding: 0.5em 1em; | ||
| margin: 0; | ||
| text-decoration: none; | ||
| &:hover { | ||
| background-color: #00bcd4 !important; | ||
| color: #37474f; | ||
| } | ||
| } | ||
| `; | ||
| var BoardWrapper = import_styled_components.default.div` | ||
| background-color: #3179ba; | ||
| overflow-y: hidden; | ||
| padding: 5px; | ||
| color: #393939; | ||
| display: flex; | ||
| flex-direction: row; | ||
| align-items: flex-start; | ||
| height: 100vh; | ||
| `; | ||
| var Header = import_styled_components.default.header` | ||
| margin-bottom: 10px; | ||
| display: flex; | ||
| flex-direction: row; | ||
| align-items: flex-start; | ||
| `; | ||
| var Section = import_styled_components.default.section` | ||
| background-color: #e3e3e3; | ||
| border-radius: 3px; | ||
| margin: 5px 5px; | ||
| position: relative; | ||
| padding: 10px; | ||
| display: inline-flex; | ||
| height: auto; | ||
| max-height: 90%; | ||
| flex-direction: column; | ||
| `; | ||
| var LaneHeader = (0, import_styled_components.default)(Header)` | ||
| margin-bottom: 0px; | ||
| ${(props) => props.editLaneTitle && import_styled_components.css` | ||
| padding: 0px; | ||
| line-height: 30px; | ||
| `} ${(props) => !props.editLaneTitle && import_styled_components.css` | ||
| padding: 0px 5px; | ||
| `}; | ||
| `; | ||
| var LaneFooter = import_styled_components.default.div` | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| width: 100%; | ||
| position: relative; | ||
| height: 10px; | ||
| `; | ||
| var ScrollableLane = import_styled_components.default.div` | ||
| flex: 1; | ||
| overflow-y: auto; | ||
| min-width: 250px; | ||
| overflow-x: hidden; | ||
| align-self: center; | ||
| max-height: 90vh; | ||
| margin-top: 10px; | ||
| flex-direction: column; | ||
| justify-content: space-between; | ||
| `; | ||
| var Title = import_styled_components.default.span` | ||
| font-weight: bold; | ||
| font-size: 15px; | ||
| line-height: 18px; | ||
| cursor: ${(props) => props.draggable ? "grab" : "auto"}; | ||
| width: 70%; | ||
| `; | ||
| var RightContent = import_styled_components.default.span` | ||
| width: 38%; | ||
| text-align: right; | ||
| padding-right: 10px; | ||
| font-size: 13px; | ||
| `; | ||
| var CardWrapper = import_styled_components.default.article` | ||
| border-radius: 3px; | ||
| border-bottom: 1px solid #ccc; | ||
| background-color: #fff; | ||
| position: relative; | ||
| padding: 10px; | ||
| cursor: pointer; | ||
| max-width: 250px; | ||
| margin-bottom: 7px; | ||
| min-width: 230px; | ||
| `; | ||
| var MovableCardWrapper = (0, import_styled_components.default)(CardWrapper)` | ||
| &:hover { | ||
| background-color: #f0f0f0; | ||
| color: #000; | ||
| } | ||
| `; | ||
| var CardHeader = (0, import_styled_components.default)(Header)` | ||
| border-bottom: 1px solid #eee; | ||
| padding-bottom: 6px; | ||
| color: #000; | ||
| `; | ||
| var CardTitle = (0, import_styled_components.default)(Title)` | ||
| font-size: 14px; | ||
| `; | ||
| var CardRightContent = (0, import_styled_components.default)(RightContent)` | ||
| font-size: 10px; | ||
| `; | ||
| var Detail = import_styled_components.default.div` | ||
| font-size: 12px; | ||
| color: #4d4d4d; | ||
| white-space: pre-wrap; | ||
| `; | ||
| var Footer = import_styled_components.default.div` | ||
| border-top: 1px solid #eee; | ||
| padding-top: 6px; | ||
| text-align: right; | ||
| display: flex; | ||
| justify-content: flex-end; | ||
| flex-direction: row; | ||
| flex-wrap: wrap; | ||
| `; | ||
| var TagSpan = import_styled_components.default.span` | ||
| padding: 2px 3px; | ||
| border-radius: 3px; | ||
| margin: 2px 5px; | ||
| font-size: 70%; | ||
| `; | ||
| var AddCardLink = import_styled_components.default.a` | ||
| border-radius: 0 0 3px 3px; | ||
| color: #838c91; | ||
| display: block; | ||
| padding: 5px 2px; | ||
| margin-top: 10px; | ||
| position: relative; | ||
| text-decoration: none; | ||
| cursor: pointer; | ||
| &:hover { | ||
| //background-color: #cdd2d4; | ||
| color: #4d4d4d; | ||
| text-decoration: underline; | ||
| } | ||
| `; | ||
| var LaneTitle = import_styled_components.default.div` | ||
| font-size: 15px; | ||
| width: 268px; | ||
| height: auto; | ||
| `; | ||
| var LaneSection = import_styled_components.default.section` | ||
| background-color: #2b6aa3; | ||
| border-radius: 3px; | ||
| margin: 5px; | ||
| position: relative; | ||
| padding: 5px; | ||
| display: inline-flex; | ||
| height: auto; | ||
| flex-direction: column; | ||
| `; | ||
| var NewLaneSection = (0, import_styled_components.default)(LaneSection)` | ||
| width: 200px; | ||
| `; | ||
| var NewLaneButtons = import_styled_components.default.div` | ||
| margin-top: 10px; | ||
| `; | ||
| var CardForm = import_styled_components.default.div` | ||
| background-color: #e3e3e3; | ||
| `; | ||
| var InlineInput = import_styled_components.default.textarea` | ||
| overflow-x: hidden; /* for Firefox (issue #5) */ | ||
| word-wrap: break-word; | ||
| min-height: 18px; | ||
| max-height: 112px; /* optional, but recommended */ | ||
| resize: none; | ||
| width: 100%; | ||
| height: 18px; | ||
| font-size: inherit; | ||
| font-weight: inherit; | ||
| line-height: inherit; | ||
| text-align: inherit; | ||
| background-color: transparent; | ||
| box-shadow: none; | ||
| box-sizing: border-box; | ||
| border-radius: 3px; | ||
| border: 0; | ||
| padding: 0 8px; | ||
| outline: 0; | ||
| ${(props) => props.border && import_styled_components.css` | ||
| &:focus { | ||
| box-shadow: inset 0 0 0 2px #0079bf; | ||
| } | ||
| `} &:focus { | ||
| background-color: white; | ||
| } | ||
| ${(props) => props.resize && import_styled_components.css` | ||
| resize: ${props.resize}; | ||
| `}; | ||
| `; | ||
| // src/components/AddCardLink.tsx | ||
| var import_react = __toESM(require("react")); | ||
| var AddCardLink2 = ({ | ||
| onClick, | ||
| t | ||
| }) => /* @__PURE__ */ import_react.default.createElement(AddCardLink, { onClick }, t("Click to add card")); | ||
| // src/components/Card.tsx | ||
| var import_react6 = __toESM(require("react")); | ||
| // src/widgets/DeleteButton.tsx | ||
| var import_react2 = __toESM(require("react")); | ||
| // src/styles/Elements.ts | ||
| var import_styled_components2 = __toESM(require("styled-components")); | ||
| var DeleteWrapper = import_styled_components2.default.div` | ||
| text-align: center; | ||
| position: absolute; | ||
| top: -1px; | ||
| right: 2px; | ||
| cursor: pointer; | ||
| `; | ||
| var GenDelButton = import_styled_components2.default.button` | ||
| transition: all 0.5s ease; | ||
| display: inline-block; | ||
| border: none; | ||
| font-size: 15px; | ||
| height: 15px; | ||
| padding: 0; | ||
| margin-top: 5px; | ||
| text-align: center; | ||
| width: 15px; | ||
| background: inherit; | ||
| cursor: pointer; | ||
| `; | ||
| var DelButton = import_styled_components2.default.button` | ||
| transition: all 0.5s ease; | ||
| display: inline-block; | ||
| border: none; | ||
| font-size: 8px; | ||
| height: 15px; | ||
| line-height: 1px; | ||
| margin: 0 0 8px; | ||
| padding: 0; | ||
| text-align: center; | ||
| width: 15px; | ||
| background: inherit; | ||
| cursor: pointer; | ||
| opacity: 0; | ||
| ${MovableCardWrapper}:hover & { | ||
| opacity: 1; | ||
| } | ||
| `; | ||
| var MenuButton = import_styled_components2.default.button` | ||
| transition: all 0.5s ease; | ||
| display: inline-block; | ||
| border: none; | ||
| outline: none; | ||
| font-size: 16px; | ||
| font-weight: bold; | ||
| height: 15px; | ||
| line-height: 1px; | ||
| margin: 0 0 8px; | ||
| padding: 0; | ||
| text-align: center; | ||
| width: 15px; | ||
| background: inherit; | ||
| cursor: pointer; | ||
| `; | ||
| var LaneMenuHeader = import_styled_components2.default.div` | ||
| position: relative; | ||
| margin-bottom: 4px; | ||
| text-align: center; | ||
| `; | ||
| var LaneMenuContent = import_styled_components2.default.div` | ||
| overflow-x: hidden; | ||
| overflow-y: auto; | ||
| padding: 0 12px 12px; | ||
| `; | ||
| var LaneMenuItem = import_styled_components2.default.div` | ||
| cursor: pointer; | ||
| display: block; | ||
| font-weight: 700; | ||
| padding: 6px 12px; | ||
| position: relative; | ||
| margin: 0 -12px; | ||
| text-decoration: none; | ||
| &:hover { | ||
| background-color: #3179BA; | ||
| color: #fff; | ||
| } | ||
| `; | ||
| var LaneMenuTitle = import_styled_components2.default.span` | ||
| box-sizing: border-box; | ||
| color: #6b808c; | ||
| display: block; | ||
| line-height: 30px; | ||
| border-bottom: 1px solid rgba(9,45,66,.13); | ||
| margin: 0 6px; | ||
| overflow: hidden; | ||
| padding: 0 32px; | ||
| position: relative; | ||
| text-overflow: ellipsis; | ||
| white-space: nowrap; | ||
| z-index: 1; | ||
| `; | ||
| var DeleteIcon = import_styled_components2.default.span` | ||
| position: relative; | ||
| display: inline-block; | ||
| width: 4px; | ||
| height: 4px; | ||
| opacity: 1; | ||
| overflow: hidden; | ||
| border: 1px solid #83bd42; | ||
| border-radius: 50%; | ||
| padding: 4px; | ||
| background-color: #83bd42; | ||
| ${CardWrapper}:hover & { | ||
| opacity: 1; | ||
| } | ||
| &:hover::before, | ||
| &:hover::after { | ||
| background: red; | ||
| } | ||
| &:before, | ||
| &:after { | ||
| content: ''; | ||
| position: absolute; | ||
| height: 2px; | ||
| width: 60%; | ||
| top: 45%; | ||
| left: 20%; | ||
| background: #fff; | ||
| border-radius: 5px; | ||
| } | ||
| &:before { | ||
| -webkit-transform: rotate(45deg); | ||
| -moz-transform: rotate(45deg); | ||
| -o-transform: rotate(45deg); | ||
| transform: rotate(45deg); | ||
| } | ||
| &:after { | ||
| -webkit-transform: rotate(-45deg); | ||
| -moz-transform: rotate(-45deg); | ||
| -o-transform: rotate(-45deg); | ||
| transform: rotate(-45deg); | ||
| } | ||
| `; | ||
| var ExpandCollapseBase = import_styled_components2.default.span` | ||
| width: 36px; | ||
| margin: 0 auto; | ||
| font-size: 14px; | ||
| position: relative; | ||
| cursor: pointer; | ||
| `; | ||
| var CollapseBtn = (0, import_styled_components2.default)(ExpandCollapseBase)` | ||
| &:before { | ||
| content: ''; | ||
| position: absolute; | ||
| top: 0; | ||
| left: 0; | ||
| border-bottom: 7px solid #444; | ||
| border-left: 7px solid transparent; | ||
| border-right: 7px solid transparent; | ||
| border-radius: 6px; | ||
| } | ||
| &:after { | ||
| content: ''; | ||
| position: absolute; | ||
| left: 4px; | ||
| top: 4px; | ||
| border-bottom: 3px solid #e3e3e3; | ||
| border-left: 3px solid transparent; | ||
| border-right: 3px solid transparent; | ||
| } | ||
| `; | ||
| var ExpandBtn = (0, import_styled_components2.default)(ExpandCollapseBase)` | ||
| &:before { | ||
| content: ''; | ||
| position: absolute; | ||
| top: 0; | ||
| left: 0; | ||
| border-top: 7px solid #444; | ||
| border-left: 7px solid transparent; | ||
| border-right: 7px solid transparent; | ||
| border-radius: 6px; | ||
| } | ||
| &:after { | ||
| content: ''; | ||
| position: absolute; | ||
| left: 4px; | ||
| top: 0px; | ||
| border-top: 3px solid #e3e3e3; | ||
| border-left: 3px solid transparent; | ||
| border-right: 3px solid transparent; | ||
| } | ||
| `; | ||
| var AddButton = import_styled_components2.default.button` | ||
| background: #5aac44; | ||
| color: #fff; | ||
| transition: background 0.3s ease; | ||
| min-height: 32px; | ||
| padding: 4px 16px; | ||
| vertical-align: top; | ||
| margin-top: 0; | ||
| margin-right: 8px; | ||
| font-weight: bold; | ||
| border-radius: 3px; | ||
| font-size: 14px; | ||
| cursor: pointer; | ||
| margin-bottom: 0; | ||
| `; | ||
| var CancelButton = import_styled_components2.default.button` | ||
| background: #999999; | ||
| color: #fff; | ||
| transition: background 0.3s ease; | ||
| min-height: 32px; | ||
| padding: 4px 16px; | ||
| vertical-align: top; | ||
| margin-top: 0; | ||
| font-weight: bold; | ||
| border-radius: 3px; | ||
| font-size: 14px; | ||
| cursor: pointer; | ||
| margin-bottom: 0; | ||
| `; | ||
| var AddLaneLink = import_styled_components2.default.button` | ||
| background: #2b6aa3; | ||
| border: none; | ||
| color: #fff; | ||
| transition: background 0.3s ease; | ||
| min-height: 32px; | ||
| padding: 4px 16px; | ||
| vertical-align: top; | ||
| margin-top: 0; | ||
| margin-right: 0px; | ||
| border-radius: 4px; | ||
| font-size: 13px; | ||
| cursor: pointer; | ||
| margin-bottom: 0; | ||
| `; | ||
| // src/widgets/DeleteButton.tsx | ||
| var DeleteButton = ({ | ||
| ...rest | ||
| }) => { | ||
| return /* @__PURE__ */ import_react2.default.createElement(DeleteWrapper, { ...rest }, /* @__PURE__ */ import_react2.default.createElement(DelButton, null, "\u2716")); | ||
| }; | ||
| Object.defineProperty(exports, "BoardContainer", { | ||
| enumerable: true, | ||
| get: function get() { | ||
| return _BoardContainer.BoardContainer; | ||
| // src/widgets/EditableLabel.tsx | ||
| var import_react3 = __toESM(require("react")); | ||
| var EditableLabel = ({ | ||
| autoFocus = false, | ||
| inline = false, | ||
| onChange = () => { | ||
| }, | ||
| placeholder = "", | ||
| value = "", | ||
| children | ||
| }) => { | ||
| const [labelText, setLabelText] = (0, import_react3.useState)(""); | ||
| const divRef = (0, import_react3.createRef)(); | ||
| (0, import_react3.useEffect)(() => { | ||
| if (autoFocus) { | ||
| divRef.current.focus(); | ||
| } | ||
| }); | ||
| const getClassName = () => { | ||
| const placeholder2 = labelText === "" ? "comPlainTextContentEditable--has-placeholder" : ""; | ||
| return `comPlainTextContentEditable ${placeholder2}`; | ||
| }; | ||
| const onPaste = (event) => { | ||
| event.preventDefault(); | ||
| navigator.clipboard.writeText(event.clipboardData.getData("text")); | ||
| }; | ||
| const onBlur = () => { | ||
| onChange(labelText); | ||
| }; | ||
| const onKeyDown = (event) => { | ||
| if (event.key === "Enter") { | ||
| event.preventDefault(); | ||
| onChange(labelText); | ||
| divRef.current.blur(); | ||
| } | ||
| if (event.key === "Escape") { | ||
| divRef.current.textContent = labelText; | ||
| event.preventDefault(); | ||
| event.stopPropagation(); | ||
| } | ||
| }; | ||
| const onTextChange = (event) => { | ||
| const value2 = event.currentTarget.innerText; | ||
| setLabelText(value2); | ||
| }; | ||
| return /* @__PURE__ */ import_react3.default.createElement( | ||
| "div", | ||
| { | ||
| ref: divRef, | ||
| contentEditable: "true", | ||
| className: getClassName(), | ||
| onPaste, | ||
| onBlur, | ||
| onInput: onTextChange, | ||
| onKeyDown, | ||
| placeholder | ||
| } | ||
| ); | ||
| }; | ||
| // src/widgets/InlineInput.tsx | ||
| var import_autosize = __toESM(require("autosize")); | ||
| var import_react4 = __toESM(require("react")); | ||
| var InlineInput2 = ({ | ||
| autoFocus = false, | ||
| border = false, | ||
| onSave = () => { | ||
| }, | ||
| onCancel = () => { | ||
| }, | ||
| placeholder = "", | ||
| value = "", | ||
| resize = "none" | ||
| }) => { | ||
| const [inputValue, setInputValue] = (0, import_react4.useState)(value); | ||
| const inputRef = (0, import_react4.useRef)(null); | ||
| const onFocus = (e) => e.target.select(); | ||
| const onMouseDown = (e) => { | ||
| if (document.activeElement !== e.target) { | ||
| e.preventDefault(); | ||
| inputRef.current.focus(); | ||
| } | ||
| }; | ||
| const onBlur = () => { | ||
| updateValue(); | ||
| }; | ||
| const onKeyDown = (e) => { | ||
| if (e.key === "Enter") { | ||
| inputRef.current.blur(); | ||
| e.preventDefault(); | ||
| } | ||
| if (e.key === "Escape") { | ||
| setValue(value); | ||
| inputRef.current.blur(); | ||
| e.preventDefault(); | ||
| } | ||
| if (e.key === "Tab") { | ||
| if (inputValue.length === 0) { | ||
| onCancel(); | ||
| } | ||
| inputRef.current.blur(); | ||
| e.preventDefault(); | ||
| } | ||
| }; | ||
| const getValue2 = () => inputRef.current.value || ""; | ||
| const setValue = (newValue) => { | ||
| if (inputRef.current) { | ||
| inputRef.current.value = newValue; | ||
| } | ||
| }; | ||
| const updateValue = () => { | ||
| if (getValue2() !== value) { | ||
| onSave(getValue2()); | ||
| } | ||
| }; | ||
| const setRef = (ref) => { | ||
| inputRef.current = ref; | ||
| if (resize !== "none") { | ||
| (0, import_autosize.default)(inputRef.current); | ||
| } | ||
| }; | ||
| (0, import_react4.useEffect)(() => { | ||
| setInputValue(value); | ||
| }, [value]); | ||
| return /* @__PURE__ */ import_react4.default.createElement( | ||
| InlineInput, | ||
| { | ||
| ref: setRef, | ||
| border, | ||
| onMouseDown, | ||
| onFocus, | ||
| onBlur, | ||
| onKeyDown, | ||
| placeholder: value.length === 0 ? void 0 : placeholder, | ||
| defaultValue: value, | ||
| autoComplete: "off", | ||
| autoCorrect: "off", | ||
| autoCapitalize: "off", | ||
| spellCheck: "false", | ||
| rows: 1, | ||
| autoFocus | ||
| } | ||
| ); | ||
| }; | ||
| // src/components/Card/Tag.tsx | ||
| var import_react5 = __toESM(require("react")); | ||
| var Tag = ({ | ||
| title, | ||
| color, | ||
| bgcolor, | ||
| tagStyle, | ||
| ...otherProps | ||
| }) => { | ||
| const style = { | ||
| color: color || "white", | ||
| backgroundColor: bgcolor || "orange", | ||
| ...tagStyle | ||
| }; | ||
| return /* @__PURE__ */ import_react5.default.createElement(TagSpan, { style, ...otherProps }, title); | ||
| }; | ||
| // src/components/Card.tsx | ||
| var Card = ({ | ||
| onDelete, | ||
| onChange, | ||
| id, | ||
| onClick, | ||
| style, | ||
| className, | ||
| description, | ||
| label, | ||
| t, | ||
| tags, | ||
| title, | ||
| cardDraggable, | ||
| editable, | ||
| showDeleteButton, | ||
| tagStyle | ||
| }) => { | ||
| const _onDelete = (e) => { | ||
| onDelete(); | ||
| e.stopPropagation(); | ||
| }; | ||
| const updateCard = (card) => { | ||
| onChange({ ...card, id }); | ||
| }; | ||
| return /* @__PURE__ */ import_react6.default.createElement( | ||
| MovableCardWrapper, | ||
| { | ||
| "data-id": id, | ||
| onClick, | ||
| style, | ||
| className | ||
| }, | ||
| /* @__PURE__ */ import_react6.default.createElement(CardHeader, null, /* @__PURE__ */ import_react6.default.createElement(CardTitle, { draggable: cardDraggable }, editable ? /* @__PURE__ */ import_react6.default.createElement( | ||
| InlineInput2, | ||
| { | ||
| value: title, | ||
| border: true, | ||
| placeholder: t("placeholder.title"), | ||
| resize: "vertical", | ||
| onSave: (value) => updateCard({ title: value }) | ||
| } | ||
| ) : title), /* @__PURE__ */ import_react6.default.createElement(CardRightContent, null, editable ? /* @__PURE__ */ import_react6.default.createElement( | ||
| InlineInput2, | ||
| { | ||
| value: label, | ||
| border: true, | ||
| placeholder: t("placeholder.label"), | ||
| resize: "vertical", | ||
| onSave: (value) => updateCard({ label: value }) | ||
| } | ||
| ) : label), showDeleteButton && /* @__PURE__ */ import_react6.default.createElement(DeleteButton, { onClick: _onDelete })), | ||
| /* @__PURE__ */ import_react6.default.createElement(Detail, null, editable ? /* @__PURE__ */ import_react6.default.createElement( | ||
| InlineInput2, | ||
| { | ||
| value: description, | ||
| border: true, | ||
| placeholder: t("placeholder.description"), | ||
| resize: "vertical", | ||
| onSave: (value) => updateCard({ description: value }) | ||
| } | ||
| ) : description), | ||
| tags && tags.length > 0 && /* @__PURE__ */ import_react6.default.createElement(Footer, null, tags.map((tag) => /* @__PURE__ */ import_react6.default.createElement(Tag, { key: tag.title, ...tag, tagStyle }))) | ||
| ); | ||
| }; | ||
| // src/components/Lane/LaneFooter.tsx | ||
| var import_react7 = __toESM(require("react")); | ||
| var LaneFooter2 = ({ | ||
| onClick, | ||
| onKeyDown, | ||
| collapsed | ||
| }) => /* @__PURE__ */ import_react7.default.createElement(LaneFooter, { onClick, onKeyDown }, collapsed ? /* @__PURE__ */ import_react7.default.createElement(ExpandBtn, null) : /* @__PURE__ */ import_react7.default.createElement(CollapseBtn, null)); | ||
| // src/components/Lane/LaneHeader.tsx | ||
| var import_react9 = __toESM(require("react")); | ||
| // src/components/Lane/LaneHeader/LaneMenu.tsx | ||
| var import_react8 = __toESM(require("react")); | ||
| var import_react_popopo2 = require("react-popopo"); | ||
| var LaneMenu = ({ | ||
| t, | ||
| onDelete | ||
| }) => /* @__PURE__ */ import_react8.default.createElement( | ||
| import_react_popopo2.Popover, | ||
| { | ||
| position: "bottom", | ||
| PopoverContainer: CustomPopoverContainer, | ||
| PopoverContent: CustomPopoverContent, | ||
| trigger: /* @__PURE__ */ import_react8.default.createElement(MenuButton, null, "\u22EE") | ||
| }, | ||
| /* @__PURE__ */ import_react8.default.createElement(LaneMenuHeader, null, /* @__PURE__ */ import_react8.default.createElement(LaneMenuTitle, null, t("Lane actions")), /* @__PURE__ */ import_react8.default.createElement(DeleteWrapper, null, /* @__PURE__ */ import_react8.default.createElement(GenDelButton, null, "\u2716"))), | ||
| /* @__PURE__ */ import_react8.default.createElement(LaneMenuContent, null, /* @__PURE__ */ import_react8.default.createElement(LaneMenuItem, { onClick: onDelete }, t("Delete lane"))) | ||
| ); | ||
| // src/components/Lane/LaneHeader.tsx | ||
| var LaneHeader2 = ({ | ||
| updateTitle = () => { | ||
| }, | ||
| canAddLanes = false, | ||
| onDelete, | ||
| onDoubleClick, | ||
| editLaneTitle, | ||
| label, | ||
| title, | ||
| titleStyle, | ||
| labelStyle, | ||
| t, | ||
| laneDraggable | ||
| }) => { | ||
| return /* @__PURE__ */ import_react9.default.createElement(LaneHeader, { onDoubleClick, editLaneTitle }, /* @__PURE__ */ import_react9.default.createElement(Title, { draggable: laneDraggable, style: titleStyle }, editLaneTitle ? /* @__PURE__ */ import_react9.default.createElement( | ||
| InlineInput2, | ||
| { | ||
| value: title, | ||
| border: true, | ||
| placeholder: t("placeholder.title"), | ||
| resize: "vertical", | ||
| onSave: updateTitle | ||
| } | ||
| ) : title), label && /* @__PURE__ */ import_react9.default.createElement(RightContent, null, /* @__PURE__ */ import_react9.default.createElement("span", { style: labelStyle }, label)), canAddLanes && /* @__PURE__ */ import_react9.default.createElement(LaneMenu, { t, onDelete })); | ||
| }; | ||
| // src/components/Loader.tsx | ||
| var import_react10 = __toESM(require("react")); | ||
| // src/styles/Loader.ts | ||
| var import_styled_components3 = __toESM(require("styled-components")); | ||
| var keyframeAnimation = import_styled_components3.keyframes` | ||
| 0% { | ||
| transform: scale(1); | ||
| } | ||
| 20% { | ||
| transform: scale(1, 2.2); | ||
| } | ||
| 40% { | ||
| transform: scale(1); | ||
| } | ||
| `; | ||
| var LoaderDiv = import_styled_components3.default.div` | ||
| text-align: center; | ||
| margin: 15px 0; | ||
| `; | ||
| var LoadingBar = import_styled_components3.default.div` | ||
| display: inline-block; | ||
| margin: 0 2px; | ||
| width: 4px; | ||
| height: 18px; | ||
| border-radius: 4px; | ||
| animation: ${keyframeAnimation} 1s ease-in-out infinite; | ||
| background-color: #777; | ||
| &:nth-child(1) { | ||
| animation-delay: 0.0001s; | ||
| } | ||
| }); | ||
| Object.defineProperty(exports, "Container", { | ||
| enumerable: true, | ||
| get: function get() { | ||
| return _Container.default; | ||
| &:nth-child(2) { | ||
| animation-delay: 0.09s; | ||
| } | ||
| }); | ||
| Object.defineProperty(exports, "Draggable", { | ||
| enumerable: true, | ||
| get: function get() { | ||
| return _Draggable.Draggable; | ||
| &:nth-child(3) { | ||
| animation-delay: 0.18s; | ||
| } | ||
| }); | ||
| Object.defineProperty(exports, "Lane", { | ||
| enumerable: true, | ||
| get: function get() { | ||
| return _Lane.Lane; | ||
| &:nth-child(4) { | ||
| animation-delay: 0.27s; | ||
| } | ||
| }); | ||
| exports.components = void 0; | ||
| Object.defineProperty(exports, "createTranslate", { | ||
| enumerable: true, | ||
| get: function get() { | ||
| return _createTranslate.default; | ||
| `; | ||
| // src/components/Loader.tsx | ||
| var Loader = () => /* @__PURE__ */ import_react10.default.createElement(LoaderDiv, null, /* @__PURE__ */ import_react10.default.createElement(LoadingBar, null), /* @__PURE__ */ import_react10.default.createElement(LoadingBar, null), /* @__PURE__ */ import_react10.default.createElement(LoadingBar, null), /* @__PURE__ */ import_react10.default.createElement(LoadingBar, null)); | ||
| // src/components/NewCardForm.tsx | ||
| var import_react11 = __toESM(require("react")); | ||
| var NewCardForm = ({ | ||
| laneId, | ||
| onCancel, | ||
| onAdd, | ||
| t | ||
| }) => { | ||
| const [formState, setFormState] = (0, import_react11.useState)(); | ||
| const handleAdd = () => { | ||
| onAdd({ ...formState, laneId }); | ||
| }; | ||
| const updateField = (field, value) => { | ||
| setFormState({ ...formState, [field]: value }); | ||
| }; | ||
| return /* @__PURE__ */ import_react11.default.createElement(CardForm, null, /* @__PURE__ */ import_react11.default.createElement(CardWrapper, null, /* @__PURE__ */ import_react11.default.createElement(CardHeader, null, /* @__PURE__ */ import_react11.default.createElement(CardTitle, null, /* @__PURE__ */ import_react11.default.createElement( | ||
| EditableLabel, | ||
| { | ||
| placeholder: t("placeholder.title"), | ||
| onChange: (val) => updateField("title", val), | ||
| autoFocus: true | ||
| } | ||
| )), /* @__PURE__ */ import_react11.default.createElement(CardRightContent, null, /* @__PURE__ */ import_react11.default.createElement( | ||
| EditableLabel, | ||
| { | ||
| placeholder: t("placeholder.label"), | ||
| onChange: (val) => updateField("label", val) | ||
| } | ||
| ))), /* @__PURE__ */ import_react11.default.createElement(Detail, null, /* @__PURE__ */ import_react11.default.createElement( | ||
| EditableLabel, | ||
| { | ||
| placeholder: t("placeholder.description"), | ||
| onChange: (val) => updateField("description", val) | ||
| } | ||
| ))), /* @__PURE__ */ import_react11.default.createElement(AddButton, { onClick: handleAdd }, t("button.Add card")), /* @__PURE__ */ import_react11.default.createElement(CancelButton, { onClick: onCancel }, t("button.Cancel"))); | ||
| }; | ||
| // src/components/NewLaneForm.tsx | ||
| var import_react13 = __toESM(require("react")); | ||
| var import_uuid = require("uuid"); | ||
| // src/widgets/NewLaneTitleEditor.tsx | ||
| var import_autosize2 = __toESM(require("autosize")); | ||
| var import_react12 = __toESM(require("react")); | ||
| var NewLaneTitleEditor = ({ | ||
| autoFocus = false, | ||
| border = false, | ||
| onCancel = () => { | ||
| }, | ||
| onSave = () => { | ||
| }, | ||
| placeholder = "", | ||
| resize = "none", | ||
| value = "", | ||
| inputRef | ||
| }) => { | ||
| const [inputValue, setInputValue] = (0, import_react12.useState)(value); | ||
| const onKeyDown = (e) => { | ||
| if (e.key === "Enter") { | ||
| inputRef.current.blur(); | ||
| saveValue(); | ||
| e.preventDefault(); | ||
| } | ||
| if (e.key === "Escape") { | ||
| setInputValue(value); | ||
| inputRef.current.blur(); | ||
| cancel(); | ||
| e.preventDefault(); | ||
| } | ||
| if (e.key === "Tab") { | ||
| if (inputValue.length === 0) { | ||
| onCancel(); | ||
| } | ||
| inputRef.current.blur(); | ||
| e.preventDefault(); | ||
| } | ||
| }; | ||
| const setRef = (ref) => { | ||
| inputRef.current = ref; | ||
| if (resize !== "none") { | ||
| (0, import_autosize2.default)(inputRef); | ||
| } | ||
| }; | ||
| const cancel = () => { | ||
| setInputValue(""); | ||
| onCancel(); | ||
| inputRef.current.blur(); | ||
| }; | ||
| const saveValue = () => { | ||
| if (inputValue !== value) { | ||
| onSave(inputValue); | ||
| } | ||
| }; | ||
| return /* @__PURE__ */ import_react12.default.createElement( | ||
| InlineInput, | ||
| { | ||
| style: { resize }, | ||
| ref: setRef, | ||
| border, | ||
| onKeyDown, | ||
| placeholder: inputValue.length === 0 ? void 0 : placeholder, | ||
| defaultValue: value, | ||
| rows: 3, | ||
| autoFocus | ||
| } | ||
| ); | ||
| }; | ||
| // src/components/NewLaneForm.tsx | ||
| var NewLaneForm = ({ | ||
| onAdd, | ||
| onCancel, | ||
| t | ||
| }) => { | ||
| const titleRef = (0, import_react13.useRef)(); | ||
| const handleSubmit = () => { | ||
| onAdd({ | ||
| id: (0, import_uuid.v1)(), | ||
| title: titleRef.current.value | ||
| }); | ||
| }; | ||
| return /* @__PURE__ */ import_react13.default.createElement(Section, null, /* @__PURE__ */ import_react13.default.createElement(LaneTitle, null, /* @__PURE__ */ import_react13.default.createElement( | ||
| NewLaneTitleEditor, | ||
| { | ||
| inputRef: titleRef, | ||
| placeholder: t("placeholder.title"), | ||
| onCancel, | ||
| onSave: handleSubmit, | ||
| resize: "vertical", | ||
| border: true, | ||
| autoFocus: true | ||
| } | ||
| )), /* @__PURE__ */ import_react13.default.createElement(NewLaneButtons, null, /* @__PURE__ */ import_react13.default.createElement(AddButton, { onClick: handleSubmit }, t("button.Add lane")), /* @__PURE__ */ import_react13.default.createElement(CancelButton, { onClick: onCancel }, t("button.Cancel")))); | ||
| }; | ||
| // src/components/NewLaneSection.tsx | ||
| var import_react14 = __toESM(require("react")); | ||
| var NewLaneSection2 = ({ t, onClick }) => /* @__PURE__ */ import_react14.default.createElement(NewLaneSection, null, /* @__PURE__ */ import_react14.default.createElement(AddLaneLink, { onClick }, t("Add another lane"))); | ||
| // src/controllers/BoardContainer.tsx | ||
| var import_react20 = __toESM(require("react")); | ||
| var import_react_popopo3 = require("react-popopo"); | ||
| // src/dnd/Container.tsx | ||
| var import_react15 = __toESM(require("react")); | ||
| var import_react_dom = __toESM(require("react-dom")); | ||
| var import_trello_smooth_dnd = __toESM(require("trello-smooth-dnd")); | ||
| import_trello_smooth_dnd.default.dropHandler = import_trello_smooth_dnd.dropHandlers.reactDropHandler().handler; | ||
| import_trello_smooth_dnd.default.wrapChild = (p) => p; | ||
| var Container = class extends import_react15.Component { | ||
| containerDiv; | ||
| prevContainer; | ||
| container; | ||
| constructor(props) { | ||
| super(props); | ||
| this.getContainerOptions = this.getContainerOptions.bind(this); | ||
| this.setRef = this.setRef.bind(this); | ||
| this.prevContainer = null; | ||
| } | ||
| }); | ||
| exports.default = void 0; | ||
| Object.defineProperty(exports, "locales", { | ||
| enumerable: true, | ||
| get: function get() { | ||
| return _locales.default; | ||
| componentDidMount() { | ||
| this.containerDiv = this.containerDiv || import_react_dom.default.findDOMNode(this); | ||
| this.prevContainer = this.containerDiv; | ||
| this.container = (0, import_trello_smooth_dnd.default)(this.containerDiv, this.getContainerOptions()); | ||
| } | ||
| }); | ||
| var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")); | ||
| var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty")); | ||
| var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties")); | ||
| var _react = _interopRequireDefault(require("react")); | ||
| var _Draggable = require("./dnd/Draggable"); | ||
| var _Container = _interopRequireDefault(require("./dnd/Container")); | ||
| var _BoardContainer = require("./controllers/BoardContainer"); | ||
| var _Lane = require("./controllers/Lane"); | ||
| var _deprecationWarnings = _interopRequireDefault(require("./helpers/deprecationWarnings")); | ||
| var DefaultComponents = _interopRequireWildcard(require("./components")); | ||
| exports.components = DefaultComponents; | ||
| var _locales = _interopRequireDefault(require("./locales")); | ||
| var _widgets = require("./widgets"); | ||
| Object.keys(_widgets).forEach(function (key) { | ||
| if (key === "default" || key === "__esModule") return; | ||
| if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return; | ||
| if (key in exports && exports[key] === _widgets[key]) return; | ||
| Object.defineProperty(exports, key, { | ||
| enumerable: true, | ||
| get: function get() { | ||
| return _widgets[key]; | ||
| componentWillUnmount() { | ||
| this.container.dispose(); | ||
| this.container = null; | ||
| } | ||
| componentDidUpdate() { | ||
| this.containerDiv = this.containerDiv || import_react_dom.default.findDOMNode(this); | ||
| if (this.containerDiv) { | ||
| if (this.prevContainer && this.prevContainer !== this.containerDiv) { | ||
| this.container.dispose(); | ||
| this.container = (0, import_trello_smooth_dnd.default)( | ||
| this.containerDiv, | ||
| this.getContainerOptions() | ||
| ); | ||
| this.prevContainer = this.containerDiv; | ||
| } | ||
| } | ||
| }); | ||
| }); | ||
| var _createTranslate = _interopRequireDefault(require("./helpers/createTranslate")); | ||
| var _Board = require("./controllers/Board"); | ||
| var _excluded = ["components", "lang"]; | ||
| function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); } | ||
| function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; } | ||
| function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; } | ||
| function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; } | ||
| var DEFAULT_LANG = "en"; | ||
| var _default = _ref => { | ||
| var { | ||
| } | ||
| render() { | ||
| if (this.props.render) { | ||
| return this.props.render(this.setRef); | ||
| } | ||
| return /* @__PURE__ */ import_react15.default.createElement("div", { style: this.props.style, ref: this.setRef }, this.props.children); | ||
| } | ||
| setRef(element) { | ||
| this.containerDiv = element; | ||
| } | ||
| getContainerOptions() { | ||
| const functionProps = {}; | ||
| if (this.props.onDragStart) { | ||
| functionProps.onDragStart = (...p) => this.props.onDragStart(...p); | ||
| } | ||
| if (this.props.onDragEnd) { | ||
| functionProps.onDragEnd = (...p) => this.props.onDragEnd(...p); | ||
| } | ||
| if (this.props.onDrop) { | ||
| functionProps.onDrop = (...p) => this.props.onDrop(...p); | ||
| } | ||
| if (this.props.getChildPayload) { | ||
| functionProps.getChildPayload = (...p) => this.props.getChildPayload(...p); | ||
| } | ||
| if (this.props.shouldAnimateDrop) { | ||
| functionProps.shouldAnimateDrop = (...p) => this.props.shouldAnimateDrop(...p); | ||
| } | ||
| if (this.props.shouldAcceptDrop) { | ||
| functionProps.shouldAcceptDrop = (...p) => this.props.shouldAcceptDrop(...p); | ||
| } | ||
| if (this.props.onDragEnter) { | ||
| functionProps.onDragEnter = (...p) => this.props.onDragEnter(...p); | ||
| } | ||
| if (this.props.onDragLeave) { | ||
| functionProps.onDragLeave = (...p) => this.props.onDragLeave(...p); | ||
| } | ||
| if (this.props.render) { | ||
| functionProps.render = (...p) => this.props.render(...p); | ||
| } | ||
| if (this.props.onDropReady) { | ||
| functionProps.onDropReady = (...p) => this.props.onDropReady(...p); | ||
| } | ||
| if (this.props.getGhostParent) { | ||
| functionProps.getGhostParent = (...p) => this.props.getGhostParent(...p); | ||
| } | ||
| return Object.assign({}, this.props, functionProps); | ||
| } | ||
| }; | ||
| var Container_default = Container; | ||
| // src/dnd/Draggable.tsx | ||
| var import_react16 = __toESM(require("react")); | ||
| var import_trello_smooth_dnd2 = require("trello-smooth-dnd"); | ||
| var { wrapperClass } = import_trello_smooth_dnd2.constants; | ||
| var Draggable = class extends import_react16.Component { | ||
| render() { | ||
| if (this.props.render) { | ||
| return import_react16.default.cloneElement(this.props.render(), { | ||
| className: wrapperClass | ||
| }); | ||
| } | ||
| const clsName = this.props.className ? `${this.props.className} ` : ""; | ||
| return /* @__PURE__ */ import_react16.default.createElement("div", { ...this.props, className: `${clsName}${wrapperClass}` }, this.props.children); | ||
| } | ||
| }; | ||
| // src/controllers/Lane.tsx | ||
| var import_react19 = __toESM(require("react")); | ||
| var import_uuid3 = require("uuid"); | ||
| var import_classnames2 = __toESM(require("classnames")); | ||
| // src/store/useBoard.ts | ||
| var import_react18 = require("react"); | ||
| var import_zustand2 = require("zustand"); | ||
| // src/controllers/Board.tsx | ||
| var import_classnames = __toESM(require("classnames")); | ||
| var import_react17 = __toESM(require("react")); | ||
| var import_uuid2 = require("uuid"); | ||
| // src/store/store.ts | ||
| var import_immer = __toESM(require("immer")); | ||
| var import_zustand = __toESM(require("zustand")); | ||
| var store = (0, import_zustand.default)()((set) => ({ | ||
| data: { lanes: [] }, | ||
| initializeLanes: (lanes) => set((state) => ({ | ||
| data: (0, import_immer.default)(state.data, (draft) => { | ||
| draft.lanes = lanes.map((lane) => { | ||
| return { | ||
| ...lane, | ||
| currentPage: 1, | ||
| cards: lane.cards?.map((c) => ({ ...c, laneId: lane.id })) | ||
| }; | ||
| }); | ||
| }) | ||
| })), | ||
| refreshBoard: (lanes = []) => set(() => ({ data: { lanes } })), | ||
| addCard: (card, laneId, index) => set( | ||
| (0, import_immer.default)((state) => { | ||
| const lane = state.data.lanes.find((l) => l.id === laneId); | ||
| if (!lane) { | ||
| throw new Error("Lane not found"); | ||
| } | ||
| if (index === void 0 && lane.cards) { | ||
| lane.cards.push(card); | ||
| return; | ||
| } | ||
| lane.cards[index || 0] = card; | ||
| }) | ||
| ), | ||
| removeCard: (laneId, cardId) => set( | ||
| (0, import_immer.default)((state) => { | ||
| const lane = state.data.lanes.find((l) => l.id === laneId); | ||
| if (!lane) { | ||
| throw new Error("Lane not found"); | ||
| } | ||
| const index = lane.cards.findIndex((c) => c.id === cardId); | ||
| if (index !== -1) { | ||
| lane.cards.splice(index, 1); | ||
| } | ||
| }) | ||
| ), | ||
| moveCard: (fromLaneId, toLaneId, cardId, index) => set( | ||
| (0, import_immer.default)((state) => { | ||
| const fromLane = state.data.lanes.find((l) => l.id === fromLaneId); | ||
| if (!fromLane) { | ||
| throw new Error("fromLane not found"); | ||
| } | ||
| const toLane = state.data.lanes.find((l) => l.id === toLaneId); | ||
| if (!toLane) { | ||
| throw new Error("toLane not found"); | ||
| } | ||
| const cardIndex = fromLane.cards.findIndex((c) => c.id === cardId); | ||
| if (cardIndex !== -1) { | ||
| const card = fromLane.cards[cardIndex]; | ||
| const newCard = { ...card, laneId: toLaneId }; | ||
| fromLane.cards.splice(cardIndex, 1); | ||
| if (index !== void 0) { | ||
| toLane.cards.splice(index, 0, newCard); | ||
| return; | ||
| } | ||
| toLane.cards.push(newCard); | ||
| } | ||
| }) | ||
| ), | ||
| updateCards: (laneId, cards) => set( | ||
| (0, import_immer.default)((state) => { | ||
| const lane = state.data.lanes.find((l) => l.id === laneId); | ||
| if (!lane) { | ||
| throw new Error("Lane not found"); | ||
| } | ||
| lane.cards = cards; | ||
| }) | ||
| ), | ||
| updateCard: (laneId, card) => set( | ||
| (0, import_immer.default)((state) => { | ||
| const lane = state.data.lanes.find((l) => l.id === laneId); | ||
| if (!lane) { | ||
| throw new Error("Lane not found"); | ||
| } | ||
| const index = lane.cards.findIndex((c) => c.id === card.id); | ||
| if (index !== -1) { | ||
| lane.cards[index] = card; | ||
| } | ||
| }) | ||
| ), | ||
| updateLanes: (lanes) => set( | ||
| (0, import_immer.default)((state) => { | ||
| state.data.lanes = lanes; | ||
| }) | ||
| ), | ||
| updateLane: (lane) => set( | ||
| (0, import_immer.default)((state) => { | ||
| lane = { ...lane, ...state.data.lanes.find((l) => l.id === lane.id) }; | ||
| }) | ||
| ), | ||
| paginateLane: (laneId, newCards, nextPage) => set( | ||
| (0, import_immer.default)((state) => { | ||
| state.data.lanes.map( | ||
| (l) => l.id === laneId ? { ...l, cards: [...l.cards, ...newCards], nextPage } : l | ||
| ); | ||
| }) | ||
| ), | ||
| moveLane: (fromIndex, toIndex) => set( | ||
| (0, import_immer.default)((state) => { | ||
| const lane = state.data.lanes[fromIndex]; | ||
| state.data.lanes.splice(fromIndex, 1); | ||
| state.data.lanes.splice(toIndex, 0, lane); | ||
| }) | ||
| ), | ||
| removeLane: (laneId) => set( | ||
| (0, import_immer.default)((state) => { | ||
| const index = state.data.lanes.findIndex((l) => l.id === laneId); | ||
| if (index !== -1) { | ||
| state.data.lanes.splice(index, 1); | ||
| } | ||
| }) | ||
| ), | ||
| addLane: (lane) => set( | ||
| (0, import_immer.default)((state) => { | ||
| state.data.lanes.push(lane); | ||
| }) | ||
| ) | ||
| })); | ||
| // src/controllers/Board.tsx | ||
| var Board = ({ data, children, className, components, id, t, ...rest }) => { | ||
| const allClassNames = (0, import_classnames.default)("react-trello-board", className || ""); | ||
| return /* @__PURE__ */ import_react17.default.createElement(BoardContext.Provider, { value: store }, /* @__PURE__ */ import_react17.default.createElement(components.GlobalStyle, null), /* @__PURE__ */ import_react17.default.createElement( | ||
| BoardContainer, | ||
| { | ||
| id: id || (0, import_uuid2.v1)(), | ||
| data, | ||
| components, | ||
| lang = DEFAULT_LANG | ||
| } = _ref, | ||
| otherProps = (0, _objectWithoutProperties2.default)(_ref, _excluded); | ||
| (0, _deprecationWarnings.default)(otherProps); | ||
| var translate = (0, _createTranslate.default)(_locales.default[lang || "en"].translation); | ||
| return /*#__PURE__*/_react.default.createElement(_Board.Board, (0, _extends2.default)({ | ||
| t: translate, | ||
| components: _objectSpread(_objectSpread({}, DefaultComponents), components) | ||
| }, otherProps)); | ||
| t, | ||
| className: allClassNames, | ||
| ...rest | ||
| } | ||
| )); | ||
| }; | ||
| exports.default = _default; | ||
| var BoardContext = (0, import_react17.createContext)(store); | ||
| // src/store/useBoard.ts | ||
| var useBoard = () => { | ||
| const store2 = (0, import_react18.useContext)(BoardContext); | ||
| return (0, import_zustand2.useStore)(store2); | ||
| }; | ||
| // src/controllers/Lane.tsx | ||
| var Lane = ({ | ||
| id, | ||
| index, | ||
| boardId, | ||
| title, | ||
| label, | ||
| cards, | ||
| style, | ||
| collapsibleLanes, | ||
| className, | ||
| titleStyle, | ||
| titleClassName, | ||
| labelStyle, | ||
| labelClassName, | ||
| cardStyle, | ||
| cardClassName, | ||
| currentPage, | ||
| draggable, | ||
| droppable, | ||
| editable, | ||
| canAddLanes, | ||
| laneSortFunction, | ||
| hideCardDeleteIcon, | ||
| cardDraggable, | ||
| cardDragClass, | ||
| cardDropClass, | ||
| tagStyle, | ||
| components, | ||
| onLaneScroll, | ||
| onLaneAdd, | ||
| onLaneDelete, | ||
| onLaneUpdate, | ||
| onCardClick, | ||
| onCardAdd, | ||
| onCardDelete, | ||
| onCardUpdate, | ||
| onBeforeCardDelete, | ||
| onCardMoveAcrossLanes, | ||
| onLaneClick, | ||
| handleDragStart, | ||
| handleDragEnd, | ||
| getCardDetails, | ||
| t, | ||
| children, | ||
| ...otherProps | ||
| }) => { | ||
| const board = useBoard(); | ||
| const [loading, setLoading] = import_react19.default.useState(false); | ||
| const [currentPageState, setCurrentPageState] = import_react19.default.useState(currentPage); | ||
| const [collapsed, setCollapsed] = import_react19.default.useState(false); | ||
| const [addCardMode, setAddCardMode] = import_react19.default.useState(false); | ||
| const [isDraggingOver, setIsDraggingOver] = import_react19.default.useState(false); | ||
| (0, import_react19.useEffect)(() => { | ||
| setCurrentPageState(currentPage); | ||
| }, [cards]); | ||
| const sortCards = (cards2, sortFunction) => { | ||
| if (!cards2) { | ||
| return []; | ||
| } | ||
| if (!sortFunction) { | ||
| return cards2; | ||
| } | ||
| return cards2.concat().sort((card1, card2) => sortFunction(card1, card2)); | ||
| }; | ||
| const addNewCard = (params) => { | ||
| const laneId = params.laneId || id; | ||
| const _id = (0, import_uuid3.v1)(); | ||
| setAddCardMode(false); | ||
| const card = { id: _id, ...params }; | ||
| board.addCard(card, laneId); | ||
| onCardAdd?.(card, laneId); | ||
| }; | ||
| const updateCard = (updatedCard) => { | ||
| board.updateCard(id, updatedCard); | ||
| onCardUpdate?.(id, updatedCard); | ||
| }; | ||
| const updateTitle = (value) => { | ||
| board.updateLane({ id, title: value }); | ||
| onLaneUpdate?.(id, { id, title: value }); | ||
| }; | ||
| const laneDidMount = (node) => { | ||
| if (node) { | ||
| node.addEventListener("scroll", handleScroll); | ||
| } | ||
| }; | ||
| const removeLane = () => { | ||
| board.removeLane(id); | ||
| onLaneDelete?.(id); | ||
| }; | ||
| const handleScroll = (evt) => { | ||
| const node = evt.target; | ||
| const elemScrollPosition = node.scrollHeight - node.scrollTop - node.clientHeight; | ||
| if (elemScrollPosition < 1 && onLaneScroll && !loading) { | ||
| setLoading(true); | ||
| const nextPage = currentPageState + 1; | ||
| onLaneScroll(nextPage, id).then((moreCards) => { | ||
| if ((moreCards || []).length > 0) { | ||
| board.paginateLane(id, moreCards, nextPage); | ||
| } | ||
| setLoading(false); | ||
| }); | ||
| } | ||
| }; | ||
| const groupName = `TrelloBoard${boardId}Lane`; | ||
| const handleCardClick = (e, card) => { | ||
| onCardClick?.(card.id, card.metadata, card.laneId); | ||
| e.stopPropagation(); | ||
| }; | ||
| const toggleLaneCollapsed = () => { | ||
| collapsibleLanes && setCollapsed(!collapsed); | ||
| }; | ||
| const removeCard = (cardId) => { | ||
| if (onBeforeCardDelete && typeof onBeforeCardDelete === "function") { | ||
| onBeforeCardDelete(() => { | ||
| board.removeCard(id, cardId); | ||
| onCardDelete?.(cardId, id); | ||
| }); | ||
| } else { | ||
| board.removeCard(id, cardId); | ||
| onCardDelete?.(cardId, id); | ||
| } | ||
| }; | ||
| const onDragStart = ({ payload }) => { | ||
| handleDragStart?.(payload.id, id); | ||
| }; | ||
| const onDragEnd = (laneId, result) => { | ||
| const { addedIndex, payload } = result; | ||
| if (isDraggingOver) { | ||
| setIsDraggingOver(false); | ||
| } | ||
| if (addedIndex != null) { | ||
| const newCard = { ...payload, laneId }; | ||
| handleDragEnd?.(payload.id, laneId, id, addedIndex, newCard); | ||
| const response = handleDragEnd ? handleDragEnd(payload.id, payload.laneId, laneId, addedIndex, newCard) : true; | ||
| if (response === void 0 || !!response) { | ||
| board.moveCard(payload.laneId, laneId, payload.id, addedIndex); | ||
| onCardMoveAcrossLanes?.(payload.laneId, laneId, payload.id, addedIndex); | ||
| } | ||
| return response; | ||
| } | ||
| }; | ||
| const renderDragContainer = (isDraggingOver2) => { | ||
| const showableCards = collapsed ? [] : cards; | ||
| const cardList = sortCards(showableCards, laneSortFunction).map( | ||
| (card, idx) => { | ||
| const onDeleteCard = () => removeCard(card.id); | ||
| const cardToRender = /* @__PURE__ */ import_react19.default.createElement( | ||
| components.Card, | ||
| { | ||
| key: card.id, | ||
| index: idx, | ||
| style: card.style || cardStyle, | ||
| className: "react-trello-card", | ||
| onDelete: onDeleteCard, | ||
| onClick: (e) => handleCardClick(e, card), | ||
| onChange: (updatedCard) => updateCard(updatedCard), | ||
| showDeleteButton: !hideCardDeleteIcon, | ||
| tagStyle, | ||
| cardDraggable, | ||
| editable, | ||
| title: card.title, | ||
| description: card.description, | ||
| label: card.label, | ||
| metadata: card.metadata, | ||
| id: card.id, | ||
| t, | ||
| ...card | ||
| } | ||
| ); | ||
| return cardDraggable && (!Object.prototype.hasOwnProperty.call(card, "draggable") || card.draggable) ? /* @__PURE__ */ import_react19.default.createElement(Draggable, { key: card.id }, cardToRender) : /* @__PURE__ */ import_react19.default.createElement("span", { key: card.id }, cardToRender); | ||
| } | ||
| ); | ||
| return /* @__PURE__ */ import_react19.default.createElement( | ||
| components.ScrollableLane, | ||
| { | ||
| ref: laneDidMount, | ||
| isDraggingOver: isDraggingOver2 | ||
| }, | ||
| /* @__PURE__ */ import_react19.default.createElement( | ||
| Container_default, | ||
| { | ||
| orientation: "vertical", | ||
| groupName, | ||
| dragClass: cardDragClass, | ||
| dropClass: cardDropClass, | ||
| onDragStart, | ||
| onDrop: (e) => { | ||
| onDragEnd(id, e); | ||
| }, | ||
| onDragEnter: () => setIsDraggingOver(true), | ||
| onDragLeave: () => setIsDraggingOver(false), | ||
| shouldAcceptDrop: (sourceContainerOptions) => droppable && sourceContainerOptions.groupName === groupName, | ||
| getChildPayload: (index2) => getCardDetails(id, index2) | ||
| }, | ||
| cardList | ||
| ), | ||
| editable && !addCardMode && /* @__PURE__ */ import_react19.default.createElement(components.AddCardLink, { onClick: () => setAddCardMode(true), t }), | ||
| addCardMode && /* @__PURE__ */ import_react19.default.createElement( | ||
| components.NewCardForm, | ||
| { | ||
| onCancel: () => setAddCardMode(false), | ||
| t, | ||
| laneId: id, | ||
| onAdd: addNewCard | ||
| } | ||
| ) | ||
| ); | ||
| }; | ||
| const allClassNames = (0, import_classnames2.default)("react-trello-lane", className || ""); | ||
| const showFooter = collapsibleLanes && cards.length > 0; | ||
| return /* @__PURE__ */ import_react19.default.createElement( | ||
| components.Section, | ||
| { | ||
| ...otherProps, | ||
| key: id, | ||
| onClick: () => onLaneClick?.(id), | ||
| draggable: false, | ||
| className: allClassNames, | ||
| style | ||
| }, | ||
| /* @__PURE__ */ import_react19.default.createElement( | ||
| components.LaneHeader, | ||
| { | ||
| onDelete: removeLane, | ||
| onDoubleClick: toggleLaneCollapsed, | ||
| updateTitle, | ||
| title, | ||
| label, | ||
| labelStyle, | ||
| titleStyle, | ||
| collapsible: collapsibleLanes, | ||
| collapsed, | ||
| t | ||
| } | ||
| ), | ||
| renderDragContainer(isDraggingOver), | ||
| loading && /* @__PURE__ */ import_react19.default.createElement(components.Loader, null), | ||
| showFooter && /* @__PURE__ */ import_react19.default.createElement( | ||
| components.LaneFooter, | ||
| { | ||
| onClick: toggleLaneCollapsed, | ||
| collapsed | ||
| } | ||
| ) | ||
| ); | ||
| }; | ||
| // src/controllers/BoardContainer.tsx | ||
| var BoardContainer = ({ | ||
| components, | ||
| handleDragStart = () => { | ||
| }, | ||
| handleDragEnd = () => { | ||
| }, | ||
| handleLaneDragStart = () => { | ||
| }, | ||
| className, | ||
| style, | ||
| id, | ||
| draggable = false, | ||
| laneDraggable = true, | ||
| data, | ||
| cardDragClass = "react_trello_dragClass", | ||
| collapsibleLanes = false, | ||
| laneDragClass = "react_trello_dragLaneClass", | ||
| laneDropClass = "", | ||
| onDataChange = () => { | ||
| }, | ||
| cardDraggable = true, | ||
| onCardAdd, | ||
| onCardUpdate = () => { | ||
| }, | ||
| onCardClick, | ||
| onBeforeCardDelete, | ||
| handleLaneDragEnd = () => { | ||
| }, | ||
| onCardDelete, | ||
| cardStyle, | ||
| hideCardDeleteIcon = false, | ||
| onLaneScroll, | ||
| onLaneClick, | ||
| onLaneAdd = () => { | ||
| }, | ||
| onLaneDelete = () => { | ||
| }, | ||
| onLaneUpdate = () => { | ||
| }, | ||
| editable = false, | ||
| canAddLanes = false, | ||
| eventBusHandle, | ||
| tagStyle, | ||
| editLaneTitle, | ||
| laneStyle, | ||
| laneSortFunction, | ||
| onCardMoveAcrossLanes = () => { | ||
| }, | ||
| t, | ||
| ...otherProps | ||
| }) => { | ||
| const [addLaneMode, setAddLaneMode] = (0, import_react20.useState)(false); | ||
| const board = useBoard(); | ||
| (0, import_react20.useEffect)(() => { | ||
| board.initializeLanes(data.lanes); | ||
| if (eventBusHandle) { | ||
| wireEventBus(); | ||
| } | ||
| return () => { | ||
| board.refreshBoard([]); | ||
| }; | ||
| }, []); | ||
| (0, import_react20.useEffect)(() => { | ||
| if (JSON.stringify(board.data) !== JSON.stringify(data)) { | ||
| onDataChange(data); | ||
| board.initializeLanes(data.lanes); | ||
| } | ||
| }, [data]); | ||
| const wireEventBus = () => { | ||
| const eventBus = { | ||
| publish: (event) => { | ||
| switch (event.type) { | ||
| case "ADD_CARD": | ||
| return board.addCard(event.card, event.laneId, event.index); | ||
| case "UPDATE_CARD": | ||
| return board.updateCard(event.laneId, event.card); | ||
| case "REMOVE_CARD": | ||
| return board.removeCard(event.laneId, event.cardId); | ||
| case "REFRESH_BOARD": | ||
| return board.refreshBoard(event.data.lanes); | ||
| case "MOVE_CARD": | ||
| return board.moveCard( | ||
| event.fromLaneId, | ||
| event.toLaneId, | ||
| event.cardId, | ||
| event.index | ||
| ); | ||
| case "UPDATE_CARDS": | ||
| return board.updateCards(event.laneId, event.cards); | ||
| case "UPDATE_LANES": | ||
| return board.updateLanes(event.lanes); | ||
| case "UPDATE_LANE": | ||
| return board.updateLane(event.lane); | ||
| } | ||
| } | ||
| }; | ||
| eventBusHandle(eventBus); | ||
| }; | ||
| const getLaneDetails = (index) => { | ||
| return board.data.lanes[index]; | ||
| }; | ||
| const getCardDetails = (laneId, cardIndex) => { | ||
| return board.data.lanes.find((lane) => lane.id === laneId).cards[cardIndex]; | ||
| }; | ||
| const groupName = `TrelloBoard${id}`; | ||
| return /* @__PURE__ */ import_react20.default.createElement(components.BoardWrapper, { style, ...otherProps, draggable: false }, /* @__PURE__ */ import_react20.default.createElement(import_react_popopo3.PopoverWrapper, null, /* @__PURE__ */ import_react20.default.createElement( | ||
| Container_default, | ||
| { | ||
| orientation: "horizontal", | ||
| className, | ||
| onDragStart: ({ payload }) => { | ||
| handleLaneDragStart(payload.id); | ||
| }, | ||
| dragClass: laneDragClass, | ||
| dropClass: laneDropClass, | ||
| onDrop: ({ removedIndex, addedIndex, payload }) => { | ||
| if (removedIndex !== addedIndex) { | ||
| board.moveLane(removedIndex, addedIndex); | ||
| handleLaneDragEnd(removedIndex, addedIndex, payload); | ||
| } | ||
| }, | ||
| lockAxis: "x", | ||
| getChildPayload: (index) => getLaneDetails(index), | ||
| groupName | ||
| }, | ||
| board.data.lanes.map((lane, index) => { | ||
| const { id: id2, droppable, ...otherProps2 } = lane; | ||
| const laneToRender = /* @__PURE__ */ import_react20.default.createElement( | ||
| Lane, | ||
| { | ||
| key: id2, | ||
| boardId: groupName, | ||
| components, | ||
| id: id2, | ||
| getCardDetails, | ||
| index, | ||
| droppable: droppable === void 0 ? true : droppable, | ||
| style: laneStyle || lane.style || {}, | ||
| labelStyle: lane.labelStyle || {}, | ||
| cardStyle: cardStyle || lane.cardStyle, | ||
| editable: editable && !lane.disallowAddingCard, | ||
| draggable: laneDraggable, | ||
| cardDraggable, | ||
| onCardMoveAcrossLanes, | ||
| onLaneScroll, | ||
| onLaneDelete, | ||
| onLaneUpdate, | ||
| onCardClick, | ||
| onBeforeCardDelete, | ||
| onCardDelete, | ||
| onCardAdd, | ||
| onCardUpdate, | ||
| onLaneClick, | ||
| laneSortFunction, | ||
| collapsibleLanes, | ||
| canAddLanes, | ||
| hideCardDeleteIcon, | ||
| tagStyle, | ||
| title: lane.title, | ||
| handleDragStart, | ||
| handleDragEnd, | ||
| cardDragClass, | ||
| t, | ||
| ...otherProps2 | ||
| } | ||
| ); | ||
| return draggable && laneDraggable ? /* @__PURE__ */ import_react20.default.createElement(Draggable, { key: lane.id }, laneToRender) : laneToRender; | ||
| }) | ||
| )), canAddLanes && /* @__PURE__ */ import_react20.default.createElement(Container_default, { orientation: "horizontal" }, editable && !addLaneMode ? /* @__PURE__ */ import_react20.default.createElement( | ||
| components.NewLaneSection, | ||
| { | ||
| t, | ||
| onClick: () => setAddLaneMode(true) | ||
| } | ||
| ) : addLaneMode && /* @__PURE__ */ import_react20.default.createElement( | ||
| components.NewLaneForm, | ||
| { | ||
| onCancel: () => setAddLaneMode(false), | ||
| onAdd: ({ id: id2, title }) => { | ||
| setAddLaneMode(false); | ||
| board.addLane({ id: id2, title, cards: [] }); | ||
| onLaneAdd({ | ||
| laneId: id2, | ||
| title, | ||
| description: "", | ||
| label: "" | ||
| }); | ||
| }, | ||
| t | ||
| } | ||
| ))); | ||
| }; | ||
| // src/helpers/deprecationWarnings.ts | ||
| var REPLACE_TABLE = { | ||
| addCardLink: "components.Card", | ||
| customLaneHeader: "components.LaneHeader", | ||
| newLaneTemplate: "components.NewLaneSection", | ||
| newCardTemplate: "components.NewCardForm", | ||
| children: "components.Card", | ||
| customCardLayout: "components.Card", | ||
| addLaneTitle: '`t` function with key "Add another lane"' | ||
| // addCardLink: '`t` function with key "Click to add card"' | ||
| }; | ||
| var warn = (prop) => { | ||
| const use = REPLACE_TABLE[prop]; | ||
| console.warn( | ||
| `react-trello property '${prop}' is removed. Use '${use}' instead. More - https://github.com/rcdexta/react-trello/blob/master/UPGRADE.md` | ||
| ); | ||
| }; | ||
| var deprecationWarnings_default = (props) => { | ||
| for (const key in REPLACE_TABLE) { | ||
| if (Object.prototype.hasOwnProperty.call(REPLACE_TABLE, key)) { | ||
| warn(key); | ||
| } else { | ||
| console.warn(`react-trello property '${key}' is removed`); | ||
| } | ||
| } | ||
| }; | ||
| // src/locales/en/translation.json | ||
| var translation_default = { | ||
| "Add another lane": "+ Add another lane", | ||
| "Click to add card": "Click to add card", | ||
| "Delete lane": "Delete lane", | ||
| "Lane actions": "Lane actions", | ||
| button: { | ||
| "Add lane": "Add lane", | ||
| "Add card": "Add card", | ||
| Cancel: "Cancel" | ||
| }, | ||
| placeholder: { | ||
| title: "title", | ||
| description: "description", | ||
| label: "label" | ||
| } | ||
| }; | ||
| // src/locales/ru/translation.json | ||
| var translation_default2 = { | ||
| "Add another lane": "\uFF0B\u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u043A\u043E\u043B\u043E\u043D\u043A\u0443", | ||
| "Click to add card": "\uFF0B\u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u043A\u0430\u0440\u0442\u043E\u0447\u043A\u0443", | ||
| "Delete lane": "\u0423\u0434\u0430\u043B\u0438\u0442\u044C \u043A\u043E\u043B\u043E\u043D\u043A\u0443", | ||
| "Lane actions": "\u0414\u0435\u0439\u0441\u0442\u0432\u0438\u044F \u043D\u0430\u0434 \u043A\u043E\u043B\u043E\u043D\u043A\u043E\u0439", | ||
| button: { | ||
| "Add card": "\u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u043A\u0430\u0440\u0442\u0443", | ||
| "Add lane": "\u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u043A\u043E\u043B\u043E\u043D\u043A\u0443", | ||
| Cancel: "\u041E\u0442\u043C\u0435\u043D\u0438\u0442\u044C" | ||
| }, | ||
| placeholder: { | ||
| title: "\u041D\u0430\u0437\u0432\u0430\u043D\u0438\u0435", | ||
| description: "\u041E\u043F\u0438\u0441\u0430\u043D\u0438\u0435", | ||
| label: "\u041C\u0435\u0442\u043A\u0430" | ||
| } | ||
| }; | ||
| // src/locales/index.ts | ||
| var locales_default = { | ||
| en: { | ||
| translation: translation_default | ||
| }, | ||
| ru: { | ||
| translation: translation_default2 | ||
| } | ||
| }; | ||
| // src/helpers/createTranslate.ts | ||
| var getValue = (table) => (key) => { | ||
| const keys = key.includes(".") ? key.split(".") : [key]; | ||
| let value = table; | ||
| for (const k of keys) { | ||
| if (value && k in value) { | ||
| value = value[k]; | ||
| } else { | ||
| return void 0; | ||
| } | ||
| } | ||
| return value; | ||
| }; | ||
| var createTranslate_default = (table) => (key) => getValue(table)(key); | ||
| // src/index.tsx | ||
| var DEFAULT_LANG = "en"; | ||
| var src_default = ({ | ||
| components, | ||
| lang = DEFAULT_LANG, | ||
| ...otherProps | ||
| }) => { | ||
| deprecationWarnings_default(otherProps); | ||
| const translate = createTranslate_default(locales_default[lang || "en"].translation); | ||
| return /* @__PURE__ */ import_react21.default.createElement( | ||
| Board, | ||
| { | ||
| t: translate, | ||
| components: { ...components_exports, ...components }, | ||
| ...otherProps | ||
| } | ||
| ); | ||
| }; | ||
| // Annotate the CommonJS export names for ESM import in node: | ||
| 0 && (module.exports = { | ||
| BoardContainer, | ||
| Container, | ||
| DeleteButton, | ||
| Draggable, | ||
| EditableLabel, | ||
| InlineInput, | ||
| Lane, | ||
| components, | ||
| createTranslate, | ||
| locales | ||
| }); | ||
| //# sourceMappingURL=index.js.map |
| { | ||
| "name": "react-trello-ts", | ||
| "version": "2.0.16", | ||
| "version": "2.0.17-canary.2b1a9f5", | ||
| "description": "Pluggable typesafe components to add a trello like kanban board to your application", | ||
| "main": "dist/index.js", | ||
| "types": "./dist/index.d.ts", | ||
| "main": "./dist/index.js", | ||
| "exports": { | ||
| ".": { | ||
| "require": "./dist/index.js", | ||
| "import": "./dist/index.mjs" | ||
| } | ||
| }, | ||
| "files": [ | ||
@@ -20,3 +27,3 @@ "dist", | ||
| ], | ||
| "author": "Kai", | ||
| "author": "Kai Spencer", | ||
| "license": "MIT", | ||
@@ -28,4 +35,2 @@ "bugs": { | ||
| "dependencies": { | ||
| "@babel/runtime": "^7.21.0", | ||
| "@types/classnames": "^2.3.1", | ||
| "autosize": "^4.0.2", | ||
@@ -40,22 +45,10 @@ "classnames": "^2.3.2", | ||
| "devDependencies": { | ||
| "@babel/cli": "^7.21.0", | ||
| "@babel/core": "^7.1.2", | ||
| "@babel/plugin-proposal-class-properties": "^7.18.6", | ||
| "@babel/plugin-transform-async-to-generator": "7.20.7", | ||
| "@babel/plugin-transform-runtime": "^7.21.0", | ||
| "@babel/plugin-transform-template-literals": "^7.18.9", | ||
| "@babel/preset-env": "7.20.2", | ||
| "@babel/preset-react": "^7.18.6", | ||
| "@babel/preset-typescript": "^7.18.6", | ||
| "@storybook/addon-info": "5.3.21", | ||
| "@storybook/addon-options": "5.3.21", | ||
| "@storybook/addon-storyshots": "6.5.10", | ||
| "@storybook/builder-webpack5": "^6.5.13", | ||
| "@storybook/cli": "6.5.10", | ||
| "@storybook/core-events": "^5.1.3", | ||
| "@storybook/manager-webpack5": "^6.5.10", | ||
| "@storybook/react": "6.5.10", | ||
| "@testing-library/react": "^12", | ||
| "@types/jest": "^27", | ||
| "@types/lodash": "^4.14.184", | ||
| "@biomejs/biome": "1.4.1", | ||
| "@storybook/addon-essentials": "^7.6.7", | ||
| "@storybook/builder-vite": "^7.6.7", | ||
| "@storybook/cli": "7.6.7", | ||
| "@storybook/core-events": "^7.6.7", | ||
| "@storybook/react": "7.6.7", | ||
| "@storybook/react-vite": "^7.6.7", | ||
| "@storybook/test-runner": "^0.16.0", | ||
| "@types/node": "^18.7.14", | ||
@@ -66,30 +59,17 @@ "@types/react": "^16", | ||
| "@types/uuid": "^8.3.4", | ||
| "babel-jest": "^27", | ||
| "babel-plugin-module-resolver": "^3.2.0", | ||
| "babel-plugin-require-context-hook": "^1.0.0", | ||
| "gh-pages": "^4.0.0", | ||
| "i18next": "^17.0.3", | ||
| "identity-obj-proxy": "^3.0.0", | ||
| "jest": "^27", | ||
| "jest-cli": "^27", | ||
| "jest-styled-components": "^7", | ||
| "preact": ">=10.5.13 <11.0.0", | ||
| "prettier": "1.14.3", | ||
| "react": "^16", | ||
| "react-dom": "^16", | ||
| "playwright": "^1.40.1", | ||
| "react": "^18", | ||
| "react-dom": "^18", | ||
| "react-i18next": "^10.11.0", | ||
| "react-is": ">= 16.8.0", | ||
| "regenerator-runtime": "*", | ||
| "require-from-string": "^2.0.2", | ||
| "semantic-release": "^17.2.3", | ||
| "start-server-and-test": "^2.0.3", | ||
| "storybook": "7.6.7", | ||
| "styled-components": "^5.3.9", | ||
| "ts-jest": "^27", | ||
| "tsup": "^6.2.3", | ||
| "typescript": "^4.9.3", | ||
| "webpack": "*" | ||
| "tsup": "^8.0.1", | ||
| "typescript": "^5.3.3" | ||
| }, | ||
| "peerDependencies": { | ||
| "lodash": ">= 4.17.11", | ||
| "react": "*", | ||
| "react-dom": "*", | ||
| "react": ">=16.8.0 <=18", | ||
| "react-dom": ">=16.8.0 <=18", | ||
| "styled-components": ">= 4.0.3" | ||
@@ -99,15 +79,14 @@ }, | ||
| "prepublish": "pnpm build", | ||
| "storybook": "start-storybook -p 9002", | ||
| "test:unit": "jest", | ||
| "test:watch": "jest --watch", | ||
| "build": "pnpm build:types && pnpm build:js", | ||
| "build:types": "tsc --emitDeclarationOnly --declaration --declarationDir dist --allowJs false --outDir dist", | ||
| "build:js": "babel src --out-dir dist --extensions \".ts,.tsx\" --ignore \"**/*.test.tsx\" --copy-files --config-file ./.babelrc", | ||
| "docs": "build-storybook -o docs", | ||
| "deploy-storybook": "pnpm build-storybook && gh-pages -d storybook-build", | ||
| "build-storybook": "build-storybook -o storybook-build", | ||
| "lint": "pnpm rome check .", | ||
| "storybook": "storybook dev -p 6006", | ||
| "storybook:no-open": "pnpm storybook --no-open", | ||
| "test": "start-server-and-test storybook:no-open http://localhost:6006 test-storybook", | ||
| "test-storybook": "test-storybook", | ||
| "dev": "tsup --watch", | ||
| "build": "tsup", | ||
| "docs": "storybook build -o docs", | ||
| "deploy-storybook": "pnpm storybook build && gh-pages -d storybook-build", | ||
| "build-storybook": "storybook build -o storybook-build", | ||
| "lint": "pnpm biome check .", | ||
| "release": "pnpm build && pnpm changeset publish" | ||
| }, | ||
| "typings": "dist/index.d.ts" | ||
| } | ||
| } |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
No v1
QualityPackage is not semver >=1. This means it is not stable and does not support ^ ranges.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
No README
QualityPackage does not have a README. This may indicate a failed publish or a low quality package.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by166.16%
334697
- Dependency count
- decreased by-23.08%
10
- Dev dependency count
- decreased by-50%
24
- Lines of code
- increased by62.47%
4026
- Number of medium quality alerts
- decreased by-50%
1
- Number of lines in readme file
- increased byInfinity%
70
Worsened metrics
- Number of package files
- decreased by-87.32%
9
- Number of low quality alerts
- increased byInfinity%
1
- Number of medium supply chain risk alerts
- increased byInfinity%
1
Dependency changes
+ Addednanoid@3.3.8(transitive)
- Removed@babel/runtime@^7.21.0
- Removed@types/classnames@^2.3.1
- Removed@babel/runtime@7.26.0(transitive)
- Removed@types/classnames@2.3.4(transitive)
- Removedlodash@4.17.21(transitive)
- Removednanoid@3.3.7(transitive)
- Removedregenerator-runtime@0.14.1(transitive)