Redocly/redoc
1
1
Fork 0
mirror of https://github.com/Redocly/redoc.git synced 2025-08-03 20:00:20 +03:00
Code Issues Packages Projects Releases Wiki Activity

Remove vite stuff

Browse Source
This commit is contained in:
branberry 2023-04-04 11:21:47 -05:00
parent 35cfeef561
commit 2b4050baff
9 changed files with 20897 additions and 738 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
index.html
View File

@ -1,11 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>The GOAT of web apps</title>
</head>
<body>
<div id="home"></div>
<script type="module" src="/src/reactStartup.tsx"></script>
</body>
</html>

21523
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

1
package.json
View File

@ -32,7 +32,6 @@
"start": "webpack serve --mode=development --env playground --hot --config demo/webpack.config.ts", "start": "webpack serve --mode=development --env playground --hot --config demo/webpack.config.ts",
"start:prod": "webpack serve --env playground --mode=production --config demo/webpack.config.ts", "start:prod": "webpack serve --env playground --mode=production --config demo/webpack.config.ts",
"start:benchmark": "webpack serve --mode=production --env.bench --config demo/webpack.config.ts", "start:benchmark": "webpack serve --mode=production --env.bench --config demo/webpack.config.ts",
"dev:vite": "vite",
"test": "npm run unit && npm run license-check", "test": "npm run unit && npm run license-check",
"unit": "jest --coverage", "unit": "jest --coverage",
"test:update-snapshot": "jest --updateSnapshot", "test:update-snapshot": "jest --updateSnapshot",

1
src/components/VersionSelector/Option.tsx
View File

@ -8,7 +8,6 @@ export const Option = ({ option, selected, onClick, focused }: OptionProps) => {
const KEY_SPACE = 'SPACE'; const KEY_SPACE = 'SPACE';
const handleKeyPress = (event: React.KeyboardEvent) => { const handleKeyPress = (event: React.KeyboardEvent) => {
console.log(event.key);
if (event.key === KEY_ENTER || event.key === KEY_SPACE) { if (event.key === KEY_ENTER || event.key === KEY_SPACE) {
onClick(); onClick();
} }

46
src/components/VersionSelector/VersionSelector.tsx
View File

@ -14,6 +14,8 @@ import { Option } from './Option';
import { VersionSelectorProps } from './types'; import { VersionSelectorProps } from './types';
import { useOutsideClick } from './use-outside-click'; import { useOutsideClick } from './use-outside-click';
type SelectorState = number | 'Before' | 'After';
/** /**
* Version Selector Dropdown component based structurally and stylistically off LG Select * Version Selector Dropdown component based structurally and stylistically off LG Select
*/ */
@ -24,7 +26,7 @@ const VersionSelectorComponent = ({
}: VersionSelectorProps): JSX.Element => { }: VersionSelectorProps): JSX.Element => {
const initialSelectedIdx = resourceVersions.indexOf(active.resourceVersion); const initialSelectedIdx = resourceVersions.indexOf(active.resourceVersion);
const [open, setOpen] = React.useState<boolean>(false); const [open, setOpen] = React.useState<boolean>(false);
const [focusedIdx, setFocusedIdx] = React.useState<number | null>(null); const [focusedIdx, setFocusedIdx] = React.useState<SelectorState>('Before');
const [selectedIdx, setSelectedIdx] = React.useState<number>(initialSelectedIdx); const [selectedIdx, setSelectedIdx] = React.useState<number>(initialSelectedIdx);
const menuListRef = React.useRef(null); const menuListRef = React.useRef(null);
@ -34,7 +36,7 @@ const VersionSelectorComponent = ({
<Option <Option
key={`option-${i}`} key={`option-${i}`}
selected={i === selectedIdx} selected={i === selectedIdx}
focused={i === focusedIdx && focusedIdx !== selectedIdx} focused={i === focusedIdx}
option={option} option={option}
onClick={() => handleClick(i)} onClick={() => handleClick(i)}
/> />
@ -42,7 +44,9 @@ const VersionSelectorComponent = ({
}); });
useOutsideClick(menuListRef, () => { useOutsideClick(menuListRef, () => {
console.log('outside click');
if (open) setOpen(false); if (open) setOpen(false);
setFocusedIdx(0);
}); });
const handleClick = (idx: number) => { const handleClick = (idx: number) => {
@ -51,12 +55,42 @@ const VersionSelectorComponent = ({
}; };
const handleFocusChange = (event: React.KeyboardEvent<HTMLDivElement>) => { const handleFocusChange = (event: React.KeyboardEvent<HTMLDivElement>) => {
console.log(event.key); const { key, shiftKey } = event;
console.log(key);
console.log(focusedIdx);
if (key === 'ArrowDown' || (key === 'Tab' && !shiftKey)) {
// if we go down when we are already past the end, don't do anything
if (focusedIdx === 'After') return;
if (focusedIdx === 'Before') {
setOpen(true);
setFocusedIdx(0);
} else if (focusedIdx === resourceVersions.length - 1) {
setOpen(false);
setFocusedIdx('After');
} else {
setFocusedIdx(focusedIdx + 1);
}
} else if (key === 'ArrowUp' || (key === 'Tab' && shiftKey)) {
// if we go down when we are already past the end, don't do anything
if (focusedIdx === 'Before') return;
if (focusedIdx === 'After') {
setOpen(true);
setFocusedIdx(resourceVersions.length - 1);
} else if (0) {
setOpen(false);
setFocusedIdx('Before');
} else {
setFocusedIdx(focusedIdx - 1);
}
}
}; };
// const handleArrowKeys = () => {};
return ( return (
<StyledWrapper ref={menuListRef} onKeyDown={event => console.log(event.currentTarget)}> <StyledWrapper onKeyDown={handleFocusChange} ref={menuListRef}>
<StyledSelectWrapper> <StyledSelectWrapper>
<StyledLabel>Version Selector: v{active.apiVersion}</StyledLabel> <StyledLabel>Version Selector: v{active.apiVersion}</StyledLabel>
{description && <StyledDescription>{description}</StyledDescription>} {description && <StyledDescription>{description}</StyledDescription>}
@ -70,7 +104,7 @@ const VersionSelectorComponent = ({
</StyledButton> </StyledButton>
</StyledSelectWrapper> </StyledSelectWrapper>
<StyledDropdown open={open} onKeyDown={handleFocusChange}> <StyledDropdown open={open}>
<div> <div>
<StyledMenuList>{options}</StyledMenuList> <StyledMenuList>{options}</StyledMenuList>
</div> </div>

11
src/components/VersionSelector/styled.elements.ts
View File

@ -116,17 +116,6 @@ export const enabledOptionStyle = css`
&:hover { &:hover {
background-color: ${palette.gray.light2}; background-color: ${palette.gray.light2};
} }
&:focus {
color: ${palette.blue.dark2};
background-color: ${palette.blue.light3};
&:before {
opacity: 1;
transform: scaleY(1);
background-color: ${palette.blue.base};
}
}
`; `;
export const StyledLi = styled.li.attrs<{ export const StyledLi = styled.li.attrs<{

20
src/components/VersionSelector/use-outside-click copy.tsx
View File

@ -1,20 +0,0 @@
import { useEffect } from 'react';
/**
* Hook that fires event on clicks outside of the passed ref
*/
export function useOutsideKeypress(ref, callback) {
useEffect(() => {
function handleClickOutside(event) {
if (ref.current && !ref.current.contains(event.target)) {
callback();
}
}
// Bind the event listener
document.addEventListener('keypress', handleClickOutside);
return () => {
// Unbind the event listener on clean up
document.removeEventListener('keypress', handleClickOutside);
};
}, [ref, callback]);
}

6
src/components/__tests__/__snapshots__/VersionSelector.test.tsx.snap
View File

@ -54,7 +54,7 @@ exports[`VersionSelector should correctly render VersionSelector 1`] = `
> >
<li <li
aria-selected="false" aria-selected="false"
class="sc-fujyAs iIVhNL" class="sc-fujyAs ecmaOM"
role="option" role="option"
tabindex="0" tabindex="0"
> >
@ -69,7 +69,7 @@ exports[`VersionSelector should correctly render VersionSelector 1`] = `
</li> </li>
<li <li
aria-selected="false" aria-selected="false"
class="sc-fujyAs iIVhNL" class="sc-fujyAs ecmaOM"
role="option" role="option"
tabindex="0" tabindex="0"
> >
@ -84,7 +84,7 @@ exports[`VersionSelector should correctly render VersionSelector 1`] = `
</li> </li>
<li <li
aria-selected="true" aria-selected="true"
class="sc-fujyAs Ywdfd" class="sc-fujyAs iplZXm"
role="option" role="option"
selected="" selected=""
tabindex="0" tabindex="0"

6
vite.config.ts
View File

@ -1,6 +0,0 @@
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig({
plugins: [react()],
});