fix(docs): correct links to file and dev mode (#40)

Author: matteo-cristino

.storybook/preview-head.html

@@ -1,4 +1,4 @@
 <link rel="stylesheet" href="../dist/dyne-components/dyne-components.css" />
 <script type="module" src="../dist/dyne-components/dyne-components.esm.js"></script>
-<link rel="stylesheet" href="./dyne-components.css" />
-<script type="module" src="./dyne-components.esm.js"></script>
+<link rel="stylesheet" href="./dyne-components/dyne-components.css" />
+<script type="module" src="./dyne-components/dyne-components.esm.js"></script>

.storybook/preview.ts

@@ -1,8 +1,15 @@
 import { withThemeByClassName } from '@storybook/addon-themes';
 import { Preview } from '@storybook/html';
-import { defineCustomElements } from '../loader';
+// import { defineCustomElements } from '../loader';
 import dyneTheme from './dyne-theme';
 
+let defineCustomElements: () => void = () => {};
+
+if (process.env.NODE_ENV !== 'development') {
+  // Only import the loader in production builds
+  defineCustomElements = require('../loader').defineCustomElements;
+}
+
 defineCustomElements();
 
 const preview: Preview = {

package.json

@@ -37,7 +37,7 @@
     "sbb": "stencil build && storybook build --docs",
     "dev": "NODE_ENV=development npm-run-all -p dev:*",
     "dev:start": "stencil build --watch --dev --serve",
-    "dev:storybook": "sleep 6 && storybook dev -p 6006",
+    "dev:storybook": "sleep 20 && storybook dev -p 6006",
     "generate-slangroom-presets-file": "node src/components/dyne-slangroom-preset-loader/utils/generate-preset-json.mjs"
   },
   "devDependencies": {