ui: scrollbar mdx file added

2025-12-06 04:19:43 +00:00 · 2023-03-09 19:03:57 +05:30
parent 6fb0d6383e
commit 50d06c5708
5 changed files with 169 additions and 54 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -19,6 +19,8 @@ pnpm-lock.yaml
 !packages-executors/http-executor/src/src/cacert.pem
 !platform/firecamp-ui/src/declarations.d.ts

+.jest-test-results.json
+
 # Logs
 *.log
 npm-debug.log*
--- a/platform/firecamp-ui/src/components/scroll-bar/ScrollBar.stories.mdx
+++ b/platform/firecamp-ui/src/components/scroll-bar/ScrollBar.stories.mdx
@@ -0,0 +1,29 @@
+import { Meta } from '@storybook/addon-docs';
+import LinkTo from '@storybook/addon-links/react';
+
+<Meta title="UI-Kit/ScrollBar/Overview" />
+
+## **ScrollBar**
+
+To display the custom scrollbar instead of default.
+
+#### **Component Usage**:
+
+- Wrap the component to display the scrollbar
+
+- Provide the width & height to the classname
+
+| Prop      | Preview                                                 |
+| --------- | ------------------------------------------------------- |
+| className | Provide the width & height of the content to be wrapped |
+|           | - Add height for vertical scrolling                     |
+|           | - Add width for horizontal scrolling                    |
+| noWrap    | wrap content for displaying Horizontal scroll           |
+
+#### **References**:
+
+ScrollBar usage:
+
+<LinkTo kind="/story/ui-kit-scrollbar--demo" className="!text-primaryColor">
+  Refer Example
+</LinkTo>
--- a/platform/firecamp-ui/src/components/scroll-bar/ScrollBar.stories.tsx
+++ b/platform/firecamp-ui/src/components/scroll-bar/ScrollBar.stories.tsx
@@ -9,35 +9,117 @@ export default {
 };

 export const Demo = () => (
-  <ScrollBar>
+  <ScrollBar className="w-[200px] h-[200px]" noWrap>
    <div style={{ padding: '15px 20px' }}>
      <div className="text-lg font-medium">Tags</div>
      <hr />
      {[
-        'TAGS 1',
-        'TAGS 2',
-        'TAGS 3',
-        'TAGS 4',
-        'TAGS 5',
-        'TAGS 6',
-        'TAGS 7',
-        'TAGS 1.0',
-        'TAGS 2.0',
-        'TAGS 3.0',
-        'TAGS 4.0',
-        'TAGS 5.0',
-        'TAGS 6.0',
-        'TAGS 7.0',
-        'TAGS 1.1',
-        'TAGS 2.1',
-        'TAGS 3.1',
-        'TAGS 4.1',
-        'TAGS 5.1',
-        'TAGS 6.1',
-        'TAGS 7.1',
+        '1',
+        '2',
+        '3',
+        '4',
+        '5',
+        '6',
+        '7',
+        '8',
+        '9',
+        '10',
+        '11',
+        '12',
+        '13',
+        '14',
+        '15',
+        '16',
+        '17',
+        '18',
+        '19',
+        '20',
      ].map((tag) => (
        <div className="text-sm mt-2 pt-3" key={tag}>
-          {tag}
+          {tag}. &nbsp; "In publishing and graphic design, Lorem ipsum is a
+          placeholder text commonly used to demonstrate the visual form of a
+          document or a typeface without relying on meaningful content. " "In
+          publishing and graphic design, Lorem ipsum is a placeholder text
+          commonly used to demonstrate the visual form of a document or a
+          typeface without relying on meaningful content. "
+        </div>
+      ))}
+    </div>
+  </ScrollBar>
+);
+export const VerticalScroll = () => (
+  <ScrollBar className=" h-[200px]">
+    <div style={{ padding: '15px 20px' }}>
+      <div className="text-lg font-medium">Tags</div>
+      <hr />
+      {[
+        '1',
+        '2',
+        '3',
+        '4',
+        '5',
+        '6',
+        '7',
+        '8',
+        '9',
+        '10',
+        '11',
+        '12',
+        '13',
+        '14',
+        '15',
+        '16',
+        '17',
+        '18',
+        '19',
+        '20',
+      ].map((tag) => (
+        <div className="text-sm mt-2 pt-3" key={tag}>
+          {tag}. &nbsp; "In publishing and graphic design, Lorem ipsum is a
+          placeholder text commonly used to demonstrate the visual form of a
+          document or a typeface without relying on meaningful content. " "In
+          publishing and graphic design, Lorem ipsum is a placeholder text
+          commonly used to demonstrate the visual form of a document or a
+          typeface without relying on meaningful content. "
+        </div>
+      ))}
+    </div>
+  </ScrollBar>
+);
+export const HorizontalScroll = () => (
+  <ScrollBar className=" w-[200px] h-[50vh]" noWrap>
+    <div style={{ padding: '15px 20px' }}>
+      <div className="text-lg font-medium">Tags</div>
+      <hr />
+      {[
+        '1',
+        '2',
+        '3',
+        '4',
+        '5',
+        '6',
+        '7',
+        '8',
+        '9',
+        '10',
+        '11',
+        '12',
+        '13',
+        '14',
+        '15',
+        '16',
+        '17',
+        '18',
+        '19',
+        '20',
+      ].map((tag) => (
+        <div className="text-sm mt-2 pt-3" key={tag}>
+          {tag}. &nbsp; "In publishing and graphic design, Lorem ipsum is a
+          placeholder text commonly used to demonstrate the visual form of a
+          document or a typeface without relying on meaningful content. " "In
+          publishing and graphic design, Lorem ipsum is a placeholder text
+          commonly used to demonstrate the visual form of a document or a
+          typeface without relying on meaningful content. "
        </div>
      ))}
    </div>
--- a/platform/firecamp-ui/src/components/scroll-bar/ScrollBar.tsx
+++ b/platform/firecamp-ui/src/components/scroll-bar/ScrollBar.tsx
@@ -1,17 +1,21 @@
 import * as ScrollArea from '@radix-ui/react-scroll-area';
 import classnames from 'classnames';

-const ScrollBar = ({ children = <></> }) => (
+const ScrollBar = ({ children = <></>, className = '', noWrap = false }) => (
  <ScrollArea.Root
    className={classnames(
-      'rounded overflow-hidden shadow-sm bg-primaryColorText',
-      ' h-[225px] w-[200px]'
+      'rounded overflow-hidden shadow-md bg-primaryColorText',
+      {'whitespace-nowrap': noWrap },
+      className
    )}
    style={{ '--scrollbar-size': '10px' }}
+   type="always"
  >
    <ScrollArea.Viewport className={classnames('w-full h-full')}>
      {children}
    </ScrollArea.Viewport>
+
+    {/* horizontal scrollbar */}
    <ScrollArea.Scrollbar
      className="flex flex-col select-none p-0.5 touch-none
      bg-activityBarBorder
@@ -25,6 +29,8 @@ const ScrollBar = ({ children = <></> }) => (
    >
      <ScrollArea.Thumb className="flex-1 bg-appBackground" />
    </ScrollArea.Scrollbar>
+
+    {/* vertical scrollbar */}
    <ScrollArea.Scrollbar
      className="flex select-none p-0.5 touch-none
      bg-activityBarBorder
@@ -38,6 +44,8 @@ const ScrollBar = ({ children = <></> }) => (
    >
      <ScrollArea.Thumb className="flex-1 bg-appBackground" />
    </ScrollArea.Scrollbar>
+
+
    <ScrollArea.Corner className="bg-focus2" />
  </ScrollArea.Root>
 );
--- a/platform/firecamp-ui/src/scss/tailwind.scss
+++ b/platform/firecamp-ui/src/scss/tailwind.scss
@@ -863,6 +863,12 @@ video {
 .bottom-0 {
 	bottom: 0px;
 }
+.left-2 {
+	left: 0.5rem;
+}
+.-top-2 {
+	top: -0.5rem;
+}
 .\!top-4 {
 	top: 1rem !important;
 }
@@ -881,9 +887,6 @@ video {
 .top-3 {
 	top: 0.75rem;
 }
-.left-2 {
-	left: 0.5rem;
-}
 .right-2 {
 	right: 0.5rem;
 }
@@ -899,9 +902,6 @@ video {
 .-bottom-px {
 	bottom: -1px;
 }
-.-top-2 {
-	top: -0.5rem;
-}
 .left-1 {
 	left: 0.25rem;
 }
@@ -947,9 +947,6 @@ video {
 .m-5 {
 	margin: 1.25rem;
 }
-.m-5 {
-	margin: 1.25rem;
-}
 .m-auto {
 	margin: auto;
 }
@@ -1228,8 +1225,11 @@ video {
 .h-0 {
 	height: 0px;
 }
-.h-\[225px\] {
-	height: 225px;
+.h-\[200px\] {
+	height: 200px;
+}
+.h-\[50vh\] {
+	height: 50vh;
 }
 .h-32 {
 	height: 8rem;
@@ -1358,9 +1358,6 @@ video {
 .flex-1 {
 	flex: 1 1 0%;
 }
-.flex-grow {
-	flex-grow: 1;
-}
 .border-collapse {
 	border-collapse: collapse;
 }
@@ -1459,6 +1456,9 @@ video {
 .overflow-ellipsis {
 	text-overflow: ellipsis;
 }
+.whitespace-nowrap {
+	white-space: nowrap;
+}
 .whitespace-pre {
 	white-space: pre;
 }
@@ -1636,6 +1636,9 @@ video {
 .bg-activityBarActiveBackground {
 	background-color: var(--activityBar-activeBackground);
 }
+.bg-appForegroundInActive {
+	background-color: var(--app-foreground-inactive);
+}
 .bg-focus3 {
 	background-color: var(--focus-level-3);
 }
@@ -2060,9 +2063,6 @@ video {
 .text-xl {
 	font-size: 18px;
 }
-.text-xl {
-	font-size: 18px;
-}
 .font-normal {
 	font-weight: 400;
 }
@@ -2140,24 +2140,18 @@ video {
 	--tw-text-opacity: 1;
 	color: rgba(255, 255, 255, var(--tw-text-opacity));
 }
-.text-appForeground {
-	color: var(--app-foreground);
-}
 .text-danger {
 	color: var(--danger);
 }
+.text-appForegroundInActive {
+	color: var(--app-foreground-inactive);
+}
 .text-popoverForeground {
 	color: var(--popover-foreground);
 }
-.text-appForegroundInActive {
-	color: var(--app-foreground-inactive);
-}
 .text-statusBarForeground {
 	color: var(--statusBar-foreground);
 }
-.text-appForegroundInActive {
-	color: var(--app-foreground-inactive);
-}
 .text-websocket {
 	color: var(--req-socketio);
 }
@@ -2237,8 +2231,8 @@ video {
 	--tw-shadow: var(--popoverBoxshadow) !important;
 	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
 }
-.shadow-sm {
-	--tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+.shadow-md {
+	--tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
 	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 .outline-none {