Skip to content

Commit 1955a46

Browse files
author
Administrator
committed
typings
1 parent 65d8be2 commit 1955a46

File tree

8 files changed

+542
-114
lines changed

8 files changed

+542
-114
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+
};

‎.storybook/preview.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,7 @@
5050
*
5151
* For example:
5252
*
53+
*
5354
* export const globalTypes = {
5455
* theme: {
5556
* name: 'Theme',

‎package.json‎

Lines changed: 14 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
{
2-
"name": "react-component-library",
2+
"name": "react-c4b-ui",
33
"version": "1.0.0",
44
"main": "build/index.js",
55
"module": "build/index.esm.js",
66
"files": [
77
"build"
88
],
99
"types": "build/index.d.ts",
10-
"description": "A skeleton to create your own React component library using Rollup, TypeScript, Sass and Storybook",
10+
"description": "React Component Library",
1111
"scripts": {
1212
"build": "rollup -c",
1313
"storybook": "start-storybook -p 6006",
@@ -17,23 +17,25 @@
1717
},
1818
"repository": {
1919
"type": "git",
20-
"url": "git+https://github.com/HarveyD/react-component-library.git"
20+
"url": "git+https://github.com/code4bones/react-c4b-ui.git"
2121
},
2222
"keywords": [
2323
"React",
2424
"Component",
2525
"Library",
2626
"Rollup",
2727
"Typescript",
28-
"Sass",
29-
"Storybook"
28+
"Less",
29+
"Storybook",
30+
"TreeMenu",
31+
"Sidebar Navigation"
3032
],
31-
"author": "Harvey Delaney",
33+
"author": "code4bones",
3234
"license": "MIT",
3335
"bugs": {
34-
"url": "https://github.com/HarveyD/react-component-library/issues"
36+
"url": "https://github.com/code4bones/react-c4b-ui/issues"
3537
},
36-
"homepage": "https://github.com/HarveyD/react-component-library#readme",
38+
"homepage": "https://github.com/code4bones/react-c4b-ui/wiki",
3739
"peerDependencies": {
3840
"react": ">=16.8.0",
3941
"react-dom": ">=16.8.0"
@@ -48,11 +50,15 @@
4850
"@types/node": "^16.18.2",
4951
"@types/react": "^18.0.24",
5052
"@types/react-dom": "^18.0.8",
53+
"@typescript-eslint/eslint-plugin": "^5.41.0",
54+
"@typescript-eslint/parser": "^5.41.0",
5155
"babel-loader": "^8.2.2",
5256
"babel-preset-react-app": "^10.0.0",
5357
"clsx": "^1.2.1",
5458
"colors": "^1.4.0",
5559
"css-loader": "^6.7.1",
60+
"eslint": "^8.26.0",
61+
"eslint-plugin-react": "^7.31.10",
5662
"identity-obj-proxy": "^3.0.0",
5763
"less": "^4.1.3",
5864
"less-loader": "^11.1.0",

‎src/TreeMenu/TreeMenu.stories.tsx‎

Lines changed: 25 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,11 @@
11
// Generated with util/create-component.js
2-
import React,{useEffect,createRef} from "react";
3-
import TreeMenu,{TreeMenuItem,TreeMenuActions} from "./TreeMenu";
2+
import React,{ useEffect,createRef } from "react";
3+
import TreeMenu,{ TreeMenuItem,TreeMenuActions } from "./TreeMenu";
44

5-
export default {
6-
title: "TreeMenu"
7-
};
85

96
const ITEMS : TreeMenuItem[] = [
10-
{ id:"main",title:"Main Menu",
7+
{
8+
id:"main",title:"Main Menu",
119
childs:[
1210
{
1311
id:"home",
@@ -39,7 +37,7 @@ const ITEMS : TreeMenuItem[] = [
3937
{ id:"deep",title:"DEEPER",
4038

4139
childs:[
42-
{ id:"LAST",title:"HELLO"}
40+
{ id:"LAST",title:"HELLO" }
4341
] }
4442
]
4543
},
@@ -94,6 +92,11 @@ const ITEMS : TreeMenuItem[] = [
9492
];
9593

9694

95+
export default {
96+
title: "TreeMenu"
97+
};
98+
99+
97100

98101
const Marker = () => {
99102

@@ -137,21 +140,21 @@ export const WithBar = () => {
137140
console.log(...args);
138141
};
139142

140-
return (
141-
<div style={{maxWidth:400}}>
142-
<TreeMenu
143-
// initialCollapsed
144-
initialSelected="LAST"
145-
ref={ref}
146-
items={ITEMS}
147-
// renderGroupIcon={<Icon icon="caret-right" />}
148-
renderBadge={renderMarker}
149-
onClick={onClick}
150-
onToggle={onToggle}
151-
/>
152-
</div>
153-
)
154-
}
143+
return (
144+
<div style={{ maxWidth:400 }}>
145+
<TreeMenu
146+
// initialCollapsed
147+
initialSelected="LAST"
148+
ref={ref}
149+
items={ITEMS}
150+
// renderGroupIcon={<Icon icon="caret-right" />}
151+
renderBadge={renderMarker}
152+
onClick={onClick}
153+
onToggle={onToggle}
154+
/>
155+
</div>
156+
);
157+
};
155158

156159
export const WithBaz = WithBar;
157160

‎src/TreeMenu/TreeMenu.tsx‎

Lines changed: 3 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,57 +1,10 @@
11
/* eslint-disable no-mixed-spaces-and-tabs */
2-
import React, { useCallback, useEffect, useMemo, useState,createContext, useRef, useImperativeHandle } from "react";
2+
import React, { useEffect, useMemo, useState, useImperativeHandle } from "react";
33
import clsx from "clsx";
4+
import { TreeMenuItem,TreeMenuProps,ItemProps,ItemRenderProps,TreeMenuItemType } from "./TreeMenu.types";
45
import "./TreeMenu.less";
5-
// import { Icon } from "@blueprintjs/core";
6-
7-
type ItemProps = {
8-
level?:number;
9-
title:string;
10-
info?:string;
11-
route?:string;
12-
titleClass?:string;
13-
infoClass?:string;
14-
style?:React.CSSProperties;
15-
infoStyle?:React.CSSProperties;
16-
classes?:Set<string>;
17-
disabled?:boolean;
18-
id:string;
19-
collapsed?:boolean;
20-
unselectable?:boolean;
21-
hasChilds?:boolean;
22-
icon?:React.ReactElement;
23-
onClick?:(item:ItemProps) => void;
24-
}
25-
26-
type MenuItem = Omit<ItemProps,"level" | "classes" | "hasChilds" | "onClick">;
27-
28-
export type TreeMenuItem = {
29-
childs?:TreeMenuItem[];
30-
} & MenuItem;
31-
32-
type TreeMenuItemType = {
33-
parent?:TreeMenuItemType;
34-
childs?:TreeMenuItemType[];
35-
} & ItemProps;
36-
37-
type RenderType = (id:string) => React.ReactElement | undefined | null;
38-
39-
type TreeMenuProps = {
40-
items:TreeMenuItem[];
41-
initialCollapsed?:boolean;
42-
initialSelected?:string;
43-
renderBadge?:RenderType;
44-
renderGroupIcon?:RenderType | React.ReactElement | null;
45-
onClick?:(id:string) => void;
46-
onToggle?:(id?:string,collapsed?:boolean) => void;
47-
// renderItem?:(item:TreeMenuItem) => React.ReactElement;
48-
}
49-
50-
type ItemRenderProps = {
51-
renderBadge?:TreeMenuProps["renderBadge"];
52-
renderGroup?:TreeMenuProps["renderGroupIcon"];
53-
} & ItemProps;
546

7+
export { TreeMenuItem };
558

569
const Item : React.FC<ItemRenderProps> = (props) => {
5710
const {

‎src/TreeMenu/TreeMenu.types.ts‎

Lines changed: 45 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,48 @@
11
// Generated with util/create-component.js
2+
3+
export type ItemProps = {
4+
level?:number;
5+
title:string;
6+
info?:string;
7+
route?:string;
8+
titleClass?:string;
9+
infoClass?:string;
10+
style?:React.CSSProperties;
11+
infoStyle?:React.CSSProperties;
12+
classes?:Set<string>;
13+
disabled?:boolean;
14+
id:string;
15+
collapsed?:boolean;
16+
unselectable?:boolean;
17+
hasChilds?:boolean;
18+
icon?:React.ReactElement;
19+
onClick?:(item:ItemProps) => void;
20+
}
21+
22+
export type MenuItem = Omit<ItemProps,"level" | "classes" | "hasChilds" | "onClick">;
23+
24+
export type TreeMenuItem = {
25+
childs?:TreeMenuItem[];
26+
} & MenuItem;
27+
28+
export type TreeMenuItemType = {
29+
parent?:TreeMenuItemType;
30+
childs?:TreeMenuItemType[];
31+
} & ItemProps;
32+
33+
export type RenderType = (id:string) => React.ReactElement | undefined | null;
34+
35+
export type ItemRenderProps = {
36+
renderBadge?:TreeMenuProps["renderBadge"];
37+
renderGroup?:TreeMenuProps["renderGroupIcon"];
38+
} & ItemProps;
39+
240
export interface TreeMenuProps {
3-
foo: string;
41+
items:TreeMenuItem[];
42+
initialCollapsed?:boolean;
43+
initialSelected?:string;
44+
renderBadge?:RenderType;
45+
renderGroupIcon?:RenderType | React.ReactElement | null;
46+
onClick?:(id:string) => void;
47+
onToggle?:(id?:string,collapsed?:boolean) => void;
448
}

‎src/typography.less‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,13 @@
11
@font-family: "Avenir Next", Helvetica, Arial, sans-serif;
22

3-
/*
4-
@mixin font-defaults {
5-
font-family: $font-family;
3+
4+
.font-defaults() {
5+
font-family: @font-family;
66
}
77

8-
@mixin heading {
9-
@include font-defaults;
8+
.heading {
9+
.font-defaults();
1010

1111
font-size: 40px;
1212
font-weight: bold;
1313
}
14-
*/

0 commit comments

Comments
 (0)