{"id":48915393,"url":"https://github.com/pglevy/sailwind","last_synced_at":"2026-04-25T21:01:06.098Z","repository":{"id":318790059,"uuid":"1071890980","full_name":"pglevy/sailwind","owner":"pglevy","description":"A React component library for vibe coding that speaks Appian SAIL","archived":false,"fork":false,"pushed_at":"2026-04-23T01:11:49.000Z","size":797,"stargazers_count":1,"open_issues_count":8,"forks_count":1,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-04-23T03:33:55.023Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://pglevy.github.io/sailwind/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pglevy.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":"AGENTS.md","dco":null,"cla":null}},"created_at":"2025-10-08T00:53:33.000Z","updated_at":"2026-04-23T01:11:53.000Z","dependencies_parsed_at":null,"dependency_job_id":"98445394-6cd5-4820-ba72-6faa27ff55dc","html_url":"https://github.com/pglevy/sailwind","commit_stats":null,"previous_names":["pglevy/sailwind"],"tags_count":14,"template":false,"template_full_name":null,"purl":"pkg:github/pglevy/sailwind","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pglevy%2Fsailwind","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pglevy%2Fsailwind/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pglevy%2Fsailwind/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pglevy%2Fsailwind/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pglevy","download_url":"https://codeload.github.com/pglevy/sailwind/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pglevy%2Fsailwind/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32276628,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-25T18:29:39.964Z","status":"ssl_error","status_checked_at":"2026-04-25T18:29:32.149Z","response_time":59,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-04-17T02:04:09.653Z","updated_at":"2026-04-25T21:01:06.076Z","avatar_url":"https://github.com/pglevy.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Sailwind\n\n[![npm version](https://img.shields.io/npm/v/@pglevy/sailwind)](https://www.npmjs.com/package/@pglevy/sailwind)\n\nA React component library for vibe coding that speaks Appian SAIL\n\n## Overview\n\nSailwind provides React components that mirror Appian SAIL parameter names and conventions. Components use exact SAIL syntax (`size=\"STANDARD\"`, `color=\"ACCENT\"`) so prototype code translates almost directly to production SAIL.\n\nBuilt on Radix UI primitives, Tailwind CSS, and TypeScript.\n\n## For Prototypers\n\nUse the **[sailwind-starter](https://github.com/pglevy/sailwind-starter)** template to start building prototypes. It comes pre-configured with Sailwind and is ready for LLM-assisted development (Kiro, Cursor, Claude Code, etc.).\n\nBrowse the **[Component Reference](https://pglevy.github.io/sailwind/)** to see what's available.\n\n### Installation\n\n```bash\npnpm add @pglevy/sailwind\n```\n\n### Peer Dependencies\n\nSailwind requires React 18 or 19 as a peer dependency:\n\n```bash\npnpm add react react-dom\n```\n\nSupported versions:\n- `react` — `^18.0.0 || ^19.0.0`\n- `react-dom` — `^18.0.0 || ^19.0.0`\n\nThese are listed as `peerDependencies` in the package, so your project needs to provide them.\n\n### Setup\n\nImport the CSS in your main entry file (e.g., `main.tsx` or `App.tsx`):\n\n```tsx\nimport '@pglevy/sailwind/index.css'\n```\n\nIf you're using Tailwind CSS in your project and want Tailwind to detect utility classes used by Sailwind components, add a `@source` directive to your CSS:\n\n```css\n@import \"@pglevy/sailwind/index.css\";\n@source \"../node_modules/@pglevy/sailwind/dist\";\n```\n\nThis ensures Tailwind scans Sailwind's compiled output for class names. The `@import` brings in the theme tokens, base styles, and pre-built utility classes, while `@source` lets your project's Tailwind build include any additional classes it discovers.\n\n### Using Images\n\nThe `ApplicationHeader` component includes all its icon assets as embedded data URIs — no image copying or configuration needed. Icons render automatically based on the `objectType` prop, and you can override them via `iconSrc` and `appianLogoSrc` if needed.\n\n## For Contributors\n\n### Setup\n\n```bash\ngit clone https://github.com/pglevy/sailwind.git\ncd sailwind\npnpm install\n```\n\n### Development\n\nStorybook is the primary development environment:\n\n```bash\npnpm run storybook     # Start Storybook at http://localhost:6006\n```\n\nEvery component has a `.stories.tsx` file for documentation and interactive testing. When adding or modifying components, update the corresponding stories.\n\n### Build\n\n```bash\npnpm run generate:css      # Generate CSS custom properties from tokens/tokens.json\npnpm run build:tokens      # Generate and validate dist/tokens.json\npnpm run build:lib         # Build the npm package (dist/) + generate tokens\npnpm run build-storybook   # Build the Storybook site (storybook-static/)\npnpm run lint              # Run ESLint\n```\n\n### Design Tokens\n\nSailwind's design tokens live in `tokens/tokens.json` as the single source of truth, using [W3C DTCG 2025.10](https://www.w3.org/community/reports/design-tokens/CG-FINAL-format-20251028/) format. The token file covers colors, typography (text sizes, font families, weights), spacing (margins, padding, radius), and gradients.\n\nFrom that source file, two things are generated:\n- **CSS custom properties** in `src/index.css` — via `pnpm run generate:css`\n- **Distributable tokens** in `dist/tokens.json` and `public/tokens.json` — via `pnpm run build:tokens` (adds semantic color aliases on top of the source)\n\nThe distributable file is available in two places:\n- `dist/tokens.json` — included in the npm package (`@pglevy/sailwind/tokens.json`)\n- `public/tokens.json` — committed to the repo for versioned CDN access\n\nYou can access the latest version here:\n```\nhttps://cdn.jsdelivr.net/gh/pglevy/sailwind@latest/public/tokens.json\n```\n\nOr a specific version here:\n```\nhttps://cdn.jsdelivr.net/gh/pglevy/sailwind@0.10.2/public/tokens.json\n```\n\n#### Token Editor\n\nA standalone visual editor for design tokens runs alongside Storybook:\n\n```bash\npnpm run token-server      # Start the token editor at http://localhost:3001\n```\n\nEdit colors, typography, and spacing values in the browser. Saving writes back to `tokens/tokens.json` and regenerates the CSS, which Storybook picks up via HMR.\n\nSee `scripts/README.md` for details on the generation and validation pipeline.\n\n### Project Structure\n\n```\ntokens/\n└── tokens.json             # Source of truth for all design tokens (DTCG format)\nsrc/\n├── components/             # SAIL components (Button, Card, Dropdown, etc.)\n│   └── */                  # Each component has its own directory with stories\n├── stories/\n│   ├── pages/              # Full page examples (realistic Appian interfaces)\n│   └── patterns/           # Common UI patterns (forms, grids, data displays)\n├── types/                  # Shared TypeScript types (SAILSize, SAILAlign, etc.)\n└── index.css               # Tailwind v4 theme (generated from tokens)\nscripts/\n├── generate-css.ts         # tokens/tokens.json → CSS custom properties\n├── generate-tokens.ts      # tokens/tokens.json → dist + public (with semantic aliases)\n├── validate-tokens.ts      # DTCG format validation\n├── token-server.ts         # Dev server for the visual token editor\n└── token-editor.html       # Standalone token editor UI\n```\n\n### Publishing to npm\n\n```bash\npnpm run build:lib\npnpm publish --access public\n```\n\nSee [PUBLISHING.md](PUBLISHING.md) for detailed release instructions.\n\n## Component Comparison\n\n**React (Sailwind):**\n```tsx\n\u003cTagField\n  size=\"STANDARD\"\n  tags={[\n    { text: \"URGENT\", backgroundColor: \"#FED7DE\", textColor: \"#9F0019\" }\n  ]}\n/\u003e\n```\n\n**SAIL (Production):**\n```sail\na!tagField(\n  size: \"STANDARD\",\n  tags: {\n    a!tagItem(text: \"URGENT\", backgroundColor: \"#FED7DE\", textColor: \"#9F0019\")\n  }\n)\n```\n\n## Documentation\n\n- **[Component Reference](https://pglevy.github.io/sailwind/)** — Live Storybook with all components\n- **[TAILWIND-SAIL-MAPPING.md](TAILWIND-SAIL-MAPPING.md)** — Tailwind to SAIL style mappings\n- **[CONTRIBUTING.md](CONTRIBUTING.md)** — How to contribute to the project\n- **[AGENTS.md](AGENTS.md)** — Guidance for AI agents working with the library\n- **[SAIL Docs](https://docs.appian.com/suite/help/25.3/)** — Official Appian SAIL reference\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpglevy%2Fsailwind","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpglevy%2Fsailwind","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpglevy%2Fsailwind/lists"}