import{_ as l}from"./plugin-vue_export-helper-DlAUqK2U.js";import{c as e,a as t,b as i,d as a,e as h,f as p,r as k,o as d}from"./app-YeL2FPh5.js";const r={};function c(g,s){const n=k("RouteLink");return d(),e("div",null,[s[5]||(s[5]=t(`Thank you for contributing to the ocelot.social UI library!
# Install dependencies
npm install
# Start development server
npm run dev
# Run tests
npm test
# Run linter
npm run lint
src/components/
└── OsButton/
├── OsButton.vue # Component
├── OsButton.spec.ts # Tests
└── index.ts # Export
- All components use the
Os prefix: OsButton, OsCard, OsModal - Files use PascalCase:
OsButton.vue
<script setup lang="ts">
import { computed } from 'vue-demi'
import type { Size, Variant } from '@/types'
interface Props {
/** Button size */
size?: Size
/** Visual variant */
variant?: Variant
}
const props = withDefaults(defineProps<Props>(), {
size: 'md',
variant: 'primary',
})
const classes = computed(() => [
'os-button',
\`os-button--\${props.size}\`,
\`os-button--\${props.variant}\`,
])
</script>
<template>
<button :class="classes">
<slot />
</button>
</template>
strict: true is enabled- All props must be typed
- Use JSDoc comments for documentation
Use the complete Tailwind-based scales:
| Prop | Values |
|---|
size | xs, sm, md, lg, xl, 2xl |
rounded | none, sm, md, lg, xl, 2xl, 3xl, full |
shadow | none, sm, md, lg, xl, 2xl |
variant | primary, secondary, danger, warning, success, info |
- Use CSS Custom Properties (no hardcoded colors)
- Use Tailwind utility classes
- Dark mode via
dark: prefix
<template>
<button class="bg-[--button-primary-bg] dark:bg-[--button-primary-bg-dark]">
<slot />
</button>
</template>
Always import from vue-demi, not vue:
// Correct
import { ref, computed } from 'vue-demi'
// Wrong
import { ref, computed } from 'vue'
- 100% code coverage is required
- Tests must pass for both Vue 2.7 and Vue 3
import { mount } from '@vue/test-utils'
import { describe, expect, it } from 'vitest'
import OsButton from './OsButton.vue'
describe('OsButton', () => {
it('renders slot content', () => {
const wrapper = mount(OsButton, {
slots: { default: 'Click me' },
})
expect(wrapper.text()).toBe('Click me')
})
it('applies size class', () => {
const wrapper = mount(OsButton, {
props: { size: 'lg' },
})
expect(wrapper.classes()).toContain('os-button--lg')
})
})
# Run once
npm test
# Watch mode
npm run test:watch
# With coverage
npm run test:coverage
We use Conventional Commits for automatic releases:
# Features (minor version bump)
feat(button): add loading state
# Bug fixes (patch version bump)
fix(modal): correct focus trap behavior
# Breaking changes (major version bump)
feat(input)!: rename value prop to modelValue
# Other types
docs: update README
test: add button accessibility tests
chore: update dependencies
refactor: simplify dropdown logic
Before submitting a PR, ensure:
- [ ] Tests pass (
npm test) - [ ] Linter passes (
npm run lint) - [ ] Build succeeds (
npm run build) - [ ] 100% code coverage maintained
- [ ] New components have Histoire stories
- [ ] Props have JSDoc documentation
- [ ] Commit messages follow Conventional Commits
Test your changes in the example apps:
# Vue 3 + Tailwind
cd examples/vue3-tailwind && npm install && npm run dev
# Vue 3 + CSS
cd examples/vue3-css && npm install && npm run dev
# Vue 2 + Tailwind
cd examples/vue2-tailwind && npm install && npm run dev
# Vue 2 + CSS
cd examples/vue2-css && npm install && npm run dev
Thank you for contributing to the ocelot.social UI library!
\\nDevelopment Setup
\\n# Install dependencies\\nnpm install\\n\\n# Start development server\\nnpm run dev\\n\\n# Run tests\\nnpm test\\n\\n# Run linter\\nnpm run lint
\\n