{"id":19555476,"url":"https://github.com/maxzz/dropzone","last_synced_at":"2025-06-26T06:34:19.525Z","repository":{"id":49744170,"uuid":"407322751","full_name":"maxzz/dropzone","owner":"maxzz","description":"Experimenting with data-driven and self-learning UI (DDUI and SLUI)","archived":false,"fork":false,"pushed_at":"2025-01-19T02:43:18.000Z","size":36566,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-19T03:24:41.086Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://maxzz.github.io/dropzone","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/maxzz.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-09-16T21:42:23.000Z","updated_at":"2025-01-19T02:43:20.000Z","dependencies_parsed_at":"2024-12-17T00:28:06.807Z","dependency_job_id":"eb9e1d8a-7343-49e8-974a-35dcda044311","html_url":"https://github.com/maxzz/dropzone","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maxzz%2Fdropzone","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maxzz%2Fdropzone/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maxzz%2Fdropzone/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maxzz%2Fdropzone/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/maxzz","download_url":"https://codeload.github.com/maxzz/dropzone/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240814837,"owners_count":19861955,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-11T04:34:05.676Z","updated_at":"2025-02-26T07:42:42.636Z","avatar_url":"https://github.com/maxzz.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"#### About\r\n\r\nExperimenting with data-driven and self-learning UI (DDUI and SLUI).\r\n\r\n\u003c!-- ![](src/assets/previews/2022-08-14_16-24-05,highlight2.png) --\u003e\r\n\r\n![](src/assets/previews/2022-08-31_16-51-02.png)\r\n![](src/assets/previews/2022-08-31_16-51-03.png)\r\n![](src/assets/previews/2022-08-31_16-51-04.png)\r\n![](src/assets/previews/2022-08-31_16-51-05.png)\r\n![](src/assets/previews/2022-08-31_16-51-06.png)\r\n![](src/assets/previews/2022-08-31_16-51-07.png)\r\n\r\n\r\n[**GitHub Dependencies Graph**](https://github.com/maxzz/dropzone/network/dependencies)\r\n\r\n\u003c!--\r\n[**Visualization** of npm package usage](https://octo-repo-visualization.vercel.app/?repo=maxzz%2Fdropzone)\r\n* [Explore for yourself](https://githubnext.com/projects/repo-visualization#explore-for-yourself) (search 'maxzz/dropzone')\r\n* [tw](https://twitter.com/GitHubNext/status/1423315150413705223)\r\n* [API repo](https://api.github.com/repos/maxzz/dropzone)\r\n* [API followers](https://api.github.com/users/maxzz/followers)\r\n* [GH advanced seach: 'create-diagram extension:yml'](https://github.com/search?q=create-diagram+extension%3Ayml\u0026type=Code\u0026ref=advsearch\u0026l=\u0026l=)\r\n--\u003e\r\n\r\n#### Creadits, links, references\r\n\r\n- [**React hooks: react-use**](https://github.com/streamich/react-use)\r\n    \u003c!-- \u003ca href=\"http://streamich.github.io/react-use\"\u003e\u003cimg src=\"https://img.shields.io/badge/demos-🚀-green.svg\" alt=\"demos\" /\u003e\u003c/a\u003e --\u003e\r\n  - [`useCss hook`](https://github.com/streamich/react-use/blob/master/docs/useCss.md)\r\n\r\n\u003c!-- \u003ca href=\"http://streamich.github.io/react-use\"\u003e\u003cimg src=\"https://img.shields.io/badge/demos-🚀-yellow.svg\" alt=\"demos\" /\u003e\u003c/a\u003e --\u003e\r\n\u003c!-- [img-demo]: https://img.shields.io/badge/demo-%20%20%20%F0%9F%9A%80-green.svg --\u003e\r\n\r\n\u003c!-- #### Live Demo [![][img-demo]](https://maxzz.github.io/dropzone) --\u003e\r\n#### Live Demo [🏹](https://maxzz.github.io/dropzone)\r\n\r\n\u003c!--\r\nTested project and now moved into 'not-used-now' src/components/UI/nun/nun.zip:\r\n\r\n* from-radix-ui.tsx, UIDropdownMenuOrg.tsx - original example and component from radix-ui website\r\n\r\n* UIDropdownMenuLaag.tsx - https://github.com/everweij/react-laag \u003c- Hooks for positioning tooltips \u0026 popovers\r\n\r\n* UIMultilineEdit.tsx - wrapper around DOM multiline edit control\r\n\r\n* UISplitPane.ts, UISplitPane.css - https://github.com/tomkp/react-split-pane \u003c- original split bar wo/ fixes\r\n\r\n* Card/CardMenuOverlays.tsx - https://github.com/react-bootstrap/react-overlays\r\n    Section2_Main.tsx:\r\n        // import { CardMenuOverlays } from './1-files-list/Card/CardMenuOverlays';\r\n        // import { CardMenu } from './1-files-list/Card/CardMenu';\r\n        // import { Panel3_SelectedItems } from './Panel3_SelectedItems/Panel3_SelectedItems';\r\n                {/* \u003cCardMenuOverlays /\u003e */}\r\n                {/* \u003cCardMenu /\u003e */}\r\n                {/* \u003cPanel3_SelectedItems className=\"flex-none\" /\u003e */}\r\n\r\n* https://github.com/wellyshen/react-cool-virtual\r\n\r\n    folder useVirtual and\r\n\r\n    1-files-list.tsx:\r\n        //old: import Card, { CardWRef } from './Card/Card';\r\n        //old: import useVirtual, { Item } from 'react-cool-virtual';\r\n        //import useVirtual from '../../../hooks/useVirtual/useVirtual';\r\n\r\n        /*\r\n        function Panel1_FilesListNew({ className, ...rest }: HTMLAttributes\u003cHTMLElement\u003e) { //TODO: add compact view\r\n            const files = useAtomValue(filteredAtom);\r\n\r\n            //const [len, setLen] = useState(files.length);\r\n\r\n            // useEffect(() =\u003e {\r\n            //     setLen(files.length);\r\n            //  }, [files.length]);\r\n\r\n            const { outerRef, innerRef, items } = useVirtual\u003cHTMLDivElement, HTMLDivElement\u003e({\r\n                // itemCount: len,\r\n                itemCount: files.length,\r\n                //resetScroll: true,\r\n                // itemSize: 141,\r\n                // itemSize: (idx: number) =\u003e {\r\n                //     console.log('idx', idx);\r\n                //     return 141;\r\n                // },\r\n            });\r\n\r\n            //console.log(`items dropped: ${files.length} virtual:`, items);\r\n\r\n            return (\r\n                \u003c\u003e\r\n                    \u003cdiv ref={outerRef} className=\"w-full h-full overflow-auto\"\u003e\r\n                        {/* \u003cdiv ref={innerRef} className=\"relative grid grid-flow-row gap-4 text-sm\"\u003e * /}\r\n                        \u003cdiv ref={innerRef} className=\"text-sm\"\u003e\r\n                            {items.map(({ index, measureRef }) =\u003e {\r\n                                const atom = files[index];\r\n                                //console.log('item atom', atom);\r\n                                if (!atom) {\r\n                                    return;\r\n                                }\r\n\r\n                                return (\r\n                                    //\u003cdiv ref={measureRef} className=\"\"\u003e\r\n                                    \u003cCardWRef ref={measureRef} fileUsAtom={atom} className=\"mb-4\" key={`${atom}`} /\u003e\r\n                                    // \u003cCardWRef fileUsAtom={atom} className=\"mb-4\" key={`${atom}`} /\u003e\r\n                                    //\u003c/div\u003e\r\n                                );\r\n                            })}\r\n                        \u003c/div\u003e\r\n                    \u003c/div\u003e\r\n                \u003c/\u003e\r\n            );\r\n        }\r\n        */\r\n* src/hooks/useClipcoardCopy.ts - https://github.com/feross/clipboard-copy - obsolete\r\n\r\n* \"@reach/router\": \"^1.3.4\", - https://github.com/reach/router - never realy used and now is obsolete\r\n\r\n* \"framer-motion\": \"6.5.1\", - https://github.com/framer/motion - never realy used and so far happy w/ react-spring\r\n\r\n* \"react-merge-refs\": \"2.0.1\", - https://github.com/gregberge/react-merge-refs - so simple that no need to have a separate package\r\n\r\n* \"styled-components\": \"5.3.5\", - https://github.com/styled-components/styled-components - should use instead of @stitches/react, but who cares\r\n  \"@types/styled-components\": \"5.1.26\",\r\n\r\n* from ManiActions.tsx:\r\n        //import { PopoverMenu } from '@ui/nun/UIDropdownMenuLaag';\r\n        //import { CardMenu } from './nun/CardMenu';\r\n\r\n        export function ManiActions({ fileUsAtom }: { fileUsAtom: FileUsAtomType; }) {\r\n            return (... {/* \u003cPopoverMenu /\u003e */} {/* \u003cCardMenu /\u003e */} );\r\n        }\r\n\r\n\r\n* TODO:\r\n        \"react-overlays\": \"5.2.0\",\r\n        \"react-popper\": \"2.3.0\",\r\n        \"react-popper-tooltip\": \"4.4.2\",\r\n\r\n--\u003e\r\n\r\n\u003c!--\r\n\u003cdiv align=\"center\"\u003e\u003ch3\u003eContributors\u003c/h3\u003e\u003c/div\u003e\r\n\u003cbr /\u003e\r\n\u003ca href=\"https://github.com/maxzz/dropzone/graphs/contributors\"\u003e\u003cimg src=\"https://opencollective.com/dropzone/contributors.svg?width=890\u0026button=false\" /\u003e\u003c/a\u003e\r\n--\u003e\r\n\r\n\r\n\r\n\u003cdiv align=\"center\"\u003e\r\n  \u003cbr/\u003e\r\n  \u003ch1\u003e⅚⚗\u003c/h1\u003e\r\n  \u003csup\u003eData-Driven User Interfaces\u003c/sup\u003e\r\n  \u003cbr/\u003e\r\n  \u003cbr/\u003e\r\n  \u003c!-- \u003cpre\u003enpm i \u003ca href=\"https://www.npmjs.com/package/react-use\"\u003ereact-use\u003c/a\u003e\u003c/pre\u003e --\u003e\r\n\u003c/div\u003e\r\n\r\n\u003c!--\r\nsetting.json:\r\n\r\n    \"tailwindCSS.experimental.classRegex\": [\r\n\r\n        \"\\\"([^\\\"]*)\\\"\",\r\n        \"classNames\\\\('([^)]*)\\\\')\",\r\n        \"'([^']*)'\"\r\n    ],\r\n\r\nprobelms with that:\r\n    * abnormal amount of intellisense hints and first is tailwind/CSS text instead of the real help\r\n    * color squares are doubled\r\n\r\nanother version tw(\"classes\") and classNames(\"classes\", \"classes\"):\r\n    * classNames can be multiline\r\n    * need spaces around string content\r\n    * will not work for grid-cols-[minmax(0,1fr)]\r\n\r\n    \"tailwindCSS.experimental.classRegex\": [\r\n        \"tw\\\\(['\\\"`]([^)]*)['\\\"`]\\\\)\",\r\n        \"classNames\\\\(([^)]*)\\\\)\",\r\n    ],\r\n\r\nanother version with ending by ';':\r\n    * will combine until the next operator if ';' is missing;\r\n    * spaces after and before quatas also required, i.e. \" p-2 \"\r\n\r\n    \"tailwindCSS.experimental.classRegex\": [\r\n        \"tw\\\\(['\\\"`]([^)]*)['\\\"`]\\\\)\",\r\n        \"classNames\\\\(([^;]*)\\\\);\",\r\n    ],\r\n\r\n --\u003e","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaxzz%2Fdropzone","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmaxzz%2Fdropzone","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaxzz%2Fdropzone/lists"}