@attebyte/react-tree-select 1.0.0

package/README.md

@@ -0,0 +1,120 @@
+# React Tree Select &nbsp;&nbsp;<img src="https://firebasestorage.googleapis.com/v0/b/attebyte-8542f.appspot.com/o/react-tree-select%2Freact.svg?alt=media&token=a2cf555d-d091-4b45-af56-6fc97062c66d" alt="React Icon" width="30" height="30" /> &nbsp; <img src="https://firebasestorage.googleapis.com/v0/b/attebyte-8542f.appspot.com/o/react-tree-select%2Ftailwind.svg?alt=media&token=7655c1f4-9525-4c53-acfa-07b4d95edb22" alt="React Icon" width="30" height="30" /> 
+A simple, highly customizable tree component. <br/>
+[View Full Documentation](https://rts.attebyte.io)
+
+## Installation
+Install using the package manager of your choice.
+
+```
+npm i @attebyte/react-tree-select
+```
+```
+yarn add @attebyte/react-tree-select
+```
+
+## Getting Started
+
+Simply pass your tree shaped data to TreeSelect along with the required properties.
+
+```
+import TreeSelect from '@attebyte/react-tree-select';
+import '@attebyte/react-tree-select/dist/style.css';
+
+function App() {
+  return (
+    <>
+      <TreeSelect
+        defaultData={ExampleData}
+        labelProperty={'label'}
+        valueProperty={'included'}
+        childrenProperty={'children'}
+        uniqueIDProperty={'value'}
+
+        />
+    </>
+  )
+}
+
+export default App
+```
+
+```
+const ExampleData: ExampleNode[] = [
+  {
+    label: 'Root 1',
+    value: 1,
+    children: [
+      {
+        label: 'Child 1',
+        value: 2,
+        children: [
+          {
+            label: 'Grandchild 1',
+            value: 3,
+          },
+          {
+            label: 'Grandchild 2',
+            value: 4,
+          }
+        ]
+      },
+      {
+        label: 'Child 2',
+        value: 5,
+      }
+    ]
+  },
+  {
+    label: 'Root 2',
+    value: 6,
+    children: [
+      {
+        label: 'Child 3',
+        value: 7,
+      },
+      {
+        label: 'Child 4',
+        value: 8,
+      }
+    ]
+  }
+];
+```
+
+<img src="https://firebasestorage.googleapis.com/v0/b/attebyte-8542f.appspot.com/o/react-tree-select%2Ftree-select-example.gif?alt=media&token=0fb3fbaf-95b2-40d9-a065-be2e08515272" alt="Example GIF">
+
+## Props
+Commonly required props for most use cases. To see a full list of available properties, see our [full documentation](https://rts.attebyte.io/#api).
+
+| Property | Type | Required? | Description |
+| ----------- | ----------- | ----------- | ----------- |
+| `data` | `T[]` | yes* | The data to be rendered, if controlled |
+| `defaultData` | `T[]` | yes* | The data to be rendered, if uncontrolled |
+| `uniqueIDProperty` | `keyof T` | yes | The property of your tree node that uniquely identifies the node |
+| `labelProperty` | `keyof T` | yes | The property of your node to display |
+| `childrenProperty` | `keyof T` | yes | The property of your node that holds the node's children |
+| `valueProperty` | `keyof T` | yes* | Required if you intend to use the tree to select nodes. If using for display purposes only, not required |
+| `onChange` | `(data: T[]) => void` | yes* | Required if you intend to use the the tree to select nodes. Called every time a node selection is changed with the updated tree
+
+## Customization
+This library is built with customization in mind and contains minimal default styles using tailwind. The library consists of 4 replacable parts:
+ - `TreeNode` - The container for an individual node
+ - `NodeLabel` - The label displyed within each node
+ - `NodeCheck` - The checkbox used to select a node or indicate descendent's selections
+ - `ExpandIcon` - Icon to indicate if a node has children or is collapsed / expanded
+ For additional information and examples of customization, please see our full documentation.
+
+<br/>
+
+---
+
+<br/>
+
+<a href="https://www.buymeacoffee.com/tristan10" target="_blank">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="https://firebasestorage.googleapis.com/v0/b/attebyte-8542f.appspot.com/o/react-tree-select%2Fbmc-logo-light.svg?alt=media&token=03a8ffd4-3e98-4c8e-9e7a-b8c200c92ed6">
+    <img style="color: white;" src="https://firebasestorage.googleapis.com/v0/b/attebyte-8542f.appspot.com/o/react-tree-select%2Fbmc-logo.svg?alt=media&token=357749a8-a191-46de-88f4-b7783517b806" alt="Buy Me A Coffee Logo" title="Buy Me A Coffee" height="40" />
+  </picture>
+</a>
+
+This is my first open source project and feedback is always appreciated. [Twitter](https://twitter.com/tristanattebery)

package/dist/components/ExpandIcon.d.ts

@@ -0,0 +1,15 @@
+import { VariantProps } from 'class-variance-authority';
+import React from 'react';
+import { StandardComponentProps } from './TreeSelect';
+interface Props<T> {
+    standardComponentProps: StandardComponentProps<T>;
+    expanded: boolean;
+    show: boolean;
+}
+declare const iconVariants: (props?: ({
+    rotated?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface ExpandIconProps<T> extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof iconVariants>, Props<T> {
+}
+declare const _default: <T>(props: ExpandIconProps<T>) => import("react/jsx-runtime").JSX.Element | null;
+export default _default;

package/dist/components/NodeCheck.d.ts

@@ -0,0 +1,17 @@
+import { VariantProps } from 'class-variance-authority';
+import React from 'react';
+import { StandardComponentProps } from './TreeSelect';
+interface Props<T> {
+    myRef?: React.RefObject<HTMLInputElement>;
+    standardComponentProps: StandardComponentProps<T>;
+    checked?: boolean | null;
+    expanded?: boolean;
+    disabled?: boolean;
+}
+declare const checkVariants: (props?: ({
+    mixed?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface NodeCheckProps<T> extends React.HTMLAttributes<HTMLInputElement>, VariantProps<typeof checkVariants>, Props<T> {
+}
+declare const _default: <T>(props: NodeCheckProps<T>) => import("react/jsx-runtime").JSX.Element;
+export default _default;

package/dist/components/NodeLabel.d.ts

@@ -0,0 +1,22 @@
+import { VariantProps } from 'class-variance-authority';
+import React from 'react';
+import { ExpandIconProps } from './ExpandIcon';
+import { StandardComponentProps } from './TreeSelect';
+interface Props<T> {
+    standardComponentProps: StandardComponentProps<T>;
+    label: string;
+    hasChildren: boolean;
+    expanded?: boolean;
+    expandDisabledNodes?: boolean;
+    iconClassName?: string;
+    iconStyle?: React.CSSProperties;
+    ExpandIconComponent: React.ComponentType<ExpandIconProps<T>>;
+}
+declare const labelVariants: (props?: ({
+    disabled?: boolean | null | undefined;
+    expandEnabled?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface NodeLabelProps<T> extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof labelVariants>, Props<T> {
+}
+declare const _default: <T>(props: NodeLabelProps<T>) => import("react/jsx-runtime").JSX.Element;
+export default _default;

package/dist/components/TreeNode.d.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+import { NodeCheckProps } from './NodeCheck';
+import { NodeLabelProps } from './NodeLabel';
+import { ExpandIconProps } from './ExpandIcon';
+import { VariantProps } from 'class-variance-authority';
+import { StandardComponentProps } from './TreeSelect';
+interface Props<T> {
+    standardComponentProps: StandardComponentProps<T>;
+    disabled?: boolean;
+    level?: number;
+    defaultExpanded?: boolean;
+    expandDisabledNodes?: boolean;
+    chainedSelect?: boolean;
+    labelClassName?: string;
+    labelStyle?: React.CSSProperties;
+    iconClassName?: string;
+    iconStyle?: React.CSSProperties;
+    inputClassName?: string;
+    inputStyle?: React.CSSProperties;
+    CheckComponent: React.ComponentType<NodeCheckProps<T>>;
+    LabelComponent: React.ComponentType<NodeLabelProps<T>>;
+    ExpandIconComponent: React.ComponentType<ExpandIconProps<T>>;
+    onChange: (node: T, value: boolean | null) => void;
+}
+declare const nodeVariants: (props?: ({
+    nested?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface TreeNodeProps<T> extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>, VariantProps<typeof nodeVariants>, Props<T> {
+}
+declare const _default: <T>(props: TreeNodeProps<T>) => import("react/jsx-runtime").JSX.Element;
+export default _default;

package/dist/components/TreeSelect.d.ts

@@ -0,0 +1,36 @@
+import React from 'react';
+import { TreeNodeProps } from './TreeNode';
+import { NodeCheckProps } from './NodeCheck';
+import { NodeLabelProps } from './NodeLabel';
+import { ExpandIconProps } from './ExpandIcon';
+export interface StandardComponentProps<T> {
+    node: T;
+    expanded?: boolean;
+    uniqueIDProperty: keyof T;
+    labelProperty: keyof T;
+    valueProperty?: keyof T;
+    childrenProperty: keyof T;
+    disabledProperty?: keyof T;
+}
+export interface TreeSelectProps<T> extends Omit<React.HTMLProps<HTMLDivElement>, "data" | "onChange">, Omit<StandardComponentProps<T>, "node" | "expanded"> {
+    data?: T[];
+    defaultData?: T[];
+    disabled?: boolean;
+    expandDisabledNodes?: boolean;
+    defaultExpanded?: boolean;
+    chainedSelect?: boolean;
+    nodeClassName?: string;
+    nodeStyle?: React.CSSProperties;
+    labelClassName?: string;
+    labelStyle?: React.CSSProperties;
+    iconClassName?: string;
+    iconStyle?: React.CSSProperties;
+    inputClassName?: string;
+    inputStyle?: React.CSSProperties;
+    CustomNodeComponent?: React.ComponentType<TreeNodeProps<T>>;
+    CustomCheckComponent?: React.ComponentType<NodeCheckProps<T>>;
+    CustomLabelComponent?: React.ComponentType<NodeLabelProps<T>>;
+    CustomExpandIconComponent?: React.ComponentType<ExpandIconProps<T>>;
+    onChange?: (data: T[]) => void;
+}
+export declare const TreeSelect: <T>(props: TreeSelectProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/main.d.ts

@@ -0,0 +1,12 @@
+import { TreeSelect } from './components/TreeSelect';
+export default TreeSelect;
+export { default as NodeLabel } from './components/NodeLabel';
+export { default as NodeCheck } from './components/NodeCheck';
+export { default as ExpandIcon } from './components/ExpandIcon';
+export { default as TreeNode } from './components/TreeNode';
+export type { NodeLabelProps } from './components/NodeLabel';
+export type { StandardComponentProps } from './components/TreeSelect';
+export type { ExpandIconProps } from './components/ExpandIcon';
+export type { NodeCheckProps } from './components/NodeCheck';
+export type { TreeNodeProps } from './components/TreeNode';
+export type { TreeSelectProps } from './components/TreeSelect';