@enki-tek/fms-web-components 0.0.3 → 0.0.5

package/components/Accordion/Accordion.stories.d.ts

@@ -4,17 +4,27 @@ declare namespace _default {
     export const tags: string[];
     export namespace argTypes {
         namespace stayOpen {
-            const control: string;
+            namespace control {
+                const type: string;
+            }
         }
         namespace items {
-            const control_1: string;
+            export namespace control_1 {
+                const type_1: string;
+                export { type_1 as type };
+            }
             export { control_1 as control };
         }
     }
 }
 export default _default;
-export function Default(args: any): {
-    Component: typeof Accordion;
-    props: any;
-};
+export namespace Default {
+    namespace args {
+        const items_1: {
+            header: string;
+            content: string;
+        }[];
+        export { items_1 as items };
+    }
+}
 import Accordion from "./Accordion.svelte";

package/components/Accordion/Accordion.stories.js

@@ -5,17 +5,15 @@ export default {
     component: Accordion,
     tags: ['autodocs'],
     argTypes: {
-        stayOpen: { control: 'boolean' }, 
-        items: { control: 'object' } 
+        stayOpen: { control: {type:'boolean' } }, 
+        items: { control: { type: 'array' } },
     }
 };
 
 
 //  story with customized items
-export const Default = (args) => ({
-    Component: Accordion,
-    props: {
-        ...args,
+export const Default ={
+    args:{
         items: [ 
             {
                 header: 'Accordion Item #1',
@@ -27,4 +25,4 @@ export const Default = (args) => ({
             }
         ]
     }
-});
+}

package/components/Badge/Badge.stories.d.ts

@@ -1,6 +1,7 @@
 declare namespace _default {
     export const title: string;
     export { Badge as component };
+    export const tags: string[];
 }
 export default _default;
 export namespace yellow {

package/components/Badge/Badge.stories.js

@@ -2,7 +2,8 @@ import Badge from './Badge.svelte'
 
 export default{
     title:'FMS/Badge',
-    component:Badge
+    component:Badge,
+    tags: ['autodocs'],
 };
 
 export const yellow={

package/components/Breadcrumb/Breadcrumb.svelte

@@ -1,8 +1,7 @@
   <script>import { Breadcrumb, BreadcrumbItem } from "sveltestrap";
-import { goto } from "$app/navigation";
 export let newBreadcrumbs;
 function handleClick(data) {
-  goto(data.link);
+  navigator(data.link);
 }
 let length = newBreadcrumbs.length;
 </script>

package/components/Button/Button.scss

@@ -44,6 +44,13 @@
   }
 }
 
+.disabled:disabled {
+
+  opacity: 0.5;
+  cursor: auto;
+
+}
+
 //large button
 .ebtn-large {
   height: $large-height;
@@ -674,7 +681,7 @@
 }
 
 .eoutline-successDark {
-  outline: 1px solid $success-dark;
+  outline: 1px solid $success-dark ;
 }
 
 .eoutline-successLight {

package/components/Button/Button.svelte

@@ -4,12 +4,14 @@
 	export let label = 'Button';
 	export let config = '';
 	export let icon = { state: false, name: 'person', position: 'right' };
-	export let shade = 'primary';
+	export let shade = '';
 	export let outlineShade = '';
+	export let size = '';
+	export let disabled =false;
 
 	let buttonStyles = [];
 	if (buttonConfig.hasOwnProperty(config)) {
-		buttonStyles = ['ebtn', ...buttonConfig[config], `ebg-${shade}`, `eoutline-${outlineShade}`];
+		buttonStyles = ['ebtn', ...buttonConfig[config], `ebg-${shade}`, `eoutline-${outlineShade}`, `ebtn-${size}`, `disabled`];
 	}
 
 	// icon button
@@ -25,7 +27,7 @@
 	console.log(buttonStyles);
 </script>
 
-<button {type} class={buttonStyles.join(' ')} on:click on:focus on:blur>
+<button {type} class={buttonStyles.join(' ')} on:click on:focus on:blur {disabled} >
 	<slot>
 		{#if label}
 			{label}
@@ -80,6 +82,10 @@
 .ebtn-medium i {
   font-size: 16px;
 }
+.disabled:disabled {
+  opacity: 0.5;
+  cursor: auto;
+}
 .ebtn-large {
   height: 52px;
   display: flex;

package/components/Button/Button.svelte.d.ts

@@ -2,6 +2,7 @@
 /** @typedef {typeof __propDef.events}  ButtonEvents */
 /** @typedef {typeof __propDef.slots}  ButtonSlots */
 export default class Button extends SvelteComponentTyped<{
+    disabled?: boolean | undefined;
     type?: string | undefined;
     label?: string | undefined;
     config?: string | undefined;
@@ -12,6 +13,7 @@ export default class Button extends SvelteComponentTyped<{
     } | undefined;
     shade?: string | undefined;
     outlineShade?: string | undefined;
+    size?: string | undefined;
 }, {
     click: MouseEvent;
     focus: FocusEvent;
@@ -28,6 +30,7 @@ export type ButtonSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        disabled?: boolean | undefined;
         type?: string | undefined;
         label?: string | undefined;
         config?: string | undefined;
@@ -38,6 +41,7 @@ declare const __propDef: {
         } | undefined;
         shade?: string | undefined;
         outlineShade?: string | undefined;
+        size?: string | undefined;
     };
     events: {
         click: MouseEvent;

package/components/Card/Card.stories.d.ts

@@ -1,6 +1,7 @@
 declare namespace _default {
     export const title: string;
     export { Card as component };
+    export const tags: string[];
     export namespace argTypes {
         namespace image {
             const control: string;

package/components/Card/Card.stories.js

@@ -4,6 +4,7 @@ import Card from './Card.svelte';
 export default {
     title: 'FMS/Card',
     component: Card,
+    tags: ['autodocs'],
     argTypes: {
         image: { control: 'text' },
         width: { control: 'text' },

package/components/CheckBox/Checkbox.svelte.d.ts

@@ -5,8 +5,8 @@ export default class Checkbox extends SvelteComponentTyped<{
     disable: any;
     enable: any;
     label?: string | undefined;
-    value?: string | undefined;
     size?: string | undefined;
+    value?: string | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> {
@@ -20,8 +20,8 @@ declare const __propDef: {
         disable: any;
         enable: any;
         label?: string | undefined;
-        value?: string | undefined;
         size?: string | undefined;
+        value?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/ModalWindow/Modal.stories.d.ts

@@ -1,6 +1,7 @@
 declare namespace _default {
     export const title: string;
     export { Modal as component };
+    export const tags: string[];
     export namespace argTypes {
         namespace content {
             const control: string;
@@ -22,6 +23,8 @@ export namespace Default {
         export { content_1 as content };
         const header_1: string;
         export { header_1 as header };
+        export const closeBtn: string;
+        export const saveBtn: string;
         const open_1: boolean;
         export { open_1 as open };
     }

package/components/ModalWindow/Modal.stories.js

@@ -3,6 +3,7 @@ import Modal from './Modal.svelte';
 export default {
     title: 'FMS/Modal', 
     component: Modal,
+    tags: ['autodocs'],
     argTypes: {
         content: { control: 'text' }, 
         header: { control: 'text' }, 
@@ -14,6 +15,8 @@ export const Default = {
     args: {
         content: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
         header: 'Modal Title',
+        closeBtn:"Close",
+        saveBtn:"Save Changes",
         open: true,
     }
 };

package/components/ModalWindow/Modal.svelte

@@ -3,7 +3,9 @@ import { Modal, ModalBody, ModalFooter, ModalHeader } from "sveltestrap";
 import Icon from "../Icon/Icon.svelte";
 export let content = "";
 export let header = "";
-export let open = true;
+export let closeBtn = "";
+export let saveBtn = "";
+export let open = false;
 export let toggle = () => open = !open;
 </script>
 
@@ -38,8 +40,14 @@ export let toggle = () => open = !open;
 			</div>
 		</ModalBody>
 		<ModalFooter>
-			<Button config="secondaryOutlineBtnMedium" on:click={toggle}>Close</Button>
-			<Button config="successBtnMedium" on:click={toggle}>Save changes</Button>
+			<slot name="footer">
+				{#if closeBtn || saveBtn}
+					<Button config="secondaryOutlineBtnMedium" on:click={toggle}>{closeBtn}</Button>
+					<Button config="successBtnMedium" on:click={toggle}>{saveBtn}</Button>
+				{:else}
+					<slot />
+				{/if}
+			</slot>
 		</ModalFooter>
 	</Modal>
 </div>

package/components/ModalWindow/Modal.svelte.d.ts

@@ -3,6 +3,8 @@ declare const __propDef: {
     props: {
         content?: string | undefined;
         header?: string | undefined;
+        closeBtn?: string | undefined;
+        saveBtn?: string | undefined;
         open?: boolean | undefined;
         toggle?: (() => boolean) | undefined;
     };
@@ -13,6 +15,7 @@ declare const __propDef: {
         header: {};
         content: {};
         default: {};
+        footer: {};
     };
 };
 export type ModalProps = typeof __propDef.props;

package/components/Sidebar/Sidebar.scss

@@ -1,8 +1,32 @@
 // Importing variables from variable.scss file
 @import './../variable.scss';
 
+%common-styles {
+  color: $white;
+}
+
+%commom-background-line {
+  background: $white;
+}
+
+%sidebar-styles {
+  background: $primary-dark;
+}
+
+%active-styles {
+  border-left: 2px solid $white;
+  background: $blue-700;
+}
+
+%common-li-styles {
+  display: flex;
+  padding: 15px 32px;
+  align-items: center;
+  gap: 8px;
+}
+
 .row {
-  --bs-gutter-x: -0.5rem;
+  --bs-gutter-x: 0rem;
 }
 
 .icon-sidebar {
@@ -10,67 +34,72 @@
   top: 0;
   left: 0;
   height: 100%;
-  width: 60px;
-  background-color: #fff;
+  width: 88px;
+  background: $primary-dark;
 }
 
-.icon-sidebar .toggleButton {
-  display: flex;
-  align-items: center;
-  padding: 20px;
-  gap: 32px;
+.line {
+  width: 88px;
+  height: 1px;
+  @extend %commom-background-line;
+}
+
+.icon-btn {
+  padding: 20px 27px;
 }
 
-.icon-sidebar-content ul {
-  padding: 20px;
-  color: $primary-dark;
-  gap: 32px;
+.icon-sidebar-content .toggle-button {
+  @extend %common-styles;
 }
 
-#offcanvasScrollingLabel {
-  color: $secondary-dark;
+.icon-sidebar-content ul li {
+  @extend %common-styles;
+  @extend %common-li-styles;
+  padding: 16px 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;
-  font-weight: 600;
 }
 
 ul {
-  color: $primary-dark;
-  gap: 4px;
+  @extend %common-styles;
 }
 
 .nav-item {
-  display: flex;
-  width: 241px;
-  padding: 15px;
-  align-items: center;
-  gap: 10px;
-  border-radius: 4px;
-  border: 1px solid $primary-dark;
+  @extend %common-li-styles;
 }
 
 .nav-item .item-name {
-  color: $primary-dark;
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 400;
   line-height: 22px;
-  font-family: 'Roboto';
 }
 
-.toggleButton {
+.nav .nav-item.active {
+  @extend %active-styles;
+}
+
+.toggle-button {
   background-color: transparent;
-  border: #fff;
+  border: $white;
   cursor: pointer;
 }
 
 .material-icons {
-  font-size: 24px;
-  color: $primary-dark;
-}
-
-:global(.offcanvas-start) {
-  width: 274px;
-  border-right: none;
+  font-size: 16px;
+  color: $white;
 }
 
 :global(.offcanvas.offcanvas-start) {
@@ -78,10 +107,12 @@ ul {
   border-right: none;
 }
 
-:global(.offcanvas-body) {
-  padding: 0.5rem 0.5rem;
+.offcanvas-header {
+  padding: 1.5rem 1.5rem;
 }
 
-.offcanvas-header {
-  padding: 0.5rem 0.5rem;
+.line-open {
+  width: 274px;
+  height: 1px;
+  @extend %commom-background-line;
 }

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

@@ -2,6 +2,7 @@ import Sidebar from "./Sidebar.svelte";
 declare const _default: {
     title: string;
     component: typeof Sidebar;
+    tags: string[];
     argTypes: {
         companyName: {
             control: {
@@ -16,13 +17,13 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const Default: ({ companyName, navItems }: {
-    companyName: any;
-    navItems: any;
-}) => {
-    Component: typeof Sidebar;
-    props: {
-        companyName: any;
-        navItems: any;
+export declare const Default: {
+    args: {
+        companyName: string;
+        navItems: {
+            name: string;
+            icon: string;
+            route: string;
+        }[];
     };
 };

package/components/Sidebar/Sidebar.stories.js

@@ -2,26 +2,26 @@ import Sidebar from "./Sidebar.svelte";
 export default {
     title: 'FMS/Sidebar',
     component: Sidebar,
+    tags: ['autodocs'],
     argTypes: {
         companyName: { control: { type: 'text' } },
         navItems: { control: { type: 'object' } }
     }
 };
-const Template = ({ companyName, navItems }) => ({
-    Component: Sidebar,
-    props: { companyName, navItems }
-});
-export const Default = Template.bind({});
-Default.args = {
-    companyName: 'Vertfarm',
-    navItems: [
-        { name: 'Home', icon: 'home' },
-        { name: 'About', icon: 'person' },
-        { name: 'Services', icon: 'settings' },
-        { name: 'Contact', icon: 'email' },
-        { name: 'Home', icon: 'home' },
-        { name: 'About', icon: 'person' },
-        { name: 'Services', icon: 'settings' },
-        { name: 'Contact', icon: 'email' }
-    ]
+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' }
+        ]
+    }
 };