Skip to content

Feat/radio input #176

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Jun 4, 2025
Merged

Feat/radio input #176

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
250dba1
feat: added a radio button custom
Sahil2004 May 29, 2025
f8720aa
docs: added name option in docs.
Sahil2004 May 29, 2025
dcdd7d4
fix: merge conflict.
Sahil2004 Jun 2, 2025
4249ed2
chore: cleaned the unnecessary classes and variables for input type r…
Sahil2004 Jun 3, 2025
504be58
fix: moved input radio to its own component.
Sahil2004 Jun 4, 2025
eb442b6
fix: keydown events added.
Sahil2004 Jun 4, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
74 changes: 41 additions & 33 deletions platforms/metagram/src/lib/ui/Input/Input.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,54 +1,62 @@
import { Input } from '..';
import { Input } from "..";

export default {
title: 'UI/Input',
component: Input,
tags: ['autodocs'],
render: (args: { type: string; placeholder: string }) => ({
Component: Input,
props: args
})
title: "UI/Input",
component: Input,
tags: ["autodocs"],
render: (args: { type: string; placeholder: string }) => ({
Component: Input,
props: args,
}),
};

export const Text = {
args: {
type: 'text',
placeholder: 'Joe Biden'
}
args: {
type: "text",
placeholder: "Joe Biden",
},
};

export const Tel = {
args: {
type: 'tel',
placeholder: '987654321'
}
args: {
type: "tel",
placeholder: "987654321",
},
};

export const NumberInput = {
args: {
type: 'number',
placeholder: 'Enter something'
}
args: {
type: "number",
placeholder: "Enter something",
},
};

export const Email = {
args: {
type: 'email',
placeholder: '[email protected]'
}
args: {
type: "email",
placeholder: "[email protected]",
},
};

export const Invalid = {
args: {
type: 'email',
placeholder: 'Invalid email',
value: 'not-an-email'
}
args: {
type: "email",
placeholder: "Invalid email",
value: "not-an-email",
},
};

export const Password = {
args: {
type: 'password',
placeholder: 'Please enter password'
}
args: {
type: "password",
placeholder: "Please enter password",
},
};

export const Radio = {
args: {
type: "radio",
value: "option1",
name: "option-1",
},
};
7 changes: 3 additions & 4 deletions platforms/metagram/src/lib/ui/Input/Input.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,17 +17,16 @@
...restProps
}: IInputProps = $props();

const cbase = $derived(
'w-full bg-grey py-3.5 px-6 text-[15px] text-black-800 font-geist font-normal placeholder:text-black-600 rounded-4xl outline-0 border border-transparent invalid:border-red invalid:text-red focus:invalid:text-black-800 focus:invalid:border-transparent'
);
const cbase =
'w-full bg-grey py-3.5 px-6 text-[15px] text-black-800 font-geist font-normal placeholder:text-black-600 rounded-4xl outline-0 border border-transparent invalid:border-red invalid:text-red focus:invalid:text-black-800 focus:invalid:border-transparent';
</script>

<input
{...restProps}
{type}
{placeholder}
bind:value
bind:this={input}
bind:value
class={cn([cbase, restProps.class].join(' '))}
tabindex="0"
/>
19 changes: 19 additions & 0 deletions platforms/metagram/src/lib/ui/InputRadio/InputRadio.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import { InputRadio } from "..";

export default {
title: "UI/InputRadio",
component: InputRadio,
tags: ["autodocs"],
render: (args: { type: string; placeholder: string }) => ({
Component: InputRadio,
props: args,
}),
};

export const Radio = {
args: {
type: "radio",
value: "option1",
name: "option-1",
},
};
53 changes: 53 additions & 0 deletions platforms/metagram/src/lib/ui/InputRadio/InputRadio.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
<script lang="ts">
import { cn } from '$lib/utils';
import type { HTMLAttributes } from 'svelte/elements';

interface IInputRadioProps extends HTMLAttributes<HTMLElement> {
selected?: string;
name?: string;
value: string;
}
Comment on lines +5 to +9
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Improve interface type specificity.

The interface extends HTMLAttributes<HTMLElement> but the component renders both input and span elements with different attribute requirements. This could lead to type safety issues.

Consider creating a more specific interface:

-interface IInputRadioProps extends HTMLAttributes<HTMLElement> {
+interface IInputRadioProps {
+  class?: string;
+  id?: string;
   selected?: string;
   name?: string;
   value: string;
+  [key: string]: any; // for additional props if needed
 }
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
interface IInputRadioProps extends HTMLAttributes<HTMLElement> {
selected?: string;
name?: string;
value: string;
}
interface IInputRadioProps {
class?: string;
id?: string;
selected?: string;
name?: string;
value: string;
[key: string]: any; // for additional props if needed
}
🤖 Prompt for AI Agents 
In platforms/metagram/src/lib/ui/InputRadio/InputRadio.svelte around lines 5 to
9, the interface IInputRadioProps extends HTMLAttributes<HTMLElement>, which is
too generic given the component renders both input and span elements with
different attribute needs. To improve type safety, create more specific
interfaces for the input and span elements separately, then combine or use them
appropriately in the component props to ensure correct attribute typing for each
element.


let {
value = '',
selected = $bindable(''),
name = '',
...restProps
}: IInputRadioProps = $props();

let radioElement: HTMLInputElement | null = $state(null);

const cbase =
"before:h-4.5 before:w-4.5 before:border-brand-burnt-orange before:-left-0.75 before:-bottom-0.25 relative before:absolute before:rounded-full before:border-2 before:bg-white before:content-['']";
</script>

<input
{...restProps}
type="radio"
{value}
bind:group={selected}
bind:this={radioElement}
{name}
checked={selected === value}
class={cn(['hidden', restProps.class].join(' '))}
/>

<span
{...restProps}
class={cn([cbase, restProps.class].join(' '))}
role="radio"
tabindex="0"
aria-checked={selected === value}
onclick={() => radioElement?.click()}
onkeydown={(e) => {
if (e.key === ' ' || e.key === 'Enter') {
e.preventDefault();
radioElement?.click();
}
}}
>
{#if selected === value}
<span class="bg-brand-burnt-orange bottom-0.75 left-0.25 absolute h-2.5 w-2.5 rounded-full"
></span>
{/if}
</span>
15 changes: 8 additions & 7 deletions platforms/metagram/src/lib/ui/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
export { default as Button } from './Button/Button.svelte';
export { default as Avatar } from './Avatar/Avatar.svelte';
export { default as Input } from './Input/Input.svelte';
export { default as Select } from './Select/Select.svelte';
export { default as Label } from './Label/Label.svelte';
export { default as Toggle } from './Toggle/Toggle.svelte';
export { default as Helper } from './Helper/Helper.svelte';
export { default as Button } from "./Button/Button.svelte";
export { default as Avatar } from "./Avatar/Avatar.svelte";
export { default as Input } from "./Input/Input.svelte";
export { default as Select } from "./Select/Select.svelte";
export { default as Label } from "./Label/Label.svelte";
export { default as Toggle } from "./Toggle/Toggle.svelte";
export { default as Helper } from "./Helper/Helper.svelte";
export { default as InputRadio } from "./InputRadio/InputRadio.svelte";
Loading