primer / react
File Size

The distribution of size of files (measured in lines of code).

Intro
  • File size measurements show the distribution of size of files.
  • Files are classified in four categories based on their size (lines of code): 1-100 (very small files), 101-200 (small files), 201-500 (medium size files), 501-1000 (long files), 1001+(very long files).
  • It is a good practice to keep files small. Long files may become "bloaters", code that have increased to such gargantuan proportions that they are hard to work with.
Learn more...
File Size Overall
  • There are 267 files with 21,312 lines of code.
    • 1 very long files (1,065 lines of code)
    • 3 long files (1,703 lines of code)
    • 21 medium size files (6,054 lines of codeclsfd_ftr_w_mp_ins)
    • 45 small files (6,093 lines of code)
    • 197 very small files (6,397 lines of code)
4% | 7% | 28% | 28% | 30%
Legend:
1001+
501-1000
201-500
101-200
1-100


explore: zoomable circles | sunburst | 3D view
File Size per Extension
1001+
501-1000
201-500
101-200
1-100
tsx5% | 8% | 29% | 29% | 26%
js0% | 0% | 34% | 0% | 65%
ts0% | 0% | 15% | 26% | 57%
rb0% | 0% | 0% | 100% | 0%
File Size per Logical Decomposition
primary
1001+
501-1000
201-500
101-200
1-100
src5% | 8% | 28% | 29% | 29%
codemods0% | 0% | 52% | 0% | 47%
script0% | 0% | 0% | 62% | 37%
ROOT0% | 0% | 0% | 0% | 100%
Longest Files (Top 50)
File# lines# units
fixtures.stories.tsx
in src/stories/ActionList2
1065 20
607 3
566 2
fixtures.stories.tsx
in src/stories/ActionMenu2
530 10
418 11
371 4
Item.tsx
in src/ActionList
362 15
330 8
PageLayout.stories.tsx
in src/PageLayout
327 -
PageLayout.tsx
in src/PageLayout
325 2
examples.stories.tsx
in src/stories/ActionList2
310 6
Overlay.stories.tsx
in src/stories
310 -
fixtures.stories.tsx
in src/stories/DropdownMenu2
305 7
305 6
296 -
Dialog.tsx
in src/Dialog
289 -
280 -
267 2
AutocompleteMenu.tsx
in src/Autocomplete
240 4
Dialog.stories.tsx
in src/stories
226 3
examples.stories.tsx
in src/stories/DropdownMenu2
226 4
224 -
styles.ts
in src/Button2
221 -
Button2.stories.tsx
in src/Button2
220 -
Item.tsx
in src/ActionList2
202 3
193 1
Pagination.tsx
in src/Pagination
188 4
188 -
testing.tsx
in src/utils
187 19
FormControl.tsx
in src/FormControl
183 -
TextInput.stories.tsx
in src/stories
173 -
index.ts
in src
172 -
168 -
List.tsx
in src/ActionList
165 2
model.tsx
in src/Pagination
164 3
161 -
160 1
156 8
SelectPanel.tsx
in src/SelectPanel
148 1
147 -
Checkbox.stories.tsx
in src/stories
144 -
AutocompleteInput.tsx
in src/Autocomplete
139 -
137 1
136 4
AnchoredOverlay.tsx
in src/AnchoredOverlay
135 -
InputField.tsx
in src/InputField
134 -
127 2
126 1
125 -
Token.stories.tsx
in src/stories
125 2
Files With Most Units (Top 50)
File# lines# units
fixtures.stories.tsx
in src/stories/ActionList2
1065 20
testing.tsx
in src/utils
187 19
Item.tsx
in src/ActionList
362 15
418 11
fixtures.stories.tsx
in src/stories/ActionMenu2
530 10
deploy.rb
in script/component-status-project
111 8
330 8
156 8
test-matchers.tsx
in src/utils
94 7
fixtures.stories.tsx
in src/stories/DropdownMenu2
305 7
deprecate.tsx
in src/utils
53 6
theme.js
in src/utils
46 6
examples.stories.tsx
in src/stories/ActionList2
310 6
305 6
eventListenerSignal.ts
in src/polyfills
49 6
87 5
35 4
Pagination.tsx
in src/Pagination
188 4
AutocompleteMenu.tsx
in src/Autocomplete
240 4
371 4
examples.stories.tsx
in src/stories/DropdownMenu2
226 4
136 4
build.ts
in script/component-status-project
67 3
model.tsx
in src/Pagination
164 3
Item.tsx
in src/ActionList2
202 3
Dialog.stories.tsx
in src/stories
226 3
607 3
useDialog.ts
in src/hooks
106 3
56 3
Caret.tsx
in src
111 3
renameImports.js
in codemods/lib
38 2
98 2
60 2
Portal.tsx
in src/Portal
59 2
60 2
86 2
FilteredActionList.stories.tsx
in src/FilteredActionList
66 2
Visuals.tsx
in src/ActionList2
70 2
267 2
118 2
566 2
79 2
127 2
Token.stories.tsx
in src/stories
125 2
37 2
useCombinedRefs.ts
in src/hooks
24 2
useFocusTrap.ts
in src/hooks
45 2
List.tsx
in src/ActionList
165 2
PageLayout.tsx
in src/PageLayout
325 2
160 1
Files With Long Lines (Top 14)

There are 14 files with lines longer than 120 characters. In total, there are 32 long lines.

File# lines# units# long lines
FormControl.tsx
in src/FormControl
183 - 8
InputField.tsx
in src/InputField
134 - 5
112 - 4
Selection.tsx
in src/ActionList2
61 - 3
Dialog.stories.tsx
in src/stories
226 3 2
305 6 2
124 - 1
Portal.tsx
in src/Portal
59 2 1
161 - 1
ChoiceFieldsetListItem.tsx
in src/ChoiceFieldset
55 - 1
418 11 1
566 2 1
Item.tsx
in src/ActionList
362 15 1
71 - 1