bonkers-ui 1.0.61 → 1.0.63

package/src/_types/colors.ts

@@ -1,58 +0,0 @@
-export enum EColors {
-	WHITE = "--color-white",
-	BLACK = "--color-black",
-	TRANSPARENT = "--color-transparent",
-	CURRENT = "--color-current",
-
-	PRIMARY = "--color-primary",
-	PRIMARY_300 = "--color-primary-300",
-	PRIMARY_400 = "--color-primary-400",
-	PRIMARY_500 = "--color-primary-500",
-	PRIMARY_600 = "--color-primary-600",
-	PRIMARY_700 = "--color-primary-700",
-
-	PRIMARY_ALT = "--color-primary-alt",
-	PRIMARY_ALT_300 = "--color-primary-alt-300",
-	PRIMARY_ALT_400 = "--color-primary-alt-400",
-	PRIMARY_ALT_500 = "--color-primary-alt-500",
-	PRIMARY_ALT_600 = "--color-primary-alt-600",
-	PRIMARY_ALT_700 = "--color-primary-alt-700",
-
-	SECONDARY = "--color-secondary",
-	SECONDARY_300 = "--color-secondary-300",
-	SECONDARY_400 = "--color-secondary-400",
-	SECONDARY_500 = "--color-secondary-500",
-	SECONDARY_600 = "--color-secondary-600",
-	SECONDARY_700 = "--color-secondary-700",
-
-	WARNING = "--color-warning",
-	WARNING_300 = "--color-warning-300",
-	WARNING_400 = "--color-warning-400",
-	WARNING_500 = "--color-warning-500",
-	WARNING_600 = "--color-warning-600",
-	WARNING_700 = "--color-warning-700",
-
-	ERROR = "--color-error",
-	ERROR_300 = "--color-error-300",
-	ERROR_400 = "--color-error-400",
-	ERROR_500 = "--color-error-500",
-	ERROR_600 = "--color-error-600",
-	ERROR_700 = "--color-error-700",
-
-	ACCENT = "--color-accent",
-	ACCENT_300 = "--color-accent-300",
-	ACCENT_500 = "--color-accent-500",
-	ACCENT_600 = "--color-accent-600",
-	ACCENT_700 = "--color-accent-700",
-
-	ACCENT_ALT = "--color-accent-alt",
-	ACCENT_ALT_500 = "--color-accent-alt-500",
-
-	SECONDARY_ALT = "--color-secondary-alt",
-	SECONDARY_ALT_200 = "--color-secondary-alt-200",
-	SECONDARY_ALT_300 = "--color-secondary-alt-300",
-	SECONDARY_ALT_400 = "--color-secondary-alt-400",
-	SECONDARY_ALT_500 = "--color-secondary-alt-500",
-	SECONDARY_ALT_600 = "--color-secondary-alt-600",
-	SECONDARY_ALT_700 = "--color-secondary-alt-700",
-}

package/src/_types/sizing.ts

@@ -1,9 +0,0 @@
-export enum ESize {
-	XXS = "xxs",
-	XS = "xs",
-	SM = "sm",
-	MD = "md",
-	LG = "lg",
-	XL = "xl",
-	XXL = "xxl",
-}

package/src/components/ui-alert/_types.ts

@@ -1,6 +0,0 @@
-export enum EAlertTypes {
-	PRIMARY = "PRIMARY",
-	SECONDARY = "SECONDARY",
-	ERROR = "ERROR",
-	WARNING = "WARNING",
-}

package/src/components/ui-alert/index.ts

@@ -1,2 +0,0 @@
-export { default } from "./ui-alert.vue";
-export { EAlertTypes } from "./_types";

package/src/components/ui-alert/ui-alert.stories.ts

@@ -1,31 +0,0 @@
-import type { Meta } from "@storybook/vue3";
-import { ICON_DEFAULT } from "./../../CONSTANTS";
-import { EAlertTypes } from "./_types";
-import UiAlert from "../ui-alert";
-
-export default {
-	title: "Components/ui-alert",
-	component: UiAlert,
-
-	argTypes: {
-		kind: {
-			control: {
-				type: "select" 
-			},
-			options: Object.values(EAlertTypes),
-			description: "The button kinds",
-		},
-		default: {
-			control: {
-				type: "text" 
-			},
-		}
-	},
-} satisfies Meta<typeof UiAlert>;
-
-export const Default = {
-	args: {
-		icon: ICON_DEFAULT,
-		default: "This is a default slot"
-	},
-};

package/src/components/ui-alert/ui-alert.vue

@@ -1,40 +0,0 @@
-<template>
-	<div
-		class="ui-alert flex gap-sm rounded-lg border bg-white p-sm"
-		:class="[
-			(!kind || kind === EAlertTypes.PRIMARY) && 'border-primary',
-			kind === EAlertTypes.WARNING && 'border-warning',
-			kind === EAlertTypes.ERROR && 'border-error',
-			kind === EAlertTypes.SECONDARY && 'border-secondary'
-		]"
-	>
-		<ui-icon
-			:icon-name="icon"
-			:size="ESize.SM"
-			:class="[
-				(!kind || kind === EAlertTypes.PRIMARY) && 'text-primary',
-				kind === EAlertTypes.WARNING && 'text-warning',
-				kind === EAlertTypes.ERROR && 'text-error',
-				kind === EAlertTypes.SECONDARY && 'text-secondary',
-			]"
-		/>
-		<ui-typography
-			:size="ETypographySizes.XS"
-			line-height
-		>
-			<slot />
-		</ui-typography>
-	</div>
-</template>
-
-<script lang="ts" setup>
-	import UiTypography, { ETypographySizes } from "../ui-typography";
-	import UiIcon, { type TIconName } from "../ui-icon";
-	import { ESize } from "../../_types/sizing";
-	import { EAlertTypes } from "./_types";
-
-	defineProps<{
-		icon: TIconName
-		kind?: EAlertTypes
-	}>();
-</script>

package/src/components/ui-badge/_typings.ts

@@ -1,11 +0,0 @@
-export enum EBadgeSize {
-	SMALL = "small",
-	MEDIUM = "medium",
-	LARGE = "large",
-}
-
-export enum EBadgeKind {
-	PRIMARY = "primary",
-	ERROR = "error",
-	ACCENT = "accent",
-}

package/src/components/ui-badge/index.ts

@@ -1,2 +0,0 @@
-export { default } from "./ui-badge.vue";
-export { EBadgeKind, EBadgeSize } from "./_typings";

package/src/components/ui-badge/ui-badge.stories.ts

@@ -1,49 +0,0 @@
-import UiBadge from "./ui-badge.vue";
-import type { Story } from "@storybook/vue3";
-import { EBadgeKind, EBadgeSize } from "./_typings";
-
-export default {
-	title: "Components/ui-badge",
-	component: UiBadge,
-	argTypes: {
-		kind: {
-			control: {
-				type: "select" 
-			},
-			options: Object.values(EBadgeKind),
-			description: "The Element kinds",
-		},
-		size: {
-			control: {
-				type: "select" 
-			},
-			options: Object.values(EBadgeSize),
-			description: "The Element size",
-		},
-	},
-	args: {
-		slot: "default text",
-		kind: EBadgeKind.PRIMARY,
-		size: EBadgeSize.SMALL,
-	},
-};
-
-type TComponentProps = InstanceType<typeof UiBadge>["$props"];
-
-const Template: Story<TComponentProps> = (args) => ({
-	components: {
-		UiBadge 
-	},
-	setup() {
-		return {
-			args 
-		};
-	},
-	template: /*html*/`
-		<ui-badge :icon="['far', 'face-smile']" v-bind="args" class="inline-flex">
-			{{ args.slot }}
-		</ui-badge>
-	`,
-});
-
-export const Default = Template.bind({});

package/src/components/ui-badge/ui-badge.vue

@@ -1,65 +0,0 @@
-<template>
-	<div
-		class="ui-badge relative overflow-hidden text-white"
-	>
-		<div class="relative z-[1] flex content-center items-center gap-xxs px-xs py-xxs">
-			<ui-icon
-				v-if="icon"
-				:size="ESize.SM"
-				:icon-name="icon"
-			/>
-
-			<ui-typography
-				v-if="slots.default"
-				:size="getBadgeSize"
-				class="whitespace-nowrap"
-				line-height
-				:class="[
-					elipsis && 'overflow-hidden text-ellipsis',
-				]"
-			>
-				<slot />
-			</ui-typography>
-		</div>
-
-		<div
-			class="absolute left-0 top-0 h-full w-full rounded-full"
-			:class="[
-				(!kind || kind === EBadgeKind.PRIMARY) && 'bg-primary-600',
-
-				kind === EBadgeKind.ERROR && 'bg-error-600',
-				kind === EBadgeKind.ACCENT && 'bg-accent-600',
-				elipsis && 'max-w-full',
-			]"
-		/>
-	</div>
-</template>
-
-<script lang="ts" setup>
-	import { computed, useSlots } from "vue";
-	import { EBadgeKind, EBadgeSize } from "./_typings";
-	import UiIcon, { type TIconName } from "../ui-icon";
-	import { ESize } from "../../_types/sizing";
-	import UiTypography, { ETypographySizes, ETextWeight } from "../ui-typography";
-
-	const props = defineProps<{
-		size?: EBadgeSize;
-		kind?: EBadgeKind;
-		icon?: TIconName;
-		elipsis?: boolean;
-	}>();
-
-	const slots = useSlots();
-
-	const getBadgeSize = computed(()=>{
-		switch (props.size) {
-			case EBadgeSize.MEDIUM:
-				return ETypographySizes.XS;
-			case EBadgeSize.LARGE:
-				return ETypographySizes.SM;
-			case EBadgeSize.SMALL:
-			default:
-				return ETypographySizes.XXS;
-		}
-	});
-</script>

package/src/components/ui-ber-rank/_types.ts

@@ -1,82 +0,0 @@
-import { EColors } from "../../_types/colors";
-
-type Ran<T extends number> = number extends T ? number :_Range<T, []>;
-type _Range<T extends number, R extends unknown[]> = R["length"] extends T ? R[number] : _Range<T, [R["length"], ...R]>;
-
-export type TBerPropNumber = Ran<typeof berRankDictionary.length>
-export type TBerPropString = `${TBerPropNumber}`;
-export type TBerRank = typeof berRankDictionary[TBerPropNumber]["text"];
-
-export const berRankDictionary = [
-	{
-		text: "N/A",
-		color: EColors.SECONDARY_ALT,
-	},
-	{
-		text: "G",
-		color: EColors.ERROR,
-	},
-	{
-		text: "F",
-		color: EColors.WARNING,
-	},
-	{
-		text: "E2",
-		color: EColors.WARNING_600,
-	},
-	{
-		text: "E1",
-		color: EColors.WARNING_600,
-	},
-	{
-		text: "D2",
-		color: EColors.WARNING_400,
-	},
-	{
-		text: "D1",
-		color: EColors.WARNING_400,
-	},
-	{
-		text: "C3",
-		color: EColors.PRIMARY_ALT,
-	},
-	{
-		text: "C2",
-		color: EColors.PRIMARY_ALT,
-	},
-	{
-		text: "C1",
-		color: EColors.PRIMARY_ALT,
-	},
-	{
-		text: "B3",
-		color: EColors.PRIMARY_ALT_600,
-	},
-	{
-		text: "B2",
-		color: EColors.PRIMARY_ALT_600,
-	},
-	{
-		text: "B1",
-		color: EColors.PRIMARY_ALT_600,
-	},
-	{
-		text: "A3",
-		color: EColors.PRIMARY_ALT_700,
-	},
-	{
-		text: "A2",
-		color: EColors.PRIMARY_ALT_700,
-	},
-	{
-		text: "A1",
-		color: EColors.PRIMARY_ALT_700,
-	},
-] as const;
-
-export const berRanksList = berRankDictionary.map(({ text }) => text);
-
-export enum EBerSize {
-	SMALL = "small",
-	MEDIUM = "medium",
-}

package/src/components/ui-ber-rank/index.ts

@@ -1,2 +0,0 @@
-export { default } from "./ui-ber-rank.vue";
-export { EBerSize } from "./_types";

package/src/components/ui-ber-rank/ui-ber-rank.stories.ts

@@ -1,29 +0,0 @@
-import type { Meta } from "@storybook/vue3";
-
-import { EBerSize } from "./_types";
-import UiBerRank from "../ui-ber-rank";
-
-export default {
-	title: "Components/ui-ber-rank",
-	component: UiBerRank,
-	argTypes: {
-		rank: {
-			control: {
-				type: "number" 
-			},
-			description: "The Element rank from 0 to 15",
-		},
-		size: {
-			control: {
-				type: "select" 
-			},
-			options: Object.values(EBerSize),
-			description: "The size of the rank",
-		}
-	},
-	args: {
-		rank: 0,
-	},
-}satisfies Meta<typeof UiBerRank>;
-
-export const Default = {};

package/src/components/ui-ber-rank/ui-ber-rank.vue

@@ -1,96 +0,0 @@
-<template>
-	<div class="ui-ber-rank flex">
-		<div class="ui-ber-rank__icon-wrapper relative">
-			<svg
-				class="text-secondary"
-				:class="[
-					size === EBerSize.SMALL && 'ui-ber-rank__icon_small',
-					size === EBerSize.MEDIUM && 'ui-ber-rank__icon_medium',
-				]"
-				viewBox="0 0 160 60"
-				fill="none"
-				xmlns="http://www.w3.org/2000/svg"
-			>
-				<path
-					fill-rule="evenodd"
-					d="M0.279251 15.36C0.279251 9.9835 0.279251 7.29524 1.32559 5.24169C2.24597 3.43534 3.71459 1.96672 5.52094 1.04634C7.5745 0 10.2627 0 15.6393 0H139.208C143.189 0 145.18 0 146.874 0.666121C148.369 1.25435 149.693 2.20864 150.724 3.44151C151.892 4.83764 152.521 6.72601 153.78 10.5027L158.93 25.9523C159.431 27.4541 159.681 28.205 159.78 28.9732C159.869 29.6549 159.869 30.3451 159.78 31.0268C159.681 31.795 159.431 32.5459 158.93 34.0477L153.78 49.4973C152.521 53.274 151.892 55.1624 150.724 56.5585C149.693 57.7914 148.369 58.7457 146.874 59.3339C145.18 60 143.189 60 139.208 60H15.6393C10.2627 60 7.5745 60 5.52094 58.9537C3.71459 58.0333 2.24597 56.5647 1.32559 54.7583C0.279251 52.7048 0.279251 50.0165 0.279251 44.64V15.36Z"
-					fill="currentColor"
-				/>
-			</svg>
-			<ui-typography
-				:kind="EColors.WHITE"
-				:weight="ETextWeight.BOLD"
-				:size="textSize"
-				:text-transform="ETextTransform.UPPERCASE"
-				class="absolute left-0 top-0 flex h-full w-full items-center justify-center"
-			>
-				ber
-			</ui-typography>
-		</div>
-
-		<div class="ui-ber-rank__icon-wrapper relative">
-			<ui-typography :kind="berRankDictionary[+rank]?.color || berRankDictionary[0].color">
-				<svg
-					:class="[
-						size === EBerSize.SMALL && 'ui-ber-rank__icon_small',
-						size === EBerSize.MEDIUM && 'ui-ber-rank__icon_medium',
-					]"
-					viewBox="0 0 106 60"
-					fill="none"
-					xmlns="http://www.w3.org/2000/svg"
-				>
-					<path
-						fill-rule="evenodd"
-						d="M3.01833 20.2172C0.74308 13.3915 -0.394547 9.9786 0.287586 7.26202C0.884697 4.88404 2.36903 2.82464 4.43616 1.50619C6.79762 0 10.3951 0 17.5901 0H90.3607C95.7373 0 98.4255 0 100.479 1.04634C102.285 1.96672 103.754 3.43534 104.674 5.24169C105.721 7.29524 105.721 9.9835 105.721 15.36V44.64C105.721 50.0165 105.721 52.7048 104.674 54.7583C103.754 56.5647 102.285 58.0333 100.479 58.9537C98.4255 60 95.7373 60 90.3607 60H17.5901C10.3951 60 6.79762 60 4.43616 58.4938C2.36903 57.1754 0.884697 55.116 0.287586 52.738C-0.394547 50.0214 0.743081 46.6085 3.01834 39.7827L4.93001 34.0477C5.43062 32.5459 5.68093 31.795 5.78035 31.0268C5.86857 30.3451 5.86857 29.6549 5.78035 28.9732C5.68093 28.205 5.43062 27.4541 4.93001 25.9523L3.01833 20.2172Z"
-						fill="currentColor"
-					/>
-				</svg>
-			</ui-typography>
-
-			<ui-typography
-				:kind="EColors.WHITE"
-				:weight="ETextWeight.BOLD"
-				:size="textSize"
-				:text-transform="ETextTransform.UPPERCASE"
-				class="absolute left-0 top-0 flex h-full w-full items-center justify-center"
-			>
-				{{ berRankDictionary[+rank]?.text || berRankDictionary[0].text }}
-			</ui-typography>
-		</div>
-	</div>
-</template>
-
-<script lang="ts" setup>
-	import { computed } from "vue";
-	import UiTypography, { ETextWeight, ETypographySizes, ETextTransform } from "../ui-typography";
-	import { EColors } from "../../_types/colors";
-	import { berRankDictionary, type TBerPropNumber, type TBerPropString, EBerSize } from "./_types";
-
-	const props = withDefaults(defineProps<{
-		rank: TBerPropNumber | TBerPropString | number; // from 0 to 15
-		size?: EBerSize
-	}>(), {
-		size: EBerSize.MEDIUM
-	});
-
-	const textSize = computed(()=>{
-		switch (props.size) {
-			case EBerSize.SMALL:
-				return ETypographySizes.SM;
-			case EBerSize.MEDIUM:
-				return ETypographySizes.XXXL;
-			default:
-				return ETypographySizes.XXXL;
-		}
-	});
-</script>
-
-<style>
-	.ui-ber-rank__icon_medium {
-		height: 60px;
-	}
-
-	.ui-ber-rank__icon_small {
-		height: 30px;
-	}
-</style>

package/src/components/ui-button/_typings.ts

@@ -1,17 +0,0 @@
-export enum EButtonTypes {
-	PRIMARY = "primary",
-	SECONDARY = "secondary",
-	ERROR = "error",
-	WARNING = "warning",
-	PRIMARY_OVERLAY = "primary-overlay",
-	SECONDARY_OVERLAY = "secondary-overlay",
-	ERROR_OVERLAY = "error-overlay",
-	WARNING_OVERLAY = "warning-overlay",
-	LINK = "link",
-}
-export enum EButtonSizes {
-	DEFAULT = "default",
-	SMALL = "sm",
-	MEDIUM = "md",
-	LARGE = "lg"
-}

package/src/components/ui-button/index.ts

@@ -1,2 +0,0 @@
-export { default } from "./ui-button.vue";
-export { EButtonSizes, EButtonTypes } from "./_typings";

package/src/components/ui-button/ui-button.stories.ts

@@ -1,143 +0,0 @@
-import UiButton from "../ui-button";
-import UiIcon from "../ui-icon";
-import { ESize } from "../../_types/sizing";
-import { EButtonSizes, EButtonTypes } from "./_typings";
-import type { Story } from "@storybook/vue3";
-export default {
-	title: "Components/ui-button",
-	component: UiButton,
-	// More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
-	argTypes: {
-		kind: {
-			control: {
-				type: "select" 
-			},
-			options: Object.values(EButtonTypes),
-			description: "The button kinds",
-		},
-		size: {
-			control: {
-				type: "select" 
-			},
-			options: Object.values(EButtonSizes),
-			description: "The button sizes",
-		},
-		fullWidth: {
-			control: {
-				type: "boolean" 
-			},
-			description: "The full width size",
-		},
-		disabled: {
-			control: {
-				type: "boolean" 
-			},
-			description: "Disabled state",
-		},
-		slot: {
-			control: {
-				type: "text" 
-			},
-			description: "The slot text or component",
-		},
-		hasPrefix: {
-			control: {
-				type: "boolean" 
-			},
-		},
-		hasPostfix: {
-			control: {
-				type: "boolean" 
-			},
-		}
-	},
-	args: {
-		slot: "default text",
-		hasPrefix: false,
-		hasPostfix: false,
-	},
-};
-
-type TComponentProps = InstanceType<typeof UiButton>["$props"];
-
-const Template: Story<TComponentProps> = (args) => ({
-	// Components used in your story `template` are defined in the `components` object
-	components: {
-		UiButton,
-		UiIcon 
-	},
-	// The story's `args` need to be mapped into the template through the `setup()` method
-	setup() {
-		return {
-			args,
-			ESize 
-		};
-	},
-	// And then the `args` are bound to your component with `v-bind="args"`
-	template: /*html*/`
-		<ui-button :kind="args.kind"
-				   :size="args.size"
-				   :fullWidth="args.fullWidth"
-				   :disabled="args.disabled"
-		>
-			<template #prefix v-if="args.hasPrefix">
-				<ui-icon
-					:icon-name="['far', 'face-smile']"
-				 	:size="ESize.SM"
-				/>
-			</template>
-			${args.slot}
-			<template #postfix v-if="args.hasPostfix">
-				<ui-icon
-					:icon-name="['far', 'face-smile']"
-					:size="ESize.SM"
-				/>
-			</template>
-		</ui-button>`,
-});
-const TemplateAll: Story<TComponentProps> = () => ({
-	components: {
-		UiButton 
-	},
-
-	setup() {
-		return {
-			EButtonSizes,
-			EButtonTypes 
-		};
-	},
-
-	template: /*html*/`
-		<div :style="{
-			display: 'flex',
-			flexWrap: 'wrap'
-		}"
-		>
-		<div
-			:style="{margin: '10px'}"
-			v-for="kind in EButtonTypes"
-			:key="kind"
-		>
-			<ui-button
-				:kind="kind"
-				:size="EButtonSizes.MEDIUM"
-			>
-				{{ kind }}
-			</ui-button>
-		</div>
-		</div>
-	`,
-});
-
-export const Primary = Template.bind({});
-// More on args: https://storybook.js.org/docs/vue/writing-stories/args
-
-Primary.args = {
-	...Primary,
-	kind: EButtonTypes.PRIMARY,
-	size: EButtonSizes.MEDIUM,
-	fullWidth: false,
-	disabled: false,
-};
-export const Buttons = TemplateAll.bind({});
-// More on args: https://storybook.js.org/docs/vue/writing-stories/args

package/src/components/ui-button/ui-button.test.ts

@@ -1,9 +0,0 @@
-import { mount } from "@vue/test-utils";
-import UiButton from "./ui-button.vue";
-
-test("VButton.test.ts", () => {
-	expect(UiButton).toBeTruthy();
-
-	const container = mount(UiButton);
-	expect(container).toBeTruthy();
-});