initial 1.0.0

Author: Administrator

.eslintrc.js

@@ -0,0 +1,41 @@
+module.exports = {
+	"env": {
+		"browser": true,
+		"es2021": true
+	},
+	"extends": [
+		"eslint:recommended",
+		"plugin:react/recommended",
+		"plugin:@typescript-eslint/recommended"
+	],
+	"overrides": [
+	],
+	"parser": "@typescript-eslint/parser",
+	"parserOptions": {
+		"ecmaVersion": "latest",
+		"sourceType": "module"
+	},
+	"plugins": [
+		"react",
+		"@typescript-eslint"
+	],
+	"rules": {
+		"indent": [
+			"error",
+			"tab"
+		],
+		"linebreak-style": [
+			"error",
+			"unix"
+		],
+		"quotes": [
+			"error",
+			"double"
+		],
+		"semi": [
+			"error",
+			"always"
+		],
+		"object-curly-spacing": ["error", "always"],
+	},
+};

.gitignore

@@ -0,0 +1,5 @@
+.npmrc
+node_modules/
+# build/
+storybook-static/
+yarn.lock

.storybook/main.js

@@ -0,0 +1,29 @@
+const path = require("path");
+
+module.exports = {
+  stories: ["../src/**/*.stories.tsx"],
+  // Add any Storybook addons you want here: https://storybook.js.org/addons/
+  addons: ['@storybook/addon-controls','@storybook/addon-essentials','storybook-dark-mode'],
+  webpackFinal: async config => {
+    config.module.rules.push({
+      test: /\.(less)$/,
+      use: ["style-loader", "css-loader", "less-loader"],
+      include: path.resolve(__dirname, "../")
+    });
+    config.module.rules.push({
+      test: /\.(ts|tsx)$/,
+      loader: require.resolve("babel-loader"),
+      options: {
+        presets: [["react-app", {
+          flow: false,
+          typescript: true
+        }]]
+      }
+    });
+    config.resolve.extensions.push(".ts", ".tsx", ".less");
+    return config;
+  },
+  core: {
+    builder: "@storybook/builder-webpack5"
+  }
+};

.storybook/preview.js

@@ -0,0 +1,98 @@
+/**
+ * Read https://storybook.js.org/docs/react/configure/overview#configure-story-rendering
+ * for more information about the purpose of this file.
+ *
+ * Use preview.js for global code (such as CSS imports or JavaScript mocks)
+ * that applies to all stories. For example, `import thirdPartyCss.css`.
+ *
+ * This file can have three exports:
+ * - decorators - an array of global decorators
+ * - parameters - an object of global parameters
+ * - globalTypes - definition of globalTypes
+ */
+
+/**
+ * Decorators
+ *
+ * A decorator is a way to wrap a story in extra “rendering” functionality.
+ *
+ * Example:
+ *
+ * import React from 'react';
+ * export const decorators = [(Story) => <div style={{ margin: '3em' }}><Story/></div>];
+ *
+ * Each story throughout the library will be wrapped in a div with a margin of 3
+ */
+ 
+export const decorators = [(Story) => <div style={{ overflow:"hidden" }}><Story/></div>];
+ 
+/**
+ * Parameters
+ *
+ * Most Storybook addons are configured via a parameter-based API.
+ * You can set global parameters in this file
+ *
+ * export const parameters = {
+ *   backgrounds: {
+ *     values: [
+ *       { name: 'red', value: '#f00' },
+ *       { name: 'green', value: '#0f0' },
+ *     ],
+ *   },
+ * };
+ *
+ * With backgrounds, you configure the list of backgrounds that every story can render in.
+ */
+
+/**
+ * Global Types
+ *
+ * Global Types allow you to add your own toolbars by creating
+ * globalTypes with a toolbar annotation:
+ *
+ * For example:
+ *
+ * 
+ * export const globalTypes = {
+ *   theme: {
+ *     name: 'Theme',
+ *     description: 'Global theme for components',
+ *     defaultValue: 'light',
+ *     toolbar: {
+ *       icon: 'circlehollow',
+ *       // array of plain string values or MenuItem shape
+ *       items: ['light', 'dark'],
+ *       },
+ *     },
+ *   };
+ *
+ * Will add a new dropdown in your toolbar with options light and dark.
+ **/
+
+/*
+  export const globalTypes = {
+    theme: {
+      name: 'Theme',
+      description: 'Global theme for components',
+      defaultValue: 'light',
+      toolbar: {
+        icon: 'circlehollow',
+        // array of plain string values or MenuItem shape
+        items: ['light', 'dark'],
+        },
+      },
+    };
+*/
+ 
+ 
+ export const parameters = {
+    darkMode: {
+      // Set the initial theme
+      // current: 'light',
+      darkClass:"dark",
+      lightClass:"light",
+      classTarget:'html',
+      stylePreview:true,
+    },
+  };
+  

LICENSE

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

README.md

@@ -0,0 +1,116 @@
+### React Component Library - code4bones react UI
+
+### Components
+	
+|   Component| Description   |
+| ------------ | ------------ |
+|  TreeMenu | Navigation Menu Tree   |
+
+
+# react-c4b-ui
+
+![npm](https://img.shields.io/npm/v/@code4bones/react-c4b-ui?label=latest)
+![npm](https://img.shields.io/npm/dt/@code4bones/react-c4b-ui?style=flat-square&label=installs)
+
+![](https://img.shields.io/github/downloads/code4bones/react-c4b-ui/total) ![](https://img.shields.io/github/watchers/code4bones/react-c4b-ui) ![](https://img.shields.io/github/forks/code4bones/react-c4b-ui)  ![](https://img.shields.io/github/release/code4bones/react-c4b-ui) ![](https://img.shields.io/github/issues/code4bones/react-c4b-ui)
+
+### Links
+
+[Change log](https://github.com/code4bones/react-c4b-ui/wiki/Change-Log "Change log")
+
+### System default / custom theme 
+
+![sample](https://github.com/code4bones/react-c4b-ui/blob/master/img/theme.png?raw=true "sample")
+
+|feature|sample|
+|-------|------|
+|![cap](https://github.com/code4bones/react-c4b-ui/blob/master/img/items_reveal.gif?raw=true)|  |
+![cap](https://github.com/code4bones/react-c4b-ui/blob/master/img/rorate_group.gif?raw=true)|![cap](https://github.com/code4bones/react-c4b-ui/blob/master/img/static_group.gif?raw=true)|
+
+### Install
+
+
+`$ yarn add @code4bones/react-c4b-ui`
+
+#### TreeMenu
+
+#### Brief
+
+```tsx
+
+import  {TreeMenu, TreeMenuActions,TreeMenuItem }  from "@code4bones/react-c4b-ui";
+import "@code4bones/react-c4b-ui/build/styles.css";
+
+const ITEMS : TreeMenuItem[] = [{
+  id:"item1",
+  title:"Item 1",
+  // other TreeMenuItem's props
+    childs:[{
+     id:"sub",
+     title:"Subitem 1",
+   }]
+}];
+
+// if your need to use exponsed actions
+const ref = createRef<TreeMenuActions>();
+
+<TreeMenu
+  ref={ref}
+  items={ITEMS}
+  onClick={onClick} 
+/>
+
+```
+
+### Properties
+
+type `RenderFn` = (item:MenuItem) => React.ReactElement | undefined | null; 
+type `RenderType` = `RenderFn` | React.ReactElement; 
+
+
+| Propery name | Description                    | Signature
+| ------------- | ------------------------------ | ---- |
+| `items[]`      | tree menu items array       | `TreeMenuItem`[] |
+| `ref`      | handle to TreeMenu methods       | `TreeMenuActions` |
+| `onClick`   |  item click handler     | onClick?:(item:TreeMenuItem) => void|
+| `onToggle`   |  collapse  / expand     | onToggle?:(id?:string,collapsed?:boolean) => void;|
+| `initialCollapsed`   |  initial tree state     | boolean |
+| `initialSelected`   |  initial selected item     | item's `id` : string|
+| `renderBadge`   |  item click handler     | `RenderType` |
+| `renderIcon`   |  Left side element of item     | `RenderType` |
+| `renderGroupState`   | Group indicator     | `RenderType` |
+| `theme`   | theme override class name     | `dark`, `light`, custom name | 
+| `classPrefix`   | container global prefix     | string |
+| `enableRotate` | Rotate collapse / expand | boolean |
+
+
+`TreeMenuItem`
+
+```tsx
+    id:string;
+    title:string | React.ReactElement;
+    info?:string | React.ReactElement;
+    infoReveal?:InfoReveal;
+    icon?:React.ReactElement;
+    badge?:string | React.ReactElement;
+    disabled?:boolean;
+    unselectable?:boolean;
+    titleClass?:string;
+    infoClass?:string;
+    style?:React.CSSProperties;
+    titleStyle?:React.CSSProperties;
+    infoStyle?:React.CSSProperties;
+```
+
+`TreeMenuActions` ( use `ref` )
+```
+    enable:(id:string,disable?:boolean) => void;
+    getItem:(id:string) => TreeMenuItem | null;
+    collapse:(id:string,collapsed?:boolean) => void;
+    select:(id:string) => void;
+
+```
+
+### Sample
+
+Sample available via storybook `yarn storybook`

build/TreeMenu/TreeMenu.d.ts

@@ -0,0 +1,35 @@
+import React from "react";
+import { TreeMenuItem } from "./TreeMenu.types";
+import "./TreeMenu.less";
+export { TreeMenuItem };
+export declare type TreeMenuActions = {
+    enable: (id: string, disable?: boolean) => void;
+    getItem: (id: string) => TreeMenuItem | null;
+    collapse: (id: string, collapsed?: boolean) => void;
+    select: (id: string) => void;
+    invalidate: () => void;
+    rebuild: (items: TreeMenuItem[]) => void;
+};
+declare const TreeMenu: React.ForwardRefExoticComponent<{
+    items: TreeMenuItem[];
+    theme?: string;
+    itemHeight?: number;
+    classPrefix?: string;
+    initialCollapsed?: boolean;
+    initialSelected?: string;
+    onClick?: (id: string) => void;
+    onToggle?: (id?: string, collapsed?: boolean) => void;
+} & {
+    treeID: string;
+    infoReveal?: "always" | "vertical" | "horizontal";
+    titleStyle?: React.CSSProperties;
+    infoStyle?: React.CSSProperties;
+    enableRotate?: boolean;
+    badgeVisible?: boolean;
+    groupIconLeft?: boolean;
+    renderBadge?: import("./TreeMenu.types").RenderType;
+    renderIcon?: import("./TreeMenu.types").RenderType;
+    renderGroupState?: import("./TreeMenu.types").RenderType;
+    propertyGrid?: boolean;
+} & React.RefAttributes<TreeMenuActions>>;
+export default TreeMenu;