@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 +39 -0
- package/app.scss +1 -0
- package/components/Button/Button.stories.d.ts +48 -0
- package/components/Button/Button.stories.js +43 -0
- package/components/Button/Button.svelte +12 -0
- package/components/Button/Button.svelte.d.ts +19 -0
- package/components/lay-out/Footer.svelte +6 -0
- package/components/lay-out/Footer.svelte.d.ts +23 -0
- package/components/lay-out/LayOut.spec.d.ts +1 -0
- package/components/lay-out/LayOut.spec.js +10 -0
- package/components/lay-out/LayOut.stories.d.ts +40 -0
- package/components/lay-out/LayOut.stories.js +36 -0
- package/components/lay-out/LayOut.svelte +13 -0
- package/components/lay-out/LayOut.svelte.d.ts +16 -0
- package/index.d.ts +5 -0
- package/index.js +6 -0
- package/package.json +55 -0
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,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,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
package/index.js
ADDED
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
|
+
}
|