Skip to content

Commit c4e51e4

Browse files
martijnrusschenmartijnrusschen
committed
Try fixing docs site
1 parent dcb0028 commit c4e51e4

File tree

2 files changed

+126
-71
lines changed

2 files changed

+126
-71
lines changed

‎.github/workflows/build-docs-site.yml‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,3 +50,66 @@ jobs:
5050

5151
- name: Build docs
5252
run: yarn --cwd docs-site build
53+
54+
- name: Install Playwright
55+
run: npx playwright install --with-deps chromium
56+
57+
- name: Start docs preview server
58+
run: yarn --cwd docs-site preview --host 0.0.0.0 --port 4173 &
59+
60+
- name: Wait for server to start
61+
run: sleep 5
62+
63+
- name: Test docs site with Playwright
64+
run: |
65+
cat > test-docs.js << 'EOF'
66+
const { chromium } = require('playwright');
67+
68+
(async () => {
69+
const browser = await chromium.launch();
70+
const page = await browser.newPage();
71+
72+
try {
73+
// Navigate to the docs site
74+
await page.goto('http://localhost:4173', { waitUntil: 'networkidle' });
75+
76+
// Wait for and check that "React Datepicker" text is visible
77+
await page.waitForSelector('text=React Datepicker', { timeout: 10000 });
78+
79+
// Additional checks
80+
const title = await page.title();
81+
console.log(`✅ Page title: ${title}`);
82+
83+
const hasText = await page.getByText('React Datepicker').isVisible();
84+
if (hasText) {
85+
console.log('✅ Success: "React Datepicker" text is visible on the docs site');
86+
} else {
87+
throw new Error('❌ "React Datepicker" text not found');
88+
}
89+
90+
} catch (error) {
91+
console.error('❌ Test failed:', error.message);
92+
93+
// Take screenshot for debugging
94+
await page.screenshot({ path: 'docs-test-failure.png', fullPage: true });
95+
console.log('📸 Screenshot saved as docs-test-failure.png');
96+
97+
// Log page content for debugging
98+
const content = await page.content();
99+
console.log('Page content preview:', content.substring(0, 500));
100+
101+
process.exit(1);
102+
} finally {
103+
await browser.close();
104+
}
105+
})();
106+
EOF
107+
108+
npx playwright test test-docs.js || node test-docs.js
109+
110+
- name: Upload screenshot on failure
111+
if: failure()
112+
uses: actions/upload-artifact@v4
113+
with:
114+
name: docs-test-screenshot
115+
path: docs-test-failure.png

‎src/popper_component.tsx‎

Lines changed: 63 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { FloatingArrow } from "@floating-ui/react";
22
import { clsx } from "clsx";
3-
import React, { createElement, Component } from "react";
3+
import React, { createElement } from "react";
44

55
import Portal from "./portal";
66
import TabLoop from "./tab_loop";
@@ -29,82 +29,74 @@ interface PopperComponentProps
2929
}
3030

3131
// Exported for testing purposes
32-
export class PopperComponent extends Component<PopperComponentProps> {
33-
static get defaultProps() {
34-
return {
35-
hidePopper: true,
36-
};
37-
}
38-
39-
render(): React.ReactElement {
40-
const {
41-
className,
42-
wrapperClassName,
43-
hidePopper = PopperComponent.defaultProps.hidePopper,
44-
popperComponent,
45-
targetComponent,
46-
enableTabLoop,
47-
popperOnKeyDown,
48-
portalId,
49-
portalHost,
50-
popperProps,
51-
showArrow,
52-
} = this.props;
53-
54-
let popper: React.ReactElement | undefined = undefined;
32+
export const PopperComponent: React.FC<PopperComponentProps> = (props) => {
33+
const {
34+
className,
35+
wrapperClassName,
36+
hidePopper = true,
37+
popperComponent,
38+
targetComponent,
39+
enableTabLoop,
40+
popperOnKeyDown,
41+
portalId,
42+
portalHost,
43+
popperProps,
44+
showArrow,
45+
} = props;
5546

56-
if (!hidePopper) {
57-
const classes = clsx("react-datepicker-popper", className);
58-
popper = (
59-
<TabLoop enableTabLoop={enableTabLoop}>
60-
<div
61-
ref={popperProps.refs.setFloating}
62-
style={popperProps.floatingStyles}
63-
className={classes}
64-
data-placement={popperProps.placement}
65-
onKeyDown={popperOnKeyDown}
66-
>
67-
{popperComponent}
68-
{showArrow && (
69-
<FloatingArrow
70-
ref={popperProps.arrowRef}
71-
context={popperProps.context}
72-
fill="currentColor"
73-
strokeWidth={1}
74-
height={8}
75-
width={16}
76-
style={{ transform: "translateY(-1px)" }}
77-
className="react-datepicker__triangle"
78-
/>
79-
)}
80-
</div>
81-
</TabLoop>
82-
);
83-
}
47+
let popper: React.ReactElement | undefined = undefined;
8448

85-
if (this.props.popperContainer) {
86-
popper = createElement(this.props.popperContainer, {}, popper);
87-
}
88-
89-
if (portalId && !hidePopper) {
90-
popper = (
91-
<Portal portalId={portalId} portalHost={portalHost}>
92-
{popper}
93-
</Portal>
94-
);
95-
}
49+
if (!hidePopper) {
50+
const classes = clsx("react-datepicker-popper", className);
51+
popper = (
52+
<TabLoop enableTabLoop={enableTabLoop}>
53+
<div
54+
ref={popperProps.refs.setFloating}
55+
style={popperProps.floatingStyles}
56+
className={classes}
57+
data-placement={popperProps.placement}
58+
onKeyDown={popperOnKeyDown}
59+
>
60+
{popperComponent}
61+
{showArrow && (
62+
<FloatingArrow
63+
ref={popperProps.arrowRef}
64+
context={popperProps.context}
65+
fill="currentColor"
66+
strokeWidth={1}
67+
height={8}
68+
width={16}
69+
style={{ transform: "translateY(-1px)" }}
70+
className="react-datepicker__triangle"
71+
/>
72+
)}
73+
</div>
74+
</TabLoop>
75+
);
76+
}
9677

97-
const wrapperClasses = clsx("react-datepicker-wrapper", wrapperClassName);
78+
if (props.popperContainer) {
79+
popper = createElement(props.popperContainer, {}, popper);
80+
}
9881

99-
return (
100-
<>
101-
<div ref={popperProps.refs.setReference} className={wrapperClasses}>
102-
{targetComponent}
103-
</div>
82+
if (portalId && !hidePopper) {
83+
popper = (
84+
<Portal portalId={portalId} portalHost={portalHost}>
10485
{popper}
105-
</>
86+
</Portal>
10687
);
10788
}
108-
}
89+
90+
const wrapperClasses = clsx("react-datepicker-wrapper", wrapperClassName);
91+
92+
return (
93+
<>
94+
<div ref={popperProps.refs.setReference} className={wrapperClasses}>
95+
{targetComponent}
96+
</div>
97+
{popper}
98+
</>
99+
);
100+
};
109101

110102
export default withFloating<PopperComponentProps>(PopperComponent);

0 commit comments

Comments
 (0)