Skip to content

Commit a4467a5

Browse files
rohanchkrabrtyrohanchkrabrty
authored
feat: naming convention for parent component containers (#510)
feat: remove .root suffix
1 parent 2e45124 commit a4467a5

File tree

15 files changed

+219
-219
lines changed

15 files changed

+219
-219
lines changed

‎apps/www/src/app/icons/page.tsx‎

Lines changed: 24 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,67 +1,66 @@
1-
"use client";
2-
import { useState } from "react";
3-
import * as Icons from "@raystack/apsara/icons";
4-
import { Search, Tabs } from "@raystack/apsara";
5-
import { cx } from "class-variance-authority";
6-
import IconDetails, { IconDetailsProps } from "@/components/icon-details";
7-
import IconEmpty from "@/components/icon-details/icon-empty";
8-
import style from "./page.module.css";
1+
'use client';
2+
import IconDetails, { IconDetailsProps } from '@/components/icon-details';
3+
import IconEmpty from '@/components/icon-details/icon-empty';
4+
import { Search, Tabs } from '@raystack/apsara';
5+
import * as Icons from '@raystack/apsara/icons';
6+
import { cx } from 'class-variance-authority';
7+
import { useState } from 'react';
8+
import style from './page.module.css';
99

10-
type TabType = "normal" | "filled";
10+
type TabType = 'normal' | 'filled';
1111

1212
const FILTERS: Record<TabType, (data: any) => Boolean> = {
13-
normal: ([name]) => !name.includes("Filled"),
14-
filled: ([name]) => name.includes("Filled"),
13+
normal: ([name]) => !name.includes('Filled'),
14+
filled: ([name]) => name.includes('Filled')
1515
};
1616

1717
const Page = () => {
18-
const [tab, setTab] = useState<TabType>("normal");
19-
const [search, setSearch] = useState("");
18+
const [tab, setTab] = useState<TabType>('normal');
19+
const [search, setSearch] = useState('');
2020
const [icon, setIcon] = useState<IconDetailsProps | null>(null);
2121

2222
return (
2323
<div className={style.container}>
2424
<main className={style.main}>
2525
<div className={style.content}>
26-
<div className={cx(style.info, "prose")}>
26+
<div className={cx(style.info, 'prose')}>
2727
<h1>Apsara Icons</h1>
2828
<p>
2929
A search input component with built-in search icon and optional
3030
clear button.
3131
</p>
3232
</div>
3333
<div className={style.controls}>
34-
<Tabs.Root
35-
value={tab}
36-
onValueChange={value => setTab(value as TabType)}>
34+
<Tabs value={tab} onValueChange={value => setTab(value as TabType)}>
3735
<Tabs.List>
38-
<Tabs.Trigger value="normal">Normal</Tabs.Trigger>
39-
<Tabs.Trigger value="filled">Filled</Tabs.Trigger>
36+
<Tabs.Trigger value='normal'>Normal</Tabs.Trigger>
37+
<Tabs.Trigger value='filled'>Filled</Tabs.Trigger>
4038
</Tabs.List>
41-
</Tabs.Root>
39+
</Tabs>
4240
<div className={style.spacer} />
4341
<Search
44-
placeholder="Search..."
42+
placeholder='Search...'
4543
showClearButton
4644
value={search}
4745
onChange={e => setSearch(e.target.value)}
48-
onClear={() => setSearch("")}
46+
onClear={() => setSearch('')}
4947
/>
5048
</div>
5149
<div className={style.icons}>
5250
{Object.entries(Icons)
5351
.filter(FILTERS[tab])
5452
.filter(([name]) =>
55-
name.toLowerCase().includes(search.toLowerCase()),
53+
name.toLowerCase().includes(search.toLowerCase())
5654
)
5755
.map(([name, Icon]) => (
5856
<div
5957
key={name}
6058
className={cx(
6159
style.icon,
62-
name === icon?.name ? style.active : "",
60+
name === icon?.name ? style.active : ''
6361
)}
64-
onClick={() => setIcon({ name, icon: Icon })}>
62+
onClick={() => setIcon({ name, icon: Icon })}
63+
>
6564
<div className={style.iconImage}>
6665
<Icon width={36} height={36} />
6766
</div>

‎apps/www/src/components/playground/list-examples.tsx‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,27 @@
1-
"use client";
1+
'use client';
22

3-
import { List, Flex } from "@raystack/apsara";
4-
import PlaygroundLayout from "./playground-layout";
3+
import { Flex, List } from '@raystack/apsara';
4+
import PlaygroundLayout from './playground-layout';
55

66
export function ListExamples() {
77
return (
8-
<PlaygroundLayout title="List">
9-
<Flex align="center" justify="center">
10-
<List.Root>
8+
<PlaygroundLayout title='List'>
9+
<Flex align='center' justify='center'>
10+
<List>
1111
<List.Header>User Information</List.Header>
12-
<List.Item align="center">
13-
<List.Label minWidth="88px">Status</List.Label>
12+
<List.Item align='center'>
13+
<List.Label minWidth='88px'>Status</List.Label>
1414
<List.Value>Active</List.Value>
1515
</List.Item>
16-
<List.Item align="center">
17-
<List.Label minWidth="88px">Type</List.Label>
16+
<List.Item align='center'>
17+
<List.Label minWidth='88px'>Type</List.Label>
1818
<List.Value>Premium Account</List.Value>
1919
</List.Item>
20-
<List.Item align="center">
21-
<List.Label minWidth="88px">Created</List.Label>
20+
<List.Item align='center'>
21+
<List.Label minWidth='88px'>Created</List.Label>
2222
<List.Value>April 24, 2024</List.Value>
2323
</List.Item>
24-
</List.Root>
24+
</List>
2525
</Flex>
2626
</PlaygroundLayout>
2727
);

‎apps/www/src/components/playground/radio-examples.tsx‎

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,27 @@
1-
"use client";
1+
'use client';
22

3-
import { Radio, Flex } from "@raystack/apsara";
4-
import PlaygroundLayout from "./playground-layout";
3+
import { Flex, Radio } from '@raystack/apsara';
4+
import PlaygroundLayout from './playground-layout';
55

66
export function RadioExamples() {
77
return (
8-
<PlaygroundLayout title="Radio">
9-
<Radio.Root defaultValue="2">
10-
<Flex gap="large">
11-
<Flex gap="small" align="center">
12-
<Radio.Item value="1" id="P1" />
13-
<label htmlFor="P1">Option One</label>
8+
<PlaygroundLayout title='Radio'>
9+
<Radio defaultValue='2'>
10+
<Flex gap='large'>
11+
<Flex gap='small' align='center'>
12+
<Radio.Item value='1' id='P1' />
13+
<label htmlFor='P1'>Option One</label>
1414
</Flex>
15-
<Flex gap="small" align="center">
16-
<Radio.Item value="2" id="P2" />
17-
<label htmlFor="P2">Option Two</label>
15+
<Flex gap='small' align='center'>
16+
<Radio.Item value='2' id='P2' />
17+
<label htmlFor='P2'>Option Two</label>
1818
</Flex>
19-
<Flex gap="small" align="center">
20-
<Radio.Item value="3" id="P3" disabled />
21-
<label htmlFor="P3">Option Three</label>
19+
<Flex gap='small' align='center'>
20+
<Radio.Item value='3' id='P3' disabled />
21+
<label htmlFor='P3'>Option Three</label>
2222
</Flex>
2323
</Flex>
24-
</Radio.Root>
24+
</Radio>
2525
</PlaygroundLayout>
2626
);
2727
}

‎apps/www/src/components/playground/tabs-examples.tsx‎

Lines changed: 22 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,36 @@
1-
"use client";
1+
'use client';
22

3-
import { Tabs, Flex } from "@raystack/apsara";
4-
import PlaygroundLayout from "./playground-layout";
5-
import { Info } from "lucide-react";
3+
import { Flex, Tabs } from '@raystack/apsara';
4+
import { Info } from 'lucide-react';
5+
import PlaygroundLayout from './playground-layout';
66

77
export function TabsExamples() {
88
return (
9-
<PlaygroundLayout title="Tabs">
10-
<Flex gap="extra-large" wrap="wrap">
11-
<Flex gap="large" direction="column">
12-
<Tabs.Root defaultValue="tab1">
9+
<PlaygroundLayout title='Tabs'>
10+
<Flex gap='extra-large' wrap='wrap'>
11+
<Flex gap='large' direction='column'>
12+
<Tabs defaultValue='tab1'>
1313
<Tabs.List>
14-
<Tabs.Trigger value="tab1">Account</Tabs.Trigger>
15-
<Tabs.Trigger value="tab2" disabled>
14+
<Tabs.Trigger value='tab1'>Account</Tabs.Trigger>
15+
<Tabs.Trigger value='tab2' disabled>
1616
Password
1717
</Tabs.Trigger>
18-
<Tabs.Trigger value="tab3">Settings</Tabs.Trigger>
18+
<Tabs.Trigger value='tab3'>Settings</Tabs.Trigger>
1919
</Tabs.List>
20-
<Tabs.Content value="tab1">Account settings</Tabs.Content>
21-
<Tabs.Content value="tab2">Password settings</Tabs.Content>
22-
<Tabs.Content value="tab3">Other settings</Tabs.Content>
23-
</Tabs.Root>
20+
<Tabs.Content value='tab1'>Account settings</Tabs.Content>
21+
<Tabs.Content value='tab2'>Password settings</Tabs.Content>
22+
<Tabs.Content value='tab3'>Other settings</Tabs.Content>
23+
</Tabs>
2424
</Flex>
25-
<Flex gap="large" direction="column">
26-
<Tabs.Root defaultValue="tab1">
25+
<Flex gap='large' direction='column'>
26+
<Tabs defaultValue='tab1'>
2727
<Tabs.List>
28-
<Tabs.Trigger value="tab1">Home</Tabs.Trigger>
29-
<Tabs.Trigger value="tab2" icon={<Info />} />
28+
<Tabs.Trigger value='tab1'>Home</Tabs.Trigger>
29+
<Tabs.Trigger value='tab2' icon={<Info />} />
3030
</Tabs.List>
31-
<Tabs.Content value="tab1">Home</Tabs.Content>
32-
<Tabs.Content value="tab2">Info</Tabs.Content>
33-
</Tabs.Root>
31+
<Tabs.Content value='tab1'>Home</Tabs.Content>
32+
<Tabs.Content value='tab2'>Info</Tabs.Content>
33+
</Tabs>
3434
</Flex>
3535
</Flex>
3636
</PlaygroundLayout>

0 commit comments

Comments
 (0)