feat: add docs to stories

.storybook/preview.tsx

@@ -30,6 +30,8 @@ const preview: Preview = {
 			defaultValue: true, // Enable dark mode by default on all stories
 		},
 	},
+	//👇 Enables auto-generated documentation for all stories
+	tags: ["autodocs"],
 };
 
 export default preview;

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@continha/ui",
-	"version": "1.0.8",
+	"version": "1.1.0",
 	"private": false,
 	"repository": {
 		"url": "https://github.com/bearkfear/ui"

src/components/ui/form/selector/hooks.ts

@@ -0,0 +1,25 @@
+import get from "lodash.get";
+import { useCallback } from "react";
+
+export function useSelectorHelpers<O, VP extends keyof O, LP extends keyof O>(
+	labelPath: LP,
+	valuePath: VP,
+) {
+	const getValue = useCallback(
+		(option: O) => {
+			return get(option, valuePath);
+		},
+		[valuePath],
+	);
+	const getLabel = useCallback(
+		(option: O) => {
+			return get(option, labelPath);
+		},
+		[labelPath],
+	);
+
+	return {
+		getLabel,
+		getValue,
+	};
+}

src/components/ui/form/selector/index.tsx

@@ -8,6 +8,7 @@ import { Button } from "../../button";
 import * as Popover from "../../popover";
 import { SelectorContent } from "./content";
 import type { SelectorCommonProps, TOption } from "./model";
+import { useSelectorHelpers } from "./hooks";
 
 export interface SelectorProps<
 	O extends TOption,
@@ -27,19 +28,13 @@ export function Selector<O extends TOption, VP extends FieldPath<O>>(
 	ref: React.ForwardedRef<HTMLButtonElement>,
 ) {
 	const [width, setWidth] = useState(1);
-	const getValue = useCallback(
-		(option: O) => {
-			return get(option, props.valuePath);
-		},
-		[props.valuePath],
-	);
-	const getLabel = useCallback(
-		(option: O) => {
-			return get(option, props.labelPath);
-		},
-		[props.labelPath],
+	const { getLabel, getValue } = useSelectorHelpers<O>(
+		props.labelPath,
+		props.valuePath,
 	);
 
+	const item = (option: O) => get(option, props.labelPath);
+
 	const selectedOption = useMemo(() => {
 		return props.options.find((option) => isEqual(getValue(option), value));
 	}, [props.options, value, getValue]);