Skip to content

feat: update apsara to 1.0.0-rc.5 #1594

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

Open
rohanchkrabrty wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat: update apsara to 1.0.0-rc.5 #1594

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
34 changes: 32 additions & 2 deletions web/pnpm-lock.yaml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion web/sdk/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,7 +107,7 @@
"@connectrpc/connect-query": "2.1.1",
"@connectrpc/connect-web": "2.1.1",
"@hookform/resolvers": "^3.10.0",
"@raystack/apsara-v1": "npm:@raystack/apsara@1.0.0-rc.2",
"@raystack/apsara-v1": "npm:@raystack/apsara@1.0.0-rc.5",
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot May 9, 2026

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

🧩 Analysis chain

🌐 Web query:

What are the breaking changes in @raystack/apsara version 1.0.0-rc.3, 1.0.0-rc.4, and 1.0.0-rc.5?

💡 Result:

No specific breaking changes documented for @raystack/apsara versions 1.0.0-rc.3, 1.0.0-rc.4, or 1.0.0-rc.5 in available sources. The latest release found is v1.0.0-rc.2 on 2026-03-30 [1]. Ongoing work includes modernizing to React 19, dropping React 18 support by removing deprecated forwardRef wrappers from 63 components, updating peer deps to react@^19, and removing displayName assignments, noted as a breaking change requiring React upgrade [2]. TypeScript improvements like eliminating any types and @ts-ignore also in progress, potentially breaking for type consumers [3]. npm shows versions up to 0.56.6, no 1.0 rc listings [4]. Check GitHub releases https://github.com/raystack/apsara/releases and issues for latest [1].

Citations:

🏁 Script executed:

# First, let's check the actual package.json file to confirm the version being used
cat web/sdk/package.json | grep -A 2 -B 2 "apsara"

Repository: raystack/frontier

Length of output: 640

🌐 Web query:

@raystack/apsara npm releases rc.3 rc.4 rc.5

💡 Result:

I couldn’t find evidence that @raystack/apsara has npm prerelease versions literally named rc.3, rc.4, and rc.5 (for example, 1.0.0-rc.3 / 1.0.0-rc.4 / 1.0.0-rc.5). What I can confirm from npm’s registry page is that the package has prerelease versions using the “-rc” suffix, and that as of the version-history table it includes a range like “0.55.0-rc.1 - 0.55.0-rc.4” (no rc.5 shown in the snippet I can access) and the latest published version listed there is v0.56.6 [1]. On the GitHub repository page, the “Latest release” shown there is “v1.0.0-rc.2” (prerelease), which again doesn’t demonstrate rc.3/rc.4/rc.5 specifically [2]. If you tell me what version line you mean (e.g., “0.55.x rc.3/rc.4/rc.5” vs “1.0.0-rc.3/rc.4/rc.5”), I can rerun the search with the exact version strings.

Citations:

🏁 Script executed:

# Check if there are any CHANGELOG or release notes in the repo that document version changes
find . -type f -name "CHANGELOG*" -o -name "RELEASES*" -o -name "HISTORY*" | head -20

Repository: raystack/frontier

Length of output: 84

🏁 Script executed:

# Check the CHANGELOG for version history
head -100 web/sdk/CHANGELOG.md

Repository: raystack/frontier

Length of output: 584

🏁 Script executed:

# Search GitHub directly for `@raystack/apsara` releases with rc versions
# Use curl to query GitHub releases API
curl -s "https://api.github.com/repos/raystack/apsara/releases?per_page=100" | jq -r '.[] | select(.prerelease == true) | .tag_name' | grep "1.0.0-rc" | sort -V

Repository: raystack/frontier

Length of output: 133

🏁 Script executed:

# Get detailed release notes for rc.3, rc.4, and rc.5
curl -s "https://api.github.com/repos/raystack/apsara/releases?per_page=100" | jq -r '.[] | select(.tag_name | test("1.0.0-rc.(3|4|5)")) | "Tag: \(.tag_name)\nBody:\n\(.body)\n---"'

Repository: raystack/frontier

Length of output: 5973

Check for breaking changes in rc.3, rc.4, and rc.5.

The PR migrates from rc.2 to rc.5, skipping rc.3 and rc.4. While the InputField → Field + Input migration is already handled, the release notes document additional breaking changes:

  • rc.4: as prop replaced with render prop in Text and Headline components; Command component migrated to Base UI; Textarea size/variant API changes
  • rc.5: Color system migrated from HEX to OKLCH (affecting theme tokens); overlay-base-primary token removed; Input component improvements

Verify that these changes are accounted for in the codebase integrations.

"@raystack/proton": "0.1.0-7523cfd3a676d3fb72d63c8c4f0476738a2217b3",
"@tanstack/react-query": "^5.90.2",
"@tanstack/react-router": "^1.168.3",
Expand Down
6 changes: 2 additions & 4 deletions web/sdk/react/utils/transform-query.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,9 +22,7 @@ export interface TransformOptions {
/**
* Converts a filter value to the appropriate RQLFilter value format
*/
function convertFilterValue(
value: string | number | boolean | null | undefined,
): RQLFilter["value"] {
function convertFilterValue(value: unknown): RQLFilter["value"] {
switch (typeof value) {
case "boolean":
return { case: "boolValue", value };
Expand All @@ -33,7 +31,7 @@ function convertFilterValue(
case "string":
return { case: "stringValue", value };
default:
return { case: "stringValue", value: value ?? "" };
return { case: "stringValue", value: value == null ? "" : String(value) };
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot May 9, 2026

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟠 Major | ⚡ Quick win

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Find usages of DataTableQuery filters and test coverage for convertFilterValue

# Check for test files covering this utility
fd -e test.ts -e test.tsx -e spec.ts | xargs rg -l 'convertFilterValue|transformDataTableQueryToRQLRequest' 

# Look for actual filter.value usage patterns in the codebase
rg -n -C3 'filters.*value' --type=ts --type=tsx -g '!node_modules' -g '!dist'

# Check DataTableFilter type definition from Apsara (if locally installed)
rg -n 'export.*DataTableFilter' --type=ts -g '**/apsara*/**'

Repository: raystack/frontier

Length of output: 238

🏁 Script executed:

#!/bin/bash

# Find test files and search for test coverage
echo "=== Test files mentioning transform-query or convertFilterValue ==="
find web -name "*test*" -o -name "*spec*" | head -20

echo "=== Search for tests covering this transformation ==="
rg -n "convertFilterValue|transformDataTableQueryToRQLRequest" web --type ts -g "*.test.ts" -g "*.spec.ts"

echo "=== Look for DataTableFilter type definition ==="
rg -n "interface DataTableFilter|type DataTableFilter|export.*DataTableFilter" web --type ts

echo "=== Check actual filter.value usage patterns ==="
rg -n "filter\.value|filters\[.*\]\.value" web --type ts -A2 -B2

echo "=== Examine the transform-query.ts file to understand context ==="
cat -n web/sdk/react/utils/transform-query.ts | head -50

Repository: raystack/frontier

Length of output: 3731

🏁 Script executed:

#!/bin/bash

echo "=== Check if Apsara is installed and find its types ==="
find web -path "*/node_modules/@raystack/apsara*" -name "*.d.ts" 2>/dev/null | head -5

echo "=== Search for examples of filter creation/usage with specific types ==="
rg -n "DataTableFilter|filters.*:" web --type ts -B2 -A2 | head -60

echo "=== Look for any object or array being passed as filter value ==="
rg -n "value:.*\{|\[.*\]" web --type ts -g "!node_modules" | head -30

echo "=== Check if there are date range or date filters documented ==="
rg -n "dateValue|DateRange|dateRange|date.*filter" web --type ts -i | head -20

echo "=== Search for how filters are actually created in the frontend ==="
fd -e test.ts -e test.tsx | xargs rg -l "filter" 2>/dev/null | head -5

echo "=== Look at the admin app transform-query for more context ==="
head -70 web/apps/admin/src/utils/transform-query.ts

Repository: raystack/frontier

Length of output: 9224

🏁 Script executed:

#!/bin/bash

echo "=== Compare both versions side-by-side ==="
echo "Admin app version (web/apps/admin/src/utils/transform-query.ts lines 24-30):"
sed -n '24,30p' web/apps/admin/src/utils/transform-query.ts

echo ""
echo "React SDK version (web/sdk/react/utils/transform-query.ts lines 25-35):"
sed -n '25,35p' web/sdk/react/utils/transform-query.ts

echo ""
echo "=== Check SDK utils version ==="
sed -n '25,35p' web/sdk/utils/transform-query.ts

echo ""
echo "=== Search for any test files that might test this conversion ==="
find web -name "*.test.ts" -o -name "*.test.tsx" | xargs grep -l "convertFilterValue\|transformDataTableQuery" 2>/dev/null

echo ""
echo "=== Look for usage of filter.value with complex types ==="
rg -n "filter\.value\s*=" web --type ts -B3 -A3

Repository: raystack/frontier

Length of output: 1328

Verify type safety regression in convertFilterValue.

The function's parameter type was changed from string | number | boolean | null | undefined (in web/sdk/utils/ and web/apps/admin/) to unknown, but the default case still uses String() which produces unhelpful results for objects and arrays. This removes type safety that exists in other versions of the same function across the codebase.

Align this with the other implementations by either:

  1. Restoring the explicit parameter type to match web/sdk/utils/transform-query.ts, or
  2. Adding proper handling for non-primitive types if they're legitimately expected (though the other implementations suggest they're not).

}
}

Expand Down
4 changes: 2 additions & 2 deletions web/sdk/react/views-new/auth/magic-link-verify/magic-link-verify-view.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
'use client';

import { Button, Text, Link, Flex, InputField } from '@raystack/apsara-v1';
import { Button, Text, Link, Flex, Input } from '@raystack/apsara-v1';
import {
ChangeEvent,
ComponentPropsWithRef,
Expand Down Expand Up @@ -96,7 +96,7 @@ export const MagicLinkVerifyView = ({

<form onSubmit={OTPVerifyHandler} className={styles.form}>
<Flex direction="column" gap={2} className={styles.otpInputContainer}>
<InputField
<Input
data-test-id="enter-code"
autoFocus
size="large"
Expand Down
4 changes: 2 additions & 2 deletions web/sdk/react/views-new/auth/magic-link/magic-link-view.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import {
Text,
Separator,
Flex,
InputField
Input
} from '@raystack/apsara-v1';
import { ComponentPropsWithRef, ReactNode, useCallback, useState } from 'react';
import { useForm } from 'react-hook-form';
Expand Down Expand Up @@ -115,7 +115,7 @@ export const MagicLinkView = ({
<form className={styles.form} onSubmit={handleSubmit(magicLinkHandler)}>
{!open && <Separator />}
<Flex direction="column" align="start" className={styles.field}>
<InputField
<Input
{...register('email')}
size="large"
placeholder="name@example.com"
Expand Down
50 changes: 27 additions & 23 deletions web/sdk/react/views-new/auth/subscribe/subscribe-view.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,8 @@ import {
Button,
Flex,
Text,
InputField,
Field,
Input,
Toast,
toastManager,
Image,
Expand Down Expand Up @@ -167,30 +168,33 @@ export const SubscribeView = ({
{desc}
</Text>
</Flex>
<InputField
{...register('name')}
label="Name"
placeholder="Enter name"
error={errors.name?.message}
data-test-id="subscribe-name-input"
/>
<InputField
{...register('email')}
label="Email"
type="email"
placeholder="Enter email"
error={errors.email?.message}
data-test-id="subscribe-email-input"
/>
<InputField
{...register('contactNumber')}
optional
<Field label="Name" error={errors.name?.message}>
<Input
{...register('name')}
placeholder="Enter name"
data-test-id="subscribe-name-input"
/>
</Field>
<Field label="Email" error={errors.email?.message}>
<Input
{...register('email')}
type="email"
placeholder="Enter email"
data-test-id="subscribe-email-input"
/>
</Field>
<Field
label="Contact number"
placeholder="Enter contact"
description="Add country code at the start"
required={false}
error={errors.contactNumber?.message}
helperText="Add country code at the start"
data-test-id="subscribe-contact-input"
/>
>
<Input
{...register('contactNumber')}
placeholder="Enter contact"
data-test-id="subscribe-contact-input"
/>
</Field>
<Button
className={styles.button}
type="submit"
Expand Down
6 changes: 3 additions & 3 deletions web/sdk/react/views-new/billing/components/confirm-cycle-switch-dialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -224,7 +224,7 @@ function ConfirmCycleSwitchContent({
<Skeleton />
) : (
<Text size="small" variant="secondary">
<Text as="span" size="small" weight="medium">
<Text size="small" weight="medium">
Current cycle:
</Text>{' '}
{activePlanIntervalName}
Expand All @@ -234,7 +234,7 @@ function ConfirmCycleSwitchContent({
<Skeleton />
) : (
<Text size="small" variant="secondary">
<Text as="span" size="small" weight="medium">
<Text size="small" weight="medium">
New cycle:
</Text>{' '}
{nextPlanIntervalName} (
Expand All @@ -247,7 +247,7 @@ function ConfirmCycleSwitchContent({
{!isLoading && savings && (
<Text size="small" variant="secondary">
You can save{' '}
<Text as="span" size="small" weight="medium">
<Text size="small" weight="medium">
<Amount
value={savings.amount}
currency={savings.currency}
Expand Down
8 changes: 4 additions & 4 deletions web/sdk/react/views-new/billing/components/upcoming-billing-cycle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -171,7 +171,7 @@ export function UpcomingBillingCycle({
>
<Flex gap={3} align="center">
<Text size="small">
<Text as="span" size="small" weight="medium">Plan:</Text>
<Text size="small" weight="medium">Plan:</Text>
{' '}{planName}
</Text>
{switchablePlan && isAllowed && !alreadyPhased ? (
Expand All @@ -188,18 +188,18 @@ export function UpcomingBillingCycle({
</Flex>
<Flex gap={5} align="center">
<Text size="small">
<Text as="span" size="small" weight="medium">Next billing:</Text>
<Text size="small" weight="medium">Next billing:</Text>
{' '}{timestampToDayjs(dueDate)?.format(config.dateFormat) || '-'}
</Text>
<div className={styles.separator} />
<Text size="small">
<Text as="span" size="small" weight="medium">Users:</Text>
<Text size="small" weight="medium">Users:</Text>
{' '}{memberCount}
</Text>
<div className={styles.separator} />
<Flex gap={2} align="center">
<Text size="small">
<Text as="span" size="small" weight="medium">Amount:</Text>
<Text size="small" weight="medium">Amount:</Text>
{' '}
<Amount
currency={upcomingInvoice?.currency}
Expand Down
29 changes: 18 additions & 11 deletions web/sdk/react/views-new/create-organization/create-organization-view.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,8 @@ import {
Text,
Headline,
Flex,
InputField,
Field,
Input,
toastManager
} from '@raystack/apsara-v1';
import { ComponentPropsWithRef } from 'react';
Expand Down Expand Up @@ -94,20 +95,26 @@ export const CreateOrganizationView = ({
</Flex>
<form onSubmit={handleSubmit(onSubmit)} className={styles.form}>
<Flex direction="column" align="center" gap={9} className={styles.card}>
<InputField
<Field
label={`${t.organization({ case: 'capital' })} name`}
size="large"
error={errors.title && String(errors.title?.message)}
{...register('title')}
placeholder={`Provide ${t.organization({ case: 'lower' })} name`}
/>
<InputField
>
<Input
size="large"
{...register('title')}
placeholder={`Provide ${t.organization({ case: 'lower' })} name`}
/>
</Field>
<Field
label={`${t.organization({ case: 'capital' })} URL`}
size="large"
error={errors.name && String(errors.name?.message)}
{...register('name')}
placeholder="raystack.org/"
/>
>
<Input
size="large"
{...register('name')}
placeholder="raystack.org/"
/>
</Field>
<Button
className={styles.submit}
type="submit"
Expand Down
16 changes: 10 additions & 6 deletions web/sdk/react/views-new/general/components/delete-organization-dialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,8 @@ import {
Text,
Flex,
Dialog,
InputField,
Field,
Input,
toastManager
} from '@raystack/apsara-v1';
import { useFrontier } from '../../../contexts/FrontierContext';
Expand Down Expand Up @@ -104,17 +105,20 @@ export const DeleteOrganizationDialog = ({
This action can not be undone. This will permanently
delete all the projects and resources in {organization?.title}.
</Text>
<InputField
<Field
label={`Please type name of the ${orgLabel} to confirm.`}
size="large"
error={
errors.title
? String(errors.title.message)
: undefined
}
{...register('title')}
placeholder={`Provide the ${orgLabel} name`}
/>
>
<Input
size="large"
{...register('title')}
placeholder={`Provide the ${orgLabel} name`}
/>
</Field>
<Flex gap={3} align="start">
<Checkbox
checked={isAcknowledged}
Expand Down
39 changes: 23 additions & 16 deletions web/sdk/react/views-new/general/general-view.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,8 @@ import {
Skeleton,
Text,
Flex,
InputField,
Field,
Input,
toastManager
} from '@raystack/apsara-v1';
import { useFrontier } from '../../contexts/FrontierContext';
Expand Down Expand Up @@ -207,25 +208,31 @@ export function GeneralView({ onDeleteSuccess, urlPrefix }: GeneralViewProps = {
</>
) : (
<>
<InputField
<Field
label={`${orgLabel} name`}
size="large"
error={errors.title && String(errors.title?.message)}
defaultValue={organization?.title || ''}
disabled={!canUpdateWorkspace}
placeholder={`Provide ${orgLabelLower} name`}
{...register('title')}
/>
<InputField
>
<Input
size="large"
defaultValue={organization?.title || ''}
disabled={!canUpdateWorkspace}
placeholder={`Provide ${orgLabelLower} name`}
{...register('title')}
/>
</Field>
<Field
label={`${orgLabel} URL`}
size="large"
error={errors.name && String(errors.name?.message)}
defaultValue={organization?.name || ''}
disabled
prefix={URL_PREFIX}
placeholder={`Provide ${orgLabelLower} URL`}
{...register('name')}
/>
>
<Input
size="large"
defaultValue={organization?.name || ''}
disabled
prefix={URL_PREFIX}
placeholder={`Provide ${orgLabelLower} URL`}
{...register('name')}
/>
</Field>
</>
)}
</Flex>
Expand Down
Loading
Loading