pixel-react 1.8.4 → 1.8.6

package/src/components/DragAndDrop/DragAndDrop.stories.tsx

@@ -1,25 +1,25 @@
-import { Meta, StoryObj } from '@storybook/react';
-import DragAndDropList from './DragAndDropList';
-
-const meta: Meta<typeof DragAndDropList> = {
-  title: 'Components/DragAndDrop',
-  component: DragAndDropList,
-  parameters: {
-    layout: 'centered',
-    docs: {
-      description: {
-        component: `It is a drag and drop list component that allows users to reorder items by dragging and dropping them. Library used is dnd-kit/core, dnd-kit/sortable, dnd-kit/utilities`,
-        story:
-          'This is a link of [dnd-kit library](https://www.npmjs.com/package/@dnd-kit/core) for reference to an external website.',
-      },
-    },
-  },
-  tags: ['autodocs'],
-};
-
-type Story = StoryObj<typeof DragAndDropList>;
-
-export const Primary: Story = {
-  render: () => <DragAndDropList />,
-};
-export default meta;
+import { Meta, StoryObj } from '@storybook/react';
+import DragAndDropList from './DragAndDropList';
+
+const meta: Meta<typeof DragAndDropList> = {
+  title: 'Components/DragAndDrop',
+  component: DragAndDropList,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: `It is a drag and drop list component that allows users to reorder items by dragging and dropping them. Library used is dnd-kit/core, dnd-kit/sortable, dnd-kit/utilities`,
+        story:
+          'This is a link of [dnd-kit library](https://www.npmjs.com/package/@dnd-kit/core) for reference to an external website.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+};
+
+type Story = StoryObj<typeof DragAndDropList>;
+
+export const Primary: Story = {
+  render: () => <DragAndDropList />,
+};
+export default meta;

package/src/components/DragAndDrop/DragAndDrop.ts

@@ -1,7 +1,7 @@
-import * as DNDCore from '@dnd-kit/core';
-import * as DNDSortable from '@dnd-kit/sortable';
-import * as DNDUtilities from '@dnd-kit/utilities';
-
-const DragAndDrop = { DNDCore, DNDSortable, DNDUtilities };
-
-export default DragAndDrop;
+import * as DNDCore from '@dnd-kit/core';
+import * as DNDSortable from '@dnd-kit/sortable';
+import * as DNDUtilities from '@dnd-kit/utilities';
+
+const DragAndDrop = { DNDCore, DNDSortable, DNDUtilities };
+
+export default DragAndDrop;

package/src/components/DragAndDrop/DragAndDropList.scss

@@ -1,69 +1,69 @@
-$primary-color: #2563eb;
-$primary-hover-color: #235dda;
-$background-color: #f2f2f3;
-$white-color: #fff;
-$border-radius: 5px;
-$box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
-$checkbox-size: 20px;
-
-.drag-and-drop-list {
-  height: max-content;
-  width: fit-content;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 30px;
-}
-
-.column {
-  background-color: $background-color;
-  border-radius: $border-radius;
-  padding: 15px;
-  width: 80%;
-  max-width: 500px;
-  display: flex;
-  flex-direction: column;
-  gap: 15px;
-
-  .task {
-    background-color: $white-color;
-    border-radius: $border-radius;
-    box-shadow: $box-shadow;
-    padding: 4px 8px;
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-    gap: 20px;
-    cursor: grab;
-    &-title {
-      word-break: break-all;
-    }
-  }
-}
-
-.container {
-  display: flex;
-  justify-content: space-between;
-  gap: 10px;
-
-  .input {
-    border: 2px solid #ddd;
-    border-radius: $border-radius;
-    padding: 10px;
-    width: 200px;
-  }
-
-  .button {
-    border: none;
-    border-radius: $border-radius;
-    padding: 10px 15px;
-    background-color: $primary-color;
-    color: $white-color;
-    cursor: pointer;
-    margin-left: 10px;
-
-    &:hover {
-      background-color: $primary-hover-color;
-    }
-  }
-}
+$primary-color: #2563eb;
+$primary-hover-color: #235dda;
+$background-color: #f2f2f3;
+$white-color: #fff;
+$border-radius: 5px;
+$box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
+$checkbox-size: 20px;
+
+.drag-and-drop-list {
+  height: max-content;
+  width: fit-content;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 30px;
+}
+
+.column {
+  background-color: $background-color;
+  border-radius: $border-radius;
+  padding: 15px;
+  width: 80%;
+  max-width: 500px;
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+
+  .task {
+    background-color: $white-color;
+    border-radius: $border-radius;
+    box-shadow: $box-shadow;
+    padding: 4px 8px;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 20px;
+    cursor: grab;
+    &-title {
+      word-break: break-all;
+    }
+  }
+}
+
+.container {
+  display: flex;
+  justify-content: space-between;
+  gap: 10px;
+
+  .input {
+    border: 2px solid #ddd;
+    border-radius: $border-radius;
+    padding: 10px;
+    width: 200px;
+  }
+
+  .button {
+    border: none;
+    border-radius: $border-radius;
+    padding: 10px 15px;
+    background-color: $primary-color;
+    color: $white-color;
+    cursor: pointer;
+    margin-left: 10px;
+
+    &:hover {
+      background-color: $primary-hover-color;
+    }
+  }
+}

package/src/components/DragAndDrop/DragAndDropList.tsx

@@ -1,151 +1,151 @@
-import { useState } from 'react';
-import DragAndDrop from './DragAndDrop';
-const {
-  DNDCore: {
-    DndContext,
-    KeyboardSensor,
-    PointerSensor,
-    useSensor,
-    useSensors,
-    closestCorners,
-  },
-  DNDSortable: {
-    useSortable,
-    arrayMove,
-    sortableKeyboardCoordinates,
-    SortableContext,
-    verticalListSortingStrategy,
-  },
-  DNDUtilities: { CSS },
-} = DragAndDrop;
-import Typography from '../Typography';
-
-import './DragAndDropList.scss';
-import { DragEndEvent } from '@dnd-kit/core';
-
-interface TaskProps {
-  id: number;
-  title: string;
-}
-
-export const Task = ({ id, title }: TaskProps) => {
-  const { attributes, listeners, setNodeRef, transform, transition } =
-    useSortable({ id });
-
-  const style = {
-    transition,
-    transform: CSS.Transform.toString(transform),
-  };
-
-  return (
-    <div
-      ref={setNodeRef}
-      style={style}
-      {...attributes}
-      {...listeners}
-      className="task"
-    >
-      <Typography as='h1' fontSize={16} className='task-title'>{title}</Typography>
-    </div>
-  );
-};
-
-interface ColumnProps {
-  id: string;
-  tasks: { id: number; title: string }[];
-}
-
-export const Column: React.FC<ColumnProps> = ({ tasks }) => {
-  return (
-    <div className="column">
-      <SortableContext items={tasks} strategy={verticalListSortingStrategy}>
-        {tasks.map((task) => (
-          <Task key={task.id} id={task.id} title={task.title} />
-        ))}
-      </SortableContext>
-    </div>
-  );
-};
-
-interface InputProps {
-  onSubmit: (input: string) => void;
-}
-
-export const Input: React.FC<InputProps> = ({ onSubmit }) => {
-  const [input, setInput] = useState('');
-
-  const handleSubmit = () => {
-    if (!input) return;
-
-    onSubmit(input);
-
-    setInput('');
-  };
-
-  return (
-    <div className="container">
-      <input
-        className="input"
-        type="text"
-        value={input}
-        onChange={(e) => setInput(e.target.value)}
-      />
-      <button onClick={handleSubmit} className="button">
-        <Typography fontSize={14}>Add</Typography>
-      </button>
-    </div>
-  );
-};
-
-const DragAndDropList = () => {
-  const [tasks, setTasks] = useState([
-    { id: 1, title: 'Add tests to homepage' },
-    { id: 2, title: 'Fix styling in about section' },
-    { id: 3, title: 'Learn how to center a div' },
-  ]);
-
-  const addTask = (title: any) => {
-    setTasks((tasks) => [...tasks, { id: tasks.length + 1, title }]);
-  };
-
-  const sensors = useSensors(
-    useSensor(PointerSensor),
-    useSensor(KeyboardSensor, {
-      coordinateGetter: sortableKeyboardCoordinates,
-    })
-  );
-
-  const getTaskPos = (id: number): number =>
-    tasks.findIndex((task) => task.id === id);
-
-  const handleDragEnd = (event: DragEndEvent) => {
-    const { active, over } = event;
-
-    if (active.id === over?.id) return;
-
-    setTasks((tasks) => {
-      const originalPos = getTaskPos(Number(active?.id));
-      const newPos = getTaskPos(Number(over?.id));
-
-      return arrayMove(tasks, originalPos, newPos);
-    });
-  };
-
-  return (
-    <div className="drag-and-drop-list">
-      <Typography fontSize={32} fontWeight="semi-bold">
-        Drag and Drop test ✅
-      </Typography>
-      <Input onSubmit={addTask} />
-      <DndContext
-        sensors={sensors}
-        collisionDetection={closestCorners}
-        onDragEnd={handleDragEnd}
-      >
-        <Column id="toDo" tasks={tasks} />
-      </DndContext>
-    </div>
-  );
-};
-
-export default DragAndDropList;
+import { useState } from 'react';
+import DragAndDrop from './DragAndDrop';
+const {
+  DNDCore: {
+    DndContext,
+    KeyboardSensor,
+    PointerSensor,
+    useSensor,
+    useSensors,
+    closestCorners,
+  },
+  DNDSortable: {
+    useSortable,
+    arrayMove,
+    sortableKeyboardCoordinates,
+    SortableContext,
+    verticalListSortingStrategy,
+  },
+  DNDUtilities: { CSS },
+} = DragAndDrop;
+import Typography from '../Typography';
+
+import './DragAndDropList.scss';
+import { DragEndEvent } from '@dnd-kit/core';
+
+interface TaskProps {
+  id: number;
+  title: string;
+}
+
+export const Task = ({ id, title }: TaskProps) => {
+  const { attributes, listeners, setNodeRef, transform, transition } =
+    useSortable({ id });
+
+  const style = {
+    transition,
+    transform: CSS.Transform.toString(transform),
+  };
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={style}
+      {...attributes}
+      {...listeners}
+      className="task"
+    >
+      <Typography as='h1' fontSize={16} className='task-title'>{title}</Typography>
+    </div>
+  );
+};
+
+interface ColumnProps {
+  id: string;
+  tasks: { id: number; title: string }[];
+}
+
+export const Column: React.FC<ColumnProps> = ({ tasks }) => {
+  return (
+    <div className="column">
+      <SortableContext items={tasks} strategy={verticalListSortingStrategy}>
+        {tasks.map((task) => (
+          <Task key={task.id} id={task.id} title={task.title} />
+        ))}
+      </SortableContext>
+    </div>
+  );
+};
+
+interface InputProps {
+  onSubmit: (input: string) => void;
+}
+
+export const Input: React.FC<InputProps> = ({ onSubmit }) => {
+  const [input, setInput] = useState('');
+
+  const handleSubmit = () => {
+    if (!input) return;
+
+    onSubmit(input);
+
+    setInput('');
+  };
+
+  return (
+    <div className="container">
+      <input
+        className="input"
+        type="text"
+        value={input}
+        onChange={(e) => setInput(e.target.value)}
+      />
+      <button onClick={handleSubmit} className="button">
+        <Typography fontSize={14}>Add</Typography>
+      </button>
+    </div>
+  );
+};
+
+const DragAndDropList = () => {
+  const [tasks, setTasks] = useState([
+    { id: 1, title: 'Add tests to homepage' },
+    { id: 2, title: 'Fix styling in about section' },
+    { id: 3, title: 'Learn how to center a div' },
+  ]);
+
+  const addTask = (title: any) => {
+    setTasks((tasks) => [...tasks, { id: tasks.length + 1, title }]);
+  };
+
+  const sensors = useSensors(
+    useSensor(PointerSensor),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    })
+  );
+
+  const getTaskPos = (id: number): number =>
+    tasks.findIndex((task) => task.id === id);
+
+  const handleDragEnd = (event: DragEndEvent) => {
+    const { active, over } = event;
+
+    if (active.id === over?.id) return;
+
+    setTasks((tasks) => {
+      const originalPos = getTaskPos(Number(active?.id));
+      const newPos = getTaskPos(Number(over?.id));
+
+      return arrayMove(tasks, originalPos, newPos);
+    });
+  };
+
+  return (
+    <div className="drag-and-drop-list">
+      <Typography fontSize={32} fontWeight="semi-bold">
+        Drag and Drop test ✅
+      </Typography>
+      <Input onSubmit={addTask} />
+      <DndContext
+        sensors={sensors}
+        collisionDetection={closestCorners}
+        onDragEnd={handleDragEnd}
+      >
+        <Column id="toDo" tasks={tasks} />
+      </DndContext>
+    </div>
+  );
+};
+
+export default DragAndDropList;