@tcn/ui 0.0.3 → 0.0.4

package/src/utils/click_away_listener.stories.tsx

@@ -1,16 +1,26 @@
 import React, { useRef, useState } from 'react';
-import { ClickAwayListener } from './click_away_listener.js';
+import { ClickAwayListener as ClickAwayListenerComponent } from './click_away_listener.js';
 
 export default {
-  title: 'Click Away Listener',
+  title: 'Utils/Click Away Listener',
+  component: ClickAwayListenerComponent,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'A utility component that can be used to listen for click away events.',
+      },
+    },
+  },
 };
 
-export function Baseline() {
+export function ClickAwayListener() {
   const [message, setMessage] = useState('');
 
   return (
     <div>
-      <ClickAwayListener
+      <ClickAwayListenerComponent
         onClickAway={() => {
           setMessage('Clicked Outside');
         }}
@@ -27,7 +37,7 @@ export function Baseline() {
         >
           {message}
         </div>
-      </ClickAwayListener>
+      </ClickAwayListenerComponent>
     </div>
   );
 }
@@ -40,7 +50,7 @@ export function OtherRefChecks() {
 
   return (
     <div>
-      <ClickAwayListener
+      <ClickAwayListenerComponent
         refs={refs}
         onClickAway={() => {
           setMessage('Clicked Outside');
@@ -58,7 +68,7 @@ export function OtherRefChecks() {
         >
           {message}&nbsp;
         </div>
-      </ClickAwayListener>
+      </ClickAwayListenerComponent>
       <div
         ref={redRef}
         style={{
@@ -107,7 +117,7 @@ export function MountOnFocus() {
         }}
       />
       {show && (
-        <ClickAwayListener
+        <ClickAwayListenerComponent
           refs={refs}
           onClickAway={() => {
             setMessage('Clicked Outside');
@@ -129,7 +139,7 @@ export function MountOnFocus() {
           >
             {message}&nbsp;
           </div>
-        </ClickAwayListener>
+        </ClickAwayListenerComponent>
       )}
     </div>
   );
@@ -218,7 +228,7 @@ export function WithException() {
       </div>
 
       {/* Main click away listener */}
-      <ClickAwayListener onClickAway={handleClickAway} isException={isException}>
+      <ClickAwayListenerComponent onClickAway={handleClickAway} isException={isException}>
         <div
           style={{
             marginTop: '100px',
@@ -246,7 +256,7 @@ export function WithException() {
             </p>
           </div>
         </div>
-      </ClickAwayListener>
+      </ClickAwayListenerComponent>
 
       {/* Regular area that will trigger click away */}
       <div

package/src/utils/responsive/responsive_renderer.stories.tsx

@@ -2,11 +2,11 @@ import React from 'react';
 import { Meta } from '@storybook/react-vite';
 import { BodyText } from '../../typography/index.js';
 import { StyleBox } from '../../stacks/story_components/style_box.js';
-import { ResponsiveRenderer } from './responsive_renderer.js';
+import { ResponsiveRenderer as ResponsiveRendererComponent } from './responsive_renderer.js';
 
-const meta: Meta<typeof ResponsiveRenderer> = {
-  title: 'ResponsiveRenderer',
-  component: ResponsiveRenderer,
+const meta: Meta<typeof ResponsiveRendererComponent> = {
+  title: 'Utils/Responsive Renderer',
+  component: ResponsiveRendererComponent,
   tags: ['autodocs'],
   parameters: {
     layout: 'centered',
@@ -15,9 +15,9 @@ const meta: Meta<typeof ResponsiveRenderer> = {
 
 export default meta;
 
-export function Default() {
+export function ResponsiveRenderer() {
   return (
-    <ResponsiveRenderer
+    <ResponsiveRendererComponent
       mobile={
         <StyleBox
           className="surface-primary"
@@ -47,7 +47,7 @@ export function Default() {
 
 export function CustomBreakpoint() {
   return (
-    <ResponsiveRenderer
+    <ResponsiveRendererComponent
       breakpoint={1024}
       mobile={
         <StyleBox

package/src/utils/scroll_away_listener.stories.tsx

@@ -2,7 +2,17 @@ import React, { useState } from 'react';
 import { ScrollAwayListener } from './scroll_away_listener.js';
 
 export default {
-  title: 'Scroll Away Listener',
+  title: 'Utils/Scroll Away Listener',
+  component: ScrollAwayListener,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'A utility component that can be used to listen for scroll away events.',
+      },
+    },
+  },
 };
 
 export function Baseline() {

package/src/surfaces/modal/modal.stories.tsx

@@ -1,15 +0,0 @@
-import { Modal } from './modal.js';
-
-export default {
-  title: 'Frame / Modal',
-  component: Modal,
-  tags: ['autodocs'],
-};
-
-export const ModalStory = () => {
-  return (
-    <Modal>
-      <>modal</>
-    </Modal>
-  );
-};