bonkers-ui 1.0.60 → 1.0.62

package/src/stories/Introduction.stories.mdx

@@ -1,131 +0,0 @@
-import { Meta } from '@storybook/addon-docs';
-import Code from './assets/code-brackets.svg';
-
-<Meta title="Example/Introduction" />
-
-<style>
-  {`
-  .subheading {
-    --mediumdark: '#999999';
-    font-weight: 900;
-    font-size: 13px;
-    color: #999;
-    letter-spacing: 6px;
-    line-height: 24px;
-    text-transform: uppercase;
-    margin-bottom: 12px;
-    margin-top: 40px;
-  }
-
-  .link-list {
-    display: grid;
-    grid-template-columns: 1fr;
-    grid-template-rows: 1fr 1fr;
-    row-gap: 10px;
-  }
-
-  @media (min-width: 620px) {
-    .link-list {
-      row-gap: 20px;
-      column-gap: 20px;
-      grid-template-columns: 1fr 1fr;
-    }
-  }
-
-  @media all and (-ms-high-contrast:none) {
-  .link-list {
-      display: -ms-grid;
-      -ms-grid-columns: 1fr 1fr;
-      -ms-grid-rows: 1fr 1fr;
-    }
-  }
-
-  .link-item {
-    display: block;
-    padding: 20px 30px 20px 15px;
-    border: 1px solid #00000010;
-    border-radius: 5px;
-    transition: background 150ms ease-out, border 150ms ease-out, transform 150ms ease-out;
-    color: #333333;
-    display: flex;
-    align-items: flex-start;
-  }
-
-  .link-item:hover {
-    border-color: #1EA7FD50;
-    transform: translate3d(0, -3px, 0);
-    box-shadow: rgba(0, 0, 0, 0.08) 0 3px 10px 0;
-  }
-
-  .link-item:active {
-    border-color: #1EA7FD;
-    transform: translate3d(0, 0, 0);
-  }
-
-  .link-item strong {
-    font-weight: 700;
-    display: block;
-    margin-bottom: 2px;
-  }
-
-  .link-item img {
-    height: 40px;
-    width: 40px;
-    margin-right: 15px;
-    flex: none;
-  }
-
-  .link-item span {
-    font-size: 14px;
-    line-height: 20px;
-  }
-
-  .tip {
-    display: inline-block;
-    border-radius: 1em;
-    font-size: 11px;
-    line-height: 12px;
-    font-weight: 700;
-    background: #E7FDD8;
-    color: #66BF3C;
-    padding: 4px 12px;
-    margin-right: 10px;
-    vertical-align: top;
-  }
-
-  .tip-wrapper {
-    font-size: 13px;
-    line-height: 20px;
-    margin-top: 40px;
-    margin-bottom: 40px;
-  }
-
-  .tip-wrapper code {
-    font-size: 12px;
-    display: inline-block;
-  }
-
-
-  `}
-</style>
-
-# Welcome to Bonkers.ie UI Storybook
-
-Storybook helps you build UI components in isolation from your app's business logic, data, and context.
-That makes it easy to develop hard-to-reach states. Save these UI states as **stories** to revisit during development, testing, or QA.
-
-Browse example stories now by navigating to them in the sidebar.
-View their code in the `src/components` directory to learn how they work.
-We recommend building UIs with a [**component-driven**](https://componentdriven.org) process starting with atomic components.
-
-<div className="subheading">Configure</div>
-
-<div className="tip-wrapper">
-  <span className="tip">Tip</span>
-  <a href='https://storybook.js.org/docs/vue/essentials/controls#annotation'>#Controls argument types here!</a>
-</div>
-
-<div className="tip-wrapper">
-  <span className="tip">Tip</span>Edit the Markdown in{' '}
-  <code>src/stories/Introduction.stories.mdx</code>
-</div>

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

@@ -1 +0,0 @@
-<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

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

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

@@ -1,96 +0,0 @@
-<template>
-	<h2 class="font-bold">
-		Base colors:
-	</h2>
-	<ul class="colors grid gap-md">
-		<li
-			v-for="(value, key) in colors"
-			:key="key"
-			class="grid"
-			:class="typeof value === 'object' && 'grid_inner'"
-		>
-			<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="relative block h-xxl w-xxl rounded-full"
-							: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="relative block h-xxl w-xxl rounded-full"
-					: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 colors from "../../_styles/classTypes/_colors.json";
-	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/font-sizes/font-sizes.stories.ts

@@ -1,15 +0,0 @@
-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

@@ -1,28 +0,0 @@
-<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/helper.ts

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

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

@@ -1,15 +0,0 @@
-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

@@ -1,50 +0,0 @@
-<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 "../../_styles/classTypes/_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,30 +0,0 @@
-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",
-	content: ["**/*.{vue, css, js, ts}"],
-	theme: {
-		colors,
-		spacing,
-		fontSize,
-		boxShadow,
-		extend: {
-			minHeight: (theme) => ({
-				...theme("spacing"),
-			}),
-			minWidth: (theme) => ({
-				...theme("spacing"),
-			}),
-			maxHeight: (theme) => ({
-				...theme("spacing"),
-			}),
-			maxWidth: (theme) => ({
-				...theme("spacing"),
-			}),
-		},
-	},
-	plugins: [],
-};

package/vite.config.ts

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

package/vitest.config.ts

@@ -1,17 +0,0 @@
-
-import { defineConfig, UserConfig } from "vite";
-import type { InlineConfig } from "vitest";
-
-import vue from "@vitejs/plugin-vue";
-
-interface VitestConfigExport extends UserConfig {
-	test: InlineConfig;
-}
-
-export default defineConfig({
-	plugins: [vue()],
-	test: {
-		globals: true,
-		environment: "jsdom",
-	},
-} as VitestConfigExport);