@neuralytics/alpine-ds 0.1.0

package/README.md

@@ -0,0 +1,153 @@
+# Alpine
+
+## Neuralytics - Design System
+
+To use it correctly, you have to install some dependencies:
+
+```bash
+pnpm i -D neuralytics-alpine-ds tailwindcss autoprefixer @egoist/tailwindcss-icons
+pnpm i class-variance-authority @iconify-json/mdi
+```
+
+---
+
+After that, you have to init your tailwindcss configuration:
+
+```bash
+npx tailwindcss init
+```
+
+And add the following lines to your `tailwind.config.js`:
+***TO DO** : Export tailwind config*
+
+```js
+const { iconsPlugin, getIconCollections } = require("@egoist/tailwindcss-icons")
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ["./index.html", "./src/**/*.{vue,ts,mdx}"],
+  theme: {
+    fontSize: {
+      sm: ["12px", "16px"],
+      base: ["14px", "20px"],
+      lg: ["16px", "24px"],
+      xl: ["18px", "28px"],
+    },
+    colors: {
+      black: "#000000",
+      white: "#ffffff",
+      transparent: "transparent",
+      inherit: "inherit",
+      // brand
+      brand: {
+        100: "color-mix(in srgb, var(--color-brand) 10%, white)",
+        200: "color-mix(in srgb, var(--color-brand) 30%, white)",
+        300: "color-mix(in srgb, var(--color-brand) 50%, white)",
+        400: "color-mix(in srgb, var(--color-brand) 70%, white)",
+        500: "var(--color-brand)",
+        600: "color-mix(in srgb, var(--color-brand), black 10%)",
+        700: "color-mix(in srgb, var(--color-brand), black 30%)",
+        800: "color-mix(in srgb, var(--color-brand), black 50%)",
+        900: "color-mix(in srgb, var(--color-brand), black 70%)",
+      },
+      // neutral
+      gray: {
+        50: "#fafafa",
+        100: "#f5f5f5",
+        200: "#e5e5e5",
+        300: "#d4d4d4",
+        400: "#a3a3a3",
+        500: "#737373",
+        600: "#525252",
+        700: "#404040",
+        800: "#262626",
+        900: "#171717",
+      },
+      // red
+      red: {
+        100: "#fee2e2",
+        200: "#fecaca",
+        300: "#fca5a5",
+        400: "#f87171",
+        500: "#ef4444",
+        600: "#dc2626",
+        700: "#b91c1c",
+        800: "#991b1b",
+        900: "#7f1d1d",
+      },// amber
+      yellow: {
+        100: "#fef3c7",
+        200: "#fde68a",
+        300: "#fcd34d",
+        400: "#fbbf24",
+        500: "#f59e0b",
+        600: "#d97706",
+        700: "#b45309",
+        800: "#92400e",
+        900: "#78350f",
+      },
+      // blue
+      blue: {
+        100: "#dbeafe",
+        200: "#bfdbfe",
+        300: "#93c5fd",
+        400: "#60a5fa",
+        500: "#3b82f6",
+        600: "#2563eb",
+        700: "#1d4ed8",
+        800: "#1e40af",
+        900: "#1e3a8a",
+      },
+      // green
+      green: {
+        100: "#dcfce7",
+        200: "#bbf7d0",
+        300: "#86efac",
+        400: "#4ade80",
+        500: "#22c55e",
+        600: "#16a34a",
+        700: "#15803d",
+        800: "#166534",
+        900: "#14532d",
+      }
+    },
+    extend: { boxShadow: { "inner-md": "inset 0px 4px 6px rgba(0, 0, 0, 0.1)", }, }
+  },
+  plugins: [
+    iconsPlugin({
+      // Collections: https://icones.js.org/
+      collections: getIconCollections(["mdi"]),
+    })
+  ],
+}
+```
+
+Add those lines to your main css file:
+
+```css
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+```
+
+and import the `neuralytics-alpine-ds` style to your main file:
+
+```js
+import "neuralytics-alpine-ds/css"
+```
+
+---
+
+To use neuralytics-alpine-ds components, follow the examples below:
+
+```js
+import { AlpineButton } from "neuralytics-alpine-ds"
+```
+
+### You want more ?
+
+Do not worry, it's a V0 ! We are working on it to provide you more components and features.
+Thank you for your patience and your interest in our design system.
+
+Love.
+P-a ❤️

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@neuralytics/alpine-ds",
+  "description": "Neuralytics Design System, also called Alpine.",
+  "private": false,
+  "version": "0.1.0",
+  "type": "module",
+  "files": [
+    "dist",
+    "src/components/"
+  ],
+  "license": "ISC",
+  "keywords": [
+    "neuralytics",
+    "alpine",
+    "design-system",
+    "vue3",
+    "vue",
+    "vuejs",
+    "tailwindcss"
+  ],
+  "main": "./dist/neuralytics-alpine-ds.umd.cjs",
+  "module": "./dist/neuralytics-alpine-ds.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/neuralytics-alpine-ds.js",
+      "require": "./dist/neuralytics-alpine-ds.umd.cjs"
+    },
+    "./css": {
+      "import": "./dist/style.css",
+      "require": "./dist/style.css"
+    }
+  },
+  "dependencies": {
+    "@iconify-json/mdi": "^1.1.64",
+    "class-variance-authority": "^0.7.0",
+    "vue": "^3.4.21"
+  },
+  "devDependencies": {
+    "@egoist/tailwindcss-icons": "^1.7.4",
+    "@vitejs/plugin-vue": "^5.0.4",
+    "autoprefixer": "^10.4.19",
+    "path": "^0.12.7",
+    "tailwindcss": "^3.4.3",
+    "typescript": "^5.2.2",
+    "vite": "^5.2.0",
+    "vite-plugin-dts": "^3.8.1",
+    "vue-tsc": "^2.0.6"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc && vite build",
+    "preview": "vite preview"
+  }
+}

package/src/components/button/AlpineButton.vue

@@ -0,0 +1,66 @@
+<template>
+  <button
+    :class="buttonVariants(cva)"
+    @click="handleClick">
+    <Icon
+      v-if="isLoading"
+      :icon="'i-mdi-loading'"
+      class="animate-spin"
+      size="sm" />
+    <Icon
+      v-else-if="icon && iconPosition === 'left'"
+      :icon="icon"
+      size="sm" />
+    <span
+      v-if="label"
+      class="leading-none">
+      {{ label }}
+    </span>
+    <Icon
+      v-if="!isLoading && (icon && iconPosition === 'right')"
+      :icon="icon"
+      size="sm" />
+  </button>
+</template>
+
+<script setup lang="ts">
+import { buttonVariants, type ButtonVariants } from "."
+import { computed, ComputedRef } from "vue"
+import Icon from "../icon/AlpineIcon.vue"
+
+export interface Props {
+  variant?: ButtonVariants["variant"],
+  label?: string | null,
+  icon?: string | null,
+  iconPosition?: string,
+  isLoading?: boolean,
+  isDisabled?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: "primary",
+  label: null,
+  icon: null,
+  iconPosition: "left"
+})
+
+const emit = defineEmits(["clicked"])
+
+const currentStatus = computed(() => {
+  if (props.isLoading) return "loading"
+  if (props.isDisabled) return "disabled"
+  return "default"
+})
+
+const cva: ComputedRef<ButtonVariants> = computed(() => {
+  return {
+    variant: props.variant,
+    status: currentStatus.value
+  }
+})
+
+function handleClick() {
+  if (props.isLoading || props.isDisabled) return
+  emit("clicked")
+}
+</script>

package/src/components/button/index.ts

@@ -0,0 +1,44 @@
+import { cva, type VariantProps } from "class-variance-authority"
+import AlpineButton from "./AlpineButton.vue"
+
+export const buttonVariants = cva(
+  "inline-flex items-center justify-center whitespace-nowrap rounded-lg text-base font-medium transition-all ease-out duration-200 active:shadow-inner-md outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-brand-500 focus-visible:outline-offset-2",
+  {
+    variants: {
+      variant: {
+        primary: "text-white bg-brand-500 hover:bg-brand-600 h-9 px-4 gap-2 hover:shadow",
+        secondary: "text-gray-900 bg-gray-50 hover:bg-gray-100 border border-gray-300 h-9 px-4 gap-2 hover:shadow",
+        invisible: "text-gray-900 hover:bg-gray-200 p-2 gap-2",
+      },
+      status: {
+        default: "",
+        loading: "cursor-wait hover:shadow-none active:shadow-none",
+        disabled: "cursor-not-allowed hover:shadow-none active:shadow-none",
+      }
+    },
+    compoundVariants: [
+      {
+        variant: "primary",
+        status: ["loading", "disabled"],
+        class: "!bg-gray-200 hover:!bg-gray-200 !text-gray-500"
+      },
+      {
+        variant: "secondary",
+        status: ["loading", "disabled"],
+        class: "!text-gray-400 hover:!bg-gray-50"
+      },
+      {
+        variant: "invisible",
+        status: ["loading", "disabled"],
+        class: "!text-gray-400 hover:!bg-gray-100"
+      }
+    ],
+    defaultVariants: {
+      variant: "primary",
+      status: "default"
+    },
+  },
+)
+export type ButtonVariants = VariantProps<typeof buttonVariants>
+
+export default AlpineButton

package/src/components/icon/AlpineIcon.vue

@@ -0,0 +1,30 @@
+<template>
+  <span
+    :class="[displayedIcon, iconColor, iconVariants({ size: props.size })]"
+    @mouseover="isHoverIcon = true"
+    @mouseleave="isHoverIcon = false" />
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from "vue"
+import { type IconVariants, iconVariants } from "."
+
+export interface Props {
+  size?: IconVariants["size"],
+  icon: string,
+  hoverIcon?: string | null,
+  color?: string,
+  hoverColor?: string | null
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: "md",
+  hoverIcon: null,
+  color: "text-neutral-900",
+  hoverColor: null
+})
+
+const isHoverIcon = ref(false)
+const iconColor = computed(() => isHoverIcon.value && props.hoverColor ? props.hoverColor : props.color)
+const displayedIcon = computed(() => isHoverIcon.value && props.hoverIcon ? props.hoverIcon : props.icon)
+</script>

package/src/components/icon/index.ts

@@ -0,0 +1,19 @@
+import { cva, type VariantProps } from "class-variance-authority"
+import AlpineIcon from "./AlpineIcon.vue"
+
+export const iconVariants = cva(
+  "",
+  {
+    variants: {
+      size: {
+        sm: "text-[20px]",
+        md: "text-[24px]",
+        lg: "text-[28px]",
+      }
+    },
+    defaultVariants: { size: "md" },
+  },
+)
+
+export type IconVariants = VariantProps<typeof iconVariants>
+export default AlpineIcon