+
Skip to content

tuist/Noora

Repository files navigation

Noora Design System ⭐️

Noora is Tuist's comprehensive design system that provides consistent UI components and patterns across the web and the CLI.

All Contributors

Note

The project is currently in an early stage of development. Our plan is to create a basic set of components and then iterate on them based on the feedback we receive from the community.

Domains

Noora is implemented for CLIs and the web to achieve cohesive design across different environments. Noora for CLI is implemented as a Swift package whereas we chose Elixir and Phoenix for the web.

📱 CLI

Command Line Interfaces (CLIs), though graphically limited due to terminal capabilities, can still benefit significantly from well-designed and consistent aesthetics across various commands. This is a role traditionally filled by design systems in Graphical User Interfaces (GUIs), but it remains largely unexplored in the context of terminals.

Noora is a Swift package providing terminal UI components for building beautiful command-line interfaces. Learn more →

🌐 Web

A component library for building web applications with Phoenix LiveView — bringing Noora's design consistency to the web. Learn more →

Quick Start

CLI

The Noora CLI package provides Swift components for building beautiful terminal interfaces. It includes components for:

  • Prompts: Interactive user input (yes/no choices, text input, single choice selection)
  • Alerts: Status messages (success, warning, error notifications)
  • Progress: Visual progress indicators (progress bars, step indicators)
  • Text Styling: Consistent typography and formatting

Installation:

.package(url: "https://github.com/tuist/Noora", .upToNextMajor(from: "0.15.0"))

Usage:

import Noora

Noora().yesOrNoChoicePrompt(
  title: "Authentication",
  question: "Would you like to authenticate?",
  defaultAnswer: true,
  description: "Authentication is required to use some CLI features."
)

View full CLI documentation →

Web

The Noora web package provides Phoenix LiveView components for building beautiful web interfaces.

Installation:

Add to your mix.exs:

{:noora, "~> 0.1.0"}

Import styles in assets/css/app.css:

@import "noora/noora.css";

Configure hooks in assets/js/app.js:

import Noora from "noora";

let liveSocket = new LiveSocket("/live", Socket, {
  hooks: { ...Noora },
});

View full web documentation →

Development

Prerequisites

  • mise for tool management

Getting Started

# Install tools
mise install

# Build all packages
mise run build

# Test all packages
mise run test

# Lint all packages
mise run lint

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Finn Voorhees
Finn Voorhees

💻
Vaishali Desai
Vaishali Desai

💻
Nikita Vasilev
Nikita Vasilev

💻

This project follows the all-contributors specification. Contributions of any kind welcome!

License

This project is licensed under the MIT License - see the LICENSE file for details.

About

🎨 A design system for Swift CLIs and Phoenix apps

Topics

Resources

License

Stars

Watchers

Forks

Contributors 12

点击 这是indexloc提供的php浏览器服务,不要输入任何密码和下载