This commit is contained in:
2024-03-22 03:47:51 +05:30
parent 8bcf3d211e
commit 89819f6fe2
28440 changed files with 3211033 additions and 2 deletions

View File

@@ -0,0 +1,64 @@
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
import React, { type Dispatch, type SetStateAction, type ReactNode } from 'react';
/**
* This hook is a very thin wrapper around a `useState`.
*/
export declare function useCollapsible({ initialState, }: {
/** The initial state. Will be non-collapsed by default. */
initialState?: boolean | (() => boolean);
}): {
collapsed: boolean;
setCollapsed: Dispatch<SetStateAction<boolean>>;
toggleCollapsed: () => void;
};
type CollapsibleAnimationConfig = {
duration?: number;
easing?: string;
};
type CollapsibleElementType = React.ElementType<Pick<React.HTMLAttributes<unknown>, 'className' | 'onTransitionEnd' | 'style'>>;
type CollapsibleBaseProps = {
/** The actual DOM element to be used in the markup. */
as?: CollapsibleElementType;
/** Initial collapsed state. */
collapsed: boolean;
children: ReactNode;
/** Configuration of animation, like `duration` and `easing` */
animation?: CollapsibleAnimationConfig;
/**
* A callback fired when the collapse transition animation ends. Receives
* the **new** collapsed state: e.g. when
* expanding, `collapsed` will be `false`. You can use this for some "cleanup"
* like applying new styles when the container is fully expanded.
*/
onCollapseTransitionEnd?: (collapsed: boolean) => void;
/** Class name for the underlying DOM element. */
className?: string;
/**
* This is mostly useful for details/summary component where ssrStyle is not
* needed (as details are hidden natively) and can mess up with the browser's
* native behavior when JS fails to load or is disabled
*/
disableSSRStyle?: boolean;
};
type CollapsibleProps = CollapsibleBaseProps & {
/**
* Delay rendering of the content till first expansion. Marked as required to
* force us to think if content should be server-rendered or not. This has
* perf impact since it reduces html file sizes, but could undermine SEO.
* @see https://github.com/facebook/docusaurus/issues/4753
*/
lazy: boolean;
};
/**
* A headless component providing smooth and uniform collapsing behavior. The
* component will be invisible (zero height) when collapsed. Doesn't provide
* interactivity by itself: collapse state is toggled through props.
*/
export declare function Collapsible({ lazy, ...props }: CollapsibleProps): JSX.Element;
export {};
//# sourceMappingURL=index.d.ts.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Collapsible/index.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,EAMZ,KAAK,QAAQ,EACb,KAAK,cAAc,EACnB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAOf;;GAEG;AACH,wBAAgB,cAAc,CAAC,EAC7B,YAAY,GACb,EAAE;IACD,2DAA2D;IAC3D,YAAY,CAAC,EAAE,OAAO,GAAG,CAAC,MAAM,OAAO,CAAC,CAAC;CAC1C,GAAG;IACF,SAAS,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,QAAQ,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IAChD,eAAe,EAAE,MAAM,IAAI,CAAC;CAC7B,CAYA;AAqCD,KAAK,0BAA0B,GAAG;IAChC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAoEF,KAAK,sBAAsB,GAAG,KAAK,CAAC,WAAW,CAC7C,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,WAAW,GAAG,iBAAiB,GAAG,OAAO,CAAC,CAC/E,CAAC;AAaF,KAAK,oBAAoB,GAAG;IAC1B,uDAAuD;IACvD,EAAE,CAAC,EAAE,sBAAsB,CAAC;IAC5B,+BAA+B;IAC/B,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;IACpB,+DAA+D;IAC/D,SAAS,CAAC,EAAE,0BAA0B,CAAC;IACvC;;;;;OAKG;IACH,uBAAuB,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IACvD,iDAAiD;IACjD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B,CAAC;AAyDF,KAAK,gBAAgB,GAAG,oBAAoB,GAAG;IAC7C;;;;;OAKG;IACH,IAAI,EAAE,OAAO,CAAC;CACf,CAAC;AAEF;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,EAAC,IAAI,EAAE,GAAG,KAAK,EAAC,EAAE,gBAAgB,GAAG,GAAG,CAAC,OAAO,CAG3E"}

View File

@@ -0,0 +1,157 @@
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
import React, { useState, useEffect, useRef, useCallback, } from 'react';
import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
import useIsomorphicLayoutEffect from '@docusaurus/useIsomorphicLayoutEffect';
import { prefersReducedMotion } from '../../utils/accessibilityUtils';
const DefaultAnimationEasing = 'ease-in-out';
/**
* This hook is a very thin wrapper around a `useState`.
*/
export function useCollapsible({ initialState, }) {
const [collapsed, setCollapsed] = useState(initialState ?? false);
const toggleCollapsed = useCallback(() => {
setCollapsed((expanded) => !expanded);
}, []);
return {
collapsed,
setCollapsed,
toggleCollapsed,
};
}
const CollapsedStyles = {
display: 'none',
overflow: 'hidden',
height: '0px',
};
const ExpandedStyles = {
display: 'block',
overflow: 'visible',
height: 'auto',
};
function applyCollapsedStyle(el, collapsed) {
const collapsedStyles = collapsed ? CollapsedStyles : ExpandedStyles;
el.style.display = collapsedStyles.display;
el.style.overflow = collapsedStyles.overflow;
el.style.height = collapsedStyles.height;
}
/*
Lex111: Dynamic transition duration is used in Material design, this technique
is good for a large number of items.
https://material.io/archive/guidelines/motion/duration-easing.html#duration-easing-dynamic-durations
https://github.com/mui-org/material-ui/blob/e724d98eba018e55e1a684236a2037e24bcf050c/packages/material-ui/src/styles/createTransitions.js#L40-L43
*/
function getAutoHeightDuration(height) {
if (prefersReducedMotion()) {
// Not using 0 because it prevents onTransitionEnd to fire and bubble up :/
// See https://github.com/facebook/docusaurus/pull/8906
return 1;
}
const constant = height / 36;
return Math.round((4 + 15 * constant ** 0.25 + constant / 5) * 10);
}
function useCollapseAnimation({ collapsibleRef, collapsed, animation, }) {
const mounted = useRef(false);
useEffect(() => {
const el = collapsibleRef.current;
function getTransitionStyles() {
const height = el.scrollHeight;
const duration = animation?.duration ?? getAutoHeightDuration(height);
const easing = animation?.easing ?? DefaultAnimationEasing;
return {
transition: `height ${duration}ms ${easing}`,
height: `${height}px`,
};
}
function applyTransitionStyles() {
const transitionStyles = getTransitionStyles();
el.style.transition = transitionStyles.transition;
el.style.height = transitionStyles.height;
}
// On mount, we just apply styles, no animated transition
if (!mounted.current) {
applyCollapsedStyle(el, collapsed);
mounted.current = true;
return undefined;
}
el.style.willChange = 'height';
function startAnimation() {
const animationFrame = requestAnimationFrame(() => {
// When collapsing
if (collapsed) {
applyTransitionStyles();
requestAnimationFrame(() => {
el.style.height = CollapsedStyles.height;
el.style.overflow = CollapsedStyles.overflow;
});
}
// When expanding
else {
el.style.display = 'block';
requestAnimationFrame(() => {
applyTransitionStyles();
});
}
});
return () => cancelAnimationFrame(animationFrame);
}
return startAnimation();
}, [collapsibleRef, collapsed, animation]);
}
/**
* Prevent hydration layout shift before animations are handled imperatively
* with JS
*/
function getSSRStyle(collapsed) {
if (ExecutionEnvironment.canUseDOM) {
return undefined;
}
return collapsed ? CollapsedStyles : ExpandedStyles;
}
function CollapsibleBase({ as: As = 'div', collapsed, children, animation, onCollapseTransitionEnd, className, disableSSRStyle, }) {
const collapsibleRef = useRef(null);
useCollapseAnimation({ collapsibleRef, collapsed, animation });
return (<As
// @ts-expect-error: the "too complicated type" is produced from
// "CollapsibleElementType" being a huge union
ref={collapsibleRef} // Refs are contravariant, which is not expressible in TS
style={disableSSRStyle ? undefined : getSSRStyle(collapsed)} onTransitionEnd={(e) => {
if (e.propertyName !== 'height') {
return;
}
applyCollapsedStyle(collapsibleRef.current, collapsed);
onCollapseTransitionEnd?.(collapsed);
}} className={className}>
{children}
</As>);
}
function CollapsibleLazy({ collapsed, ...props }) {
const [mounted, setMounted] = useState(!collapsed);
// Updated in effect so that first expansion transition can work
const [lazyCollapsed, setLazyCollapsed] = useState(collapsed);
useIsomorphicLayoutEffect(() => {
if (!collapsed) {
setMounted(true);
}
}, [collapsed]);
useIsomorphicLayoutEffect(() => {
if (mounted) {
setLazyCollapsed(collapsed);
}
}, [mounted, collapsed]);
return mounted ? (<CollapsibleBase {...props} collapsed={lazyCollapsed}/>) : null;
}
/**
* A headless component providing smooth and uniform collapsing behavior. The
* component will be invisible (zero height) when collapsed. Doesn't provide
* interactivity by itself: collapse state is toggled through props.
*/
export function Collapsible({ lazy, ...props }) {
const Comp = lazy ? CollapsibleLazy : CollapsibleBase;
return <Comp {...props}/>;
}
//# sourceMappingURL=index.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Collapsible/index.tsx"],"names":[],"mappings":"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"}

View File

@@ -0,0 +1,20 @@
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
import { type ComponentProps, type ReactElement } from 'react';
export type DetailsProps = {
/**
* Summary is provided as props, optionally including the wrapping
* `<summary>` tag
*/
summary?: ReactElement | string;
} & ComponentProps<'details'>;
/**
* A mostly un-styled `<details>` element with smooth collapsing. Provides some
* very lightweight styles, but you should bring your UI.
*/
export declare function Details({ summary, children, ...props }: DetailsProps): JSX.Element;
//# sourceMappingURL=index.d.ts.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Details/index.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAc,EAGZ,KAAK,cAAc,EACnB,KAAK,YAAY,EAClB,MAAM,OAAO,CAAC;AAqBf,MAAM,MAAM,YAAY,GAAG;IACzB;;;OAGG;IACH,OAAO,CAAC,EAAE,YAAY,GAAG,MAAM,CAAC;CACjC,GAAG,cAAc,CAAC,SAAS,CAAC,CAAC;AAE9B;;;GAGG;AACH,wBAAgB,OAAO,CAAC,EACtB,OAAO,EACP,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,YAAY,GAAG,GAAG,CAAC,OAAO,CAsE5B"}

View File

@@ -0,0 +1,78 @@
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
import React, { useRef, useState, } from 'react';
import clsx from 'clsx';
import useBrokenLinks from '@docusaurus/useBrokenLinks';
import useIsBrowser from '@docusaurus/useIsBrowser';
import { useCollapsible, Collapsible } from '../Collapsible';
import styles from './styles.module.css';
function isInSummary(node) {
if (!node) {
return false;
}
return node.tagName === 'SUMMARY' || isInSummary(node.parentElement);
}
function hasParent(node, parent) {
if (!node) {
return false;
}
return node === parent || hasParent(node.parentElement, parent);
}
/**
* A mostly un-styled `<details>` element with smooth collapsing. Provides some
* very lightweight styles, but you should bring your UI.
*/
export function Details({ summary, children, ...props }) {
useBrokenLinks().collectAnchor(props.id);
const isBrowser = useIsBrowser();
const detailsRef = useRef(null);
const { collapsed, setCollapsed } = useCollapsible({
initialState: !props.open,
});
// Use a separate state for the actual details prop, because it must be set
// only after animation completes, otherwise close animations won't work
const [open, setOpen] = useState(props.open);
const summaryElement = React.isValidElement(summary) ? (summary) : (<summary>{summary ?? 'Details'}</summary>);
return (
// eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
<details {...props} ref={detailsRef} open={open} data-collapsed={collapsed} className={clsx(styles.details, isBrowser && styles.isBrowser, props.className)} onMouseDown={(e) => {
const target = e.target;
// Prevent a double-click to highlight summary text
if (isInSummary(target) && e.detail > 1) {
e.preventDefault();
}
}} onClick={(e) => {
e.stopPropagation(); // For isolation of multiple nested details/summary
const target = e.target;
const shouldToggle = isInSummary(target) && hasParent(target, detailsRef.current);
if (!shouldToggle) {
return;
}
e.preventDefault();
if (collapsed) {
setCollapsed(false);
setOpen(true);
}
else {
setCollapsed(true);
// Don't do this, it breaks close animation!
// setOpen(false);
}
}}>
{summaryElement}
<Collapsible lazy={false} // Content might matter for SEO in this case
collapsed={collapsed} disableSSRStyle // Allows component to work fine even with JS disabled!
onCollapseTransitionEnd={(newCollapsed) => {
setCollapsed(newCollapsed);
setOpen(!newCollapsed);
}}>
<div className={styles.collapsibleContent}>{children}</div>
</Collapsible>
</details>);
}
//# sourceMappingURL=index.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Details/index.tsx"],"names":[],"mappings":"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"}

View File

@@ -0,0 +1,66 @@
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
/*
CSS variables, meant to be overridden by final theme
*/
.details {
--docusaurus-details-summary-arrow-size: 0.38rem;
--docusaurus-details-transition: transform 200ms ease;
--docusaurus-details-decoration-color: grey;
}
.details > summary {
position: relative;
cursor: pointer;
list-style: none;
padding-left: 1rem;
}
/* TODO: deprecation, need to remove this after Safari will support `::marker` */
.details > summary::-webkit-details-marker {
display: none;
}
.details > summary::before {
position: absolute;
top: 0.45rem;
left: 0;
/* CSS-only Arrow */
content: '';
border-width: var(--docusaurus-details-summary-arrow-size);
border-style: solid;
border-color: transparent transparent transparent
var(--docusaurus-details-decoration-color);
/* Arrow rotation anim */
transform: rotate(0deg);
transition: var(--docusaurus-details-transition);
transform-origin: calc(var(--docusaurus-details-summary-arrow-size) / 2) 50%;
}
/* When JS disabled/failed to load: we use the open property for arrow animation: */
.details[open]:not(.isBrowser) > summary::before,
/* When JS works: we use the data-attribute for arrow animation */
.details[data-collapsed='false'].isBrowser > summary::before {
transform: rotate(90deg);
}
.collapsibleContent {
margin-top: 1rem;
border-top: 1px solid var(--docusaurus-details-decoration-color);
padding-top: 1rem;
}
.collapsibleContent p:last-child {
margin-bottom: 0;
}
.details > summary > p:last-child {
margin-bottom: 0;
}

View File

@@ -0,0 +1,32 @@
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
import React from 'react';
declare const AllThemes: readonly ["light", "dark"];
type Theme = (typeof AllThemes)[number];
type RenderFn = ({ theme, className, }: {
theme: Theme;
className: string;
}) => React.ReactNode;
type Props = {
children: RenderFn;
className?: string;
};
/**
* Generic component to render anything themed in light/dark
* Note: it's preferable to use CSS for theming because this component
* will need to render all the variants during SSR to avoid a theme flash.
*
* Use this only when CSS customizations are not convenient or impossible.
* For example, rendering themed images or SVGs...
*
* @param className applied to all the variants
* @param children function to render a theme variant
* @constructor
*/
export default function ThemedComponent({ className, children, }: Props): JSX.Element;
export {};
//# sourceMappingURL=index.d.ts.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ThemedComponent/index.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,QAAA,MAAM,SAAS,4BAA6B,CAAC;AAE7C,KAAK,KAAK,GAAG,CAAC,OAAO,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC;AAExC,KAAK,QAAQ,GAAG,CAAC,EACf,KAAK,EACL,SAAS,GACV,EAAE;IACD,KAAK,EAAE,KAAK,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;CACnB,KAAK,KAAK,CAAC,SAAS,CAAC;AAEtB,KAAK,KAAK,GAAG;IACX,QAAQ,EAAE,QAAQ,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EACtC,SAAS,EACT,QAAQ,GACT,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CA8BrB"}

View File

@@ -0,0 +1,48 @@
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
import React from 'react';
import clsx from 'clsx';
import useIsBrowser from '@docusaurus/useIsBrowser';
import { useColorMode } from '../../contexts/colorMode';
import styles from './styles.module.css';
const AllThemes = ['light', 'dark'];
/**
* Generic component to render anything themed in light/dark
* Note: it's preferable to use CSS for theming because this component
* will need to render all the variants during SSR to avoid a theme flash.
*
* Use this only when CSS customizations are not convenient or impossible.
* For example, rendering themed images or SVGs...
*
* @param className applied to all the variants
* @param children function to render a theme variant
* @constructor
*/
export default function ThemedComponent({ className, children, }) {
const isBrowser = useIsBrowser();
const { colorMode } = useColorMode();
function getThemesToRender() {
if (isBrowser) {
return colorMode === 'dark' ? ['dark'] : ['light'];
}
// We need to render both components on the server / hydration to avoid:
// - a flash of wrong theme before hydration
// - React hydration mismatches
// See https://github.com/facebook/docusaurus/pull/3730
return ['light', 'dark'];
}
return (<>
{getThemesToRender().map((theme) => {
const themedElement = children({
theme,
className: clsx(className, styles.themedComponent, styles[`themedComponent--${theme}`]),
});
return <React.Fragment key={theme}>{themedElement}</React.Fragment>;
})}
</>);
}
//# sourceMappingURL=index.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ThemedComponent/index.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,YAAY,MAAM,0BAA0B,CAAC;AACpD,OAAO,EAAC,YAAY,EAAC,MAAM,0BAA0B,CAAC;AAEtD,OAAO,MAAM,MAAM,qBAAqB,CAAC;AAEzC,MAAM,SAAS,GAAG,CAAC,OAAO,EAAE,MAAM,CAAU,CAAC;AAiB7C;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EACtC,SAAS,EACT,QAAQ,GACF;IACN,MAAM,SAAS,GAAG,YAAY,EAAE,CAAC;IACjC,MAAM,EAAC,SAAS,EAAC,GAAG,YAAY,EAAE,CAAC;IAEnC,SAAS,iBAAiB;QACxB,IAAI,SAAS,EAAE;YACb,OAAO,SAAS,KAAK,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;SACpD;QACD,wEAAwE;QACxE,4CAA4C;QAC5C,+BAA+B;QAC/B,uDAAuD;QACvD,OAAO,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;IAC3B,CAAC;IAED,OAAO,CACL,EACE;MAAA,CAAC,iBAAiB,EAAE,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE;YACjC,MAAM,aAAa,GAAG,QAAQ,CAAC;gBAC7B,KAAK;gBACL,SAAS,EAAE,IAAI,CACb,SAAS,EACT,MAAM,CAAC,eAAe,EACtB,MAAM,CAAC,oBAAoB,KAAK,EAAE,CAAC,CACpC;aACF,CAAC,CAAC;YACH,OAAO,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,aAAa,CAAC,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC;QACtE,CAAC,CAAC,CACJ;IAAA,GAAG,CACJ,CAAC;AACJ,CAAC"}

View File

@@ -0,0 +1,26 @@
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
.themedComponent {
display: none;
}
[data-theme='light'] .themedComponent--light {
display: initial;
}
[data-theme='dark'] .themedComponent--dark {
display: initial;
}
/*
JS disabled??? Show light version by default => better than showing nothing
TODO bad, but we currently always show light mode when there's no data-theme
*/
html:not([data-theme]) .themedComponent--light {
display: initial;
}