@caipira/tamandua 0.0.1

package/index.css

@@ -0,0 +1,383 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+    /*
+        Theme configuration:
+
+        --caipira-primary:    [Accent color]     Background color of content (pages, cards, etc)
+        --caipira-secondary:  [Contrast color]   Hover color
+        --caipira-tertiary:   [Background color] Border color, unfocused text color, app background color
+        --caipira-quaternary: [Unused]
+        --caipira-quinary:    [Unused]
+    */
+
+    /*
+        Light theme
+    */
+    --caipira-light-primary: #fff;
+    --caipira-light-secondary: #f1f3f4;
+    --caipira-light-tertiary: #d3d3d3;
+    --caipira-light-quaternary: #d1d1d1;
+    --caipira-light-quinary: #efefef;
+    --caipira-light-red: #e64553;
+    --caipira-light-green: #16a34ae6;
+    --caipira-light-yellow: #df8e1d;
+    --caipira-light-blue: #1e66f5;
+
+    /*
+        Dark theme
+    */
+    --caipira-dark-primary: #121212;
+    --caipira-dark-secondary: #282828;
+    --caipira-dark-tertiary: #262626;
+    --caipira-dark-quaternary: #525252;
+    --caipira-dark-quinary: #202020;
+    --caipira-dark-red: #f38ba8;
+    --caipira-dark-green: #a6e3a1;
+    --caipira-dark-yellow: #f9e2af;
+    --caipira-dark-blue: #4089ff;
+
+    &:not(.dark) {
+        /* Colors */
+        --caipira-primary: var(--caipira-light-primary);
+        --caipira-primary-inverted: var(--caipira-dark-primary);
+        --caipira-secondary: var(--caipira-light-secondary);
+        --caipira-secondary-inverted: var(--caipira-dark-secondary);
+        --caipira-tertiary: var(--caipira-light-tertiary);
+        --caipira-quaternary: var(--caipira-light-quaternary);
+        --caipira-quinary: var(--caipira-light-quinary);
+        --caipira-red: var(--caipira-light-red);
+        --caipira-green: var(--caipira-light-green);
+        --caipira-yellow: var(--caipira-light-yellow);
+        --caipira-blue: var(--caipira-light-blue);
+
+        /* Functional color pointers */
+        --border-color: var(--caipira-light-tertiary);
+        --unfocused-color: var(--caipira-light-tertiary);
+        --hover-color: var(--caipira-light-secondary);
+    }
+
+    &.dark {
+        /* Colors */
+        --caipira-primary: var(--caipira-dark-primary);
+        --caipira-primary-inverted: var(--caipira-light-primary);
+        --caipira-secondary: var(--caipira-dark-secondary);
+        --caipira-secondary-inverted: var(--caipira-light-secondary);
+        --caipira-tertiary: var(--caipira-dark-tertiary);
+        --caipira-quaternary: var(--caipira-dark-quaternary);
+        --caipira-quinary: var(--caipira-dark-quinary);
+        --caipira-red: var(--caipira-dark-red);
+        --caipira-green: var(--caipira-dark-green);
+        --caipira-yellow: var(--caipira-dark-yellow);
+        --caipira-blue: var(--caipira-dark-blue);
+
+        /* Functional color pointers */
+        --border-color: var(--caipira-dark-tertiary);
+        --unfocused-color: var(--caipira-dark-tertiary);
+        --hover-color: var(--caipira-dark-quinary);
+    }
+}
+
+@layer components {
+    /* Background */
+    .bg-caipira-primary {
+        background-color: var(--caipira-primary);
+    }
+    .bg-caipira-primary-inverted {
+        background-color: var(--caipira-primary-inverted);
+    }
+    .bg-caipira-secondary {
+        background-color: var(--caipira-secondary);
+    }
+    .bg-caipira-tertiary {
+        background-color: var(--caipira-tertiary);
+    }
+    .bg-caipira-blue {
+        background-color: var(--caipira-blue);
+    }
+    .bg-caipira-red {
+        background-color: var(--caipira-red);
+    }
+    .bg-caipira-yellow {
+        background-color: var(--caipira-yellow);
+    }
+    .bg-caipira-green {
+        background-color: var(--caipira-green);
+    }
+    .bg-hover {
+        background-color: var(--hover-color);
+    }
+
+    /* Border */
+    .border-color {
+        border-color: var(--border-color);
+    }
+    .border-caipira-primary-inverted {
+        border-color: var(--caipira-primary-inverted);
+    }
+    .border-caipira-tertiary {
+        border-color: var(--caipira-tertiary);
+    }
+    .border-caipira-blue {
+        border-color: var(--caipira-blue);
+    }
+    .border-caipira-red {
+        border-color: var(--caipira-red);
+    }
+    .border-caipira-yellow {
+        border-color: var(--caipira-yellow);
+    }
+    .border-caipira-green {
+        border-color: var(--caipira-green);
+    }
+
+    /* Text */
+    .color-caipira-primary {
+        color: var(--caipira-primary);
+    }
+    .color-caipira-primary-inverted {
+        color: var(--caipira-primary-inverted);
+    }
+    .color-text {
+        color: var(--caipira-secondary-inverted);
+    }
+    .color-unfocused-text {
+        color: var(--caipira-tertiary);
+    }
+    .color-caipira-blue {
+        color: var(--caipira-blue);
+    }
+    .color-caipira-red {
+        color: var(--caipira-red);
+    }
+    .color-caipira-yellow {
+        color: var(--caipira-yellow);
+    }
+    .color-caipira-green {
+        color: var(--caipira-green);
+    }
+
+    /* Fill */
+    .fill-caipira-primary-inverted {
+        fill: var(--caipira-primary-inverted);
+    }
+    .fill-caipira-blue {
+        fill: var(--caipira-blue);
+    }
+    .fill-caipira-red {
+        fill: var(--caipira-red);
+    }
+    .fill-caipira-yellow {
+        fill: var(--caipira-yellow);
+    }
+    .fill-caipira-green {
+        fill: var(--caipira-green);
+    }
+
+    /* Input */
+    .input-border {
+        border-color: var(--border-color);
+    }
+    .input-roundness {
+        @apply rounded-sm;
+    }
+    .input-outline {
+        @apply focus:outline focus:outline-1 focus:ring-1;
+        outline-color: var(--caipira-blue);
+
+        &:focus {
+            box-shadow: none !important;
+        }
+    }
+    .input-bg-color {
+        @apply bg-caipira-primary;
+    }
+    .input-text-color {
+        @apply color-text;
+    }
+    .input-padding {
+        @apply pl-2 pr-1;
+    }
+    .input-control {
+        @apply flex justify-center items-center w-12 input-bg-color;
+    }
+    .input-label {
+        @apply select-none color-text;
+    }
+
+    /* Card */
+    .card {
+        @apply relative max-w-md w-full rounded border border-color color-text bg-caipira-primary;
+    }
+    .card-grid {
+        @apply flex flex-wrap justify-center md:justify-start items-stretch gap-3;
+    }
+
+    /* Page */
+    .page-margin {
+        @apply p-2 md:p-6 pb-12;
+    }
+
+    /* Floatables (Modal, Popover, etc) */
+    .floatable {
+        @apply shadow border border-color color-text bg-caipira-primary;
+    }
+}
+
+.favicon {
+    width: 1.2rem;
+    margin-right: 0.5rem;
+    display: inline-block;
+}
+
+.fs {
+    width: 20px;
+    height: 20px;
+    content: url("https://static.%GLOBAL_DOMAIN%/site/assets/images/fs/unknown.svg");
+}
+
+.fs.bmp {
+    content: url("https://static.%GLOBAL_DOMAIN%/site/assets/images/fs/bmp.svg");
+}
+
+.fs.ics {
+    content: url("https://static.%GLOBAL_DOMAIN%/site/assets/images/fs/ics.svg");
+}
+
+.fs.jpg {
+    content: url("https://static.%GLOBAL_DOMAIN%/site/assets/images/fs/jpg.svg");
+}
+
+.fs.jpeg {
+    content: url("https://static.%GLOBAL_DOMAIN%/site/assets/images/fs/jpeg.svg");
+}
+
+.fs.doc {
+    content: url("https://static.%GLOBAL_DOMAIN%/site/assets/images/fs/doc.svg");
+}
+
+.fs.docx {
+    content: url("https://static.%GLOBAL_DOMAIN%/site/assets/images/fs/docx.svg");
+}
+
+.fs.gif {
+    content: url("https://static.%GLOBAL_DOMAIN%/site/assets/images/fs/gif.svg");
+}
+
+.fs.mp3 {
+    content: url("https://static.%GLOBAL_DOMAIN%/site/assets/images/fs/mp3.svg");
+}
+
+.fs.mp4 {
+    content: url("https://static.%GLOBAL_DOMAIN%/site/assets/images/fs/mp4.svg");
+}
+
+.fs.pdf {
+    content: url("https://static.%GLOBAL_DOMAIN%/site/assets/images/fs/pdf.svg");
+}
+
+.fs.png {
+    content: url("https://static.%GLOBAL_DOMAIN%/site/assets/images/fs/png.svg");
+}
+
+.fs.rar {
+    content: url("https://static.%GLOBAL_DOMAIN%/site/assets/images/fs/rar.svg");
+}
+
+.fs.tar {
+    content: url("https://static.%GLOBAL_DOMAIN%/site/assets/images/fs/tar.svg");
+}
+
+.fs.txt {
+    content: url("https://static.%GLOBAL_DOMAIN%/site/assets/images/fs/txt.svg");
+}
+
+.fs.xls {
+    content: url("https://static.%GLOBAL_DOMAIN%/site/assets/images/fs/xls.svg");
+}
+
+.fs.xlsx {
+    content: url("https://static.%GLOBAL_DOMAIN%/site/assets/images/fs/xlsx.svg");
+}
+
+.fs.xml {
+    content: url("https://static.%GLOBAL_DOMAIN%/site/assets/images/fs/xml.svg");
+}
+
+.fs.yaml {
+    content: url("https://static.%GLOBAL_DOMAIN%/site/assets/images/fs/yaml.svg");
+}
+
+.fs.zip {
+    content: url("https://static.%GLOBAL_DOMAIN%/site/assets/images/fs/zip.svg");
+}
+
+.fs.dir {
+    content: url("https://static.%GLOBAL_DOMAIN%/site/assets/images/fs/folder-paleorange.svg");
+}
+
+html,
+body {
+    font-family: "San Francisco", sans-serif; /* font-family: "Inter", sans-serif; */
+    -webkit-font-smoothing: antialiased;
+    font-size: 16px; /* Min font size not to trigger zoom effect on input on safari */
+    position: relative;
+    margin: 0;
+    border: 0;
+    padding: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    overflow: auto;
+}
+
+/* Scrollbar */
+
+.scrollbar {
+    &::-webkit-scrollbar {
+        width: 7px;
+        height: 10px;
+        border-radius: 5px;
+    }
+
+    &::-webkit-scrollbar-track {
+        background: var(--caipira-secondary);
+    }
+
+    &::-webkit-scrollbar-thumb {
+        background-color: var(--caipira-quaternary);
+        border-radius: 5px;
+    }
+}
+
+/* Tailwind form hack to show the data images */
+
+&:not(.dark) {
+    .form-radio:checked {
+        background-image: url("/assets/icons/radio-dark.svg");
+    }
+
+    .form-checkbox:checked {
+        background-image: url("/assets/icons/checkbox.svg");
+    }
+
+    .form-checkbox:indeterminate {
+        background-image: url("/assets/icons/checkbox-indeterminate.svg");
+    }
+}
+
+&.dark {
+    .form-radio:checked {
+        background-image: url("/assets/icons/radio.svg");
+    }
+
+    .form-checkbox:checked {
+        background-image: url("/assets/icons/checkbox-dark.svg");
+    }
+
+    .form-checkbox:indeterminate {
+        background-image: url("/assets/icons/checkbox-indeterminate-dark.svg");
+    }
+}

package/index.html

@@ -0,0 +1,22 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <link
+            rel="icon"
+            href="/assets/images/favicon.ico"
+        />
+        <meta
+            name="viewport"
+            content="width=device-width, initial-scale=1.0"
+        />
+        <title>Caipira Cloud</title>
+    </head>
+    <body class="text-base color-text bg-caipira-tertiary">
+        <div id="app"></div>
+        <script
+            type="module"
+            src="./main.ts"
+        ></script>
+    </body>
+</html>

package/index.ts

@@ -0,0 +1,14 @@
+import type { App, Plugin } from "vue";
+
+import * as plugins from "@/components/plugins";
+
+const plugin: Plugin = {
+    install(app: App) {
+        for (const componentKey in plugins) {
+            app.use(plugins[componentKey]);
+        }
+    },
+};
+
+export * from "@/components";
+export default plugin;

package/main.ts

@@ -0,0 +1,31 @@
+import i18n from "@/i18n";
+import Tamandua from "@/index";
+import { createApp } from "vue";
+
+import App from "@/App.vue";
+import "@/index.css";
+
+import {
+    Chart,
+    Legend,
+    Tooltip,
+    ArcElement,
+    LinearScale,
+    LineElement,
+    PointElement,
+    CategoryScale,
+    LineController,
+} from "chart.js";
+
+Chart.register(
+    Legend,
+    Tooltip,
+    ArcElement,
+    LinearScale,
+    LineElement,
+    PointElement,
+    CategoryScale,
+    LineController,
+);
+
+createApp(App).use(i18n).use(Tamandua).mount("#app");

package/package.json

@@ -0,0 +1,70 @@
+{
+    "name": "@caipira/tamandua",
+    "version": "0.0.1",
+    "description": "UI library for the Caipira ecosystem",
+    "license": "UNLICENSED",
+    "homepage": "https://caipira.io",
+    "author": {
+        "name": "Theone Lucas",
+        "email": "theone@caipira.io"
+    },
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/caipira-io/tamandua.git"
+    },
+    "typings": "dist/types/index.d.ts",
+    "exports": {
+        "./*": "./*"
+    },
+    "scripts": {
+        "start": "vite --host",
+        "build": "vite build",
+        "preview": "vite preview",
+        "start:test": "vitest",
+        "test": "vitest --run",
+        "typecheck": "vue-tsc --noEmit --skipLibCheck -p tsconfig.json --composite false",
+        "start:sb": "storybook dev",
+        "build:sb": "storybook build"
+    },
+    "dependencies": {
+        "chart.js": "^4.0.0",
+        "date-fns": "^2.25.0",
+        "gsap": "^3.12.2",
+        "vue-chartjs": "^5.2.0"
+    },
+    "peerDependencies": {
+        "vue": "^3.0.0",
+        "vue-i18n": "9"
+    },
+    "devDependencies": {
+        "@faker-js/faker": "^8.4.1",
+        "@popperjs/core": "^2.10.1",
+        "@storybook/addon-actions": "^8.0.5",
+        "@storybook/addon-essentials": "^8.0.5",
+        "@storybook/addon-interactions": "^8.0.5",
+        "@storybook/addon-links": "^8.0.5",
+        "@storybook/addon-themes": "^8.0.5",
+        "@storybook/blocks": "^8.0.5",
+        "@storybook/builder-vite": "^8.0.5",
+        "@storybook/testing-library": "^0.2.2",
+        "@storybook/vue3": "^8.0.5",
+        "@storybook/vue3-vite": "^8.0.5",
+        "@tailwindcss/forms": "^0.5.6",
+        "@types/js-cookie": "^2.2.7",
+        "@types/node": "^20.11.30",
+        "@vitejs/plugin-vue": "^5.0.4",
+        "@vue/test-utils": "^2.4.1",
+        "autoprefixer": "^10.4.0",
+        "jsdom": "^24.0.0",
+        "postcss": "^8.4.5",
+        "storybook": "^8.0.5",
+        "tailwindcss": "^3.4.3",
+        "ts-node": "^10.9.1",
+        "typescript": "^5.1.3",
+        "vite": "^5.2.6",
+        "vite-tsconfig-paths": "^4.2.0",
+        "vitest": "^1.4.0",
+        "vue": "^3.4.21",
+        "vue-tsc": "^1.8.0"
+    }
+}

package/plugins/register-component.ts

@@ -0,0 +1,5 @@
+import type { App, Component } from "vue";
+
+export default (app: App, component: Component): void => {
+    app.component(component.name as string, component);
+};

package/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

package/services/clipboard.ts

@@ -0,0 +1,5 @@
+export default async (text: string) => {
+  if (navigator.clipboard) {
+    await navigator.clipboard.writeText(text);
+  }
+}

package/services/date.ts

@@ -0,0 +1,27 @@
+import {
+    format,
+    isToday,
+    setDate,
+    setYear,
+    addMonths,
+    subMonths,
+    addMinutes,
+    getUnixTime,
+    formatDistance,
+    getDaysInMonth,
+    formatDistanceToNow,
+} from "date-fns";
+
+export default {
+    format,
+    isToday,
+    setDate,
+    setYear,
+    addMonths,
+    subMonths,
+    addMinutes,
+    getUnixTime,
+    formatDistance,
+    getDaysInMonth,
+    formatDistanceToNow,
+};

package/services/form/crud.ts

@@ -0,0 +1,109 @@
+import { FormStates } from "@/enums/form";
+
+import Form from "@/components/Form/Form.vue";
+
+export default class CrudService {
+    id: string = "";
+    visible = false;
+    state = FormStates.ADD;
+    title = "";
+    titles = {
+        ADD: `Add `,
+        EDIT: `Edit `,
+    };
+
+    isLoading: boolean = false;
+    formReference: InstanceType<typeof Form> | null = null;
+
+    constructor(entity: string, formReference: any) {
+        this.titles.ADD = this.titles.ADD + entity;
+        this.titles.EDIT = this.titles.EDIT + entity;
+
+        this.formReference = formReference;
+    }
+
+    get isEditing(): boolean {
+        return this.state === FormStates.EDIT;
+    }
+
+    get isCreating(): boolean {
+        return this.state === FormStates.ADD;
+    }
+
+    show(state: FormStates = FormStates.ADD) {
+        switch (state) {
+            case FormStates.ADD:
+                this.id = "";
+                this.title = this.titles.ADD;
+                this.state = FormStates.ADD;
+                break;
+            case FormStates.EDIT:
+                this.title = this.titles.EDIT;
+                this.state = FormStates.EDIT;
+                break;
+        }
+
+        this.visible = true;
+    }
+
+    setLoading(value: boolean = true) {
+        this.isLoading = value;
+    }
+
+    edit(id: string) {
+        this.id = id;
+
+        this.show(FormStates.EDIT);
+    }
+
+    close() {
+        this.reset();
+        this.visible = false;
+    }
+
+    reset() {
+        this.id = "";
+
+        if (this.formReference && this.formReference.reset) {
+            this.formReference?.reset();
+        }
+
+        if (this.isLoading) {
+            this.isLoading = false;
+        }
+    }
+
+    save() {
+        if (!this.formReference) {
+            return;
+        }
+
+        this.isLoading = true;
+        this.formReference.submit();
+    }
+
+    onSave(close: boolean = true) {
+        if (close) {
+            this.close();
+        }
+
+        this.reset();
+    }
+
+    delete() {
+        if (!this.formReference) {
+            return;
+        }
+
+        this.isLoading = true;
+        this.formReference.deleteItem();
+    }
+
+    onDelete(close: boolean = true) {
+        if (close) {
+            this.close();
+        }
+
+        this.reset();
+    }
+}