bonkers-ui 1.0.1 → 1.0.4

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:Event, index:number)=>{
+		if(index < props.inputsCount){
+			inputsRefs.value[index + 1]?.focus();
+		}
+
+		if(index === props.inputsCount - 1){
+			doSubmit();
+		}
+	};
+
+	const focusHandler = (e:FocusEvent) => {
+		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) as Array<keyof typeof 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

@@ -10,24 +10,22 @@
 		"resolveJsonModule": true,
 		"useDefineForClassFields": true,
 		"jsx": "preserve",
+		"noImplicitThis": true,
 		"isolatedModules": true,
+		"preserveValueImports": true,
+		"importsNotUsedAsValues": "error",
 		"importHelpers": true,
 		"moduleResolution": "node",
 		"skipLibCheck": true,
 		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
 		"allowSyntheticDefaultImports": true,
 		"sourceMap": true,
 		"baseUrl": ".",
-		"paths": {
-			"@/*": [
-				"src/*"
-			]
-		},
 		"lib": [
 			"esnext",
 			"dom",
 			"dom.iterable",
-			"scripthost"
 		]
 	},
 	"include": [
@@ -36,7 +34,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
 	})]
-})
+});