Redocly/redoc
1
1
Fork 0
mirror of https://github.com/Redocly/redoc.git synced 2025-08-02 11:20: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>

21533
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: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",
"dev:vite": "vite",
"test": "npm run unit && npm run license-check",
"unit": "jest --coverage",
"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 handleKeyPress = (event: React.KeyboardEvent) => {
console.log(event.key);
if (event.key === KEY_ENTER || event.key === KEY_SPACE) {
onClick();
}

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

@ -14,6 +14,8 @@ import { Option } from './Option';
import { VersionSelectorProps } from './types';
import { useOutsideClick } from './use-outside-click';
type SelectorState = number | 'Before' | 'After';
/**
* Version Selector Dropdown component based structurally and stylistically off LG Select
*/
@ -24,7 +26,7 @@ const VersionSelectorComponent = ({
}: VersionSelectorProps): JSX.Element => {
const initialSelectedIdx = resourceVersions.indexOf(active.resourceVersion);
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 menuListRef = React.useRef(null);
@ -34,7 +36,7 @@ const VersionSelectorComponent = ({
<Option
key={`option-${i}`}
selected={i === selectedIdx}
focused={i === focusedIdx && focusedIdx !== selectedIdx}
focused={i === focusedIdx}
option={option}
onClick={() => handleClick(i)}
/>
@ -42,7 +44,9 @@ const VersionSelectorComponent = ({
});
useOutsideClick(menuListRef, () => {
console.log('outside click');
if (open) setOpen(false);
setFocusedIdx(0);
});
const handleClick = (idx: number) => {
@ -51,12 +55,42 @@ const VersionSelectorComponent = ({
};
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 (
<StyledWrapper ref={menuListRef} onKeyDown={event => console.log(event.currentTarget)}>
<StyledWrapper onKeyDown={handleFocusChange} ref={menuListRef}>
<StyledSelectWrapper>
<StyledLabel>Version Selector: v{active.apiVersion}</StyledLabel>
{description && <StyledDescription>{description}</StyledDescription>}
@ -70,7 +104,7 @@ const VersionSelectorComponent = ({
</StyledButton>
</StyledSelectWrapper>
<StyledDropdown open={open} onKeyDown={handleFocusChange}>
<StyledDropdown open={open}>
<div>
<StyledMenuList>{options}</StyledMenuList>
</div>

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

@ -116,17 +116,6 @@ export const enabledOptionStyle = css`
&:hover {
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<{

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