= {
21 | args: {
22 | axis: 'x',
23 | initial: 200,
24 | min: 100,
25 | max: 500,
26 | },
27 | render: (props) => (
28 |
29 | {({ position: x, endPosition: endX, isDragging, separatorProps }) => (
30 |
39 |
40 |
41 |
52 |
53 |
54 | )}
55 |
56 | ),
57 | };
58 |
--------------------------------------------------------------------------------
/stories/components/IdeClone.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import SampleSeparator from './SampleSeparator';
4 | import { useResizable } from '../../src';
5 | import { cn } from '../utils/cn';
6 |
7 | const IdeClone = (): JSX.Element => {
8 | const {
9 | isDragging: isTerminalDragging,
10 | position: terminalH,
11 | separatorProps: terminalDragBarProps,
12 | } = useResizable({
13 | axis: 'y',
14 | initial: 150,
15 | min: 50,
16 | reverse: true,
17 | });
18 | const {
19 | isDragging: isFileDragging,
20 | position: fileW,
21 | separatorProps: fileDragBarProps,
22 | } = useResizable({
23 | axis: 'x',
24 | initial: 250,
25 | min: 50,
26 | });
27 | const {
28 | isDragging: isPluginDragging,
29 | position: pluginW,
30 | separatorProps: pluginDragBarProps,
31 | } = useResizable({
32 | axis: 'x',
33 | initial: 200,
34 | min: 50,
35 | reverse: true,
36 | });
37 |
38 | return (
39 |
40 |
41 |
45 | File Tree
46 |
47 |
48 |
49 |
Editor
50 |
51 |
55 | Plugin
56 |
57 |
58 |
59 |
60 |
64 | Terminal
65 |
66 |
27 | {text || 'Drag center bar to resize'}
28 |
29 | {size && `(currentSize : ${size}px)`}
30 |
31 | );
32 | };
33 |
34 | export default SampleBox;
35 |
--------------------------------------------------------------------------------
/stories/components/SampleSeparator.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react';
2 |
3 | import { cn } from '../utils/cn';
4 |
5 | const SampleSeparator = ({ id = 'drag-bar', dir, isDragging, disabled, ...props }: any) => {
6 | const [isFocused, setIsFocused] = useState(false);
7 |
8 | return (
9 |
setIsFocused(true)}
20 | onBlur={() => setIsFocused(false)}
21 | {...props}
22 | />
23 | );
24 | };
25 |
26 | export default SampleSeparator;
27 |
--------------------------------------------------------------------------------
/stories/style/IdeClone.css:
--------------------------------------------------------------------------------
1 | .flex {
2 | display: flex;
3 | }
4 |
5 | .flex-column {
6 | flex-direction: column;
7 | }
8 |
9 | .shrink-0 {
10 | flex-shrink: 0;
11 | }
12 |
13 | .grow {
14 | flex-grow: 1;
15 | }
16 |
17 | .h-screen {
18 | height: 100vh;
19 | }
20 |
21 | .bg-darker {
22 | background-color: #202020;
23 | }
24 |
25 | .bg-dark {
26 | background-color: #2D3032;
27 | }
28 |
29 | .font-mono {
30 | font-family: monospace;
31 | }
32 |
33 | .color-white {
34 | color: white;
35 | }
36 |
37 | .overflow-hidden {
38 | overflow: hidden;
39 | }
40 |
41 | .contents {
42 | display: grid;
43 | place-items: center;
44 | transition: filter 0.2s ease-out, background-color 0.2s ease-out;
45 | font-size: 16px;
46 | }
47 |
48 | .dragging {
49 | filter: blur(5px);
50 | background-color: #555555;
51 | }
52 |
--------------------------------------------------------------------------------
/stories/style/SampleBox.css:
--------------------------------------------------------------------------------
1 | .sample-box{
2 | display: grid;
3 | place-items: center;
4 | flex-shrink: 0;
5 | }
6 |
7 | .sample-box.sample-box--blue{
8 | background-color: #f0f9ff;
9 | }
10 |
11 | .sample-box.sample-box--red{
12 | background-color: #fff1f2;
13 | }
14 |
--------------------------------------------------------------------------------
/stories/style/SampleSeparator.css:
--------------------------------------------------------------------------------
1 | .sample-drag-bar {
2 | flex-shrink: 0;
3 | width: 5px;
4 | margin: 0;
5 | border: none;
6 | background-color: #d1d5db;
7 | cursor: col-resize;
8 | transition: background-color 0.15s 0.15s ease-in-out;
9 | }
10 |
11 | .sample-drag-bar.sample-drag-bar--dragging,
12 | .sample-drag-bar:hover{
13 | background-color: #63B3ED;
14 | }
15 |
16 | .sample-drag-bar.sample-drag-bar--horizontal {
17 | height: 5px;
18 | width: 100%;
19 | cursor: row-resize;
20 | }
21 |
22 | .disabled {
23 | cursor: not-allowed;
24 | }
25 | .disabled:hover {
26 | background-color: #d1d5db;
27 | }
28 |
--------------------------------------------------------------------------------
/stories/utils/cn.ts:
--------------------------------------------------------------------------------
1 | export const cn = (...args: any[]) => args.filter(Boolean).join(' ');
2 |
--------------------------------------------------------------------------------
/tsconfig.build.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./tsconfig.json",
3 | "compilerOptions": {
4 | "rootDir": "src"
5 | },
6 | "exclude": [
7 | "lib/**/*",
8 | "stories/**/*"
9 | ],
10 | "include": [
11 | "src/**/*"
12 | ]
13 | }
14 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es5",
4 | "module": "esnext",
5 | "strict": true,
6 | "skipLibCheck": true,
7 | "declaration": true,
8 | "declarationMap": true,
9 | "pretty": true,
10 | "newLine": "lf",
11 | "outDir": "lib",
12 | "allowJs": true,
13 | "rootDir": "/",
14 | "lib": ["es6", "dom", "es2016", "es2017"],
15 | "jsx": "react",
16 | "allowSyntheticDefaultImports": true,
17 | "moduleResolution": "Node"
18 | },
19 | "exclude": [
20 | "lib/**/*"
21 | ],
22 | "include": [
23 | "src/**/*",
24 | "stories/**/*"
25 | ]
26 | }
27 |
--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite';
2 | import react from '@vitejs/plugin-react';
3 |
4 | export default defineConfig({
5 | plugins: [react()],
6 | });
7 |
--------------------------------------------------------------------------------