@reinvented/design 0.2.0 → 0.3.0

package/src/components/ui/tabs/TabsTrigger.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { TabsTrigger, type TabsTriggerProps, useForwardProps } from 'radix-vue'
+import { cn } from '../lib/utils'
+
+const props = defineProps<TabsTriggerProps & { class?: HTMLAttributes['class'] }>()
+const delegatedProps = computed(() => { const { class: _, ...d } = props; return d })
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <TabsTrigger
+    v-bind="forwardedProps"
+    :class="cn(
+      'inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow',
+      props.class,
+    )"
+  >
+    <slot />
+  </TabsTrigger>
+</template>

package/src/components/ui/tabs/index.ts

@@ -0,0 +1,4 @@
+export { default as Tabs } from './Tabs.vue'
+export { default as TabsContent } from './TabsContent.vue'
+export { default as TabsList } from './TabsList.vue'
+export { default as TabsTrigger } from './TabsTrigger.vue'

package/src/components/ui/textarea/Textarea.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { cn } from '../lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+  defaultValue?: string
+  modelValue?: string
+}>()
+
+const emits = defineEmits<{
+  'update:modelValue': [value: string]
+}>()
+
+const modelValue = computed({
+  get: () => props.modelValue,
+  set: (val) => emits('update:modelValue', val ?? ''),
+})
+</script>
+
+<template>
+  <textarea
+    v-model="modelValue"
+    :class="cn(
+      'flex min-h-20 w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
+      props.class,
+    )"
+  />
+</template>

package/src/components/ui/textarea/index.ts

@@ -0,0 +1 @@
+export { default as Textarea } from './Textarea.vue'

package/src/components/ui/toggle/Toggle.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { Toggle as ToggleRoot, type ToggleEmits, type ToggleProps, useForwardPropsEmits } from 'radix-vue'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '../lib/utils'
+
+const toggleVariants = cva(
+  'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground',
+  {
+    variants: {
+      variant: {
+        default: 'bg-transparent',
+        outline: 'border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground',
+      },
+      size: {
+        default: 'h-9 px-3',
+        sm: 'h-8 px-2',
+        lg: 'h-10 px-3',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+)
+
+type ToggleVariants = VariantProps<typeof toggleVariants>
+
+const props = defineProps<ToggleProps & { class?: HTMLAttributes['class']; variant?: ToggleVariants['variant']; size?: ToggleVariants['size'] }>()
+const emits = defineEmits<ToggleEmits>()
+const delegatedProps = computed(() => { const { class: _, variant: _v, size: _s, ...d } = props; return d })
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <ToggleRoot v-bind="forwarded" :class="cn(toggleVariants({ variant, size }), props.class)">
+    <slot />
+  </ToggleRoot>
+</template>

package/src/components/ui/toggle/index.ts

@@ -0,0 +1 @@
+export { default as Toggle } from './Toggle.vue'

package/src/components/ui/toggle-group/ToggleGroup.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { ToggleGroupRoot, type ToggleGroupRootEmits, type ToggleGroupRootProps, useForwardPropsEmits } from 'radix-vue'
+import { cn } from '../lib/utils'
+
+const props = defineProps<ToggleGroupRootProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<ToggleGroupRootEmits>()
+const delegatedProps = computed(() => { const { class: _, ...d } = props; return d })
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <ToggleGroupRoot v-bind="forwarded" :class="cn('flex items-center justify-center gap-1', props.class)">
+    <slot />
+  </ToggleGroupRoot>
+</template>

package/src/components/ui/toggle-group/ToggleGroupItem.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { ToggleGroupItem, type ToggleGroupItemProps, useForwardProps } from 'radix-vue'
+import { cn } from '../lib/utils'
+
+const props = defineProps<ToggleGroupItemProps & { class?: HTMLAttributes['class'] }>()
+const delegatedProps = computed(() => { const { class: _, ...d } = props; return d })
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <ToggleGroupItem
+    v-bind="forwardedProps"
+    :class="cn(
+      'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground bg-transparent h-9 px-3',
+      props.class,
+    )"
+  >
+    <slot />
+  </ToggleGroupItem>
+</template>

package/src/components/ui/toggle-group/index.ts

@@ -0,0 +1,2 @@
+export { default as ToggleGroup } from './ToggleGroup.vue'
+export { default as ToggleGroupItem } from './ToggleGroupItem.vue'

package/src/components/ui/tooltip/Tooltip.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { TooltipRoot, type TooltipRootEmits, type TooltipRootProps, useForwardPropsEmits } from 'radix-vue'
+
+const props = defineProps<TooltipRootProps>()
+const emits = defineEmits<TooltipRootEmits>()
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <TooltipRoot v-bind="forwarded">
+    <slot />
+  </TooltipRoot>
+</template>

package/src/components/ui/tooltip/TooltipContent.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { TooltipContent, type TooltipContentEmits, type TooltipContentProps, TooltipPortal, useForwardPropsEmits } from 'radix-vue'
+import { cn } from '../lib/utils'
+
+const props = withDefaults(
+  defineProps<TooltipContentProps & { class?: HTMLAttributes['class'] }>(),
+  { sideOffset: 4 },
+)
+const emits = defineEmits<TooltipContentEmits>()
+const delegatedProps = computed(() => { const { class: _, ...d } = props; return d })
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <TooltipPortal>
+    <TooltipContent
+      v-bind="forwarded"
+      :class="cn(
+        'z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        props.class,
+      )"
+    >
+      <slot />
+    </TooltipContent>
+  </TooltipPortal>
+</template>

package/src/components/ui/tooltip/TooltipProvider.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { TooltipProvider, type TooltipProviderProps, useForwardProps } from 'radix-vue'
+
+const props = withDefaults(defineProps<TooltipProviderProps>(), { delayDuration: 200 })
+const forwardedProps = useForwardProps(props)
+</script>
+
+<template>
+  <TooltipProvider v-bind="forwardedProps">
+    <slot />
+  </TooltipProvider>
+</template>

package/src/components/ui/tooltip/TooltipTrigger.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { TooltipTrigger, type TooltipTriggerProps } from 'radix-vue'
+
+const props = defineProps<TooltipTriggerProps>()
+</script>
+
+<template>
+  <TooltipTrigger v-bind="props">
+    <slot />
+  </TooltipTrigger>
+</template>

package/src/components/ui/tooltip/index.ts

@@ -0,0 +1,4 @@
+export { default as Tooltip } from './Tooltip.vue'
+export { default as TooltipContent } from './TooltipContent.vue'
+export { default as TooltipProvider } from './TooltipProvider.vue'
+export { default as TooltipTrigger } from './TooltipTrigger.vue'

package/src/eslint/index.js

@@ -0,0 +1,192 @@
+/**
+ * @reinvented/design ESLint Plugin
+ *
+ * Enforces the Reinvented design system rules across all consumer apps.
+ * See docs/rules.md for the full list.
+ *
+ * Usage (flat config):
+ *   import recommended from '@reinvented/design/eslint/recommended'
+ *   export default [...recommended]
+ */
+
+// ── Helpers ────────────────────────────────────────────────────────
+
+/** Matches emoji characters (Emoji_Presentation + common ranges) */
+const EMOJI_REGEX = /[\u{1F600}-\u{1F64F}\u{1F300}-\u{1F5FF}\u{1F680}-\u{1F6FF}\u{1F1E0}-\u{1F1FF}\u{2600}-\u{26FF}\u{2700}-\u{27BF}\u{FE00}-\u{FE0F}\u{1F900}-\u{1F9FF}\u{1FA00}-\u{1FA6F}\u{1FA70}-\u{1FAFF}\u{200D}\u{20E3}\u{E0020}-\u{E007F}\u{231A}-\u{231B}\u{23E9}-\u{23F3}\u{23F8}-\u{23FA}\u{25AA}-\u{25AB}\u{25B6}\u{25C0}\u{25FB}-\u{25FE}\u{2614}-\u{2615}\u{2648}-\u{2653}\u{267F}\u{2693}\u{26A1}\u{26AA}-\u{26AB}\u{26BD}-\u{26BE}\u{26C4}-\u{26C5}\u{26CE}\u{26D4}\u{26EA}\u{26F2}-\u{26F3}\u{26F5}\u{26FA}\u{26FD}\u{2702}\u{2705}\u{2708}-\u{270D}\u{270F}]/u
+
+/**
+ * Creates a rule that bans a specific raw HTML element in Vue templates.
+ * @param {string} element - The raw element name to ban (e.g. 'button')
+ * @param {string} component - The DS component to use instead (e.g. 'Button')
+ */
+function createNoRawElementRule(element, component) {
+  return {
+    meta: {
+      type: 'suggestion',
+      docs: {
+        description: `Disallow raw <${element}> — use <${component}> from @reinvented/design`,
+        recommended: true,
+      },
+      messages: {
+        noRawElement: `Use <${component}> from @reinvented/design instead of raw <${element}>. See docs/rules.md.`,
+      },
+      schema: [],
+    },
+    create(context) {
+      // Works with eslint-plugin-vue's template AST
+      return context.parserServices?.defineTemplateBodyVisitor
+        ? context.parserServices.defineTemplateBodyVisitor({
+            VElement(node) {
+              if (node.rawName === element) {
+                context.report({ node, messageId: 'noRawElement' })
+              }
+            },
+          })
+        : {}
+    },
+  }
+}
+
+// ── Rules ──────────────────────────────────────────────────────────
+
+const rules = {
+  // Rule 1-4: No raw form elements
+  'no-raw-button': createNoRawElementRule('button', 'Button'),
+  'no-raw-input': createNoRawElementRule('input', 'Input'),
+  'no-raw-select': createNoRawElementRule('select', 'Select'),
+  'no-raw-textarea': createNoRawElementRule('textarea', 'Textarea'),
+
+  // Rule 5: No browser dialog APIs
+  'no-browser-dialogs': {
+    meta: {
+      type: 'problem',
+      docs: {
+        description: 'Disallow alert(), confirm(), prompt() — use Dialog/AlertDialog/Toast from @reinvented/design',
+        recommended: true,
+      },
+      messages: {
+        noBrowserDialog: 'Use Dialog, AlertDialog, or Toast from @reinvented/design instead of {{ name }}(). See docs/rules.md.',
+      },
+      schema: [],
+    },
+    create(context) {
+      const banned = new Set(['alert', 'confirm', 'prompt'])
+      return {
+        CallExpression(node) {
+          // Direct calls: alert(), confirm(), prompt()
+          if (node.callee.type === 'Identifier' && banned.has(node.callee.name)) {
+            context.report({ node, messageId: 'noBrowserDialog', data: { name: node.callee.name } })
+          }
+          // window.alert(), window.confirm(), window.prompt()
+          if (
+            node.callee.type === 'MemberExpression' &&
+            node.callee.object.type === 'Identifier' &&
+            node.callee.object.name === 'window' &&
+            node.callee.property.type === 'Identifier' &&
+            banned.has(node.callee.property.name)
+          ) {
+            context.report({ node, messageId: 'noBrowserDialog', data: { name: node.callee.property.name } })
+          }
+        },
+      }
+    },
+  },
+
+  // Rule 10: No emojis in templates
+  'no-emoji': {
+    meta: {
+      type: 'suggestion',
+      docs: {
+        description: 'Disallow emoji characters in Vue templates — use Lucide icons from lucide-vue-next',
+        recommended: true,
+      },
+      messages: {
+        noEmoji: 'Use a Lucide icon from lucide-vue-next instead of emoji characters. See docs/rules.md.',
+      },
+      schema: [],
+    },
+    create(context) {
+      return context.parserServices?.defineTemplateBodyVisitor
+        ? context.parserServices.defineTemplateBodyVisitor({
+            'VText'(node) {
+              if (EMOJI_REGEX.test(node.value)) {
+                context.report({ node, messageId: 'noEmoji' })
+              }
+            },
+          })
+        : {}
+    },
+  },
+
+  // Rule 6: No hardcoded colors
+  'no-hardcoded-colors': {
+    meta: {
+      type: 'suggestion',
+      docs: {
+        description: 'Disallow hardcoded color values in inline styles — use CSS variables via Tailwind tokens',
+        recommended: true,
+      },
+      messages: {
+        noHardcodedColor: 'Use design token CSS variables (e.g. bg-background, text-foreground) instead of hardcoded colors. See docs/rules.md.',
+      },
+      schema: [],
+    },
+    create(context) {
+      const COLOR_REGEX = /#[0-9a-fA-F]{3,8}\b|rgba?\s*\(|hsla?\s*\(/
+      return context.parserServices?.defineTemplateBodyVisitor
+        ? context.parserServices.defineTemplateBodyVisitor({
+            'VAttribute[key.name="style"]'(node) {
+              const value = node.value?.value
+              if (value && COLOR_REGEX.test(value)) {
+                context.report({ node, messageId: 'noHardcodedColor' })
+              }
+            },
+          })
+        : {}
+    },
+  },
+
+  // Rule 7: No arbitrary Tailwind values
+  'no-arbitrary-tailwind': {
+    meta: {
+      type: 'suggestion',
+      docs: {
+        description: 'Disallow arbitrary Tailwind values like text-[#333] or p-[13px] — use token-based utilities',
+        recommended: true,
+      },
+      messages: {
+        noArbitrary: 'Use token-based Tailwind utilities instead of arbitrary values (e.g. {{ value }}). See docs/rules.md.',
+      },
+      schema: [],
+    },
+    create(context) {
+      // Matches Tailwind arbitrary value syntax: word-[value]
+      const ARBITRARY_REGEX = /\b(?:text|bg|border|ring|shadow|p|px|py|pt|pb|pl|pr|m|mx|my|mt|mb|ml|mr|w|h|gap|space|rounded|top|right|bottom|left|inset|min-w|min-h|max-w|max-h)-\[.+?\]/
+      return context.parserServices?.defineTemplateBodyVisitor
+        ? context.parserServices.defineTemplateBodyVisitor({
+            'VAttribute[key.name="class"]'(node) {
+              const value = node.value?.value
+              if (value) {
+                const match = value.match(ARBITRARY_REGEX)
+                if (match) {
+                  context.report({ node, messageId: 'noArbitrary', data: { value: match[0] } })
+                }
+              }
+            },
+          })
+        : {}
+    },
+  },
+}
+
+// ── Plugin Export ──────────────────────────────────────────────────
+
+const plugin = {
+  meta: {
+    name: '@reinvented/design',
+    version: '0.3.0',
+  },
+  rules,
+}
+
+export default plugin

package/src/eslint/recommended.js

@@ -0,0 +1,64 @@
+/**
+ * @reinvented/design — Recommended ESLint Flat Config
+ *
+ * Usage:
+ *   import { recommended } from '@reinvented/design/eslint/recommended'
+ *   export default [...recommended]
+ *
+ * Or combine with your own config:
+ *   export default [...recommended, { rules: { /* overrides */ } }]
+ */
+
+import vuePlugin from 'eslint-plugin-vue'
+import vueParser from 'vue-eslint-parser'
+import designPlugin from './index.js'
+
+const PREFIX = 'reinvented-design'
+
+export const recommended = [
+  // ── Base Vue support (essential rules) ──────────────────────────
+  ...vuePlugin.configs['flat/essential'],
+
+  // ── Design system enforcement ───────────────────────────────────
+  {
+    name: '@reinvented/design/recommended',
+    files: ['**/*.vue'],
+    languageOptions: {
+      parser: vueParser,
+    },
+    plugins: {
+      [PREFIX]: designPlugin,
+    },
+    rules: {
+      // Component usage — error on raw HTML elements
+      [`${PREFIX}/no-raw-button`]: 'error',
+      [`${PREFIX}/no-raw-input`]: 'error',
+      [`${PREFIX}/no-raw-select`]: 'error',
+      [`${PREFIX}/no-raw-textarea`]: 'error',
+
+      // No browser dialogs
+      [`${PREFIX}/no-browser-dialogs`]: 'error',
+
+      // No emojis — use Lucide icons
+      [`${PREFIX}/no-emoji`]: 'error',
+
+      // Styling hygiene
+      [`${PREFIX}/no-hardcoded-colors`]: 'warn',
+      [`${PREFIX}/no-arbitrary-tailwind`]: 'warn',
+    },
+  },
+
+  // ── JS/TS files: ban browser dialogs everywhere ─────────────────
+  {
+    name: '@reinvented/design/recommended-scripts',
+    files: ['**/*.{js,ts,jsx,tsx,vue}'],
+    plugins: {
+      [PREFIX]: designPlugin,
+    },
+    rules: {
+      [`${PREFIX}/no-browser-dialogs`]: 'error',
+    },
+  },
+]
+
+export default recommended