bonkers-ui 1.0.4 → 1.0.5

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

@@ -2,7 +2,7 @@ import UiRipple from "./ui-ripple.vue";
 import UiButton from "../ui-button";
 import UiTypography from "../ui-typography";
 
-import { Story } from "@storybook/vue3";
+import type { Story } from "@storybook/vue3";
 
 export default {
 	title: "Components/ui-ripple",

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

@@ -0,0 +1 @@
+export { default } from "./ui-select.vue";

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

@@ -0,0 +1,45 @@
+import UiSelect from "./ui-select.vue";
+import type { Story } from "@storybook/vue3";
+import { ref } from "vue";
+
+export default {
+	title: "Components/ui-select",
+	component: UiSelect,
+	argTypes: {
+		className: {
+			control: { type: "text" },
+			description: "The Element classes",
+		},
+		disabled: {
+			control: { type: "boolean" },
+			description: "The Element disabled state",
+		}
+	},
+	args: {
+		slot: "default text",
+		disabled: false,
+	},
+};
+
+type TComponentProps = InstanceType<typeof UiSelect>["$props"];
+
+const Template: Story<TComponentProps> = (args) => ({
+	components: { UiSelect },
+	setup() {
+		const list = ["Option 1", "Option 2", "Option 3"];
+		const valueModel = ref(list[0]);
+		return { args, valueModel, list };
+	},
+	template: `
+		<ui-select v-bind="args" :list="list" v-model:value="valueModel" heading="heading" subLabel="subLabel">
+			{{ args.slot }}
+			<template #postfix-icon>
+				<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+					<path d="M13.25 6.8125L8.5 11.2812C8.34375 11.4375 8.15625 11.5 8 11.5C7.8125 11.5 7.625 11.4375 7.46875 11.3125L2.71875 6.8125C2.40625 6.53125 2.40625 6.0625 2.6875 5.75C2.96875 5.4375 3.4375 5.4375 3.75 5.71875L8 9.71875L12.2188 5.71875C12.5312 5.4375 13 5.4375 13.2812 5.75C13.5625 6.0625 13.5625 6.53125 13.25 6.8125Z" fill="currentColor"/>
+				</svg>
+			</template>
+		</ui-select>
+	`,
+});
+
+export const Default = Template.bind({});

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

@@ -0,0 +1,68 @@
+<template>
+	<div class="ui-select">
+		<ui-typography
+			v-if="heading"
+			:weight="ETextWeight.SEMI_BOLD"
+			class-name="mb-sm"
+		>
+			{{ heading }}
+		</ui-typography>
+		<div
+			class="relative rounded-lg border bg-white border-secondary-alt-500 hover:border-secondary-alt-700"
+			:class="[disabled && 'pointer-events-none bg-secondary-alt-200 border-secondary-alt-300']"
+		>
+			<select
+				v-model="localModel"
+				class="appearance-none bg-transparent border-0 m-0 outline-0 w-full p-sm cursor-pointer italic text-secondary-alt"
+				@change=" $emit('update:value', ($event.target as HTMLTextAreaElement)?.value)"
+			>
+				<option
+					v-for="item in list"
+					:key="item"
+					:value="item"
+				>
+					{{ item }}
+				</option>
+			</select>
+
+			<div class="ui-select__icon-wrapper absolute right-sm">
+				<slot name="postfix-icon" />
+			</div>
+		</div>
+		<ui-typography
+			v-if="subLabel"
+			:size="ETypographySizes.SM"
+			class-name="mt-sm"
+		>
+			{{ subLabel }}
+		</ui-typography>
+	</div>
+</template>
+
+<script lang="ts" setup>
+	import { ref, watch } from "vue";
+	import UiTypography, { ETypographySizes, ETextWeight } from "../ui-typography";
+
+	const props = defineProps<{
+		list: string[];
+		value: string;
+		heading?: string;
+		subLabel?: string;
+		disabled?: boolean;
+	}>();
+
+	defineEmits(["update:value"]);
+
+	const localModel = ref(props.value);
+
+	watch(() => props.value, (value) => {
+		localModel.value = value;
+	});
+</script>
+
+<style scoped>
+	.ui-select__icon-wrapper {
+		top: 50%;
+		transform: translateY(-50%);
+	}
+</style>

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

@@ -0,0 +1 @@
+export { default } from "./ui-tabs.vue";

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

@@ -0,0 +1,32 @@
+import { ref } from "vue";
+import UiTabs from "./ui-tabs.vue";
+import type { Story } from "@storybook/vue3";
+
+export default {
+	title: "Components/ui-tabs",
+	component: UiTabs,
+	argTypes: {
+		className: {
+			control: { type: "text" },
+			description: "The Element classes",
+		},
+	},
+};
+
+type TComponentProps = InstanceType<typeof UiTabs>["$props"];
+
+const Template: Story<TComponentProps> = (args) => ({
+	components: { UiTabs },
+	setup() {
+		const value = ref("Tab1");
+		const value2 = ref("Tab1");
+		return { args, value, value2 };
+	},
+	template: `
+		<ui-tabs v-bind="args" :tabs="['Tab1', 'Tab2', 'Tab3']" v-model:modelValue="value" />
+		<br/>
+		<ui-tabs v-bind="args" :tabs="['Tab1', 'Tab2']" v-model:modelValue="value2" />
+	`,
+});
+
+export const Default = Template.bind({});

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

@@ -0,0 +1,58 @@
+<template>
+	<ul class="ui-tabs bg-secondary-alt-200 rounded-full grid grid-flow-col">
+		<li
+			v-for="tab in tabs"
+			:key="tab"
+			class="rounded-full text-center"
+			:class="[localValue === tab && 'bg-white']"
+		>
+			<label class="block cursor-pointer py-xs px-md">
+				<input
+					v-model="localValue"
+					type="radio"
+					class="appearance-none"
+					:value="tab"
+					:name="name || 'default'"
+					@input="$emit('update:modelValue', ($event.target as HTMLTextAreaElement)?.value)"
+				>
+				<ui-typography
+					is="span"
+					:size="ETypographySizes.XS"
+					:kind="localValue === tab?EColors.SECONDARY_500:EColors.SECONDARY_400"
+					:weight="ETextWeight.SEMI_BOLD"
+				>
+					{{ tab }}
+				</ui-typography>
+			</label>
+		</li>
+	</ul>
+</template>
+
+<script lang="ts" setup>
+	import { ref, watch } from "vue";
+	import UiTypography, { ETypographySizes, ETextWeight } from "../ui-typography";
+	import { EColors } from "../../_types/colors";
+
+	const props = defineProps<{
+		tabs: string[];
+		modelValue: string;
+		name: string;
+	}>();
+
+	defineEmits(["update:modelValue"]);
+
+	const localValue = ref(props.modelValue);
+
+	watch(() => props.modelValue, (newValue) => {
+		if(newValue !== localValue.value){
+			localValue.value = newValue;
+		}
+	});
+
+</script>
+
+<style scoped>
+	.ui-tabs {
+		padding: 2px;
+	}
+</style>

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

@@ -0,0 +1 @@
+export { default } from "./ui-toggle.vue";

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

@@ -0,0 +1,40 @@
+import UiToggle from "./ui-toggle.vue";
+import type { Story } from "@storybook/vue3";
+import { ref } from "vue";
+
+export default {
+	title: "Components/ui-toggle",
+	component: UiToggle,
+	argTypes: {
+		className: {
+			control: { type: "text" },
+			description: "The Element classes",
+		},
+		disabled: {
+			control: { type: "boolean" },
+			description: "The Element disabled state",
+		}
+	},
+	args: {
+		slot: "default text",
+		disabled: false,
+	},
+};
+
+type TComponentProps = InstanceType<typeof UiToggle>["$props"];
+
+const Template: Story<TComponentProps> = (args) => ({
+	components: { UiToggle },
+	setup() {
+		const modelValue = ref(false);
+
+		return { args, modelValue };
+	},
+	template: `
+		<ui-toggle v-bind="args" v-model:model-value="modelValue">
+			{{ args.slot }}
+		</ui-toggle>
+	`,
+});
+
+export const Default = Template.bind({});

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

@@ -0,0 +1,92 @@
+<template>
+	<label
+		class="ui-toggle rounded-full cursor-pointer"
+		:class="className"
+	>
+		<span class="ui-input__input-wrapper block w-lg h-md relative">
+			<input
+				type="checkbox"
+				class="appearance-none absolute w-0 h-0 border-0"
+				:checked="modelValue"
+				@input="$emit('update:modelValue', !!($event.target as HTMLInputElement)?.value)"
+			>
+
+			<span class="ui-toggle__bg-block bg-secondary-alt block w-full h-full rounded-full" />
+			<span class="ui-toggle__dot block bg-white absolute top-0 rounded-full">
+				<svg
+					class="ui-toggle__check-icon text-primary absolute"
+					width="16"
+					height="12"
+					viewBox="0 0 16 12"
+					fill="none"
+					xmlns="http://www.w3.org/2000/svg"
+				>
+					<path
+						d="M1 4.40106L6.60071 10.1135L15.1694 1.71245"
+						stroke="currentColor"
+						stroke-width="1.6"
+						stroke-linecap="round"
+					/>
+				</svg>
+			</span>
+		</span>
+	</label>
+</template>
+
+<script lang="ts" setup>
+	defineProps<{
+		className?: string;
+		modelValue: boolean;
+	}>();
+
+	defineEmits<{
+		(e: "update:modelValue", state: boolean): void
+	}>();
+</script>
+
+<style scoped>
+	.ui-toggle__dot {
+		top: 50%;
+		width: 22px;
+		height: 22px;
+		transform: translate3d(1px, -50%, 0);
+		transition: transform 0.2s ease-in-out;
+	}
+
+	.ui-toggle__check-icon {
+		top: 50%;
+		left: 50%;
+		transform: translate3d(-50%, -50%, 0);
+		stroke-dasharray: 70;
+		stroke-dashoffset: 70;
+		transition: stroke-dashoffset 0.2s ease-in-out;
+	}
+
+	.ui-toggle:hover .ui-toggle__dot,
+	.ui-toggle:active .ui-toggle__dot,
+	.ui-toggle:focus .ui-toggle__dot {
+		box-shadow: var(--shadow-border-secondary);
+	}
+
+	.ui-toggle input:checked ~ .ui-toggle__dot {
+		transform: translate3d(calc(var(--lg) - 100% - 1px), -50%, 0);
+	}
+
+	.ui-toggle:hover input:checked ~ .ui-toggle__dot,
+	.ui-toggle:active input:checked ~ .ui-toggle__dot,
+	.ui-toggle:focus input:checked ~ .ui-toggle__dot {
+		box-shadow: var(--shadow-border-primary);
+	}
+
+	.ui-toggle__bg-block {
+		transition: background-color 0.2s ease-in-out;
+	}
+
+	.ui-toggle input:checked ~ .ui-toggle__bg-block {
+		background-color: var(--color-primary);
+	}
+
+	.ui-toggle input:checked ~ .ui-toggle__dot .ui-toggle__check-icon {
+		stroke-dashoffset: 0;
+	}
+</style>

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

@@ -2,7 +2,7 @@ export enum ETypographySizes {
 	XXS = "xxs",
 	XS = "xs",
 	SM = "sm",
-	M = "m",
+	MD = "m",
 	LG = "lg",
 	XL = "xl",
 	XXL = "2xl",
@@ -11,37 +11,11 @@ export enum ETypographySizes {
 	XXXXXL = "5xl",
 }
 
-export enum ETypographyColors {
-	PRIMARY = "primary",
-	PRIMARY_300 = "primary-300",
-	PRIMARY_400 = "primary-400",
-	PRIMARY_600 = "primary-600",
-	PRIMARY_700 = "primary-700",
-
-	SECONDARY = "secondary",
-	SECONDARY_300 = "secondary-300",
-	SECONDARY_400 = "secondary-400",
-	SECONDARY_600 = "secondary-600",
-	SECONDARY_700 = "secondary-700",
-
-	ERROR = "error",
-	ERROR_300 = "error-300",
-	ERROR_400 = "error-400",
-	ERROR_600 = "error-600",
-	ERROR_700 = "error-700",
-
-	WARNING = "warning",
-	WARNING_300 = "warning-300",
-	WARNING_400 = "warning-400",
-	WARNING_600 = "warning-600",
-	WARNING_700 = "warning-700",
-}
-
 export enum ETextWeight {
-	LIGHT = "light",
-	REGULAR = "regular",
-	SEMI_BOLD = "semi_bold",
-	BOLD = "bold",
+	LIGHT = "light", // 300
+	REGULAR = "regular", // 400
+	SEMI_BOLD = "semi_bold", // 600
+	BOLD = "bold", // 900
 }
 
 export enum ETextAlign {

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

@@ -1,2 +1,2 @@
 export { default } from "./ui-typography.vue";
-export { ETypographySizes, ETextWeight, ETextAlign } from "./_typings";
+export { ETypographySizes, ETextWeight, ETextAlign, ETextTransform } from "./_typings";

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

@@ -1,6 +1,6 @@
 import { ETypographySizes, ETextWeight, ETextAlign, ETextTransform } from "./_typings";
 import UiTypography from "./ui-typography.vue";
-import { Story } from "@storybook/vue3";
+import type { Story } from "@storybook/vue3";
 import { EColors } from "../../_types/colors";
 
 export default {
@@ -40,6 +40,10 @@ export default {
 			control: { type: "boolean" },
 			description: "The Element line height 1.6",
 		},
+		underline: {
+			control: { type: "boolean" },
+			description: "The Element underline",
+		},
 		size: {
 			control: { type: "select" },
 			options: Object.values(ETypographySizes),
@@ -48,6 +52,7 @@ export default {
 	},
 	args: {
 		slot: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
+		underline: false
 	},
 };
 
@@ -71,7 +76,7 @@ const Template: Story<TComponentProps> = (args) => ({
 export const Default = Template.bind({});
 
 Default.args = {
-	size: ETypographySizes.M,
+	size: ETypographySizes.MD,
 	weight: ETextWeight.REGULAR,
 	align: ETextAlign.LEFT,
 	lineHeight: true,

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

@@ -4,7 +4,7 @@
 		class="ui-typography"
 		:class="[
 			'leading-none',
-			(!size || size === ETypographySizes.M) && 'text-m',
+			(!size || size === ETypographySizes.MD) && 'text-md',
 			size === ETypographySizes.XXS && 'text-xxs',
 			size === ETypographySizes.XS && 'text-xs',
 			size === ETypographySizes.SM && 'text-sm',
@@ -85,6 +85,7 @@
 			textTransform === ETextTransform.UPPERCASE && 'uppercase',
 
 			lineHeight && 'ui-typography_line-height',
+			underline && 'underline',
 
 			className
 		]"
@@ -94,7 +95,6 @@
 </template>
 
 <script lang="ts" setup>
-	import type { Component } from "vue";
 	import { ETextAlign, ETextTransform, ETextWeight, ETypographySizes } from "./_typings";
 	import { EColors } from "../../_types/colors";
 
@@ -106,7 +106,8 @@
 		weight?: ETextWeight;
 		lineHeight?: boolean;
 		textTransform?: ETextTransform;
-		is?: string | Component;
+		underline?: boolean;
+		is?: string;
 	}>();
 </script>
 

package/src/components/ui-verification-input/ui-verification-input.stories.ts

@@ -1,5 +1,4 @@
 import UiVerificationInput from "./ui-verification-input.vue";
-import { Story } from "@storybook/vue3";
 
 export default {
 	title: "Components/ui-verification-input",
@@ -28,7 +27,7 @@ export default {
 
 type MyComponentProps = InstanceType<typeof UiVerificationInput>["$props"];
 
-const Template: Story<MyComponentProps> = (args: MyComponentProps) => ({
+const Template = (args: MyComponentProps) => ({
 	components:{
 		UiVerificationInput
 	},

package/src/main.css

@@ -1,7 +1,7 @@
-@import "./_styles/colors.css";
-@import "./_styles/spacing.css";
-@import "./_styles/font-sizes.css";
-@import "./_styles/shadow.css";
+@import "_styles/variables/colors.css";
+@import "_styles/variables/spacing.css";
+@import "_styles/variables/font-sizes.css";
+@import "_styles/variables/shadow.css";
 
 @tailwind base;
 @tailwind components;
@@ -11,9 +11,10 @@
 	:root {
 		/* text */
 		--base-line-height: 1.6;
+		--base-font: museo-sans, sans-serif;
 	}
 }
 
 body {
-	font-family: museo-sans, sans-serif;
+	font-family: var(--base-font);
 }

package/src/stories/colors/ui-colors.vue

@@ -62,7 +62,7 @@
 </template>
 
 <script lang="ts" setup>
-	import colors from "../../_colors.json";
+	import colors from "../../_styles/classTypes/_colors.json";
 	import { getCssVariableValue } from "../helper";
 </script>
 

package/src/stories/font-sizes/font-sizes.stories.ts

@@ -0,0 +1,13 @@
+import UiFontSizes from "./ui-font-sizes.vue";
+
+export default {
+	title: "Example/FontSizes",
+	component: UiFontSizes,
+};
+
+const Template = () => ({
+	components: { UiFontSizes },
+	template: `<ui-font-sizes/>`,
+});
+
+export const FontSizes = Template();

package/src/stories/font-sizes/ui-font-sizes.vue

@@ -0,0 +1,28 @@
+<template>
+	<div class="ui-font-sizes flex flex-row flex-wrap gap-md">
+		<p
+			v-for="(value, key) in fontSizes"
+			:key="key"
+			class="p-md"
+			:style="{fontSize: value}"
+		>
+			{{ getCssVariableValue(value) }}
+			<br>
+			<br>
+			{{ key }}
+			<br>
+			{{ value }}
+		</p>
+	</div>
+</template>
+
+<script lang="ts" setup>
+	import fontSizes from "../../_styles/classTypes/_font-sizes.json";
+	import { getCssVariableValue } from "../helper";
+</script>
+
+<style>
+	.ui-font-sizes p {
+		border: 1px solid #ccc;
+	}
+</style>

package/src/stories/spacings/ui-spacings.vue

@@ -35,7 +35,7 @@
 </template>
 
 <script lang="ts" setup>
-	import spacings from "../../_spacing.json";
+	import spacings from "../../_styles/classTypes/_spacing.json";
 	import { getCssVariableValue } from "../helper";
 
 	const spacingKeys = Object.keys(spacings) as Array<keyof typeof spacings>;

package/tailwind.config.js

@@ -1,7 +1,7 @@
-const colors = require("./src/_colors.json");
-const fontSize = require("./src/_font-sizes.json");
-const spacing = require("./src/_spacing.json");
-const boxShadow = require("./src/_shadow.json");
+const colors = require("./src/_styles/classTypes/_colors.json");
+const fontSize = require("./src/_styles/classTypes/_font-sizes.json");
+const spacing = require("./src/_styles/classTypes/_spacing.json");
+const boxShadow = require("./src/_styles/classTypes/_shadow.json");
 
 module.exports = {
 	darkMode: "class",

package/vite.config.ts

@@ -6,7 +6,9 @@ export default defineConfig({
 	resolve: {
 		alias: {}
 	},
-	plugins: [vue({
-		reactivityTransform: true
-	})]
+	plugins: [
+		vue({
+			reactivityTransform: true
+		}),
+	],
 });

package/src/_styles/shadow.css

@@ -1,7 +0,0 @@
-@layer base {
-	:root {
-		/* shadow sizes */
-		--shadow-size-m: 0 2px 4px 0 rgb(180 184 205 / 50%);
-		--shadow-border-primary: 0 0 0 4px var(--color-primary-300);
-	}
-}