Skip to content

Commit 83b9e4d

Browse files
gtk-grafanagtk-grafana
committed
chore: add scss scaffolding
1 parent 6980e45 commit 83b9e4d

14 files changed

+46
-26
lines changed

‎eslint.config.js

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,9 @@ import reactHooks from 'eslint-plugin-react-hooks'
44
import reactRefresh from 'eslint-plugin-react-refresh'
55
import tseslint from 'typescript-eslint'
66
import eslintConfigPrettier from 'eslint-config-prettier'
7-
import storybook from 'eslint-plugin-storybook'
87

98
export default tseslint.config(
10-
{ ignores: ['dist', '.storybook'] },
9+
{ ignores: ['dist'] },
1110
{
1211
extends: [js.configs.recommended, ...tseslint.configs.recommended, eslintConfigPrettier],
1312
files: ['**/*.{ts,tsx}'],
@@ -26,6 +25,5 @@ export default tseslint.config(
2625
},
2726
{
2827
files: ['**/*.stories.@(ts|tsx|js|jsx|mjs|cjs)'],
29-
extends: [...storybook.configs['flat/recommended']],
3028
}
3129
)

‎src/ItemRange.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React, { useCallback, useState } from 'react';
22
import JSONArrow from './JSONArrow.js';
33
import type { CircularCache, CommonInternalProps } from './types.js';
4+
import styles from './styles/itemRange.module.scss'
45

56
interface Props extends CommonInternalProps {
67
data: unknown;
@@ -21,11 +22,11 @@ export default function ItemRange(props: Props) {
2122
}, [expanded]);
2223

2324
return expanded ? (
24-
<div className={`itemRange itemRange--${expanded}`}>
25+
<div className={`${styles.itemRange} ${expanded ? styles.itemRangeExpanded : ''}`}>
2526
{renderChildNodes(props, from, to)}
2627
</div>
2728
) : (
28-
<div className={`itemRange itemRange--${expanded}`} onClick={handleClick}>
29+
<div className={`${styles.itemRange} ${expanded ? styles.itemRangeExpanded : ''}`}>
2930
<JSONArrow
3031
nodeType={nodeType}
3132
expanded={false}

‎src/JSONArrayNode.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import React from 'react';
21
import JSONNestedNode from './JSONNestedNode.js';
32
import type { CommonInternalProps } from './types.js';
43

‎src/JSONArrow.tsx

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import React from 'react';
2+
import styles from "./styles/JSONArrow.module.scss"
23

34
interface Props {
45
arrowStyle?: 'single' | 'double';
@@ -14,12 +15,12 @@ export default function JSONArrow({
1415
onClick,
1516
}: Props) {
1617
return (
17-
<div className={'arrowContainer'} onClick={onClick}>
18-
<div className={`arrow arrow--node-type-${nodeType} arrow--expanded-${expanded} arrow--arrow-style-${arrowStyle}`}>
18+
<div className={styles.arrow__container} onClick={onClick}>
19+
<div className={`${styles.arrow} arrow--node-type-${nodeType} ${expanded ? styles.arrowExpanded : ''} arrow--arrow-style-${arrowStyle === 'single' ? styles.arrowArrowStyleSingle : styles.arrowArrowStyleDouble}`}>
1920
{/* @todo let implementer define custom arrow object */}
2021
{'\u25B6'}
2122
{arrowStyle === 'double' && (
22-
<div className={'arrow__inner'}>{'\u25B6'}</div>
23+
<div className={styles.arrow__inner}>{'\u25B6'}</div>
2324
)}
2425
</div>
2526
</div>

‎src/JSONIterableNode.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import React from 'react';
21
import JSONNestedNode from './JSONNestedNode.js';
32
import type { CommonInternalProps } from './types.js';
43

‎src/JSONNestedNode.tsx

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import getCollectionEntries from './getCollectionEntries.js';
44
import JSONNode from './JSONNode.js';
55
import ItemRange from './ItemRange.js';
66
import type { CircularCache, CommonInternalProps } from './types.js';
7+
import styles from "./styles/JSONNestedNode.module.scss"
78

89
/**
910
* Renders nested values (eg. objects, arrays, lists, etc.)
@@ -127,7 +128,7 @@ export default function JSONNestedNode(props: Props) {
127128
: null;
128129

129130
const itemType = (
130-
<span className={`nestedNodeItemType nestedNodeItemType--expanded-${expanded}`}>
131+
<span className={ `${styles.nestedNodeItemType} ${expanded? styles.nestedNodeItemTypeExpanded : ''}`}>
131132
{nodeTypeIndicator}
132133
</span>
133134
);
@@ -147,7 +148,7 @@ export default function JSONNestedNode(props: Props) {
147148
</ul>
148149
</li>
149150
) : (
150-
<li className={`nestedNode nestedNode--keypath-${keyPath[0]} nestedNode--nodetype-${nodeType} nestedNode--expanded-${expanded} nestedNode--expandable-${expandable}`}>
151+
<li className={`${styles.nestedNode} nestedNode--keypath-${keyPath[0]} nestedNode--nodetype-${nodeType} ${expanded ? styles.nestedNodeExpanded : ''} ${expandable ? styles.nestedNodeExpandable : ''}`}>
151152
{expandable && (
152153
<JSONArrow
153154
nodeType={nodeType}
@@ -162,13 +163,13 @@ export default function JSONNestedNode(props: Props) {
162163
{labelRenderer(...stylingArgs)}
163164
</span>
164165
<span
165-
className={`nestedNodeItemString nestedNodeItemString--keypath-${keyPath[0]} nestedNodeItemString--nodetype-${nodeType} nestedNodeItemString--expanded-${expanded} nestedNodeItemString--expandable-${expandable}`}
166+
className={styles.nestedNode__itemString}
166167
onClick={handleClick}
167168
>
168169
{renderedItemString}
169170
</span>
170171
<ul
171-
className={`nestedNodeChildren nestedNodeChildren--keypath-${keyPath[0]} nestedNodeChildren--nodetype-${nodeType} nestedNodeChildren--expanded-${expanded} nestedNodeChildren--expandable-${expandable}`}
172+
className={styles.nestedNode__children}
172173
>
173174
{renderedChildren}
174175
</ul>

‎src/JSONNode.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import React from 'react';
21
import objType from './objType.js';
32
import JSONObjectNode from './JSONObjectNode.js';
43
import JSONArrayNode from './JSONArrayNode.js';

‎src/JSONObjectNode.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import React from 'react';
21
import JSONNestedNode from './JSONNestedNode.js';
32
import type { CommonInternalProps } from './types.js';
43

‎src/JSONValueNode.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
import React from 'react';
21
import type {
32
GetItemString,
43
Key,
54
KeyPath,
65
LabelRenderer,
76
ValueRenderer,
87
} from './types.js';
8+
import styles from "./styles/JSONValueNode.module.scss"
99

1010
/**
1111
* Renders simple values (eg. strings, numbers, booleans, etc)
@@ -31,11 +31,11 @@ export default function JSONValueNode({
3131
valueGetter = (value) => value,
3232
}: Props) {
3333
return (
34-
<li className={`value value--${nodeType} value--${keyPath}`}>
35-
<span className={`label valueLabel valueLabel---node-type-${nodeType} valueLabel--key-path-${keyPath}`}>
34+
<li className={`${styles.valueNode} valueNode--${nodeType} valueNode--${keyPath}`}>
35+
<span className={styles.valueNode__label}>
3636
{labelRenderer(keyPath, nodeType, false, false)}
3737
</span>
38-
<span className={`valueText valueText--node-type-${nodeType} valueText--key-path-${keyPath}`}>
38+
<span className={styles.valueNode__value}>
3939
{valueRenderer(valueGetter ? valueGetter(value) : undefined, value, ...keyPath)}
4040
</span>
4141
</li>

��src/styles/JSONArrow.module.scss

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
.arrow{
2+
&__container{}
3+
&--node-type{}
4+
&--expanded{}
5+
&--arrow-style{
6+
&--single{}
7+
&--double{}
8+
}
9+
&__inner{}
10+
}

‎src/styles/JSONNestedNode.module.scss

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
.nestedNode{
2+
&--expanded{}
3+
&--expandable{}
4+
&--itemType{
5+
&--expanded{}
6+
}
7+
8+
&__itemString{}
9+
&__children{}
10+
}

‎src/styles/JSONValueNode.module.scss

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
.valueNode{
2+
&__label{}
3+
&__value{}
4+
}

‎src/styles/itemRange.module.scss

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.itemRange{
2+
&--expanded{}
3+
}

‎vite.config.ts

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -68,13 +68,9 @@ export default defineConfig({
6868
test: {
6969
globals: true,
7070
environment: 'jsdom',
71-
setupFiles: './src/test/setup.ts',
72-
// you might want to disable it, if you don't have tests that rely on CSS
73-
// since parsing CSS is slow
74-
css: true,
71+
// css: true,
7572
coverage: {
76-
include: ['src/components'],
77-
exclude: ['**/*.stories.tsx'],
73+
include: ['src/'],
7874
},
7975
},
8076
})

0 commit comments

Comments
 (0)