bonkers-ui 1.0.45 → 1.0.47
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/.github/workflows/deploy.yaml +1 -1
- package/package.json +77 -75
- package/publish.js +45 -0
- package/src/components/ui-alert/ui-alert.stories.ts +0 -1
- package/src/components/ui-badge/ui-badge.vue +5 -5
- package/src/components/ui-ber-rank/_types.ts +5 -0
- package/src/components/ui-ber-rank/index.ts +1 -0
- package/src/components/ui-ber-rank/ui-ber-rank.stories.ts +11 -16
- package/src/components/ui-ber-rank/ui-ber-rank.vue +34 -8
- package/src/components/ui-input-range/ui-input-range.vue +13 -3
- package/src/components/ui-list-item/ui-list-item.stories.ts +8 -14
- package/src/components/ui-list-item/ui-list-item.vue +5 -3
- package/src/components/ui-result-card-range/ui-result-card-range.vue +5 -5
package/package.json
CHANGED
|
@@ -1,76 +1,78 @@
|
|
|
1
1
|
{
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
"
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
}
|
|
2
|
+
"name": "bonkers-ui",
|
|
3
|
+
"version": "v1.0.47",
|
|
4
|
+
"private": false,
|
|
5
|
+
"scripts": {
|
|
6
|
+
"storybook": "storybook dev -p 6006",
|
|
7
|
+
"build-storybook": "storybook build",
|
|
8
|
+
"lint:script": "eslint --fix './src/**/*.{ts,tsx,vue}'",
|
|
9
|
+
"lint:style": "stylelint --fix './src/**/*.{css,scss,vue}'",
|
|
10
|
+
"lint:markup": "vue-tsc --noEmit",
|
|
11
|
+
"deploy": "gh-pages -d storybook-static",
|
|
12
|
+
"typecheck": "tsc --noEmit && vue-tsc --noEmit",
|
|
13
|
+
"test": "vitest run",
|
|
14
|
+
"i": "yarn install --frozen-lockfile"
|
|
15
|
+
},
|
|
16
|
+
"dependencies": {
|
|
17
|
+
"@fortawesome/fontawesome-svg-core": "^6.4.0",
|
|
18
|
+
"@fortawesome/free-brands-svg-icons": "^6.4.0",
|
|
19
|
+
"@fortawesome/free-regular-svg-icons": "^6.4.0",
|
|
20
|
+
"@fortawesome/free-solid-svg-icons": "^6.4.0",
|
|
21
|
+
"@fortawesome/vue-fontawesome": "^3.0.3",
|
|
22
|
+
"bent": "^7.3.12",
|
|
23
|
+
"simple-git": "^3.18.0",
|
|
24
|
+
"storybook-addon-designs": "^6.3.1",
|
|
25
|
+
"vue": "^3.2.47",
|
|
26
|
+
"vue-router": "^4.1.6"
|
|
27
|
+
},
|
|
28
|
+
"devDependencies": {
|
|
29
|
+
"@storybook/addon-essentials": "^7.0.4",
|
|
30
|
+
"@storybook/addon-links": "^7.0.4",
|
|
31
|
+
"@storybook/addon-mdx-gfm": "^7.0.4",
|
|
32
|
+
"@storybook/vue3": "^7.0.4",
|
|
33
|
+
"@storybook/vue3-vite": "^7.0.4",
|
|
34
|
+
"@typescript-eslint/eslint-plugin": "^5.58.0",
|
|
35
|
+
"@typescript-eslint/parser": "^5.58.0",
|
|
36
|
+
"@vitejs/plugin-vue": "^4.1.0",
|
|
37
|
+
"@vue/eslint-config-typescript": "^11.0.2",
|
|
38
|
+
"@vue/test-utils": "^2.3.2",
|
|
39
|
+
"eslint": "8.38.0",
|
|
40
|
+
"eslint-plugin-storybook": "^0.6.11",
|
|
41
|
+
"eslint-plugin-vue": "^9.10.0",
|
|
42
|
+
"gh-pages": "^5.0.0",
|
|
43
|
+
"husky": "4.3.8",
|
|
44
|
+
"jsdom": "^21.1.1",
|
|
45
|
+
"lint-staged": "^13.2.1",
|
|
46
|
+
"postcss": "^8.4.21",
|
|
47
|
+
"postcss-html": "^1.4.1",
|
|
48
|
+
"react": "^18.2.0",
|
|
49
|
+
"react-dom": "^18.2.0",
|
|
50
|
+
"storybook": "^7.0.4",
|
|
51
|
+
"storybook-tailwind-dark-mode": "^1.0.16",
|
|
52
|
+
"stylelint": "^15.4.0",
|
|
53
|
+
"stylelint-config-recommended": "^11.0.0",
|
|
54
|
+
"stylelint-config-recommended-vue": "^1.4.0",
|
|
55
|
+
"stylelint-config-standard": "^32.0.0",
|
|
56
|
+
"tailwindcss": "^3.3.1",
|
|
57
|
+
"ts-node": "^10.9.1",
|
|
58
|
+
"typescript": "^5.0.4",
|
|
59
|
+
"vite": "^4.2.1",
|
|
60
|
+
"vitest": "^0.30.1",
|
|
61
|
+
"vue-eslint-parser": "^9.1.1",
|
|
62
|
+
"vue-loader": "^17.0.1",
|
|
63
|
+
"vue-tsc": "^1.2.0"
|
|
64
|
+
},
|
|
65
|
+
"lint-staged": {
|
|
66
|
+
"*.{ts,tsx,vue}": [
|
|
67
|
+
"eslint --fix",
|
|
68
|
+
"bash -c 'yarn typecheck'"
|
|
69
|
+
],
|
|
70
|
+
"*.{css,vue,tsx}": "stylelint --fix"
|
|
71
|
+
},
|
|
72
|
+
"husky": {
|
|
73
|
+
"hooks": {
|
|
74
|
+
"pre-commit": "yarn typecheck && yarn lint-staged && yarn test"
|
|
75
|
+
}
|
|
76
|
+
},
|
|
77
|
+
"license": "MIT"
|
|
78
|
+
}
|
package/publish.js
ADDED
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
const fs = require("fs");
|
|
2
|
+
const path = require("path");
|
|
3
|
+
const { execSync } = require("child_process");
|
|
4
|
+
|
|
5
|
+
const DIR_VARIABLE = path.join(process.cwd(), "./");
|
|
6
|
+
const VERSION_TO_UPDATE = "patch";
|
|
7
|
+
|
|
8
|
+
const setVersionToJson = version => {
|
|
9
|
+
const json = JSON.parse(fs.readFileSync(path.join(DIR_VARIABLE, "package.json"), "utf8"));
|
|
10
|
+
|
|
11
|
+
json.version = version;
|
|
12
|
+
|
|
13
|
+
fs.writeFileSync(path.join(DIR_VARIABLE, "package.json"), JSON.stringify(json, null, 4));
|
|
14
|
+
};
|
|
15
|
+
|
|
16
|
+
const run = async () => {
|
|
17
|
+
if (!process.env.NPM_AUTH_TOKEN) throw new Error("Merge-release requires NPM_AUTH_TOKEN");
|
|
18
|
+
|
|
19
|
+
const pkg = require(path.join(DIR_VARIABLE, "package.json"));
|
|
20
|
+
|
|
21
|
+
const currentVersion = execSync(`npm view ${pkg.name} version`, { cwd: DIR_VARIABLE }).toString();
|
|
22
|
+
setVersionToJson(currentVersion);
|
|
23
|
+
|
|
24
|
+
let newVersion = execSync(`npm version --no-git-tag-version ${VERSION_TO_UPDATE}`, { cwd: DIR_VARIABLE }).toString();
|
|
25
|
+
newVersion = newVersion.replace(/(\r\n|\n|\r)/gm, "");
|
|
26
|
+
|
|
27
|
+
setVersionToJson(newVersion);
|
|
28
|
+
|
|
29
|
+
console.log("new version:", newVersion);
|
|
30
|
+
|
|
31
|
+
execSync(`npm config set _authToken=${process.env.NPM_AUTH_TOKEN}`);
|
|
32
|
+
execSync(`npm publish --verbose`, DIR_VARIABLE);
|
|
33
|
+
execSync(`git checkout package.json`);
|
|
34
|
+
|
|
35
|
+
execSync(`git tag ${newVersion}`);
|
|
36
|
+
|
|
37
|
+
execSync("git push --tags");
|
|
38
|
+
|
|
39
|
+
};
|
|
40
|
+
|
|
41
|
+
try{
|
|
42
|
+
run();
|
|
43
|
+
}catch(e){
|
|
44
|
+
console.error(e, "<------=");
|
|
45
|
+
}
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div
|
|
3
|
-
class="ui-badge rounded-full flex items-center content-center gap-xxs"
|
|
3
|
+
class="ui-badge rounded-full flex items-center content-center gap-xxs text-white"
|
|
4
4
|
:class="[
|
|
5
5
|
(!size || size === EBadgeSize.SMALL) && 'px-xs py-xxs',
|
|
6
|
-
(!kind || kind === EBadgeKind.PRIMARY) && 'bg-primary-
|
|
6
|
+
(!kind || kind === EBadgeKind.PRIMARY) && 'bg-primary-600',
|
|
7
7
|
|
|
8
|
-
kind === EBadgeKind.ERROR && 'bg-error-
|
|
9
|
-
kind === EBadgeKind.ACCENT && 'bg-accent-
|
|
8
|
+
kind === EBadgeKind.ERROR && 'bg-error-600',
|
|
9
|
+
kind === EBadgeKind.ACCENT && 'bg-accent-600',
|
|
10
10
|
|
|
11
11
|
size === EBadgeSize.MEDIUM && 'px-xs py-xs',
|
|
12
12
|
size === EBadgeSize.LARGE && 'px-sm py-xs',
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
<ui-typography
|
|
23
23
|
v-if="slots.default"
|
|
24
24
|
:size="getBadgeSize"
|
|
25
|
-
:weight="ETextWeight.
|
|
25
|
+
:weight="ETextWeight.REGULAR"
|
|
26
26
|
class="whitespace-nowrap"
|
|
27
27
|
:class="[
|
|
28
28
|
elipsis && 'overflow-hidden overflow-ellipsis',
|
|
@@ -1,5 +1,7 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
1
|
+
import type { Meta } from "@storybook/vue3";
|
|
2
|
+
|
|
3
|
+
import { EBerSize } from "./_types";
|
|
4
|
+
import UiBerRank from "../ui-ber-rank";
|
|
3
5
|
|
|
4
6
|
export default {
|
|
5
7
|
title: "Components/ui-ber-rank",
|
|
@@ -8,23 +10,16 @@ export default {
|
|
|
8
10
|
rank:{
|
|
9
11
|
control: { type: "number" },
|
|
10
12
|
description: "The Element rank from 0 to 15",
|
|
13
|
+
},
|
|
14
|
+
size: {
|
|
15
|
+
control: { type: "select" },
|
|
16
|
+
options: Object.values(EBerSize),
|
|
17
|
+
description: "The size of the rank",
|
|
11
18
|
}
|
|
12
19
|
},
|
|
13
20
|
args: {
|
|
14
21
|
rank: 0,
|
|
15
22
|
},
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
type TComponentProps = InstanceType<typeof UiBerRank>["$props"];
|
|
19
|
-
|
|
20
|
-
const Template: Story<TComponentProps> = (args) => ({
|
|
21
|
-
components: { UiBerRank },
|
|
22
|
-
setup() {
|
|
23
|
-
return { args };
|
|
24
|
-
},
|
|
25
|
-
template: `
|
|
26
|
-
<ui-ber-rank v-bind="args" />
|
|
27
|
-
`,
|
|
28
|
-
});
|
|
23
|
+
}satisfies Meta<typeof UiBerRank>;
|
|
29
24
|
|
|
30
|
-
export const Default =
|
|
25
|
+
export const Default = {};
|
|
@@ -2,7 +2,11 @@
|
|
|
2
2
|
<div class="ui-ber-rank flex">
|
|
3
3
|
<div class="ui-ber-rank__icon-wrapper relative">
|
|
4
4
|
<svg
|
|
5
|
-
class="
|
|
5
|
+
class="text-secondary"
|
|
6
|
+
:class="[
|
|
7
|
+
size === EBerSize.SMALL && 'ui-ber-rank__icon_small',
|
|
8
|
+
size === EBerSize.MEDIUM && 'ui-ber-rank__icon_medium',
|
|
9
|
+
]"
|
|
6
10
|
viewBox="0 0 160 60"
|
|
7
11
|
fill="none"
|
|
8
12
|
xmlns="http://www.w3.org/2000/svg"
|
|
@@ -16,7 +20,7 @@
|
|
|
16
20
|
<ui-typography
|
|
17
21
|
:kind="EColors.WHITE"
|
|
18
22
|
:weight="ETextWeight.BOLD"
|
|
19
|
-
:size="
|
|
23
|
+
:size="textSize"
|
|
20
24
|
:text-transform="ETextTransform.UPPERCASE"
|
|
21
25
|
class="absolute top-0 left-0 w-full h-full flex justify-center items-center"
|
|
22
26
|
>
|
|
@@ -27,7 +31,10 @@
|
|
|
27
31
|
<div class="ui-ber-rank__icon-wrapper relative">
|
|
28
32
|
<ui-typography :kind="berRankDictionary[+rank]?.color || berRankDictionary[0].color">
|
|
29
33
|
<svg
|
|
30
|
-
class="
|
|
34
|
+
:class="[
|
|
35
|
+
size === EBerSize.SMALL && 'ui-ber-rank__icon_small',
|
|
36
|
+
size === EBerSize.MEDIUM && 'ui-ber-rank__icon_medium',
|
|
37
|
+
]"
|
|
31
38
|
viewBox="0 0 106 60"
|
|
32
39
|
fill="none"
|
|
33
40
|
xmlns="http://www.w3.org/2000/svg"
|
|
@@ -43,7 +50,7 @@
|
|
|
43
50
|
<ui-typography
|
|
44
51
|
:kind="EColors.WHITE"
|
|
45
52
|
:weight="ETextWeight.BOLD"
|
|
46
|
-
:size="
|
|
53
|
+
:size="textSize"
|
|
47
54
|
:text-transform="ETextTransform.UPPERCASE"
|
|
48
55
|
class="absolute top-0 left-0 w-full h-full flex justify-center items-center"
|
|
49
56
|
>
|
|
@@ -54,17 +61,36 @@
|
|
|
54
61
|
</template>
|
|
55
62
|
|
|
56
63
|
<script lang="ts" setup>
|
|
64
|
+
import { computed } from "vue";
|
|
57
65
|
import UiTypography, { ETextWeight, ETypographySizes, ETextTransform } from "../ui-typography";
|
|
58
66
|
import { EColors } from "../../_types/colors";
|
|
59
|
-
import { berRankDictionary, type TBerPropNumber, type TBerPropString }from"./_types";
|
|
67
|
+
import { berRankDictionary, type TBerPropNumber, type TBerPropString, EBerSize }from"./_types";
|
|
60
68
|
|
|
61
|
-
defineProps<{
|
|
69
|
+
const props = withDefaults(defineProps<{
|
|
62
70
|
rank: TBerPropNumber | TBerPropString | number; // from 0 to 15
|
|
63
|
-
|
|
71
|
+
size?: EBerSize
|
|
72
|
+
}>(), {
|
|
73
|
+
size: EBerSize.MEDIUM
|
|
74
|
+
});
|
|
75
|
+
|
|
76
|
+
const textSize = computed(()=>{
|
|
77
|
+
switch(props.size) {
|
|
78
|
+
case EBerSize.SMALL:
|
|
79
|
+
return ETypographySizes.SM;
|
|
80
|
+
case EBerSize.MEDIUM:
|
|
81
|
+
return ETypographySizes.XXXL;
|
|
82
|
+
default:
|
|
83
|
+
return ETypographySizes.XXXL;
|
|
84
|
+
}
|
|
85
|
+
});
|
|
64
86
|
</script>
|
|
65
87
|
|
|
66
88
|
<style>
|
|
67
|
-
.ui-ber-
|
|
89
|
+
.ui-ber-rank__icon_medium {
|
|
68
90
|
height: 60px;
|
|
69
91
|
}
|
|
92
|
+
|
|
93
|
+
.ui-ber-rank__icon_small {
|
|
94
|
+
height: 30px;
|
|
95
|
+
}
|
|
70
96
|
</style>
|
|
@@ -23,7 +23,19 @@
|
|
|
23
23
|
/>
|
|
24
24
|
|
|
25
25
|
<div
|
|
26
|
-
class="
|
|
26
|
+
class="
|
|
27
|
+
ui-input-range__thumb
|
|
28
|
+
w-xs
|
|
29
|
+
h-xs
|
|
30
|
+
bg-primary
|
|
31
|
+
absolute
|
|
32
|
+
border-white
|
|
33
|
+
rounded-full
|
|
34
|
+
box-content
|
|
35
|
+
-translate-y-1/2
|
|
36
|
+
-translate-x-1/2
|
|
37
|
+
pointer-events-none
|
|
38
|
+
"
|
|
27
39
|
:style="{left: getPercentage + '%'}"
|
|
28
40
|
/>
|
|
29
41
|
</div>
|
|
@@ -110,8 +122,6 @@
|
|
|
110
122
|
|
|
111
123
|
.ui-input-range__thumb {
|
|
112
124
|
top: 50%;
|
|
113
|
-
height: var(--xs);
|
|
114
|
-
width: var(--xs);
|
|
115
125
|
border-width: 12px;
|
|
116
126
|
box-shadow: 0 0 0 4px var(--color-primary);
|
|
117
127
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import UiListItem from "
|
|
2
|
-
import type { Story } from "@storybook/vue3";
|
|
1
|
+
import UiListItem from "../ui-list-item";
|
|
3
2
|
import { EListItemSize, EListItemSpacing, EListItemTypes } from "./_types";
|
|
3
|
+
import { ICON_DEFAULT } from "./../../CONSTANTS";
|
|
4
4
|
|
|
5
5
|
export default {
|
|
6
6
|
title: "Components/ui-list-item",
|
|
@@ -39,30 +39,24 @@ export default {
|
|
|
39
39
|
},
|
|
40
40
|
};
|
|
41
41
|
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
const Template: Story<TComponentProps> = (args) => ({
|
|
42
|
+
export const Default = (args) => ({
|
|
45
43
|
components: { UiListItem },
|
|
46
44
|
setup() {
|
|
47
|
-
return { args };
|
|
45
|
+
return { args, ICON_DEFAULT };
|
|
48
46
|
},
|
|
49
47
|
template:/*html*/`
|
|
50
48
|
<ul>
|
|
51
|
-
<ui-list-item v-bind="args" :icon="
|
|
52
|
-
{{args.slot}}
|
|
53
|
-
</ui-list-item>
|
|
49
|
+
<ui-list-item v-bind="args" :icon="ICON_DEFAULT" title="title only" />
|
|
54
50
|
|
|
55
|
-
<ui-list-item
|
|
51
|
+
<ui-list-item :icon="ICON_DEFAULT" :spacing="args.spacing">
|
|
56
52
|
text only
|
|
57
53
|
</ui-list-item>
|
|
58
54
|
|
|
59
|
-
<ui-list-item v-bind="args" v-for= "item in 5" :key="item" :icon="
|
|
55
|
+
<ui-list-item v-bind="args" v-for= "item in 5" :key="item" :icon="ICON_DEFAULT">
|
|
60
56
|
{{ args.title }}
|
|
61
57
|
</ui-list-item>
|
|
62
58
|
|
|
63
|
-
<ui-list-item v-bind="args"
|
|
59
|
+
<ui-list-item v-bind="args" :icon="ICON_DEFAULT" />
|
|
64
60
|
</ul>
|
|
65
61
|
`,
|
|
66
62
|
});
|
|
67
|
-
|
|
68
|
-
export const Default = Template.bind({});
|
|
@@ -23,16 +23,18 @@
|
|
|
23
23
|
/>
|
|
24
24
|
</slot>
|
|
25
25
|
|
|
26
|
-
<
|
|
26
|
+
<ui-typography
|
|
27
|
+
:weight="ETextWeight.LIGHT"
|
|
28
|
+
class="grid gap-sm"
|
|
29
|
+
>
|
|
27
30
|
<ui-typography
|
|
28
31
|
v-if="title"
|
|
29
32
|
:weight="ETextWeight.SEMI_BOLD"
|
|
30
33
|
>
|
|
31
34
|
{{ title }}
|
|
32
|
-
|
|
33
35
|
</ui-typography>
|
|
34
36
|
<slot />
|
|
35
|
-
</
|
|
37
|
+
</ui-typography>
|
|
36
38
|
</li>
|
|
37
39
|
</template>
|
|
38
40
|
|
|
@@ -6,10 +6,10 @@
|
|
|
6
6
|
flex
|
|
7
7
|
flex-col
|
|
8
8
|
items-center
|
|
9
|
-
border
|
|
9
|
+
border-4
|
|
10
10
|
border-secondary-alt-300
|
|
11
11
|
bg-secondary-alt-200
|
|
12
|
-
rounded-
|
|
12
|
+
rounded-3xl
|
|
13
13
|
text-secondary-500 p-md"
|
|
14
14
|
>
|
|
15
15
|
<ui-icon
|
|
@@ -18,16 +18,16 @@
|
|
|
18
18
|
:size="ESize.MD"
|
|
19
19
|
:icon-name="iconName"
|
|
20
20
|
/>
|
|
21
|
-
<ui-typography
|
|
21
|
+
<ui-typography
|
|
22
22
|
v-if="title"
|
|
23
23
|
class="mb-xs"
|
|
24
24
|
:size="ETypographySizes.MD"
|
|
25
|
-
:weight="ETextWeight.
|
|
25
|
+
:weight="ETextWeight.SEMI_BOLD"
|
|
26
26
|
:align="ETextAlign.CENTER"
|
|
27
27
|
>
|
|
28
28
|
{{ title }}
|
|
29
29
|
</ui-typography>
|
|
30
|
-
|
|
30
|
+
|
|
31
31
|
<slot />
|
|
32
32
|
</div>
|
|
33
33
|
</template>
|