Merge pull request #1680 from Adslot/tree-picker

[ADS-7903] feat: new tree picker

.storybook/main.ts

@@ -3,7 +3,7 @@ import { mergeConfig } from 'vite';
 import svgr from 'vite-plugin-svgr';
 
 const config: StorybookConfig = {
-  stories: ['../www/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
+  stories: ['../www/**/*.mdx', '../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
   addons: [
     '@storybook/addon-links',
     '@storybook/addon-essentials',
@@ -22,11 +22,7 @@ const config: StorybookConfig = {
   async viteFinal(config) {
     // Merge custom configuration into the default config
     return mergeConfig(config, {
-      plugins: [
-        svgr({
-          exportAsDefault: true,
-        }),
-      ],
+      plugins: [svgr({ exportAsDefault: true })],
     });
   },
 };

.storybook/manager-head.html

@@ -10,5 +10,18 @@
   gtag('config', 'UA-18273448-24');
 </script>
 
+<style>
+
+.sidebar-item[data-item-id="components-treepickertree--tree-picker-tree"],
+.sidebar-item[data-item-id="components-treepickerheader--tree-picker-header"],
+.sidebar-item[data-item-id="components-treepickernav--tree-picker-nav"],
+.sidebar-item[data-item-id="components-treepickersearch--tree-picker-search"],
+.sidebar-item[data-item-id="components-treepickernode--tree-picker-node"] {
+  display: none;
+}
+
+</style>
+
+
 <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet" />
 <link rel="stylesheet" href="/storybook-global.css" />

package.json

@@ -155,7 +155,7 @@
     "svgo": "^3.0.2",
     "terser-webpack-plugin": "^5.3.9",
     "typescript": "^5.2.2",
-    "vite-plugin-svgr": "^4.1.0",
+    "vite-plugin-svgr": "^3.3.0",
     "wcag-contrast": "^3.0.0",
     "webpack": "^5.88.2",
     "webpack-cli": "^5.1.4",
@@ -178,6 +178,7 @@
     "react-select": "^5.7.7",
     "react-slick": "^0.29.0",
     "react-toastify": "^9.1.3",
+    "ryze": "^0.1.1",
     "slick-carousel": "^1.8.1"
   },
   "peerDependencies": {

scripts/generate-types/generateTypes.js

@@ -73,7 +73,7 @@ async function generateTypeDefs() {
     .join(path.posix.sep);
 
   // get all the jsx components using glob. Ignore spec & test files.
-  const allComponentFiles = glob.sync(globString);
+  const allComponentFiles = glob.sync(globString).filter((entry) => !entry.includes('/TreePicker/'));
 
   if (!allComponentFiles || allComponentFiles.length === 0) {
     console.log(
@@ -138,7 +138,7 @@ async function generateTypeDefs() {
     await Promise.all(
       parsed.map(async (code, i) => {
         const result = await generateFromSource(null, code, {
-          babylonPlugins: ['exportDefaultFrom', 'transformImports'],
+          babylonPlugins: ['exportDefaultFrom', 'transformImports', 'nullishCoalescingOperator'],
         });
 
         const component = allComponents[i];

src/components/ListPickerPure/index.jsx

@@ -7,7 +7,7 @@ import Empty from '../Empty';
 import Grid from '../Grid';
 import GridRow from '../Grid/Row';
 import GridCell from '../Grid/Cell';
-import { useArrowFocus } from '../../hooks';
+import useArrowFocus from '../../hooks/useArrowFocus';
 import './styles.css';
 
 const ListPickerPure = ({

src/components/RadioGroup/index.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import { useArrowFocus } from '../../hooks';
+import useArrowFocus from '../../hooks/useArrowFocus';
 import { expandDts } from '../../utils';
 import invariant from '../../invariant';
 import '../RadioGroup/style.css';

src/components/TreePicker/TreePicker.css

@@ -0,0 +1,32 @@
+@import url('../../styles/variable.css');
+
+.aui--tree-picker {
+  & .aui--tree-picker-row + .aui--tree-picker-tree {
+    border-top: 1px solid $color-border-base;
+  }
+}
+
+.aui--tree-picker-section {
+  margin-top: 16px;
+  margin-bottom: 16px;
+}
+
+.aui--tree-picker-row {
+  padding: 0 2px;
+  min-height: 36px;
+  display: flex;
+  align-items: center;
+  position: relative;
+  gap: 12px;
+  border-top: 1px solid $color-border-base;
+
+  & .aui--button.aui-icon {
+    width: 24px;
+    height: 24px;
+    min-height: 24px;
+  }
+}
+
+.aui--tree-picker-row-content {
+  flex: 1;
+}

src/components/TreePicker/TreePicker.jsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import cc from 'classnames';
+import { TreePickerProvider } from './TreePickerContext';
+import TreePickerTree from './TreePickerTree';
+import TreePickerHeader from './TreePickerHeader';
+import TreePickerNode from './TreePickerNode';
+import TreePickerNav from './TreePickerNav';
+import TreePickerSearch from './TreePickerSearch';
+
+import './TreePicker.css';
+
+const TreePicker = ({ children, renderNode, className }) => {
+  const renderNodeWithKey = React.useCallback(
+    (node, index) => <React.Fragment key={node.id}>{renderNode(node, index)}</React.Fragment>,
+    [renderNode]
+  );
+
+  return (
+    <TreePickerProvider renderNode={renderNodeWithKey}>
+      <div className={cc('tree-picker', className)}>{children}</div>
+    </TreePickerProvider>
+  );
+};
+
+TreePicker.propTypes = {
+  children: PropTypes.node.isRequired,
+  renderNode: PropTypes.func.isRequired,
+  className: PropTypes.string,
+};
+
+TreePicker.Tree = TreePickerTree;
+TreePicker.Header = TreePickerHeader;
+TreePicker.Node = TreePickerNode;
+TreePicker.Nav = TreePickerNav;
+TreePicker.Search = TreePickerSearch;
+
+export default TreePicker;

src/components/TreePicker/TreePicker.mdx

@@ -0,0 +1,34 @@
+import { Meta, ArgTypes, Story, Stories } from '@storybook/blocks';
+import * as TreePickerStories from './TreePicker.stories';
+import * as TreePickerHeaderStories from './TreePickerHeader.stories';
+import * as TreePickerNodeStories from './TreePickerNode.stories';
+import * as TreePickerSearchStories from './TreePickerSearch.stories';
+import * as TreePickerNavStories from './TreePickerNav.stories';
+
+<Meta title="Components/TreePicker" />
+
+# TreePicker
+
+`TreePicker` is a complex component with many sub components for composition. It is intended to be used for displaying multiple layers of data, with the capability of adding and expanding a particular node.
+
+`TreePicker`
+
+<ArgTypes of={TreePickerStories} />
+
+`TreePicker.Node`
+
+<ArgTypes of={TreePickerNodeStories} />
+
+`TreePicker.Search`
+
+<ArgTypes of={TreePickerSearchStories} />
+
+`TreePicker.Header`
+
+<ArgTypes of={TreePickerSearchStories} />
+
+`TreePicker.Nav`
+
+<ArgTypes of={TreePickerNavStories} />
+
+<Story of={TreePickerStories.Basic} />