Skip to content

Commit eca7cb5

Browse files
rohanchkrabrtyrohanchkrabrty
authored
feat: RSC compatibility (#503)
* feat: react rfc compatability * feat: update datatable for rsc
1 parent 92ee1d5 commit eca7cb5

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

61 files changed

+553
-397
lines changed

‎packages/raystack/components/announcement-bar/announcement-bar.tsx

Lines changed: 19 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,23 @@
1-
import { cva, type VariantProps } from "class-variance-authority";
2-
import { ReactNode } from "react";
1+
'use client';
32

4-
import { Flex } from "../flex";
5-
import { Text } from "../text";
6-
import styles from "./announcement-bar.module.css";
3+
import { type VariantProps, cva } from 'class-variance-authority';
4+
import { ReactNode } from 'react';
75

8-
const announementBar = cva(styles["announcement-bar"], {
6+
import { Flex } from '../flex';
7+
import { Text } from '../text';
8+
import styles from './announcement-bar.module.css';
9+
10+
const announementBar = cva(styles['announcement-bar'], {
911
variants: {
1012
variant: {
11-
gradient: styles["announcement-bar-gradient"],
12-
normal: styles["announcement-bar-normal"],
13-
error: styles["announcement-bar-error"],
14-
},
13+
gradient: styles['announcement-bar-gradient'],
14+
normal: styles['announcement-bar-normal'],
15+
error: styles['announcement-bar-error']
16+
}
1517
},
1618
defaultVariants: {
17-
variant: "normal",
18-
},
19+
variant: 'normal'
20+
}
1921
});
2022

2123
type AnnouncementBarProps = VariantProps<typeof announementBar> & {
@@ -40,18 +42,18 @@ export const AnnouncementBar = ({
4042
return (
4143
<Flex
4244
className={announementBar({ className, variant })}
43-
justify={"center"}
44-
align={"center"}
45-
gap={"small"}
45+
justify='center'
46+
align='center'
47+
gap='small'
4648
{...props}
4749
>
48-
{leadingIcon && <span className={styles["icon"]}>{leadingIcon}</span>}
50+
{leadingIcon && <span className={styles['icon']}>{leadingIcon}</span>}
4951
<Text className={styles.text} size={2} weight={500}>
5052
{text}
5153
</Text>
5254
{actionLabel || actionIcon ? (
5355
<Text
54-
className={styles["action-btn"]}
56+
className={styles['action-btn']}
5557
size={2}
5658
weight={500}
5759
onClick={onActionClick}

‎packages/raystack/components/breadcrumb/breadcrumb-item.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
'use client';
2+
13
import { ChevronDownIcon } from '@radix-ui/react-icons';
24
import { cx } from 'class-variance-authority';
35
import {

‎packages/raystack/components/breadcrumb/breadcrumb-misc.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
'use client';
2+
13
import { DotsHorizontalIcon } from '@radix-ui/react-icons';
24
import { cx } from 'class-variance-authority';
35
import { HTMLAttributes, forwardRef } from 'react';

‎packages/raystack/components/breadcrumb/breadcrumb-root.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
'use client';
2+
13
import { type VariantProps, cva } from 'class-variance-authority';
24
import { HTMLAttributes, forwardRef } from 'react';
35
import styles from './breadcrumb.module.css';

‎packages/raystack/components/calendar/calendar.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
'use client';
2+
13
import {
24
ChevronDownIcon,
35
ChevronLeftIcon,

‎packages/raystack/components/calendar/date-picker.tsx

Lines changed: 36 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,21 @@
1-
import { CalendarIcon } from "@radix-ui/react-icons";
2-
import dayjs from "dayjs";
3-
import customParseFormat from "dayjs/plugin/customParseFormat";
4-
import { useCallback, useEffect, useRef, useState } from "react";
5-
import { PropsBase, PropsSingleRequired } from "react-day-picker";
6-
7-
import { Popover } from "../popover";
8-
import { InputField } from "../input-field";
9-
import { InputFieldProps } from "../input-field/input-field";
10-
import { Calendar } from "./calendar";
11-
import styles from "./calendar.module.css";
1+
'use client';
2+
3+
import { CalendarIcon } from '@radix-ui/react-icons';
4+
import dayjs from 'dayjs';
5+
import customParseFormat from 'dayjs/plugin/customParseFormat';
6+
import { useCallback, useEffect, useRef, useState } from 'react';
7+
import { PropsBase, PropsSingleRequired } from 'react-day-picker';
8+
9+
import { InputField } from '../input-field';
10+
import { InputFieldProps } from '../input-field/input-field';
11+
import { Popover } from '../popover';
12+
import { Calendar } from './calendar';
13+
import styles from './calendar.module.css';
1214

1315
dayjs.extend(customParseFormat);
1416

1517
interface DatePickerProps {
16-
side?: "top" | "right" | "bottom" | "left";
18+
side?: 'top' | 'right' | 'bottom' | 'left';
1719
dateFormat?: string;
1820
inputFieldProps?: InputFieldProps;
1921
calendarProps?: PropsSingleRequired & PropsBase;
@@ -27,15 +29,15 @@ interface DatePickerProps {
2729
}
2830

2931
export function DatePicker({
30-
side = "top",
31-
dateFormat = "DD/MM/YYYY",
32+
side = 'top',
33+
dateFormat = 'DD/MM/YYYY',
3234
inputFieldProps,
3335
calendarProps,
3436
value = new Date(),
3537
onSelect = () => {},
3638
children,
3739
showCalendarIcon = true,
38-
timeZone,
40+
timeZone
3941
}: DatePickerProps) {
4042
const [showCalendar, setShowCalendar] = useState(false);
4143
const [selectedDate, setSelectedDate] = useState(value);
@@ -68,7 +70,7 @@ export function DatePicker({
6870

6971
function registerEventListeners() {
7072
isInputFieldFocused.current = true;
71-
document.addEventListener("mouseup", handleMouseDown);
73+
document.addEventListener('mouseup', handleMouseDown);
7274
}
7375

7476
function removeEventListeners(skipUpdate = false) {
@@ -80,7 +82,7 @@ export function DatePicker({
8082
if (inputFieldRef.current) inputFieldRef.current.value = updatedVal;
8183
if (!error && !skipUpdate) onSelect(dayjs(updatedVal).toDate());
8284

83-
document.removeEventListener("mouseup", handleMouseDown);
85+
document.removeEventListener('mouseup', handleMouseDown);
8486
}
8587

8688
const handleSelect = (day: Date) => {
@@ -121,7 +123,7 @@ export function DatePicker({
121123
}
122124

123125
function handleKeyUp(event: React.KeyboardEvent) {
124-
if (event.code === "Enter" && inputFieldRef.current) {
126+
if (event.code === 'Enter' && inputFieldRef.current) {
125127
inputFieldRef.current.blur();
126128
removeEventListeners();
127129
}
@@ -130,11 +132,11 @@ export function DatePicker({
130132
function handleInputChange(event: React.ChangeEvent<HTMLInputElement>) {
131133
const { value } = event.target;
132134

133-
const format = value.includes("/")
134-
? "DD/MM/YYYY"
135-
: value.includes("-")
136-
? "DD-MM-YYYY"
137-
: undefined;
135+
const format = value.includes('/')
136+
? 'DD/MM/YYYY'
137+
: value.includes('-')
138+
? 'DD-MM-YYYY'
139+
: undefined;
138140
const date = dayjs(value, format);
139141

140142
const isValidDate = date.isValid();
@@ -155,14 +157,14 @@ export function DatePicker({
155157
setSelectedDate(date.toDate());
156158
setError(undefined);
157159
} else {
158-
setError("Invalid date");
160+
setError('Invalid date');
159161
}
160162
}
161163

162164
const defaultTrigger = (
163165
<InputField
164-
size="small"
165-
placeholder="Select date"
166+
size='small'
167+
placeholder='Select date'
166168
error={error}
167169
className={styles.datePickerInput}
168170
trailingIcon={showCalendarIcon ? <CalendarIcon /> : undefined}
@@ -177,9 +179,13 @@ export function DatePicker({
177179
);
178180

179181
const trigger =
180-
typeof children === "function"
181-
? children({ selectedDate: formattedDate })
182-
: children ? <div>{children}</div> : defaultTrigger;
182+
typeof children === 'function' ? (
183+
children({ selectedDate: formattedDate })
184+
) : children ? (
185+
<div>{children}</div>
186+
) : (
187+
defaultTrigger
188+
);
183189

184190
return (
185191
<Popover open={showCalendar} onOpenChange={onOpenChange}>
@@ -195,7 +201,7 @@ export function DatePicker({
195201
{...calendarProps}
196202
timeZone={timeZone}
197203
onDropdownOpen={onDropdownOpen}
198-
mode="single"
204+
mode='single'
199205
selected={selectedDate}
200206
month={selectedDate}
201207
onSelect={handleSelect}

‎packages/raystack/components/calendar/range-picker.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
'use client';
2+
13
import { CalendarIcon } from '@radix-ui/react-icons';
24
import dayjs from 'dayjs';
35
import { useMemo, useRef, useState } from 'react';

‎packages/raystack/components/callout/callout.tsx

Lines changed: 52 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
1+
'use client';
2+
13
import { InfoCircledIcon } from '@radix-ui/react-icons';
2-
import { cva, type VariantProps } from 'class-variance-authority';
4+
import { type VariantProps, cva } from 'class-variance-authority';
35
import { type ComponentPropsWithoutRef } from 'react';
46
import * as React from 'react';
57

@@ -14,21 +16,23 @@ const callout = cva(styles.callout, {
1416
gradient: styles['callout-gradient'],
1517
accent: styles['callout-accent'],
1618
attention: styles['callout-attention'],
17-
normal: styles['callout-normal'],
19+
normal: styles['callout-normal']
1820
},
1921
outline: {
20-
true: styles['callout-outline'],
22+
true: styles['callout-outline']
2123
},
2224
highContrast: {
23-
true: styles['callout-high-contrast'],
24-
},
25+
true: styles['callout-high-contrast']
26+
}
2527
},
2628
defaultVariants: {
27-
type: 'grey',
28-
},
29+
type: 'grey'
30+
}
2931
});
3032

31-
export interface CalloutProps extends ComponentPropsWithoutRef<'div'>, VariantProps<typeof callout> {
33+
export interface CalloutProps
34+
extends ComponentPropsWithoutRef<'div'>,
35+
VariantProps<typeof callout> {
3236
children: React.ReactNode;
3337
action?: React.ReactNode;
3438
dismissible?: boolean;
@@ -39,23 +43,26 @@ export interface CalloutProps extends ComponentPropsWithoutRef<'div'>, VariantPr
3943
}
4044

4145
export const Callout = React.forwardRef<HTMLDivElement, CalloutProps>(
42-
({
43-
className,
44-
type = 'grey',
45-
outline,
46-
highContrast,
47-
children,
48-
action,
49-
dismissible,
50-
onDismiss,
51-
width,
52-
style,
53-
icon,
54-
...props
55-
}, ref) => {
46+
(
47+
{
48+
className,
49+
type = 'grey',
50+
outline,
51+
highContrast,
52+
children,
53+
action,
54+
dismissible,
55+
onDismiss,
56+
width,
57+
style,
58+
icon,
59+
...props
60+
},
61+
ref
62+
) => {
5663
const combinedStyle = {
5764
...style,
58-
...(width && { width: typeof width === 'number' ? `${width}px` : width }),
65+
...(width && { width: typeof width === 'number' ? `${width}px` : width })
5966
};
6067

6168
const getRole = () => {
@@ -81,45 +88,38 @@ export const Callout = React.forwardRef<HTMLDivElement, CalloutProps>(
8188
<div className={styles.container}>
8289
<div className={styles.messageContainer}>
8390
{icon !== undefined ? (
84-
<div className={styles.icon} aria-hidden="true">
91+
<div className={styles.icon} aria-hidden='true'>
8592
{icon}
8693
</div>
8794
) : (
88-
<InfoCircledIcon
89-
className={styles.icon}
90-
aria-hidden="true"
91-
/>
95+
<InfoCircledIcon className={styles.icon} aria-hidden='true' />
9296
)}
9397
<div className={styles.message}>{children}</div>
9498
</div>
95-
99+
96100
<div className={styles.actionsContainer}>
97-
{action && (
98-
<div className={styles.action}>
99-
{action}
100-
</div>
101-
)}
101+
{action && <div className={styles.action}>{action}</div>}
102102
{dismissible && (
103-
<button
104-
className={styles.dismiss}
103+
<button
104+
className={styles.dismiss}
105105
onClick={onDismiss}
106-
aria-label="Dismiss message"
107-
type="button"
106+
aria-label='Dismiss message'
107+
type='button'
108108
>
109-
<svg
110-
width="12"
111-
height="12"
112-
viewBox="0 0 12 12"
113-
fill="none"
114-
xmlns="http://www.w3.org/2000/svg"
115-
aria-hidden="true"
116-
role="presentation"
109+
<svg
110+
width='12'
111+
height='12'
112+
viewBox='0 0 12 12'
113+
fill='none'
114+
xmlns='http://www.w3.org/2000/svg'
115+
aria-hidden='true'
116+
role='presentation'
117117
>
118-
<path
119-
fillRule="evenodd"
120-
clipRule="evenodd"
121-
d="M9.5066 3.3066C9.73115 3.08205 9.73115 2.71798 9.5066 2.49343C9.28205 2.26887 8.91798 2.26887 8.69343 2.49343L6.00001 5.18684L3.3066 2.49343C3.08205 2.26887 2.71798 2.26887 2.49343 2.49343C2.26887 2.71798 2.26887 3.08205 2.49343 3.3066L5.18684 6.00001L2.49343 8.69343C2.26887 8.91798 2.26887 9.28205 2.49343 9.5066C2.71798 9.73115 3.08205 9.73115 3.3066 9.5066L6.00001 6.81318L8.69343 9.5066C8.91798 9.73115 9.28205 9.73115 9.5066 9.5066C9.73115 9.28205 9.73115 8.91798 9.5066 8.69343L6.81318 6.00001L9.5066 3.3066Z"
122-
fill="currentColor"
118+
<path
119+
fillRule='evenodd'
120+
clipRule='evenodd'
121+
d='M9.5066 3.3066C9.73115 3.08205 9.73115 2.71798 9.5066 2.49343C9.28205 2.26887 8.91798 2.26887 8.69343 2.49343L6.00001 5.18684L3.3066 2.49343C3.08205 2.26887 2.71798 2.26887 2.49343 2.49343C2.26887 2.71798 2.26887 3.08205 2.49343 3.3066L5.18684 6.00001L2.49343 8.69343C2.26887 8.91798 2.26887 9.28205 2.49343 9.5066C2.71798 9.73115 3.08205 9.73115 3.3066 9.5066L6.00001 6.81318L8.69343 9.5066C8.91798 9.73115 9.28205 9.73115 9.5066 9.5066C9.73115 9.28205 9.73115 8.91798 9.5066 8.69343L6.81318 6.00001L9.5066 3.3066Z'
122+
fill='currentColor'
123123
/>
124124
</svg>
125125
</button>
@@ -131,4 +131,4 @@ export const Callout = React.forwardRef<HTMLDivElement, CalloutProps>(
131131
}
132132
);
133133

134-
Callout.displayName = 'Callout';
134+
Callout.displayName = 'Callout';

‎packages/raystack/components/checkbox/checkbox.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
'use client';
2+
13
import { VariantProps, cva, cx } from 'class-variance-authority';
24
import { Checkbox as CheckboxPrimitive } from 'radix-ui';
35
import { ComponentPropsWithoutRef, ElementRef, forwardRef } from 'react';

0 commit comments

Comments
 (0)