@basic-ui/core 0.0.59 → 0.0.61

package/src/Tree/Tree.story.tsx

@@ -0,0 +1,221 @@
+import type { ReactNode } from 'react';
+import { useState } from 'react';
+
+import { Tree, TreeItem, TreeItemContent, TreeSection, TreeHeader } from './';
+import './styles.css';
+import type {
+  TreeSelectionBehavior,
+  TreeSelectionMode,
+} from './types';
+
+export default {
+  title: 'components/Tree',
+};
+
+const Wrapper = ({ children }: { children: ReactNode }) => (
+  <div className="TreeStory-frame">{children}</div>
+);
+
+const treeSelectionArgTypes = {
+  selectionMode: {
+    control: 'inline-radio',
+    options: ['none', 'single', 'multiple'],
+  },
+  selectionBehavior: {
+    control: 'inline-radio',
+    options: ['toggle', 'replace'],
+  },
+  disallowEmptySelection: {
+    control: 'boolean',
+  },
+  disabledBehavior: {
+    control: 'inline-radio',
+    options: ['selection', 'all'],
+  },
+} as const;
+
+const treeSelectionArgs = {
+  selectionMode: 'multiple',
+  selectionBehavior: 'toggle',
+  disallowEmptySelection: false,
+  disabledBehavior: 'selection',
+} as const;
+
+/* Basic uncontrolled tree */
+export const Basic = ({
+  selectionMode = 'multiple',
+  selectionBehavior = 'toggle',
+  disallowEmptySelection = false,
+  disabledBehavior = 'selection',
+}: {
+  selectionMode?: TreeSelectionMode;
+  selectionBehavior?: TreeSelectionBehavior;
+  disallowEmptySelection?: boolean;
+  disabledBehavior?: 'selection' | 'all';
+}) => (
+  <Wrapper>
+    <Tree
+      selectionMode={selectionMode}
+      selectionBehavior={selectionBehavior}
+      disallowEmptySelection={disallowEmptySelection}
+      disabledBehavior={disabledBehavior}
+      aria-label="Files"
+    >
+      <TreeItem title="Documents">
+        <TreeItem title="Project">
+          <TreeItem title="Weekly Report" />
+        </TreeItem>
+      </TreeItem>
+      <TreeItem title="Photos">
+        <TreeItem title="Image 1" />
+        <TreeItem title="Image 2" />
+      </TreeItem>
+    </Tree>
+  </Wrapper>
+);
+
+Basic.args = {
+  ...treeSelectionArgs,
+};
+Basic.argTypes = treeSelectionArgTypes;
+
+export const WithSections = ({
+  selectionMode = 'multiple',
+  selectionBehavior = 'toggle',
+  disallowEmptySelection = false,
+  disabledBehavior = 'selection',
+}: {
+  selectionMode?: TreeSelectionMode;
+  selectionBehavior?: TreeSelectionBehavior;
+  disallowEmptySelection?: boolean;
+  disabledBehavior?: 'selection' | 'all';
+}) => (
+  <Wrapper>
+    <Tree
+      selectionMode={selectionMode}
+      selectionBehavior={selectionBehavior}
+      disallowEmptySelection={disallowEmptySelection}
+      disabledBehavior={disabledBehavior}
+      aria-label="Files"
+    >
+      <TreeSection>
+        <TreeHeader>Photos</TreeHeader>
+        <TreeItem id="my-photos" title="My Photos">
+          <TreeItem id="photo-1" title="Photo 1" />
+          <TreeItem id="photo-2" title="Photo 2" />
+        </TreeItem>
+        <TreeItem id="shared-photos" title="Shared Photos">
+          <TreeItem id="shared-photo-1" title="Shared Photo 1" />
+          <TreeItem id="shared-photo-2" title="Shared Photo 2" />
+        </TreeItem>
+      </TreeSection>
+      <TreeSection>
+        <TreeHeader>Documents</TreeHeader>
+        <TreeItem id="my-documents" title="My Documents">
+          <TreeItem id="document-1" title="Document 1" />
+          <TreeItem id="document-2" title="Document 2" />
+        </TreeItem>
+        <TreeItem id="shared-documents" title="Shared Documents">
+          <TreeItem id="shared-document-1" title="Shared Document 1" />
+          <TreeItem id="shared-document-2" title="Shared Document 2" />
+        </TreeItem>
+      </TreeSection>
+    </Tree>
+  </Wrapper>
+);
+
+WithSections.args = {
+  ...treeSelectionArgs,
+};
+WithSections.argTypes = treeSelectionArgTypes;
+
+export const Complex = ({
+  selectionMode = 'multiple',
+  selectionBehavior = 'toggle',
+  disallowEmptySelection = false,
+  disabledBehavior = 'selection',
+}: {
+  selectionMode?: TreeSelectionMode;
+  selectionBehavior?: TreeSelectionBehavior;
+  disallowEmptySelection?: boolean;
+  disabledBehavior?: 'selection' | 'all';
+}) => (
+  <Wrapper>
+    <Tree
+      selectionMode={selectionMode}
+      selectionBehavior={selectionBehavior}
+      disallowEmptySelection={disallowEmptySelection}
+      disabledBehavior={disabledBehavior}
+      aria-label="Files"
+    >
+      <TreeSection>
+        <TreeHeader>Documents</TreeHeader>
+        <TreeItem>
+          {/* The tree item content can be used to compose complex looking tree items */}
+          <TreeItemContent>
+            <button slot="chevron">
+              {' '}
+              {/* Chevron icon */}
+              <span aria-hidden="true">›</span>
+            </button>
+            <input type="checkbox" slot="selection" />
+            <span>Documents</span>
+            <button slot="drag">☰</button> {/* drag handle */}
+          </TreeItemContent>
+          <TreeItem>File 1</TreeItem>
+        </TreeItem>
+      </TreeSection>
+      <TreeSection>
+        <TreeHeader>Images</TreeHeader>
+        <TreeItem>File 1</TreeItem>
+        <TreeItem>File 2</TreeItem>
+      </TreeSection>
+    </Tree>
+  </Wrapper>
+);
+
+Complex.args = {
+  ...treeSelectionArgs,
+};
+Complex.argTypes = treeSelectionArgTypes;
+
+export const LazyLoading = () => {
+  const [expandedKeys, setExpandedKeys] = useState<Set<string>>(new Set());
+  const [loaded, setLoaded] = useState(false);
+  const [loading, setLoading] = useState(false);
+
+  return (
+    <Wrapper>
+      <Tree
+        aria-label="Lazy files"
+        expandedKeys={expandedKeys}
+        onExpandedChange={(keys) => {
+          setExpandedKeys(keys as Set<string>);
+          if (keys.has('remote') && !loaded && !loading) {
+            setLoading(true);
+            setTimeout(() => {
+              setLoaded(true);
+              setLoading(false);
+            }, 800);
+          }
+        }}
+        renderLoadingState={() => 'Loading...'}
+      >
+        <TreeItem
+          id="remote"
+          title="Remote folder"
+          hasChildItems
+          isLoading={loading}
+        >
+          {loaded ? (
+            <>
+              <TreeItem id="remote-a" title="Loaded file A" />
+              <TreeItem id="remote-b" title="Loaded file B" />
+            </>
+          ) : null}
+        </TreeItem>
+        <TreeItem id="local" title="Local file" />
+      </Tree>
+    </Wrapper>
+  );
+};