@enki-tek/fms-web-components 0.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md ADDED
@@ -0,0 +1,39 @@
1
+ # component library for Enkitek FMS
2
+
3
+ Here we creat the design (svelte) library for our [`enkitek FMS system`](https://fms.enkitek.farm/shopfloor)
4
+
5
+
6
+ [`Click here`](https://fms-components-library.web.app) to view the storybook pages
7
+ [`Click here`](https://www.npmjs.com/package/@enki.tek/fms-web-components?activeTab=readme) to view npm page
8
+
9
+ ## Creating a project
10
+
11
+ Below command are used for this library
12
+
13
+ ```bash
14
+ # Create the svelte bundle and load this svelte library as webpage
15
+ npm run dev
16
+
17
+ # Build the library for push to NPM
18
+ npm run build
19
+
20
+ # To exicute svelte-check
21
+ npm run check
22
+
23
+ # To load story book in 6006 port
24
+ npm run storybook
25
+
26
+ # To build story book
27
+ npm run build-storybook
28
+
29
+
30
+ # To run vitest ( unittesting )
31
+ npm run test
32
+
33
+ #to check code coverage using vitest
34
+ npm run coverage
35
+
36
+ #lo toad vitest ui
37
+ npm run vitestui
38
+ ```
39
+
package/app.scss ADDED
@@ -0,0 +1 @@
1
+
@@ -0,0 +1,48 @@
1
+ import Button from './Button.svelte';
2
+ declare const _default: {
3
+ title: string;
4
+ component: typeof Button;
5
+ tags: string[];
6
+ argTypes: {
7
+ backgroundColor: {
8
+ control: string;
9
+ };
10
+ size: {
11
+ control: {
12
+ type: string;
13
+ };
14
+ options: string[];
15
+ };
16
+ color: {
17
+ control: {
18
+ type: string;
19
+ };
20
+ options: string[];
21
+ };
22
+ };
23
+ };
24
+ export default _default;
25
+ export declare const Primary: {
26
+ args: {
27
+ iscolor: boolean;
28
+ label: string;
29
+ };
30
+ };
31
+ export declare const Secondary: {
32
+ args: {
33
+ label: string;
34
+ color: string;
35
+ };
36
+ };
37
+ export declare const Large: {
38
+ args: {
39
+ size: string;
40
+ label: string;
41
+ };
42
+ };
43
+ export declare const Small: {
44
+ args: {
45
+ size: string;
46
+ label: string;
47
+ };
48
+ };
@@ -0,0 +1,43 @@
1
+ import Button from './Button.svelte';
2
+ // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
3
+ export default {
4
+ title: 'FMS/Button',
5
+ component: Button,
6
+ tags: ['autodocs'],
7
+ argTypes: {
8
+ backgroundColor: { control: 'color' },
9
+ size: {
10
+ control: { type: 'select' },
11
+ options: ['sm', 'md', 'lg'],
12
+ },
13
+ color: {
14
+ control: { type: 'select' },
15
+ options: ['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark']
16
+ }
17
+ },
18
+ };
19
+ // More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
20
+ export const Primary = {
21
+ args: {
22
+ iscolor: true,
23
+ label: 'Button',
24
+ },
25
+ };
26
+ export const Secondary = {
27
+ args: {
28
+ label: 'Button',
29
+ color: 'secondary'
30
+ },
31
+ };
32
+ export const Large = {
33
+ args: {
34
+ size: 'lg',
35
+ label: 'Button',
36
+ },
37
+ };
38
+ export const Small = {
39
+ args: {
40
+ size: 'sm',
41
+ label: 'Button',
42
+ },
43
+ };
@@ -0,0 +1,12 @@
1
+ <script>import { Button } from "sveltestrap";
2
+ export let label = "click";
3
+ export let iscolor = false;
4
+ export let size = "md";
5
+ export let color = "primary";
6
+ </script>
7
+
8
+ <Button color = {iscolor ? 'primary' : 'danger'}
9
+ class={`btn btn-${color} btn-${size}`}
10
+ >
11
+ {label}
12
+ </Button>
@@ -0,0 +1,19 @@
1
+ import { SvelteComponentTyped } from "svelte";
2
+ declare const __propDef: {
3
+ props: {
4
+ label?: string | undefined;
5
+ iscolor?: boolean | undefined;
6
+ size?: string | undefined;
7
+ color?: string | undefined;
8
+ };
9
+ events: {
10
+ [evt: string]: CustomEvent<any>;
11
+ };
12
+ slots: {};
13
+ };
14
+ export type ButtonProps = typeof __propDef.props;
15
+ export type ButtonEvents = typeof __propDef.events;
16
+ export type ButtonSlots = typeof __propDef.slots;
17
+ export default class Button extends SvelteComponentTyped<ButtonProps, ButtonEvents, ButtonSlots> {
18
+ }
19
+ export {};
@@ -0,0 +1,6 @@
1
+ <footer class="main-footer p-10 d-flex flex-row align-items-center justify-content-between ">
2
+ <div class="copy-right">
3
+ All rights reserved
4
+ <i class="ml-2 text-secondary ">Version 0.0.1</i>
5
+ </div>
6
+ </footer>
@@ -0,0 +1,23 @@
1
+ /** @typedef {typeof __propDef.props} FooterProps */
2
+ /** @typedef {typeof __propDef.events} FooterEvents */
3
+ /** @typedef {typeof __propDef.slots} FooterSlots */
4
+ export default class Footer extends SvelteComponentTyped<{
5
+ [x: string]: never;
6
+ }, {
7
+ [evt: string]: CustomEvent<any>;
8
+ }, {}> {
9
+ }
10
+ export type FooterProps = typeof __propDef.props;
11
+ export type FooterEvents = typeof __propDef.events;
12
+ export type FooterSlots = typeof __propDef.slots;
13
+ import { SvelteComponentTyped } from "svelte";
14
+ declare const __propDef: {
15
+ props: {
16
+ [x: string]: never;
17
+ };
18
+ events: {
19
+ [evt: string]: CustomEvent<any>;
20
+ };
21
+ slots: {};
22
+ };
23
+ export {};
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1,10 @@
1
+ import LayOut from "./LayOut.svelte";
2
+ import { render, cleanup } from '@testing-library/svelte';
3
+ beforeEach(cleanup);
4
+ describe('LayOut', () => {
5
+ test('should render correctly', () => {
6
+ const { container } = render(LayOut);
7
+ const component = container.querySelector('.wrapper');
8
+ expect(component && component.className).toBe('wrapper');
9
+ });
10
+ });
@@ -0,0 +1,40 @@
1
+ import LayOut from '../../index';
2
+ declare const _default: {
3
+ title: string;
4
+ tags: string[];
5
+ component: typeof LayOut;
6
+ parameters: {
7
+ controls: {
8
+ exclude: RegExp;
9
+ };
10
+ };
11
+ argTypes: {
12
+ class: {
13
+ control: boolean;
14
+ table: {
15
+ disable: boolean;
16
+ };
17
+ };
18
+ 'default ': {
19
+ description: string;
20
+ table: {
21
+ category: string;
22
+ type: {
23
+ summary: string;
24
+ };
25
+ defaultValue: {
26
+ summary: string;
27
+ };
28
+ };
29
+ };
30
+ };
31
+ };
32
+ export default _default;
33
+ export declare const Layout: ({ ...args }: {
34
+ [x: string]: any;
35
+ }) => {
36
+ Component: typeof LayOut;
37
+ props: {
38
+ [x: string]: any;
39
+ };
40
+ };
@@ -0,0 +1,36 @@
1
+ import LayOut from '../../index';
2
+ export default {
3
+ title: 'FMS/LayOut',
4
+ tags: ['autodocs'],
5
+ component: LayOut,
6
+ parameters: {
7
+ controls: {
8
+ exclude: /^(default)$/g
9
+ }
10
+ },
11
+ argTypes: {
12
+ class: {
13
+ control: false,
14
+ table: {
15
+ disable: true
16
+ }
17
+ },
18
+ 'default ': {
19
+ description: 'This is the default content slot.',
20
+ table: {
21
+ category: 'slots',
22
+ type: {
23
+ summary: 'any'
24
+ },
25
+ defaultValue: {
26
+ summary: 'empty'
27
+ }
28
+ }
29
+ }
30
+ },
31
+ };
32
+ const Template = ({ ...args }) => ({
33
+ Component: LayOut,
34
+ props: args
35
+ });
36
+ export const Layout = Template.bind({});
@@ -0,0 +1,13 @@
1
+ <script>import Footer from "./Footer.svelte";
2
+ </script>
3
+
4
+ <section >
5
+ <div class="wrapper">
6
+ <div class="content-wrapper">
7
+ <slot />
8
+ </div>
9
+ <div>
10
+ <Footer />
11
+ </div>
12
+ </div>
13
+ </section>
@@ -0,0 +1,16 @@
1
+ import { SvelteComponentTyped } from "svelte";
2
+ declare const __propDef: {
3
+ props: Record<string, never>;
4
+ events: {
5
+ [evt: string]: CustomEvent<any>;
6
+ };
7
+ slots: {
8
+ default: {};
9
+ };
10
+ };
11
+ export type LayOutProps = typeof __propDef.props;
12
+ export type LayOutEvents = typeof __propDef.events;
13
+ export type LayOutSlots = typeof __propDef.slots;
14
+ export default class LayOut extends SvelteComponentTyped<LayOutProps, LayOutEvents, LayOutSlots> {
15
+ }
16
+ export {};
package/index.d.ts ADDED
@@ -0,0 +1,5 @@
1
+ import './app.scss';
2
+ import Layout from './components/lay-out/LayOut.svelte';
3
+ import Button from './components/Button/Button.svelte';
4
+ export { Button };
5
+ export default Layout;
package/index.js ADDED
@@ -0,0 +1,6 @@
1
+ // Reexport your entry components here
2
+ import './app.scss';
3
+ import Layout from './components/lay-out/LayOut.svelte';
4
+ import Button from './components/Button/Button.svelte';
5
+ export { Button };
6
+ export default Layout;
package/package.json ADDED
@@ -0,0 +1,55 @@
1
+ {
2
+ "name": "@enki-tek/fms-web-components",
3
+ "version": "0.0.1",
4
+ "devDependencies": {
5
+ "@storybook/addon-essentials": "^7.6.14",
6
+ "@storybook/addon-interactions": "^7.6.14",
7
+ "@storybook/addon-links": "^7.6.14",
8
+ "@storybook/blocks": "^7.6.14",
9
+ "@storybook/svelte": "^7.6.14",
10
+ "@storybook/sveltekit": "^7.6.14",
11
+ "@storybook/test": "^7.6.14",
12
+ "@sveltejs/adapter-auto": "^1.0.0-next.90",
13
+ "@sveltejs/kit": "^1.0.0-next.587",
14
+ "@sveltejs/package": "^1.0.0-next.6",
15
+ "@testing-library/svelte": "^4.1.0",
16
+ "@vitest/coverage-v8": "^1.2.2",
17
+ "@vitest/ui": "^1.2.2",
18
+ "eslint": "^8.28.0",
19
+ "eslint-config-prettier": "^8.5.0",
20
+ "eslint-plugin-storybook": "^0.6.15",
21
+ "eslint-plugin-svelte3": "^4.0.0",
22
+ "jsdom": "^24.0.0",
23
+ "prettier": "^2.8.0",
24
+ "prettier-plugin-svelte": "^2.8.1",
25
+ "react": "^18.2.0",
26
+ "react-dom": "^18.2.0",
27
+ "storybook": "^7.6.14",
28
+ "svelte": "^3.54.0",
29
+ "svelte-check": "^2.9.2",
30
+ "svelte-i18n": "^3.6.0",
31
+ "sveltestrap": "^5.10.0",
32
+ "tslib": "^2.4.1",
33
+ "typescript": "^4.9.3",
34
+ "vite": "^4.0.0",
35
+ "vitest": "^1.2.2"
36
+ },
37
+ "type": "module",
38
+ "dependencies": {
39
+ "@vitejs/plugin-basic-ssl": "^1.0.1",
40
+ "bootstrap": "^5.3.2",
41
+ "qr-scanner": "^1.4.2"
42
+ },
43
+ "exports": {
44
+ "./package.json": "./package.json",
45
+ "./app.scss": "./app.scss",
46
+ "./components/Button/Button.stories": "./components/Button/Button.stories.js",
47
+ "./components/Button/Button.svelte": "./components/Button/Button.svelte",
48
+ "./components/lay-out/Footer.svelte": "./components/lay-out/Footer.svelte",
49
+ "./components/lay-out/LayOut.spec": "./components/lay-out/LayOut.spec.js",
50
+ "./components/lay-out/LayOut.stories": "./components/lay-out/LayOut.stories.js",
51
+ "./components/lay-out/LayOut.svelte": "./components/lay-out/LayOut.svelte",
52
+ ".": "./index.js"
53
+ },
54
+ "svelte": "./index.js"
55
+ }