refactor: description list component

greymass · Dec 6, 2024 · 41afe8f · 41afe8f
1 parent d035664
commit 41afe8f
Show file tree

Hide file tree

Showing 12 changed files with 170 additions and 119 deletions.
diff --git a/src/lib/components/descriptionlist.svelte b/src/lib/components/descriptionlist.svelte
diff --git a/src/lib/components/descriptionlist/dd.svelte b/src/lib/components/descriptionlist/dd.svelte
@@ -0,0 +1,5 @@
+<script lang="ts">
+	let props = $props();
+</script>
+
+<dd class="grow text-balance break-all text-right tabular-nums">{@render props.children()}</dd>
diff --git a/src/lib/components/descriptionlist/dl.svelte b/src/lib/components/descriptionlist/dl.svelte
@@ -3,8 +3,8 @@
 	import Dlrow from './dlrow.svelte';
 
 	type DescriptionItem = {
-		key: string;
-		value: string;
+		title: string;
+		description: string;
 	};
 
 	interface Props {
@@ -17,10 +17,8 @@
 
 <dl class="@container">
 	{#if props.items}
-		{#each props.items as item}
-			<Dlrow title={item.key}>
-				{item.value}
-			</Dlrow>
+		{#each props.items as { title, description }}
+			<Dlrow {title} {description} />
 		{/each}
 	{:else if props.children}
 		{@render props.children()}

diff --git a/src/lib/components/descriptionlist/dlrow.svelte b/src/lib/components/descriptionlist/dlrow.svelte
@@ -1,16 +1,29 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
+	import DT from './dt.svelte';
+	import DD from './dd.svelte';
 
 	interface Props {
 		title: string;
-		children: Snippet;
+		description?: string;
+		children?: Snippet;
 	}
-	let { title, children }: Props = $props();
+
+	let { title = '', description, children }: Props = $props();
 </script>
 
 <div
 	class="flex flex-wrap items-center justify-between gap-x-4 border-b border-mineShaft-900 py-3 last:border-none @xs:flex-nowrap"
 >
-	<dt class="caption self-start text-nowrap">{title}</dt>
-	<dd class="grow text-balance break-all text-right tabular-nums">{@render children()}</dd>
+	<DT>{title}</DT>
+	<div
+		class="grow bg-red-500 before:content-['ERROR_Missing_DD_element_'] has-[dd]:bg-transparent has-[dd]:before:hidden"
+	>
+		{#if description}
+			<DD>{description}</DD>
+		{/if}
+		{#if children}
+			{@render children()}
+		{/if}
+	</div>
 </div>
diff --git a/src/lib/components/descriptionlist/dt.svelte b/src/lib/components/descriptionlist/dt.svelte
@@ -0,0 +1,5 @@
+<script lang="ts">
+	let props = $props();
+</script>
+
+<dt class="caption self-start text-nowrap">{@render props.children()}</dt>
diff --git a/src/lib/components/descriptionlist/index.ts b/src/lib/components/descriptionlist/index.ts
@@ -1,2 +1,4 @@
 export { default as DL } from './dl.svelte';
 export { default as DLRow } from './dlrow.svelte';
+export { default as DD } from './dd.svelte';
+export { default as DT } from './dt.svelte';
diff --git a/src/routes/[network]/(account)/ram/(forms)/buy/+page.svelte b/src/routes/[network]/(account)/ram/(forms)/buy/+page.svelte
@@ -20,6 +20,7 @@
 
 	import { BuyRAMState } from './state.svelte';
 	import { calAvailableSize, preventDefault } from '$lib/utils';
+	import { DD, DL, DLRow } from '$lib/components/descriptionlist';
 
 	let bytesInput: BytesInput | undefined = $state();
 	let assetInput: AssetInput | undefined = $state();
@@ -139,34 +140,39 @@
 			</Button>
 
 			<Stack class="gap-3">
-				<div class="mt-4 grid grid-cols-2 gap-y-0 text-lg">
-					<p class="text-gray-400">
-						{m.common_labeled_unit_price({
-							unit: `${context.network.chain.systemToken?.symbol.name}/RAM`
-						})} (KB)
-					</p>
-					<AssetText variant="full" class="text-right" value={buyRamState.pricePerKB} />
-
-					<div class="col-span-2 my-2 border-b border-mineShaft-900"></div>
-
-					<p class="text-gray-400">{m.ram_to_purchase()}</p>
-					<AssetText variant="full" class="text-right" value={buyRamState.kbs} />
-
-					<div class="col-span-2 my-2 border-b border-mineShaft-900"></div>
-
-					<p class="text-gray-400">{m.ram_purchase_value()}</p>
-					<AssetText variant="full" class="text-right" value={buyRamState.bytesValue} />
-
-					<div class="col-span-2 my-2 border-b border-mineShaft-900"></div>
-
-					<p class="text-gray-400">{m.common_network_fees()} (0.5%)</p>
-					<AssetText variant="full" class="text-right" value={buyRamState.fee} />
-
-					<div class="col-span-2 my-2 border-b border-mineShaft-900"></div>
-
-					<p class="text-gray-400">{m.common_total_cost()}</p>
-					<AssetText variant="full" class="text-right" value={buyRamState.bytesCost} />
-				</div>
+				<DL>
+					<DLRow
+						title={`${m.common_labeled_unit_price({ unit: `${context.network.chain.systemToken?.symbol.name}/RAM` })} (KB) `}
+					>
+						<DD>
+							<AssetText variant="full" value={buyRamState.pricePerKB} />
+						</DD>
+					</DLRow>
+
+					<DLRow title={m.ram_to_purchase()}>
+						<DD>
+							<AssetText variant="full" value={buyRamState.kbs} />
+						</DD>
+					</DLRow>
+
+					<DLRow title={m.ram_purchase_value()}>
+						<DD>
+							<AssetText variant="full" value={buyRamState.bytesValue} />
+						</DD>
+					</DLRow>
+
+					<DLRow title={`${m.common_network_fees()} (0.5%)`}>
+						<DD>
+							<AssetText variant="full" value={buyRamState.fee} />
+						</DD>
+					</DLRow>
+
+					<DLRow title={m.common_total_cost()}>
+						<DD>
+							<AssetText variant="full" value={buyRamState.bytesCost} />
+						</DD>
+					</DLRow>
+				</DL>
 
 				{#if buyRamState.valid}
 					{#if buyRamState.format === 'asset'}

diff --git a/src/routes/[network]/(account)/ram/(forms)/sell/+page.svelte b/src/routes/[network]/(account)/ram/(forms)/sell/+page.svelte
@@ -19,6 +19,7 @@
 
 	import { SellRAMState } from './state.svelte';
 	import { calAvailableSize, preventDefault } from '$lib/utils';
+	import { DD, DL, DLRow } from '$lib/components/descriptionlist';
 
 	let bytesInput: BytesInput | undefined = $state();
 	let assetInput: AssetInput | undefined = $state();
@@ -125,36 +126,40 @@
 			{m.common_unit_sell({ unit: 'RAM' })}
 		</Button>
 
-		<!-- TODO: use table  -->
 		<Stack class="gap-3">
-			<div class="mt-4 grid grid-cols-2 gap-y-0 text-lg">
-				<p class="text-muted">
-					{m.common_labeled_unit_price({
-						unit: `${context.network.chain.systemToken?.symbol.name}/RAM`
-					})} (KB)
-				</p>
-				<AssetText variant="full" class="text-right" value={sellRamState.pricePerKB} />
-
-				<div class="col-span-2 my-2 border-b border-mineShaft-900"></div>
-
-				<p class="text-muted">{m.ram_to_sell()}</p>
-				<AssetText variant="full" class="text-right" value={sellRamState.kbsToSell} />
-
-				<div class="col-span-2 my-2 border-b border-mineShaft-900"></div>
-
-				<p class="text-muted">{m.total_proceeds()}</p>
-				<AssetText variant="full" class="text-right" value={sellRamState.bytesValue} />
-
-				<div class="col-span-2 my-2 border-b border-mineShaft-900"></div>
-
-				<p class="text-muted">{m.common_network_fees()} (0.5%)</p>
-				<AssetText variant="full" class="text-right" value={sellRamState.fee} />
-
-				<div class="col-span-2 my-2 border-b border-mineShaft-900"></div>
-
-				<p class="text-muted">{m.common_expected_receive()}</p>
-				<AssetText variant="full" class="text-right" value={sellRamState.expectedToReceive} />
-			</div>
+			<DL>
+				<DLRow
+					title={` ${m.common_labeled_unit_price({ unit: `${context.network.chain.systemToken?.symbol.name}/RAM` })} (KB) `}
+				>
+					<DD>
+						<AssetText variant="full" value={sellRamState.pricePerKB} />
+					</DD>
+				</DLRow>
+
+				<DLRow title={m.ram_to_sell()}>
+					<DD>
+						<AssetText variant="full" value={sellRamState.kbsToSell} />
+					</DD>
+				</DLRow>
+
+				<DLRow title={m.total_proceeds()}>
+					<DD>
+						<AssetText variant="full" value={sellRamState.bytesValue} />
+					</DD>
+				</DLRow>
+
+				<DLRow title={` ${m.common_network_fees()} (0.5%) `}>
+					<DD>
+						<AssetText variant="full" value={sellRamState.fee} />
+					</DD>
+				</DLRow>
+
+				<DLRow title={m.common_expected_receive()}>
+					<DD>
+						<AssetText variant="full" value={sellRamState.expectedToReceive} />
+					</DD>
+				</DLRow>
+			</DL>
 
 			{#if sellRamState.valid}
 				<SummarySellRAM class="hidden" action={{ data: sellRamState.toJSON() }} />

diff --git a/src/routes/[network]/(account)/staking/(staking)/stake/+page.svelte b/src/routes/[network]/(account)/staking/(staking)/stake/+page.svelte
@@ -9,7 +9,7 @@
 	import type { UnicoveContext } from '$lib/state/client.svelte';
 	import { getContext } from 'svelte';
 	import { StakeManager } from './manager.svelte';
-	import Descriptionlist from '$lib/components/descriptionlist.svelte';
+	import { DL } from '$lib/components/descriptionlist';
 	import * as m from '$lib/paraglide/messages';
 
 	const context = getContext<UnicoveContext>('state');
@@ -19,14 +19,12 @@
 
 	let hints = $derived([
 		{
-			key: m.common_amount_to_act({
-				action: m.common_stake()
-			}),
-			value: manager.assetValue.toString()
+			title: m.common_amount_to_act({ action: m.common_stake() }),
+			description: manager.assetValue.toString()
 		},
-		{ key: m.staking_minimum_lockup(), value: '21 days' },
-		{ key: m.common_apr_current(), value: manager.apr + '%' },
-		{ key: m.staking_estimated_yield_yearly(), value: String(manager.estimateYield) }
+		{ title: m.staking_minimum_lockup(), description: '21 days' },
+		{ title: m.common_apr_current(), description: manager.apr + '%' },
+		{ title: m.staking_estimated_yield_yearly(), description: String(manager.estimateYield) }
 	]);
 
 	$effect(() => {
@@ -90,6 +88,6 @@
 			>
 		</Stack>
 
-		<Descriptionlist items={hints} />
+		<DL items={hints} />
 	{/if}
 </Stack>
diff --git a/src/routes/[network]/(account)/staking/(staking)/unstake/+page.svelte b/src/routes/[network]/(account)/staking/(staking)/unstake/+page.svelte
@@ -6,7 +6,7 @@
 	import Button from '$lib/components/button/button.svelte';
 	import Label from '$lib/components/input/label.svelte';
 	import TransactionSummary from '$lib/components/transactionSummary.svelte';
-	import Descriptionlist from '$lib/components/descriptionlist.svelte';
+	import { DL } from '$lib/components/descriptionlist';
 	import type { UnicoveContext } from '$lib/state/client.svelte';
 	import { getContext } from 'svelte';
 	import { UnstakeManager } from './manager.svelte';
@@ -18,7 +18,7 @@
 	let manager: UnstakeManager = $state(new UnstakeManager(data.network));
 
 	let hints = $derived([
-		{ key: m.staking_withdraw_timeframe(), value: manager.assetValue.toString() }
+		{ title: m.staking_withdraw_timeframe(), description: manager.assetValue.toString() }
 	]);
 
 	$effect(() => {
@@ -78,6 +78,6 @@
 			</Button>
 		</Stack>
 
-		<Descriptionlist items={hints} />
+		<DL items={hints} />
 	{/if}
 </Stack>
diff --git a/src/routes/[network]/(dev)/debug/components/sections/tables.svelte b/src/routes/[network]/(dev)/debug/components/sections/tables.svelte
@@ -1,6 +1,7 @@
 <script>
-	import Descriptionlist from '$lib/components/descriptionlist.svelte';
-	import { Stack } from '$lib/components/layout';
+	import { DD, DL, DLRow } from '$lib/components/descriptionlist';
+	import Account from '$lib/components/elements/account.svelte';
+	import { Card, Stack } from '$lib/components/layout';
 
 	const options = [
 		[
@@ -30,11 +31,11 @@
 	];
 
 	const items = [
-		{ key: 'Some title', value: '123456' },
-		{ key: 'Some title', value: '123456' },
-		{ key: 'Some title', value: '123456' },
-		{ key: 'Some title', value: '123456' },
-		{ key: 'Some title', value: '123456' }
+		{ title: 'Some title', description: '123456' },
+		{ title: 'Some title', description: '123456' },
+		{ title: 'Some title', description: '123456' },
+		{ title: 'Some title', description: '123456' },
+		{ title: 'Some title', description: '123456' }
 	];
 </script>
 
@@ -50,8 +51,39 @@
 			row striping here.
 		</p>
 
+		<Card class="max-w-md" title="Some items">
+			<DL {items} />
+		</Card>
+
+		<p>
+			For displaying a component in the description, or multiple values under a single key, you can
+			use the components declaratively.
+		</p>
+
+		<p>
+			Note: You need to wrap the child component correctly or you'll get a warning. There are CSS
+			rules that'll visually yell at you to fix it :)
+		</p>
+
 		<div class="max-w-md">
-			<Descriptionlist {items} />
+			<DL>
+				<DLRow title="First">
+					<DD>
+						<Account name={'teamgreymass'} />
+					</DD>
+				</DLRow>
+				<DLRow title="Second">
+					<DD>
+						<Account name={'unicove.gm'} />
+					</DD>
+					<DD>
+						<Account name={'test.gm'} />
+					</DD>
+				</DLRow>
+				<DLRow title="Warning">
+					<Account name={'unicove.gm'} />
+				</DLRow>
+			</DL>
 		</div>
 	</Stack>