0.0.1

.storybook/main.js

@@ -1,4 +1,5 @@
-const path = require('path')
+const sveltePreprocess = require('svelte-preprocess')
+const path = require('path');
 
 module.exports = {
   "stories": [
@@ -10,9 +11,20 @@ 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,4 +1,3 @@
-
 export const parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },
-}
+}

package.json

@@ -1,6 +1,6 @@
 {
-  "name": "svelte-app",
-  "version": "1.0.0",
+  "name": "negroni-web",
+  "version": "0.0.1",
   "scripts": {
     "build": "rollup -c",
     "dev": "rollup -c -w",

rollup.config.js

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

src/components/Cell.svelte

@@ -1,21 +1,94 @@
 <script lang="ts">
-  export let message = ''
+  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')
 </script>
 
-<div class="cell">
-  <p>
-    { message }
-  </p>
+<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>
 
 <style type="text/scss">
-  .cell {
-    max-width: 100px;
-    min-height: 50px;
-    font-size: 16px;
-    background-color: grey;
-    border-radius: 25px;
-    padding: 10px;
-    box-sizing: border-box;
+  $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;
+        }
+      }
+    }
   }
 </style>

src/components/MessageField.svelte

@@ -0,0 +1 @@
+<input/>

src/components/Stream.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+  import Cell from 'Components/Cell'
+  import Message from 'Models/Message'
+  
+  export let messages: Message[] = []
+</script>
+
+<div class="wrapper">
+  {#each messages as message, index}
+    <Cell
+      message={message}
+      prevMessage={messages[index-1]}
+      nextMessage={messages[index+1]}
+    />
+  {/each}
+</div>
+
+<style type="text/scss">
+  .wrapper {
+    width: 100%;
+    padding: 10px;
+    box-sizing: border-box;
+  }
+</style>

src/constants/Contexts.ts

@@ -0,0 +1 @@
+export const CTheme = 'Theme'

src/models/Message.ts

@@ -0,0 +1,25 @@
+interface MessageArgs {
+  content?: string
+  author?: string
+}
+
+class Message {
+  content: string = ''
+
+  author: string = ''
+
+  constructor({
+    content = '',
+    author = '',
+  }: MessageArgs = {}) {
+    this.content = content?.trim()
+    this.author = author
+  }
+
+  isMine() {
+    // TODO: Move this logic to selector
+    return this.author === 'me'
+  }
+}
+
+export default Message

src/stories/Cell.stories.ts

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

src/stories/MessageField.stories.ts

@@ -0,0 +1,16 @@
+import MessageField from 'Components/MessageField.svelte'
+
+export default {
+  title: 'MessageField',
+  component: MessageField,
+  parameters: {
+    layout: 'fullscreen',
+  },
+}
+
+const Template = (props) => ({
+  Component: MessageField,
+  props,
+})
+
+export const Primary = Template.bind({})

src/stories/Stream.stories.ts

@@ -0,0 +1,42 @@
+import Stream from 'Components/Stream.svelte'
+import Model from 'Models/Message'
+import Message from '../models/Message'
+
+export default {
+  title: 'Stream',
+  component: Stream,
+  parameters: {
+    layout: 'fullscreen',
+  },
+}
+
+const Template = (props) => ({
+  Component: Stream,
+  props,
+})
+
+export const Primary = Template.bind({})
+Primary.args = {
+  messages: [
+    new Message({ content: 'hello', author: 'he' }),
+    new Message({ content: 'hello', author: 'me' }),
+    new Message({ content: 'hello', author: 'he' }),
+    new Message({ content: 'hello', author: 'he' }),
+    new Message({ content: 'hello', author: 'he' }),
+    new Message({ content: 'hello', author: 'he' }),
+    new Message({ content: 'hello', author: 'he' }),
+    new Message({ content: 'hello', author: 'he' }),
+    new Message({ content: 'hello', author: 'he' }),
+    new Message({ content: 'hello', author: 'he' }),
+    new Message({ content: 'hello', author: 'me' }),
+    new Message({ content: 'hello', author: 'he' }),
+    new Message({ content: 'hello', author: 'he' }),
+    new Message({ content: 'hello', author: 'he' }),
+    new Message({ content: 'hello', author: 'me' }),
+    new Message({ content: 'hello', author: 'he' }),
+    new Message({ content: 'hello', author: 'me' }),
+    new Message({ content: 'hello', author: 'me' }),
+    new Message({ content: 'hello', author: 'me' }),
+    new Message({ content: 'hello', author: 'he' }),
+  ]
+}

tsconfig.json

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