@enki-tek/fms-web-components 0.0.2 → 0.0.4

package/components/RadioButton/RadioButton.svelte.d.ts

@@ -0,0 +1,41 @@
+/** @typedef {typeof __propDef.props}  RadioButtonProps */
+/** @typedef {typeof __propDef.events}  RadioButtonEvents */
+/** @typedef {typeof __propDef.slots}  RadioButtonSlots */
+export default class RadioButton extends SvelteComponentTyped<{
+    size?: string | undefined;
+    options?: ({
+        value: number;
+        label: string;
+        disabled?: undefined;
+    } | {
+        value: number;
+        label: string;
+        disabled: boolean;
+    })[] | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type RadioButtonProps = typeof __propDef.props;
+export type RadioButtonEvents = typeof __propDef.events;
+export type RadioButtonSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        size?: string | undefined;
+        options?: ({
+            value: number;
+            label: string;
+            disabled?: undefined;
+        } | {
+            value: number;
+            label: string;
+            disabled: boolean;
+        })[] | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/components/Sidebar/Sidebar.scss

@@ -0,0 +1,115 @@
+// Importing variables from variable.scss file
+@import './../variable.scss';
+
+%common-styles {
+  color: $white;
+}
+
+%sidebar-styles {
+  background: $primary-dark;
+}
+
+%active-styles {
+  border-left: 2px solid $white;
+  background: $blue-700;
+}
+
+.row {
+  --bs-gutter-x: 1rem;
+}
+
+.icon-sidebar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 88px;
+  background: $primary-dark;
+}
+
+.line {
+  width: 88px;
+  height: 1px;
+  background: $white;
+  margin-left: -7px;
+}
+
+.icon-btn {
+  padding: 20px;
+}
+
+.icon-sidebar-content .toggle-button {
+  @extend %common-styles;
+}
+
+.icon-sidebar-content ul {
+  display: flex;
+  align-items: center;
+  padding: 20px;
+  @extend %common-styles;
+  gap: 32px;
+}
+
+.icon-sidebar-content ul .active {
+  @extend %active-styles;
+}
+
+//sidbar open class
+
+:global(.offcanvas-body) {
+  @extend %sidebar-styles;
+  padding: 0rem 0rem;
+}
+
+.offcanvas-title {
+  color: $white;
+  font-size: 28px;
+}
+
+ul {
+  @extend %common-styles;
+}
+
+.nav-item {
+  display: flex;
+  width: 274px;
+  padding: 15px 32px;
+  align-items: center;
+  gap: 8px;
+}
+
+.nav-item .item-name {
+  line-height: 22px;
+}
+
+.nav .nav-item.active {
+  @extend %active-styles;
+}
+
+.toggle-button {
+  background-color: transparent;
+  border: $white;
+  cursor: pointer;
+}
+
+.material-icons {
+  font-size: 24px;
+  color: $white;
+}
+
+:global(.offcanvas.offcanvas-start) {
+  width: 274px;
+  border-right: none;
+}
+
+.offcanvas-header {
+  padding: 1.5rem 1.5rem;
+}
+
+.line-open {
+  width: 274px;
+  height: 1px;
+  @extend %common-styles;
+}
+
+

package/components/Sidebar/Sidebar.stories.d.ts

@@ -0,0 +1,29 @@
+import Sidebar from "./Sidebar.svelte";
+declare const _default: {
+    title: string;
+    component: typeof Sidebar;
+    tags: string[];
+    argTypes: {
+        companyName: {
+            control: {
+                type: string;
+            };
+        };
+        navItems: {
+            control: {
+                type: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const Default: {
+    args: {
+        companyName: string;
+        navItems: {
+            name: string;
+            icon: string;
+            route: string;
+        }[];
+    };
+};

package/components/Sidebar/Sidebar.stories.js

@@ -0,0 +1,27 @@
+import Sidebar from "./Sidebar.svelte";
+export default {
+    title: 'FMS/Sidebar',
+    component: Sidebar,
+    tags: ['autodocs'],
+    argTypes: {
+        companyName: { control: { type: 'text' } },
+        navItems: { control: { type: 'object' } }
+    }
+};
+export const Default = {
+    args: {
+        companyName: 'Vertfarm',
+        navItems: [
+            { name: 'Overview', icon: 'house-fill', route: '/overview' },
+            { name: 'Container Types', icon: 'aspect-ratio', route: '/container-types' },
+            { name: 'Containers', icon: 'view-list', route: '/containers' },
+            { name: 'Batch Operations', icon: 'grid', route: '/batch-operations' },
+            { name: 'Recipe', icon: 'soundwave', route: '/recipe' },
+            { name: 'Work Order', icon: 'collection', route: '/work-order' },
+            { name: 'Protocol', icon: 'textarea', route: '/protocol' },
+            { name: 'Users', icon: 'people', route: '/users' },
+            { name: 'Packaging Configuration', icon: 'box-seam', route: '/packaging-configuration' },
+            { name: 'Delivery', icon: 'truck', route: '/delivery' }
+        ]
+    }
+};