From b029886e0f7e82cf24f73a75fa98e1aecb62b27e Mon Sep 17 00:00:00 2001 From: Ido Rosenthal Date: Sun, 8 Dec 2024 22:32:43 +0200 Subject: [PATCH 1/2] chore: remove non-production auto-complete --- .../src/auto-complete/auto-complete.board.tsx | 26 ---- .../src/auto-complete/auto-complete.st.css | 22 ---- .../src/auto-complete/auto-complete.tsx | 118 ------------------ .../components/src/auto-complete/index.ts | 1 - packages/components/src/board-index.ts | 2 - packages/components/src/index.ts | 1 - packages/components/src/themes/white.st.css | 12 -- 7 files changed, 182 deletions(-) delete mode 100644 packages/components/src/auto-complete/auto-complete.board.tsx delete mode 100644 packages/components/src/auto-complete/auto-complete.st.css delete mode 100644 packages/components/src/auto-complete/auto-complete.tsx delete mode 100644 packages/components/src/auto-complete/index.ts diff --git a/packages/components/src/auto-complete/auto-complete.board.tsx b/packages/components/src/auto-complete/auto-complete.board.tsx deleted file mode 100644 index f6a57c72..00000000 --- a/packages/components/src/auto-complete/auto-complete.board.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import { createBoard } from '@wixc3/react-board'; -import React from 'react'; -import type { ItemData } from '../board-assets'; -import { createItems, ItemRenderer } from '../board-assets'; -import { projectThemesPlugin, zeeRootPlugin } from '../board-plugins'; -import { AutoComplete } from './auto-complete'; - -const items = createItems(30000); - -export default createBoard({ - name: 'auto-complete', - Board: () => ( - item.id} - getTextContent={(item: ItemData) => item.title} - /> - ), - plugins: [projectThemesPlugin, zeeRootPlugin], - environmentProps: { - canvasHeight: 24, - windowHeight: 576, - windowWidth: 786, - }, -}); diff --git a/packages/components/src/auto-complete/auto-complete.st.css b/packages/components/src/auto-complete/auto-complete.st.css deleted file mode 100644 index f0ee17c8..00000000 --- a/packages/components/src/auto-complete/auto-complete.st.css +++ /dev/null @@ -1,22 +0,0 @@ -@st-import Area from "../area/area.st.css"; -@st-import [floating] from "../area/variants.st.css"; -@st-import ScrollList from "../scroll-list/scroll-list.st.css"; - -.root { - -} - -.input { - -} - -.popover { - overflow: hidden; -} - -.scrollListRoot { - -st-extends: floating, ScrollList; - - overflow-x: hidden; - overflow-y: auto; -} diff --git a/packages/components/src/auto-complete/auto-complete.tsx b/packages/components/src/auto-complete/auto-complete.tsx deleted file mode 100644 index 7082ae8e..00000000 --- a/packages/components/src/auto-complete/auto-complete.tsx +++ /dev/null @@ -1,118 +0,0 @@ -import { Popover } from '@zeejs/react'; -import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react'; -import { Area } from '../area/area'; -import { KeyCodes, preventDefault } from '../common'; -import { StateControls, useStateControls } from '../hooks/use-state-controls'; -import { useTransmittedCB } from '../hooks/use-transmitted-events'; -import { InputWithClear } from '../input-with-clear/input-with-clear'; -import { createListRoot } from '../list/list'; -import { ScrollList, ScrollListProps } from '../scroll-list/scroll-list'; -import { searchMethodContext, searchStringContext } from '../searchable-text/searchable-text'; -import { classes, st } from './auto-complete.st.css'; - -export interface AutoCompleteProps extends ScrollListProps { - getTextContent: (item: T) => string; - searchControl?: StateControls; -} - -export type AutoComplete = (props: AutoCompleteProps) => JSX.Element; - -export function AutoComplete(props: AutoCompleteProps): JSX.Element { - const { searchControl, getTextContent, items, focusControl, selectionControl, getId, ...listProps } = props; - const [focused, setFocused] = useStateControls(focusControl, undefined); - const [selected, setSelected] = useStateControls(selectionControl, undefined); - const inputRef = useRef(null); - const scrollListRef = useRef(null); - const [searchText, updateSearchText] = useStateControls(searchControl, undefined); - const { match } = useContext(searchMethodContext); - - const { cb: onKeyPress, useTransmit } = useTransmittedCB(); - const [isOpen, setIsOpen] = useState(false); - const open = useCallback(() => { - setIsOpen(true); - }, []); - const close = useCallback(() => { - setIsOpen(false); - }, []); - const filteredData = useMemo(() => { - if (!searchText) { - return items; - } - return items.reduce((acc, item) => { - const content = getTextContent(item); - if (match(content, searchText)) { - acc.push(item); - } - return acc; - }, [] as T[]); - }, [getTextContent, items, match, searchText]); - - const onListSelect = useCallback( - (selectedId?: string) => { - const item = items.find((item) => getId(item) === selectedId); - updateSearchText(item ? getTextContent(item) : ''); - setSelected(selectedId); - close(); - }, - [close, getId, getTextContent, items, setSelected, updateSearchText] - ); - const scrollListRoot = createListRoot(Area, { - className: classes.scrollListRoot, - ref: scrollListRef, - style: { - height: '100%', - }, - onMouseDown: preventDefault, - }); - - const onKeyDown = useCallback( - (ev: React.KeyboardEvent) => { - if ((ev.code as KeyCodes) === KeyCodes.Escape) { - close(); - } else if ((ev.code as KeyCodes) !== KeyCodes.Tab) { - open(); - onKeyPress(ev); - } - }, - [close, onKeyPress, open] - ); - useEffect(() => { - if (filteredData[0]) { - setFocused(getId(filteredData[0])); - } - }, [filteredData, getId, setFocused]); - return ( -
- - - - - - - -
- ); -} diff --git a/packages/components/src/auto-complete/index.ts b/packages/components/src/auto-complete/index.ts deleted file mode 100644 index 4f791b74..00000000 --- a/packages/components/src/auto-complete/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './auto-complete'; diff --git a/packages/components/src/board-index.ts b/packages/components/src/board-index.ts index 26bcfc6f..e185c956 100644 --- a/packages/components/src/board-index.ts +++ b/packages/components/src/board-index.ts @@ -5,7 +5,6 @@ * do no edit manually */ import area from './area/boards/area.board'; -import auto_complete from './auto-complete/auto-complete.board'; import button from './button/boards/button.board'; import button_with_icon from './button/boards/button-with-icon.board'; import button_with_icons from './button/boards/button-with-icons.board'; @@ -41,7 +40,6 @@ import with_header from './scroll-list/boards/with-header.board'; export default [ area, - auto_complete, button, button_with_icon, button_with_icons, diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts index 67bfc813..c2a39a79 100644 --- a/packages/components/src/index.ts +++ b/packages/components/src/index.ts @@ -1,5 +1,4 @@ export * from './area'; -export * from './auto-complete'; export * from './button'; export * from './common'; export * from './data-grid'; diff --git a/packages/components/src/themes/white.st.css b/packages/components/src/themes/white.st.css index 01358967..dbf40f52 100644 --- a/packages/components/src/themes/white.st.css +++ b/packages/components/src/themes/white.st.css @@ -5,7 +5,6 @@ @st-import [cancel, emphasis] from "../button/variants.st.css"; @st-import Area from "../area/area.st.css"; @st-import [floating] from "../area/variants.st.css"; -@st-import [popover, scrollListRoot] from "../auto-complete/auto-complete.st.css"; @st-import ScrollList from "../scroll-list/scroll-list.st.css"; @st-import InputWithClear from "../input-with-clear/input-with-clear.st.css"; @st-import [primary-2, primary-3, primary-4, primary-7, reference-1, notification-warning-1, primary-6, primary-0, primary-5] from "./colors.st.css"; @@ -84,19 +83,8 @@ border-radius: 3px; } - .popover { - padding-left: 4px; - padding-right: 4px; - padding-bottom: 4px; - - } - .InputWithClear::clear { -st-mixin: small; } - .scrollListRoot { - max-height: 30vh; - - } } From 4b6b91c2633e0c8f6deb6c4d4941e990cd8e73bc Mon Sep 17 00:00:00 2001 From: Ido Rosenthal Date: Sun, 8 Dec 2024 22:33:40 +0200 Subject: [PATCH 2/2] chore: remove zeejs dependency --- package-lock.json | 48 +------------------ packages/components/package.json | 1 - .../components/src/board-plugins/index.ts | 1 - .../src/board-plugins/zee-root-plugin.tsx | 14 ------ 4 files changed, 2 insertions(+), 62 deletions(-) delete mode 100644 packages/components/src/board-plugins/zee-root-plugin.tsx diff --git a/package-lock.json b/package-lock.json index 5e669554..a9c29e6b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1333,45 +1333,6 @@ "node": ">=16" } }, - "node_modules/@zeejs/browser": { - "version": "0.3.1", - "resolved": "https://registry.npmjs.org/@zeejs/browser/-/browser-0.3.1.tgz", - "integrity": "sha512-mAW+6MM6desg45GEIFcTySxzUDdtvbkSI1KSHAoqsLMIH5b42xqzz8NNXyRleR9CsDxd+YAUUyKEhY6HTf2u6A==", - "license": "MIT", - "dependencies": { - "@zeejs/core": "^0.3.1", - "tabbable": "^5.2.1" - }, - "engines": { - "node": ">=10" - } - }, - "node_modules/@zeejs/core": { - "version": "0.3.1", - "resolved": "https://registry.npmjs.org/@zeejs/core/-/core-0.3.1.tgz", - "integrity": "sha512-Yeeqyhe+g8ISbxxW80eUMDeX2NyRlrhissjALaLU9OD86iVnwXN3kbWvBq2B1L56tUUQLESMDC878Y/1euhQVQ==", - "license": "MIT", - "engines": { - "node": ">=10" - } - }, - "node_modules/@zeejs/react": { - "version": "0.3.1", - "resolved": "https://registry.npmjs.org/@zeejs/react/-/react-0.3.1.tgz", - "integrity": "sha512-1Jv/FsUOa0n6dBjZRodwPYZBx/X9KVozrdgRP0hgnmmIjasKxqdIwN2wKyzEKGJiiXorXKGtDkWStWKkHoSzaw==", - "license": "MIT", - "dependencies": { - "@zeejs/browser": "^0.3.1", - "@zeejs/core": "^0.3.1" - }, - "engines": { - "node": ">=10" - }, - "peerDependencies": { - "react": ">=16", - "react-dom": ">=16" - } - }, "node_modules/abbrev": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-2.0.0.tgz", @@ -5836,6 +5797,7 @@ "version": "18.3.1", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz", "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==", + "dev": true, "license": "MIT", "dependencies": { "loose-envify": "^1.1.0", @@ -6068,6 +6030,7 @@ "version": "0.23.2", "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz", "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==", + "dev": true, "license": "MIT", "dependencies": { "loose-envify": "^1.1.0" @@ -6536,12 +6499,6 @@ "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/tabbable": { - "version": "5.3.3", - "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-5.3.3.tgz", - "integrity": "sha512-QD9qKY3StfbZqWOPLp0++pOrAVb/HbUi5xCc8cUo4XjP19808oaMiDzn0leBY5mCespIBM0CIZePzZjgzR83kA==", - "license": "MIT" - }, "node_modules/to-regex-range": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", @@ -7200,7 +7157,6 @@ "version": "1.3.8", "license": "MIT", "dependencies": { - "@zeejs/react": "^0.3.1", "scroll-into-view-if-needed": "^3.1.0" }, "peerDependencies": { diff --git a/packages/components/package.json b/packages/components/package.json index be01abbf..d099ec33 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -10,7 +10,6 @@ "react": ">=17" }, "dependencies": { - "@zeejs/react": "^0.3.1", "scroll-into-view-if-needed": "^3.1.0" }, "files": [ diff --git a/packages/components/src/board-plugins/index.ts b/packages/components/src/board-plugins/index.ts index 2a2ad482..caac8fd1 100644 --- a/packages/components/src/board-plugins/index.ts +++ b/packages/components/src/board-plugins/index.ts @@ -1,3 +1,2 @@ export * from './scenario-plugin/scenario-plugin'; export * from './project-themes-plugin'; -export * from './zee-root-plugin'; diff --git a/packages/components/src/board-plugins/zee-root-plugin.tsx b/packages/components/src/board-plugins/zee-root-plugin.tsx deleted file mode 100644 index 24c24c89..00000000 --- a/packages/components/src/board-plugins/zee-root-plugin.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import { createPlugin } from '@wixc3/board-core'; -import type { IReactBoard } from '@wixc3/react-board'; -import { Root } from '@zeejs/react'; -import React from 'react'; - -export const zeeRootPlugin = createPlugin()( - 'zeeRoot', - {}, - { - wrapRender: (_1, _2, el) => { - return {el}; - }, - } -).use({});