sqlmesh/web/common/src/components/ScrollContainer/ScrollContainer.stories.tsx at v0.229.0 · SQLMesh/sqlmesh · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
import { ScrollContainer, type ScrollContainerProps } from './ScrollContainer'

export default {
  title: 'Components/Containers/ScrollContainer',
  component: ScrollContainer,
}

const content = Array.from({ length: 30 }, (_, i) => (
  <div
    key={i}
    style={{ padding: 8, borderBottom: '1px solid #eee' }}
  >
    Row {i + 1}
  </div>
))

export const VerticalScroll = (args: ScrollContainerProps) => (
  <div style={{ height: 200, width: 300, border: '1px solid #ccc' }}>
    <ScrollContainer
      {...args}
      direction="vertical"
    >
      {content}
    </ScrollContainer>
  </div>
)

export const HorizontalScroll = (args: ScrollContainerProps) => (
  <div style={{ width: 300, border: '1px solid #ccc', overflow: 'hidden' }}>
    <ScrollContainer
      {...args}
      direction="horizontal"
    >
      <div style={{ display: 'flex' }}>
        {Array.from({ length: 10 }, (_, i) => (
          <span
            key={i}
            style={{
              display: 'inline-block',
              width: 150,
              padding: 8,
              borderRight: '1px solid #eee',
            }}
          >
            Column {i + 1}
          </span>
        ))}
      </div>
    </ScrollContainer>
  </div>
)

export const BothDirectionsScroll = (args: ScrollContainerProps) => (
  <div style={{ height: 200, width: 300, border: '1px solid #ccc' }}>
    <ScrollContainer
      {...args}
      direction="both"
    >
      <div style={{ width: 600 }}>
        {Array.from({ length: 30 }, (_, i) => (
          <div
            key={i}
            style={{
              padding: 8,
              borderBottom: '1px solid #eee',
              whiteSpace: 'nowrap',
            }}
          >
            Row {i + 1} - This is a long line of text that should cause
            horizontal scrolling when combined with the vertical scroll
          </div>
        ))}
      </div>
    </ScrollContainer>
  </div>
)

export const CustomClassName = (args: ScrollContainerProps) => (
  <div style={{ height: 200, width: 300 }}>
    <ScrollContainer
      {...args}
      className="bg-neutral-10 p-4 rounded-2xl"
    >
      {content}
    </ScrollContainer>
  </div>
)
CustomClassName.storyName = 'With Custom ClassName'

export const PageContentLayout = (args: ScrollContainerProps) => (
  <div style={{ height: '90vh', width: '100%', border: '1px solid #ccc' }}>
    <ScrollContainer {...args}>
      <div className="flex flex-col gap-4">
        <div className="flex flex-col gap-4 bg-neutral-10 p-4 rounded-2xl">
          Actions
        </div>
        <div
          className="flex flex-col gap-4 bg-neutral-10 p-4 rounded-2xl"
          style={{ height: '2000px' }}
        >
          Content
        </div>
        <div className="flex flex-col gap-4 bg-neutral-10 p-4 rounded-2xl">
          End
        </div>
      </div>
    </ScrollContainer>
  </div>
)