Merge branch 'master' into fix/no-session-account-not-enabled

BearStudio · Aug 6, 2024 · e955c7c · e955c7c
2 parents e767bdc + 4745ab6
commit e955c7c
Show file tree

Hide file tree

Showing 21 changed files with 579 additions and 274 deletions.
diff --git a/package.json b/package.json
@@ -71,6 +71,7 @@
  "framer-motion": "11.2.14",
  "holy-loader": "2.3.1",
  "i18next": "23.11.5",
+ "i18next-browser-languagedetector": "8.0.0",
  "lucia": "3.2.0",
  "next": "14.2.4",
  "nodemailer": "6.9.14",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/app/Document.tsx b/src/app/Document.tsx
@@ -8,20 +8,15 @@ import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { Providers } from '@/app/Providers';
 import { Viewport } from '@/components/Viewport';
 import { EnvHint } from '@/features/devtools/EnvHint';
-import i18n from '@/lib/i18n/client';
-import { AVAILABLE_LANGUAGES } from '@/lib/i18n/constants';
+import { useLocale } from '@/lib/i18n/useLocale';
 import { TrpcProvider } from '@/lib/trpc/TrpcProvider';
 import theme, { COLOR_MODE_STORAGE_KEY } from '@/theme';
 
 export const Document = ({ children }: { children: ReactNode }) => {
+ const locale = useLocale();
+
  return (
- <html
- lang={i18n.language}
- dir={
- AVAILABLE_LANGUAGES.find(({ key }) => key === i18n.language)?.dir ??
- 'ltr'
- }
- >
+ <html lang={locale?.lang} dir={locale?.dir}>
  <head>
  <meta
  name="viewport"

diff --git a/...Form/FieldCurrency/FieldCurrency.spec.tsx → ...nts/Form/FieldNumber/FieldNumber.spec.tsx b/...Form/FieldCurrency/FieldCurrency.spec.tsx → ...nts/Form/FieldNumber/FieldNumber.spec.tsx
@@ -20,9 +20,10 @@ test('update value', async () => {
  <FormField>
  <FormFieldLabel>Balance</FormFieldLabel>
  <FormFieldController
- type="currency"
+ type="number"
  control={form.control}
  name="balance"
+ currency="EUR"
  />
  </FormField>
  )}
@@ -49,9 +50,10 @@ test('update value in cents', async () => {
  <FormField>
  <FormFieldLabel>Balance</FormFieldLabel>
  <FormFieldController
- type="currency"
+ type="number"
  control={form.control}
  name="balance"
+ currency="EUR"
  inCents
  />
  </FormField>
@@ -79,17 +81,18 @@ test('update value locale fr', async () => {
  <FormField>
  <FormFieldLabel>Balance</FormFieldLabel>
  <FormFieldController
- type="currency"
+ type="number"
  control={form.control}
  name="balance"
+ currency="EUR"
  locale="fr"
  />
  </FormField>
  )}
  </FormMocked>
  );
  const input = screen.getByLabelText<HTMLInputElement>('Balance');
- await user.type(input, '12.00');
+ await user.type(input, '12,00');
  expect(input.value).toBe('12,00 €');
  await user.click(screen.getByRole('button', { name: 'Submit' }));
  expect(mockedSubmit).toHaveBeenCalledWith({ balance: 12 });
@@ -109,10 +112,11 @@ test('update value no decimals', async () => {
  <FormField>
  <FormFieldLabel>Balance</FormFieldLabel>
  <FormFieldController
- type="currency"
+ type="number"
  control={form.control}
  name="balance"
- decimals={0}
+ currency="EUR"
+ precision={0}
  />
  </FormField>
  )}
@@ -140,9 +144,11 @@ test('default value', async () => {
  <FormField>
  <FormFieldLabel>Balance</FormFieldLabel>
  <FormFieldController
- type="currency"
+ type="number"
  control={form.control}
  name="balance"
+ fixedPrecision
+ currency="EUR"
  />
  </FormField>
  )}
@@ -168,17 +174,56 @@ test('disabled', async () => {
  <FormField>
  <FormFieldLabel>Balance</FormFieldLabel>
  <FormFieldController
- type="currency"
+ type="number"
  control={form.control}
  name="balance"
+ currency="EUR"
  isDisabled
  />
  </FormField>
  )}
  </FormMocked>
  );
  const input = screen.getByLabelText<HTMLInputElement>('Balance');
- await user.type(input, '10.00');
+ await user.type(input, '42.00');
+ expect(input.value).toBe('€12');
  await user.click(screen.getByRole('button', { name: 'Submit' }));
  expect(mockedSubmit).toHaveBeenCalledWith({ balance: 12 });
 });
+
+test('update value using keyboard step and big step', async () => {
+ const user = setupUser();
+ const mockedSubmit = vi.fn();
+
+ render(
+ <FormMocked
+ schema={z.object({ balance: z.number() })}
+ useFormOptions={{ defaultValues: { balance: 12 } }}
+ onSubmit={mockedSubmit}
+ >
+ {({ form }) => (
+ <FormField>
+ <FormFieldLabel>Balance</FormFieldLabel>
+ <FormFieldController
+ type="number"
+ control={form.control}
+ name="balance"
+ currency="EUR"
+ step={1}
+ bigStep={10}
+ />
+ </FormField>
+ )}
+ </FormMocked>
+ );
+ const input = screen.getByLabelText<HTMLInputElement>('Balance');
+ await user.click(input);
+ await user.keyboard('[ArrowUp][ArrowUp]');
+ expect(input.value).toBe('€14');
+ await user.click(input);
+
+ await user.keyboard('{Shift>}[ArrowUp][ArrowUp]{/Shift}');
+
+ await user.click(screen.getByRole('button', { name: 'Submit' }));
+ expect(mockedSubmit).toHaveBeenCalledWith({ balance: 34 });
+});
diff --git a/...nents/Form/FieldCurrency/docs.stories.tsx → ...ponents/Form/FieldNumber/docs.stories.tsx b/...nents/Form/FieldCurrency/docs.stories.tsx → ...ponents/Form/FieldNumber/docs.stories.tsx
@@ -9,7 +9,7 @@ import { Icon } from '@/components/Icons';
 import { Form, FormField, FormFieldController, FormFieldLabel } from '../';
 
 export default {
- title: 'Form/FieldCurrency',
+ title: 'Form/FieldNumber',
 };
 
 type FormSchema = z.infer<ReturnType<typeof zFormSchema>>;
@@ -32,7 +32,35 @@ export const Default = () => {
  <FormField>
  <FormFieldLabel>Balance</FormFieldLabel>
  <FormFieldController
- type="currency"
+ type="number"
+ control={form.control}
+ name="balance"
+ placeholder={12}
+ />
+ </FormField>
+ <Box>
+ <Button type="submit" variant="@primary">
+ Submit
+ </Button>
+ </Box>
+ </Stack>
+ </Form>
+ );
+};
+
+export const DefaultValue = () => {
+ const form = useForm<FormSchema>({
+ ...formOptions,
+ defaultValues: { balance: 12 },
+ });
+
+ return (
+ <Form {...form} onSubmit={(values) => console.log(values)}>
+ <Stack spacing={4}>
+ <FormField>
+ <FormFieldLabel>Balance</FormFieldLabel>
+ <FormFieldController
+ type="number"
  control={form.control}
  name="balance"
  placeholder={12}
@@ -57,7 +85,7 @@ export const InCents = () => {
  <FormField>
  <FormFieldLabel>Balance</FormFieldLabel>
  <FormFieldController
- type="currency"
+ type="number"
  control={form.control}
  name="balance"
  inCents
@@ -83,7 +111,7 @@ export const LocaleFr = () => {
  <FormField>
  <FormFieldLabel>Balance</FormFieldLabel>
  <FormFieldController
- type="currency"
+ type="number"
  control={form.control}
  name="balance"
  locale="fr"
@@ -109,10 +137,10 @@ export const LocaleNoDecimals = () => {
  <FormField>
  <FormFieldLabel>Balance</FormFieldLabel>
  <FormFieldController
- type="currency"
+ type="number"
  control={form.control}
  name="balance"
- decimals={0}
+ precision={0}
  placeholder={12}
  />
  </FormField>
@@ -135,7 +163,7 @@ export const Disabled = () => {
  <FormField>
  <FormFieldLabel>Balance</FormFieldLabel>
  <FormFieldController
- type="currency"
+ type="number"
  control={form.control}
  name="balance"
  placeholder={12}
@@ -161,7 +189,7 @@ export const StartElement = () => {
  <FormField>
  <FormFieldLabel>Balance</FormFieldLabel>
  <FormFieldController
- type="currency"
+ type="number"
  control={form.control}
  name="balance"
  placeholder={12}
@@ -187,11 +215,11 @@ export const ChakraProps = () => {
  <FormField>
  <FormFieldLabel>Balance</FormFieldLabel>
  <FormFieldController
- type="currency"
+ type="number"
  control={form.control}
  name="balance"
  placeholder={12}
- inputCurrencyProps={{
+ inputNumberProps={{
  color: 'rebeccapurple',
  }}
  />