rewrite components structure, add eslint, absolute paths, logo, favic…

…on, pages

.eslintrc.js

@@ -0,0 +1,23 @@
+module.exports = {
+  parserOptions: {
+    ecmaVersion: 2019,
+    sourceType: 'module'
+  },
+  env: {
+    es6: true,
+    browser: true
+  },
+  plugins: [
+    'svelte3'
+  ],
+  overrides: [
+    {
+      files: '*.svelte',
+      processor: 'svelte3/svelte3'
+    }
+  ],
+  rules: {
+  },
+  settings: {
+  }
+};

.gitignore

@@ -5,3 +5,4 @@ yarn-error.log
 /__sapper__/
 mmmm.code-workspace
 static/global.css
+logo.psd

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "melte",
+  "name": "smelte",
   "description": "Material design using Tailwind CSS for Svelte",
   "version": "0.0.1",
   "scripts": {
@@ -30,6 +30,7 @@
     "@now/node": "^0.9.0",
     "autoprefixer": "^9.5.1",
     "cssnano": "^4.1.10",
+    "eslint-plugin-svelte3": "^2.1.0",
     "npm-run-all": "^4.1.5",
     "postcss": "^7.0.16",
     "postcss-custom-properties": "^9.0.1",
@@ -39,6 +40,7 @@
     "rollup": "^1.0.0",
     "rollup-plugin-babel": "^4.0.2",
     "rollup-plugin-commonjs": "^9.1.6",
+    "rollup-plugin-includepaths": "^0.2.3",
     "rollup-plugin-node-resolve": "^4.0.0",
     "rollup-plugin-postcss": "^2.0.3",
     "rollup-plugin-replace": "^2.0.0",

rollup.config.js

@@ -8,6 +8,7 @@ import config from 'sapper/config/rollup.js';
 import pkg from './package.json';
 import getPreprocessor from 'svelte-preprocess';
 import postcss from 'rollup-plugin-postcss';
+import includePaths from 'rollup-plugin-includepaths';
 import path from 'path';
 const mode = process.env.NODE_ENV;
 const dev = mode === 'development';
@@ -46,7 +47,10 @@ const postcssPlugins = (purge = false) => {
 				},
 			],
 			// Whitelist selectors to stop Purgecss from removing them from your CSS.
-			whitelist: ['html', 'body'],
+			whitelist: [
+				'html', 'body', 'ripple-gray', 'ripple-primary', 'bg-gray-600', 'cursor-pointer',
+				'navigation:hover', 'navigation.selected',
+			],
 		}),
 	].filter(Boolean)
 }
@@ -76,6 +80,7 @@ export default {
 			}),
 			resolve(),
 			commonjs(),
+			includePaths({ paths: ["./src"] }),
 
 			legacy && babel({
 				extensions: ['.js', '.mjs', '.html', '.svelte'],
@@ -114,6 +119,7 @@ export default {
 				preprocess
 			}),
 			resolve(),
+			includePaths({ paths: ["./src"] }),
 			commonjs(),
 			postcss({
 				plugins: postcssPlugins(!dev),

src/components/Button.svelte → src/components/Button/Button.svelte

@@ -1,5 +1,5 @@
 <script>
-  import Icon from './Icon.svelte';
+  import Icon from 'components/Icon.svelte';
 
   export let outlined = false;
   export let text = false;

src/components/Button/index.js

@@ -0,0 +1,3 @@
+import Button from 'components/Button/Button.svelte';
+
+export default Button;

src/components/Checkbox.svelte

@@ -1,6 +1,6 @@
 <script>
-  import Icon from './Icon.svelte';
-  import Ripple from './Ripple.svelte';
+  import Icon from 'components/Icon.svelte';
+  import Ripple from 'components/Ripple.svelte';
 
   export let value = false;
   export let label = '';
@@ -15,8 +15,9 @@
 
 </script>
 
-<div class="flex items-center mb-2 cursor-pointer" on:click={check}>
+<div class="flex items-center mb-2 cursor-pointer z-10" on:click={check}>
   <input
+    bind:value
     class="hidden"
     type="checkbox"
   />

src/components/Dialog.svelte → src/components/Dialog/Dialog.svelte

@@ -2,7 +2,7 @@
   import { scale } from 'svelte/transition';
   import { onMount } from 'svelte';
   import { quadOut, quadIn } from 'svelte/easing';
-  import Scrim from './Scrim.svelte';
+  import Scrim from 'components/Scrim.svelte';
 
   export let value;
 </script>

src/components/Dialog/index.js

@@ -0,0 +1,3 @@
+import Dialog from 'components/Dialog/Dialog.svelte';
+
+export default Dialog;

src/components/List/List.svelte

@@ -1,5 +1,5 @@
 <script>
-  import ListItem from './ListItem.svelte';
+  import ListItem from 'components/List/ListItem.svelte';
 
   export let items = [];
   export let value = '';

src/components/List/ListItem.svelte

@@ -1,5 +1,5 @@
 <script>
-  import Icon from '../Icon.svelte';
+  import Icon from 'components/Icon.svelte';
 
   export let icon = '';
   export let name = '';
@@ -15,7 +15,7 @@
 
 <style>
   .list-item {
-    @apply text-gray-700 cursor-pointer flex items-center;
+    @apply text-gray-700 flex items-center z-10;
     transition: background-color .2s ease-out;
   }
 
@@ -44,7 +44,7 @@
 </style>
 
 <li
-  class="list-item p-4"
+  class="list-item p-4 cursor-pointer"
   class:navigation
   class:selected
   class:basic={!navigation}

src/components/List/index.js

@@ -0,0 +1,3 @@
+import List from 'components/List/List.svelte';
+
+export default List;

src/components/NavigationDrawer.svelte

@@ -2,15 +2,15 @@
   import { fly } from 'svelte/transition';
   import { onMount } from 'svelte';
   import { cubicIn } from 'svelte/easing';
-  import Scrim from './Scrim.svelte';
+  import Scrim from 'components/Scrim.svelte';
 
   export let right = false;
   export let persistent = false;
   export let elevation = true;
 
   $: left = !right;
 
-  export let value;
+  export let value = true;
 </script>
 
 <style>
@@ -24,23 +24,24 @@
 
 {#if value || persistent}
   <div
-    class="fixed w-full h-screen top-0 left-0 mt-16"
+    class="fixed h-screen top-0 left-0 mt-16 z-10 drawer"
     class:pointer-events-none={persistent}
   >
     {#if !persistent}
       <Scrim on:click={() => value = false} />
     {/if}
     <nav
       role="navigation"
-      class="h-screen absolute flex w-auto z-40 drawer pointer-events-auto overflow-y-auto"
+      class="h-screen bg-white absolute flex w-auto z-10 drawer pointer-events-auto overflow-y-auto"
       class:right-0={right}
       class:left-0={left}
       class:elevation-4={elevation}
+      class:bordered={!elevation}
     >
       <div
         transition:fly={{duration: 200, x: right ? 200 : -200, opacity: 1, easing: cubicIn }}
-        class="bg-white w-full"
-        class:bordered={!elevation}>
+        class="w-full"
+      >
         <slot></slot>
       </div>
     </nav>

src/components/RadioButton.svelte

@@ -1,6 +1,6 @@
 <script>
-  import Icon from './Icon.svelte';
-  import Ripple from './Ripple.svelte';
+  import Icon from 'components/Icon.svelte';
+  import Ripple from 'components/Ripple.svelte';
 
   export let selected = '';
   export let label = '';
@@ -37,7 +37,7 @@
   </Ripple>
   <label
     aria-hidden="true"
-    class="pl-2 cursor-pointer"
+    class="pl-2"
     class:text-gray-500={disabled}
     class:text-gray-700={!disabled}
   >{label}</label>

src/components/RadioButtonGroup.svelte

@@ -1,5 +1,5 @@
 <script>
-  import RadioButton from './RadioButton.svelte';
+  import RadioButton from 'components/RadioButton.svelte';
 
   export let items = [];
   export let selected = '';

src/components/Select.svelte → src/components/Select/Select.svelte

@@ -1,8 +1,8 @@
 <script>
   import { fly } from 'svelte/transition';
   import { quadOut, quadIn } from 'svelte/easing';
-  import List from './List/List.svelte';
-  import TextField from './TextField.svelte';
+  import List from 'components/List/List.svelte';
+  import TextField from 'components/TextField.svelte';
 
   export let items = [];
   export let value = '';

src/components/Select/index.js

@@ -0,0 +1,3 @@
+import Select from 'components/Select/Select.svelte';
+
+export default Select;

src/components/Snackbar.svelte → src/components/Snackbar/Snackbar.svelte

@@ -2,8 +2,8 @@
   import { fade } from 'svelte/transition';
   import { onMount } from 'svelte';
   import { quadOut, quadIn } from 'svelte/easing';
-  import List from './List/List.svelte';
-  import Spacer from './Spacer.svelte';
+  import List from 'components/List/List.svelte';
+  import Spacer from 'components/Spacer.svelte';
 
   export let value = false;
   export let timeout = 4000;

src/components/Snackbar/index.js

@@ -0,0 +1,3 @@
+import Snackbar from 'components/Snackbar/Snackbar.svelte';
+
+export default Snackbar;

src/components/Tabs/Tab.svelte

@@ -1,5 +1,5 @@
 <script>
-  import Icon from '../Icon.svelte';
+  import Icon from 'components/Icon.svelte';
 
   export let icon = '';
   export let name = '';
@@ -13,7 +13,7 @@
 
 <style>
   .tab-item {
-    @apply text-white cursor-pointer flex items-center opacity-75 text-sm;
+    @apply text-white flex items-center opacity-75 text-sm;
     transition: background-color .2s ease-out;
   }
 
@@ -30,7 +30,7 @@
 </style>
 
 <li
-  class="tab-item p-4 ripple-white"
+  class="tab-item p-4 ripple-white cursor-pointer"
   class:selected
   on:click={() => {
     value = name;

src/components/Tabs/Tabs.svelte

@@ -1,3 +1,3 @@
-<div class="flex py-0 h-full">
+<div class="flex py-0 h-full sm:visible hidden">
 	<slot></slot>
 </div>

src/components/Tabs/index.js

@@ -1,5 +1,5 @@
-import Tab from './Tab.svelte';
-import Tabs from './Tabs.svelte';
+import Tab from 'components/Tabs/Tab.svelte';
+import Tabs from 'components/Tabs/Tabs.svelte';
 
 export default {
   Wrapper: Tabs,

src/components/TextField.svelte

@@ -2,7 +2,7 @@
   import { fly } from 'svelte/transition';
   import { quadOut } from 'svelte/easing';
 
-  import Icon from './Icon.svelte';
+  import Icon from 'components/Icon.svelte';
 	export let c = '';
 	export let outlined = false;
   export let value = null;

src/routes/_layout.svelte

@@ -1,7 +1,25 @@
 <script>
-	import AppBar from '../components/AppBar.svelte';
-	import Tabs from '../components/Tabs';
-	import Spacer from '../components/Spacer.svelte';
+	import AppBar from 'components/AppBar.svelte';
+	import Tabs from 'components/Tabs';
+	import Spacer from 'components/Spacer.svelte';
+	import List from 'components/List/List.svelte';
+	import NavigationDrawer from 'components/NavigationDrawer.svelte';
+
+	const menu = [
+		{ to: "/components/text-fields", text: 'Text fields' },
+		{ to: "/components/buttons", text: 'Buttons' },
+		{ to: "/components/selection-controls#checkboxes", text: 'Checkboxes' },
+		{ to: "/components/selection-controls#radio-buttons", text: 'Radio buttons' },
+		{ to: "/components/lists", text: 'Lists' },
+		{ to: "/components/selects", text: 'Selects' },
+		{ to: "/components/snackbars", text: 'Snackbars' },
+		{ to: "/components/dialogs", text: 'Dialogs' },
+		{ to: "/components/navigation-drawers", text: 'Navigation drawers' },
+	];
+	
+	const menuOther = [
+		{ to: "/typography", text: 'Typography' },
+	];
 </script>
 
 <style>
@@ -15,18 +33,38 @@
 	}
 </style>
 
+<svelte:head>
+	<title>Smelte: Material design using Tailwind CSS for Svelte</title>
+</svelte:head>
+
 <AppBar>
-	<h6 class="text-white tracking-widest px-8 font-thin text-xl">MELTÉ</h6>
+	<a href="." class="px-8 flex items-center">
+		<img src="/logo.png" alt="Smelte logo" width="44">
+		<h6 class="pl-3 text-white tracking-widest font-thin text-lg">
+			SMELTE
+		</h6>
+	</a>
 	<Spacer />
 	<Tabs.Wrapper>
-		<Tabs.Tab to="/">Components</Tabs.Tab>
+		<Tabs.Tab to="/components">Components</Tabs.Tab>
 		<Tabs.Tab to="/typography">Typography</Tabs.Tab>
 	</Tabs.Wrapper>
-	<a href="https://github.com/matyunya/melte" class="px-4">
-		<img src="/github.png" alt="Github Melte" width="24" height="24">
+	<a href="https://github.com/matyunya/smelte" class="px-4">
+		<img src="/github.png" alt="Github Smelte" width="24" height="24">
 	</a>
 </AppBar>
 
 <main class="bg-white container rounded-lg p-5 elevation-10">
+	<NavigationDrawer
+		persistent
+		elevation={false}
+	>
+		<h6 class="p-6 pb-2">Components</h6>
+		<hr>
+		<List dense navigation items={menu} />
+		<hr>
+		<List dense navigation items={menuOther} />
+
+	</NavigationDrawer>
 	<slot></slot>
 </main>