mirror of
https://github.com/spacedriveapp/spacedrive
synced 2024-07-14 05:24:04 +00:00
[ENG-760] Overview draggable categories (#1064)
* Draggable categories * Update Categories.tsx * fix storybook --------- Co-authored-by: Utku Bakir <74243531+utkubakir@users.noreply.github.com>
This commit is contained in:
parent
f433995de6
commit
a04da012ed
|
@ -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) ${
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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'
|
||||
|
|
|
@ -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: [
|
||||
|
|
|
@ -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');
|
||||
|
|
|
@ -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;
|
||||
|
|
1757
pnpm-lock.yaml
1757
pnpm-lock.yaml
File diff suppressed because it is too large
Load diff
Loading…
Reference in a new issue