@enki-tek/fms-web-components 0.0.1

package/README.md

@@ -0,0 +1,39 @@
+# component library for Enkitek FMS
+
+Here we creat the design (svelte) library for our  [`enkitek FMS system`](https://fms.enkitek.farm/shopfloor)
+
+
+[`Click here`](https://fms-components-library.web.app) to view the storybook pages
+[`Click here`](https://www.npmjs.com/package/@enki.tek/fms-web-components?activeTab=readme) to view npm page
+
+## Creating a project
+
+Below command are used for this library
+
+```bash
+# Create the svelte bundle and load this svelte library as webpage
+npm run dev
+
+# Build the library for push to NPM
+npm run build
+
+# To exicute svelte-check 
+npm run check
+
+# To load story book in 6006 port
+npm run storybook
+
+# To build story book
+npm run build-storybook
+
+
+# To run vitest ( unittesting )
+npm run test
+
+#to check code coverage using vitest 
+npm run coverage
+
+#lo toad vitest ui
+npm run vitestui
+```
+

package/app.scss

@@ -0,0 +1 @@
+

package/components/Button/Button.stories.d.ts

@@ -0,0 +1,48 @@
+import Button from './Button.svelte';
+declare const _default: {
+    title: string;
+    component: typeof Button;
+    tags: string[];
+    argTypes: {
+        backgroundColor: {
+            control: string;
+        };
+        size: {
+            control: {
+                type: string;
+            };
+            options: string[];
+        };
+        color: {
+            control: {
+                type: string;
+            };
+            options: string[];
+        };
+    };
+};
+export default _default;
+export declare const Primary: {
+    args: {
+        iscolor: boolean;
+        label: string;
+    };
+};
+export declare const Secondary: {
+    args: {
+        label: string;
+        color: string;
+    };
+};
+export declare const Large: {
+    args: {
+        size: string;
+        label: string;
+    };
+};
+export declare const Small: {
+    args: {
+        size: string;
+        label: string;
+    };
+};

package/components/Button/Button.stories.js

@@ -0,0 +1,43 @@
+import Button from './Button.svelte';
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+export default {
+    title: 'FMS/Button',
+    component: Button,
+    tags: ['autodocs'],
+    argTypes: {
+        backgroundColor: { control: 'color' },
+        size: {
+            control: { type: 'select' },
+            options: ['sm', 'md', 'lg'],
+        },
+        color: {
+            control: { type: 'select' },
+            options: ['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark']
+        }
+    },
+};
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Primary = {
+    args: {
+        iscolor: true,
+        label: 'Button',
+    },
+};
+export const Secondary = {
+    args: {
+        label: 'Button',
+        color: 'secondary'
+    },
+};
+export const Large = {
+    args: {
+        size: 'lg',
+        label: 'Button',
+    },
+};
+export const Small = {
+    args: {
+        size: 'sm',
+        label: 'Button',
+    },
+};

package/components/Button/Button.svelte

@@ -0,0 +1,12 @@
+<script>import { Button } from "sveltestrap";
+export let label = "click";
+export let iscolor = false;
+export let size = "md";
+export let color = "primary";
+</script>
+
+<Button color = {iscolor ? 'primary' : 'danger'}
+         class={`btn btn-${color} btn-${size}`}
+          >
+    {label}
+</Button>

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

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        label?: string | undefined;
+        iscolor?: boolean | undefined;
+        size?: string | undefined;
+        color?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ButtonProps = typeof __propDef.props;
+export type ButtonEvents = typeof __propDef.events;
+export type ButtonSlots = typeof __propDef.slots;
+export default class Button extends SvelteComponentTyped<ButtonProps, ButtonEvents, ButtonSlots> {
+}
+export {};

package/components/lay-out/Footer.svelte

@@ -0,0 +1,6 @@
+<footer class="main-footer p-10 d-flex flex-row align-items-center justify-content-between ">
+	<div class="copy-right">
+		All rights reserved
+		<i class="ml-2 text-secondary ">Version 0.0.1</i>
+	</div>
+</footer>

package/components/lay-out/Footer.svelte.d.ts

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  FooterProps */
+/** @typedef {typeof __propDef.events}  FooterEvents */
+/** @typedef {typeof __propDef.slots}  FooterSlots */
+export default class Footer extends SvelteComponentTyped<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type FooterProps = typeof __propDef.props;
+export type FooterEvents = typeof __propDef.events;
+export type FooterSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/components/lay-out/LayOut.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/components/lay-out/LayOut.spec.js

@@ -0,0 +1,10 @@
+import LayOut from "./LayOut.svelte";
+import { render, cleanup } from '@testing-library/svelte';
+beforeEach(cleanup);
+describe('LayOut', () => {
+    test('should render correctly', () => {
+        const { container } = render(LayOut);
+        const component = container.querySelector('.wrapper');
+        expect(component && component.className).toBe('wrapper');
+    });
+});

package/components/lay-out/LayOut.stories.d.ts

@@ -0,0 +1,40 @@
+import LayOut from '../../index';
+declare const _default: {
+    title: string;
+    tags: string[];
+    component: typeof LayOut;
+    parameters: {
+        controls: {
+            exclude: RegExp;
+        };
+    };
+    argTypes: {
+        class: {
+            control: boolean;
+            table: {
+                disable: boolean;
+            };
+        };
+        'default ': {
+            description: string;
+            table: {
+                category: string;
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+    };
+};
+export default _default;
+export declare const Layout: ({ ...args }: {
+    [x: string]: any;
+}) => {
+    Component: typeof LayOut;
+    props: {
+        [x: string]: any;
+    };
+};

package/components/lay-out/LayOut.stories.js

@@ -0,0 +1,36 @@
+import LayOut from '../../index';
+export default {
+    title: 'FMS/LayOut',
+    tags: ['autodocs'],
+    component: LayOut,
+    parameters: {
+        controls: {
+            exclude: /^(default)$/g
+        }
+    },
+    argTypes: {
+        class: {
+            control: false,
+            table: {
+                disable: true
+            }
+        },
+        'default ': {
+            description: 'This is the default content slot.',
+            table: {
+                category: 'slots',
+                type: {
+                    summary: 'any'
+                },
+                defaultValue: {
+                    summary: 'empty'
+                }
+            }
+        }
+    },
+};
+const Template = ({ ...args }) => ({
+    Component: LayOut,
+    props: args
+});
+export const Layout = Template.bind({});

package/components/lay-out/LayOut.svelte

@@ -0,0 +1,13 @@
+<script>import Footer from "./Footer.svelte";
+</script>
+
+<section >
+	<div class="wrapper">
+		<div class="content-wrapper">							
+			<slot />
+		</div>
+        <div>
+			<Footer />							
+        </div>		
+	</div>
+</section>

package/components/lay-out/LayOut.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type LayOutProps = typeof __propDef.props;
+export type LayOutEvents = typeof __propDef.events;
+export type LayOutSlots = typeof __propDef.slots;
+export default class LayOut extends SvelteComponentTyped<LayOutProps, LayOutEvents, LayOutSlots> {
+}
+export {};

package/index.d.ts

@@ -0,0 +1,5 @@
+import './app.scss';
+import Layout from './components/lay-out/LayOut.svelte';
+import Button from './components/Button/Button.svelte';
+export { Button };
+export default Layout;

package/index.js

@@ -0,0 +1,6 @@
+// Reexport your entry components here
+import './app.scss';
+import Layout from './components/lay-out/LayOut.svelte';
+import Button from './components/Button/Button.svelte';
+export { Button };
+export default Layout;

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@enki-tek/fms-web-components",
+  "version": "0.0.1",
+  "devDependencies": {
+    "@storybook/addon-essentials": "^7.6.14",
+    "@storybook/addon-interactions": "^7.6.14",
+    "@storybook/addon-links": "^7.6.14",
+    "@storybook/blocks": "^7.6.14",
+    "@storybook/svelte": "^7.6.14",
+    "@storybook/sveltekit": "^7.6.14",
+    "@storybook/test": "^7.6.14",
+    "@sveltejs/adapter-auto": "^1.0.0-next.90",
+    "@sveltejs/kit": "^1.0.0-next.587",
+    "@sveltejs/package": "^1.0.0-next.6",
+    "@testing-library/svelte": "^4.1.0",
+    "@vitest/coverage-v8": "^1.2.2",
+    "@vitest/ui": "^1.2.2",
+    "eslint": "^8.28.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-storybook": "^0.6.15",
+    "eslint-plugin-svelte3": "^4.0.0",
+    "jsdom": "^24.0.0",
+    "prettier": "^2.8.0",
+    "prettier-plugin-svelte": "^2.8.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "storybook": "^7.6.14",
+    "svelte": "^3.54.0",
+    "svelte-check": "^2.9.2",
+    "svelte-i18n": "^3.6.0",
+    "sveltestrap": "^5.10.0",
+    "tslib": "^2.4.1",
+    "typescript": "^4.9.3",
+    "vite": "^4.0.0",
+    "vitest": "^1.2.2"
+  },
+  "type": "module",
+  "dependencies": {
+    "@vitejs/plugin-basic-ssl": "^1.0.1",
+    "bootstrap": "^5.3.2",
+    "qr-scanner": "^1.4.2"
+  },
+  "exports": {
+    "./package.json": "./package.json",
+    "./app.scss": "./app.scss",
+    "./components/Button/Button.stories": "./components/Button/Button.stories.js",
+    "./components/Button/Button.svelte": "./components/Button/Button.svelte",
+    "./components/lay-out/Footer.svelte": "./components/lay-out/Footer.svelte",
+    "./components/lay-out/LayOut.spec": "./components/lay-out/LayOut.spec.js",
+    "./components/lay-out/LayOut.stories": "./components/lay-out/LayOut.stories.js",
+    "./components/lay-out/LayOut.svelte": "./components/lay-out/LayOut.svelte",
+    ".": "./index.js"
+  },
+  "svelte": "./index.js"
+}