Basics (#60)

* Basics

* prettier

* fix comments

* create renderers for icons

Author: orineuman

babel.config.js

@@ -1,3 +1,4 @@
 module.exports = {
+    plugins: ["emotion"],
     presets: ["@babel/preset-env", "@babel/preset-react"]
 };

package.json

@@ -49,6 +49,7 @@
     "postinstall": "preconstruct dev",
     "build": "preconstruct build",
     "test": "jest --coverage",
+    "storybook": "yarn workspace @kenshooui/react-tree-docs storybook",
     "prettier": "prettier --check ./packages/**/*.js --ignore-path .gitignore",
     "prettier:fix": "prettier --check ./packages/**/*.js --ignore-path .gitignore --write",
     "release": "auto shipit"

packages/core/package.json

@@ -12,5 +12,9 @@
   "devDependencies": {
     "react": "^16.12.0"
   },
-  "scripts": {}
+  "scripts": {},
+  "dependencies": {
+    "@emotion/core": "^10.0.28",
+    "classnames": "^2.2.6"
+  }
 }

packages/core/src/header/header.js

@@ -0,0 +1,30 @@
+/** @jsx jsx */
+import { jsx } from "@emotion/core";
+import React from "react";
+
+export const BackIconRenderer = () => <>⬅️</>;
+
+const Header = props => {
+  const {
+    parents = [],
+    onClick,
+    title = "",
+    getStyles,
+    backIconRenderer: BackIcon = BackIconRenderer
+  } = props;
+  return (
+    <div css={getStyles("header", props)}>
+      {parents.length > 0 && (
+        <>
+          <span css={getStyles("headerBackIcon", props)} onClick={onClick}>
+            <BackIcon />
+          </span>
+          {parents[parents.length - 1]}
+        </>
+      )}
+      {parents.length === 0 && <>{title}</>}
+    </div>
+  );
+};
+
+export default Header;

packages/core/src/header/headerStyle.js

@@ -0,0 +1,11 @@
+export const wrapperCss = () => ({
+  height: "40px",
+  display: "flex",
+  alignItems: "center",
+  padding: "0 6px"
+});
+
+export const backIconCss = () => ({
+  marginRight: "3px",
+  cursor: "pointer"
+});

packages/core/src/hooks/use_item_callbacks.js

@@ -0,0 +1,31 @@
+import { useState } from "react";
+
+const useItemCallbacks = onSelect => {
+  const [currentDepth, setCurrentDepth] = useState(0);
+  const [parents, setParents] = useState([]);
+
+  const onClick = (label, item, hasChild) => {
+    if (hasChild) {
+      setParents(parents.concat(label));
+      setCurrentDepth(currentDepth + 1);
+    } else {
+      onSelect(item);
+    }
+  };
+
+  const onBackClick = () => {
+    setParents(parents.filter((parent, index) => index < parents.length - 1));
+    setCurrentDepth(currentDepth - 1);
+  };
+
+  return {
+    onClick,
+    onBackClick,
+    currentDepth,
+    setCurrentDepth,
+    parents,
+    setParents
+  };
+};
+
+export default useItemCallbacks;

packages/core/src/hooks/use_leaves_manager.js

@@ -0,0 +1,28 @@
+import {
+  containsAllParents,
+  filterBySearchTerm,
+  buildLeafForItemRenderer,
+  removeDuplicateLeafs
+} from "../util";
+import { useState, useEffect } from "react";
+
+const useLeavesManager = ({ structure, parents, currentDepth }) => {
+  const [searchTerm, setSearchTerm] = useState("");
+  const [leaves, setLeaves] = useState([]);
+
+  useEffect(() => {
+    const leaves = structure
+      .filter(
+        leaf =>
+          filterBySearchTerm(leaf, searchTerm) &&
+          containsAllParents(leaf, parents)
+      )
+      .map(leaf => buildLeafForItemRenderer(leaf, currentDepth, searchTerm));
+
+    setLeaves(removeDuplicateLeafs(leaves));
+  }, [searchTerm, parents, currentDepth]);
+
+  return { searchTerm, setSearchTerm, leaves };
+};
+
+export default useLeavesManager;

packages/core/src/index.js

@@ -1,5 +1,3 @@
-import React from "react";
+import Tree from "./tree";
 
-const HelloWorld = () => <div>Hello World</div>;
-
-export default HelloWorld;
+export default Tree;

packages/core/src/input/input.js

@@ -0,0 +1,28 @@
+/** @jsx jsx */
+import { jsx } from "@emotion/core";
+import React from "react";
+
+export const InputIconRenderer = () => <>🔍</>;
+
+const Input = props => {
+  const {
+    searchTerm,
+    setSearchTerm,
+    getStyles,
+    inputIconRenderer: InputIcon = InputIconRenderer
+  } = props;
+  return (
+    <div css={getStyles("inputWrapper", props)}>
+      <span css={getStyles("searchInput", props)}>
+        <InputIcon />
+      </span>
+      <input
+        css={getStyles("input", props)}
+        value={searchTerm}
+        onChange={e => setSearchTerm(e.target.value)}
+      />
+    </div>
+  );
+};
+
+export default Input;

packages/core/src/input/inputStyle.js

@@ -0,0 +1,27 @@
+export const css = () => ({
+  width: "100%",
+  height: "35px",
+  paddingLeft: "35px",
+  border: "1px solid #cfd1d2",
+  borderRight: "none",
+  borderLeft: "none",
+  backgroundColor: "#F8F9FA",
+
+  "&:focus": {
+    outline: "none !important"
+  },
+
+  "&:active": {
+    outline: "none !important"
+  }
+});
+
+export const searchIconCss = () => ({
+  position: "absolute",
+  top: "8px",
+  left: "8px"
+});
+
+export const wrapperCss = () => ({
+  position: "relative"
+});