Skip to content
4 changes: 4 additions & 0 deletions .env.example
Original file line number Diff line number Diff line change
Expand Up @@ -13,3 +13,7 @@ VITE_YOUVERSION_API_KEY=""

# Rich text editing in the pericope view (#314). Paragraph breaks do not persist yet (fluent-api#263).
VITE_RTE_PERICOPE=false

# The USFM import tab on project creation (#418). Nothing can create a project from the
# uploaded files until #419, so this stays off.
VITE_USFM_IMPORT=false
9 changes: 8 additions & 1 deletion public/locales/en/common.json
Original file line number Diff line number Diff line change
Expand Up @@ -54,5 +54,12 @@
"pericope": "Pericope",
"chapter": "Chapter",
"mainMenu": "Main menu",
"userMenu": "User menu"
"userMenu": "User menu",
"newTab": "New",
"importTab": "Import",
"selectFile": "Select File",
"dropUsfmFiles": "or drag and drop USFM files here",
"errorNotValidUsfm": "File is not valid USFM",
"errorMissingBookData": "Missing book data",
Comment thread
henrique221 marked this conversation as resolved.
"errorDuplicateBook": "Two files have the same book code"
}
8 changes: 4 additions & 4 deletions src/components/ui/tabs.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ function Tabs({
}: React.ComponentProps<typeof TabsPrimitive.Root>) {
return (
<TabsPrimitive.Root
className={cn('group/tabs flex gap-2 data-horizontal:flex-col', className)}
className={cn('group/tabs flex gap-2 data-[orientation=horizontal]:flex-col', className)}
data-orientation={orientation}
data-slot='tabs'
orientation={orientation}
Expand All @@ -24,7 +24,7 @@ function Tabs({
}

const tabsListVariants = cva(
'group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center rounded-lg p-[3px] group-data-horizontal/tabs:h-8 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none',
'group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center rounded-lg p-[3px] group-data-[orientation=horizontal]/tabs:h-8 group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col data-[variant=line]:rounded-none',
{
variants: {
variant: {
Expand Down Expand Up @@ -57,10 +57,10 @@ function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPr
return (
<TabsPrimitive.Trigger
className={cn(
"text-foreground/60 hover:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
"text-foreground/60 hover:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
'group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:border-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent',
'data-[state=active]:bg-background data-[state=active]:text-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 dark:data-[state=active]:text-foreground',
'after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100',
'after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100',
className
)}
data-slot='tabs-trigger'
Expand Down
44 changes: 44 additions & 0 deletions src/features/projects/components/CreateProjectModal.test.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
import { afterEach, describe, expect, it, vi } from 'vitest';

import { config } from '@/lib/config';
import { renderWithProviders, screen } from '@/test/render';

import { CreateProjectModal } from './CreateProjectModal';

// i18n is not part of the shared test providers, so keys come through unchanged.
vi.mock('react-i18next', () => ({
useTranslation: () => ({ t: (key: string) => key }),
}));

const props = {
isOpen: true,
onClose: vi.fn(),
onSave: vi.fn(async () => {}),
};

describe('CreateProjectModal tabs (#418)', () => {
afterEach(() => {
config.features.usfmImport = false;
});

it('shows no tab strip while the import flag is off', () => {
config.features.usfmImport = false;
renderWithProviders(<CreateProjectModal {...props} />);
expect(screen.queryByRole('tab', { name: 'importTab' })).not.toBeInTheDocument();
});

it('offers the Import tab once the flag is on', () => {
config.features.usfmImport = true;
renderWithProviders(<CreateProjectModal {...props} />);
expect(screen.getByRole('tab', { name: 'importTab' })).toBeInTheDocument();
});

// The blank-project flow moved into the New tab untouched; this is the guard that the move
// did not drop it.
it('still renders the existing project fields, flag on or off', () => {
config.features.usfmImport = true;
renderWithProviders(<CreateProjectModal {...props} />);
expect(screen.getByText('projectTitle')).toBeInTheDocument();
expect(screen.getByText('sourceLanguage')).toBeInTheDocument();
});
});
Loading
Loading