bonkers-ui 1.0.0 → 1.0.3

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

@@ -0,0 +1,80 @@
+import { ETypographySizes, ETextWeight, ETextAlign, ETextTransform } from "./_typings";
+import UiTypography from "./ui-typography.vue";
+import { Story } from "@storybook/vue3";
+import { EColors } from "../../_types/colors";
+
+export default {
+	title: "Components/ui-typography",
+	component: UiTypography,
+	// More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
+	argTypes: {
+		className: {
+			control: { type: "text" },
+			description: "The Element classes",
+		},
+		is: {
+			control: { type: "text" },
+			description: "The Element component or tag",
+		},
+		kind: {
+			control: { type: "select" },
+			options: Object.values(EColors),
+			description: "The Element kinds",
+		},
+		weight: {
+			control: { type: "select" },
+			options: Object.values(ETextWeight),
+			description: "The Element weights",
+		},
+		align: {
+			control: { type: "select" },
+			options: Object.values(ETextAlign),
+			description: "The Element align",
+		},
+		textTransform: {
+			control: { type: "select" },
+			options: Object.values(ETextTransform),
+			description: "The Element transform",
+		},
+		lineHeight: {
+			control: { type: "boolean" },
+			description: "The Element line height 1.6",
+		},
+		size: {
+			control: { type: "select" },
+			options: Object.values(ETypographySizes),
+			description: "The Element sizes",
+		},
+	},
+	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.",
+	},
+};
+
+type TComponentProps = InstanceType<typeof UiTypography>["$props"];
+
+const Template: Story<TComponentProps> = (args) => ({
+	// Components used in your story `template` are defined in the `components` object
+	components: { UiTypography },
+	// The story's `args` need to be mapped into the template through the `setup()` method
+	setup() {
+		return { args };
+	},
+	// And then the `args` are bound to your component with `v-bind="args"`
+	template: `
+		<ui-typography v-bind="args">
+			${args.slot}
+		</ui-typography>
+	`,
+});
+
+export const Default = Template.bind({});
+
+Default.args = {
+	size: ETypographySizes.M,
+	weight: ETextWeight.REGULAR,
+	align: ETextAlign.LEFT,
+	lineHeight: true,
+	kind: EColors.PRIMARY,
+	is: "p",
+};

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

@@ -0,0 +1,117 @@
+<template>
+	<component
+		:is="is || 'p'"
+		class="ui-typography"
+		:class="[
+			'leading-none',
+			(!size || size === ETypographySizes.M) && 'text-m',
+			size === ETypographySizes.XXS && 'text-xxs',
+			size === ETypographySizes.XS && 'text-xs',
+			size === ETypographySizes.SM && 'text-sm',
+			size === ETypographySizes.LG && 'text-lg',
+			size === ETypographySizes.XL && 'text-xl',
+			size === ETypographySizes.XXL && 'text-2xl',
+			size === ETypographySizes.XXXL && 'text-3xl',
+			size === ETypographySizes.XXXXL && 'text-4xl',
+			size === ETypographySizes.XXXXXL && 'text-5xl',
+
+			kind === EColors.WHITE && 'text-white',
+			kind === EColors.BLACK && 'text-black',
+			kind === EColors.TRANSPARENT && 'text-transparent',
+			kind === EColors.CURRENT && 'text-current',
+
+			kind === EColors.PRIMARY && 'text-primary',
+			kind === EColors.PRIMARY_300 && 'text-primary-300',
+			kind === EColors.PRIMARY_400 && 'text-primary-400',
+			kind === EColors.PRIMARY_500 && 'text-primary-500',
+			kind === EColors.PRIMARY_600 && 'text-primary-600',
+			kind === EColors.PRIMARY_700 && 'text-primary-700',
+
+			kind === EColors.PRIMARY_ALT && 'text-primary',
+			kind === EColors.PRIMARY_ALT_300 && 'text-primary-300',
+			kind === EColors.PRIMARY_ALT_400 && 'text-primary-400',
+			kind === EColors.PRIMARY_ALT_500 && 'text-primary-500',
+			kind === EColors.PRIMARY_ALT_600 && 'text-primary-600',
+			kind === EColors.PRIMARY_ALT_700 && 'text-primary-700',
+
+			kind === EColors.SECONDARY && 'text-secondary',
+			kind === EColors.SECONDARY_300 && 'text-secondary-300',
+			kind === EColors.SECONDARY_400 && 'text-secondary-400',
+			kind === EColors.SECONDARY_500 && 'text-secondary-500',
+			kind === EColors.SECONDARY_600 && 'text-secondary-600',
+			kind === EColors.SECONDARY_700 && 'text-secondary-700',
+
+			kind === EColors.WARNING && 'text-warning',
+			kind === EColors.WARNING_300 && 'text-warning-300',
+			kind === EColors.WARNING_400 && 'text-warning-400',
+			kind === EColors.WARNING_500 && 'text-warning-500',
+			kind === EColors.WARNING_600 && 'text-warning-600',
+			kind === EColors.WARNING_700 && 'text-warning-700',
+
+			kind === EColors.ERROR && 'text-error',
+			kind === EColors.ERROR_300 && 'text-error-300',
+			kind === EColors.ERROR_400 && 'text-error-400',
+			kind === EColors.ERROR_500 && 'text-error-500',
+			kind === EColors.ERROR_600 && 'text-error-600',
+			kind === EColors.ERROR_700 && 'text-error-700',
+
+			kind === EColors.ACCENT && 'text-accent',
+			kind === EColors.ACCENT_300 && 'text-accent-300',
+			kind === EColors.ACCENT_500 && 'text-accent-500',
+			kind === EColors.ACCENT_600 && 'text-accent-600',
+			kind === EColors.ACCENT_700 && 'text-accent-700',
+
+			kind === EColors.ACCENT_ALT && 'text-accent-alt',
+			kind === EColors.ACCENT_ALT_500 && 'text-accent-alt-500',
+
+			kind === EColors.SECONDARY_ALT && 'text-secondary-alt',
+			kind === EColors.SECONDARY_ALT_200 && 'text-secondary-alt-200',
+			kind === EColors.SECONDARY_ALT_300 && 'text-secondary-alt-300',
+			kind === EColors.SECONDARY_ALT_400 && 'text-secondary-alt-400',
+			kind === EColors.SECONDARY_ALT_500 && 'text-secondary-alt-500',
+			kind === EColors.SECONDARY_ALT_600 && 'text-secondary-alt-600',
+			kind === EColors.SECONDARY_ALT_700 && 'text-secondary-alt-700',
+
+			weight === ETextWeight.LIGHT && 'font-light',
+			weight === ETextWeight.REGULAR && 'font-medium',
+			weight === ETextWeight.SEMI_BOLD && 'font-bold',
+			weight === ETextWeight.BOLD && 'font-black',
+
+			align === ETextAlign.LEFT && 'text-left',
+			align === ETextAlign.CENTER && 'text-center',
+			align === ETextAlign.RIGHT && 'text-right',
+
+			textTransform === ETextTransform.LOWERCASE && 'lowercase',
+			textTransform === ETextTransform.UPPERCASE && 'uppercase',
+
+			lineHeight && 'ui-typography_line-height',
+
+			className
+		]"
+	>
+		<slot />
+	</component>
+</template>
+
+<script lang="ts" setup>
+	import type { Component } from "vue";
+	import { ETextAlign, ETextTransform, ETextWeight, ETypographySizes } from "./_typings";
+	import { EColors } from "../../_types/colors";
+
+	defineProps<{
+		className?: string;
+		align?: ETextAlign;
+		size?: ETypographySizes;
+		kind?: EColors;
+		weight?: ETextWeight;
+		lineHeight?: boolean;
+		textTransform?: ETextTransform;
+		is?: string | Component;
+	}>();
+</script>
+
+<style scoped>
+	.ui-typography_line-height {
+		line-height: var(--base-line-height);
+	}
+</style>

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

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

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

@@ -0,0 +1,46 @@
+import UiVerificationInput from "./ui-verification-input.vue";
+import { Story } from "@storybook/vue3";
+
+export default {
+	title: "Components/ui-verification-input",
+	component: UiVerificationInput,
+	// More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
+	argTypes: {
+		className: {
+			control: { type: "text" },
+			description: "Inputs custom classes",
+		},
+		inputsCount: {
+			control: { type: "number" },
+			description: "Number of inputs",
+		},
+		type: {
+			control: { type: "select" },
+			options: ["text"],
+			description: "Inputs type",
+		},
+	},
+	args:{
+		inputsCount: 4,
+		type: "text"
+	}
+};
+
+type MyComponentProps = InstanceType<typeof UiVerificationInput>["$props"];
+
+const Template: Story<MyComponentProps> = (args: MyComponentProps) => ({
+	components:{
+		UiVerificationInput
+	},
+	setup() {
+		const filedHandler = (payload: string)=>{
+			console.log("=--->",payload);
+		};
+		return { args, filedHandler };
+	},
+	template: `
+		<ui-verification-input @onFiled="filedHandler" :className="args.className" :inputsCount="args.inputsCount" :type="args.type"/>
+	`
+});
+
+export const Default = Template.bind({});

package/src/components/ui-verification-input/ui-verification-input.vue

@@ -0,0 +1,128 @@
+<template>
+	<div
+		class="inputs grid"
+		:class="className"
+	>
+		<div
+			v-for="(_, index) in inputsCount"
+			:key="index"
+			class="input-wrapper"
+		>
+			<input
+				ref="inputsRefs"
+				:type="type || 'text'"
+				maxlength="1"
+				placeholder="&#8226;"
+				@input="(e)=>inputHandler(e, index)"
+				@focus="focusHandler"
+				@paste="handlePaste"
+			>
+			<div class="bottom-wrapper" />
+		</div>
+	</div>
+	<slot name="button" />
+</template>
+
+<script lang="ts" setup>
+	import { ref } from "vue";
+
+	type TProps = {
+		className?: string;
+		inputsCount: number;
+		type?: "text";
+	}
+
+	const props = defineProps<TProps>();
+	const emit = defineEmits(["onFiled"]);
+
+	const inputsRefs = ref<Array<HTMLInputElement | null>>([]);
+
+	const doSubmit = ()=>{
+		const generateString = inputsRefs.value.map(input => input?.value).join("");
+		emit("onFiled", generateString);
+	};
+
+	const inputHandler = (event:InputEvent, index:number)=>{
+		if(index < props.inputsCount){
+			inputsRefs.value[index + 1]?.focus();
+		}
+
+		if(index === props.inputsCount - 1){
+			doSubmit();
+		}
+	};
+
+	const focusHandler = (e:InputEvent) => {
+		if(e.target){
+			(e.target as HTMLInputElement).select();
+		}
+	};
+
+	const handlePaste = (e:ClipboardEvent) => {
+		e.preventDefault();
+		const pasteText = e.clipboardData?.getData("text");
+		if(pasteText && pasteText.length === props.inputsCount) {
+			inputsRefs.value[props.inputsCount - 1]?.focus();
+
+			inputsRefs.value.forEach((input, index)=>{
+				if(input){
+					input.value = pasteText[index];
+				}
+			});
+			doSubmit();
+		}
+
+	};
+
+</script>
+
+<style scoped>
+	.inputs {
+		grid-template-columns: repeat(auto-fill, 38px);
+		grid-gap: 24px;
+	}
+
+	.inputs .input-wrapper {
+		position: relative;
+		height: 58px;
+	}
+
+	.inputs input {
+		width: 100%;
+		border: none;
+		text-align: center;
+		font-size: 36px;
+		font-weight: bold;
+		outline: none;
+
+		/* caret-color:  var(--color-transparent); */
+	}
+
+	.inputs .input-wrapper .bottom-wrapper {
+		position: absolute;
+		bottom: 0;
+		width: 100%;
+		height: 5px;
+		background-color: var(--color-secondary-300);
+		border-radius: 3px;
+		transition: background-color 0.3s ease-in-out;
+	}
+
+	.inputs input:focus ~ .bottom-wrapper {
+		background-color: var(--color-primary);
+	}
+
+	.inputs input::placeholder {
+		font-size: 55px;
+		color: var(--color-secondary-300);
+		opacity: 1;
+		transform: scale(1);
+		transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
+	}
+
+	.inputs input:focus::placeholder {
+		opacity: 0;
+		transform: scale(0);
+	}
+
+</style>

package/src/main.css

@@ -1,24 +1,19 @@
+@import "./_styles/colors.css";
+@import "./_styles/spacing.css";
+@import "./_styles/font-sizes.css";
+@import "./_styles/shadow.css";
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
 @layer base {
 	:root {
-		--color-white: white;
-		--color-black: black;
-		--color-current: currentcolor;
-		--color-transparent: transparent;
-		--color-error: #e05f5f;
-		--color-primary: #75c46a;
-		--color-secondary: #313449;
-		--color-warning: #f09664;
-
 		/* text */
-		--base-font-size: 1rem;
 		--base-line-height: 1.6;
 	}
 }
 
-body * {
-	line-height: var(--base-line-height);
+body {
+	font-family: museo-sans, sans-serif;
 }

package/src/stories/assets/code-brackets.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" version="1.1" viewBox="0 0 48 48"><title>illustration/code-brackets</title><g id="illustration/code-brackets" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><path id="Combined-Shape" fill="#87E6E5" d="M11.4139325,12 C11.7605938,12 12,12.5059743 12,13.3779712 L12,17.4951758 L6.43502246,23.3839989 C5.85499251,23.9978337 5.85499251,25.0021663 6.43502246,25.6160011 L12,31.5048242 L12,35.6220288 C12,36.4939606 11.7605228,37 11.4139325,37 C11.2725831,37 11.1134406,36.9158987 10.9453839,36.7379973 L0.435022463,25.6160011 C-0.145007488,25.0021663 -0.145007488,23.9978337 0.435022463,23.3839989 L10.9453839,12.2620027 C11.1134051,12.0841663 11.2725831,12 11.4139325,12 Z M36.5860675,12 C36.7274169,12 36.8865594,12.0841013 37.0546161,12.2620027 L47.5649775,23.3839989 C48.1450075,23.9978337 48.1450075,25.0021663 47.5649775,25.6160011 L37.0546161,36.7379973 C36.8865949,36.9158337 36.7274169,37 36.5860675,37 C36.2394062,37 36,36.4940257 36,35.6220288 L36,31.5048242 L41.5649775,25.6160011 C42.1450075,25.0021663 42.1450075,23.9978337 41.5649775,23.3839989 L36,17.4951758 L36,13.3779712 C36,12.5060394 36.2394772,12 36.5860675,12 Z"/><rect id="Rectangle-7-Copy-5" width="35.57" height="4" x="5.009" y="22.662" fill="#A0DB77" rx="2" transform="translate(22.793959, 24.662305) rotate(-75.000000) translate(-22.793959, -24.662305)"/></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" version="1.1" viewBox="0 0 48 48"><title>illustration/code-brackets</title><g id="illustration/code-brackets" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><path id="Combined-Shape" fill="#87E6E5" d="M11.4139325,12 C11.7605938,12 12,12.5059743 12,13.3779712 L12,17.4951758 L6.43502246,23.3839989 C5.85499251,23.9978337 5.85499251,25.0021663 6.43502246,25.6160011 L12,31.5048242 L12,35.6220288 C12,36.4939606 11.7605228,37 11.4139325,37 C11.2725831,37 11.1134406,36.9158987 10.9453839,36.7379973 L0.435022463,25.6160011 C-0.145007488,25.0021663 -0.145007488,23.9978337 0.435022463,23.3839989 L10.9453839,12.2620027 C11.1134051,12.0841663 11.2725831,12 11.4139325,12 Z M36.5860675,12 C36.7274169,12 36.8865594,12.0841013 37.0546161,12.2620027 L47.5649775,23.3839989 C48.1450075,23.9978337 48.1450075,25.0021663 47.5649775,25.6160011 L37.0546161,36.7379973 C36.8865949,36.9158337 36.7274169,37 36.5860675,37 C36.2394062,37 36,36.4940257 36,35.6220288 L36,31.5048242 L41.5649775,25.6160011 C42.1450075,25.0021663 42.1450075,23.9978337 41.5649775,23.3839989 L36,17.4951758 L36,13.3779712 C36,12.5060394 36.2394772,12 36.5860675,12 Z" /><rect id="Rectangle-7-Copy-5" width="35.57" height="4" x="5.009" y="22.662" fill="#A0DB77" rx="2" transform="translate(22.793959, 24.662305) rotate(-75.000000) translate(-22.793959, -24.662305)" /></g></svg>

package/src/stories/colors/colors.stories.ts

@@ -3,7 +3,7 @@ import UiColors from "./ui-colors.vue";
 export default {
 	title: "Example/Colors",
 	component: UiColors,
-}
+};
 
 const Template = () => ({
 	components: { UiColors },

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

@@ -1,42 +1,96 @@
 <template>
-	<ul class="colors grid gap-4">
+	<h2 class="font-bold">
+		Base colors:
+	</h2>
+	<ul class="colors grid gap-md">
 		<li
-			v-for="(value, key, index) in colors"
+			v-for="(value, key) in colors"
 			:key="key"
 			class="grid"
+			:class="typeof value === 'object' && 'grid_inner'"
 		>
-			<span
-				ref="colorRefs"
-				:class="`h-24 rounded-md`"
-				:style="{
-					backgroundColor: value
-				}"
-			/>
-			{{ key }}
-			<br>
-			{{ getBackgroundColor(index) }}
-			<br>
-			{{ value }}
+			<div v-if="typeof value === 'object'">
+				<h2 class="font-bold">
+					{{ key }}:
+				</h2>
+
+				<ul
+					class="colors grid gap-md"
+				>
+					<li
+						v-for="(value2, key2) in value"
+						:key="key2"
+						class="grid"
+					>
+						<span
+							class="block h-xxl w-xxl rounded-full relative"
+							:style="{
+								backgroundColor: value2
+							}"
+						/>
+						<b :style="{margin: '15px 0', display: 'block'}">
+							{{ key2 }}
+						</b>
+						<p>
+							({{ getCssVariableValue(value2) }})
+						</p>
+						<p>
+							{{ value2 }};
+						</p>
+					</li>
+				</ul>
+			</div>
+			<div v-else>
+				<span
+					class="block h-xxl w-xxl rounded-full relative"
+					:style="{
+						backgroundColor: value
+					}"
+				/>
+				<b :style="{margin: '15px 0', display: 'block'}">
+					{{ key }}
+				</b>
+				<p>
+					({{ getCssVariableValue(value) }})
+				</p>
+				<p>
+					{{ value }};
+				</p>
+			</div>
 		</li>
 	</ul>
 </template>
 
 <script lang="ts" setup>
-	import { ref } from "vue";
 	import colors from "../../_colors.json";
-
-	const colorRefs = ref<Array<Element | null>>([]);
-
-	const getBackgroundColor = (index: number) => {
-		const element = colorRefs.value[index];
-		if (element) {
-			return window.getComputedStyle(element, null).getPropertyValue("background-color");
-		}
-	}
+	import { getCssVariableValue } from "../helper";
 </script>
 
 <style scoped>
 	.colors {
 		grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
 	}
+
+	.grid_inner {
+		grid-column: 1/-1;
+	}
+
+	h2 {
+		font-size: 30px;
+		margin: 20px 0;
+	}
+
+	.rounded-full::before {
+		content: "";
+		display: block;
+		height: 100%;
+		width: 100%;
+		position: absolute;
+		top: 0;
+		left: 0;
+		border: 2px dotted rgb(0 0 0 / 41%);
+		border-radius: 50%;
+		transform: scale(1.05);
+		z-index: -1;
+	}
 </style>

package/src/stories/helper.ts

@@ -0,0 +1,5 @@
+export const getCssVariableValue = (variable:string) => {
+	const cssVariable = variable.match(/\((.*)\)/)?.pop() || "";
+
+	return getComputedStyle(window.document.body).getPropertyValue(cssVariable);
+};

package/src/stories/spacings/spacings.stories.ts

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

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

@@ -0,0 +1,50 @@
+<template>
+	<div
+		ref="spacingsRef"
+		class="flex flex-row flex-wrap gap-md"
+	>
+		<div
+			v-for="spacing in spacingKeys"
+			:key="spacing"
+			class="block"
+		>
+			<div class="grid gap-sm">
+				<div>
+					<b>
+						{{
+							getCssVariableValue(spacings[spacing])
+						}}
+					</b>
+					<br>
+					<br>
+					{{ spacing }}
+					<br>
+					{{ spacings[spacing] }}
+				</div>
+
+				<div
+					:style="{
+						width: spacings[spacing],
+						height: spacings[spacing],
+						border: '1px solid #ccc'
+					}"
+				/>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script lang="ts" setup>
+	import spacings from "../../_spacing.json";
+	import { getCssVariableValue } from "../helper";
+
+	const spacingKeys = Object.keys(spacings);
+
+</script>
+
+<style scoped>
+	.block {
+		border: 2px solid #ccc;
+		padding: 20px;
+	}
+</style>

package/tailwind.config.js

@@ -1,13 +1,17 @@
 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");
 
 module.exports = {
 	darkMode: "class",
 	content: ["**/*.{vue, css, js, ts}"],
 	theme: {
 		colors,
+		spacing,
 		fontSize,
+		boxShadow,
 		extend: {},
 	},
 	plugins: [],
-}
+};

package/tsconfig.json

@@ -18,11 +18,6 @@
 		"allowSyntheticDefaultImports": true,
 		"sourceMap": true,
 		"baseUrl": ".",
-		"paths": {
-			"@/*": [
-				"src/*"
-			]
-		},
 		"lib": [
 			"esnext",
 			"dom",
@@ -36,7 +31,8 @@
 		"src/**/*.vue"
 	],
 	"exclude": [
-		"node_modules"
+		"node_modules",
+		"**/*.stories.ts"
 	],
 	"references": [
 		{

package/vite.config.ts

@@ -1,15 +1,12 @@
-import { defineConfig } from "vite"
-import vue from "@vitejs/plugin-vue"
-import { resolve } from "path"
+import { defineConfig } from "vite";
+import vue from "@vitejs/plugin-vue";
 
 // https://vitejs.dev/config/
 export default defineConfig({
 	resolve: {
-		alias: {
-			"@": resolve(__dirname, "src")
-		}
+		alias: {}
 	},
 	plugins: [vue({
 		reactivityTransform: true
 	})]
-})
+});