🎨 clean up devto styles n stories (#13)

* 🔥 turn off chromatic modes

* ⬆️ update dependencies and fixtures

.storybook/modes.js

@@ -64,4 +64,15 @@ export const allModes = {
     theme: 'light',
     viewport: 'small',
   },
-};
+};
+
+export const basicModes = {
+  dark: {
+    backgrounds: 'dark',
+    theme: 'dark',
+  },
+  light: {
+    backgrounds: 'light',
+    theme: 'light',
+  },
+}

.storybook/preview.js

@@ -2,23 +2,24 @@ import { setCustomElementsManifest } from '@storybook/web-components';
 import customElements from '../custom-elements.json';
 import { globalTypesPrimer, decoratorsPrimer } from './primer-preview';
 import { viewports } from './viewports';
-import { defaultModes } from './modes';
 import "./storybook.css";
 
 setCustomElementsManifest(customElements);
 
 export const globalTypes = globalTypesPrimer;
 export const decorators = decoratorsPrimer;
 
+global.attrGen = (args) => Object.entries(args)
+.filter(([key, value]) => value)
+.map(([key, value]) => `\n  ${key}="${value}"`)
+.join(' ');
+
+global.stringify = (obj) => JSON.stringify(obj).replace(/"/g, """)
+
 /** @type { import('@storybook/web-components').Preview } */
 const preview = {
   parameters: {
     actions: { argTypesRegex: "^on[A-Z].*" },
-    chromatic: {
-      modes: {
-        ...defaultModes,
-      },
-    },
     controls: {
       expanded: true,
       matchers: {
@@ -30,6 +31,13 @@ const preview = {
     viewport: {
       viewports,
     },
+    docs: {
+      source: {
+        transform: (code) => {
+          return code.replaceAll('&gt;', ">").replaceAll('&lt;', "<")
+        }
+      }
+    }
   },
 };
 

.storybook/viewports.js

@@ -24,6 +24,13 @@ export const customViewports = {
       height: '100%',
     },
   },
+  containerMin4: {
+    name: 'ContainerMin4: 600px',
+    styles: {
+      width: '600px',
+      height: '100%',
+    },
+  },
 };
 
 export const viewports ={