Skip to content

Commit 180095b

Browse files
author
Administrator
committed
first commit
0 parents  commit 180095b

17 files changed

+1187
-0
lines changed

‎.eslintrc.js‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
module.exports = {
2+
"env": {
3+
"browser": true,
4+
"es2021": true
5+
},
6+
"extends": [
7+
"eslint:recommended",
8+
"plugin:react/recommended",
9+
"plugin:@typescript-eslint/recommended"
10+
],
11+
"overrides": [
12+
],
13+
"parser": "@typescript-eslint/parser",
14+
"parserOptions": {
15+
"ecmaVersion": "latest",
16+
"sourceType": "module"
17+
},
18+
"plugins": [
19+
"react",
20+
"@typescript-eslint"
21+
],
22+
"rules": {
23+
"indent": [
24+
"error",
25+
"tab"
26+
],
27+
"linebreak-style": [
28+
"error",
29+
"unix"
30+
],
31+
"quotes": [
32+
"error",
33+
"double"
34+
],
35+
"semi": [
36+
"error",
37+
"always"
38+
],
39+
"object-curly-spacing": ["error", "always"],
40+
},
41+
};

‎.gitignore‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
.npmrc
2+
node_modules/
3+
# build/
4+
storybook-static/
5+
yarn.lock

‎.storybook/main.js‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
const path = require("path");
2+
3+
module.exports = {
4+
stories: ["../src/**/*.stories.tsx"],
5+
// Add any Storybook addons you want here: https://storybook.js.org/addons/
6+
addons: ['@storybook/addon-controls','@storybook/addon-essentials','storybook-dark-mode'],
7+
webpackFinal: async config => {
8+
config.module.rules.push({
9+
test: /\.(less)$/,
10+
use: ["style-loader", "css-loader", "less-loader"],
11+
include: path.resolve(__dirname, "../")
12+
});
13+
config.module.rules.push({
14+
test: /\.(ts|tsx)$/,
15+
loader: require.resolve("babel-loader"),
16+
options: {
17+
presets: [["react-app", {
18+
flow: false,
19+
typescript: true
20+
}]]
21+
}
22+
});
23+
config.resolve.extensions.push(".ts", ".tsx", ".less");
24+
return config;
25+
},
26+
core: {
27+
builder: "@storybook/builder-webpack5"
28+
}
29+
};

‎.storybook/preview.js‎

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
/**
2+
* Read https://storybook.js.org/docs/react/configure/overview#configure-story-rendering
3+
* for more information about the purpose of this file.
4+
*
5+
* Use preview.js for global code (such as CSS imports or JavaScript mocks)
6+
* that applies to all stories. For example, `import thirdPartyCss.css`.
7+
*
8+
* This file can have three exports:
9+
* - decorators - an array of global decorators
10+
* - parameters - an object of global parameters
11+
* - globalTypes - definition of globalTypes
12+
*/
13+
14+
/**
15+
* Decorators
16+
*
17+
* A decorator is a way to wrap a story in extra “rendering” functionality.
18+
*
19+
* Example:
20+
*
21+
* import React from 'react';
22+
* export const decorators = [(Story) => <div style={{ margin: '3em' }}><Story/></div>];
23+
*
24+
* Each story throughout the library will be wrapped in a div with a margin of 3
25+
*/
26+
27+
export const decorators = [(Story) => <div style={{ overflow:"hidden" }}><Story/></div>];
28+
29+
/**
30+
* Parameters
31+
*
32+
* Most Storybook addons are configured via a parameter-based API.
33+
* You can set global parameters in this file
34+
*
35+
* export const parameters = {
36+
* backgrounds: {
37+
* values: [
38+
* { name: 'red', value: '#f00' },
39+
* { name: 'green', value: '#0f0' },
40+
* ],
41+
* },
42+
* };
43+
*
44+
* With backgrounds, you configure the list of backgrounds that every story can render in.
45+
*/
46+
47+
/**
48+
* Global Types
49+
*
50+
* Global Types allow you to add your own toolbars by creating
51+
* globalTypes with a toolbar annotation:
52+
*
53+
* For example:
54+
*
55+
*
56+
* export const globalTypes = {
57+
* theme: {
58+
* name: 'Theme',
59+
* description: 'Global theme for components',
60+
* defaultValue: 'light',
61+
* toolbar: {
62+
* icon: 'circlehollow',
63+
* // array of plain string values or MenuItem shape
64+
* items: ['light', 'dark'],
65+
* },
66+
* },
67+
* };
68+
*
69+
* Will add a new dropdown in your toolbar with options light and dark.
70+
**/
71+
72+
/*
73+
export const globalTypes = {
74+
theme: {
75+
name: 'Theme',
76+
description: 'Global theme for components',
77+
defaultValue: 'light',
78+
toolbar: {
79+
icon: 'circlehollow',
80+
// array of plain string values or MenuItem shape
81+
items: ['light', 'dark'],
82+
},
83+
},
84+
};
85+
*/
86+
87+
88+
export const parameters = {
89+
darkMode: {
90+
// Set the initial theme
91+
// current: 'light',
92+
darkClass:"dark",
93+
lightClass:"light",
94+
classTarget:'html',
95+
stylePreview:true,
96+
},
97+
};
98+

‎LICENSE‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2020 Harvey Delaney
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎README.md‎

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
### TreeMenu / PropertyGrid
2+
3+
![npm](https://img.shields.io/npm/v/@code4bones/react-tree-menu-property-grid?label=latest) ![npm](https://img.shields.io/npm/dt/@code4bones/react-tree-menu-property-grid?style=flat-square&label=installs)
4+
5+
### System default / Custom theme
6+
7+
![sample](https://github.com/code4bones/react-c4b-ui/blob/master/img/theme.png?raw=true "sample")
8+
9+
|feature|sample|
10+
|-------|------|
11+
|![cap](https://github.com/code4bones/react-tree-menu-property-grid/blob/master/img/controls.gif?raw=true)|![cap](https://github.com/code4bones/react-tree-menu-property-grid/blob/master/img/reveal.gif?raw=true) |
12+
![cap](https://github.com/code4bones/react-tree-menu-property-grid/blob/master/img/folders.gif?raw=true)|![cap](https://github.com/code4bones/react-tree-menu-property-grid/blob/master/img/group-right.gif?raw=true)|
13+
14+
clone, samples available via `yarn storybook`
15+
16+
#### Brief
17+
18+
yarn add `@code4bones/react-tree-menu-property-grid`
19+
20+
```tsx
21+
22+
import {TreeMenu, TreeMenuActions,TreeMenuItem } from "@code4bones/react-tree-menu-property-grid";
23+
import "@code4bones/react-tree-menu-property-grid/build/styles.css";
24+
25+
const ITEMS : TreeMenuItem[] = [{
26+
id:"item1",
27+
title:"Item 1",
28+
// other TreeMenuItem's props
29+
childs:[{
30+
id:"sub",
31+
title:"Subitem 1",
32+
}]
33+
}];
34+
35+
// if your need to use exponsed actions
36+
const ref = createRef<TreeMenuActions>();
37+
38+
<TreeMenu
39+
ref={ref}
40+
items={ITEMS}
41+
onClick={onClick}
42+
/>
43+
44+
```
45+
46+
### Properties
47+
48+
type `RenderFn` = (item:MenuItem) => React.ReactElement | undefined | null;
49+
type `RenderType` = `RenderFn` | React.ReactElement;
50+
51+
52+
| Propery name | Description | Signature
53+
| ------------- | ------------------------------ | ---- |
54+
| `treeID` | tree id | string |
55+
| `propertyGrid` | property grid mode | boolean |
56+
| `items[]` | tree menu items array | `TreeMenuItem`[] |
57+
| `ref` | handle to TreeMenu methods | `TreeMenuActions` |
58+
| `initialCollapsed` | initial tree state | boolean |
59+
| `initialSelected` | initial selected item | item's `id` : string|
60+
| `theme` | theme override class name | `dark`, `light`, custom name |
61+
| `classPrefix` | container global prefix | string |
62+
| `enableRotate` | Rotate collapse / expand icon| boolean |
63+
| `infoStyle` | global custom style | boolean |
64+
| `titleStyle` | global custom style | boolean |
65+
| `infoReveal` | global info display modes | "always" | "vertical" | "horizontal" |
66+
| `badgeVisible` | display badge | boolean |
67+
| `groupIconLeft` | group icon position | boolean |
68+
| `onClick` | item click handler | onClick?:(item:TreeMenuItem) => void|
69+
| `onToggle` | collapse / expand | onToggle?:(id?:string,collapsed?:boolean) => void;|
70+
| `renderBadge` | item click handler | `RenderType` |
71+
| `renderIcon` | Left side element of item | `RenderType` |
72+
| `renderGroupState` | Group indicator | `RenderType` |
73+
74+
75+
`TreeMenuItem`
76+
77+
```tsx
78+
id:string;
79+
title:string | React.ReactElement;
80+
info?:string | React.ReactElement;
81+
badge?:string | React.ReactElement;
82+
control?:string | JSX.Element;
83+
infoReveal?:InfoReveal;
84+
icon?:React.ReactElement;
85+
badge?:string | React.ReactElement;
86+
disabled?:boolean;
87+
unselectable?:boolean;
88+
titleClass?:string;
89+
infoClass?:string;
90+
style?:React.CSSProperties;
91+
titleStyle?:React.CSSProperties;
92+
infoStyle?:React.CSSProperties;
93+
```
94+
95+
`TreeMenuActions` ( use `ref` )
96+
```
97+
enable:(id:string,disable?:boolean) => void;
98+
getItem:(id:string) => TreeMenuItem | null;
99+
collapse:(id:string,collapsed?:boolean) => void;
100+
select:(id:string) => void;
101+
invalidate:() => void;
102+
rebuild:(items:TreeMenuItem[]) => void;
103+
```
104+
105+
### Sample
106+
107+
Sample available via storybook `yarn storybook`

‎package.json‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
{
2+
"name": "@code4bones/react-cascade-forms",
3+
"version": "1.0.2",
4+
"main": "build/index.js",
5+
"module": "build/index.esm.js",
6+
"files": [
7+
"build"
8+
],
9+
"types": "build/index.d.ts",
10+
"description": "Tree Menu with Property Grid",
11+
"scripts": {
12+
"build": "rollup -c",
13+
"storybook": "start-storybook -p 6006",
14+
"storybook:export": "build-storybook",
15+
"prepublishOnly": "npm run build"
16+
},
17+
"publishConfig": {
18+
"registry": "https://npm.pkg.github.com"
19+
},
20+
"repository": {
21+
"type": "git",
22+
"url": "git+https://github.com/code4bones/react-cascade-forms.git"
23+
},
24+
"keywords": [
25+
"Tree",
26+
"Menu",
27+
"TreeMenu",
28+
"Sidebar Navigation",
29+
"Property Grid",
30+
"React",
31+
"Typescript",
32+
"Less",
33+
"Storybook"
34+
],
35+
"author": "code4bones",
36+
"license": "MIT",
37+
"bugs": {
38+
"url": "https://github.com/code4bones/react-cascade-forms/issues"
39+
},
40+
"homepage": "https://github.com/code4bones/react-cascade-forms/wiki",
41+
"peerDependencies": {
42+
"react": ">=16.8.0",
43+
"react-dom": ">=16.8.0"
44+
},
45+
"devDependencies": {
46+
"@babel/core": "^7.15.0",
47+
"@rollup/plugin-commonjs": "^17.1.0",
48+
"@rollup/plugin-image": "^3.0.1",
49+
"@rollup/plugin-node-resolve": "^11.2.1",
50+
"@storybook/addon-controls": "^6.5.13",
51+
"@storybook/addon-essentials": "^6.5.13",
52+
"@storybook/addons": "^6.5.13",
53+
"@storybook/builder-webpack5": "^6.5.13",
54+
"@storybook/manager-webpack5": "^6.5.13",
55+
"@storybook/react": "^6.5.13",
56+
"@types/node": "^16.18.2",
57+
"@types/react": "^18.0.24",
58+
"@types/react-dom": "^18.0.8",
59+
"@typescript-eslint/eslint-plugin": "^5.41.0",
60+
"@typescript-eslint/parser": "^5.41.0",
61+
"babel-loader": "^8.2.2",
62+
"babel-preset-react-app": "^10.0.0",
63+
"clsx": "^1.2.1",
64+
"css-loader": "^6.7.1",
65+
"eslint": "^8.26.0",
66+
"eslint-plugin-react": "^7.31.10",
67+
"identity-obj-proxy": "^3.0.0",
68+
"less": "^4.1.3",
69+
"less-loader": "^11.1.0",
70+
"react": "^17.0.2",
71+
"react-dom": "^17.0.2",
72+
"react-icons": "^4.6.0",
73+
"rollup": "^2.56.3",
74+
"rollup-plugin-copy": "^3.4.0",
75+
"rollup-plugin-less": "^1.1.3",
76+
"rollup-plugin-peer-deps-external": "^2.2.4",
77+
"rollup-plugin-typescript2": "^0.29.0",
78+
"storybook-dark-mode": "^1.1.2",
79+
"style-loader": "^3.3.1",
80+
"typescript": "^4.4.2",
81+
"webpack": "^5.74.0"
82+
},
83+
"dependencies": {
84+
"@blueprintjs/core": "^4.13.0",
85+
"fastest-validator": "^1.16.0"
86+
}
87+
}

0 commit comments

Comments
 (0)