trdr-ds-install 1.2.3 → 1.2.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": "1.0",
|
|
3
|
-
"generatedAt": "2026-05-
|
|
4
|
-
"total":
|
|
5
|
-
"implemented":
|
|
3
|
+
"generatedAt": "2026-05-12T15:34:28.515Z",
|
|
4
|
+
"total": 17,
|
|
5
|
+
"implemented": 17,
|
|
6
6
|
"categories": {
|
|
7
7
|
"formulario": "Formulário / Controles",
|
|
8
8
|
"modal": "Modais / Overlays",
|
|
@@ -1112,6 +1112,172 @@
|
|
|
1112
1112
|
"prompt": "Implemente o componente Boleta do Design System TRDR — painel lateral de negociações de 283px de largura.\n\nESTRUTURA (3 seções com border-left: 1px solid --border-subtle):\n\n1. ABAS (height: 45px, padding: 8px, border-bottom sutil)\n - Segmented control pill (border-radius: 9999px, bg: --surface-secondary #222)\n - 2 segments: \"Avançado\" (ativo) e \"Simples\" (inativo)\n - Segment ativo: bg --action-secondary-default #4A4A4A, radius 16px, padding 8px 12px\n - Segment inativo: bg transparente, text --content-tertiary\n\n2. CONTAINER — campos do formulário (padding: 8px, gap: 16px, border-bottom sutil)\n - Linha \"Estratégia\": label (tertiary 12px/500) + valor \"Manejo\" + chevron (primary)\n - Linha \"Disp.\": label + valor \"258.010.200,00 USDT\" (primary)\n - Grupo \"Quantidade\": label 12px + input 32px (bg --surface-primary, radius 8px, padding 8px) + 3 quick buttons (border --border-default, radius 8px, padding 8px 12px, font 14px/600 secondary, gap 4px)\n - Grupo \"Preço da Ordem\": label 12px + input 32px\n - Linha \"TP/SL\": checkbox 16x16 (border default, radius 5px, bg --surface-tertiary) + label primary\n\n3. BOTÕES (padding: 8px, gap: 8px)\n - 4 rows de ação (gap 8px cada):\n • Long (flex:1, bg --context-trading-long-default, text --context-trading-long-text #4FE290, radius 8px, padding 8px, font 14px/600)\n • Short (flex:1, bg --context-trading-short-default, text --context-trading-short-text #F34F45, radius 8px, padding 8px 12px, font 14px/600)\n - \"Zerar (5)\": width 100%, height 32px, border 1px sólido --color-orange-500 (#FF6400), text --color-orange-500, radius 8px\n - \"Cancelar ordens (2) + Zerar (5)\": width 100%, border --border-default, text --content-secondary, radius 8px\n - Row \"Cancelar Ordem\" (shrink-0) + \"Inverter\" (flex:1 min-width:100px): ambos border --border-default\n - Resumo Posição: \"Posição\" (14px tertiary) / \"Zerado\" (16px --content-success #4FE290), + 2 linhas meta 12px tertiary\n\nHover states: long-hover rgba(79,226,144,0.12), short-hover rgba(243,79,69,0.12), zerar-hover --context-trading-stop-alpha.\nResultado pixel-perfect com exatamente 283px de largura."
|
|
1113
1113
|
}
|
|
1114
1114
|
},
|
|
1115
|
+
{
|
|
1116
|
+
"slug": "tabela-cotacoes",
|
|
1117
|
+
"name": "Tabela de Cotações",
|
|
1118
|
+
"figmaId": "77:3681",
|
|
1119
|
+
"category": "trading",
|
|
1120
|
+
"implemented": true,
|
|
1121
|
+
"description": "Tabela de cotações em tempo real. Exibe ativo, último preço, variação % com código de cor (verde/vermelho), tendência (seta), quantidade e dados de oferta/demanda.",
|
|
1122
|
+
"props": [
|
|
1123
|
+
{
|
|
1124
|
+
"name": "rows",
|
|
1125
|
+
"type": "CotacaoRow[]",
|
|
1126
|
+
"values": [
|
|
1127
|
+
"array de dados de cotação"
|
|
1128
|
+
]
|
|
1129
|
+
}
|
|
1130
|
+
],
|
|
1131
|
+
"dimensions": [
|
|
1132
|
+
{
|
|
1133
|
+
"label": "Largura total",
|
|
1134
|
+
"width": "800px",
|
|
1135
|
+
"height": "—"
|
|
1136
|
+
},
|
|
1137
|
+
{
|
|
1138
|
+
"label": "Altura do header",
|
|
1139
|
+
"width": "—",
|
|
1140
|
+
"height": "32px"
|
|
1141
|
+
},
|
|
1142
|
+
{
|
|
1143
|
+
"label": "Altura da linha",
|
|
1144
|
+
"width": "—",
|
|
1145
|
+
"height": "32px"
|
|
1146
|
+
},
|
|
1147
|
+
{
|
|
1148
|
+
"label": "Célula Último",
|
|
1149
|
+
"width": "80px",
|
|
1150
|
+
"height": "32px"
|
|
1151
|
+
}
|
|
1152
|
+
],
|
|
1153
|
+
"tokens": [
|
|
1154
|
+
{
|
|
1155
|
+
"property": "Var% positivo",
|
|
1156
|
+
"token": "context.trading.up",
|
|
1157
|
+
"value": "#4FE290"
|
|
1158
|
+
},
|
|
1159
|
+
{
|
|
1160
|
+
"property": "Var% negativo",
|
|
1161
|
+
"token": "context.trading.down",
|
|
1162
|
+
"value": "#F34F45"
|
|
1163
|
+
},
|
|
1164
|
+
{
|
|
1165
|
+
"property": "Cell Último bg",
|
|
1166
|
+
"token": "surface.primary",
|
|
1167
|
+
"value": "#4A4A4A"
|
|
1168
|
+
},
|
|
1169
|
+
{
|
|
1170
|
+
"property": "Row alternada",
|
|
1171
|
+
"token": "—",
|
|
1172
|
+
"value": "rgba(255,255,255,0.08)"
|
|
1173
|
+
},
|
|
1174
|
+
{
|
|
1175
|
+
"property": "Row hover",
|
|
1176
|
+
"token": "surface.secondary",
|
|
1177
|
+
"value": "#222222"
|
|
1178
|
+
},
|
|
1179
|
+
{
|
|
1180
|
+
"property": "Header border",
|
|
1181
|
+
"token": "border.default",
|
|
1182
|
+
"value": "#4A4A4A"
|
|
1183
|
+
},
|
|
1184
|
+
{
|
|
1185
|
+
"property": "Header text",
|
|
1186
|
+
"token": "content.tertiary",
|
|
1187
|
+
"value": "#A4A4A4"
|
|
1188
|
+
},
|
|
1189
|
+
{
|
|
1190
|
+
"property": "Cell text",
|
|
1191
|
+
"token": "content.primary",
|
|
1192
|
+
"value": "#FFFFFF"
|
|
1193
|
+
}
|
|
1194
|
+
],
|
|
1195
|
+
"anatomy": "Tabela (table-layout: fixed, border-collapse: collapse):\n [thead > tr (32px, border-bottom 1px --border-default)]\n [th: 14px/400 --content-tertiary | padding: 4px 8px]\n Colunas: Ativo(65) Último(80) Q Últ(65) Var%(65) Tend(65) Dif(65) Stat(65) QOfc(65) Ofc(65) Ofv(65) QOfv(65) Teórico(65)\n [tbody > tr (32px, cursor pointer)]\n [tr:nth-child(even): bg rgba(255,255,255,0.08)]\n [tr:hover: bg --surface-secondary]\n [tr.selected: bg --bg-secondary]\n [td: 14px/400 --content-primary | padding: 4px 8px]\n [td.col-ultimo: bg --surface-primary #4A4A4A]\n [td.col-var-up: color --context-trading-up #4FE290]\n [td.col-var-down: color --context-trading-down #F34F45]\n [td.col-tend: ícone Material Symbols arrow_drop_up/down]",
|
|
1196
|
+
"code": {
|
|
1197
|
+
"html": "<!-- Tabela de Cotações TRDR (Figma: 77:3681) -->\n<div style=\"width:100%;overflow-x:auto;background:var(--bg-primary)\">\n <table class=\"trdr-tabela-cotacoes\">\n <colgroup>\n <col style=\"width:65px\"> <col style=\"width:80px\"> <col style=\"width:65px\">\n <col style=\"width:65px\"> <col style=\"width:65px\"> <col style=\"width:65px\">\n <col style=\"width:65px\"> <col style=\"width:65px\"> <col style=\"width:65px\">\n <col style=\"width:65px\"> <col style=\"width:65px\"> <col style=\"width:65px\">\n </colgroup>\n <thead>\n <tr>\n <th>Ativo</th><th>Último</th><th>Q Últ</th><th>Var %</th>\n <th>Tend</th><th>Dif</th><th>Stat...</th><th>QOfc</th>\n <th>Ofc</th><th>Ofv</th><th>QOfv</th><th>Teórico</th>\n </tr>\n </thead>\n <tbody>\n <tr class=\"trdr-tabela-cotacoes-row-selected\">\n <td>ITUB4</td>\n <td class=\"col-ultimo\">50.47</td>\n <td>100</td>\n <td class=\"col-var-down\">-0.72%</td>\n <td><span class=\"col-tend-icon col-tend-down\">arrow_drop_down</span></td>\n <td>0.36</td><td>.</td><td>1.000</td>\n <td>50.47</td><td>50.49</td><td>1.300</td><td>.</td>\n </tr>\n <tr>\n <td>VALE3</td>\n <td class=\"col-ultimo\">92,00</td>\n <td>200</td>\n <td class=\"col-var-up\">+1.20%</td>\n <td><span class=\"col-tend-icon col-tend-up\">arrow_drop_up</span></td>\n <td>0.50</td><td>.</td><td>2.700</td>\n <td>92,00</td><td>92,10</td><td>4.000</td><td>.</td>\n </tr>\n </tbody>\n </table>\n</div>",
|
|
1198
|
+
"css": "/* Tabela de Cotações — TRDR Design System */\n/* Tokens: --context-trading-up (#4FE290), --context-trading-down (#F34F45) */\n/* Tokens: --surface-primary (#4A4A4A), --surface-secondary (#222222) */\n/* Tokens: --border-default (#4A4A4A), --content-tertiary (#A4A4A4) */\n\n.trdr-tabela-cotacoes {\n width: 100%;\n border-collapse: collapse;\n table-layout: fixed;\n font-family: var(--font-secondary); /* Inter */\n font-size: 14px;\n font-weight: 400;\n color: var(--content-primary); /* #FFFFFF */\n}\n\n.trdr-tabela-cotacoes thead tr {\n height: 32px;\n border-bottom: 1px solid var(--border-default); /* #4A4A4A */\n}\n\n.trdr-tabela-cotacoes th {\n padding: 4px 8px;\n text-align: left;\n color: var(--content-tertiary); /* #A4A4A4 */\n font-weight: 400;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n vertical-align: middle;\n}\n\n.trdr-tabela-cotacoes tbody tr {\n height: 32px;\n cursor: pointer;\n transition: background-color 0.1s ease;\n}\n\n.trdr-tabela-cotacoes tbody tr:nth-child(even) {\n background: rgba(255, 255, 255, 0.08);\n}\n\n.trdr-tabela-cotacoes tbody tr:hover {\n background: var(--surface-secondary); /* #222222 */\n}\n\n.trdr-tabela-cotacoes tbody tr.trdr-tabela-cotacoes-row-selected {\n background: var(--bg-secondary); /* #141519 */\n}\n\n.trdr-tabela-cotacoes td {\n padding: 4px 8px;\n text-align: left;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n vertical-align: middle;\n}\n\n.trdr-tabela-cotacoes td.col-ultimo {\n background: var(--surface-primary); /* #4A4A4A */\n}\n\n.trdr-tabela-cotacoes .col-var-up { color: var(--context-trading-up); } /* #4FE290 */\n.trdr-tabela-cotacoes .col-var-down { color: var(--context-trading-down); } /* #F34F45 */\n\n.trdr-tabela-cotacoes .col-tend-icon {\n font-family: 'Material Symbols Outlined';\n font-size: 20px;\n font-variation-settings: 'FILL' 1, 'GRAD' 0, 'wght' 400;\n vertical-align: middle;\n}\n.trdr-tabela-cotacoes .col-tend-up { color: var(--context-trading-up); }\n.trdr-tabela-cotacoes .col-tend-down { color: var(--context-trading-down); }",
|
|
1199
|
+
"react": "import TabelaCotacoes, { CotacaoRow } from '@/components/ui/TabelaCotacoes'\n\nconst rows: CotacaoRow[] = [\n {\n ativo: 'ITUB4',\n ultimo: '50.47',\n qUlt: 100,\n varPct: -0.72,\n tend: 'down',\n dif: '0.36',\n qOfc: '1.000',\n ofc: '50.47',\n ofv: '50.49',\n qOfv: '1.300',\n selected: true,\n },\n {\n ativo: 'VALE3',\n ultimo: '92,00',\n qUlt: 200,\n varPct: 1.20,\n tend: 'up',\n dif: '0.50',\n },\n]\n\nexport default function Example() {\n return <TabelaCotacoes rows={rows} />\n}",
|
|
1200
|
+
"prompt": "Crie um componente React 'TabelaCotacoes' pixel-perfect baseado no Figma TRDR (node 77:3681).\n\nESTRUTURA:\n- Elemento <table> com table-layout: fixed e border-collapse: collapse\n- Wrapper <div> com overflow-x: auto e background: var(--bg-primary)\n\nHEADER (thead > tr):\n- height: 32px\n- border-bottom: 1px solid var(--border-default) /* #4A4A4A */\n- th: padding 4px 8px, font 14px/400, color var(--content-tertiary) /* #A4A4A4 */\n\nCOLUNAS (colgroup):\nAtivo=65px, Último=80px, Q Últ=65px, Var%=65px, Tend=65px, Dif=65px,\nStat=65px, QOfc=65px, Ofc=65px, Ofv=65px, QOfv=65px, Teórico=65px\n\nDATA ROWS (tbody > tr):\n- height: 32px, cursor: pointer\n- tr:nth-child(even): background rgba(255,255,255,0.08)\n- tr:hover: background var(--surface-secondary) /* #222222 */\n- tr.selected: background var(--bg-secondary) /* #141519 */\n- td: padding 4px 8px, font 14px/400, color var(--content-primary) /* #FFFFFF */\n- td.col-ultimo: background var(--surface-primary) /* #4A4A4A */\n- td variação positiva: color var(--context-trading-up) /* #4FE290 */\n- td variação negativa: color var(--context-trading-down) /* #F34F45 */\n- td tendência: ícone Material Symbols Outlined 'arrow_drop_up'/'arrow_drop_down', 20px, FILL 1\n\nINTERFACE TypeScript:\ninterface CotacaoRow {\n ativo: string; ultimo: string|number; qUlt?: string|number\n varPct: number; tend?: 'up'|'down'|null; dif?: string|number\n status?: string; qOfc?: string|number; ofc?: string|number\n ofv?: string|number; qOfv?: string|number; teorico?: string|number\n selected?: boolean\n}\n\nUsar APENAS tokens semânticos TRDR. NUNCA hex direto. NUNCA --scale-spacing-*."
|
|
1201
|
+
}
|
|
1202
|
+
},
|
|
1203
|
+
{
|
|
1204
|
+
"slug": "tabela-ordens",
|
|
1205
|
+
"name": "Tabela de Ordens",
|
|
1206
|
+
"figmaId": "336:3114",
|
|
1207
|
+
"category": "trading",
|
|
1208
|
+
"implemented": true,
|
|
1209
|
+
"description": "Tabela de histórico de ordens. Exibe horário, ativo, tipo C/V (colorido), preço, quantidade, status (Aberta/Executada/Cancelada) e origem. Linhas canceladas recebem fundo vermelho translúcido.",
|
|
1210
|
+
"props": [
|
|
1211
|
+
{
|
|
1212
|
+
"name": "rows",
|
|
1213
|
+
"type": "OrdemRow[]",
|
|
1214
|
+
"values": [
|
|
1215
|
+
"array de dados de ordens"
|
|
1216
|
+
]
|
|
1217
|
+
}
|
|
1218
|
+
],
|
|
1219
|
+
"dimensions": [
|
|
1220
|
+
{
|
|
1221
|
+
"label": "Largura total",
|
|
1222
|
+
"width": "896px",
|
|
1223
|
+
"height": "—"
|
|
1224
|
+
},
|
|
1225
|
+
{
|
|
1226
|
+
"label": "Altura do header",
|
|
1227
|
+
"width": "—",
|
|
1228
|
+
"height": "32px"
|
|
1229
|
+
},
|
|
1230
|
+
{
|
|
1231
|
+
"label": "Altura da linha",
|
|
1232
|
+
"width": "—",
|
|
1233
|
+
"height": "32px"
|
|
1234
|
+
}
|
|
1235
|
+
],
|
|
1236
|
+
"tokens": [
|
|
1237
|
+
{
|
|
1238
|
+
"property": "C (Compra) text",
|
|
1239
|
+
"token": "context.trading.long.text",
|
|
1240
|
+
"value": "#6DE7A2"
|
|
1241
|
+
},
|
|
1242
|
+
{
|
|
1243
|
+
"property": "V (Venda) text",
|
|
1244
|
+
"token": "context.trading.short.text",
|
|
1245
|
+
"value": "#F56D64"
|
|
1246
|
+
},
|
|
1247
|
+
{
|
|
1248
|
+
"property": "Row cancelada bg",
|
|
1249
|
+
"token": "context.trading.short.default",
|
|
1250
|
+
"value": "rgba(241,49,38,0.08)"
|
|
1251
|
+
},
|
|
1252
|
+
{
|
|
1253
|
+
"property": "Row hover",
|
|
1254
|
+
"token": "surface.secondary",
|
|
1255
|
+
"value": "#222222"
|
|
1256
|
+
},
|
|
1257
|
+
{
|
|
1258
|
+
"property": "Header border",
|
|
1259
|
+
"token": "border.default",
|
|
1260
|
+
"value": "#4A4A4A"
|
|
1261
|
+
},
|
|
1262
|
+
{
|
|
1263
|
+
"property": "Header text",
|
|
1264
|
+
"token": "content.tertiary",
|
|
1265
|
+
"value": "#A4A4A4"
|
|
1266
|
+
},
|
|
1267
|
+
{
|
|
1268
|
+
"property": "Cell text",
|
|
1269
|
+
"token": "content.primary",
|
|
1270
|
+
"value": "#FFFFFF"
|
|
1271
|
+
}
|
|
1272
|
+
],
|
|
1273
|
+
"anatomy": "Tabela (table-layout: fixed, border-collapse: collapse):\n [thead > tr (32px, border-bottom 1px --border-default)]\n [th: 14px/400 --content-tertiary | padding: 4px 8px]\n Colunas: Horário(81) Ativo(80) C/V(65) Preço(104) Médio(79)\n Qtde(65) Disp(65) Aberta(65) Exec(65) Status(86) Validade(79) Origem(65)\n [tbody > tr (32px, cursor pointer)]\n [tr:nth-child(even): bg rgba(255,255,255,0.05)]\n [tr:hover: bg --surface-secondary]\n [tr.cancelada: bg --context-trading-short-default]\n [td: 14px/400 --content-primary | padding: 4px 8px | text-overflow: ellipsis]\n [td.col-cv-c: color --context-trading-long-text #6DE7A2, font-weight 600]\n [td.col-cv-v: color --context-trading-short-text #F56D64, font-weight 600]",
|
|
1274
|
+
"code": {
|
|
1275
|
+
"html": "<!-- Tabela de Ordens TRDR (Figma: 336:3114) -->\n<div style=\"width:100%;overflow-x:auto;background:var(--bg-primary)\">\n <table class=\"trdr-tabela-ordens\">\n <colgroup>\n <col style=\"width:81px\"> <col style=\"width:80px\"> <col style=\"width:65px\">\n <col style=\"width:104px\"><col style=\"width:79px\"> <col style=\"width:65px\">\n <col style=\"width:65px\"> <col style=\"width:65px\"> <col style=\"width:65px\">\n <col style=\"width:86px\"> <col style=\"width:79px\"> <col style=\"width:65px\">\n </colgroup>\n <thead>\n <tr>\n <th>Horário</th><th>Ativo</th><th>C/V</th><th>Preço</th>\n <th>Médio</th><th>Qtde</th><th>Disp</th><th>Aberta</th>\n <th>Exec</th><th>Status</th><th>Validade</th><th>Origem</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>11:32:56</td><td>WDOK18</td>\n <td class=\"col-cv-c\">C</td>\n <td>3.425.600</td><td>3.425.600</td>\n <td>20</td><td>.</td><td>.</td><td>20</td>\n <td>Aberta</td><td>.</td><td>Loss</td>\n </tr>\n <tr>\n <td>11:35:24</td><td>WDOK18</td>\n <td class=\"col-cv-v\">V</td>\n <td>3.425.600</td><td>3.425.600</td>\n <td>19</td><td>.</td><td>.</td><td>19</td>\n <td>Aberta</td><td>.</td><td>Criptor</td>\n </tr>\n <tr class=\"trdr-tabela-ordens-row-cancelada\">\n <td>11:36:03</td><td>WDOK18</td>\n <td class=\"col-cv-c\">C</td>\n <td>3.425.600</td><td>3.425.600</td>\n <td>16</td><td>.</td><td>.</td><td>16</td>\n <td>Cancelada</td><td>.</td><td>Criptor</td>\n </tr>\n </tbody>\n </table>\n</div>",
|
|
1276
|
+
"css": "/* Tabela de Ordens — TRDR Design System */\n/* Tokens: --context-trading-long-text (#6DE7A2) — C (Compra) */\n/* Tokens: --context-trading-short-text (#F56D64) — V (Venda) */\n/* Tokens: --context-trading-short-default — fundo linha cancelada */\n/* Tokens: --border-default (#4A4A4A), --content-tertiary (#A4A4A4) */\n\n.trdr-tabela-ordens {\n width: 100%;\n border-collapse: collapse;\n table-layout: fixed;\n font-family: var(--font-secondary); /* Inter */\n font-size: 14px;\n font-weight: 400;\n color: var(--content-primary); /* #FFFFFF */\n}\n\n.trdr-tabela-ordens thead tr {\n height: 32px;\n border-bottom: 1px solid var(--border-default); /* #4A4A4A */\n}\n\n.trdr-tabela-ordens th {\n padding: 4px 8px;\n text-align: left;\n color: var(--content-tertiary); /* #A4A4A4 */\n font-weight: 400;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n vertical-align: middle;\n}\n\n.trdr-tabela-ordens tbody tr {\n height: 32px;\n cursor: pointer;\n transition: background-color 0.1s ease;\n}\n\n.trdr-tabela-ordens tbody tr:nth-child(even) {\n background: rgba(255, 255, 255, 0.05);\n}\n\n.trdr-tabela-ordens tbody tr:hover {\n background: var(--surface-secondary); /* #222222 */\n}\n\n.trdr-tabela-ordens tbody tr.trdr-tabela-ordens-row-cancelada {\n background: var(--context-trading-short-default); /* rgba(241,49,38,0.08) */\n}\n\n.trdr-tabela-ordens td {\n padding: 4px 8px;\n text-align: left;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n vertical-align: middle;\n}\n\n.trdr-tabela-ordens .col-cv-c {\n color: var(--context-trading-long-text); /* #6DE7A2 */\n font-weight: 600;\n}\n\n.trdr-tabela-ordens .col-cv-v {\n color: var(--context-trading-short-text); /* #F56D64 */\n font-weight: 600;\n}",
|
|
1277
|
+
"react": "import TabelaOrdens, { OrdemRow } from '@/components/ui/TabelaOrdens'\n\nconst rows: OrdemRow[] = [\n {\n horario: '11:32:56',\n ativo: 'WDOK18',\n tipo: 'C',\n preco: '3.425.600',\n medio: '3.425.600',\n qtde: 20,\n exec: 20,\n status: 'aberta',\n origem: 'Loss',\n },\n {\n horario: '11:35:24',\n ativo: 'WDOK18',\n tipo: 'V',\n preco: '3.425.600',\n medio: '3.425.600',\n qtde: 19,\n exec: 19,\n status: 'aberta',\n origem: 'Criptor',\n },\n {\n horario: '11:36:03',\n ativo: 'WDOK18',\n tipo: 'C',\n preco: '3.425.600',\n medio: '3.425.600',\n qtde: 16,\n exec: 16,\n status: 'cancelada',\n origem: 'Criptor',\n },\n]\n\nexport default function Example() {\n return <TabelaOrdens rows={rows} />\n}",
|
|
1278
|
+
"prompt": "Crie um componente React 'TabelaOrdens' pixel-perfect baseado no Figma TRDR (node 336:3114).\n\nESTRUTURA:\n- Elemento <table> com table-layout: fixed e border-collapse: collapse\n- Wrapper <div> com overflow-x: auto e background: var(--bg-primary)\n\nHEADER (thead > tr):\n- height: 32px\n- border-bottom: 1px solid var(--border-default) /* #4A4A4A */\n- th: padding 4px 8px, font 14px/400, color var(--content-tertiary) /* #A4A4A4 */\n\nCOLUNAS (colgroup):\nHorário=81px, Ativo=80px, C/V=65px, Preço=104px, Médio=79px,\nQtde=65px, Disp=65px, Aberta=65px, Exec=65px, Status=86px, Validade=79px, Origem=65px\n\nDATA ROWS (tbody > tr):\n- height: 32px, cursor: pointer\n- tr:nth-child(even): background rgba(255,255,255,0.05)\n- tr:hover: background var(--surface-secondary) /* #222222 */\n- tr.cancelada: background var(--context-trading-short-default) /* rgba(241,49,38,0.08) */\n- td: padding 4px 8px, font 14px/400, color var(--content-primary), text-overflow ellipsis\n- td.col-cv-c (Compra): color var(--context-trading-long-text) /* #6DE7A2 */, font-weight 600\n- td.col-cv-v (Venda): color var(--context-trading-short-text) /* #F56D64 */, font-weight 600\n\nINTERFACE TypeScript:\ntype OrdemStatus = 'aberta' | 'executada' | 'cancelada' | 'parcial'\ninterface OrdemRow {\n horario: string; ativo: string; tipo: 'C'|'V'\n preco: string|number; medio?: string|number\n qtde: number; disp?: string|number; aberta?: string|number; exec?: string|number\n status: OrdemStatus; validade?: string; origem?: string\n}\n\nUsar APENAS tokens semânticos TRDR. NUNCA hex direto. NUNCA --scale-spacing-*."
|
|
1279
|
+
}
|
|
1280
|
+
},
|
|
1115
1281
|
{
|
|
1116
1282
|
"slug": "card",
|
|
1117
1283
|
"name": "Card",
|
|
@@ -1166,6 +1332,156 @@
|
|
|
1166
1332
|
"prompt": "Implemente o componente Card do Design System TRDR.\nReferência Figma: nó 2316:2462 (380×154)\n\nEstrutura de dois containers separados por borda:\n\nContainer 1 (conteúdo principal):\n- Header: ícone Material Symbols Outlined 44px ExtraLight (wght 100) em var(--content-brand) à esquerda + badges à direita (opcional)\n- Título H-6: Space Grotesk Medium 500, 26px, line-height 1.1, var(--content-secondary)\n- Descrição B-3: Inter Regular 400, 14px, line-height 1.2, var(--content-tertiary)\n- Quando há footer: recebe border-bottom 1px solid var(--border-subtle) + padding-bottom 12px\n\nContainer 2 (footer, opcional):\n- Esquerda: Figma ID em B-4 (Inter Medium 500, 12px, 0.2px tracking, var(--content-tertiary))\n- Direita: badges (trdr-badge-success = implementado, trdr-badge-brand = código)\n\nTokens TRDR obrigatórios:\n- Background: var(--surface-tertiary) → hover: var(--surface-secondary)\n- Border: 1px solid var(--border-subtle) → hover: var(--border-default)\n- Border radius: var(--scale-radius-md) — 12px\n- Padding: var(--scale-spacing-2xl) — 24px\n- Gap entre containers: var(--scale-spacing-md) — 12px\n- Transição: border-color e background-color em 0.15s ease\n\nImplemente como componente React com CSS Module. Use as classes .trdr-badge e .trdr-badge-{variant} para os badges. O componente deve aceitar as props: href, icon?, title, description, headerBadges?, footerLeft?, footerBadges?."
|
|
1167
1333
|
}
|
|
1168
1334
|
},
|
|
1335
|
+
{
|
|
1336
|
+
"slug": "floating-menu",
|
|
1337
|
+
"name": "Floating Menu",
|
|
1338
|
+
"figmaId": "1921:55380",
|
|
1339
|
+
"category": "floating-menu",
|
|
1340
|
+
"implemented": true,
|
|
1341
|
+
"description": "Menu flutuante genérico do TRDR — compound component com Item, Title e Divider. Cobre desde listas simples de ações até menus seccionados com ícones Material Symbols. Usado em Janela, seletor de ativo, configurações, indicadores e notificações.",
|
|
1342
|
+
"props": [
|
|
1343
|
+
{
|
|
1344
|
+
"name": "width",
|
|
1345
|
+
"type": "number | string",
|
|
1346
|
+
"values": [
|
|
1347
|
+
"172",
|
|
1348
|
+
"240",
|
|
1349
|
+
"260",
|
|
1350
|
+
"280",
|
|
1351
|
+
"300",
|
|
1352
|
+
"auto"
|
|
1353
|
+
]
|
|
1354
|
+
},
|
|
1355
|
+
{
|
|
1356
|
+
"name": "children",
|
|
1357
|
+
"type": "ReactNode",
|
|
1358
|
+
"values": [
|
|
1359
|
+
"FloatingMenu.Item, FloatingMenu.Title, FloatingMenu.Divider, custom content"
|
|
1360
|
+
]
|
|
1361
|
+
},
|
|
1362
|
+
{
|
|
1363
|
+
"name": "Item.icon",
|
|
1364
|
+
"type": "string",
|
|
1365
|
+
"values": [
|
|
1366
|
+
"nome do Material Symbols (ex: \"close\", \"star\", \"search\")"
|
|
1367
|
+
]
|
|
1368
|
+
},
|
|
1369
|
+
{
|
|
1370
|
+
"name": "Item.disabled",
|
|
1371
|
+
"type": "boolean",
|
|
1372
|
+
"values": [
|
|
1373
|
+
"true",
|
|
1374
|
+
"false"
|
|
1375
|
+
]
|
|
1376
|
+
},
|
|
1377
|
+
{
|
|
1378
|
+
"name": "Item.onClick",
|
|
1379
|
+
"type": "function",
|
|
1380
|
+
"values": [
|
|
1381
|
+
"() => void"
|
|
1382
|
+
]
|
|
1383
|
+
},
|
|
1384
|
+
{
|
|
1385
|
+
"name": "Title.size",
|
|
1386
|
+
"type": "enum",
|
|
1387
|
+
"values": [
|
|
1388
|
+
"\"default\" (14px)",
|
|
1389
|
+
"\"sm\" (10px)"
|
|
1390
|
+
]
|
|
1391
|
+
}
|
|
1392
|
+
],
|
|
1393
|
+
"dimensions": [
|
|
1394
|
+
{
|
|
1395
|
+
"label": "Item height",
|
|
1396
|
+
"width": "—",
|
|
1397
|
+
"height": "32px"
|
|
1398
|
+
},
|
|
1399
|
+
{
|
|
1400
|
+
"label": "Menu padding",
|
|
1401
|
+
"width": "8px",
|
|
1402
|
+
"height": "8px"
|
|
1403
|
+
},
|
|
1404
|
+
{
|
|
1405
|
+
"label": "Ações da janela (5 itens)",
|
|
1406
|
+
"width": "172px",
|
|
1407
|
+
"height": "192px"
|
|
1408
|
+
},
|
|
1409
|
+
{
|
|
1410
|
+
"label": "Notificações (4 itens)",
|
|
1411
|
+
"width": "300px",
|
|
1412
|
+
"height": "182px"
|
|
1413
|
+
},
|
|
1414
|
+
{
|
|
1415
|
+
"label": "Configurações (5 itens + dropdown)",
|
|
1416
|
+
"width": "260px",
|
|
1417
|
+
"height": "239px"
|
|
1418
|
+
}
|
|
1419
|
+
],
|
|
1420
|
+
"tokens": [
|
|
1421
|
+
{
|
|
1422
|
+
"property": "Menu background",
|
|
1423
|
+
"token": "bg.secondary",
|
|
1424
|
+
"value": "#141519"
|
|
1425
|
+
},
|
|
1426
|
+
{
|
|
1427
|
+
"property": "Menu border",
|
|
1428
|
+
"token": "border.subtle",
|
|
1429
|
+
"value": "#222222"
|
|
1430
|
+
},
|
|
1431
|
+
{
|
|
1432
|
+
"property": "Menu border-radius",
|
|
1433
|
+
"token": "radius.md",
|
|
1434
|
+
"value": "8px"
|
|
1435
|
+
},
|
|
1436
|
+
{
|
|
1437
|
+
"property": "Item border-radius",
|
|
1438
|
+
"token": "radius.sm",
|
|
1439
|
+
"value": "4px"
|
|
1440
|
+
},
|
|
1441
|
+
{
|
|
1442
|
+
"property": "Item label color",
|
|
1443
|
+
"token": "content.secondary",
|
|
1444
|
+
"value": "#E8E8E8"
|
|
1445
|
+
},
|
|
1446
|
+
{
|
|
1447
|
+
"property": "Item icon color",
|
|
1448
|
+
"token": "content.tertiary",
|
|
1449
|
+
"value": "#A4A4A4"
|
|
1450
|
+
},
|
|
1451
|
+
{
|
|
1452
|
+
"property": "Item hover background",
|
|
1453
|
+
"token": "surface.secondary",
|
|
1454
|
+
"value": "#222222"
|
|
1455
|
+
},
|
|
1456
|
+
{
|
|
1457
|
+
"property": "Title color",
|
|
1458
|
+
"token": "content.tertiary",
|
|
1459
|
+
"value": "#A4A4A4"
|
|
1460
|
+
},
|
|
1461
|
+
{
|
|
1462
|
+
"property": "Divider color",
|
|
1463
|
+
"token": "border.subtle",
|
|
1464
|
+
"value": "#222222"
|
|
1465
|
+
},
|
|
1466
|
+
{
|
|
1467
|
+
"property": "Menu gap",
|
|
1468
|
+
"token": "spacing.xs",
|
|
1469
|
+
"value": "4px"
|
|
1470
|
+
},
|
|
1471
|
+
{
|
|
1472
|
+
"property": "Item padding",
|
|
1473
|
+
"token": "spacing.sm",
|
|
1474
|
+
"value": "8px"
|
|
1475
|
+
}
|
|
1476
|
+
],
|
|
1477
|
+
"anatomy": "Container: bg-secondary, border-subtle, radius-md 8px, shadow 0 4px 12px rgba(0,0,0,0.3), padding 8px, gap 4px\n\nFloatingMenu.Title — rótulo de seção: content-tertiary, 14px (padrão) ou 10px (size=\"sm\"), padding-left 8px\nFloatingMenu.Item — botão: 32px height, padding 0 8px, gap 8px, radius-sm 4px\n └ [Icon?: 20px Material Symbols Outlined, content-tertiary] [Label: Inter 14px, content-secondary, flex-1]\n └ :hover → background surface-secondary | :disabled → opacity 0.45, cursor not-allowed\nFloatingMenu.Divider — separador: 1px solid border-subtle, full-width",
|
|
1478
|
+
"code": {
|
|
1479
|
+
"html": "<!-- Floating Menu TRDR — HTML com classes globais -->\n\n<!-- Exemplo 1: ações simples (sem título) -->\n<div class=\"trdr-floating-menu\" style=\"width:172px\" role=\"menu\">\n <button class=\"trdr-floating-menu-item\" role=\"menuitem\">\n <span class=\"material-symbols-outlined\" style=\"font-size:20px;line-height:20px;font-variation-settings:'FILL' 0,'GRAD' 0;color:var(--content-tertiary)\">close</span>\n Fechar\n </button>\n <button class=\"trdr-floating-menu-item\" role=\"menuitem\">\n <span class=\"material-symbols-outlined\" style=\"font-size:20px;line-height:20px;font-variation-settings:'FILL' 0,'GRAD' 0;color:var(--content-tertiary)\">remove</span>\n Minimizar\n </button>\n <button class=\"trdr-floating-menu-item\" role=\"menuitem\">\n <span class=\"material-symbols-outlined\" style=\"font-size:20px;line-height:20px;font-variation-settings:'FILL' 0,'GRAD' 0;color:var(--content-tertiary)\">keep</span>\n Fixar\n </button>\n</div>\n\n<!-- Exemplo 2: com título, divisor e seções -->\n<div class=\"trdr-floating-menu\" style=\"width:240px\" role=\"menu\">\n <p class=\"trdr-floating-menu-title\">Favoritos</p>\n <button class=\"trdr-floating-menu-item\" role=\"menuitem\">\n <span class=\"material-symbols-outlined\" style=\"font-size:20px;line-height:20px;font-variation-settings:'FILL' 0,'GRAD' 0;color:var(--content-tertiary)\">star</span>\n WINFUT (Q19)\n </button>\n <button class=\"trdr-floating-menu-item\" role=\"menuitem\">\n <span class=\"material-symbols-outlined\" style=\"font-size:20px;line-height:20px;font-variation-settings:'FILL' 0,'GRAD' 0;color:var(--content-tertiary)\">star</span>\n PETR4\n </button>\n <div class=\"trdr-floating-menu-divider\" role=\"separator\"></div>\n <p class=\"trdr-floating-menu-title\">Recentes</p>\n <button class=\"trdr-floating-menu-item\" role=\"menuitem\">\n <span class=\"material-symbols-outlined\" style=\"font-size:20px;line-height:20px;font-variation-settings:'FILL' 0,'GRAD' 0;color:var(--content-tertiary)\">history</span>\n BBDC4\n </button>\n <div class=\"trdr-floating-menu-divider\" role=\"separator\"></div>\n <button class=\"trdr-floating-menu-item\" role=\"menuitem\">\n <span class=\"material-symbols-outlined\" style=\"font-size:20px;line-height:20px;font-variation-settings:'FILL' 0,'GRAD' 0;color:var(--content-tertiary)\">search</span>\n Buscar ativo...\n </button>\n</div>",
|
|
1480
|
+
"css": "/* Floating Menu TRDR — classes globais */\n\n/* Container */\n.trdr-floating-menu {\n background: var(--bg-secondary); /* #141519 */\n border: 1px solid var(--border-subtle); /* #222222 */\n border-radius: var(--radius-md); /* 8px */\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.30);\n padding: var(--spacing-sm); /* 8px */\n display: flex;\n flex-direction: column;\n gap: var(--spacing-xs); /* 4px */\n overflow: hidden;\n}\n\n/* Item — botão de ação */\n.trdr-floating-menu-item {\n display: flex;\n align-items: center;\n gap: var(--spacing-sm); /* 8px */\n height: 32px;\n padding: 0 var(--spacing-sm);\n background: transparent;\n border: none;\n border-radius: var(--radius-sm); /* 4px */\n cursor: pointer;\n font-family: var(--font-secondary);\n font-size: 14px;\n font-weight: 400;\n line-height: 1.2;\n color: var(--content-secondary); /* #E8E8E8 */\n text-align: left;\n width: 100%;\n flex-shrink: 0;\n transition: background 0.12s ease;\n}\n\n.trdr-floating-menu-item:not(:disabled):hover {\n background: var(--surface-secondary); /* #222222 */\n}\n\n.trdr-floating-menu-item:disabled {\n cursor: not-allowed;\n opacity: 0.45;\n}\n\n/* Título de seção */\n.trdr-floating-menu-title {\n color: var(--content-tertiary); /* #A4A4A4 */\n font-family: var(--font-secondary);\n font-size: 14px;\n font-weight: 400;\n line-height: 1.2;\n width: 100%;\n flex-shrink: 0;\n padding: 0 var(--spacing-sm);\n}\n\n.trdr-floating-menu-title-sm { /* size=\"sm\" — mercados, color-picker */\n font-size: 10px;\n line-height: 15px;\n padding: 4px var(--spacing-xs) 2px;\n}\n\n/* Divisor */\n.trdr-floating-menu-divider {\n height: 1px;\n background: var(--border-subtle); /* #222222 */\n width: 100%;\n flex-shrink: 0;\n}",
|
|
1481
|
+
"react": "import FloatingMenu from '@/components/ui/FloatingMenu'\n\n// Ações simples (como na Janela)\n<FloatingMenu width={172}>\n <FloatingMenu.Item icon=\"close\" onClick={onClose}>Fechar</FloatingMenu.Item>\n <FloatingMenu.Item icon=\"remove\" onClick={onMinimize}>Minimizar</FloatingMenu.Item>\n <FloatingMenu.Item icon=\"arrow_outward\" onClick={onMaximize}>Maximizar</FloatingMenu.Item>\n <FloatingMenu.Item icon=\"keep\" onClick={onPin}>Fixar</FloatingMenu.Item>\n <FloatingMenu.Item icon=\"edit\" onClick={onRename}>Renomear aba</FloatingMenu.Item>\n</FloatingMenu>\n\n// Com seções e divisores (como seletor de ativo)\n<FloatingMenu width={280}>\n <FloatingMenu.Title>Favoritos</FloatingMenu.Title>\n <FloatingMenu.Item icon=\"star\" onClick={() => selectAtivo('WINFUT')}>WINFUT (Q19)</FloatingMenu.Item>\n <FloatingMenu.Item icon=\"star\" onClick={() => selectAtivo('PETR4')}>PETR4</FloatingMenu.Item>\n <FloatingMenu.Divider />\n <FloatingMenu.Title>Recentes</FloatingMenu.Title>\n <FloatingMenu.Item icon=\"history\" onClick={() => selectAtivo('BBDC4')}>BBDC4</FloatingMenu.Item>\n <FloatingMenu.Item icon=\"history\" onClick={() => selectAtivo('ITUB4')}>ITUB4</FloatingMenu.Item>\n <FloatingMenu.Divider />\n <FloatingMenu.Item icon=\"search\">Buscar ativo...</FloatingMenu.Item>\n</FloatingMenu>\n\n// Item desabilitado\n<FloatingMenu width={240}>\n <FloatingMenu.Item icon=\"bar_chart\">Volume</FloatingMenu.Item>\n <FloatingMenu.Item icon=\"trending_up\">Média Móvel</FloatingMenu.Item>\n <FloatingMenu.Item icon=\"add\" disabled>Indicador premium</FloatingMenu.Item>\n</FloatingMenu>\n\n// Conteúdo customizado (qualquer ReactNode como children)\n<FloatingMenu width={260}>\n <FloatingMenu.Title>Conta</FloatingMenu.Title>\n <div style={{ padding: '4px 8px' }}>\n {/* Dropdown, Checkbox, Slider, etc. */}\n </div>\n <FloatingMenu.Divider />\n <FloatingMenu.Item icon=\"logout\">Sair</FloatingMenu.Item>\n</FloatingMenu>",
|
|
1482
|
+
"prompt": "Implemente o componente FloatingMenu do Design System TRDR — menu flutuante genérico pixel-perfect com Figma 1921:55380.\n\nCOMPOUND COMPONENT — 4 partes:\n1. FloatingMenu (container): bg var(--bg-secondary) #141519, border 1px solid var(--border-subtle) #222, border-radius var(--radius-md) 8px, box-shadow 0 4px 12px rgba(0,0,0,0.30), padding var(--spacing-sm) 8px, gap var(--spacing-xs) 4px, flex-col, overflow hidden. Prop width?: number|string.\n\n2. FloatingMenu.Item (button): height 32px, padding 0 var(--spacing-sm) 8px, gap var(--spacing-sm) 8px, border-radius var(--radius-sm) 4px, background transparent, color var(--content-secondary) #E8E8E8, font Inter 14px/400. :hover (não disabled) → background var(--surface-secondary) #222. :disabled → opacity 0.45, cursor not-allowed. Props: icon?: string (Material Symbols name), disabled?: boolean, onClick, children.\n\n3. FloatingMenu.Title (p): color var(--content-tertiary) #A4A4A4, font Inter 14px/400. Prop size: \"default\" (14px, padding-left 8px) | \"sm\" (10px/15px, padding 4px 4px 2px — usado em mercados/color-picker). children: string.\n\n4. FloatingMenu.Divider (div): height 1px, background var(--border-subtle) #222, width 100%.\n\nICON (Material Symbols Outlined): font-family 'Material Symbols Outlined', font-size 20px, line-height 20px, font-variation-settings: 'FILL' 0 'GRAD' 0, color var(--content-tertiary) #A4A4A4, flex-shrink 0.\n\nLABEL: flex:1, min-width 0, overflow hidden, text-overflow ellipsis, white-space nowrap.\n\nAPI: import FloatingMenu from '@/components/ui/FloatingMenu'\n<FloatingMenu width={172}>\n <FloatingMenu.Item icon=\"close\" onClick={fn}>Fechar</FloatingMenu.Item>\n <FloatingMenu.Title>Seção</FloatingMenu.Title>\n <FloatingMenu.Divider />\n</FloatingMenu>\n\nUse Object.assign(FloatingMenuRoot, { Item, Title, Divider }) para montar o compound component. NUNCA hex direto — apenas tokens var(--*). NUNCA --scale-spacing-* ou --scale-radius-*."
|
|
1483
|
+
}
|
|
1484
|
+
},
|
|
1169
1485
|
{
|
|
1170
1486
|
"slug": "janela",
|
|
1171
1487
|
"name": "Janela",
|