refactor: rename files according to guidelines

.changeset/three-coins-tie.md

@@ -0,0 +1,6 @@
+---
+'@toptal/picasso-rich-text-editor': patch
+'@toptal/picasso': patch
+---
+
+- rename files according to guidelines

packages/picasso-rich-text-editor/src/LexicalEditor/hooks/useOnFocus/index.ts

@@ -1 +1 @@
-export { default } from './useOnFocus'
+export { default } from './use-on-focus'

packages/picasso-rich-text-editor/src/LexicalEditor/hooks/useOnFocus/test.ts

@@ -1,6 +1,6 @@
 import { renderHook, act } from '@testing-library/react-hooks'
 
-import useOnFocus from './useOnFocus'
+import useOnFocus from './use-on-focus'
 
 let mockEvent: React.FocusEvent<HTMLDivElement>
 

packages/picasso-rich-text-editor/src/LexicalEditor/hooks/useTypographyClasses/index.ts

@@ -1 +1 @@
-export { default } from './useTypographyClasses'
+export { default } from './use-typography-classes'

packages/picasso-rich-text-editor/src/LexicalEditor/hooks/useTypographyClasses/test.ts

@@ -2,7 +2,7 @@ import { renderHook } from '@testing-library/react-hooks'
 import { getTypographyClassName } from '@toptal/picasso'
 import type { TypographyOptions } from '@toptal/picasso'
 
-import useTypographyClasses from './useTypographyClasses'
+import useTypographyClasses from './use-typography-classes'
 
 jest.mock('@toptal/picasso', () => ({
   __esModule: true,

packages/picasso-rich-text-editor/src/LexicalEditor/utils/cleanupHtmlOutput.test.ts → packages/picasso-rich-text-editor/src/LexicalEditor/utils/cleanup-html-output.test.ts

@@ -1,4 +1,4 @@
-import { cleanupHtmlOutput } from './cleanupHtmlOutput'
+import { cleanupHtmlOutput } from './cleanup-html-output'
 
 // Test cases structure:
 // removeWhat (string), removeFrom (string), input (string), expected (string)

packages/picasso-rich-text-editor/src/LexicalEditor/utils/getDomValue.test.ts → packages/picasso-rich-text-editor/src/LexicalEditor/utils/get-dom-value.test.ts

@@ -1,5 +1,5 @@
 import type { ASTType } from '../../RichText'
-import { getDomValue } from './getDomValue'
+import { getDomValue } from './get-dom-value'
 
 describe('getDomValue', () => {
   it('returns DOM structure from AST', () => {

packages/picasso-rich-text-editor/src/LexicalEditor/utils/index.ts

@@ -1,8 +1,8 @@
-export { registerLexicalEvents } from './registerLexicalEvents'
-export { synchronizeToolbarState } from './synchronizeToolbarState'
-export { toolbarStateReducer } from './toolbarState'
-export { getLexicalNode } from './getLexicalNode'
-export { createLexicalTheme } from './createLexicalTheme'
-export { getDomValue } from './getDomValue'
-export { setEditorValue } from './setEditorValue'
-export { cleanupHtmlOutput } from './cleanupHtmlOutput'
+export { registerLexicalEvents } from './register-lexical-events'
+export { synchronizeToolbarState } from './synchronize-toolbar-state'
+export { toolbarStateReducer } from './toolbar-state'
+export { getLexicalNode } from './get-lexical-node'
+export { createLexicalTheme } from './create-lexical-theme'
+export { getDomValue } from './get-dom-value'
+export { setEditorValue } from './set-editor-value'
+export { cleanupHtmlOutput } from './cleanup-html-output'

packages/picasso-rich-text-editor/src/LexicalEditor/utils/registerLexicalEvents.test.ts → packages/picasso-rich-text-editor/src/LexicalEditor/utils/register-lexical-events.test.ts

@@ -1,7 +1,7 @@
 import { COMMAND_PRIORITY_CRITICAL, SELECTION_CHANGE_COMMAND } from 'lexical'
 
-import { registerLexicalEvents } from './registerLexicalEvents'
-import type { LexicalRegisterParams } from './registerLexicalEvents'
+import { registerLexicalEvents } from './register-lexical-events'
+import type { LexicalRegisterParams } from './register-lexical-events'
 
 jest.mock('@lexical/react/LexicalComposerContext', () => ({
   useLexicalComposerContext: jest.fn().mockReturnValue([]),

packages/picasso-rich-text-editor/src/LexicalEditor/utils/setEditorValue.ts → packages/picasso-rich-text-editor/src/LexicalEditor/utils/set-editor-value.ts

@@ -8,7 +8,7 @@ import {
 import { $generateNodesFromDOM } from '@lexical/html'
 
 import type { ASTType } from '../../RichText'
-import { getDomValue } from './getDomValue'
+import { getDomValue } from './get-dom-value'
 
 export const setEditorValue = (editor: LexicalEditorType, value?: ASTType) => {
   const root = $getRoot()

packages/picasso-rich-text-editor/src/LexicalEditor/utils/synchronizeToolbarState.test.ts → packages/picasso-rich-text-editor/src/LexicalEditor/utils/synchronize-toolbar-state.test.ts

@@ -10,10 +10,10 @@ import { $isListNode } from '@lexical/list'
 import { $getNearestNodeOfType } from '@lexical/utils'
 import { $isHeadingNode } from '@lexical/rich-text'
 
-import { ToolbarActions } from './toolbarState'
-import { synchronizeToolbarState } from './synchronizeToolbarState'
-import { getLexicalNode } from './getLexicalNode'
-import { getSelectedNode } from './getSelectedNode'
+import { ToolbarActions } from './toolbar-state'
+import { synchronizeToolbarState } from './synchronize-toolbar-state'
+import { getLexicalNode } from './get-lexical-node'
+import { getSelectedNode } from './get-selected-node'
 
 jest.mock('lexical', () => ({
   ...jest.requireActual('lexical'),
@@ -36,12 +36,12 @@ jest.mock('@lexical/rich-text', () => ({
   $isHeadingNode: jest.fn(),
 }))
 
-jest.mock('./getLexicalNode', () => ({
+jest.mock('./get-lexical-node', () => ({
   __esModule: true,
   getLexicalNode: jest.fn(),
 }))
 
-jest.mock('./getSelectedNode', () => ({
+jest.mock('./get-selected-node', () => ({
   __esModule: true,
   getSelectedNode: jest.fn(),
 }))

packages/picasso-rich-text-editor/src/LexicalEditor/utils/synchronizeToolbarState.ts → packages/picasso-rich-text-editor/src/LexicalEditor/utils/synchronize-toolbar-state.ts

@@ -4,9 +4,9 @@ import { $isListNode, ListNode } from '@lexical/list'
 import { $getNearestNodeOfType } from '@lexical/utils'
 import { $isHeadingNode } from '@lexical/rich-text'
 
-import { getLexicalNode } from './getLexicalNode'
-import type { ToolbarAction, ToolbarState } from './toolbarState'
-import { ToolbarActions } from './toolbarState'
+import { getLexicalNode } from './get-lexical-node'
+import type { ToolbarAction, ToolbarState } from './toolbar-state'
+import { ToolbarActions } from './toolbar-state'
 import { ALLOWED_HEADER_TYPE } from '../../RichTextEditorToolbar'
 
 // Transfers updated Lexical selection state to the toolbar state

packages/picasso-rich-text-editor/src/RichTextEditor/hooks/useTypographyClasses/index.ts

@@ -1 +1 @@
-export { default } from './useTypographyClasses'
+export { default } from './use-typography-classes'

packages/picasso-rich-text-editor/src/RichTextEditor/store/toolbar/actions.ts

@@ -1,6 +1,6 @@
 import type { Dispatch } from 'react'
 
-import actionTypes from './actionTypes'
+import actionTypes from './action-types'
 import type {
   SetBoldActionType,
   SetHeaderActionType,

packages/picasso-rich-text-editor/src/RichTextEditor/store/toolbar/index.ts

@@ -1,7 +1,7 @@
 import actions from './actions'
 import reducer from './reducer'
-import initialState from './initialState'
-import actionTypes from './actionTypes'
+import initialState from './initial-state'
+import actionTypes from './action-types'
 
 export * from './types'
 export { actions, actionTypes, reducer, initialState }

packages/picasso-rich-text-editor/src/RichTextEditor/store/toolbar/reducer.ts

@@ -1,6 +1,6 @@
-import actionTypes from './actionTypes'
+import actionTypes from './action-types'
 import type { ToolbarReducerType } from './types'
-import initialState from './initialState'
+import initialState from './initial-state'
 
 const reducer: ToolbarReducerType = (state = initialState, action) => {
   switch (action.type) {

packages/picasso-rich-text-editor/src/RichTextEditor/store/toolbar/types.ts

@@ -1,4 +1,4 @@
-import type actionTypes from './actionTypes'
+import type actionTypes from './action-types'
 
 export type HeaderValue = '3' | ''
 export type BoldValue = boolean

packages/picasso-rich-text-editor/src/RichTextEditor/styles.ts

@@ -1,7 +1,7 @@
 import { outline } from '@toptal/picasso-shared'
 import type { Theme } from '@material-ui/core/styles'
 import { createStyles } from '@material-ui/core/styles'
-import highlightAutofillStyles from '@toptal/picasso/InputBase/highlightStyles'
+import highlightAutofillStyles from '@toptal/picasso/InputBase/highlight-styles'
 
 export default (theme: Theme) => {
   const { palette, sizes } = theme

packages/picasso-rich-text-editor/src/plugins/HeadingsReplacementPlugin/utils/index.ts

@@ -1 +1 @@
-export { replaceHeadingNodes } from './replaceHeadingNodes'
+export { replaceHeadingNodes } from './replace-heading-nodes'

packages/picasso-rich-text-editor/src/plugins/HeadingsReplacementPlugin/utils/replaceHeadingNodes.test.ts → packages/picasso-rich-text-editor/src/plugins/HeadingsReplacementPlugin/utils/replace-heading-nodes.test.ts

@@ -2,7 +2,7 @@ import type { ParagraphNode, TextNode } from 'lexical'
 import type { HeadingNode } from '@lexical/rich-text'
 import { $createParagraphNode, $createTextNode } from 'lexical'
 
-import { replaceHeadingNodes } from './replaceHeadingNodes'
+import { replaceHeadingNodes } from './replace-heading-nodes'
 
 jest.mock('lexical', () => ({
   __esModule: true,

packages/picasso-rich-text-editor/src/plugins/LinkPlugin/LinkPluginButton.tsx

@@ -8,7 +8,7 @@ import { Link16 } from '@toptal/picasso'
 import { $createTextNode, $getSelection, $isRangeSelection } from 'lexical'
 import React, { useCallback, useState } from 'react'
 
-import { getSelectedNode } from '../../LexicalEditor/utils/getSelectedNode'
+import { getSelectedNode } from '../../LexicalEditor/utils/get-selected-node'
 import { useRTEPluginContext, useRTEUpdate } from '../api'
 import RichTextEditorButton from '../../RichTextEditorButton'
 import { sanitizeUrl, validateUrl } from './utils/url'

packages/picasso-rich-text-editor/src/plugins/api.tsx

@@ -3,7 +3,7 @@ import type { Klass, LexicalNode } from 'lexical'
 import type { ReactElement, ReactNode } from 'react'
 import React, { createContext, useContext, useEffect } from 'react'
 
-import { registerLexicalEvents } from '../LexicalEditor/utils/registerLexicalEvents'
+import { registerLexicalEvents } from '../LexicalEditor/utils/register-lexical-events'
 import { ToolbarProvider } from './Toolbar/Toolbar'
 
 export const RTEPluginMeta = Symbol('PicassoRTEPluginMeta')

packages/picasso/src/AvatarUpload/hooks/use-avatar-states/index.ts

@@ -1 +1 @@
-export { default } from './useAvatarStates'
+export { default } from './use-avatar-states'

packages/picasso/src/AvatarUpload/hooks/use-avatar-states/test.ts

@@ -1,6 +1,6 @@
 import { act, renderHook } from '@testing-library/react-hooks'
 
-import useAvatarStates from './useAvatarStates'
+import useAvatarStates from './use-avatar-states'
 
 describe('useAvatarStates', () => {
   it('returns hovered state as true', () => {

packages/picasso/src/AvatarUpload/hooks/use-avatar-upload/index.ts

@@ -1 +1 @@
-export { default } from './useAvatarUpload'
+export { default } from './use-avatar-upload'

packages/picasso/src/AvatarUpload/hooks/use-avatar-upload/test.ts

@@ -1,6 +1,6 @@
 import { renderHook } from '@testing-library/react-hooks'
 
-import useAvatarUpload from './useAvatarUpload'
+import useAvatarUpload from './use-avatar-upload'
 
 describe('useAvatarUpload', () => {
   describe('when src exist and uploading false', () => {

packages/picasso/src/Carousel/hooks/useAutoplay/index.ts

@@ -1 +1 @@
-export { default } from './useAutoplay'
+export { default } from './use-autoplay'

packages/picasso/src/Carousel/hooks/useCarousel/index.ts

@@ -1 +1 @@
-export { default } from './useCarousel'
+export { default } from './use-carousel'

packages/picasso/src/Carousel/hooks/useCarousel/useCarousel.ts → packages/picasso/src/Carousel/hooks/useCarousel/use-carousel.ts

@@ -1,7 +1,7 @@
 import { useRef, useCallback, useState, useEffect } from 'react'
 import Glider from 'glider-js'
 
-import isOnLastPage from '../../utils/isOnLastPage'
+import isOnLastPage from '../../utils'
 import useAutoplay from '../useAutoplay'
 
 type Props = {

packages/picasso/src/Carousel/utils/index.ts

@@ -0,0 +1 @@
+export { default } from './is-on-last-page'

packages/picasso/src/Carousel/utils/isOnLastPage/test.ts → packages/picasso/src/Carousel/utils/is-on-last-page.test.ts

@@ -1,4 +1,4 @@
-import isOnLastPage from './isOnLastPage'
+import isOnLastPage from './is-on-last-page'
 
 describe('isOnLastPage', () => {
   it('returns expected results', () => {

packages/picasso/src/CarouselGradient/CarouselGradient.tsx

@@ -3,7 +3,7 @@ import cx from 'classnames'
 import type { Theme } from '@material-ui/core/styles'
 import { makeStyles } from '@material-ui/core/styles'
 
-import gradientWidth from './utils/gradientWidth'
+import gradientWidth from './utils/gradient-width'
 import styles from './styles'
 
 const useStyles = makeStyles<Theme>(styles, { name: 'CarouselGradient' })

packages/picasso/src/CarouselGradient/utils/gradientWidth/test.ts → packages/picasso/src/CarouselGradient/utils/gradient-width.test.ts

@@ -1,4 +1,4 @@
-import gradientWidth from './gradientWidth'
+import gradientWidth from './gradient-width'
 
 describe('gradientWidth', () => {
   it('returns the expected gradient width', () => {

packages/picasso/src/CarouselGradient/utils/index.ts

@@ -0,0 +1 @@
+export { default } from './gradient-width'

packages/picasso/src/Input/styles.ts

@@ -1,7 +1,7 @@
 import type { Theme } from '@material-ui/core/styles'
 import { createStyles } from '@material-ui/core/styles'
 
-import highlightAutofillStyles from '../InputBase/highlightStyles'
+import highlightAutofillStyles from '../InputBase/highlight-styles'
 import '../InputBase/styles'
 import '../InputLabel/styles'
 import '../OutlinedInput/styles'

packages/picasso/src/NativeSelect/styles.ts

@@ -5,7 +5,7 @@ import '../InputLabel/styles'
 import '../InputBase/styles'
 import '../Input/styles'
 import '../Loader/styles'
-import highlightAutofillStyles from '../InputBase/highlightStyles'
+import highlightAutofillStyles from '../InputBase/highlight-styles'
 
 export default (theme: Theme) => {
   const { palette } = theme

packages/picasso/src/NonNativeSelect/styles.ts

@@ -7,7 +7,7 @@ import '../Input/styles'
 import '../Menu/styles'
 import '../MenuItem/styles'
 import '../Loader/styles'
-import highlightAutofillStyles from '../InputBase/highlightStyles'
+import highlightAutofillStyles from '../InputBase/highlight-styles'
 
 export default (theme: Theme) => {
   const { palette } = theme

packages/picasso/src/NumberInput/styles.ts

@@ -1,7 +1,7 @@
 import type { Theme } from '@material-ui/core/styles'
 import { createStyles } from '@material-ui/core/styles'
 
-import highlightAutofillStyles from '../InputBase/highlightStyles'
+import highlightAutofillStyles from '../InputBase/highlight-styles'
 
 export default (theme: Theme) =>
   createStyles({

packages/picasso/src/PasswordInput/styles.ts

@@ -1,7 +1,7 @@
 import type { Theme } from '@material-ui/core/styles'
 import { createStyles } from '@material-ui/core/styles'
 
-import highlightAutofillStyles from '../InputBase/highlightStyles'
+import highlightAutofillStyles from '../InputBase/highlight-styles'
 
 export default (theme: Theme) => {
   const { spacing } = theme

packages/picasso/src/SidebarItem/SidebarItemHeader.tsx

@@ -8,8 +8,7 @@ import SidebarItemContent from '../SidebarItemContent'
 import styles from './styles'
 import type { Props } from './types'
 import { useSubMenuContext } from './SubMenuContextProvider'
-import getBadgeProps from './utils/getBadgeProps/getBadgeProps'
-import getTagProps from './utils/getTagProps/getTagProps'
+import { getTagProps, getBadgeProps } from './utils'
 
 const useStyles = makeStyles<Theme>(styles, {
   name: 'PicassoSidebarItemHeader',

packages/picasso/src/SidebarItem/utils/getBadgeProps/test.ts → packages/picasso/src/SidebarItem/utils/get-badge-props.test.ts

@@ -1,5 +1,5 @@
-import getBadgeProps from './getBadgeProps'
-import type { SidebarBadgeProps } from '../../../SidebarItemContent'
+import getBadgeProps from './get-badge-props'
+import type { SidebarBadgeProps } from '../../SidebarItemContent'
 
 describe('getBadgeProps', () => {
   describe('when number value is passed', () => {
@@ -12,6 +12,7 @@ describe('getBadgeProps', () => {
       }
     )
   })
+
   describe('when falsy input is passed', () => {
     it('returns the same value', () => {
       const value = undefined
@@ -20,6 +21,7 @@ describe('getBadgeProps', () => {
       expect(props).toEqual(value)
     })
   })
+
   describe('when badge props object is passed', () => {
     const values: SidebarBadgeProps[] = [
       { content: 5 },

packages/picasso/src/SidebarItem/utils/getBadgeProps/getBadgeProps.ts → packages/picasso/src/SidebarItem/utils/get-badge-props.ts

@@ -1,4 +1,4 @@
-import type { SidebarBadgeProps } from '../../../SidebarItemContent'
+import type { SidebarBadgeProps } from '../../SidebarItemContent'
 
 const getBadgeProps = (badge?: number | SidebarBadgeProps) => {
   if (typeof badge === 'number') {

packages/picasso/src/SidebarItem/utils/getTagProps/test.ts → packages/picasso/src/SidebarItem/utils/get-tag-props.test.ts

@@ -1,5 +1,5 @@
-import type { SidebarTagProps } from '../../../SidebarItemContent'
-import getTagProps from './getTagProps'
+import type { SidebarTagProps } from '../../SidebarItemContent'
+import getTagProps from './get-tag-props'
 
 describe('getTagProps', () => {
   describe('when string value is passed', () => {

packages/picasso/src/SidebarItem/utils/getTagProps/getTagProps.ts → packages/picasso/src/SidebarItem/utils/get-tag-props.ts

@@ -1,4 +1,4 @@
-import type { SidebarTagProps } from '../../../SidebarItemContent'
+import type { SidebarTagProps } from '../../SidebarItemContent'
 
 const getTagProps = (tag?: string | SidebarTagProps) => {
   if (typeof tag === 'string') {

packages/picasso/src/SidebarItem/utils/index.ts

@@ -0,0 +1,2 @@
+export { default as getBadgeProps } from './get-badge-props'
+export { default as getTagProps } from './get-tag-props'

packages/picasso/src/SidebarItemContent/SidebarItemContent.tsx

@@ -14,7 +14,7 @@ import { getReactNodeTextContent } from '../utils'
 import styles from './styles'
 import type { Props, SidebarBadgeProps } from './types'
 import Indicator from '../Indicator'
-import useIndicatorOnParentItem from './useIndicatorOnParentItem'
+import useIndicatorOnParentItem from './use-indicator-on-parent-item'
 
 const useStyles = makeStyles<Theme>(styles, {
   name: 'PicassoSidebarItemContent',

packages/picasso/src/StaticTreeView/StaticTreeView.tsx

@@ -8,7 +8,7 @@ import {
   TreeViewSvg,
   useFinalMargins,
 } from '../TreeView/shared'
-import { findExtremeNodes } from './utils/findExtremeNodes'
+import { findExtremeNodes } from './utils/find-extreme-nodes'
 
 type SvgMeasurements = {
   width: number

packages/picasso/src/StaticTreeView/utils/test.ts

@@ -1,4 +1,4 @@
-import { findExtremeNodes } from './findExtremeNodes'
+import { findExtremeNodes } from './find-extreme-nodes'
 
 describe('findExtremeNodes', () => {
   it('finds top-most and left-most nodes', () => {

packages/picasso/src/TagSelectorInput/styles.ts

@@ -2,7 +2,7 @@ import type { Theme } from '@material-ui/core/styles'
 import { createStyles } from '@material-ui/core/styles'
 import { rem } from '@toptal/picasso-shared'
 
-import highlightAutofillStyles from '../InputBase/highlightStyles'
+import highlightAutofillStyles from '../InputBase/highlight-styles'
 
 export const TAG_SELECTOR_INPUT_GUTTER_SIZE = rem('4px')
 const END_ADORNMENT_PADDING = '0.625em'