mirror of
https://github.com/we-promise/sure.git
synced 2026-05-25 13:34:58 +00:00
57d71cd55e
* feat(design-system): add info semantic color token Mirrors success/warning/destructive: --color-info maps to blue-600 in light mode, blue-500 in dark mode. Unblocks the DS::Alert info variant from carrying a raw 'blue-600' literal in icon_color and lets surface tokens use bg-info/N alpha modifiers like the rest of the system. Refs #1715 * refactor(design-system): adopt semantic tokens and add body slot in DS::Alert Replaces the bg-{blue,green,yellow,red}-50 / text-{...}-700 / border-{...}-200 palette block in DS::Alert with semantic alpha-modifier surfaces (bg-{info,success,warning,destructive}/10 + matching /20 borders). Drops the 'blue-600' literal that icon_color was returning for the info variant; helpers#icon now accepts color: :info backed by the new --color-info token. Adds an optional title: kwarg and an opt-in block-content slot so rich alerts (title + paragraph, lists, embedded actions) can render without callers reaching for a hand-rolled flex layout. The existing message: API stays backward-compatible — nothing in the codebase that already calls DS::Alert.new(message: ..., variant: ...) needs to change. Lookbook gains with_title and with_body_slot examples covering the new shapes. Refs #1715 * refactor(views): migrate api_keys, hostings, lunchflow alerts to DS::Alert Cleans up nine bespoke alert blocks that hand-rolled the same flex + icon + bordered-surface shape DS::Alert already provides: - settings/api_keys/{new,created,created.turbo_stream}.html.erb — three near-identical 'Security Warning' / 'Important Security Note' boxes using the broken bg-warning-50 / text-warning-700 raw-palette pair. - settings/hostings/{_alpha_vantage,_eodhd,_yahoo_finance,_twelve_data,_provider_selection}_settings.html.erb — five amber-50 / amber-200 warning boxes covering rate-limit notes, health-check failure messaging, and the env-configured override banner. The twelve_data plan-restriction block keeps its bullet list and pricing link inside the new DS::Alert body slot. - lunchflow_items/{_api_error,_setup_required}.html.erb — two modal alert headers whose flex+icon scaffolding now collapses onto DS::Alert. The surrounding bg-surface 'Common issues' / 'Setup steps' info cards stay as-is; this PR only touches the alert shape itself. No functional or behavioural changes. Locale keys preserved. amber-* palette uses on the alerts disappear; remaining bg-amber-* hits in the codebase live outside the alert pattern and stay for follow-up sub-PRs of #1715. Refs #1715
85 lines
3.7 KiB
Plaintext
85 lines
3.7 KiB
Plaintext
<div class="space-y-4">
|
|
<div>
|
|
<h2 class="font-medium mb-1"><%= t(".title") %></h2>
|
|
<% if ENV["TWELVE_DATA_API_KEY"].present? %>
|
|
<p class="text-sm text-secondary"><%= t(".env_configured_message") %></p>
|
|
<% else %>
|
|
<div class="text-secondary text-sm mb-4">
|
|
<span><%= t(".description") %></span>
|
|
<details class="inline">
|
|
<summary class="cursor-pointer font-medium text-secondary underline inline"> <%= t(".show_details") %></summary>
|
|
<ol class="text-sm text-secondary mt-2 list-decimal ml-6 space-y-2">
|
|
<li><%= t(".step_1_html") %></li>
|
|
<li><%= t(".step_2_html") %></li>
|
|
<li><%= t(".step_3") %></li>
|
|
</ol>
|
|
</details>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
|
|
<%= styled_form_with model: Setting.new,
|
|
url: settings_hosting_path,
|
|
method: :patch,
|
|
data: {
|
|
controller: "auto-submit-form",
|
|
"auto-submit-form-trigger-event-value": "blur"
|
|
} do |form| %>
|
|
<% has_key = ENV["TWELVE_DATA_API_KEY"].present? || Setting.twelve_data_api_key.present? %>
|
|
<%= form.text_field :twelve_data_api_key,
|
|
label: t(".label"),
|
|
type: "password",
|
|
placeholder: t(".placeholder"),
|
|
value: has_key ? "********" : "",
|
|
disabled: ENV["TWELVE_DATA_API_KEY"].present?,
|
|
container_class: @twelve_data_usage.present? && !@twelve_data_usage.success? ? "border-red-500" : "",
|
|
data: { "auto-submit-form-target": "auto" } %>
|
|
<% end %>
|
|
|
|
<% if @twelve_data_usage.present? && @twelve_data_usage.success? %>
|
|
<div class="space-y-4">
|
|
<div class="space-y-2">
|
|
<p class="text-sm text-secondary">
|
|
<%= t(".api_calls_used",
|
|
used: number_with_delimiter(@twelve_data_usage.data.used),
|
|
limit: number_with_delimiter(@twelve_data_usage.data.limit),
|
|
percentage: number_to_percentage(@twelve_data_usage.data.utilization, precision: 1)) %>
|
|
</p>
|
|
<div class="w-52 h-1.5 bg-surface-inset rounded-2xl">
|
|
<div class="h-full bg-green-500 rounded-2xl"
|
|
style="width: <%= [@twelve_data_usage.data.utilization, 2].max %>%;"></div>
|
|
</div>
|
|
</div>
|
|
<div class="bg-surface-inset rounded-md px-1.5 py-0.5 w-fit">
|
|
<p class="text-xs font-medium text-secondary uppercase">
|
|
<%= t(".plan", plan: @twelve_data_usage.data.plan) %>
|
|
</p>
|
|
</div>
|
|
|
|
<% if @plan_restricted_securities.present? %>
|
|
<div class="mt-4">
|
|
<%= render DS::Alert.new(title: t(".plan_upgrade_warning_title"), variant: :warning) do %>
|
|
<p><%= t(".plan_upgrade_warning_description") %></p>
|
|
<ul class="space-y-1">
|
|
<% @plan_restricted_securities.each do |security| %>
|
|
<li>
|
|
<span class="font-medium text-primary"><%= security[:ticker] %></span>
|
|
<% if security[:name].present? %>
|
|
<span class="text-secondary">(<%= security[:name] %>)</span>
|
|
<% end %>
|
|
<span class="text-secondary">— <%= t(".requires_plan", plan: security[:required_plan]) %></span>
|
|
</li>
|
|
<% end %>
|
|
</ul>
|
|
<p>
|
|
<a href="https://twelvedata.com/pricing" target="_blank" rel="noopener noreferrer" class="text-link underline font-medium">
|
|
<%= t(".view_pricing") %>
|
|
</a>
|
|
</p>
|
|
<% end %>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
<% end %>
|
|
</div>
|