{"id":21334274,"url":"https://github.com/uselagoon/ui-library","last_synced_at":"2026-01-30T00:55:57.978Z","repository":{"id":212579699,"uuid":"729996942","full_name":"uselagoon/ui-library","owner":"uselagoon","description":"Antd based ui library for all things lagoon related","archived":false,"fork":false,"pushed_at":"2025-02-20T01:24:57.000Z","size":17962,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-02-20T01:26:20.815Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/uselagoon.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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}},"created_at":"2023-12-11T01:00:44.000Z","updated_at":"2025-01-16T01:23:52.000Z","dependencies_parsed_at":"2024-03-25T17:36:12.864Z","dependency_job_id":"6d0f8c5f-b9a0-4da3-afbb-e68fa4ac6df1","html_url":"https://github.com/uselagoon/ui-library","commit_stats":null,"previous_names":["uselagoon/ui-library"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/uselagoon%2Fui-library","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/uselagoon%2Fui-library/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/uselagoon%2Fui-library/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/uselagoon%2Fui-library/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/uselagoon","download_url":"https://codeload.github.com/uselagoon/ui-library/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243812012,"owners_count":20351817,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":"2024-11-21T23:18:59.828Z","updated_at":"2026-01-30T00:55:57.972Z","avatar_url":"https://github.com/uselagoon.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @uselagoon/ui-library\n\nA component library based on [Shadcn](https://ui.shadcn.com/) and [Tailwind](https://tailwindcss.com/) for all things Lagoon related.\n\n## ChangeFeed Component\n\nThe ChangeFeed component supports dynamic content updates via a GitHub action workflow. This allows for updates via Pull Requests without needing a full release of the ui-library.\n\n### Component Usage\n\nUse `ChangeFeedContainer` to fetch data at runtime:\n\n```tsx\nimport { ChangeFeedContainer } from '@uselagoon/ui-library';\n\nexport default function ChangeFeed() {\n  return (\n    \u003cChangeFeedContainer \n      sourceData=\"https://raw.githubusercontent.com/your-org/main-app/main/public/data/changefeed.json\"\n      refetchInterval={600000}\n    /\u003e\n  );\n}\n```\n\n## Installation 💾\n\n### 1. Configure npm registry\n\nCreate or update `.npmrc` in your project root:\n\n```\n@uselagoon:registry=https://registry.npmjs.org\n```\n\n### 2. Install the package\n\n```bash\nnpm install @uselagoon/ui-library tailwindcss @tailwindcss/postcss postcss\n```\n\nOr with yarn:\n\n```bash\nyarn add @uselagoon/ui-library tailwindcss @tailwindcss/postcss postcss\n```\n\n### 3. Import styles\n\nAdd the UI library styles to your root layout:\n\n```tsx\nimport '@uselagoon/ui-library/dist/ui-library.css';\n```\n\n## Usage 🔨\n\nUsing a component from the library:\n\n```tsx\nimport '@uselagoon/ui-library/dist/ui-library.css';\nimport { Button, SwitchWithDescription } from '@uselagoon/ui-library';\n\n\nexport default () =\u003e (\n  \u003c\u003e\n    \u003cButton variant=\"ghost\" disabled\u003eA spooky disabled button\u003c/Button\u003e\n    \u003cSwitchWithDescription\n      description=\"This is a switch description.\"\n      id=\"first\"\n      label=\"Switch Text\"\n    /\u003e\n  \u003c/\u003e\n);\n```\n\n## Storybook 🎨\n\nView the component documentation on Chromatic (URL available after setup).\n\n### Storybook Composition\n\nTo include UI library stories in your project's Storybook, add to your `.storybook/main.ts`:\n\n```typescript\nimport type { StorybookConfig } from '@storybook/react-vite';\n\nconst config: StorybookConfig = {\n  // ... your existing config\n  refs: {\n    'ui-library': {\n      title: 'Lagoon UI Library',\n      url: 'https://\u003cbranch\u003e--\u003capp-id\u003e.chromatic.com/', // Get URL from Chromatic dashboard\n    },\n  },\n};\n\nexport default config;\n```\n\n## CI/CD\n\n### Automated Workflows\n\n| Workflow | Trigger | Actions |\n|----------|---------|---------|\n| **CI** | Push to main, PRs | Type check, lint, format check, build, build Storybook |\n| **Publish** | GitHub Release published | All CI checks + publish to NPM |\n| **Chromatic** | Push to main, PRs | Deploy Storybook to Chromatic (when token configured) |\n\n### Publishing a New Version\n\n1. Update version in `package.json`\n2. Commit and push to main\n3. Create a GitHub Release with a new tag (e.g., `v2.1.0`)\n4. The publish workflow automatically builds and publishes to NPM\n\n## Development guide 🏗️\n\nClone the repo locally:\n\n```bash\ngit clone https://github.com/uselagoon/ui-library.git\ncd ui-library\nnpm install\nnpm run storybook\n```\n\nIt is recommended to build components in isolation with the help of storybook (currently V 9.0).\n\nOpen your browser and visit [http://localhost:6006](http://localhost:6006).\n\nThe project structure is as follows:\n\n├── src\n│ ├── components # React source code and demos (which then get bundled)\n│ ├── hooks # Custom hooks\n│ ├── providers # Custom theme and NextLink providers\n│ ├── stories # Storybook stories\n│ ├── index.css # Autogenerated tailwind css file\n│ └── index.ts # Entrypoint for your `exported` components (that your project then imports)\n├── eslint.config.js # Eslint config\n├── vite.config.ts # Vite bundler config\n└── package.json\n\nGiven that there's a storybook instance running, navigate to the `src` directory and modify/create new components with their respective `stories.tsx` files.\n\nModify and customize anything with Tailwind and/or custom css files if needed.\n\nThen run the lint and format scripts, and you're ready to go!\n\n```bash\nnpm run typecheck    # TypeScript check\nnpm run lint         # ESLint\nnpm run format       # Prettier formatting\n```\n\n### Adding Shadcn Components\n\nTo add a new component from Shadcn, refer to the [Shadcn CLI guide](https://ui.shadcn.com/docs/cli).\n\n## Contributing 🤝\n\nPRs and issues are welcome, we invite contributions from everyone.\n\nThis guide could come in handy: [GitHub contribution guide](https://egghead.io/courses/how-to-contribute-to-an-open-source-project-on-github)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fuselagoon%2Fui-library","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fuselagoon%2Fui-library","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fuselagoon%2Fui-library/lists"}