https://github.com/orfium/orfium-ictinus
This repo will include the building blocks to create the Orfium Parthenons to come ...
https://github.com/orfium/orfium-ictinus
design-system ds javascript react react-components storybook typescript
Last synced: 5 months ago
JSON representation
This repo will include the building blocks to create the Orfium Parthenons to come ...
- Host: GitHub
- URL: https://github.com/orfium/orfium-ictinus
- Owner: Orfium
- Created: 2020-03-26T09:24:16.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2025-04-30T12:27:41.000Z (about 1 year ago)
- Last Synced: 2025-04-30T12:41:39.838Z (about 1 year ago)
- Topics: design-system, ds, javascript, react, react-components, storybook, typescript
- Language: TypeScript
- Homepage: https://designlab.orfium.com
- Size: 15.9 MB
- Stars: 23
- Watchers: 10
- Forks: 3
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
README
# Orfium Ictinus
> A comprehensive design system and UI component library for Orfium products
[](https://github.com/Orfium/orfium-ictinus/actions/workflows/main.yml)
This monorepo contains the Orfium Design System - an opinionated UI kit library focused on solving UI duplications and providing unified, cross-product UX, UI, and accessibility standards.
## Repository Structure
This is a **monorepo** managed with [Turbo](https://turbo.build/) and [pnpm](https://pnpm.io/):
```
orfium-ictinus/
├── apps/
│ └── storybook/ # Storybook documentation and component showcase
├── packages/
│ └── ictinus/ # Main design system package (@orfium/ictinus)
```
### Packages
- **[@orfium/ictinus](./packages/ictinus/)** - The main design system package containing all UI components, themes, tokens, and utilities
- **[@orfium/tokens](./packages/tokens/)** - A dedicated package containing the design system tokens for external system usage
### Apps
- **[Storybook](./apps/storybook/)** - Interactive documentation and component playground
## Prerequisites
- **Node.js** >= 22
- **pnpm** >= 10
## Quick Start
1. **Clone the repository**
```bash
git clone https://github.com/Orfium/orfium-ictinus.git
cd orfium-ictinus
```
2. **Install dependencies**
```bash
pnpm install
```
3. **Start development servers**
```bash
# Start all development servers (Storybook, etc.)
pnpm dev
# Or start Storybook specifically
pnpm --filter storybook dev
```
4. **Build all packages**
```bash
pnpm build
```
## 📋 Available Scripts
| Script | Description |
| -------------------- | ------------------------------------------------ |
| `pnpm dev` | Start all development servers |
| `pnpm build` | Build all packages and apps |
| `pnpm test` | Run all tests |
| `pnpm test:coverage` | Run tests with coverage |
| `pnpm lint` | Run linting across all packages |
| `pnpm check` | Run all checks (TypeScript, linting, formatting) |
| `pnpm clean` | Remove all node_modules |
## Testing
We use [Vitest](https://vitest.dev/) for testing:
```bash
# Run all tests
pnpm test
# Run tests with coverage
pnpm test:coverage
# Generate coverage report
pnpm coverage:report
```
## Documentation
- **[Storybook](http://localhost:6006)** - Interactive component documentation (after running `pnpm dev`)
- **[Package README](./packages/ictinus/README.md)** - Detailed usage instructions for the design system
- **[Contribution Guidelines](./CONTRIBUTING.md)** - How to contribute to this project
## Using the Design System
For detailed usage instructions, see the [Ictinus package README](./packages/ictinus/README.md).
**Quick example:**
```jsx
import { ThemeProvider, Button, Select } from '@orfium/ictinus';
function App() {
return (
Click me
);
}
```
## Migration & Codemods
The library includes codemods to help migrate between versions:
```bash
# Run migration codemods
npx @orfium/ictinus migrate
```
Available codemods can be found in [`packages/ictinus/codemods/`](./packages/ictinus/codemods/).
## Contributing
We welcome contributions! Please read our [Contributing Guidelines](./CONTRIBUTING.md) before submitting a PR.
### Development Workflow
1. Create a feature branch: `git checkout -b feature/new-feature`
2. Make your changes
3. Run checks: `pnpm check`
4. Submit a PR with a [conventional commit](https://conventionalcommits.org/) title
### PR Guidelines
- Use conventional commit format for PR titles (e.g., `feat(Button): add loading state`)
- Provide detailed descriptions and screenshots
- Ensure all tests pass
- Update documentation as needed
## Versioning & Releases
This project uses [Changesets](https://github.com/changesets/changesets) for versioning and releases:
```bash
# Create a changeset
pnpm changeset
# Release (CI/CD handles this)
pnpm release
```
## Links
- [npm package](https://www.npmjs.com/package/@orfium/ictinus)
- [GitHub repository](https://github.com/Orfium/orfium-ictinus)
- [Issues](https://github.com/Orfium/orfium-ictinus/issues)