WIP

Author: eunjae-lee

story-starter/starters/nuxt/components/StoryList.vue

@@ -21,6 +21,12 @@ const {
 	goToPage,
 } = await useStories({ perPage: 10 });
 
+const config = useConfig({
+	selectedStories,
+});
+
+console.log('💡 config', config);
+
 // Show top progress bar on page change.
 watch(isLoading, () => {
 	if (!data.value) {

story-starter/starters/nuxt/composables/useConfig.ts

@@ -0,0 +1,20 @@
+import type { Story } from '~/types/story';
+import config from '../stories.config';
+import type { StoryConfig } from '~/types/config';
+
+type UseConfig = (props: { selectedStories: Ref<Story[]> }) => Ref<StoryConfig>;
+
+export const useConfig: UseConfig = ({ selectedStories }) => {
+	const resolvedConfig = ref<StoryConfig>(
+		typeof config === 'function' ? config(selectedStories.value) : config
+	);
+
+	if (typeof config === 'function') {
+		watch(selectedStories, () => {
+			resolvedConfig.value =
+				typeof config === 'function' ? config(selectedStories.value) : config;
+		});
+	}
+
+	return resolvedConfig;
+};

story-starter/starters/nuxt/shared/defineStoryConfig.ts

@@ -1,9 +1,7 @@
-//draft for future actions implementations
-type StoryConfig = {
-	actions: {
-		label: string;
-		handler: (selectedStories: any) => void;
-	}[];
-};
+import type { StoryConfig } from '~/types/config';
+import type { Story } from '~/types/story';
 
-export const defineStoryConfig = (config: StoryConfig): StoryConfig => config;
+type StoryConfigGetter = (selectedStories: Story[]) => StoryConfig;
+
+export const defineStoryConfig = (config: StoryConfig | StoryConfigGetter) =>
+	config;

story-starter/starters/nuxt/stories.config.ts

@@ -1,5 +1,14 @@
 import { defineStoryConfig } from '~/shared/defineStoryConfig';
 
+// export default defineStoryConfig((selecte) => ({
+// 	actions: [
+// 		{
+// 			label: 'Translate',
+// 			handler: (selectedStories) => {},
+// 		},
+// 	],
+// }));
+
 export default defineStoryConfig({
 	actions: [
 		{

story-starter/starters/nuxt/types/config.ts

@@ -0,0 +1,7 @@
+//draft for future actions implementations
+export type StoryConfig = {
+	actions: {
+		label: string;
+		handler: (selectedStories: any) => void;
+	}[];
+};