feat: more UI components (#2013)

src/renderer/app/components/Button/Button.stories.ts

@@ -0,0 +1,60 @@
+import { select, withKnobs } from "@storybook/addon-knobs";
+
+import XButton from "./Button.vue";
+
+export default { title: "Basic / Button", decorators: [withKnobs] };
+
+export const Default = () => ({
+	components: { XButton },
+	props: {
+		size: {
+			default: select("Size", ["small", "default", "large"], "default"),
+		},
+	},
+	template: `
+		<div class="p-5 space-y-5">
+			<div class="space-x-4">
+				<XButton color="primary" :size="size">Primary</XButton>
+				<XButton color="success" :size="size">Success</XButton>
+				<XButton color="danger" :size="size">Danger</XButton>
+				<XButton color="light" :size="size">Light</XButton>
+			</div>
+
+			<div class="space-x-4">
+				<XButton color="primary" variant="plain" :size="size">Primary</XButton>
+				<XButton color="success" variant="plain" :size="size">Success</XButton>
+				<XButton color="danger" variant="plain" :size="size">Danger</XButton>
+				<XButton color="light" variant="plain" :size="size">Light</XButton>
+			</div>
+
+			<div class="space-x-4">
+				<XButton color="primary" variant="outline" :size="size">Primary</XButton>
+				<XButton color="success" variant="outline" :size="size">Success</XButton>
+				<XButton color="danger" variant="outline" :size="size">Danger</XButton>
+				<XButton color="light" variant="outline" :size="size">Light</XButton>
+			</div>
+		</div>
+	`,
+});
+
+export const Circle = () => ({
+	components: { XButton },
+	template: `
+		<div class="space-x-4 p-5">
+			<XButton color="primary" variant="plain" shape="circle">Ѧ</XButton>
+			<XButton color="success" variant="plain" shape="circle">Ѧ</XButton>
+			<XButton color="danger" variant="plain" shape="circle">Ѧ</XButton>
+			<XButton color="light" variant="plain" shape="circle">Ѧ</XButton>
+		</div>
+	`,
+});
+
+export const Disabled = () => ({
+	components: { XButton },
+	template: `
+		<div class="space-x-4 p-5">
+			<XButton color="primary" disabled>Disabled</XButton>
+			<XButton color="primary" shape="circle" disabled>Ѧ</XButton>
+		</div>
+	`,
+});

src/renderer/app/components/Button/Button.test.ts

@@ -0,0 +1,22 @@
+import { shallowMount } from "@vue/test-utils";
+
+import XButton from "@/app/components/Button/Button.vue";
+
+describe("Button", () => {
+	it("should render", () => {
+		const wrapper = shallowMount(XButton);
+		expect(wrapper.html()).toMatchSnapshot();
+	});
+
+	it("should render if disabled", () => {
+		const wrapper = shallowMount(XButton, { attrs: { disabled: "true" } });
+		expect((wrapper.element as HTMLButtonElement).disabled).toBeTruthy();
+		expect(wrapper.html()).toMatchSnapshot();
+	});
+
+	it("should emit event on click", () => {
+		const wrapper = shallowMount(XButton);
+		wrapper.trigger("click");
+		expect(wrapper.emitted()).not.toBeUndefined();
+	});
+});

src/renderer/app/components/Button/Button.vue

@@ -0,0 +1,117 @@
+<template>
+	<button
+		:class="[
+			'Button--color-' + color,
+			'Button--variant-' + variant,
+			'Button--shape-' + shape,
+			'Button--size-' + size,
+		]"
+		class="Button focus:shadow-outline font-semibold text-center transition-all ease-linear duration-100"
+		v-bind="$attrs"
+		v-on="$listeners"
+	>
+		<slot></slot>
+	</button>
+</template>
+
+<script lang="ts">
+	import { Component, Prop, Vue } from "vue-property-decorator";
+
+	@Component
+	export default class Button extends Vue {
+		@Prop({ default: "solid" }) public variant!: "solid" | "plain" | "outline";
+		@Prop({ default: "primary" }) public color!: "primary" | "success" | "danger" | "light";
+		@Prop({ default: "default" }) public size!: "small" | "default" | "large";
+		@Prop({ default: "rounded" }) public shape!: "rounded" | "circle";
+	}
+</script>
+
+<style lang="postcss" scoped>
+	.Button:disabled {
+		@apply cursor-not-allowed bg-opacity-50;
+	}
+
+	.Button--color {
+		&-primary {
+			--color: theme("colors.blue.600");
+			--shadow-color: theme("colors.blue.200");
+			@apply bg-blue-700 text-blue-100;
+		}
+
+		&-success {
+			--color: theme("colors.green.700");
+			--shadow-color: theme("colors.green.200");
+			@apply bg-green-700 text-green-100;
+		}
+
+		&-danger {
+			--color: theme("colors.red.600");
+			--shadow-color: theme("colors.red.100");
+			@apply bg-red-500 text-white;
+		}
+
+		&-light {
+			--color: theme("colors.gray.700");
+			--shadow-color: theme("colors.gray.200");
+			@apply bg-gray-600 text-gray-100;
+		}
+	}
+
+	.Button--variant {
+		&-solid {
+			--bg-opacity: 0.9;
+			&:not(:disabled):hover {
+				--bg-opacity: 1;
+				&:not(:focus) {
+					box-shadow: 2px 3px 10px 2px var(--shadow-color);
+				}
+			}
+		}
+
+		&-plain {
+			--bg-opacity: 0.1;
+			color: var(--color);
+			&:not(:disabled):hover {
+				--bg-opacity: 0.15;
+			}
+		}
+
+		&-outline {
+			@apply bg-opacity-0;
+			color: var(--color);
+			box-shadow: 0 0 0 2px var(--shadow-color);
+			&:not(:disabled):hover {
+				--bg-opacity: 0.05;
+			}
+		}
+	}
+
+	.Button--shape {
+		&-rounded {
+			@apply rounded;
+		}
+
+		&-circle {
+			@apply rounded-full inline-flex items-center justify-center;
+			width: var(--circle-size);
+			height: var(--circle-size);
+		}
+	}
+
+	.Button--size {
+		&-small {
+			--circle-size: theme("spacing.8");
+			@apply text-sm px-2 py-1;
+		}
+
+		&-default {
+			--circle-size: theme("spacing.12");
+			@apply text-base px-4 py-2;
+		}
+
+		&-large {
+			--circle-size: theme("spacing.16");
+			@apply text-lg px-5 py-3;
+		}
+	}
+</style>

src/renderer/app/components/Button/__snapshots__/Button.test.ts.snap

@@ -0,0 +1,5 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Button should render 1`] = `<button class="Button focus:shadow-outline font-semibold text-center transition-all ease-linear duration-100 Button--color-primary Button--variant-solid Button--shape-rounded Button--size-default"></button>`;
+
+exports[`Button should render if disabled 1`] = `<button disabled="disabled" class="Button focus:shadow-outline font-semibold text-center transition-all ease-linear duration-100 Button--color-primary Button--variant-solid Button--shape-rounded Button--size-default"></button>`;

src/renderer/app/components/Button/index.ts

@@ -1,3 +1,3 @@
-import ButtonSwitch from "./ButtonSwitch.vue";
+import XButton from "./Button.vue";
 
-export { ButtonSwitch };
+export { XButton };

src/renderer/app/components/ListDivided/ListDividedItem.vue

@@ -9,12 +9,14 @@
 						itemLabelClass,
 					]"
 					class="mr-5 ListDividedItem__label"
-				>{{ label }}</span>
+					>{{ label }}</span
+				>
 				<span
 					v-if="labelDescription"
 					:class="itemLabelDescriptionClass"
 					class="text-sm text-gray-500 ListDividedItem__label__description"
-				>{{ labelDescription }}</span>
+					>{{ labelDescription }}</span
+				>
 			</div>
 
 			<div :class="itemValueClass" class="ListDividedItem__value">

src/renderer/app/components/Toggle/Toggle.stories.ts

@@ -0,0 +1,16 @@
+import Toggle from "./Toggle.vue";
+
+export default { title: "Form / Toggle" };
+
+export const Default = () => ({
+	components: { Toggle },
+	template: `<div class="p-5"><Toggle /></div>`,
+});
+
+export const Disabled = () => ({
+	components: { Toggle },
+	template: `<div class="p-5">
+		<Toggle disabled />
+		<Toggle checked disabled />
+	</div>`,
+});