@rulab/adminjs-components 0.0.13 → 0.1.0-alpha.2

package/src/components/StringList/SortableList/SortableList.tsx

@@ -1,98 +1,98 @@
-import React, { Fragment, useMemo, useState } from "react";
-import type { ReactNode } from "react";
-
-import {
-  DndContext,
-  KeyboardSensor,
-  PointerSensor,
-  useSensor,
-  useSensors,
-  DragOverlay,
-  defaultDropAnimationSideEffects,
-} from "@dnd-kit/core";
-import {
-  SortableContext,
-  arrayMove,
-  sortableKeyboardCoordinates,
-  verticalListSortingStrategy,
-} from "@dnd-kit/sortable";
-
-import type { DropAnimation } from "@dnd-kit/core";
-
-import { SortableItem } from "./components/index.js";
-import { StyledListWrapper } from "./styles.js";
-
-import type { Active, UniqueIdentifier } from "@dnd-kit/core";
-
-interface BaseItem {
-  id: UniqueIdentifier;
-  value: string;
-}
-
-interface Props<T extends BaseItem> {
-  items: T[];
-  onChange(items: T[]): void;
-  renderItem(item: T): ReactNode;
-}
-
-const dropAnimationConfig: DropAnimation = {
-  sideEffects: defaultDropAnimationSideEffects({
-    styles: {
-      active: {
-        opacity: "0.4",
-      },
-    },
-  }),
-};
-
-export function SortableList<T extends BaseItem>({
-  items,
-  onChange,
-  renderItem,
-}: Props<T>) {
-  const [active, setActive] = useState<Active | null>(null);
-  const activeItem = useMemo(
-    () => items.find((item) => item.id === active?.id),
-    [active, items],
-  );
-  const sensors = useSensors(
-    useSensor(PointerSensor),
-    useSensor(KeyboardSensor, {
-      coordinateGetter: sortableKeyboardCoordinates,
-    }),
-  );
-
-  return (
-    <DndContext
-      sensors={sensors}
-      onDragStart={({ active }) => {
-        setActive(active);
-      }}
-      onDragEnd={({ active, over }) => {
-        if (over && active.id !== over?.id) {
-          const activeIndex = items.findIndex(({ id }) => id === active.id);
-          const overIndex = items.findIndex(({ id }) => id === over.id);
-
-          onChange(arrayMove(items, activeIndex, overIndex));
-        }
-        setActive(null);
-      }}
-      onDragCancel={() => {
-        setActive(null);
-      }}
-    >
-      <SortableContext items={items} strategy={verticalListSortingStrategy}>
-        <StyledListWrapper role="application">
-          {items.map((item, index) => (
-            <Fragment key={index}>{renderItem(item)}</Fragment>
-          ))}
-        </StyledListWrapper>
-      </SortableContext>
-      <DragOverlay dropAnimation={dropAnimationConfig}>
-        {activeItem ? renderItem(activeItem) : null}
-      </DragOverlay>
-    </DndContext>
-  );
-}
-
-SortableList.Item = SortableItem;
+import React, { Fragment, useMemo, useState } from "react";
+import type { ReactNode } from "react";
+
+import {
+  DndContext,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+  DragOverlay,
+  defaultDropAnimationSideEffects,
+} from "@dnd-kit/core";
+import {
+  SortableContext,
+  arrayMove,
+  sortableKeyboardCoordinates,
+  verticalListSortingStrategy,
+} from "@dnd-kit/sortable";
+
+import type { DropAnimation } from "@dnd-kit/core";
+
+import { SortableItem } from "./components/index.js";
+import { StyledListWrapper } from "./styles.js";
+
+import type { Active, UniqueIdentifier } from "@dnd-kit/core";
+
+interface BaseItem {
+  id: UniqueIdentifier;
+  value: string;
+}
+
+interface Props<T extends BaseItem> {
+  items: T[];
+  onChange(items: T[]): void;
+  renderItem(item: T): ReactNode;
+}
+
+const dropAnimationConfig: DropAnimation = {
+  sideEffects: defaultDropAnimationSideEffects({
+    styles: {
+      active: {
+        opacity: "0.4",
+      },
+    },
+  }),
+};
+
+export function SortableList<T extends BaseItem>({
+  items,
+  onChange,
+  renderItem,
+}: Props<T>) {
+  const [active, setActive] = useState<Active | null>(null);
+  const activeItem = useMemo(
+    () => items.find((item) => item.id === active?.id),
+    [active, items],
+  );
+  const sensors = useSensors(
+    useSensor(PointerSensor),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    }),
+  );
+
+  return (
+    <DndContext
+      sensors={sensors}
+      onDragStart={({ active }) => {
+        setActive(active);
+      }}
+      onDragEnd={({ active, over }) => {
+        if (over && active.id !== over?.id) {
+          const activeIndex = items.findIndex(({ id }) => id === active.id);
+          const overIndex = items.findIndex(({ id }) => id === over.id);
+
+          onChange(arrayMove(items, activeIndex, overIndex));
+        }
+        setActive(null);
+      }}
+      onDragCancel={() => {
+        setActive(null);
+      }}
+    >
+      <SortableContext items={items} strategy={verticalListSortingStrategy}>
+        <StyledListWrapper role="application">
+          {items.map((item, index) => (
+            <Fragment key={index}>{renderItem(item)}</Fragment>
+          ))}
+        </StyledListWrapper>
+      </SortableContext>
+      <DragOverlay dropAnimation={dropAnimationConfig}>
+        {activeItem ? renderItem(activeItem) : null}
+      </DragOverlay>
+    </DndContext>
+  );
+}
+
+SortableList.Item = SortableItem;

package/src/components/StringList/SortableList/components/SortableItem/DragHandle.tsx

@@ -1,20 +1,20 @@
-import React, { Context, FC, useContext } from "react";
-
-import { StyledDragButton } from "./styles.js";
-import type { DragContext } from "./types.js";
-
-interface DragHandlePropsType {
-  context: Context<DragContext>;
-}
-
-export const DragHandle: FC<DragHandlePropsType> = ({ context }) => {
-  const { attributes, listeners, ref } = useContext(context);
-
-  return (
-    <StyledDragButton {...attributes} {...listeners} ref={ref}>
-      <svg viewBox="0 0 20 20" width="13">
-        <path d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"></path>
-      </svg>
-    </StyledDragButton>
-  );
-};
+import React, { Context, FC, useContext } from "react";
+
+import { StyledDragButton } from "./styles.js";
+import type { DragContext } from "./types.js";
+
+interface DragHandlePropsType {
+  context: Context<DragContext>;
+}
+
+export const DragHandle: FC<DragHandlePropsType> = ({ context }) => {
+  const { attributes, listeners, ref } = useContext(context);
+
+  return (
+    <StyledDragButton {...attributes} {...listeners} ref={ref}>
+      <svg viewBox="0 0 20 20" width="13">
+        <path d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"></path>
+      </svg>
+    </StyledDragButton>
+  );
+};

package/src/components/StringList/SortableList/components/SortableItem/SortableItem.tsx

@@ -1,59 +1,59 @@
-import React, { createContext, useMemo, ChangeEvent } from 'react';
-import type { CSSProperties, PropsWithChildren } from 'react';
-import { useSortable } from '@dnd-kit/sortable';
-import { Button, Icon } from '@adminjs/design-system';
-
-import { DragHandle } from './DragHandle.js';
-import { StyledListItem } from './styles.js';
-import type { DragContext } from './types.js';
-
-interface SortableItemPropsType {
-  id: string;
-  onDelete: (e: ChangeEvent<HTMLInputElement>, id: string) => void;
-}
-
-const SortableItemContext = createContext<DragContext>({
-  attributes: {},
-  listeners: undefined,
-  ref() {},
-});
-
-export function SortableItem({
-  children,
-  id,
-  onDelete,
-}: PropsWithChildren<SortableItemPropsType>) {
-  const { attributes, isDragging, listeners, setNodeRef, setActivatorNodeRef } =
-    useSortable({ id });
-  const context = useMemo(
-    () => ({
-      attributes,
-      listeners,
-      ref: setActivatorNodeRef,
-    }),
-    [attributes, listeners, setActivatorNodeRef],
-  );
-
-  const style: CSSProperties = {
-    opacity: isDragging ? 0.4 : undefined,
-  };
-
-  return (
-    <SortableItemContext.Provider value={context}>
-      <StyledListItem ref={setNodeRef} style={style}>
-        <div>
-          <DragHandle context={SortableItemContext} />
-          {children}
-        </div>
-        <Button
-          variant="outlined"
-          color="danger"
-          size="icon"
-          onClick={(e: ChangeEvent<HTMLInputElement>) => onDelete(e, id)}
-        >
-          <Icon icon="X" color="red" />
-        </Button>
-      </StyledListItem>
-    </SortableItemContext.Provider>
-  );
-}
+import React, { createContext, useMemo, ChangeEvent } from 'react';
+import type { CSSProperties, PropsWithChildren } from 'react';
+import { useSortable } from '@dnd-kit/sortable';
+import { Button, Icon } from '@adminjs/design-system';
+
+import { DragHandle } from './DragHandle.js';
+import { StyledListItem } from './styles.js';
+import type { DragContext } from './types.js';
+
+interface SortableItemPropsType {
+  id: string;
+  onDelete: (e: ChangeEvent<HTMLInputElement>, id: string) => void;
+}
+
+const SortableItemContext = createContext<DragContext>({
+  attributes: {},
+  listeners: undefined,
+  ref() {},
+});
+
+export function SortableItem({
+  children,
+  id,
+  onDelete,
+}: PropsWithChildren<SortableItemPropsType>) {
+  const { attributes, isDragging, listeners, setNodeRef, setActivatorNodeRef } =
+    useSortable({ id });
+  const context = useMemo(
+    () => ({
+      attributes,
+      listeners,
+      ref: setActivatorNodeRef,
+    }),
+    [attributes, listeners, setActivatorNodeRef],
+  );
+
+  const style: CSSProperties = {
+    opacity: isDragging ? 0.4 : undefined,
+  };
+
+  return (
+    <SortableItemContext.Provider value={context}>
+      <StyledListItem ref={setNodeRef} style={style}>
+        <div>
+          <DragHandle context={SortableItemContext} />
+          {children}
+        </div>
+        <Button
+          variant="outlined"
+          color="danger"
+          size="icon"
+          onClick={(e: ChangeEvent<HTMLInputElement>) => onDelete(e, id)}
+        >
+          <Icon icon="X" color="red" />
+        </Button>
+      </StyledListItem>
+    </SortableItemContext.Provider>
+  );
+}

package/src/components/StringList/SortableList/components/SortableItem/styles.ts

@@ -1,22 +1,22 @@
-import { styled } from "@adminjs/design-system/styled-components";
-
-export const StyledListItem = styled.li`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  background-color: #fff;
-  padding: 10px 20px 10px 15px;
-  box-shadow:
-    0 0 0 calc(1px / var(--scale-x, 1)) rgba(63, 63, 68, 0.05),
-    0 1px calc(3px / var(--scale-x, 1)) 0 rgba(34, 33, 81, 0.15);
-  border-radius: 5px;
-  list-style: none;
-`;
-
-export const StyledDragButton = styled.button`
-  padding: 3px;
-  margin-right: 15px;
-  cursor: move;
-  background: none;
-  border: none;
-`;
+import { styled } from "@adminjs/design-system/styled-components";
+
+export const StyledListItem = styled.li`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color: #fff;
+  padding: 10px 20px 10px 15px;
+  box-shadow:
+    0 0 0 calc(1px / var(--scale-x, 1)) rgba(63, 63, 68, 0.05),
+    0 1px calc(3px / var(--scale-x, 1)) 0 rgba(34, 33, 81, 0.15);
+  border-radius: 5px;
+  list-style: none;
+`;
+
+export const StyledDragButton = styled.button`
+  padding: 3px;
+  margin-right: 15px;
+  cursor: move;
+  background: none;
+  border: none;
+`;

package/src/components/StringList/SortableList/components/SortableItem/types.ts

@@ -1,7 +1,7 @@
-import type { DraggableSyntheticListeners } from '@dnd-kit/core';
-
-export interface DragContext {
-  attributes: Record<string, any>;
-  listeners: DraggableSyntheticListeners;
-  ref(node: HTMLElement | null): void;
-}
+import type { DraggableSyntheticListeners } from '@dnd-kit/core';
+
+export interface DragContext {
+  attributes: Record<string, any>;
+  listeners: DraggableSyntheticListeners;
+  ref(node: HTMLElement | null): void;
+}

package/src/components/StringList/SortableList/components/index.ts

@@ -1,2 +1,2 @@
-export { SortableItem } from './SortableItem/SortableItem.js';
-export { DragHandle } from './SortableItem/DragHandle.js';
+export { SortableItem } from './SortableItem/SortableItem.js';
+export { DragHandle } from './SortableItem/DragHandle.js';

package/src/components/StringList/SortableList/index.ts

@@ -1 +1 @@
-export { SortableList } from './SortableList.js';
+export { SortableList } from './SortableList.js';

package/src/components/StringList/SortableList/styles.ts

@@ -1,9 +1,9 @@
-import { styled } from '@adminjs/design-system/styled-components';
-
-export const StyledListWrapper = styled.ul`
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  padding: 0;
-  list-style: none;
-`;
+import { styled } from '@adminjs/design-system/styled-components';
+
+export const StyledListWrapper = styled.ul`
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 0;
+  list-style: none;
+`;