Skip to content

Commit 0be364c

Browse files
grv-saini-20grv-saini-20
committed
fix: radio input
2 parents ca12273 + e735f9c commit 0be364c

File tree

10 files changed

+210
-67
lines changed

10 files changed

+210
-67
lines changed

‎platforms/metagram/src/lib/fragments/Modal/Modal.svelte‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,8 +36,8 @@
3636
animationType: 'ease',
3737
animationDuration: 300,
3838
fitHeight: true,
39-
bottomClose: true,
40-
showDraggable: true,
39+
bottomClose: false,
40+
showDraggable: false,
4141
buttonDestroy: false,
4242
initialBreak: initialBreak,
4343
breaks: {

‎platforms/metagram/src/lib/fragments/SettingsTile/SettingsTile.stories.ts‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import type { ComponentProps } from "svelte";
2+
import SettingsTile from "./SettingsTile.svelte";
3+
4+
export default {
5+
title: "UI/SettingsTile",
6+
component: SettingsTile,
7+
tags: ["autodocs"],
8+
render: (args: {
9+
Component: SettingsTile;
10+
props: ComponentProps<typeof SettingsTile>;
11+
}) => ({
12+
Component: SettingsTile,
13+
props: args,
14+
}),
15+
};
16+
17+
export const Primary = {
18+
args: {
19+
title: "Who can see your posts?",
20+
currentStatus: "Only followers",
21+
onclick: () => alert("clicked"),
22+
},
23+
};

‎platforms/metagram/src/lib/fragments/SettingsTile/SettingsTile.svelte‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<script lang="ts">
2+
import { cn } from '$lib/utils';
3+
import { ArrowRight01Icon } from '@hugeicons/core-free-icons';
4+
import { HugeiconsIcon } from '@hugeicons/svelte';
5+
import type { HTMLButtonAttributes } from 'svelte/elements';
6+
7+
interface ISettingsTile extends HTMLButtonAttributes {
8+
title: string;
9+
currentStatus: 'string';
10+
}
11+
12+
const { title, currentStatus, ...restProps }: ISettingsTile = $props();
13+
</script>
14+
15+
<button
16+
{...restProps}
17+
class={cn(
18+
['flex w-full cursor-pointer items-center justify-between', restProps.class].join(' ')
19+
)}
20+
>
21+
<div class="flex flex-col items-start gap-1">
22+
<span class="font-semibold">{title}</span>
23+
<span class="text-black/60">{currentStatus}</span>
24+
</div>
25+
<HugeiconsIcon icon={ArrowRight01Icon} className="text-black/40" />
26+
</button>

‎platforms/metagram/src/lib/fragments/index.ts‎

Lines changed: 20 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,20 @@
1-
export { default as Profile } from './Profile/Profile.svelte';
2-
export { default as Header } from './Header/Header.svelte';
3-
export { default as BottomNav } from './BottomNav/BottomNav.svelte';
4-
export { default as SettingsNavigationButton } from './SettingsNavigationButton/SettingsNavigationButton.svelte';
5-
export { default as MessageInput } from './MessageInput/MessageInput.svelte';
6-
export { default as InputFile } from './InputFile/InputFile.svelte';
7-
export { default as Drawer } from './Drawer/Drawer.svelte';
8-
export { default as Message } from './Message/Message.svelte';
9-
export { default as ActionMenu } from './ActionMenu/ActionMenu.svelte';
10-
export { default as Modal } from './Modal/Modal.svelte';
11-
export { default as SideBar } from './SideBar/SideBar.svelte';
12-
export { default as RightAside } from './RightAside/RightAside.svelte';
13-
export { default as SettingsToggleButton } from './SettingsToggleButton/SettingsToggleButton.svelte';
14-
export { default as Post } from './Post/Post.svelte';
15-
export { default as ChatMessage } from './ChatMessage/ChatMessage.svelte';
16-
export { default as Comment } from './Comment/Comment.svelte';
17-
export { default as SettingsDeleteButton } from './SettingsDeleteButton/SettingsDeleteButton.svelte';
18-
export { default as UserRequest } from './UserRequest/UserRequest.svelte';
19-
export { default as UploadedPostView } from './UploadedPostView/UploadedPostView.svelte';
1+
export { default as Profile } from "./Profile/Profile.svelte";
2+
export { default as Header } from "./Header/Header.svelte";
3+
export { default as BottomNav } from "./BottomNav/BottomNav.svelte";
4+
export { default as SettingsNavigationButton } from "./SettingsNavigationButton/SettingsNavigationButton.svelte";
5+
export { default as MessageInput } from "./MessageInput/MessageInput.svelte";
6+
export { default as InputFile } from "./InputFile/InputFile.svelte";
7+
export { default as Drawer } from "./Drawer/Drawer.svelte";
8+
export { default as Message } from "./Message/Message.svelte";
9+
export { default as ActionMenu } from "./ActionMenu/ActionMenu.svelte";
10+
export { default as Modal } from "./Modal/Modal.svelte";
11+
export { default as SideBar } from "./SideBar/SideBar.svelte";
12+
export { default as RightAside } from "./RightAside/RightAside.svelte";
13+
export { default as SettingsToggleButton } from "./SettingsToggleButton/SettingsToggleButton.svelte";
14+
export { default as Post } from "./Post/Post.svelte";
15+
export { default as ChatMessage } from "./ChatMessage/ChatMessage.svelte";
16+
export { default as Comment } from "./Comment/Comment.svelte";
17+
export { default as SettingsDeleteButton } from "./SettingsDeleteButton/SettingsDeleteButton.svelte";
18+
export { default as SettingsTile } from "./SettingsTile/SettingsTile.svelte";
19+
export { default as UserRequest } from "./UserRequest/UserRequest.svelte";
20+
export { default as UploadedPostView } from "./UploadedPostView/UploadedPostView.svelte";

‎platforms/metagram/src/lib/ui/Input/Input.stories.ts‎

Lines changed: 41 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,54 +1,62 @@
1-
import { Input } from '..';
1+
import { Input } from "..";
22

33
export default {
4-
title: 'UI/Input',
5-
component: Input,
6-
tags: ['autodocs'],
7-
render: (args: { type: string; placeholder: string }) => ({
8-
Component: Input,
9-
props: args
10-
})
4+
title: "UI/Input",
5+
component: Input,
6+
tags: ["autodocs"],
7+
render: (args: { type: string; placeholder: string }) => ({
8+
Component: Input,
9+
props: args,
10+
}),
1111
};
1212

1313
export const Text = {
14-
args: {
15-
type: 'text',
16-
placeholder: 'Joe Biden'
17-
}
14+
args: {
15+
type: "text",
16+
placeholder: "Joe Biden",
17+
},
1818
};
1919

2020
export const Tel = {
21-
args: {
22-
type: 'tel',
23-
placeholder: '987654321'
24-
}
21+
args: {
22+
type: "tel",
23+
placeholder: "987654321",
24+
},
2525
};
2626

2727
export const NumberInput = {
28-
args: {
29-
type: 'number',
30-
placeholder: 'Enter something'
31-
}
28+
args: {
29+
type: "number",
30+
placeholder: "Enter something",
31+
},
3232
};
3333

3434
export const Email = {
35-
args: {
36-
type: 'email',
37-
placeholder: '[email protected]'
38-
}
35+
args: {
36+
type: "email",
37+
placeholder: "[email protected]",
38+
},
3939
};
4040

4141
export const Invalid = {
42-
args: {
43-
type: 'email',
44-
placeholder: 'Invalid email',
45-
value: 'not-an-email'
46-
}
42+
args: {
43+
type: "email",
44+
placeholder: "Invalid email",
45+
value: "not-an-email",
46+
},
4747
};
4848

4949
export const Password = {
50-
args: {
51-
type: 'password',
52-
placeholder: 'Please enter password'
53-
}
50+
args: {
51+
type: "password",
52+
placeholder: "Please enter password",
53+
},
54+
};
55+
56+
export const Radio = {
57+
args: {
58+
type: "radio",
59+
value: "option1",
60+
name: "option-1",
61+
},
5462
};

‎platforms/metagram/src/lib/ui/Input/Input.svelte‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,17 +17,16 @@
1717
...restProps
1818
}: IInputProps = $props();
1919
20-
const cbase = $derived(
21-
'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'
22-
);
20+
const cbase =
21+
'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';
2322
</script>
2423

2524
<input
2625
{...restProps}
2726
{type}
2827
{placeholder}
29-
bind:value
3028
bind:this={input}
29+
bind:value
3130
class={cn([cbase, restProps.class].join(' '))}
3231
tabindex="0"
3332
/>

‎platforms/metagram/src/lib/ui/InputRadio/InputRadio.stories.ts‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { InputRadio } from "..";
2+
3+
export default {
4+
title: "UI/InputRadio",
5+
component: InputRadio,
6+
tags: ["autodocs"],
7+
render: (args: { type: string; placeholder: string }) => ({
8+
Component: InputRadio,
9+
props: args,
10+
}),
11+
};
12+
13+
export const Radio = {
14+
args: {
15+
type: "radio",
16+
value: "option1",
17+
name: "option-1",
18+
},
19+
};

‎platforms/metagram/src/lib/ui/InputRadio/InputRadio.svelte‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
<script lang="ts">
2+
import { cn } from '$lib/utils';
3+
import type { HTMLAttributes } from 'svelte/elements';
4+
5+
interface IInputRadioProps extends HTMLAttributes<HTMLElement> {
6+
selected?: string;
7+
name?: string;
8+
value: string;
9+
id?: string;
10+
}
11+
12+
let {
13+
value = '',
14+
selected = $bindable(''),
15+
name = '',
16+
id,
17+
...restProps
18+
}: IInputRadioProps = $props();
19+
20+
let radioElement: HTMLInputElement | null = $state(null);
21+
22+
const cbase =
23+
"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-['']";
24+
</script>
25+
26+
<input
27+
{...restProps}
28+
{id}
29+
type="radio"
30+
{value}
31+
bind:group={selected}
32+
bind:this={radioElement}
33+
{name}
34+
checked={selected === value}
35+
class={cn(['hidden', restProps.class].join(' '))}
36+
/>
37+
38+
<span
39+
{...restProps}
40+
class={cn([cbase, restProps.class].join(' '))}
41+
role="radio"
42+
tabindex="0"
43+
aria-checked={selected === value}
44+
onclick={() => radioElement?.click()}
45+
onkeydown={(e) => {
46+
if (e.key === ' ' || e.key === 'Enter') {
47+
e.preventDefault();
48+
radioElement?.click();
49+
}
50+
}}
51+
>
52+
{#if selected === value}
53+
<span class="bg-brand-burnt-orange bottom-0.75 left-0.25 absolute h-2.5 w-2.5 rounded-full"
54+
></span>
55+
{/if}
56+
</span>

‎platforms/metagram/src/lib/ui/index.ts‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
1-
export { default as Button } from './Button/Button.svelte';
2-
export { default as Avatar } from './Avatar/Avatar.svelte';
3-
export { default as Input } from './Input/Input.svelte';
4-
export { default as Select } from './Select/Select.svelte';
5-
export { default as Label } from './Label/Label.svelte';
6-
export { default as Toggle } from './Toggle/Toggle.svelte';
7-
export { default as Helper } from './Helper/Helper.svelte';
8-
export { default as Textarea } from './Textarea/Textarea.svelte';
1+
export { default as Button } from "./Button/Button.svelte";
2+
export { default as Avatar } from "./Avatar/Avatar.svelte";
3+
export { default as Input } from "./Input/Input.svelte";
4+
export { default as Select } from "./Select/Select.svelte";
5+
export { default as Label } from "./Label/Label.svelte";
6+
export { default as Toggle } from "./Toggle/Toggle.svelte";
7+
export { default as Helper } from "./Helper/Helper.svelte";
8+
export { default as InputRadio } from "./InputRadio/InputRadio.svelte";
9+
export { default as Textarea } from "./Textarea/Textarea.svelte";

‎platforms/metagram/src/routes/(protected)/+layout.svelte‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
import { showComments } from '$lib/store/store.svelte';
88
import type { CommentType } from '$lib/types';
99
import { Button, Label, Textarea } from '$lib/ui';
10+
import InputRadio from '$lib/ui/InputRadio/InputRadio.svelte';
1011
import { ArrowLeft02Icon } from '@hugeicons/core-free-icons';
1112
import { HugeiconsIcon } from '@hugeicons/svelte';
1213
import type { CupertinoPane } from 'cupertino-pane';
@@ -24,6 +25,9 @@
2425
let isAddCaption: boolean = $state(false);
2526
let caption: string = $state('');
2627
let idFromParams = $state();
28+
let postVisibility = $state('');
29+
30+
let postVisibilityOptions = ["only followers", "close-friends", "anyone"]
2731
2832
const handleSend = async () => {
2933
const newComment = {
@@ -211,7 +215,13 @@
211215
</div>
212216
{/each}
213217
</div>
214-
<h3 class="text-black-800 mt-25">Who can see the post?</h3>
218+
<h3 class="text-black-800 mt-20 mb-2">Who can see the post?</h3>
219+
{#each postVisibilityOptions as option,i}
220+
<div class="flex items-center justify-between w-[50%] mb-2">
221+
<Label for={option + i}>{option}</Label>
222+
<InputRadio name="post-visibility" id={option + i} value={option} bind:selected={postVisibility}/>
223+
</div>
224+
{/each}
215225
{/if}
216226
{#if files}
217227
<div class="grid grid-cols-2 gap-2">

0 commit comments

Comments
 (0)