Skip to content

Commit 5dbbcc0

Browse files
ma-efremoffma-efremoff
committed
chore: add storybook
1 parent b99cca7 commit 5dbbcc0

File tree

12 files changed

+140
-152
lines changed

12 files changed

+140
-152
lines changed

‎.storybook/preview.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React from 'react';
22

33
import type {Preview, Decorator} from '@storybook/react';
44
import '@gravity-ui/uikit/styles/styles.scss';
5+
import '@gravity-ui/unipika/styles/unipika.scss';
56

67
import {ThemeProvider, MobileProvider, configure as uikitConfigure} from '@gravity-ui/uikit';
78
import {configure} from '../src/configure';

‎README.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,9 @@ Depending on your package manager you may need to install `peerDependencies` man
2323
## Usage
2424

2525
```ts
26+
import '@gravity-ui/uikit/styles/styles.scss';
27+
import '@gravity-ui/unipika/styles/unipika.scss';
28+
2629
import {ReactUnipika} from '@gravity-ui/react-unipika';
2730

2831
function renderJson(data: any) {

‎src/ClickableText/ClickableText.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import React from 'react';
22

3-
import {ruCN} from '../utils/classname';
3+
import {cn} from '../utils/classname';
44

55
import './ClickableText.scss';
6-
const block = ruCN('yt-clickable-text');
6+
const block = cn('g-ru-clickable-text');
77

88
export type ClickableTextProps = {
99
className?: string;

‎src/HighlightedText/HighlightedText.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,7 @@ export function MultiHighlightedText({
7272
if (substr) {
7373
substrs.push(
7474
<HighlightedText
75+
key={i}
7576
className={className}
7677
classNameHighlighted={classNameHighlighted}
7778
text={substr}

‎src/ReactUnipika/ReactUnipika.tsx‎

Lines changed: 83 additions & 123 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,15 @@
11
import React from 'react';
2-
import isEqual_ from 'lodash/isEqual';
32

43
import type {Settings} from '@gravity-ui/react-data-table';
54
// @ts-expect-error
6-
import unipika from '@gravity-ui/unipika';
5+
import unipika from '@gravity-ui/unipika/lib/unipika';
76

8-
import {UnipikaSettings, UnipikaValue} from '../StructuredYson/types';
7+
import {UnipikaSettings} from '../StructuredYson/types';
98

109
import {StructuredYson} from '../StructuredYson/StructuredYson';
11-
import {ruCN} from '../utils/classname';
10+
import {cn} from '../utils/classname';
1211

13-
const block = ruCN('react-unipika');
12+
const block = cn('g-ru-react-unipika');
1413

1514
export interface ReactUnipikaProps {
1615
settings?: UnipikaSettings;
@@ -25,138 +24,99 @@ export interface ReactUnipikaProps {
2524
toolbarStickyTop?: number;
2625
}
2726

28-
interface State {
29-
convertedValue: UnipikaValue;
30-
value: ReactUnipikaProps['value'];
31-
settings: ReactUnipikaProps['settings'];
32-
}
33-
34-
const INITIAL = {};
35-
36-
export class ReactUnipika extends React.Component<ReactUnipikaProps, State> {
37-
static defaultUnipikaSettings = {
38-
asHTML: true,
39-
format: 'json',
40-
compact: false,
41-
escapeWhitespace: true,
42-
showDecoded: true,
43-
binaryAsHex: true,
44-
};
45-
46-
static defaultProps = {
47-
inline: false,
48-
virtualized: true,
49-
settings: ReactUnipika.defaultUnipikaSettings,
50-
toolbarStickyTop: 0,
51-
};
52-
53-
static getDerivedStateFromProps(props: ReactUnipikaProps, state: State) {
54-
const {value: prevValue, settings: prevSettings} = state;
55-
const {value, settings = {}} = props;
27+
const defaultUnipikaSettings = {
28+
asHTML: true,
29+
format: 'json',
30+
compact: false,
31+
escapeWhitespace: true,
32+
showDecoded: true,
33+
binaryAsHex: true,
34+
};
35+
36+
export function ReactUnipika({
37+
value,
38+
settings = defaultUnipikaSettings,
39+
inline = false,
40+
children,
41+
virtualized = true,
42+
extraTools,
43+
className,
44+
tableSettings,
45+
customLayout,
46+
toolbarStickyTop = 0,
47+
}: ReactUnipikaProps) {
48+
const convertedValue = React.useMemo(() => {
49+
// TODO: fix me later
50+
// The call is required because unipika.format() applies default values to a passed settings inplace.
51+
// We have to leave this call without it the behaviour will be broken.
52+
if (settings.format === 'raw-json') {
53+
unipika.formatRaw(value, settings);
54+
} else {
55+
unipika.formatFromYSON(value, settings);
56+
}
5657

57-
if (
58-
prevValue === INITIAL ||
59-
!isEqual_(prevValue, value) ||
60-
!isEqual_(prevSettings, settings)
61-
) {
62-
// TODO: fix me later
63-
// The call is required because unipika.format() applies default values to a passed settings inplace.
64-
// We have to leave this call without it the behaviour will be broken.
65-
if (settings.format === 'raw-json') {
66-
unipika.formatRaw(value, settings);
67-
} else {
68-
unipika.formatFromYSON(value, settings);
69-
}
58+
if (value === undefined) {
59+
return '';
60+
}
7061

71-
return {
72-
convertedValue:
73-
value === undefined
74-
? ''
75-
: settings!.format === 'raw-json'
76-
? unipika.converters.raw(value, settings)
77-
: unipika.converters.yson(value, settings),
78-
value: value,
79-
settings: settings,
80-
};
62+
if (settings.format === 'raw-json') {
63+
return unipika.converters.raw(value, settings);
8164
}
82-
return null;
83-
}
8465

85-
state: State = {
86-
convertedValue: undefined as any, // getDerivedStateFromProps should provide correct vgitalue for this field
87-
value: INITIAL,
88-
settings: {format: ''},
89-
};
66+
return unipika.converters.yson(value, settings);
67+
}, [value, settings]);
68+
69+
const classes = block(
70+
{
71+
inline: inline && 'yes',
72+
},
73+
className,
74+
);
9075

91-
getFormattedTitle() {
92-
const {inline} = this.props;
76+
function getFormattedTitle() {
9377
if (!inline) {
9478
return undefined;
9579
}
9680

97-
const {convertedValue, settings} = this.state;
9881
const titleSettings = Object.assign({}, settings, {asHTML: false});
99-
10082
return unipika.format(convertedValue, titleSettings);
10183
}
10284

103-
getFormattedValue() {
104-
const {convertedValue, settings} = this.state;
85+
function getFormattedValue() {
10586
return unipika.format(convertedValue, settings);
10687
}
10788

108-
render() {
109-
const {
110-
inline,
111-
children,
112-
virtualized,
113-
extraTools,
114-
className,
115-
tableSettings,
116-
customLayout,
117-
toolbarStickyTop,
118-
} = this.props;
119-
const {convertedValue, settings} = this.state;
120-
121-
const classes = block(
122-
{
123-
inline: inline && 'yes',
124-
},
125-
className,
126-
);
127-
128-
return settings!.asHTML ? (
129-
<div className={classes} title={this.getFormattedTitle()} dir="auto">
130-
{virtualized ? (
131-
<StructuredYson
132-
tableSettings={tableSettings}
133-
value={convertedValue}
134-
settings={settings!}
135-
extraTools={extraTools}
136-
customLayout={customLayout}
137-
toolbarStickyTop={toolbarStickyTop}
138-
/>
139-
) : (
140-
<pre
141-
className="unipika"
142-
dangerouslySetInnerHTML={{
143-
__html: this.getFormattedValue(),
144-
}}
145-
/>
146-
)}
147-
{children}
148-
</div>
149-
) : (
150-
<div
151-
className={classes}
152-
title={this.getFormattedTitle()}
153-
dangerouslySetInnerHTML={{
154-
__html: this.getFormattedValue(),
155-
}}
156-
dir="auto"
157-
>
158-
{children}
159-
</div>
160-
);
161-
}
89+
return settings.asHTML ? (
90+
<div className={classes} title={getFormattedTitle()} dir="auto">
91+
{virtualized ? (
92+
<StructuredYson
93+
tableSettings={tableSettings}
94+
value={convertedValue}
95+
settings={settings}
96+
extraTools={extraTools}
97+
customLayout={customLayout}
98+
toolbarStickyTop={toolbarStickyTop}
99+
/>
100+
) : (
101+
<pre
102+
className="unipika"
103+
dangerouslySetInnerHTML={{
104+
__html: getFormattedValue(),
105+
}}
106+
/>
107+
)}
108+
{children}
109+
</div>
110+
) : (
111+
<div
112+
className={classes}
113+
title={getFormattedTitle()}
114+
dangerouslySetInnerHTML={{
115+
__html: getFormattedValue(),
116+
}}
117+
dir="auto"
118+
>
119+
{children}
120+
</div>
121+
);
162122
}

‎src/ReactUnipika/__stories__/ReactUnipika.stories.tsx‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import {Meta, StoryObj} from '@storybook/react';
2+
3+
import {ReactUnipika, ReactUnipikaProps} from '../../index';
4+
5+
const meta: Meta<ReactUnipikaProps> = {
6+
title: 'ReactUnipika',
7+
component: ReactUnipika,
8+
};
9+
export default meta;
10+
11+
export const Default: StoryObj<ReactUnipikaProps> = {
12+
args: {
13+
value: {foo: 'bar', hello: {world: 'Hello world'}},
14+
},
15+
};

‎src/StickyContainer/StickyContainer.scss‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,13 @@
33
position: sticky;
44
z-index: 1;
55

6-
background-color: var(--main-background);
7-
box-shadow: 0 1px 10px var(--opacity-background);
6+
background-color: var(--g-color-base-background);
7+
box-shadow: 0 3px 3px 0px var(--g-color-sfx-shadow-light);
88

9-
width: calc(100vw - var(--gn-aside-header-size));
109
margin-left: -20px;
1110
padding-left: 20px;
1211
padding-right: 20px;
1312

14-
&_top {
15-
top: var(--app-header-height);
16-
}
13+
top: var(--g-ru-sticky-container-top);
1714
}
1815
}

‎src/StickyContainer/StickyContainer.tsx‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
import React from 'react';
22

3-
import {ruCN} from '../utils/classname';
3+
import {cn} from '../utils/classname';
44
import './StickyContainer.scss';
5+
import {CSSProperties} from '@gravity-ui/uikit';
56

6-
const block = ruCN('sticky-container');
7+
const block = cn('g-ru-sticky-container');
78

89
export function StickyContainer({
910
className,
@@ -45,12 +46,16 @@ export function StickyContainer({
4546
setElement(div);
4647
}, []);
4748

49+
const style = React.useMemo(() => {
50+
return {'--g-ru-sticky-container-top': `${topOffset}px`} as CSSProperties;
51+
}, [topOffset]);
52+
4853
return (
49-
<div className={block(null, className)}>
54+
<div className={block(null, className)} style={style}>
5055
<div className={block('top')} ref={onRef} />
5156
{children({
5257
sticky,
53-
topStickyClassName: sticky ? block('sticky', {top: true}) : undefined,
58+
topStickyClassName: sticky ? block('sticky') : undefined,
5459
})}
5560
</div>
5661
);

‎src/StructuredYson/StructuredYson.scss‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,8 @@
11
.g-ru-structured-yson {
2+
* {
3+
box-sizing: border-box;
4+
}
5+
26
$rowHeight: 20px;
37

48
&__toolbar {
@@ -31,8 +35,9 @@
3135
}
3236

3337
&__match-counter {
34-
color: var(--secondary-text);
38+
color: var(--g-color-text-secondary);
3539
padding-left: 1ex;
40+
white-space: nowrap;
3641
}
3742

3843
&__key {
@@ -61,7 +66,7 @@
6166

6267
&__filtered {
6368
&_highlighted {
64-
background-color: var(--action-button-color);
69+
background-color: var(--g-color-base-selection);
6570
}
6671
}
6772

0 commit comments

Comments
 (0)