#39 cleanup stories for Button and StarRating component

packages/gui/src/routes/packages/[slug]/+page.svelte

@@ -9,7 +9,7 @@
 	/** @type {import('./$types').PageData} */
 	export let data;
 
-	import { packages as packagesStore, initializePackages } from '$libs/stores';
+	import { packages as packagesStore } from '$libs/stores';
 
 	import type { Package } from '@tea/ui/types';
 

packages/ui/src/Button/Button.stories.ts

@@ -1,4 +1,4 @@
-import Button from './Button.svelte';
+import Button from './ButtonView.svelte';
 
 // More on how to set up stories at: https://storybook.js.org/docs/7.0/svelte/writing-stories/introduction
 export default {
@@ -7,26 +7,12 @@ export default {
 	tags: ['docsPage'],
 	render: (args) => ({
 		Component: Button,
-		props: args,
+		props: args
-		on: {
-			click: args.onClick
-		}
 	}),
 	argTypes: {
-		backgroundColor: { control: 'color' },
+		onClick: () => console.log('does nothing')
-		label: { control: 'text' },
-		onClick: { action: 'onClick' },
-		primary: { control: 'boolean' },
-		size: {
-			control: { type: 'select' },
-			options: ['small', 'medium', 'large']
-		}
 	}
 };
 
 // More on writing stories with args: https://storybook.js.org/docs/7.0/svelte/writing-stories/args
-export const Primary = {
+export const Primary = {};
-	args: {
-		primary: true
-	}
-};

packages/ui/src/Button/Button.svelte

@@ -1,10 +1,10 @@
 <script type="ts">
-	let clazz: string = '';
+	let clazz: string;
 	export { clazz as class };
 
-	export let size: 'large' | 'medium' | 'small' = 'medium';
+	// export let size: 'large' | 'medium' | 'small' = 'medium';
 
-	export let onClick: () => void;
+	export let onClick: undefined | (() => void) = undefined;
 </script>
 
 <button

packages/ui/src/Button/ButtonView.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+	import Button from './Button.svelte';
+</script>
+
+<Button>Click Me</Button>

packages/ui/src/PackageCard/PackageCard.stories.ts

@@ -23,7 +23,7 @@ export default {
 	tags: ['docsPage'],
 	render: ({ pkg, link }: { pkg: Package; link: string }) => ({
 		Component: PackageCard,
-		props: { pkg }
+		props: { pkg, link }
 	}),
 	argTypes: {
 		pkg: {

packages/ui/src/StarRating/StarRating.svelte

@@ -1,8 +1,8 @@
 <script type="ts">
 	import '../app.css';
 
-	export let rating: number = 0;
+	export let rating = 0;
-	export let maxRating: number = 5;
+	export let maxRating = 5;
 
 	let stars: string[] = [];
 	for (let i = 1; i <= maxRating; i++) {