remove unnecessary select styles and configure storybook (#807)

* remove unnecessary select styles and configure storybook

* fix eslint

* fix clippy

apps/desktop/src-tauri/src/file.rs

@@ -63,21 +63,19 @@ pub async fn get_file_path_open_with_apps(
         };
 
 	#[cfg(target_os = "macos")]
-	let apps = {
-		unsafe { sd_desktop_macos::get_open_with_applications(&path.to_str().unwrap().into()) }
-			.as_slice()
-			.into_iter()
-			.map(|app| OpenWithApplication {
-				name: app.name.to_string(),
-				url: app.url.to_string(),
-			})
-			.collect()
-	};
+	return Ok(unsafe {
+		sd_desktop_macos::get_open_with_applications(&path.to_str().unwrap().into())
+	}
+	.as_slice()
+	.into_iter()
+	.map(|app| OpenWithApplication {
+		name: app.name.to_string(),
+		url: app.url.to_string(),
+	})
+	.collect());
 
 	#[cfg(not(target_os = "macos"))]
-	return Err(());
-
-	Ok(apps)
+	Err(())
 }
 
 #[tauri::command(async)]

apps/storybook/.storybook/main.ts

@@ -16,7 +16,15 @@ const config: StorybookConfig = {
 	addons: [
 		'@storybook/addon-links',
 		'@storybook/addon-essentials',
-		'@storybook/addon-interactions'
+		'@storybook/addon-interactions',
+		{
+			name: '@storybook/addon-styling',
+			options: {
+				// Check out https://github.com/storybookjs/addon-styling/blob/main/docs/api.md
+				// For more details on this addon's options.
+				postCss: true
+			}
+		}
 	],
 	framework: {
 		name: '@storybook/react-vite',

apps/storybook/.storybook/preview.ts

@@ -1,4 +1,5 @@
 import type { Preview } from '@storybook/react';
+import '@sd/ui/style';
 
 const preview: Preview = {
 	parameters: {

apps/storybook/package.json

@@ -1,30 +1,33 @@
 {
 	"name": "@sd/storybook",
 	"private": true,
-	"version": "0.0.0",
-	"type": "module",
 	"scripts": {
 		"dev": "storybook dev -p 6006",
 		"build-storybook": "storybook build"
 	},
 	"dependencies": {
-		"react": "^18.2.0",
-		"react-dom": "^18.2.0"
-	},
-	"devDependencies": {
 		"@storybook/addon-essentials": "^7.0.5",
 		"@storybook/addon-interactions": "^7.0.5",
 		"@storybook/addon-links": "^7.0.5",
+		"@storybook/addon-styling": "^1.0.6",
 		"@storybook/blocks": "^7.0.5",
 		"@storybook/react": "^7.0.5",
 		"@storybook/react-vite": "^7.0.5",
 		"@storybook/testing-library": "^0.1.0",
+		"react": "^18.2.0",
+		"react-dom": "^18.2.0"
+	},
+	"devDependencies": {
 		"@sd/config": "workspace:*",
+		"@sd/ui": "workspace:*",
 		"@types/react": "^18.0.28",
 		"@types/react-dom": "^18.0.11",
 		"@vitejs/plugin-react": "^3.1.0",
+		"autoprefixer": "^10.4.12",
+		"postcss": "^8.4.17",
 		"prop-types": "^15.8.1",
 		"storybook": "^7.0.5",
+		"tailwindcss": "^3.1.8",
 		"typescript": "^4.9.3",
 		"vite": "^4.2.0"
 	}

apps/storybook/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+	plugins: {
+		tailwindcss: {},
+		autoprefixer: {}
+	}
+};

apps/storybook/tailwind.config.js

@@ -0,0 +1 @@
+module.exports = require('@sd/ui/tailwind')('web');

interface/app/$libraryId/Layout/Sidebar/JobManager/Job.tsx

@@ -172,7 +172,7 @@ function Job({ job, clearJob, className, isGroup }: JobProps) {
 						</div>
 					</div>
 					{isRunning && (
-						<div className="mb-1 mt-1 w-[335px]">
+						<div className="my-1 w-[335px]">
 							<ProgressBar value={job.completed_task_count} total={job.task_count} />
 						</div>
 					)}

interface/app/$libraryId/settings/library/locations/AddLocationDialog.tsx

@@ -195,7 +195,7 @@ export const AddLocationDialog = ({
 			})}
 			ctaLabel="Add"
 		>
-			<ErrorMessage name={REMOTE_ERROR_FORM_FIELD} variant="large" className="mt-2 mb-4" />
+			<ErrorMessage name={REMOTE_ERROR_FORM_FIELD} variant="large" className="mb-4 mt-2" />
 
 			<Input
 				label="Path:"

package.json

@@ -17,6 +17,7 @@
 		"assets": "pnpm --filter @sd/assets -- ",
 		"docs": "pnpm --filter @sd/docs -- ",
 		"client": "pnpm --filter @sd/client -- ",
+		"storybook": "pnpm --filter @sd/storybook -- ",
 		"prisma": "cd core && cargo prisma",
 		"codegen": "cargo test -p sd-core api::tests::test_and_export_rspc_bindings -- --exact",
 		"typecheck": "pnpm -r typecheck",
@@ -33,6 +34,7 @@
 		"@babel/plugin-syntax-import-assertions": "^7.20.0",
 		"@cspell/dict-rust": "^2.0.1",
 		"@cspell/dict-typescript": "^2.0.2",
+		"@storybook/react-vite": "^7.0.5",
 		"@trivago/prettier-plugin-sort-imports": "^4.1.1",
 		"cspell": "^6.12.0",
 		"prettier": "^2.8.7",

packages/config/package.json

@@ -10,8 +10,8 @@
 		"lint": "eslint . --cache"
 	},
 	"devDependencies": {
-		"@typescript-eslint/eslint-plugin": "^5.58.0",
-		"@typescript-eslint/parser": "^5.58.0",
+		"@typescript-eslint/eslint-plugin": "^5.59.5",
+		"@typescript-eslint/parser": "^5.59.5",
 		"eslint": "^8.38.0",
 		"eslint-config-prettier": "^8.8.0",
 		"eslint-config-turbo": "^1.9.1",
@@ -20,6 +20,8 @@
 		"eslint-plugin-react": "^7.32.2",
 		"eslint-plugin-react-hooks": "^4.6.0",
 		"eslint-plugin-tailwindcss": "^3.11.0",
+		"eslint-utils": "^3.0.0",
+		"regexpp": "^3.2.0",
 		"vite-plugin-html": "^3.2.0",
 		"vite-plugin-svgr": "^2.2.1"
 	}

packages/config/vite/index.ts

@@ -1,5 +1,4 @@
 import react from '@vitejs/plugin-react';
-import { visualizer } from 'rollup-plugin-visualizer';
 import { defineConfig } from 'vite';
 import { createHtmlPlugin } from 'vite-plugin-html';
 import svg from 'vite-plugin-svgr';

packages/ui/src/Input.stories.tsx

@@ -0,0 +1,27 @@
+import { Meta } from '@storybook/react';
+import { useState } from 'react';
+import { Input } from './Input';
+
+export default {
+	title: 'Input',
+	component: Input,
+	argTypes: {},
+	parameters: {
+		backgrounds: {
+			default: 'dark'
+		}
+	},
+	args: {
+		children: 'Input'
+	}
+} as Meta<typeof Input>;
+
+export const Default = () => {
+	const [value, setValue] = useState('Spacedrive');
+
+	return (
+		<div className="flex w-48 flex-col bg-app p-8">
+			<Input value={value} onChange={(e) => setValue(e.target.value)} />
+		</div>
+	);
+};

packages/ui/src/Input.tsx

@@ -23,7 +23,8 @@ export const inputSizes = {
 export const inputStyles = cva(
 	[
 		'rounded-md border text-sm leading-7',
-		'shadow-sm outline-none transition-all focus-within:ring-2'
+		'shadow-sm outline-none transition-all focus-within:ring-2',
+		'text-ink'
 	],
 	{
 		variants: {

packages/ui/src/Select.stories.tsx

@@ -0,0 +1,35 @@
+import { Meta } from '@storybook/react';
+import { useState } from 'react';
+import { Select, SelectOption } from './Select';
+
+export default {
+	title: 'Select',
+	component: Select,
+	argTypes: {},
+	parameters: {
+		backgrounds: {
+			default: 'dark'
+		}
+	},
+	args: {
+		children: 'Select'
+	}
+} as Meta<typeof Select>;
+
+export const Default = () => {
+	const VALUES = ['Option 1', 'Option 2', 'Option 3'] as const;
+
+	const [value, setValue] = useState(VALUES[0]);
+
+	return (
+		<div className="flex w-48 flex-col bg-app p-8">
+			<Select value={value} onChange={setValue}>
+				{VALUES.map((value) => (
+					<SelectOption value={value} key={value}>
+						{value}
+					</SelectOption>
+				))}
+			</Select>
+		</div>
+	);
+};

packages/ui/src/Select.tsx

@@ -7,20 +7,15 @@ import { PropsWithChildren } from 'react';
 
 export const selectStyles = cva(
 	[
-		'flex items-center justify-between rounded-md border pl-3 pr-[10px] text-sm',
+		'flex items-center justify-between rounded-md border py-0.5 pl-3 pr-[10px] text-sm',
 		'shadow-sm outline-none transition-all focus:ring-2',
-		'radix-placeholder:text-ink-faint'
+		'text-ink radix-placeholder:text-ink-faint'
 	],
 	{
 		variants: {
 			variant: {
-				default: [
-					'bg-app-input focus:bg-app-focus',
-					'border-app-line focus:border-app-divider/80',
-					'focus:ring-app-selected/30'
-				]
+				default: ['bg-app-input', 'border-app-line']
 			},
-
 			size: {
 				sm: 'h-[30px]',
 				md: 'h-[34px]',
@@ -34,15 +29,18 @@ export const selectStyles = cva(
 	}
 );
 
-export interface SelectProps extends VariantProps<typeof selectStyles> {
-	value: string;
-	onChange: (value: string) => void;
+export interface SelectProps<TValue extends string = string>
+	extends VariantProps<typeof selectStyles> {
+	value: TValue;
+	onChange: (value: TValue) => void;
 	placeholder?: string;
 	className?: string;
 	disabled?: boolean;
 }
 
-export function Select(props: PropsWithChildren<SelectProps>) {
+export function Select<TValue extends string = string>(
+	props: PropsWithChildren<SelectProps<TValue>>
+) {
 	return (
 		<RS.Root
 			defaultValue={props.value}

packages/ui/style/tailwind.js

@@ -11,9 +11,9 @@ function alpha(variableName) {
 module.exports = function (app, options) {
 	let config = {
 		content: [
-			!options?.ignorePackages && '../../packages/*/src/**/*.{ts,tsx,html}',
-			'../../interface/**/*.{ts,tsx,html}',
-			app ? `../../apps/${app}/src/**/*.{ts,tsx,html}` : `./src/**/*.{ts,tsx,html}`
+			`../../apps/${app}/src/**/*.{ts,tsx,html,stories.tsx}`,
+			'../../packages/*/src/**/*.{ts,tsx,html,stories.tsx}',
+			'../../interface/**/*.{ts,tsx,html,stories.tsx}'
 		],
 		darkMode: app == 'landing' ? 'class' : 'media',
 		mode: 'jit',
@@ -159,10 +159,6 @@ module.exports = function (app, options) {
 		},
 		plugins: [
 			require('@tailwindcss/forms'),
-			// plugin(({ addVariant }) => {
-			// 	addVariant('open', '&[data-state="open"]');
-			// 	addVariant('closed', '&[data-state="closed"]');
-			// }),
 			require('tailwindcss-animate'),
 			require('@headlessui/tailwindcss'),
 			require('tailwindcss-radix')()