Revert "Enable SCSS on storybook (#1)" (#2)

This reverts commit 5cfaa85.

.storybook/main.js

@@ -1,5 +1,4 @@
-const sveltePreprocess = require('svelte-preprocess')
-const path = require('path');
+const path = require('path')
 
 module.exports = {
   "stories": [
@@ -11,20 +10,9 @@ module.exports = {
     "@storybook/addon-essentials"
   ],
   webpackFinal: async config => {
-    const svelteLoader = config.module.rules.find(
-      (r) => r.loader && r.loader.includes("svelte-loader")
-    );
-    svelteLoader.options = {
-      ...svelteLoader.options,
-      preprocess: sveltePreprocess({ scss: true }),
-    };
-
     config.resolve.alias = {
       ...config.resolve.alias,
       "Components": path.resolve(__dirname, "../src/components"),
-      "Constants": path.resolve(__dirname, "../src/constants"),
-      "Models": path.resolve(__dirname, "../src/models"),
-      "Styles": path.resolve(__dirname, "../src/models"),
     }
 
     return config;

.storybook/preview.js

@@ -1,3 +1,4 @@
+
 export const parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },
-}
+}

rollup.config.js

@@ -13,9 +13,6 @@ const production = !process.env.ROLLUP_WATCH;
 const aliases = alias({
 	entries: [
 		{ find: 'Components', replacement: 'src/components' },
-		{ find: 'Constants', replacement: 'src/constants' },
-		{ find: 'Styles', replacement: 'src/styles' },
-		{ find: 'Models', replacement: 'src/models' },
 	]
 })
 

src/App.svelte

@@ -1,5 +1,7 @@
 <script lang='ts'>
-  import MessageField from 'Components/MessageField.svelte'
+  import Cell from 'Components/Cell.svelte'
+  import Input from 'Components/Input.svelte'
 </script>
 
-<MessageField />
+<Cell message="hello"/>
+<Input initialString="hi"/>

src/components/Cell.svelte

@@ -1,94 +1,21 @@
 <script lang="ts">
-  import Message from 'Models/Message'
-  
-  export let message: Message = new Message()
-  export let prevMessage: Message = new Message()
-  export let nextMessage: Message = new Message()
-  
-  $: byMe = message.isMine()
-  $: isContinuous = prevMessage.author === message.author
-  $: willContinuous = nextMessage.author === message.author
-  $: paragraphs = message.content.split('\n')
+  export let message = ''
 </script>
 
-<div
-  class="wrapper"
-  class:byMe
->
-  <div
-    class="cell"
-    class:byMe
-    class:isContinuous
-    class:willContinuous
-  >
-    {#each paragraphs as paragraph}
-      <p>
-        {#if paragraph === ''}
-          <br />
-        {:else}
-          { paragraph }
-        {/if}
-      </p>
-    {/each}
-  </div>
+<div class="cell">
+  <p>
+    { message }
+  </p>
 </div>
 
 <style type="text/scss">
-  $small-radius: 6px;
-  
-  .wrapper {
-    display: flex;
-    align-items: center;
-    width: 100%;
-    
-    &.byMe {
-      justify-content: flex-end;
-    }
-    
-    &:not(:last-child) {
-      margin-bottom: 3px;
-    }
-    
-    .cell {
-      width: fit-content;
-      max-width: 200px;
-      min-height: 25px;
-      font-size: 16px;
-      background-color: #f2f2f2; // TODO: Support Theming
-      color: black; // TODO: Support Theming
-      border-radius: 25px;
-      padding: 8px;
-      box-sizing: border-box;
-      word-wrap: break-word;
-      
-      &.byMe {
-        background-color: #3cba4f; // TODO: Support Theming
-        color: white; // TODO: Support Theming
-        
-        &.isContinuous {
-          border-top-right-radius: $small-radius;
-        }
-        
-        &.willContinuous,
-        &:not(.isContinuous):not(.willContinuous) {
-          border-bottom-right-radius: $small-radius;
-        }
-      }
-      
-      p {
-        margin: 0;
-      }
-      
-      &:not(.byMe) {
-        &.isContinuous {
-          border-top-left-radius: $small-radius;
-        }
-        
-        &.willContinuous,
-        &:not(.isContinuous):not(.willContinuous) {
-          border-bottom-left-radius: $small-radius;
-        }
-      }
-    }
+  .cell {
+    max-width: 100px;
+    min-height: 50px;
+    font-size: 16px;
+    background-color: grey;
+    border-radius: 25px;
+    padding: 10px;
+    box-sizing: border-box;
   }
 </style>

src/components/Input.svelte

@@ -0,0 +1,7 @@
+<script>
+  export let initialString = ''
+  
+  let inputValue = initialString
+</script>
+
+<input bind:value={inputValue} />

src/stories/Cell.stories.ts

@@ -1,13 +1,9 @@
 /* Internal */
 import Cell from 'Components/Cell.svelte'
-import Message from 'Models/Message'
 
 export default {
   title: 'Cell',
   component: Cell,
-  parameters: {
-    layout: 'centered',
-  },
 }
 
 const Template = (props) => ({
@@ -17,5 +13,5 @@ const Template = (props) => ({
 
 export const Primary = Template.bind({})
 Primary.args = {
-  message: new Message({ content: 'hello', author: 'me' }),
+  message: 'hello',
 }

tsconfig.json

@@ -1,8 +1,6 @@
 {
   "extends": "@tsconfig/svelte/tsconfig.json",
-  "compilerOptions": {
-    "importsNotUsedAsValues": "preserve"
-  },
+
   "include": ["src/**/*"],
   "exclude": ["node_modules/*", "__sapper__/*", "public/*"]
-}
+}