feat: add sidebar components and stories 🛢️

Justfile

@@ -1,12 +1,19 @@
 stencil:
     tmux new-session -d -s "papier-stencil"
-    tmux send-keys -t "papier-stencil" "npm run start" ENTER
+    tmux send-keys -t "papier-stencil" "npm run build:watch" ENTER
+
+watch_changes:
+  npx nodemon --exec "npx histoire dev" src/components/**/*.tsx
 
 histoire:
     tmux new-session -d -s "papier-histoire"
-    tmux send-keys -t "papier-histoire" "npx histoire dev" ENTER
+    tmux send-keys -t "papier-histoire" "just watch_changes" ENTER
     open 'http://localhost:6006/'
 
+start:
+  just stencil
+  just histoire
+
 build:
     npm run build
 
@@ -15,3 +22,6 @@ biome:
 
 create component:
     npx stencil g {{component}}
+    mkdir src/components/{{component}}/stories
+    touch src/components/{{component}}/stories/{{component}}.story.vue
+    touch src/components/{{component}}/stories/{{component}}.specs.story.vue

histoire/setup.ts

@@ -1,6 +1,6 @@
 import { defineSetupVue3 } from '@histoire/plugin-vue'
-import HistoireSeutp from './HistoireSetup.vue'
+import HistoireSetup from './HistoireSetup.vue'
 
 export const setupVue3 = defineSetupVue3(({ addWrapper }) => {
-    addWrapper(HistoireSeutp)
+    addWrapper(HistoireSetup)
 })

src/components/p-sidebar-item/p-sidebar-item.scss

@@ -0,0 +1,29 @@
+:host {
+    @import "../common";
+
+    .papier {
+        display: block;
+        display: flex;
+        align-items: center;
+        gap: 20px;
+        height: 30px;
+        box-sizing: border-box;
+        padding-left: 10px;
+        padding-right: 10px;
+
+        &:hover {
+            background: #323337;
+            cursor: pointer;
+        }
+
+        &.is--active {
+            background: #323337;
+            border-bottom-left-radius: 15px 255px;
+            border-bottom-right-radius: 225px 15px;
+            border-top-left-radius: 255px 15px;
+            border-top-right-radius: 15px 225px;
+            box-sizing: border-box;
+            border: 1px white solid;
+        }
+    }
+}

src/components/p-sidebar-item/p-sidebar-item.tsx

@@ -0,0 +1,39 @@
+import { Component, Host, h, Prop } from '@stencil/core'
+
+@Component({
+    tag: 'p-sidebar-item',
+    styleUrl: 'p-sidebar-item.scss',
+    shadow: true,
+})
+export class PSidebarItem {
+    @Prop()
+    public dark?: boolean = false
+
+    @Prop()
+    public active?: boolean = false
+
+    @Prop()
+    public url: string
+
+    @Prop()
+    public icon?: string
+
+    private getComponentClasses() {
+        return {
+            papier: true,
+            'is--dark': this.dark,
+            'is--active': this.active,
+        }
+    }
+
+    render() {
+        return (
+            <Host>
+                <div class={this.getComponentClasses()}>
+                    {this.icon && <p-icon icon={this.icon} />}
+                    <slot></slot>
+                </div>
+            </Host>
+        )
+    }
+}

src/components/p-sidebar-item/readme.md

@@ -0,0 +1,20 @@
+# p-sidebar-item
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property | Attribute | Description | Type      | Default     |
+| -------- | --------- | ----------- | --------- | ----------- |
+| `active` | `active`  |             | `boolean` | `false`     |
+| `dark`   | `dark`    |             | `boolean` | `false`     |
+| `icon`   | `icon`    |             | `string`  | `undefined` |
+| `url`    | `url`     |             | `string`  | `undefined` |
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

src/components/p-sidebar/p-sidebar.scss

@@ -0,0 +1,78 @@
+:host {
+    @import "../common";
+
+    display: block;
+    height: 100%;
+
+    .papier,
+    .sidebar {
+        height: 100%;
+    }
+
+    .sidebar {
+        width: 256px;
+        display: grid !important;
+        grid-template-rows: auto 1fr auto;
+        grid-template-columns: 1fr;
+        justify-content: space-between;
+
+        border-bottom-left-radius: 15px 255px;
+        border-bottom-right-radius: 225px 15px;
+        border-top-left-radius: 255px 15px;
+        border-top-right-radius: 15px 225px;
+        box-sizing: border-box;
+        padding: 20px;
+
+        &__menu {
+            display: block;
+        }
+
+        &__footer {
+            position: relative;
+
+            .footer__clickable {
+                display: grid;
+                grid-template-columns: 40px 1fr;
+                gap: 20px;
+
+                img {
+                    width: 40px;
+                    height: 40px;
+                    border-radius: 4px;
+
+                    & + div {
+                        display: flex;
+                        flex-direction: column;
+
+                        span {
+                            font-size: 12px;
+                        }
+                    }
+                }
+            }
+
+            // .footer__actions {
+            //     position: absolute;
+            //     background: red;
+            //     width: 100%;
+            //     height: 100px;
+            // }
+        }
+
+        &__top {
+            display: flex;
+            align-items: center;
+            gap: 20px;
+            margin-bottom: 20px;
+
+            span {
+                font-size: 18px;
+            }
+
+            img {
+                width: 40px;
+                height: 40px;
+            }
+        }
+    }
+}

src/components/p-sidebar/p-sidebar.tsx

@@ -0,0 +1,65 @@
+import { Component, Host, h, Prop } from '@stencil/core'
+
+export type PSidebarUser = {
+    name: string
+    email: string
+    photo: string
+}
+
+@Component({
+    tag: 'p-sidebar',
+    styleUrl: 'p-sidebar.scss',
+    shadow: true,
+})
+export class PSidebar {
+    @Prop()
+    public dark?: boolean = false
+
+    @Prop()
+    public logo?: string
+
+    @Prop()
+    public title: string
+
+    @Prop()
+    public user?: PSidebarUser
+
+    render() {
+        return (
+            <Host>
+                <div
+                    class={{
+                        papier: true,
+                        'is--dark': this.dark,
+                    }}
+                >
+                    <div class="sidebar card">
+                        <div class="sidebar__top">
+                            {this.logo && <img alt="missing logo" src={this.logo} />}
+                            <span>{this.title}</span>
+                        </div>
+                        <div class="sidebar__menu">
+                            <slot></slot>
+                        </div>
+                        <div class="sidebar__footer">
+                            {this.user && (
+                                <div class="footer__clickable">
+                                    <img alt="something" src={this.user.photo} />
+                                    <div>
+                                        <b>{this.user.name}</b>
+                                        <span>{this.user.email}</span>
+                                    </div>
+                                </div>
+                            )}
+                            {this.user && (
+                                <div class="footer__actions">
+                                    <slot name="actions"></slot>
+                                </div>
+                            )}
+                        </div>
+                    </div>
+                </div>
+            </Host>
+        )
+    }
+}

src/components/p-sidebar/readme.md

@@ -0,0 +1,20 @@
+# p-sidebar
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property | Attribute | Description | Type                                              | Default     |
+| -------- | --------- | ----------- | ------------------------------------------------- | ----------- |
+| `dark`   | `dark`    |             | `boolean`                                         | `false`     |
+| `logo`   | `logo`    |             | `string`                                          | `undefined` |
+| `title`  | `title`   |             | `string`                                          | `undefined` |
+| `user`   | --        |             | `{ name: string; email: string; photo: string; }` | `undefined` |
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

src/components/p-sidebar/stories/p-sidebar.specs.story.vue

@@ -0,0 +1,23 @@
+<template>
+    <Story title="Navigation/Sidebar/Specs">
+        <div class="markstream-vue">
+            <MarkdownRender
+                :content="readme"
+                :isDark="true"
+            />
+        </div>
+        <template #source>No need</template>
+    </Story>
+</template>
+
+<script lang="ts" setup>
+import MarkdownRender from 'markstream-vue'
+import readme from '../readme.md?raw'
+import 'markstream-vue/index.css'
+</script>
+
+<style scoped>
+.markstream-vue {
+    color: white;
+}
+</style>