diff --git a/.storybook/main.js b/.storybook/main.js index d3f3ebf..20197ce 100644 --- a/.storybook/main.js +++ b/.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; diff --git a/.storybook/preview.js b/.storybook/preview.js index 5d00c02..d554ce7 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -1,4 +1,3 @@ - export const parameters = { actions: { argTypesRegex: "^on[A-Z].*" }, -} \ No newline at end of file +} diff --git a/package-lock.json b/package-lock.json index c6c865f..a662bb6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { - "name": "svelte-app", - "version": "1.0.0", + "name": "negroni-web", + "version": "0.0.1", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index 13e456c..68c7eca 100644 --- a/package.json +++ b/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", diff --git a/rollup.config.js b/rollup.config.js index 0decf66..d9d397d 100644 --- a/rollup.config.js +++ b/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' }, ] }) diff --git a/src/App.svelte b/src/App.svelte index 80f266c..bc43474 100644 --- a/src/App.svelte +++ b/src/App.svelte @@ -1,7 +1,5 @@ - - + diff --git a/src/components/Cell.svelte b/src/components/Cell.svelte index 561b350..231620a 100644 --- a/src/components/Cell.svelte +++ b/src/components/Cell.svelte @@ -1,21 +1,94 @@ -
-

- { message } -

+
+
+ {#each paragraphs as paragraph} +

+ {#if paragraph === ''} +
+ {:else} + { paragraph } + {/if} +

+ {/each} +
diff --git a/src/components/Input.svelte b/src/components/Input.svelte deleted file mode 100644 index 1fe3dfb..0000000 --- a/src/components/Input.svelte +++ /dev/null @@ -1,7 +0,0 @@ - - - diff --git a/src/components/MessageField.svelte b/src/components/MessageField.svelte new file mode 100644 index 0000000..c995a1f --- /dev/null +++ b/src/components/MessageField.svelte @@ -0,0 +1 @@ + diff --git a/src/components/Stream.svelte b/src/components/Stream.svelte new file mode 100644 index 0000000..b013016 --- /dev/null +++ b/src/components/Stream.svelte @@ -0,0 +1,24 @@ + + +
+ {#each messages as message, index} + + {/each} +
+ + diff --git a/src/constants/Contexts.ts b/src/constants/Contexts.ts new file mode 100644 index 0000000..01c5a68 --- /dev/null +++ b/src/constants/Contexts.ts @@ -0,0 +1 @@ +export const CTheme = 'Theme' diff --git a/src/models/Message.ts b/src/models/Message.ts new file mode 100644 index 0000000..d88f28d --- /dev/null +++ b/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 diff --git a/src/stories/Cell.stories.ts b/src/stories/Cell.stories.ts index 00d0eea..68327be 100644 --- a/src/stories/Cell.stories.ts +++ b/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' }), } diff --git a/src/stories/MessageField.stories.ts b/src/stories/MessageField.stories.ts new file mode 100644 index 0000000..8d1c3e4 --- /dev/null +++ b/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({}) diff --git a/src/stories/Stream.stories.ts b/src/stories/Stream.stories.ts new file mode 100644 index 0000000..8bef92d --- /dev/null +++ b/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' }), + ] +} diff --git a/tsconfig.json b/tsconfig.json index b082e96..717d345 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,6 +1,8 @@ { "extends": "@tsconfig/svelte/tsconfig.json", - + "compilerOptions": { + "importsNotUsedAsValues": "preserve" + }, "include": ["src/**/*"], "exclude": ["node_modules/*", "__sapper__/*", "public/*"] -} \ No newline at end of file +}