Feat/table component

.gitignore

@@ -2,4 +2,5 @@
 node_modules
 public/bundle.*
 yarn-error.log
-build/
+build/
+docs/

.stories/Button/Button.svelte

@@ -1,9 +1,9 @@
 <script>
     import { Button } from 'svelte-admin'
 
-    function click() {
-        alert('hello from button')
-    }
+    const colors = ['primary', 'success', 'danger', 'warning']
 </script>
 
-<Button text="Click!" on:click={click} />
+{#each colors as color}
+    <Button {color}>{color}</Button>
+{/each}

.stories/Button/Disabled.svelte

@@ -0,0 +1,5 @@
+<script>
+    import { Button } from 'svelte-admin'
+</script>
+
+<Button disabled color="primary">Disabled</Button>

.stories/Button/Icon.svelte

@@ -0,0 +1,34 @@
+<script>
+    import { Button } from 'svelte-admin'
+
+    const colors = ['primary', 'success', 'danger', 'warning']
+</script>
+
+{#each colors as color}
+    <Button {color}>
+        <svg
+            slot="icon"
+            fill="white"
+            xmlns="http://www.w3.org/2000/svg"
+            xmlns:xlink="http://www.w3.org/1999/xlink"
+            width="50"
+            height="50"
+            viewBox="0 0 16 17">
+            <defs>
+                <path
+                    id="prefix__a"
+                    d="M14.707
+                    6.707l-.045.043-.027.023c-.116.095-.254.165-.406.2l-.112.02c-.037.005-.074.007-.111.007H9c-.552
+                    0-1-.448-1-1s.448-1 1-1h3.155C11.073 3.735 9.603 3 8 3 4.686
+                    3 2 5.686 2 9s2.686 6 6 6 6-2.686 6-6c0-.552.448-1 1-1s1
+                    .448 1 1c0 4.418-3.582 8-8 8s-8-3.582-8-8 3.582-8 8-8c1.892
+                    0 3.632.734 5 1.999V1c0-.552.448-1 1-1s1 .448 1 1v4.994c0
+                    .033-.001.067-.004.1l-.009.066c-.003.02-.007.042-.012.062-.012.055-.03.109-.05.16l-.022.048c-.027.056-.058.109-.094.158l-.02.027-.02.024c-.015.019-.031.037-.048.054l-.014.014z" />
+            </defs>
+            <g>
+                <use fill="white" fill-rule="nonzero" xlink:href="#prefix__a" />
+            </g>
+        </svg>
+        {color}
+    </Button>
+{/each}

.stories/Button/Link.svelte

@@ -0,0 +1,10 @@
+<script>
+    import { Button } from 'svelte-admin'
+    const colors = ['primary', 'success', 'danger', 'warning']
+</script>
+
+{#each colors as color}
+    <Button href="/" target="__blank" rel="noreferrer noopener" {color}>
+        {color} link
+    </Button>
+{/each}

.stories/Button/Outline.svelte

@@ -1,9 +1,9 @@
 <script>
     import { Button } from 'svelte-admin'
 
-    function click() {
-        alert('hello from button')
-    }
+    const colors = ['primary', 'success', 'danger', 'warning']
 </script>
 
-<Button outline text="click" on:click={click} />
+{#each colors as color}
+    <Button outline {color}>{color}</Button>
+{/each}

.stories/Button/RTL.svelte

@@ -0,0 +1,34 @@
+<script>
+    import { Button } from 'svelte-admin'
+
+    const colors = ['primary', 'success', 'danger', 'warning']
+</script>
+
+{#each colors as color}
+    <Button size="md" dir="rtl" {color}>
+        <svg
+            slot="icon"
+            fill="white"
+            xmlns="http://www.w3.org/2000/svg"
+            xmlns:xlink="http://www.w3.org/1999/xlink"
+            width="50"
+            height="50"
+            viewBox="0 0 16 17">
+            <defs>
+                <path
+                    id="prefix__a"
+                    d="M14.707
+                    6.707l-.045.043-.027.023c-.116.095-.254.165-.406.2l-.112.02c-.037.005-.074.007-.111.007H9c-.552
+                    0-1-.448-1-1s.448-1 1-1h3.155C11.073 3.735 9.603 3 8 3 4.686
+                    3 2 5.686 2 9s2.686 6 6 6 6-2.686 6-6c0-.552.448-1 1-1s1
+                    .448 1 1c0 4.418-3.582 8-8 8s-8-3.582-8-8 3.582-8 8-8c1.892
+                    0 3.632.734 5 1.999V1c0-.552.448-1 1-1s1 .448 1 1v4.994c0
+                    .033-.001.067-.004.1l-.009.066c-.003.02-.007.042-.012.062-.012.055-.03.109-.05.16l-.022.048c-.027.056-.058.109-.094.158l-.02.027-.02.024c-.015.019-.031.037-.048.054l-.014.014z" />
+            </defs>
+            <g>
+                <use fill="white" fill-rule="nonzero" xlink:href="#prefix__a" />
+            </g>
+        </svg>
+        {color}
+    </Button>
+{/each}

.stories/Button/Size.svelte

@@ -0,0 +1,39 @@
+<script>
+    import { Button } from 'svelte-admin'
+
+    const colors = ['primary', 'success', 'danger', 'warning']
+</script>
+
+{#each colors as color}
+    <Button size="md" {color}>{color}</Button>
+{/each}
+<br />
+<br />
+{#each colors as color}
+    <Button size="md" {color} icon>
+        <svg
+            slot="icon"
+            fill="white"
+            xmlns="http://www.w3.org/2000/svg"
+            xmlns:xlink="http://www.w3.org/1999/xlink"
+            width="50"
+            height="50"
+            viewBox="0 0 16 17">
+            <defs>
+                <path
+                    id="prefix__a"
+                    d="M14.707
+                    6.707l-.045.043-.027.023c-.116.095-.254.165-.406.2l-.112.02c-.037.005-.074.007-.111.007H9c-.552
+                    0-1-.448-1-1s.448-1 1-1h3.155C11.073 3.735 9.603 3 8 3 4.686
+                    3 2 5.686 2 9s2.686 6 6 6 6-2.686 6-6c0-.552.448-1 1-1s1
+                    .448 1 1c0 4.418-3.582 8-8 8s-8-3.582-8-8 3.582-8 8-8c1.892
+                    0 3.632.734 5 1.999V1c0-.552.448-1 1-1s1 .448 1 1v4.994c0
+                    .033-.001.067-.004.1l-.009.066c-.003.02-.007.042-.012.062-.012.055-.03.109-.05.16l-.022.048c-.027.056-.058.109-.094.158l-.02.027-.02.024c-.015.019-.031.037-.048.054l-.014.014z" />
+            </defs>
+            <g>
+                <use fill="white" fill-rule="nonzero" xlink:href="#prefix__a" />
+            </g>
+        </svg>
+        {color}
+    </Button>
+{/each}

.stories/Button/index.svelte

@@ -1,12 +1,32 @@
 <script>
     import Button from './Button.svelte'
     import Outline from './Outline.svelte'
+    import Icon from './Icon.svelte'
+    import Size from './Size.svelte'
+    import Disabled from './Disabled.svelte'
+    import Link from './Link.svelte'
+    import RTL from './RTL.svelte'
 </script>
 
-<!-- We can add mutiple variations of components as a single component in storybook  -->
-
-<h3>Colored button!</h3>
+<h1>Buttons</h1>
+<br />
+<h2>Colors</h2>
 <Button />
 
-<h3>Simple button!</h3>
+<h2>Outline</h2>
 <Outline />
+
+<h2>Icon</h2>
+<Icon />
+
+<h2>Size</h2>
+<Size />
+
+<h2>Disabled</h2>
+<Disabled />
+
+<h2>Link</h2>
+<Link />
+
+<h2>RTL</h2>
+<RTL />

.stories/Dropdown/Default.svelte

@@ -0,0 +1,13 @@
+<script>
+    import { Dropdown } from 'svelte-admin'
+    const items = [
+        'Gorilla',
+        'Banana',
+        'Gorilla holding the banana',
+        'And the entire jungle!',
+    ]
+    let value = ''
+    const setValue = e => (value = e.detail.value)
+</script>
+
+<Dropdown {items} selected="ramin" on:select={setValue} />

.stories/Dropdown/Dropdown.svelte

@@ -0,0 +1,13 @@
+<script>
+    import { Dropdown } from 'svelte-admin'
+    const items = [
+        'Gorilla',
+        'Banana',
+        'Gorilla holding the banana',
+        'And the entire jungle!',
+    ]
+    let value = ''
+    const setValue = e => (value = e.detail.value)
+</script>
+
+<Dropdown {items} on:select={setValue} />

.stories/Dropdown/Size.svelte

@@ -0,0 +1,11 @@
+<script>
+    import { Dropdown } from 'svelte-admin'
+    const items = ['Apple', 'Banana', 'Onion', 'Peach', 'Orange']
+    let value = ''
+    const setValue = e => (value = e.detail.value)
+</script>
+
+<Dropdown {items} size="sm" on:select={setValue} />
+<Dropdown {items} size="md" on:select={setValue} />
+<Dropdown {items} size="lg" on:select={setValue} />
+<!-- <Dropdown {items} block on:select={setValue} /> -->

.stories/Dropdown/Theme.svelte

@@ -0,0 +1,13 @@
+<script>
+    import { Dropdown } from 'svelte-admin'
+    const items = [
+        'Gorilla',
+        'Banana',
+        'Gorilla holding the banana',
+        'And the entire jungle!',
+    ]
+    let value = ''
+    const setValue = e => (value = e.detail.value)
+</script>
+
+<Dropdown {items} dark on:select={setValue} title="Select Item" />

.stories/Dropdown/index.svelte

@@ -0,0 +1,20 @@
+<script>
+    import Dropdown from './Dropdown.svelte'
+    import Default from './Default.svelte'
+    import Size from './Size.svelte'
+    import Theme from './Theme.svelte'
+</script>
+
+<h1>Dropdown</h1>
+<br />
+<h3>Normal</h3>
+<Dropdown />
+<br />
+<h3>Default Value</h3>
+<Default />
+<br />
+<h3>Size</h3>
+<Size />
+<br />
+<h3>Theme</h3>
+<Theme />

.stories/Modal/Content.svelte

@@ -0,0 +1,6 @@
+<p>
+    Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam tempore at
+    sunt molestias numquam, inventore dicta nesciunt maiores quisquam
+    consequatur possimus consectetur provident quasi laboriosam porro vitae.
+    Animi, sed velit?
+</p>

.stories/Modal/Modal.svelte

@@ -0,0 +1,19 @@
+<script>
+    import { Modal, Button } from 'svelte-admin'
+    import Content from './Content.svelte'
+    let isOpened = false
+    const toggle = () => (isOpened = !isOpened)
+    const title = 'Modal header'
+</script>
+
+<Modal {toggle} {isOpened} {title}>
+    <h3 slot="header">header text</h3>
+    <div slot="body">
+        <Content />
+    </div>
+    <div slot="footer" style="text-align: right">
+        <Button on:click={toggle} outline color="primary">cancel</Button>
+        <Button on:click={toggle} color="primary">agree</Button>
+    </div>
+</Modal>
+<Button on:click={toggle}>Open</Button>

.stories/Modal/PopUp.svelte

@@ -0,0 +1,17 @@
+<script>
+    import { Modal, Button } from 'svelte-admin'
+    import Content from './Content.svelte'
+
+    const popup = true
+    let isOpened = false
+
+    const toggle = () => (isOpened = !isOpened)
+</script>
+
+<Modal size="sm" {popup} {toggle} {isOpened}>
+    <Content />
+    <div style="text-align:center">
+        <Button color="success" on:click={toggle}>accept</Button>
+    </div>
+</Modal>
+<Button on:click={toggle}>Popup</Button>

.stories/Modal/Size.svelte

@@ -0,0 +1,48 @@
+<script>
+    import { Modal, Button } from 'svelte-admin'
+    import Content from './Content.svelte'
+
+    let isOpenedOne = false
+    let isOpenedTwo = false
+    let isOpenedThree = false
+
+    const toggleOne = () => (isOpenedOne = !isOpenedOne)
+    const toggleTwo = () => (isOpenedTwo = !isOpenedTwo)
+    const toggleThree = () => (isOpenedThree = !isOpenedThree)
+</script>
+
+<Modal size="sm" toggle={toggleOne} isOpened={isOpenedOne}>
+    <h3 slot="header">header text</h3>
+    <div slot="body">
+        <Content />
+    </div>
+    <div slot="footer" style="text-align: right">
+        <Button on:click={toggleOne} outline color="primary">cancel</Button>
+        <Button on:click={toggleOne} color="primary">agree</Button>
+    </div>
+</Modal>
+<Button on:click={toggleOne}>Open small modal</Button>
+
+<Modal size="md" toggle={toggleTwo} isOpened={isOpenedTwo}>
+    <h3 slot="header">header text</h3>
+    <div slot="body">
+        <Content />
+    </div>
+    <div slot="footer" style="text-align: right">
+        <Button on:click={toggleTwo} outline color="primary">cancel</Button>
+        <Button on:click={toggleTwo} color="primary">agree</Button>
+    </div>
+</Modal>
+<Button on:click={toggleTwo}>Open medium modal</Button>
+
+<Modal size="lg" toggle={toggleThree} isOpened={isOpenedThree}>
+    <h3 slot="header">header text</h3>
+    <div slot="body">
+        <Content />
+    </div>
+    <div slot="footer" style="text-align: right">
+        <Button on:click={toggleThree} outline color="primary">cancel</Button>
+        <Button on:click={toggleThree} color="primary">agree</Button>
+    </div>
+</Modal>
+<Button on:click={toggleThree}>Open large modal</Button>

.stories/Modal/index.svelte

@@ -0,0 +1,18 @@
+<script>
+    import Modal from './Modal.svelte'
+    import Size from './Size.svelte'
+    import PopUp from './PopUp.svelte'
+</script>
+
+<h1>Modal</h1>
+<br />
+<h3>Default</h3>
+<Modal />
+<br />
+<br />
+<h2>Size</h2>
+<Size />
+<br />
+<br />
+<h2>Popup</h2>
+<PopUp />