[ENG-760] Overview draggable categories (#1064)

* Draggable categories

* Update Categories.tsx

* fix storybook

---------

Co-authored-by: Utku Bakir <74243531+utkubakir@users.noreply.github.com>

interface/app/$libraryId/overview/Categories.tsx

@@ -3,6 +3,7 @@ import clsx from 'clsx';
 import { motion } from 'framer-motion';
 import { ArrowLeft, ArrowRight } from 'phosphor-react';
 import { useEffect, useRef, useState } from 'react';
+import { useDraggable } from 'react-use-draggable-scroll';
 import { Category, useLibraryQuery } from '@sd/client';
 import { useIsDark } from '~/hooks';
 import CategoryButton from './CategoryButton';
@@ -33,6 +34,7 @@ export const Categories = (props: { selected: Category; onSelectedChanged(c: Cat
 	const isDark = useIsDark();
 	const [scroll, setScroll] = useState(0);
 	const ref = useRef<HTMLDivElement>(null);
+	const { events } = useDraggable(ref as React.MutableRefObject<HTMLDivElement>);
 	const [lastCategoryVisible, setLastCategoryVisible] = useState(false);
 
 	useEffect(() => {
@@ -76,6 +78,7 @@ export const Categories = (props: { selected: Category; onSelectedChanged(c: Cat
 			</div>
 			<div
 				ref={ref}
+				{...events}
 				className="no-scrollbar flex space-x-[1px] overflow-x-scroll py-1.5 pl-0 pr-[60px]"
 				style={{
 					maskImage: `linear-gradient(90deg, transparent 0.1%, rgba(0, 0, 0, 1) ${

interface/package.json

@@ -59,6 +59,7 @@
 		"react-router-dom": "6.9.0",
 		"react-scroll-sync": "^0.11.0",
 		"react-selecto": "^1.22.3",
+		"react-use-draggable-scroll": "^0.4.7",
 		"remix-params-helper": "^0.4.10",
 		"rooks": "^5.14.0",
 		"tailwindcss": "^3.3.2",

packages/ui/package.json

@@ -49,6 +49,7 @@
 	"devDependencies": {
 		"@babel/core": "^7.19.3",
 		"@sd/config": "workspace:*",
+		"@storybook/types": "^7.0.24",
 		"@tailwindcss/typography": "^0.5.7",
 		"@types/node": "^18.15.1",
 		"@types/react": "^18.0.21",

packages/ui/src/Button.stories.tsx

@@ -1,7 +1,7 @@
 import { Meta, StoryFn } from '@storybook/react';
 import { Button } from './Button';
 
-export default {
+const meta: Meta<typeof Button> = {
 	title: 'Button',
 	component: Button,
 	argTypes: {},
@@ -13,21 +13,23 @@ export default {
 	args: {
 		children: 'Button'
 	}
-} as Meta<typeof Button>;
+};
+
+export default meta;
 
 const Template: StoryFn<typeof Button> = (args) => <Button {...args} />;
 
-export const Default = Template.bind({});
+export const Default: StoryFn<typeof Button> = Template.bind({});
 Default.args = {
 	variant: 'default'
 };
 
-export const Primary = Template.bind({});
+export const Primary: StoryFn<typeof Button> = Template.bind({});
 Primary.args = {
 	variant: 'accent'
 };
 
-export const PrimarySmall = Template.bind({});
+export const PrimarySmall: StoryFn<typeof Button> = Template.bind({});
 PrimarySmall.args = {
 	variant: 'accent',
 	size: 'sm'

packages/ui/src/Dropdown.stories.tsx

@@ -1,7 +1,7 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react';
 import { Root } from './Dropdown';
 
-export default {
+const meta: Meta<typeof Root> = {
 	title: 'Dropdown',
 	component: Root,
 	argTypes: {},
@@ -10,11 +10,14 @@ export default {
 			default: 'dark'
 		}
 	}
-} as ComponentMeta<typeof Root>;
+};
 
-const Template: ComponentStory<typeof Root> = (args) => <Root {...args} />;
+export default meta;
+
+const Template: StoryFn<typeof Root> = (args) => <Root {...args} />;
+
+export const Default: StoryFn<typeof Root> = Template.bind({});
 
-export const Default = Template.bind({});
 // Default.args = {
 // 	buttonText: 'Item 1',
 // 	items: [

packages/ui/src/Input.stories.tsx

@@ -2,7 +2,7 @@ import { Meta } from '@storybook/react';
 import { useState } from 'react';
 import { Input } from './Input';
 
-export default {
+const meta: Meta<typeof Input> = {
 	title: 'Input',
 	component: Input,
 	argTypes: {},
@@ -14,7 +14,9 @@ export default {
 	args: {
 		children: 'Input'
 	}
-} as Meta<typeof Input>;
+};
+
+export default meta;
 
 export const Default = () => {
 	const [value, setValue] = useState('Spacedrive');

packages/ui/src/Select.stories.tsx

@@ -2,7 +2,7 @@ import { Meta } from '@storybook/react';
 import { useState } from 'react';
 import { Select, SelectOption } from './Select';
 
-export default {
+const meta: Meta<typeof Select> = {
 	title: 'Select',
 	component: Select,
 	argTypes: {},
@@ -14,7 +14,9 @@ export default {
 	args: {
 		children: 'Select'
 	}
-} as Meta<typeof Select>;
+};
+
+export default meta;
 
 export const Default = () => {
 	const VALUES = ['Option 1', 'Option 2', 'Option 3'] as const;