From a04da012ed2d948fc7e6697e19d7f2ba29181e87 Mon Sep 17 00:00:00 2001 From: ameer2468 <33054370+ameer2468@users.noreply.github.com> Date: Fri, 30 Jun 2023 13:37:54 +0300 Subject: [PATCH] [ENG-760] Overview draggable categories (#1064) * Draggable categories * Update Categories.tsx * fix storybook --------- Co-authored-by: Utku Bakir <74243531+utkubakir@users.noreply.github.com> --- .../app/$libraryId/overview/Categories.tsx | 3 +++ interface/package.json | 1 + packages/ui/package.json | 1 + packages/ui/src/Button.stories.tsx | 12 +++++++----- packages/ui/src/Dropdown.stories.tsx | 13 ++++++++----- packages/ui/src/Input.stories.tsx | 6 ++++-- packages/ui/src/Select.stories.tsx | 6 ++++-- pnpm-lock.yaml | Bin 914877 -> 917513 bytes 8 files changed, 28 insertions(+), 14 deletions(-) diff --git a/interface/app/$libraryId/overview/Categories.tsx b/interface/app/$libraryId/overview/Categories.tsx index 46122dc2d..316e60545 100644 --- a/interface/app/$libraryId/overview/Categories.tsx +++ b/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(null); + const { events } = useDraggable(ref as React.MutableRefObject); const [lastCategoryVisible, setLastCategoryVisible] = useState(false); useEffect(() => { @@ -76,6 +78,7 @@ export const Categories = (props: { selected: Category; onSelectedChanged(c: Cat
= { title: 'Button', component: Button, argTypes: {}, @@ -13,21 +13,23 @@ export default { args: { children: 'Button' } -} as Meta; +}; + +export default meta; const Template: StoryFn = (args) =>