sprintify-ui

About Sprintify UI

Sprintify UI is a Vue 3 components library for Vite projects using a Laravel backend.

Storybook Documentation https://sprintify-ui.witify.io

Getting started

Install

npm i sprintify-ui --save

Peer dependencies:

sprintify-ui is highly opinionated and requires multiple dependencies :

@vueuse/core axios ckeditor5 @ckeditor/ckeditor5-vue lodash luxon pinia qs tailwindcss vue vue-router

By default, if you don't have these dependencies installed, you will get a warning message in the console.

npm i @vueuse/core axios [...] --save

Basic Configuration

import { createApp } from 'vue';
import axios from "axios";
import { createPinia } from "pinia";
import { createRouter, createWebHistory } from "vue-router";
import SprintifyUI from "sprintify-ui";
import { messages as SprintifyUIMessages } from "sprintify-ui";
import App from './App.vue';

// Import your TailwindCSS *before* importing Sprintify UI CSS
import "./assets/tailwind.css";

// Import Sprintify UI CSS
import "sprintify-ui/dist/style.css";

/** Axios */

const http = axios.create({
  useCredentials: true,
});

/** Vue Router */

const router = createRouter({
  routes: [],
  history: createWebHistory("admin"),
});

const app = createApp(App);

/** Vue Plugins */

app.use(router);
app.use(createPinia());

// Import Sprintify UI plugin
app.use(SprintifyUI, {
  http, // Default axios instance for <BaseAutocompleteFetch>, <BaseDataIterator>, etc...
  upload_url: "/api/files/upload", // Default upload URL for <BaseFileUploader>
});

app.mount("#app");

TailwindCSS

Make sure you have all the required tailwindCSS plugins installed:

npm i tailwindcss @tailwindcss/forms @tailwindcss/typography @tailwindcss/aspect-ratio -D

Update tailwind.config.js

Update your content list :

{
  content: [
    //...,
    "./node_modules/sprintify-ui/src/**/*.ts",
    "./node_modules/sprintify-ui/src/**/*.js",
    "./node_modules/sprintify-ui/src/**/*.vue",
  ],
}

Update your plugin list :

plugins: [
  //...,
  require("sprintify-ui/tailwindcss"),
  require("@tailwindcss/forms"),
  require("@tailwindcss/typography"),
  require("@tailwindcss/aspect-ratio"),
],

Configure using unplugin-vue-components

Add a custom resolver

Components({
  resolvers: [
    (componentName) => {
      if (componentName.startsWith("Base"))
        return { name: componentName, from: "sprintify-ui" };
    },
  ],
}),

Notifications and Dialogs

To use notifications and dialogs, your main layout must contain the <BaseAppSnackbars> and <BaseAppDialogs> components. These components will observe the Pinia store and render dialogs and notifications.

<template>
  <RouterView></RouterView>
  <BaseAppSnackbars />
  <BaseAppDialogs />
</template>

<script lang="ts" setup>
</script>

Custom snackbars and dialogs

You may 100% customize the look and feel of dialogs and snackbars by removing <BaseApp> and instead creating your own render logic. Here's a simple example to render snackbars:

<template>
  <Teleport to="body">
    <div class="pointer-events-none fixed inset-0 flex items-end justify-end p-6 md:p-8">
      <div class="w-full max-w-sm">
        <div v-for="snackbar in snackbars" :key="snackbar.id">
          <h2>{{ snackbar.title }}</h2>
          <p>{{ snackbar.text }}</p>
        </div>
      </div>
    </div>
  </Teleport>
</template>

<script lang="ts" setup>
import { useSnackbarsStore } from 'sprintify-ui';

const snackbarsStore = useSnackbarsStore();

const snackbars = computed(() => {
  return snackbarsStore.snackbars;
});
</script>

Configure countries and regions globally

In order to make BaseAddressForm work correctly, you must import countries and regions to Sprintify UI.

Each country must adhere to the following interface:

• code: string
• name: string

Each region must adhere to the following interface:

• code: string
• name: string
• country_id: string

app.use(SprintifyUI, {
  http,
  // Import while initializing Sprintify UI
  countries: window.yourCountryList,
  regions: window.yourRegionList,
});

Using BaseAddressForm with Google Maps Autocomplete

Add this snippet to your HTML <head>. Replace YOUR_API_KEY with you API key.

<script defer async src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script>

Using components

All components are globally available, you can use them without importation:

<template>
  <BaseAlert title="Test" color="danger"></BaseAlert>
</template>

<script lang="ts" setup>
</script>  

Make changes

Git add .

git add .

Commit

For your commit you must run the following code:

npm run commit

Release

To release (only from main after review)

npm run release

Push to git

git push --follow-tags origin main

Publish to npm

npm publish