Merge pull request #2035 from onflow/cf/glowup

Add styling to flow root command, results, and test output

Author: chasefleming

cmd/flow/main.go

@@ -121,6 +121,8 @@ func main() {
 		Title: "🔗 Dependency Manager",
 	})
 
+	// Initialize template functions for styling
+	command.InitTemplateFunc(cmd)
 	cmd.SetUsageTemplate(command.UsageTemplate)
 
 	// Don't print usage on error

internal/prompt/colors.go common/branding/branding.gointernal/prompt/colors.go renamed to common/branding/branding.go

@@ -16,21 +16,33 @@
  * limitations under the License.
  */
 
-package prompt
+package branding
 
 import "github.com/charmbracelet/lipgloss"
 
-// Shared color constants for prompts
+// Flow brand colors
 var (
 	FlowGreen  = lipgloss.Color("#02D87E")
 	GrayText   = lipgloss.Color("8")
 	PurpleText = lipgloss.Color("#50268C")
+	ErrorRed   = lipgloss.Color("#E55555")
 )
 
-// Shared styles for prompts
+// Shared styles for consistent branding
 var (
 	GreenStyle   = lipgloss.NewStyle().Foreground(FlowGreen)
 	GrayStyle    = lipgloss.NewStyle().Foreground(GrayText)
 	PurpleStyle  = lipgloss.NewStyle().Foreground(PurpleText)
 	MessageStyle = PurpleStyle
+	ErrorStyle   = lipgloss.NewStyle().Foreground(ErrorRed).Bold(true)
 )
+
+// Flow ASCII art logo
+const FlowASCII = `   ___  ___
+ /'___\/\_ \
+/\ \__/\//\ \     ___   __  __  __
+\ \ ,__\ \ \ \   / __` + "`" + `\/\ \/\ \/\ \
+ \ \ \_/  \_\ \_/\ \L\ \ \ \_/ \_/ \
+  \ \_\   /\____\ \____/\ \___x___/'
+   \/_/   \/____/\/___/  \/__//__/
+`

internal/command/result.go

@@ -32,6 +32,16 @@ import (
 
 	"github.com/onflow/flowkit/v2/config"
 	"github.com/onflow/flowkit/v2/output"
+
+	"github.com/onflow/flow-cli/common/branding"
+)
+
+// Error styling
+var (
+	errorStyle        = branding.ErrorStyle
+	errorMessageStyle = branding.ErrorStyle
+	suggestionStyle   = branding.GreenStyle.Copy().Italic(true)
+	descriptionStyle  = branding.GrayStyle.Copy().Bold(true)
 )
 
 // Result interface describes all the formats for the result output.
@@ -140,35 +150,66 @@ func handleError(description string, err error) {
 	// handle rpc error
 	switch t := err.(type) {
 	case *grpc.RPCError:
-		_, _ = fmt.Fprintf(os.Stderr, "%s Grpc Error: %s \n", output.ErrorEmoji(), t.GRPCStatus().Err().Error())
+		errorMsg := errorStyle.Render(fmt.Sprintf("%s Grpc Error:", output.ErrorEmoji()))
+		detailMsg := errorMessageStyle.Render(t.GRPCStatus().Err().Error())
+		_, _ = fmt.Fprintf(os.Stderr, "%s %s\n", errorMsg, detailMsg)
 	default:
 		if errors.Is(err, config.ErrOutdatedFormat) {
-			_, _ = fmt.Fprintf(os.Stderr, "%s Config Error: %s \n", output.ErrorEmoji(), err.Error())
-			_, _ = fmt.Fprintf(os.Stderr, "%s Please reset configuration using: 'flow init --reset'. Read more about new configuration here: https://github.com/onflow/flow-cli/releases/tag/v0.17.0", output.TryEmoji())
+			errorMsg := errorStyle.Render(fmt.Sprintf("%s Config Error:", output.ErrorEmoji()))
+			detailMsg := errorMessageStyle.Render(err.Error())
+			_, _ = fmt.Fprintf(os.Stderr, "%s %s\n", errorMsg, detailMsg)
+
+			suggestion := suggestionStyle.Render(fmt.Sprintf("%s Please reset configuration using: 'flow init --reset'. Read more about new configuration here: https://github.com/onflow/flow-cli/releases/tag/v0.17.0", output.TryEmoji()))
+			_, _ = fmt.Fprintf(os.Stderr, "%s\n", suggestion)
 		} else if errors.Is(err, config.ErrDoesNotExist) {
-			_, _ = fmt.Fprintf(os.Stderr, "%s Config Error: %s \n", output.ErrorEmoji(), err.Error())
-			_, _ = fmt.Fprintf(os.Stderr, "%s Please create configuration using: flow init", output.TryEmoji())
+			errorMsg := errorStyle.Render(fmt.Sprintf("%s Config Error:", output.ErrorEmoji()))
+			detailMsg := errorMessageStyle.Render(err.Error())
+			_, _ = fmt.Fprintf(os.Stderr, "%s %s\n", errorMsg, detailMsg)
+
+			suggestion := suggestionStyle.Render(fmt.Sprintf("%s Please create configuration using: flow init", output.TryEmoji()))
+			_, _ = fmt.Fprintf(os.Stderr, "%s\n", suggestion)
 		} else if strings.Contains(err.Error(), "transport:") {
-			_, _ = fmt.Fprintf(os.Stderr, "%s %s \n", output.ErrorEmoji(), strings.Split(err.Error(), "transport:")[1])
-			_, _ = fmt.Fprintf(os.Stderr, "%s Make sure your emulator is running or connection address is correct.", output.TryEmoji())
+			errorMsg := errorStyle.Render(fmt.Sprintf("%s Connection Error:", output.ErrorEmoji()))
+			detailMsg := errorMessageStyle.Render(strings.Split(err.Error(), "transport:")[1])
+			_, _ = fmt.Fprintf(os.Stderr, "%s %s\n", errorMsg, detailMsg)
+
+			suggestion := suggestionStyle.Render(fmt.Sprintf("%s Make sure your emulator is running or connection address is correct.", output.TryEmoji()))
+			_, _ = fmt.Fprintf(os.Stderr, "%s\n", suggestion)
 		} else if strings.Contains(err.Error(), "NotFound desc =") {
-			_, _ = fmt.Fprintf(os.Stderr, "%s Not Found:%s \n", output.ErrorEmoji(), strings.Split(err.Error(), "NotFound desc =")[1])
+			errorMsg := errorStyle.Render(fmt.Sprintf("%s Not Found:", output.ErrorEmoji()))
+			detailMsg := errorMessageStyle.Render(strings.Split(err.Error(), "NotFound desc =")[1])
+			_, _ = fmt.Fprintf(os.Stderr, "%s%s\n", errorMsg, detailMsg)
 		} else if strings.Contains(err.Error(), "code = InvalidArgument desc = ") {
 			desc := strings.Split(err.Error(), "code = InvalidArgument desc = ")
-			_, _ = fmt.Fprintf(os.Stderr, "%s Invalid argument: %s \n", output.ErrorEmoji(), desc[len(desc)-1])
+			errorMsg := errorStyle.Render(fmt.Sprintf("%s Invalid argument:", output.ErrorEmoji()))
+			detailMsg := errorMessageStyle.Render(desc[len(desc)-1])
+			_, _ = fmt.Fprintf(os.Stderr, "%s %s\n", errorMsg, detailMsg)
+
 			if strings.Contains(err.Error(), "is invalid for chain") {
-				_, _ = fmt.Fprintf(os.Stderr, "%s Check you are connecting to the correct network or account address you use is correct.", output.TryEmoji())
+				suggestion := suggestionStyle.Render(fmt.Sprintf("%s Check you are connecting to the correct network or account address you use is correct.", output.TryEmoji()))
+				_, _ = fmt.Fprintf(os.Stderr, "%s\n", suggestion)
 			} else {
-				_, _ = fmt.Fprintf(os.Stderr, "%s Check your argument and flags value, you can use --help.", output.TryEmoji())
+				suggestion := suggestionStyle.Render(fmt.Sprintf("%s Check your argument and flags value, you can use --help.", output.TryEmoji()))
+				_, _ = fmt.Fprintf(os.Stderr, "%s\n", suggestion)
 			}
 		} else if strings.Contains(err.Error(), "invalid signature:") {
-			_, _ = fmt.Fprintf(os.Stderr, "%s Invalid signature: %s \n", output.ErrorEmoji(), strings.Split(err.Error(), "invalid signature:")[1])
-			_, _ = fmt.Fprintf(os.Stderr, "%s Check the signer private key is provided or is in the correct format. If running emulator, make sure it's using the same configuration as this command.", output.TryEmoji())
+			errorMsg := errorStyle.Render(fmt.Sprintf("%s Invalid signature:", output.ErrorEmoji()))
+			detailMsg := errorMessageStyle.Render(strings.Split(err.Error(), "invalid signature:")[1])
+			_, _ = fmt.Fprintf(os.Stderr, "%s %s\n", errorMsg, detailMsg)
+
+			suggestion := suggestionStyle.Render(fmt.Sprintf("%s Check the signer private key is provided or is in the correct format. If running emulator, make sure it's using the same configuration as this command.", output.TryEmoji()))
+			_, _ = fmt.Fprintf(os.Stderr, "%s\n", suggestion)
 		} else if strings.Contains(err.Error(), "signature could not be verified using public key with") {
-			_, _ = fmt.Fprintf(os.Stderr, "%s %s: %s \n", output.ErrorEmoji(), description, err)
-			_, _ = fmt.Fprintf(os.Stderr, "%s If you are running emulator locally make sure that the emulator was started with the same config as used in this command. \nTry restarting the emulator.", output.TryEmoji())
+			errorMsg := errorStyle.Render(fmt.Sprintf("%s %s:", output.ErrorEmoji(), description))
+			detailMsg := errorMessageStyle.Render(err.Error())
+			_, _ = fmt.Fprintf(os.Stderr, "%s %s\n", errorMsg, detailMsg)
+
+			suggestion := suggestionStyle.Render(fmt.Sprintf("%s If you are running emulator locally make sure that the emulator was started with the same config as used in this command. \nTry restarting the emulator.", output.TryEmoji()))
+			_, _ = fmt.Fprintf(os.Stderr, "%s\n", suggestion)
 		} else {
-			_, _ = fmt.Fprintf(os.Stderr, "%s %s: %s", output.ErrorEmoji(), description, err)
+			errorMsg := errorStyle.Render(fmt.Sprintf("%s %s:", output.ErrorEmoji(), description))
+			detailMsg := errorMessageStyle.Render(err.Error())
+			_, _ = fmt.Fprintf(os.Stderr, "%s %s\n", errorMsg, detailMsg)
 		}
 	}
 

internal/command/template.go

@@ -18,35 +18,111 @@
 
 package command
 
-var UsageTemplate = `Usage:{{if .Runnable}}
+import (
+	"fmt"
+	"text/template"
+
+	"github.com/charmbracelet/lipgloss"
+	"github.com/spf13/cobra"
+
+	"github.com/onflow/flow-cli/common/branding"
+)
+
+var (
+	// Header styles
+	logoStyle = lipgloss.NewStyle().
+			Foreground(branding.FlowGreen).
+			Bold(true)
+
+	welcomeStyle = lipgloss.NewStyle().
+			Foreground(branding.PurpleText).
+			Bold(true)
+
+	subtitleStyle = lipgloss.NewStyle().
+			Foreground(branding.GrayText).
+			Italic(true).
+			MarginLeft(2)
+
+	// Command group styles
+	groupTitleStyle = lipgloss.NewStyle().
+			Foreground(branding.FlowGreen).
+			Bold(true)
+
+	commandNameStyle = lipgloss.NewStyle().
+				Foreground(branding.PurpleText).
+				Bold(true)
+
+	commandDescStyle = lipgloss.NewStyle().
+				Foreground(lipgloss.Color("7"))
+
+	// Section styles
+	sectionTitleStyle = lipgloss.NewStyle().
+				Foreground(branding.FlowGreen).
+				Bold(true)
+
+	// Footer style
+	footerStyle = lipgloss.NewStyle().
+			Foreground(branding.GrayText).
+			Italic(true)
+)
+
+// Template functions for styling
+var templateFuncs = template.FuncMap{
+	"styleFlowHeader": func() string {
+		logo := logoStyle.Render(branding.FlowASCII)
+		welcome := welcomeStyle.Render("👋 Welcome Flow developer!")
+		subtitle := subtitleStyle.Render("If you are starting a new flow project use our super commands, start by running 'flow init'.")
+		return fmt.Sprintf("%s\n%s\n%s\n", logo, welcome, subtitle)
+	},
+	"styleGroupTitle": func(title string) string {
+		return groupTitleStyle.Render(title)
+	},
+	"styleCommandName": func(name string) string {
+		return commandNameStyle.Render(name)
+	},
+	"styleCommandDesc": func(desc string) string {
+		return commandDescStyle.Render(desc)
+	},
+	"styleSectionTitle": func(title string) string {
+		return sectionTitleStyle.Render(title)
+	},
+	"styleFooter": func(text string) string {
+		return footerStyle.Render(text)
+	},
+}
+
+func InitTemplateFunc(cmd *cobra.Command) {
+	for name, fn := range templateFuncs {
+		cobra.AddTemplateFunc(name, fn)
+	}
+}
+
+var UsageTemplate = `{{if (eq .Name "flow")}}{{styleFlowHeader}}{{else}}Usage:{{if .Runnable}}
   {{.UseLine}}{{end}}{{if .HasAvailableSubCommands}}
   {{.CommandPath}} [command]{{end}}{{if gt (len .Aliases) 0}}
 
 Aliases:
   {{.NameAndAliases}}{{end}}{{if .HasExample}}
 
 Examples:
-{{.Example}}{{end}}
-{{if .HasAvailableSubCommands}}{{if (eq .Name "flow")}}
-👋 Welcome Flow developer!
-   If you are starting a new flow project use our super commands, start by running 'flow init'. {{end}}{{end}}{{if .HasAvailableSubCommands}}{{$cmds := .Commands}}{{if eq (len .Groups) 0}}
-Available Commands:{{range $cmds}}{{if (or .IsAvailableCommand (eq .Name "help"))}}
-  {{rpad .Name .NamePadding }} {{.Short}}{{end}}{{end}}{{else}}{{range $group := .Groups}}
+{{.Example}}{{end}}{{end}}{{if .HasAvailableSubCommands}}{{$cmds := .Commands}}{{if eq (len .Groups) 0}}
+
+{{styleSectionTitle "Available Commands:"}}{{range $cmds}}{{if (or .IsAvailableCommand (eq .Name "help"))}}
+  {{styleCommandName (rpad .Name .NamePadding)}} {{styleCommandDesc .Short}}{{end}}{{end}}{{else}}{{range $group := .Groups}}
 
-[1m{{.Title}}[0m{{range $cmds}}{{if (and (eq .GroupID $group.ID) (or .IsAvailableCommand (eq .Name "help")))}}
-  {{rpad .Name .NamePadding }} {{.Short}}{{end}}{{end}}{{end}}{{if not .AllChildCommandsHaveGroup}}
+{{styleGroupTitle .Title}}{{range $cmds}}{{if (and (eq .GroupID $group.ID) (or .IsAvailableCommand (eq .Name "help")))}}
+  {{styleCommandName (rpad .Name .NamePadding)}} {{styleCommandDesc .Short}}{{end}}{{end}}{{end}}{{if not .AllChildCommandsHaveGroup}}
 
-Additional Commands:{{range $cmds}}{{if (and (eq .GroupID "") (or .IsAvailableCommand (eq .Name "help")))}}
-  {{rpad .Name .NamePadding }} {{.Short}}{{end}}{{end}}{{end}}{{end}}{{end}}{{if .HasAvailableLocalFlags}}
+{{styleSectionTitle "Additional Commands:"}}{{range $cmds}}{{if (and (eq .GroupID "") (or .IsAvailableCommand (eq .Name "help")))}}
+  {{styleCommandName (rpad .Name .NamePadding)}} {{styleCommandDesc .Short}}{{end}}{{end}}{{end}}{{end}}{{end}}{{if .HasAvailableLocalFlags}}
 
-Flags:
+{{styleSectionTitle "Flags:"}}
 {{.LocalFlags.FlagUsages | trimTrailingWhitespaces}}{{end}}{{if .HasAvailableInheritedFlags}}
 
-Global Flags:
+{{styleSectionTitle "Global Flags:"}}
 {{.InheritedFlags.FlagUsages | trimTrailingWhitespaces}}{{end}}{{if .HasHelpSubCommands}}
 
-Additional help topics:{{range .Commands}}{{if .IsAdditionalHelpTopicCommand}}
-  {{rpad .CommandPath .CommandPathPadding}} {{.Short}}{{end}}{{end}}{{end}}{{if .HasAvailableSubCommands}}
+{{styleSectionTitle "Additional help topics:"}}{{range .Commands}}{{if .IsAdditionalHelpTopicCommand}}
+  {{styleCommandName (rpad .CommandPath .CommandPathPadding)}} {{styleCommandDesc .Short}}{{end}}{{end}}{{end}}{{if .HasAvailableSubCommands}}
 
-Use "{{.CommandPath}} [command] --help" for more information about a command.{{end}}
-`
+{{styleFooter (printf "Use \"%s [command] --help\" for more information about a command." .CommandPath)}}{{end}}`

internal/prompt/select.go

@@ -25,6 +25,8 @@ import (
 
 	tea "github.com/charmbracelet/bubbletea"
 	"golang.org/x/term"
+
+	"github.com/onflow/flow-cli/common/branding"
 )
 
 // optionSelectModel represents the prompt state but is now private
@@ -83,24 +85,24 @@ func (m optionSelectModel) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
 
 func (m optionSelectModel) View() string {
 	var b strings.Builder
-	b.WriteString(fmt.Sprintf("%s\n", MessageStyle.Render(m.message)))
-	b.WriteString(GrayStyle.Render("Use arrow keys to navigate, space to select, enter to confirm or skip, q to quit:") + "\n\n")
+	b.WriteString(fmt.Sprintf("%s\n", branding.MessageStyle.Render(m.message)))
+	b.WriteString(branding.GrayStyle.Render("Use arrow keys to navigate, space to select, enter to confirm or skip, q to quit:") + "\n\n")
 	for i, choice := range m.choices {
 		if m.cursor == i {
-			b.WriteString(GreenStyle.Render("> "))
+			b.WriteString(branding.GreenStyle.Render("> "))
 		} else {
 			b.WriteString("  ")
 		}
 		// Mark selected items
 		if _, ok := m.selected[i]; ok {
-			b.WriteString(GreenStyle.Render("[x] "))
+			b.WriteString(branding.GreenStyle.Render("[x] "))
 		} else {
 			b.WriteString("[ ] ")
 		}
 
 		// Style the choice text if it's selected
 		if m.cursor == i {
-			b.WriteString(GreenStyle.Render(choice) + "\n")
+			b.WriteString(branding.GreenStyle.Render(choice) + "\n")
 		} else {
 			b.WriteString(choice + "\n")
 		}
@@ -180,19 +182,19 @@ func (m singleSelectModel) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
 
 func (m singleSelectModel) View() string {
 	var b strings.Builder
-	b.WriteString(fmt.Sprintf("%s\n\n", MessageStyle.Render(m.message)))
+	b.WriteString(fmt.Sprintf("%s\n\n", branding.MessageStyle.Render(m.message)))
 
 	for i, choice := range m.choices {
 		if m.cursor == i {
-			b.WriteString(GreenStyle.Render("> "))
-			b.WriteString(GreenStyle.Render(choice) + "\n")
+			b.WriteString(branding.GreenStyle.Render("> "))
+			b.WriteString(branding.GreenStyle.Render(choice) + "\n")
 		} else {
 			b.WriteString("  ")
 			b.WriteString(choice + "\n")
 		}
 	}
 
-	b.WriteString("\n" + GrayStyle.Render("Use arrow keys to navigate, enter to select, esc to cancel"))
+	b.WriteString("\n" + branding.GrayStyle.Render("Use arrow keys to navigate, enter to select, esc to cancel"))
 	return b.String()
 }
 

internal/prompt/textinput.go

@@ -25,11 +25,13 @@ import (
 	"github.com/charmbracelet/bubbles/textinput"
 	tea "github.com/charmbracelet/bubbletea"
 	"golang.org/x/term"
+
+	"github.com/onflow/flow-cli/common/branding"
 )
 
 var (
-	projectNameStyle = MessageStyle // Use default color for messages
-	helpTextStyle    = GrayStyle
+	projectNameStyle = branding.MessageStyle // Use default color for messages
+	helpTextStyle    = branding.GrayStyle
 )
 
 // textInputModel is now private, only accessible within the 'prompt' package.
@@ -51,8 +53,8 @@ func newTextInput(customMsg, placeholder, defaultValue string, validate func(str
 	ti.Width = 30
 
 	// Style the text input with green cursor and text
-	ti.TextStyle = GreenStyle
-	ti.Cursor.Style = GreenStyle
+	ti.TextStyle = branding.GreenStyle
+	ti.Cursor.Style = branding.GreenStyle
 
 	if defaultValue != "" {
 		ti.SetValue(defaultValue)