Skip to content

Commit 7e7c68b

Browse files
satnaingsatnaing
committed
feat: add config drawer and update overall layout (#186)
* feat!: implement layout context and configuration drawer This update introduces a new layout context to manage sidebar collapsibility and variant settings, enhancing the application's layout flexibility. Additionally, a configuration drawer component is added, allowing users to adjust theme settings dynamically. Various components are updated to utilize the new context, improving overall state management and user experience. * feat: update layout config style with custom icons * feat: add collapsible config in theme config * feat: add light/dark theme setting in theme config * feat: add dir theme setting in theme config * refactor: extract RadioGroupItem and improve UX - Extract reusable RadioGroupItem component to reduce code duplication - Add CircleCheck icon for better visual feedback on selected items - Improve import structure by destructuring Radix UI components - Update sheet description text for better clarity - Add focus-visible ring styling for improved accessibility - Reorder component functions for better code organization - Remove redundant className from Settings icon * feat: enhance theme management with resolvedTheme state Update ThemeConfig to use resolvedTheme instead of theme. This ensures the active state even if the user chooses 'system'. * feat: add theme config reset buttons * feat: add config for system theme * fix: make config drawer scrollable if overflow * feat: add default layout config option * refactor: update theme config section names and icons * fix: update sidebar reset state * fix: optimize theme resolution and improve a11y - Replace getResolvedTheme function with useMemo to prevent unnecessary re-computations - Remove redundant useState for resolvedTheme state management - Add comprehensive ARIA labels and accessibility attributes to config drawer - Improve screen reader support with proper semantic markup - Add descriptive labels for all radio groups and interactive elements - Mark decorative icons as aria-hidden for better accessibility - Add hidden descriptions explaining each configuration option - Update direction description text for better clarity
1 parent 1ab319f commit 7e7c68b

24 files changed

Lines changed: 1515 additions & 72 deletions

‎README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ If you want to update components using the Shadcn CLI (e.g., `npx shadcn@latest
3232

3333
- scroll-area
3434
- sonner
35+
- separator
3536

3637
### RTL Updated Components
3738

‎index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@
7373
<meta name="theme-color" content="#fff" />
7474
</head>
7575

76-
<body class="group/body">
76+
<body>
7777
<div id="root"></div>
7878
<script type="module" src="/src/main.tsx"></script>
7979
</body>

‎src/assets/custom/icon-dir.tsx‎

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
import { SVGProps } from 'react'
2+
import { cn } from '@/lib/utils'
3+
import { Direction } from '@/context/direction-context'
4+
5+
interface Props extends SVGProps<SVGSVGElement> {
6+
dir: Direction
7+
}
8+
9+
export function IconDir({ dir, className, ...props }: Props) {
10+
return (
11+
<svg
12+
data-name={`icon-dir-${dir}`}
13+
xmlns='http://www.w3.org/2000/svg'
14+
viewBox='0 0 79.86 51.14'
15+
className={cn(dir === 'rtl' && 'rotate-y-180', className)}
16+
{...props}
17+
>
18+
<path
19+
d='M23.42.51h51.92c2.21 0 4 1.79 4 4v42.18c0 2.21-1.79 4-4 4H23.42s-.04-.02-.04-.04V.55s.02-.04.04-.04z'
20+
opacity={0.15}
21+
/>
22+
<path
23+
fill='none'
24+
opacity={0.72}
25+
strokeLinecap='round'
26+
strokeMiterlimit={10}
27+
strokeWidth='2px'
28+
d='M5.56 14.88L17.78 14.88'
29+
/>
30+
<path
31+
fill='none'
32+
opacity={0.48}
33+
strokeLinecap='round'
34+
strokeMiterlimit={10}
35+
strokeWidth='2px'
36+
d='M5.56 22.09L16.08 22.09'
37+
/>
38+
<path
39+
fill='none'
40+
opacity={0.55}
41+
strokeLinecap='round'
42+
strokeMiterlimit={10}
43+
strokeWidth='2px'
44+
d='M5.56 18.38L14.93 18.38'
45+
/>
46+
<g strokeLinecap='round' strokeMiterlimit={10}>
47+
<circle cx={7.51} cy={7.4} r={2.54} opacity={0.8} />
48+
<path
49+
fill='none'
50+
opacity={0.8}
51+
strokeWidth='2px'
52+
d='M12.06 6.14L17.78 6.14'
53+
/>
54+
<path fill='none' opacity={0.6} d='M11.85 8.79L16.91 8.79' />
55+
</g>
56+
<path
57+
fill='none'
58+
opacity={0.62}
59+
strokeLinecap='round'
60+
strokeMiterlimit={10}
61+
strokeWidth='3px'
62+
d='M29.41 7.4L34.67 7.4'
63+
/>
64+
<rect
65+
x={28.76}
66+
y={11.21}
67+
width={26.03}
68+
height={2.73}
69+
rx={0.64}
70+
ry={0.64}
71+
opacity={0.44}
72+
strokeLinecap='round'
73+
strokeMiterlimit={10}
74+
/>
75+
<rect
76+
x={28.76}
77+
y={17.01}
78+
width={44.25}
79+
height={13.48}
80+
rx={0.64}
81+
ry={0.64}
82+
opacity={0.3}
83+
strokeLinecap='round'
84+
strokeMiterlimit={10}
85+
/>
86+
<rect
87+
x={28.76}
88+
y={33.57}
89+
width={44.25}
90+
height={4.67}
91+
rx={0.64}
92+
ry={0.64}
93+
opacity={0.21}
94+
strokeLinecap='round'
95+
strokeMiterlimit={10}
96+
/>
97+
<rect
98+
x={28.76}
99+
y={41.32}
100+
width={36.21}
101+
height={4.67}
102+
rx={0.64}
103+
ry={0.64}
104+
opacity={0.3}
105+
strokeLinecap='round'
106+
strokeMiterlimit={10}
107+
/>
108+
</svg>
109+
)
110+
}

‎src/assets/custom/icon-layout-compact.tsx‎

Lines changed: 131 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
import { SVGProps } from 'react'
2+
3+
export function IconLayoutCompact(props: SVGProps<SVGSVGElement>) {
4+
return (
5+
<svg
6+
data-name='icon-layout-compact'
7+
xmlns='http://www.w3.org/2000/svg'
8+
viewBox='0 0 79.86 51.14'
9+
{...props}
10+
>
11+
<rect
12+
x={5.84}
13+
y={5.2}
14+
width={4}
15+
height={40}
16+
rx={2}
17+
ry={2}
18+
strokeLinecap='round'
19+
strokeMiterlimit={10}
20+
/>
21+
<g stroke='#fff' strokeLinecap='round' strokeMiterlimit={10}>
22+
<path
23+
fill='none'
24+
opacity={0.66}
25+
strokeWidth='2px'
26+
d='M7.26 11.56L8.37 11.56'
27+
/>
28+
<path
29+
fill='none'
30+
opacity={0.51}
31+
strokeWidth='2px'
32+
d='M7.26 14.49L8.37 14.49'
33+
/>
34+
<path
35+
fill='none'
36+
opacity={0.52}
37+
strokeWidth='2px'
38+
d='M7.26 17.39L8.37 17.39'
39+
/>
40+
<circle cx={7.81} cy={7.25} r={1.16} fill='#fff' opacity={0.8} />
41+
</g>
42+
<path
43+
fill='none'
44+
opacity={0.75}
45+
strokeLinecap='round'
46+
strokeMiterlimit={10}
47+
strokeWidth='3px'
48+
d='M15.81 14.49L22.89 14.49'
49+
/>
50+
<rect
51+
x={14.93}
52+
y={18.39}
53+
width={22.19}
54+
height={2.73}
55+
rx={0.64}
56+
ry={0.64}
57+
opacity={0.5}
58+
strokeLinecap='round'
59+
strokeMiterlimit={10}
60+
/>
61+
<rect
62+
x={14.93}
63+
y={5.89}
64+
width={59.16}
65+
height={2.73}
66+
rx={0.64}
67+
ry={0.64}
68+
opacity={0.9}
69+
strokeLinecap='round'
70+
strokeMiterlimit={10}
71+
/>
72+
<rect
73+
x={14.93}
74+
y={24.22}
75+
width={32.68}
76+
height={19.95}
77+
rx={2.11}
78+
ry={2.11}
79+
opacity={0.4}
80+
strokeLinecap='round'
81+
strokeMiterlimit={10}
82+
/>
83+
<g strokeLinecap='round' strokeMiterlimit={10}>
84+
<rect
85+
x={59.05}
86+
y={38.15}
87+
width={2.01}
88+
height={3.42}
89+
rx={0.33}
90+
ry={0.33}
91+
opacity={0.32}
92+
/>
93+
<rect
94+
x={54.78}
95+
y={34.99}
96+
width={2.01}
97+
height={6.58}
98+
rx={0.33}
99+
ry={0.33}
100+
opacity={0.44}
101+
/>
102+
<rect
103+
x={63.17}
104+
y={32.86}
105+
width={2.01}
106+
height={8.7}
107+
rx={0.33}
108+
ry={0.33}
109+
opacity={0.53}
110+
/>
111+
<rect
112+
x={67.54}
113+
y={29.17}
114+
width={2.01}
115+
height={12.4}
116+
rx={0.33}
117+
ry={0.33}
118+
opacity={0.66}
119+
/>
120+
</g>
121+
<g opacity={0.5}>
122+
<circle cx={62.16} cy={18.63} r={7.5} />
123+
<path d='M62.16 11.63c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.14-7-7 3.14-7 7-7m0-1c-4.42 0-8 3.58-8 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8z' />
124+
</g>
125+
<g opacity={0.74}>
126+
<path d='M63.04 18.13l3.38-5.67c.93.64 1.7 1.48 2.26 2.47.56.98.89 2.08.96 3.21h-6.6z' />
127+
<path d='M66.57 13.19a6.977 6.977 0 012.52 4.44h-5.17l2.65-4.44m-.31-1.43l-4.1 6.87h8c0-1.39-.36-2.75-1.04-3.95a8.007 8.007 0 00-2.86-2.92z' />
128+
</g>
129+
</svg>
130+
)
131+
}

‎src/assets/custom/icon-layout-default.tsx‎

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
import { SVGProps } from 'react'
2+
3+
export function IconLayoutDefault(props: SVGProps<SVGSVGElement>) {
4+
return (
5+
<svg
6+
data-name='con-layout-default'
7+
xmlns='http://www.w3.org/2000/svg'
8+
viewBox='0 0 79.86 51.14'
9+
{...props}
10+
>
11+
<path
12+
d='M39.22 15.99h-8.16c-.79 0-1.43-.67-1.43-1.5s.64-1.5 1.43-1.5h8.16c.79 0 1.43.67 1.43 1.5s-.64 1.5-1.43 1.5z'
13+
opacity={0.75}
14+
/>
15+
<rect
16+
x={29.63}
17+
y={18.39}
18+
width={16.72}
19+
height={2.73}
20+
rx={1.36}
21+
ry={1.36}
22+
opacity={0.5}
23+
/>
24+
<path
25+
d='M75.1 6.68v1.45c0 .63-.49 1.14-1.09 1.14H30.72c-.6 0-1.09-.51-1.09-1.14V6.68c0-.62.49-1.14 1.09-1.14h43.29c.6 0 1.09.52 1.09 1.14z'
26+
opacity={0.9}
27+
/>
28+
<rect
29+
x={29.63}
30+
y={24.22}
31+
width={21.8}
32+
height={19.95}
33+
rx={2.11}
34+
ry={2.11}
35+
opacity={0.4}
36+
/>
37+
<g strokeLinecap='round' strokeMiterlimit={10}>
38+
<rect
39+
x={61.06}
40+
y={38.15}
41+
width={2.01}
42+
height={3.42}
43+
rx={0.33}
44+
ry={0.33}
45+
opacity={0.32}
46+
/>
47+
<rect
48+
x={56.78}
49+
y={34.99}
50+
width={2.01}
51+
height={6.58}
52+
rx={0.33}
53+
ry={0.33}
54+
opacity={0.44}
55+
/>
56+
<rect
57+
x={65.17}
58+
y={32.86}
59+
width={2.01}
60+
height={8.7}
61+
rx={0.33}
62+
ry={0.33}
63+
opacity={0.53}
64+
/>
65+
<rect
66+
x={69.55}
67+
y={29.17}
68+
width={2.01}
69+
height={12.4}
70+
rx={0.33}
71+
ry={0.33}
72+
opacity={0.66}
73+
/>
74+
</g>
75+
<g opacity={0.5}>
76+
<circle cx={63.17} cy={18.63} r={7.5} />
77+
<path d='M63.17 11.63c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.14-7-7 3.14-7 7-7m0-1c-4.42 0-8 3.58-8 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8z' />
78+
</g>
79+
<g opacity={0.74}>
80+
<path d='M64.05 18.13l3.38-5.67c.93.64 1.7 1.48 2.26 2.47.56.98.89 2.08.96 3.21h-6.6z' />
81+
<path d='M67.57 13.19a6.977 6.977 0 012.52 4.44h-5.17l2.65-4.44m-.31-1.43l-4.1 6.87h8c0-1.39-.36-2.75-1.04-3.95a8.007 8.007 0 00-2.86-2.92z' />
82+
</g>
83+
<g strokeLinecap='round' strokeMiterlimit={10}>
84+
<rect
85+
x={5.84}
86+
y={5.02}
87+
width={19.14}
88+
height={40}
89+
rx={2}
90+
ry={2}
91+
opacity={0.8}
92+
/>
93+
<g stroke='#fff'>
94+
<path
95+
fill='none'
96+
opacity={0.72}
97+
strokeWidth='2px'
98+
d='M9.02 17.39L21.25 17.39'
99+
/>
100+
<path
101+
fill='none'
102+
opacity={0.48}
103+
strokeWidth='2px'
104+
d='M9.02 24.6L19.54 24.6'
105+
/>
106+
<path
107+
fill='none'
108+
opacity={0.55}
109+
strokeWidth='2px'
110+
d='M9.02 20.88L18.4 20.88'
111+
/>
112+
<circle cx={10.98} cy={9.91} r={2.54} fill='#fff' opacity={0.8} />
113+
<path
114+
fill='none'
115+
opacity={0.8}
116+
strokeWidth='2px'
117+
d='M15.53 8.65L21.25 8.65'
118+
/>
119+
<path fill='none' opacity={0.6} d='M15.32 11.3L20.38 11.3' />
120+
</g>
121+
</g>
122+
</svg>
123+
)
124+
}

0 commit comments

Comments
 (0)