diff --git a/packages/react-table-devtools/package.json b/packages/react-table-devtools/package.json deleted file mode 100644 index 0aeb9821cd..0000000000 --- a/packages/react-table-devtools/package.json +++ /dev/null @@ -1,66 +0,0 @@ -{ - "name": "@tanstack/react-table-devtools", - "version": "9.0.0-alpha.10", - "description": "Devtools for React Table", - "author": "Tanner Linsley", - "license": "MIT", - "repository": { - "type": "git", - "url": "https://github.com/TanStack/table.git", - "directory": "packages/react-table-devtools" - }, - "homepage": "https://tanstack.com/table", - "funding": { - "type": "github", - "url": "https://github.com/sponsors/tannerlinsley" - }, - "keywords": [ - "react", - "table", - "react-table", - "datagrid" - ], - "type": "module", - "types": "dist/esm/index.d.ts", - "main": "dist/cjs/index.cjs", - "module": "dist/esm/index.js", - "exports": { - ".": { - "import": { - "types": "./dist/esm/index.d.ts", - "default": "./dist/esm/index.js" - }, - "require": { - "types": "./dist/cjs/index.d.cts", - "default": "./dist/cjs/index.cjs" - } - }, - "./package.json": "./package.json" - }, - "sideEffects": false, - "engines": { - "node": ">=12" - }, - "files": [ - "dist", - "src" - ], - "scripts": { - "clean": "rimraf ./build && rimraf ./dist", - "test:types": "tsc", - "test:build": "publint --strict", - "build": "vite build" - }, - "peerDependencies": { - "react": ">=16.8", - "react-dom": ">=16.8" - }, - "devDependencies": { - "@types/react": "^19.0.1", - "@vitejs/plugin-react": "^4.3.4", - "react": "^19.0.0" - }, - "dependencies": { - "@tanstack/react-table": "workspace:*" - } -} diff --git a/packages/react-table-devtools/src/Explorer.tsx b/packages/react-table-devtools/src/Explorer.tsx deleted file mode 100644 index 621ec98362..0000000000 --- a/packages/react-table-devtools/src/Explorer.tsx +++ /dev/null @@ -1,230 +0,0 @@ -// @ts-nocheck - -import React from 'react' -import { styled } from './utils' - -const Entry = styled('div', { - fontFamily: 'Menlo, monospace', - fontSize: '0.7rem', - lineHeight: '1.7', - outline: 'none', - wordBreak: 'break-word', -}) - -const Label = styled('span', { - cursor: 'pointer', - color: 'white', -}) - -const Value = styled('span', (props, theme) => ({ - color: theme.danger, -})) - -const SubEntries = styled('div', { - marginLeft: '.1rem', - paddingLeft: '1rem', - borderLeft: '2px solid rgba(0,0,0,.15)', -}) - -const Info = styled('span', { - color: 'grey', - fontSize: '.7rem', -}) - -const Expander = ({ expanded, style = {}, ...rest }) => ( - - ▶ - -) - -const DefaultRenderer = ({ - handleEntry, - label, - value, - // path, - subEntries, - subEntryPages, - type, - // depth, - expanded, - toggle, - pageSize, - renderer, -}) => { - const [valueSnapshot, setValueSnapshot] = React.useState(undefined) - const [expandedPages, setExpandedPages] = React.useState([]) - - const refreshValueSnapshot = () => { - setValueSnapshot(value()) - } - - return ( - - {subEntryPages?.length ? ( - <> - - {expanded ? ( - subEntryPages.length === 1 ? ( - - {subEntries.map((entry) => handleEntry(entry))} - - ) : ( - - {subEntryPages.map((entries, index) => ( -
- - - {expandedPages.includes(index) ? ( - - {entries.map((entry) => handleEntry(entry))} - - ) : null} - -
- ))} - - ) - ) : null} - - ) : type === 'function' ? ( - <> - - 🔄{' '} - - } - value={valueSnapshot} - defaultExpanded={{}} - /> - - ) : ( - <> - {' '} - - {JSON.stringify(value, Object.getOwnPropertyNames(Object(value)))} - - - )} - - ) -} - -export default function Explorer({ - value, - defaultExpanded, - renderer = DefaultRenderer, - pageSize = 100, - depth = 0, - ...rest -}) { - const [expanded, setExpanded] = React.useState(defaultExpanded) - - const toggle = (set) => { - setExpanded((old) => (typeof set !== 'undefined' ? set : !old)) - } - - const path = [] - - let type = typeof value - let subEntries - const subEntryPages = [] - - const makeProperty = (sub) => { - const newPath = path.concat(sub.label) - const subDefaultExpanded = - defaultExpanded === true - ? { [sub.label]: true } - : defaultExpanded?.[sub.label] - return { - ...sub, - subPath: sub, - path: newPath, - depth: depth + 1, - defaultExpanded: subDefaultExpanded, - } - } - - if (Array.isArray(value)) { - type = 'array' - subEntries = value.map((d, i) => - makeProperty({ - label: i, - value: d, - }), - ) - } else if ( - value !== null && - typeof value === 'object' && - typeof value[Symbol.iterator] === 'function' - ) { - type = 'Iterable' - subEntries = Array.from(value, (val, i) => - makeProperty({ - label: i, - value: val, - }), - ) - } else if (typeof value === 'function') { - type = 'function' - } else if (typeof value === 'object' && value !== null) { - type = 'object' - // eslint-disable-next-line no-shadow - subEntries = Object.entries(value).map(([label, value]) => - makeProperty({ - label, - value, - }), - ) - } - - if (subEntries) { - let i = 0 - - while (i < subEntries.length) { - subEntryPages.push(subEntries.slice(i, i + pageSize)) - i = i + pageSize - } - } - - return renderer({ - handleEntry: (entry) => ( - - ), - type, - subEntries, - subEntryPages, - depth, - value, - path, - expanded, - toggle, - pageSize, - ...rest, - }) -} diff --git a/packages/react-table-devtools/src/Logo.tsx b/packages/react-table-devtools/src/Logo.tsx deleted file mode 100644 index ffe74d57eb..0000000000 --- a/packages/react-table-devtools/src/Logo.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import * as React from 'react' - -export default function Logo(props: any) { - return ( - - - - - - - - - - - - - - ) -} diff --git a/packages/react-table-devtools/src/index.tsx b/packages/react-table-devtools/src/index.tsx deleted file mode 100644 index 7d1ff8ad68..0000000000 --- a/packages/react-table-devtools/src/index.tsx +++ /dev/null @@ -1,339 +0,0 @@ -import React from 'react' -import useLocalStorage from './useLocalStorage' -import { useIsMounted } from './utils' -import { Button, Panel } from './styledComponents' -import { ThemeProvider, defaultTheme as theme } from './theme' -// import { getQueryStatusLabel, getQueryStatusColor } from './utils' -import Explorer from './Explorer' -import Logo from './Logo' -import type { Table } from '@tanstack/react-table' - -interface DevtoolsOptions { - /** - * The react table to attach the devtools to. - */ - table: any - /** - * Set this true if you want the dev tools to default to being open - */ - initialIsOpen?: boolean - /** - * Use this to add props to the panel. For example, you can add className, style (merge and override default style), etc. - */ - panelProps?: React.DetailedHTMLProps< - React.HTMLAttributes, - HTMLDivElement - > - /** - * Use this to add props to the close button. For example, you can add className, style (merge and override default style), onClick (extend default handler), etc. - */ - closeButtonProps?: React.DetailedHTMLProps< - React.ButtonHTMLAttributes, - HTMLButtonElement - > - /** - * Use this to add props to the toggle button. For example, you can add className, style (merge and override default style), onClick (extend default handler), etc. - */ - toggleButtonProps?: React.DetailedHTMLProps< - React.ButtonHTMLAttributes, - HTMLButtonElement - > - /** - * Use this to render the devtools inside a different type of container element for a11y purposes. - * Any string which corresponds to a valid intrinsic JSX element is allowed. - * Defaults to 'footer'. - */ - containerElement?: string | any -} - -interface DevtoolsPanelOptions { - /** - * The react table to attach the devtools to. - */ - table: any - /** - * The standard React style object used to style a component with inline styles - */ - style?: React.CSSProperties - /** - * The standard React className property used to style a component with classes - */ - className?: string - /** - * A boolean variable indicating whether the panel is open or closed - */ - isOpen?: boolean - /** - * A function that toggles the open and close state of the panel - */ - setIsOpen: (isOpen: boolean) => void -} - -export function ReactTableDevtools({ - initialIsOpen, - table, - panelProps = {}, - toggleButtonProps = {}, - containerElement: Container = 'footer', -}: DevtoolsOptions): React.ReactElement | null { - const rootRef = React.useRef(null) - const panelRef = React.useRef(null) - const [isOpen, setIsOpen] = useLocalStorage( - 'reactTableDevtoolsOpen', - initialIsOpen, - ) - const isMounted = useIsMounted() - - const { style: panelStyle = {}, ...otherPanelProps } = panelProps - - const { - style: toggleButtonStyle = {}, - onClick: onToggleClick, - ...otherToggleButtonProps - } = toggleButtonProps - - // Do not render on the server - if (!isMounted()) return null - - return ( - - - {!isOpen ? ( - - ) : ( - - )} - - - ) -} - -export const ReactTableDevtoolsPanel = React.forwardRef< - HTMLDivElement, - DevtoolsPanelOptions ->(function ReactTableDevtoolsPanel(props, ref): React.ReactElement { - const { - table, - isOpen = true, - setIsOpen, - ...panelProps - } = props as DevtoolsPanelOptions & { - table: Table - } - - // const [activeMatchId, setActiveRouteId] = useLocalStorage( - // 'reactTableDevtoolsActiveRouteId', - // '', - // ) - - return ( - - -