print screens

_templates/story/new/index.js

@@ -4,8 +4,10 @@ module.exports = {
   params: ({ args }) => {
 
     const storypath = args.path.replace( '.svelte', '.stories.svelte' );
-    const component = path.basename(args.path).replace('.svelte','');
 
-    return { storypath, component}
+    const component = path.basename(args.path.replace('/index.svelte','')).replace('.svelte','');
+
+    const to = path.join(path.dirname(args.path), component + '.stories.svelte' );
+    return { storypath, component, to}
   }
 }

_templates/story/new/stories.svelte.temp

@@ -1,5 +1,5 @@
 ---
-to: <%= storypath %>
+to: <%= to %>
 ---
 <Meta title="<%= component %>" component={<%= component %>} argTypes={{}} />
 

src/lib/components/Output/Print/Systems/Screens/Screens.stories.svelte

@@ -0,0 +1,18 @@
+<Meta title="Output/Print/Systems/Screens" component={Screens} argTypes={{
+    standard: { defaultValue: 3 },
+    advanced: { defaultValue: 3 },
+}} />
+
+<Story name="Primary" args={{}} />
+
+<Template let:args>
+  <div style="width: 50em">
+    <Screens {...args}/>
+  </div>
+</Template>
+
+<script>
+  import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
+
+  import Screens from './index.svelte';
+</script>

src/lib/components/Output/Print/Systems/Screens/index.svelte

@@ -1,14 +1,14 @@
 <div>
-  {#each _.range(standard) as i}
+  {#each range(1,standard) as i}
     <img src="icons/screen.svg" alt="screen" />
   {/each}
-  {#each _.range(advanced) as i}
+  {#each range(1,advanced) as i}
     <img src="icons/screen-advanced.svg" alt="advanced screen" />
   {/each}
 </div>
 
 <script>
-  import _ from "lodash";
+  import {range} from "$lib/utils.js";
 
   export let standard = 0;
   export let advanced = 0;