frame.select 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +35 -0
- package/package.json +42 -0
package/README.md
ADDED
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
### frame.select
|
|
2
|
+
|
|
3
|
+
## Overview
|
|
4
|
+
|
|
5
|
+
`frame.select` is a lightweight and flexible framework designed to display a table which also has a filter functionality. It includes the UI component __ItemList__ which renders items based on their attributes. These attributes can be filtered.
|
|
6
|
+
|
|
7
|
+
## Usage
|
|
8
|
+
|
|
9
|
+
```javascript
|
|
10
|
+
import React from 'react';
|
|
11
|
+
import { ItemList } from 'frame.select';
|
|
12
|
+
|
|
13
|
+
const items = [
|
|
14
|
+
{ id: 1, name: 'Apple', category: 'Fruit' },
|
|
15
|
+
{ id: 2, name: 'Carrot', category: 'Vegetable' },
|
|
16
|
+
{ id: 3, name: 'Banana', category: 'Fruit' },
|
|
17
|
+
{ id: 4, name: 'Broccoli', category: 'Vegetable' },
|
|
18
|
+
];
|
|
19
|
+
|
|
20
|
+
const filterFunction = (item, query) => {
|
|
21
|
+
return item.name.toLowerCase().includes(query.toLowerCase());
|
|
22
|
+
};
|
|
23
|
+
|
|
24
|
+
const App = () => {
|
|
25
|
+
return (
|
|
26
|
+
<div>
|
|
27
|
+
<h1>Item List</h1>
|
|
28
|
+
<ItemList items={items} filter={filterFunction} />
|
|
29
|
+
</div>
|
|
30
|
+
);
|
|
31
|
+
};
|
|
32
|
+
|
|
33
|
+
export default App;
|
|
34
|
+
```
|
|
35
|
+
|
package/package.json
ADDED
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "frame.select",
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"description": "A React component for selecting items from a list with a search bar.",
|
|
5
|
+
"license": "MIT",
|
|
6
|
+
"type": "module",
|
|
7
|
+
"main": "dist/index.js",
|
|
8
|
+
"types": "dist/index.d.ts",
|
|
9
|
+
"files": [
|
|
10
|
+
"dist/",
|
|
11
|
+
"README.md"
|
|
12
|
+
],
|
|
13
|
+
"scripts": {
|
|
14
|
+
"dev": "vite",
|
|
15
|
+
"build": "tsc -b",
|
|
16
|
+
"build-and-vite": "tsc -b && vite build",
|
|
17
|
+
"lint": "eslint .",
|
|
18
|
+
"preview": "vite preview"
|
|
19
|
+
},
|
|
20
|
+
"dependencies": {
|
|
21
|
+
"@emotion/react": "^11.14.0",
|
|
22
|
+
"@emotion/styled": "^11.14.0",
|
|
23
|
+
"@mui/icons-material": "^7.0.0",
|
|
24
|
+
"@mui/material": "^7.0.0",
|
|
25
|
+
"@tanstack/react-table": "^8.21.2",
|
|
26
|
+
"react": "^19.0.0",
|
|
27
|
+
"react-dom": "^19.0.0"
|
|
28
|
+
},
|
|
29
|
+
"devDependencies": {
|
|
30
|
+
"@eslint/js": "^9.21.0",
|
|
31
|
+
"@types/react": "^19.0.10",
|
|
32
|
+
"@types/react-dom": "^19.1.2",
|
|
33
|
+
"@vitejs/plugin-react": "^4.3.4",
|
|
34
|
+
"eslint": "^9.21.0",
|
|
35
|
+
"eslint-plugin-react-hooks": "^5.1.0",
|
|
36
|
+
"eslint-plugin-react-refresh": "^0.4.19",
|
|
37
|
+
"globals": "^16.0.0",
|
|
38
|
+
"typescript": "~5.8.3",
|
|
39
|
+
"typescript-eslint": "^8.24.1",
|
|
40
|
+
"vite": "^6.2.0"
|
|
41
|
+
}
|
|
42
|
+
}
|