Skip to content

Commit

Permalink
feat: wip
Browse files Browse the repository at this point in the history
  • Loading branch information
@QuentinLeCaignec
QuentinLeCaignec committed Sep 5, 2024
1 parent 0ef57a7 commit 6652f09
Show file tree
Hide file tree
Showing 4 changed files with 643 additions and 97 deletions.
6 changes: 5 additions & 1 deletion packages/haring-react-hook-form/src/Components/FormDynamicZone/FormDynamicZone.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,18 @@ import { renderWithProviders } from '@smile/haring-react-shared/test-utils';
import { FormProvider, useForm } from 'react-hook-form';

import { FormDynamicZone } from './FormDynamicZone';
import { dynamicBlocksMock } from './FormDynamicZone.mock';

describe('FormDynamicZone', () => {
it('matches snapshot', () => {
function TestWithProvider(): ReactElement {
const methods = useForm();
return (
<FormProvider {...methods}>
<FormDynamicZone dynamicZoneName="dynamicZoneTest" />
<FormDynamicZone
dynamicBlocks={dynamicBlocksMock}
dynamicZoneName="dynamicZoneTest"
/>
</FormProvider>
);
}
Expand Down
106 changes: 10 additions & 96 deletions ...eact-hook-form/src/Components/FormDynamicZone/__snapshots__/FormDynamicZone.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,29 +12,15 @@ exports[`FormDynamicZone matches snapshot 1`] = `
>
@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}
</style>
<div>
<form>
<div
class="m_8bffd616 mantine-Flex-root __m__-r0"
class="m_6d731127 mantine-Stack-root"
style="--stack-gap: var(--mantine-spacing-md); --stack-align: stretch; --stack-justify: flex-start;"
>
<button
type="button"
>
remove first
</button>
<button
type="button"
>
swap last
</button>
</div>
<form>
form container,
dynamicZoneTest
:
<div
class="m_7485cace mantine-Container-root"
data-fluid="true"
style="padding: 0rem;"
style="margin: 0rem; padding: 0rem;"
>
<div
class="m_6d731127 mantine-Stack-root"
Expand All @@ -57,80 +43,7 @@ exports[`FormDynamicZone matches snapshot 1`] = `
data-size="md"
data-variant="default"
data-with-left-section="true"
id="default"
label="Default"
style="--button-height: var(--button-height-md); --button-padding-x: var(--button-padding-x-md); --button-fz: var(--mantine-font-size-md); --button-radius: var(--mantine-radius-md); --button-bg: var(--mantine-color-default); --button-hover: var(--mantine-color-default-hover); --button-color: var(--mantine-color-default-color); --button-bd: calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border);"
type="button"
>
<span
class="m_80f1301b mantine-Button-inner"
>
<span
class="m_a74036a mantine-Button-section"
data-position="left"
>
<svg
fill="currentColor"
height="1em"
viewBox="0 0 256 256"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M128,16a96.11,96.11,0,0,0-96,96c0,24,12.56,55.06,33.61,83,21.18,28.15,44.5,45,62.39,45s41.21-16.81,62.39-45c21.05-28,33.61-59,33.61-83A96.11,96.11,0,0,0,128,16Zm49.61,169.42C160.24,208.49,140.31,224,128,224s-32.24-15.51-49.61-38.58C59.65,160.5,48,132.37,48,112a80,80,0,0,1,160,0C208,132.37,196.35,160.5,177.61,185.42ZM120,136A40,40,0,0,0,80,96a16,16,0,0,0-16,16,40,40,0,0,0,40,40A16,16,0,0,0,120,136ZM80,112a24,24,0,0,1,24,24h0A24,24,0,0,1,80,112Zm96-16a40,40,0,0,0-40,40,16,16,0,0,0,16,16,40,40,0,0,0,40-40A16,16,0,0,0,176,96Zm-24,40a24,24,0,0,1,24-24A24,24,0,0,1,152,136Zm0,48a8,8,0,0,1-8,8H112a8,8,0,0,1,0-16h32A8,8,0,0,1,152,184Z"
/>
</svg>
</span>
<span
class="m_811560b9 mantine-Button-label"
>
Default
</span>
</span>
</button>
<button
class="haring-focus haring-active m_77c9d27d mantine-Button-root m_87cf2631 mantine-UnstyledButton-root"
data-size="md"
data-variant="default"
data-with-left-section="true"
id="other"
label="Other"
style="--button-height: var(--button-height-md); --button-padding-x: var(--button-padding-x-md); --button-fz: var(--mantine-font-size-md); --button-radius: var(--mantine-radius-md); --button-bg: var(--mantine-color-default); --button-hover: var(--mantine-color-default-hover); --button-color: var(--mantine-color-default-color); --button-bd: calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border);"
type="button"
>
<span
class="m_80f1301b mantine-Button-inner"
>
<span
class="m_a74036a mantine-Button-section"
data-position="left"
>
<svg
fill="currentColor"
height="1em"
viewBox="0 0 256 256"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M223.45,40.07a8,8,0,0,0-7.52-7.52C139.8,28.08,78.82,51,52.82,94a87.09,87.09,0,0,0-12.76,49c.57,15.92,5.21,32,13.79,47.85l-19.51,19.5a8,8,0,0,0,11.32,11.32l19.5-19.51C81,210.73,97.09,215.37,113,215.94q1.67.06,3.33.06A86.93,86.93,0,0,0,162,203.18C205,177.18,227.93,116.21,223.45,40.07ZM153.75,189.5c-22.75,13.78-49.68,14-76.71.77l88.63-88.62a8,8,0,0,0-11.32-11.32L65.73,179c-13.19-27-13-54,.77-76.71,22.09-36.47,74.6-56.44,141.31-54.06C210.2,114.89,190.22,167.41,153.75,189.5Z"
/>
</svg>
</span>
<span
class="m_811560b9 mantine-Button-label"
>
Other
</span>
</span>
</button>
<button
class="haring-focus haring-active m_77c9d27d mantine-Button-root m_87cf2631 mantine-UnstyledButton-root"
data-size="md"
data-variant="default"
data-with-left-section="true"
id="stuff"
label="Stuff"
label="Example"
style="--button-height: var(--button-height-md); --button-padding-x: var(--button-padding-x-md); --button-fz: var(--mantine-font-size-md); --button-radius: var(--mantine-radius-md); --button-bg: var(--mantine-color-default); --button-hover: var(--mantine-color-default-hover); --button-color: var(--mantine-color-default-color); --button-bd: calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border);"
type="button"
>
Expand All @@ -149,24 +62,25 @@ exports[`FormDynamicZone matches snapshot 1`] = `
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M184,40H72A56.06,56.06,0,0,0,16,96v96a16,16,0,0,0,16,16H224a16,16,0,0,0,16-16V96A56.06,56.06,0,0,0,184,40Zm40,56v8H192V56.8A40.07,40.07,0,0,1,224,96Zm-88,40H120V104h16Zm-24,16h32a8,8,0,0,0,8-8V120h24v72H80V120h24v24A8,8,0,0,0,112,152Zm40-48V96a8,8,0,0,0-8-8H112a8,8,0,0,0-8,8v8H80V56h96v48ZM64,56.8V104H32V96A40.07,40.07,0,0,1,64,56.8ZM32,120H64v72H32Zm192,72H192V120h32v72Z"
d="M223.68,66.15,135.68,18h0a15.88,15.88,0,0,0-15.36,0l-88,48.17a16,16,0,0,0-8.32,14v95.64a16,16,0,0,0,8.32,14l88,48.17a15.88,15.88,0,0,0,15.36,0l88-48.17a16,16,0,0,0,8.32-14V80.18A16,16,0,0,0,223.68,66.15ZM128,32h0l80.34,44L128,120,47.66,76ZM40,90l80,43.78v85.79L40,175.82Zm96,129.57V133.82L216,90v85.78Z"
/>
</svg>
</span>
<span
class="m_811560b9 mantine-Button-label"
>
Stuff
Example
</span>
</span>
</button>
</div>
</div>
</div>
<input
style="margin: auto;"
type="submit"
/>
</form>
</div>
</div>
</form>
</div>
`;
27 changes: 27 additions & 0 deletions packages/haring-react/src/Form/DynamicZone/DynamicZone.test.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import type { IBaseBlock } from '../../types';
import type { ReactElement } from 'react';

import { renderWithProviders } from '@smile/haring-react-shared/test-utils';
import { action } from '@storybook/addon-actions';
import { expect } from '@storybook/jest';

import { DynamicZone } from './DynamicZone';
import { dynamicZoneBlocks, dynamicZoneButtons } from './DynamicZone.mock';

describe('DynamicZone', () => {
it('matches snapshot', () => {
const onRender = (_b: IBaseBlock, index: number): ReactElement => (
<input key={index} />
);
const { container } = renderWithProviders(
<DynamicZone
blockOptions={dynamicZoneButtons}
blocks={dynamicZoneBlocks}
onAppendBlock={action('onAppendBlock, id')}
onRenderBlockContent={onRender}
onToggleBlock={action('onToggleBlock')}
/>,
);
expect(container).toMatchSnapshot();
});
});
Loading

0 comments on commit 6652f09

Please sign in to comment.