first-commit

.eslintrc

@@ -0,0 +1,19 @@
+{
+  "root": true,
+  "parser": "vue-eslint-parser",
+  "parserOptions": {
+    "parser": "@typescript-eslint/parser"
+  },
+  "extends": ["plugin:vue/strongly-recommended", "eslint:recommended", "@vue/typescript/recommended", "prettier"],
+  "plugins": ["@typescript-eslint", "prettier"],
+  "rules": {
+    "prettier/prettier": "error",
+    "prefer-const": ["warn", { "destructuring": "all" }],
+    "vue/no-mutating-props": "off",
+    // not needed for vue 3
+    "vue/no-multiple-template-root": "off",
+    "vue/multi-word-component-names": "off",
+    "vue/no-v-for-template-key": "off",
+    "@typescript-eslint/no-explicit-any": "off"
+  }
+}

.github/pull_request_template.md

@@ -0,0 +1 @@
+#### Summary of Changes

.github/workflows/histoire.yml

@@ -0,0 +1,27 @@
+name: Build and Deploy
+on: [push]
+permissions:
+  contents: write
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+
+    env:
+      HISTOIRE_BASE: /vue-button/
+
+    steps:
+      - name: Checkout 🛎️
+        uses: actions/checkout@v3
+
+      - name: Install and Build 🔧
+        run: |
+          yarn
+          yarn story:build
+
+      - name: Deploy 🚀
+        uses: JamesIves/github-pages-deploy-action@v4
+        with:
+          branch: gh-pages # The branch the action should deploy to.
+          folder: docs # The folder that the build-storybook script generates files.
+          clean: true # Automatically remove deleted files from the deploy branch
+          target_folder: docs # The folder that we serve our Storybook files from

.gitignore

@@ -0,0 +1,28 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+storybook-static
+
+docs

.prettierrc

@@ -0,0 +1,5 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "printWidth": 120
+}

.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
+}

README.md

@@ -0,0 +1,54 @@
+<div align="center">
+  <em>Vue Button</em>
+  <br/>
+  <a href="https://francisashley.github.io/vue-button">Documentation</a>
+</div>
+
+This repository serves as a reference for building a reusable button component in Vue and TailwindCSS.
+
+## Features
+
+- Variants: Solid, Soft, Outline, Ghost
+- Colors: Primary, Neutral, Danger, Success, Warning
+- Sizes: 20, 24, 28, 32, 36, 40, 44
+- Types: Button, Submit, Link (internal/external)
+- Icons: Supports icon and icon-only buttons
+- States: Loading, Disabled, Active (e.g. when a dropdown is open)
+
+## Usage
+
+### UIButton
+
+```vue
+<UIButton size="20" color="primary" variant="outline">
+  <template #icon>
+    <RiEditLine class="tw-w-full tw-h-full" />
+  </template>
+  Edit
+</UIButton>
+```
+
+### UIIconButton
+
+```vue
+<UIIconButton size="20" color="primary" variant="outline">
+  <RiEditLine class="tw-w-full tw-h-full" />
+</UIButton>
+```
+
+## Props
+
+- **size**: Specifies the height, with the width adjusting proportionally
+  - Options: `20` | `24` | `28` | `32` | `36` | `40` | `44`
+- **type**: Defines the button type
+  - Options: `button` | `submit` | `link`
+  - Note: `link` turns the button into an anchor element
+- **to**: URL for the link type
+- **variant**: Button style variant
+  - Options: `solid` | `soft` | `outline` | `ghost`
+- **color**: Button color
+  - Options: `primary` | `neutral` | `danger` | `success` | `warning`
+- **active**: Boolean indicating an active state, useful for dropdowns
+  - Style is similar to hover state, midway between default and fully active
+- **disable**: Disables the button
+- **loading**: Displays a loading spinner

histoire.config.ts

@@ -0,0 +1,15 @@
+import { defineConfig } from 'histoire'
+import { HstVue } from '@histoire/plugin-vue'
+
+export default defineConfig({
+  setupFile: './histoire.setup.ts',
+  plugins: [HstVue()],
+  routerMode: 'hash',
+  outDir: 'docs',
+  vite: {
+    base: process.env.HISTOIRE_BASE || '/',
+  },
+  defaultStoryProps: {
+    autoPropsDisabled: true,
+  },
+})

histoire.setup.ts

@@ -0,0 +1 @@
+import './src/assets/tailwind.css'

index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/logo.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vue Button</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package.json

@@ -0,0 +1,61 @@
+{
+  "name": "ui-button",
+  "version": "0.10.8",
+  "type": "module",
+  "description": "Button prototype",
+  "author": "Francis Ashley",
+  "license": "MIT",
+  "files": [
+    "./dist"
+  ],
+  "exports": {
+    ".": {
+      "import": "./dist/ui-button.js",
+      "require": "./dist/ui-button.umd.cjs",
+      "types": "./dist/index.d.ts"
+    },
+    "./style.css": "./dist/style.css"
+  },
+  "types": "./dist/index.d.ts",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build && vue-tsc --emitDeclarationOnly && rimraf ./dist/stories && rimraf ./dist/utils && rimraf ./dist/components/icons && rimraf ./dist/components/stuff",
+    "types": "vue-tsc",
+    "preview": "vite preview",
+    "story:dev": "histoire dev",
+    "story:build": "histoire build && touch ./docs/.nojekyll",
+    "story:preview": "histoire preview",
+    "prebuild": "rimraf ./dist",
+    "prepublishOnly": "yarn build",
+    "lint": "eslint src --ext .ts,.vue"
+  },
+  "dependencies": {
+    "vue": "^3.4.31"
+  },
+  "devDependencies": {
+    "@histoire/plugin-vue": "^0.17.17",
+    "@remixicon/vue": "^4.2.0",
+    "@typescript-eslint/eslint-plugin": "^7.12.0",
+    "@typescript-eslint/parser": "^7.12.0",
+    "@vitejs/plugin-vue": "^5.0.5",
+    "@vue/eslint-config-typescript": "^13.0.0",
+    "autoprefixer": "^10.4.19",
+    "eslint": "^8.48.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-vue": "^9.26.0",
+    "histoire": "^0.17.17",
+    "postcss": "^8.4.39",
+    "prettier": "^3.3.1",
+    "tailwindcss": "^3.4.4",
+    "typescript": "^5.4.5",
+    "vite": "^5.2.13",
+    "vitest": "^1.6.0",
+    "vue-eslint-parser": "^9.4.3",
+    "vue-tsc": "^2.0.19"
+  },
+  "resolutions": {
+    "jackspeak": "2.1.1",
+    "flexsearch": "0.7.21"
+  }
+}

postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

src/App.vue

@@ -0,0 +1,11 @@
+<template>
+  <div id="app">
+    <UIButton />
+  </div>
+</template>
+
+<script setup lang="ts">
+import UIButton from './components/UIButton.vue'
+</script>
+
+<style scoped></style>

src/assets/tailwind.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

src/components/Loader.vue

@@ -0,0 +1,21 @@
+<template>
+  <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z"
+      opacity=".2"
+      fill="currentColor"
+    />
+    <path
+      d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z"
+      fill="currentColor"
+    >
+      <animateTransform
+        attributeName="transform"
+        type="rotate"
+        dur="0.75s"
+        values="0 12 12;360 12 12"
+        repeatCount="indefinite"
+      />
+    </path>
+  </svg>
+</template>