@for-the-people-initiative/design-system 1.3.1

package/package.json

@@ -0,0 +1,80 @@
+{
+  "name": "@for-the-people-initiative/design-system",
+  "private": false,
+  "version": "1.3.1",
+  "type": "module",
+  "description": "Design system with design tokens, SCSS utilities, and Vue 3 components",
+  "author": "For The People",
+  "license": "MIT",
+  "keywords": [
+    "design-system",
+    "design-tokens",
+    "scss",
+    "vue",
+    "vue3",
+    "components"
+  ],
+  "files": [
+    "dist",
+    "src/scss",
+    "src/components",
+    "tokens"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/ts/tokens.ts",
+      "import": "./dist/ts/tokens.ts"
+    },
+    "./css": "./dist/css/tokens.css",
+    "./css/tokens.css": "./dist/css/tokens.css",
+    "./css/theme-dark.css": "./dist/css/theme-dark.css",
+    "./scss": "./dist/scss/_tokens.scss",
+    "./scss/tokens": "./dist/scss/_tokens.scss",
+    "./scss/mixins/*": "./src/scss/mixins/*",
+    "./components/*": "./src/components/*"
+  },
+  "main": "./dist/ts/tokens.ts",
+  "scripts": {
+    "build:tokens": "tsx scripts/build-tokens.ts",
+    "dev": "npm run build:tokens && npm --prefix server run dev",
+    "build": "npm run build:tokens && npm --prefix server install && npm --prefix server run build",
+    "preview": "npm --prefix server run preview",
+    "prepublishOnly": "npm run build:tokens",
+    "publish-all": "npm run build:tokens && npm publish && node ./workflow/DeploymentCDN/preprocessUtilityClasses.cjs && node ./workflow/DeploymentCDN/deployUtilityClassesToCDN.cjs",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "story:dev": "histoire dev",
+    "story:build": "histoire build",
+    "story:preview": "histoire preview",
+    "process-utility-classes": "node ./workflow/DeploymentCDN/preprocessUtilityClasses.cjs",
+    "deploy-utility-classes": "node ./workflow/DeploymentCDN/deployUtilityClassesToCDN.cjs"
+  },
+  "devDependencies": {
+    "@azure/storage-blob": "^12.16.0",
+    "@histoire/plugin-vue": "~0.17.17",
+    "@storybook/addon-essentials": "^8.6.14",
+    "@storybook/blocks": "^8.6.14",
+    "@storybook/manager-api": "^8.6.14",
+    "@storybook/theming": "^8.6.14",
+    "@storybook/vue3": "^8.6.15",
+    "@storybook/vue3-vite": "^8.6.15",
+    "@vitejs/plugin-vue": "^4.2.3",
+    "basic-ftp": "^5.0.3",
+    "consola": "^3.2.3",
+    "dotenv": "^16.4.5",
+    "glob-promise": "^6.0.7",
+    "histoire": "~0.17.17",
+    "lodash": "^4.17.21",
+    "sass": "^1.64.2",
+    "storybook": "^8.6.15",
+    "storybook-design-token": "^3.3.0",
+    "tsx": "^4.19.0",
+    "typescript": "^5.6.0",
+    "uglifycss": "^0.0.29",
+    "vite": "^4.4.5",
+    "vue": "^3.5.0"
+  },
+  "dependencies": {
+    "chart.js": "^4.5.1"
+  }
+}

package/src/components/Accordion/Accordion.scss

@@ -0,0 +1,118 @@
+@use "../../../dist/scss/tokens" as *;
+
+$c: accordion;
+
+.#{$c} {
+  display: flex;
+  flex-direction: column;
+  gap: var(--accordion-gap, $accordion-gap);
+  width: 100%;
+}
+
+.#{$c}__tab {
+  border: var(--accordion-border-width, $accordion-border-width) solid var(--accordion-border-color, $accordion-border-color);
+  border-radius: var(--accordion-border-radius, $accordion-border-radius);
+  overflow: hidden;
+}
+
+.#{$c}__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: var(--accordion-header-padding, $accordion-header-padding);
+  background-color: var(--accordion-header-background-default, $accordion-header-background-default);
+  color: var(--accordion-header-color-default, $accordion-header-color-default);
+  border: none;
+  cursor: pointer;
+  font-family: inherit;
+  font-size: inherit;
+  text-align: left;
+  transition: background-color var(--accordion-transition-duration, $accordion-transition-duration) ease,
+              color var(--accordion-transition-duration, $accordion-transition-duration) ease;
+
+  &:hover:not(:disabled) {
+    background-color: var(--accordion-header-background-hover, $accordion-header-background-hover);
+    color: var(--accordion-header-color-hover, $accordion-header-color-hover);
+
+    .#{$c}__icon {
+      color: var(--accordion-icon-color-hover, $accordion-icon-color-hover);
+    }
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--accordion-border-color, $accordion-border-color);
+    outline-offset: -2px;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    color: var(--accordion-header-color-disabled, $accordion-header-color-disabled);
+  }
+}
+
+.#{$c}__header-text {
+  flex: 1;
+  font-weight: 500;
+}
+
+.#{$c}__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--accordion-icon-size, $accordion-icon-size);
+  height: var(--accordion-icon-size, $accordion-icon-size);
+  color: var(--accordion-icon-color-default, $accordion-icon-color-default);
+  transition: transform var(--accordion-transition-duration, $accordion-transition-duration) ease,
+              color var(--accordion-transition-duration, $accordion-transition-duration) ease;
+  transform: rotate(var(--accordion-icon-rotation-collapsed, $accordion-icon-rotation-collapsed));
+
+  svg {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.#{$c}__content-wrapper {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows var(--accordion-transition-duration, $accordion-transition-duration) ease;
+}
+
+.#{$c}__content {
+  overflow: hidden;
+  background-color: var(--accordion-content-background, $accordion-content-background);
+  color: var(--accordion-content-color, $accordion-content-color);
+}
+
+// Active state
+.#{$c}__tab--active {
+  .#{$c}__header {
+    background-color: var(--accordion-header-background-active, $accordion-header-background-active);
+  }
+
+  .#{$c}__icon {
+    transform: rotate(var(--accordion-icon-rotation-expanded, $accordion-icon-rotation-expanded));
+  }
+
+  .#{$c}__content-wrapper {
+    grid-template-rows: 1fr;
+  }
+
+  .#{$c}__content {
+    padding: var(--accordion-content-padding, $accordion-content-padding);
+    border-top: var(--accordion-border-width, $accordion-border-width) solid var(--accordion-border-color, $accordion-border-color);
+  }
+}
+
+// Disabled state
+.#{$c}__tab--disabled {
+  .#{$c}__header {
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+
+  .#{$c}__icon {
+    color: var(--accordion-icon-color-disabled, $accordion-icon-color-disabled);
+  }
+}

package/src/components/Accordion/Accordion.vue

@@ -0,0 +1,105 @@
+<template>
+  <div class="accordion" :class="additionalClasses">
+    <slot></slot>
+  </div>
+</template>
+
+<style src="./Accordion.scss"></style>
+
+<script setup lang="ts">
+import type { AccordionProps, AccordionEmits } from '../../types';
+import { computed, provide, ref, watch } from "vue";
+
+defineOptions({ name: 'FtpAccordion' });
+
+const props = withDefaults(defineProps<AccordionProps>(), {
+  activeIndex: null,
+  multiple: false,
+});
+
+const emit = defineEmits(["update:activeIndex", "tab-open", "tab-close"]);
+
+// Internal state for active tabs
+const activeIndices = ref(
+  props.multiple
+    ? Array.isArray(props.activeIndex)
+      ? [...props.activeIndex]
+      : props.activeIndex !== null
+        ? [props.activeIndex]
+        : []
+    : props.activeIndex !== null
+      ? [props.activeIndex]
+      : []
+);
+
+// Watch for external changes to activeIndex
+watch(
+  () => props.activeIndex,
+  (newVal) => {
+    if (props.multiple) {
+      activeIndices.value = Array.isArray(newVal)
+        ? [...newVal]
+        : newVal !== null
+          ? [newVal]
+          : [];
+    } else {
+      activeIndices.value = newVal !== null ? [newVal] : [];
+    }
+  }
+);
+
+// Tab registration
+let tabCount = ref(0);
+
+const registerTab = () => {
+  const index = tabCount.value;
+  tabCount.value++;
+  return index;
+};
+
+const isTabActive = (index: number) => {
+  return activeIndices.value.includes(index);
+};
+
+const toggleTab = (index: any, disabled: any) => {
+  if (disabled) return;
+
+  const isActive = activeIndices.value.includes(index);
+
+  if (props.multiple) {
+    if (isActive) {
+      activeIndices.value = activeIndices.value.filter((i) => i !== index);
+      emit("tab-close", { index });
+    } else {
+      activeIndices.value = [...activeIndices.value, index];
+      emit("tab-open", { index });
+    }
+    emit("update:activeIndex", [...activeIndices.value]);
+  } else {
+    if (isActive) {
+      activeIndices.value = [];
+      emit("tab-close", { index });
+      emit("update:activeIndex", null);
+    } else {
+      const previousIndex = activeIndices.value[0];
+      if (previousIndex !== undefined) {
+        emit("tab-close", { index: previousIndex });
+      }
+      activeIndices.value = [index];
+      emit("tab-open", { index });
+      emit("update:activeIndex", index);
+    }
+  }
+};
+
+// Provide context to child AccordionTab components
+provide("accordion", {
+  registerTab,
+  isTabActive,
+  toggleTab,
+});
+
+const additionalClasses = computed(() =>
+  [props.multiple && "accordion--multiple"].filter(Boolean).join(" ")
+);
+</script>

package/src/components/Accordion/AccordionTab.vue

@@ -0,0 +1,79 @@
+<template>
+  <div class="accordion__tab" :class="tabClasses">
+    <button
+      type="button"
+      class="accordion__header"
+      :disabled="isDisabled"
+      :aria-expanded="isActive"
+      :aria-controls="contentId"
+      @click="handleClick"
+    >
+      <span class="accordion__header-text">
+        <slot name="header">{{ header }}</slot>
+      </span>
+      <span class="accordion__icon">
+        <svg
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <polyline points="6 9 12 15 18 9"></polyline>
+        </svg>
+      </span>
+    </button>
+    <div
+      :id="contentId"
+      class="accordion__content-wrapper"
+      :aria-hidden="!isActive"
+    >
+      <div class="accordion__content">
+        <slot></slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { AccordionTabProps } from '../../types';
+import { computed, inject, onMounted, ref } from "vue";
+
+defineOptions({ name: 'FtpAccordionTab' });
+
+const props = withDefaults(defineProps<AccordionTabProps>(), {
+  header: "",
+  isDisabled: false,
+});
+
+const accordion = inject<{ registerTab: () => number; isTabActive: (index: number) => boolean; toggleTab: (index: number, disabled: boolean) => void }>("accordion");
+const tabIndex = ref(-1);
+const contentId = computed(() => `accordion-content-${tabIndex.value}`);
+
+onMounted(() => {
+  if (accordion) {
+    tabIndex.value = accordion.registerTab();
+  }
+});
+
+const isActive = computed(() => {
+  if (!accordion || tabIndex.value === -1) return false;
+  return accordion.isTabActive(tabIndex.value);
+});
+
+const handleClick = () => {
+  if (accordion && !props.isDisabled) {
+    accordion.toggleTab(tabIndex.value, props.isDisabled);
+  }
+};
+
+const tabClasses = computed(() =>
+  [
+    isActive.value && "accordion__tab--active",
+    props.isDisabled && "accordion__tab--disabled",
+  ]
+    .filter(Boolean)
+    .join(" ")
+);
+</script>

package/src/components/Alert/Alert.scss

@@ -0,0 +1,109 @@
+@use "../../../dist/scss/tokens" as *;
+
+$c: alert;
+
+.#{$c} {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  padding: 1rem 1.25rem;
+  border-radius: 0.5rem;
+  border: 1px solid transparent;
+  font-size: 0.875rem;
+  line-height: 1.5;
+
+  &--success {
+    background-color: var(--color-success-subtle, rgba(34, 197, 94, 0.1));
+    border-color: var(--color-success-border, rgba(34, 197, 94, 0.3));
+    color: var(--color-success-text, #16a34a);
+
+    .#{$c}__icon { color: var(--color-success, #22c55e); }
+  }
+
+  &--info {
+    background-color: var(--color-info-subtle, rgba(59, 130, 246, 0.1));
+    border-color: var(--color-info-border, rgba(59, 130, 246, 0.3));
+    color: var(--color-info-text, #2563eb);
+
+    .#{$c}__icon { color: var(--color-info, #3b82f6); }
+  }
+
+  &--warn {
+    background-color: var(--color-warning-subtle, rgba(245, 158, 11, 0.1));
+    border-color: var(--color-warning-border, rgba(245, 158, 11, 0.3));
+    color: var(--color-warning-text, #d97706);
+
+    .#{$c}__icon { color: var(--color-warning, #f59e0b); }
+  }
+
+  &--error {
+    background-color: var(--color-error-subtle, rgba(239, 68, 68, 0.1));
+    border-color: var(--color-error-border, rgba(239, 68, 68, 0.3));
+    color: var(--color-error-text, #dc2626);
+
+    .#{$c}__icon { color: var(--color-error, #ef4444); }
+  }
+}
+
+.#{$c}__icon-wrapper {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  padding-top: 0.125rem;
+}
+
+.#{$c}__icon {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+.#{$c}__content {
+  flex: 1;
+  min-width: 0;
+}
+
+.#{$c}__title {
+  font-weight: 600;
+  margin-bottom: 0.25rem;
+}
+
+.#{$c}__description {
+  opacity: 0.9;
+}
+
+.#{$c}__action {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+}
+
+.#{$c}__close {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: currentColor;
+  opacity: 0.5;
+  cursor: pointer;
+  border-radius: 0.25rem;
+  transition: opacity 0.15s ease;
+
+  &:hover {
+    opacity: 1;
+  }
+
+  &:focus-visible {
+    outline: 2px solid currentColor;
+    outline-offset: 2px;
+  }
+}
+
+.#{$c}__close-icon {
+  width: 1rem;
+  height: 1rem;
+}

package/src/components/Alert/Alert.vue

@@ -0,0 +1,79 @@
+<template>
+  <div
+    v-if="!dismissed"
+    class="alert"
+    :class="additionalClasses"
+    role="alert"
+  >
+    <div class="alert__icon-wrapper" aria-hidden="true">
+      <slot name="icon">
+        <svg v-if="computedIcon === 'success'" class="alert__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" /><polyline points="22 4 12 14.01 9 11.01" />
+        </svg>
+        <svg v-else-if="computedIcon === 'info'" class="alert__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <circle cx="12" cy="12" r="10" /><line x1="12" y1="16" x2="12" y2="12" /><line x1="12" y1="8" x2="12.01" y2="8" />
+        </svg>
+        <svg v-else-if="computedIcon === 'warn'" class="alert__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" /><line x1="12" y1="9" x2="12" y2="13" /><line x1="12" y1="17" x2="12.01" y2="17" />
+        </svg>
+        <svg v-else-if="computedIcon === 'error'" class="alert__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <circle cx="12" cy="12" r="10" /><line x1="15" y1="9" x2="9" y2="15" /><line x1="9" y1="9" x2="15" y2="15" />
+        </svg>
+      </slot>
+    </div>
+
+    <div class="alert__content">
+      <div v-if="title" class="alert__title">{{ title }}</div>
+      <div v-if="$slots.default" class="alert__description">
+        <slot />
+      </div>
+    </div>
+
+    <div v-if="$slots.action" class="alert__action">
+      <slot name="action" />
+    </div>
+
+    <button
+      v-if="closable"
+      type="button"
+      class="alert__close"
+      aria-label="Close"
+      @click="onClose"
+    >
+      <svg class="alert__close-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" />
+      </svg>
+    </button>
+  </div>
+</template>
+
+<style src="./Alert.scss"></style>
+
+<script setup lang="ts">
+import type { AlertProps } from '../../types';
+import { computed, ref } from 'vue';
+
+defineOptions({ name: 'FtpAlert' });
+
+const props = withDefaults(defineProps<AlertProps>(), {
+  severity: 'info',
+  closable: false,
+});
+
+const emit = defineEmits<{
+  (e: 'close'): void
+}>();
+
+const dismissed = ref(false);
+
+const computedIcon = computed(() => props.icon ?? props.severity);
+
+const additionalClasses = computed(() =>
+  [`alert--${props.severity}`].filter(Boolean).join(' ')
+);
+
+const onClose = () => {
+  dismissed.value = true;
+  emit('close');
+};
+</script>

package/src/components/AppBar/AppBar.scss

@@ -0,0 +1,73 @@
+@use "../../../dist/scss/tokens" as *;
+
+$c: app-bar;
+
+.#{$c} {
+  width: 100%;
+  background: var(--surface-overlay, #1e1e2e);
+  border-bottom: 1px solid var(--surface-border, rgba(255, 255, 255, 0.1));
+  z-index: 1000;
+
+  &--fixed {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+  }
+
+  &--elevated {
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+  }
+
+  &--transparent {
+    background: transparent;
+    border-bottom-color: transparent;
+    box-shadow: none;
+  }
+}
+
+.#{$c}__container {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  height: 3.5rem;
+  padding: 0 1.5rem;
+  max-width: 100%;
+}
+
+.#{$c}__start {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-shrink: 0;
+}
+
+.#{$c}__center {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: var(--text-primary, #fff);
+}
+
+.#{$c}__end {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-shrink: 0;
+}
+
+// Responsive
+@media (max-width: 640px) {
+  .#{$c}__container {
+    height: 3rem;
+    padding: 0 1rem;
+    gap: 0.5rem;
+  }
+
+  .#{$c}__center {
+    font-size: 1rem;
+  }
+}

package/src/components/AppBar/AppBar.vue

@@ -0,0 +1,49 @@
+<template>
+  <header
+    class="app-bar"
+    :class="additionalClasses"
+    :style="colorStyle"
+    role="banner"
+  >
+    <div class="app-bar__container">
+      <div v-if="$slots.start" class="app-bar__start">
+        <slot name="start" />
+      </div>
+
+      <div class="app-bar__center">
+        <slot />
+      </div>
+
+      <div v-if="$slots.end" class="app-bar__end">
+        <slot name="end" />
+      </div>
+    </div>
+  </header>
+</template>
+
+<style src="./AppBar.scss"></style>
+
+<script setup lang="ts">
+import type { AppBarProps } from '../../types';
+import { computed } from 'vue';
+
+defineOptions({ name: 'FtpAppBar' });
+
+const props = withDefaults(defineProps<AppBarProps>(), {
+  fixed: false,
+  elevated: true,
+  transparent: false,
+});
+
+const additionalClasses = computed(() =>
+  [
+    props.fixed && 'app-bar--fixed',
+    props.elevated && 'app-bar--elevated',
+    props.transparent && 'app-bar--transparent',
+  ].filter(Boolean).join(' ')
+);
+
+const colorStyle = computed(() =>
+  props.color ? { backgroundColor: props.color } : undefined
+);
+</script>