chore: rename all library files

.github/pr-labeler.config.yml

@@ -1,6 +1,6 @@
 # Configuration for pr-labeller actions
-"Mod: HowTo 📰":
-  - src/pages/Howto/**/*
+"Mod: Library 📰":
+  - src/pages/Library/**/*
 "Mod: Maps 🗺":
   - src/pages/Maps/**/*
 "Mod: Research 🔬":

packages/components/src/UserStatistics/UserStatistics.tsx

@@ -1,6 +1,6 @@
 import { Box, Card, Flex } from 'theme-ui'
 
-import HowToCountIcon from '../../assets/icons/icon-how-to.svg'
+import HowToCountIcon from '../../assets/icons/icon-library.svg'
 import ResearchIcon from '../../assets/icons/icon-research.svg'
 import starActiveSVG from '../../assets/icons/icon-star-active.svg'
 import { ElWithBeforeIcon } from '../ElWithBeforeIcon/ElWithBeforeIcon'

packages/cypress/src/integration/howto/discussions.spec.ts → packages/cypress/src/integration/library/discussions.spec.ts

@@ -4,7 +4,7 @@
 import { ExternalLinkLabel } from 'oa-shared'
 
 import { MOCK_DATA } from '../../data'
-import { howto } from '../../fixtures/howto'
+import { howto } from '../../fixtures/library'
 import { generateNewUserDetails } from '../../utils/TestUtils'
 
 const howtos = Object.values(MOCK_DATA.howtos)

packages/cypress/src/integration/howto/write.spec.ts → packages/cypress/src/integration/library/write.spec.ts

@@ -1,11 +1,6 @@
 import { faker } from '@faker-js/faker'
 import { DifficultyLevel, IModerationStatus } from 'oa-shared'
 
-import {
-  HOWTO_STEP_DESCRIPTION_MAX_LENGTH,
-  HOWTO_TITLE_MIN_LENGTH,
-} from '../../../../../src/pages/Howto/constants'
-import { guidance, headings } from '../../../../../src/pages/Howto/labels'
 import { generateNewUserDetails } from '../../utils/TestUtils'
 
 describe('[Library]', () => {
@@ -150,10 +145,7 @@ describe('[Library]', () => {
         },
         {
           _animationKey: 'unique3',
-          text: faker.lorem
-            .sentences(50)
-            .slice(0, HOWTO_STEP_DESCRIPTION_MAX_LENGTH)
-            .trim(),
+          text: faker.lorem.sentences(50).slice(0, 1000).trim(),
           title: 'A long title that is the total characters limit of',
           videoURL: 'https://www.youtube.com/watch?v=Os7dREQ00l4',
         },
@@ -183,8 +175,9 @@ describe('[Library]', () => {
         'images/howto-step-pic1.jpg',
         'images/howto-step-pic2.jpg',
       ]
-      const categoryGuidanceMain = guidance.moulds.main.slice(0, 40)
-      const categoryGuidanceFiles = guidance.moulds.files
+      const categoryGuidanceMain =
+        'Cover image should show the fully built mould'
+      const categoryGuidanceFiles = 'Include files to replicate the mould'
 
       cy.signUpNewUser(creator)
       cy.get('[data-cy=loader]').should('not.exist')
@@ -210,14 +203,12 @@ describe('[Library]', () => {
 
       cy.step('Warn if title has less than minimum required characters')
       cy.fillIntroTitle('qwer')
-      cy.contains(
-        `Should be more than ${HOWTO_TITLE_MIN_LENGTH} characters`,
-      ).should('be.visible')
+      cy.contains(`Should be more than ${5} characters`).should('be.visible')
 
       cy.step('Cannot be published yet')
       cy.get('[data-cy=submit]').click()
       cy.get('[data-cy=errors-container]').should('be.visible')
-      cy.contains(headings.errors).should('be.visible')
+      cy.contains("Ouch, something's wrong").should('be.visible')
       cy.contains('Make sure this field is filled correctly').should(
         'be.visible',
       )

shared/mocks/data/index.ts

@@ -1,6 +1,6 @@
 export { categories } from './categories'
 export { discussions } from './discussions'
-export { howtos } from './howtos'
+export { howtos } from './library'
 export { mappins } from './mappins'
 export { questionCategories } from './questionCategories'
 export { questions } from './questions'

src/pages/Howto/Content/Common/FormFieldWrapper.test.tsx → src/pages/Library/Content/Common/FormFieldWrapper.test.tsx

@@ -2,7 +2,7 @@ import { render, screen } from '@testing-library/react'
 import { describe, it } from 'vitest'
 
 import { FormFieldWrapper } from './FormFieldWrapper'
-import { HowtoFormProvider } from './HowtoFormProvider'
+import { HowtoFormProvider } from './LibraryFormProvider'
 
 describe('FormFieldWrapper', () => {
   it('renders the props', async () => {

src/pages/Howto/Content/Common/Howto.form.test.tsx → src/pages/Library/Content/Common/Library.form.test.tsx

@@ -5,14 +5,14 @@ import { act, fireEvent, render, waitFor } from '@testing-library/react'
 import { ThemeProvider } from '@theme-ui/core'
 import { Provider } from 'mobx-react'
 import { useCommonStores } from 'src/common/hooks/useCommonStores'
-import { FactoryHowto } from 'src/test/factories/Howto'
+import { FactoryHowto } from 'src/test/factories/Library'
 import { testingThemeStyles } from 'src/test/utils/themeUtils'
 import { describe, expect, it, vi } from 'vitest'
 
-import { HowtoForm } from './Howto.form'
+import { HowtoForm } from './Library.form'
 
 import type { ILibrary } from 'oa-shared'
-import type { ParentType } from './Howto.form'
+import type { ParentType } from './Library.form'
 
 const Theme = testingThemeStyles
 

src/pages/Howto/Content/Common/Howto.form.tsx → src/pages/Library/Content/Common/Library.form.tsx

@@ -18,20 +18,20 @@ import {
 import { Box, Card, Flex, Heading } from 'theme-ui'
 
 import { headings, intro } from '../../labels'
-import { HowtoButtonDraft } from './HowtoButtonDraft'
-import { HowtoButtonPublish } from './HowtoButtonPublish'
-import { HowtoErrors } from './HowtoErrors'
-import { HowtoFieldCategory } from './HowtoFieldCategory'
-import { HowtoFieldCoverImage } from './HowtoFieldCoverImage'
-import { HowtoFieldCoverImageAlt } from './HowtoFieldCoverImageAlt'
-import { HowtoFieldDescription } from './HowtoFieldDescription'
-import { HowtoFieldDifficulty } from './HowtoFieldDifficulty'
-import { HowtoFieldFiles } from './HowtoFieldFiles'
-import { HowtoFieldStepsContainer } from './HowtoFieldStepsContainer'
-import { HowtoFieldTags } from './HowtoFieldTags'
-import { HowtoFieldTime } from './HowtoFieldTime'
-import { HowtoFieldTitle } from './HowtoFieldTitle'
-import { HowtoPostingGuidelines } from './HowtoPostingGuidelines'
+import { HowtoButtonDraft } from './LibraryButtonDraft'
+import { HowtoButtonPublish } from './LibraryButtonPublish'
+import { HowtoFieldCategory } from './LibraryCategory.field'
+import { HowtoFieldCoverImage } from './LibraryCoverImage.field'
+import { HowtoFieldCoverImageAlt } from './LibraryCoverImageAlt.field'
+import { HowtoFieldDescription } from './LibraryDescription.field'
+import { HowtoFieldDifficulty } from './LibraryDifficulty.field'
+import { HowtoErrors } from './LibraryErrors'
+import { HowtoFieldFiles } from './LibraryFiles.field'
+import { HowtoPostingGuidelines } from './LibraryPostingGuidelines'
+import { HowtoFieldStepsContainer } from './LibraryStepsContainer.field'
+import { HowtoFieldTags } from './LibraryTags.field'
+import { HowtoFieldTime } from './LibraryTime.field'
+import { HowtoFieldTitle } from './LibraryTitle.field'
 import { HowToSubmitStatus } from './SubmitStatus'
 
 import type { FormApi } from 'final-form'

src/pages/Howto/Content/Common/HowtoFieldCategory.tsx → src/pages/Library/Content/Common/LibraryCategory.field.tsx

@@ -4,10 +4,10 @@ import { CategoriesSelectV2 } from 'src/pages/common/Category/CategoriesSelectV2
 import {
   FormFieldWrapper,
   HowtoCategoryGuidance,
-} from 'src/pages/Howto/Content/Common'
-import { intro } from 'src/pages/Howto/labels'
+} from 'src/pages/Library/Content/Common'
+import { intro } from 'src/pages/Library/labels'
 
-import { howtoService } from '../../howto.service'
+import { howtoService } from '../../library.service'
 
 import type { SelectValue } from 'src/pages/common/Category/CategoriesSelectV2'
 

src/pages/Howto/Content/Common/HowtoCategoryGuidance.test.tsx → src/pages/Library/Content/Common/LibraryCategoryGuidance.test.tsx

@@ -1,10 +1,10 @@
 import { render, screen } from '@testing-library/react'
-import { guidance } from 'src/pages/Howto/labels'
+import { guidance } from 'src/pages/Library/labels'
 import { FactoryCategory } from 'src/test/factories/Category'
 import { describe, expect, it } from 'vitest'
 
-import { HowtoCategoryGuidance } from './HowtoCategoryGuidance'
-import { HowtoFormProvider } from './HowtoFormProvider'
+import { HowtoCategoryGuidance } from './LibraryCategoryGuidance'
+import { HowtoFormProvider } from './LibraryFormProvider'
 
 describe('HowtoCategoryGuidance', () => {
   it('renders expected main content when a category that exists is present', async () => {

src/pages/Howto/Content/Common/HowtoFieldCoverImage.tsx → src/pages/Library/Content/Common/LibraryCoverImage.field.tsx

@@ -1,6 +1,6 @@
 import { Field } from 'react-final-form'
 import { ImageInputField } from 'src/common/Form/ImageInput.field'
-import { FormFieldWrapper } from 'src/pages/Howto/Content/Common/FormFieldWrapper'
+import { FormFieldWrapper } from 'src/pages/Library/Content/Common/FormFieldWrapper'
 import { COMPARISONS } from 'src/utils/comparisons'
 import { draftValidationWrapper, required } from 'src/utils/validators'
 import { Box, Text } from 'theme-ui'

src/pages/Howto/Content/Common/HowtoFieldCoverImageAlt.tsx → src/pages/Library/Content/Common/LibraryCoverImageAlt.field.tsx

@@ -1,6 +1,6 @@
 import { Field } from 'react-final-form'
 import { FieldInput } from 'oa-components'
-import { FormFieldWrapper } from 'src/pages/Howto/Content/Common/FormFieldWrapper'
+import { FormFieldWrapper } from 'src/pages/Library/Content/Common/FormFieldWrapper'
 import { Box, Text } from 'theme-ui'
 
 import { intro } from '../../labels'

src/pages/Howto/Content/Common/HowtoFieldDescription.test.tsx → src/pages/Library/Content/Common/LibraryDescription.field.test.tsx

@@ -1,8 +1,8 @@
 import { render, screen } from '@testing-library/react'
 import { describe, it } from 'vitest'
 
-import { HowtoFieldDescription } from './HowtoFieldDescription'
-import { HowtoFormProvider } from './HowtoFormProvider'
+import { HowtoFieldDescription } from './LibraryDescription.field'
+import { HowtoFormProvider } from './LibraryFormProvider'
 
 describe('HowtoFieldStepsDescription', () => {
   it('renders', async () => {

src/pages/Howto/Content/Common/HowtoFieldDescription.tsx → src/pages/Library/Content/Common/LibraryDescription.field.tsx

@@ -1,6 +1,6 @@
 import { Field } from 'react-final-form'
 import { FieldTextarea } from 'oa-components'
-import { FormFieldWrapper } from 'src/pages/Howto/Content/Common/FormFieldWrapper'
+import { FormFieldWrapper } from 'src/pages/Library/Content/Common/FormFieldWrapper'
 import { COMPARISONS } from 'src/utils/comparisons'
 import { draftValidationWrapper, required } from 'src/utils/validators'
 

src/pages/Howto/Content/Common/HowtoFieldDifficulty.tsx → src/pages/Library/Content/Common/LibraryDifficulty.field.tsx

@@ -1,6 +1,6 @@
 import { Field } from 'react-final-form'
 import { SelectField } from 'src/common/Form/Select.field'
-import { FormFieldWrapper } from 'src/pages/Howto/Content/Common/FormFieldWrapper'
+import { FormFieldWrapper } from 'src/pages/Library/Content/Common/FormFieldWrapper'
 import { COMPARISONS } from 'src/utils/comparisons'
 import { draftValidationWrapper, required } from 'src/utils/validators'
 

src/pages/Howto/Content/Common/HowtoErrors.test.tsx → src/pages/Library/Content/Common/LibraryErrors.test.tsx

@@ -1,8 +1,8 @@
 import { render, screen } from '@testing-library/react'
 import { describe, expect, it } from 'vitest'
 
-import { HowtoErrors } from './HowtoErrors'
-import { HowtoFormProvider } from './HowtoFormProvider'
+import { HowtoErrors } from './LibraryErrors'
+import { HowtoFormProvider } from './LibraryFormProvider'
 
 describe('HowtoErrors', () => {
   it('renders component when visible and has intro errors', async () => {

src/pages/Howto/Content/Common/HowtoErrors.tsx → src/pages/Library/Content/Common/LibraryErrors.tsx

@@ -1,6 +1,6 @@
 import { ErrorsContainer } from 'src/common/Form/ErrorsContainer'
 
-import { transformHowtoErrors } from './utils/'
+import { transformHowtoErrors } from '../utils'
 
 import type { IErrorsListSet, ITopLevelErrorsList } from 'src/common/Form/types'
 

src/pages/Howto/Content/Common/HowtoFieldFileLink.tsx → src/pages/Library/Content/Common/LibraryFileLink.field.tsx

@@ -1,6 +1,6 @@
 import { Field } from 'react-final-form'
 import { FieldInput } from 'oa-components'
-import { FormFieldWrapper } from 'src/pages/Howto/Content/Common/FormFieldWrapper'
+import { FormFieldWrapper } from 'src/pages/Library/Content/Common/FormFieldWrapper'
 import { COMPARISONS } from 'src/utils/comparisons'
 import {
   draftValidationWrapper,

src/pages/Howto/Content/Common/HowtoFieldFileUpload.tsx → src/pages/Library/Content/Common/LibraryFileUpload.field.tsx

@@ -2,7 +2,7 @@ import { Field } from 'react-final-form'
 import { UserRole } from 'oa-shared'
 import { AuthWrapper } from 'src/common/AuthWrapper'
 import { FileInputField } from 'src/common/Form/FileInput.field'
-import { FormFieldWrapper } from 'src/pages/Howto/Content/Common/FormFieldWrapper'
+import { FormFieldWrapper } from 'src/pages/Library/Content/Common/FormFieldWrapper'
 import { Text } from 'theme-ui'
 
 import { intro } from '../../labels'

src/pages/Howto/Content/Common/HowtoFieldFiles.test.tsx → src/pages/Library/Content/Common/LibraryFiles.field.test.tsx

@@ -1,10 +1,10 @@
 import { render, screen } from '@testing-library/react'
-import { guidance } from 'src/pages/Howto/labels'
+import { guidance } from 'src/pages/Library/labels'
 import { FactoryCategory } from 'src/test/factories/Category'
 import { describe, it, vi } from 'vitest'
 
-import { HowtoFieldFiles } from './HowtoFieldFiles'
-import { HowtoFormProvider } from './HowtoFormProvider'
+import { HowtoFieldFiles } from './LibraryFiles.field'
+import { HowtoFormProvider } from './LibraryFormProvider'
 
 vi.mock('src/common/hooks/useCommonStores', () => {
   return {

src/pages/Howto/Content/Common/HowtoFieldFiles.tsx → src/pages/Library/Content/Common/LibraryFiles.field.tsx

@@ -4,7 +4,7 @@ import {
   HowtoCategoryGuidance,
   HowtoFieldFileLink,
   HowtoFieldFileUpload,
-} from 'src/pages/Howto/Content/Common'
+} from 'src/pages/Library/Content/Common'
 import { Flex, Text } from 'theme-ui'
 
 import { buttons, headings, intro } from '../../labels'

src/pages/Howto/Content/Common/HowtoFormProvider.tsx → src/pages/Library/Content/Common/LibraryFormProvider.tsx

@@ -1,6 +1,6 @@
 import { Form } from 'react-final-form'
 import arrayMutators from 'final-form-arrays'
-import { FactoryHowto } from 'src/test/factories/Howto'
+import { FactoryHowto } from 'src/test/factories/Library'
 import { vi } from 'vitest'
 
 export const HowtoFormProvider = ({

src/pages/Howto/Content/Common/howtofieldstep.test.tsx → src/pages/Library/Content/Common/LibraryStep.field.test.tsx

@@ -1,8 +1,8 @@
 import { render, screen } from '@testing-library/react'
 import { describe, it, vi } from 'vitest'
 
-import { HowtoFieldStep } from './HowtoFieldStep'
-import { HowtoFormProvider } from './HowtoFormProvider'
+import { HowtoFormProvider } from './LibraryFormProvider'
+import { HowtoFieldStep } from './LibraryStep.field'
 
 describe('HowtoFieldStep', () => {
   it('renders', async () => {

src/pages/Howto/Content/Common/HowtoFieldStepsContainer.test.tsx → src/pages/Library/Content/Common/LibraryStepsContainer.field.test.tsx

@@ -1,8 +1,8 @@
 import { render, screen } from '@testing-library/react'
 import { describe, it } from 'vitest'
 
-import { HowtoFieldStepsContainer } from './HowtoFieldStepsContainer'
-import { HowtoFormProvider } from './HowtoFormProvider'
+import { HowtoFormProvider } from './LibraryFormProvider'
+import { HowtoFieldStepsContainer } from './LibraryStepsContainer.field'
 
 describe('HowtoFieldStepsContainer', () => {
   it('renders', async () => {

src/pages/Howto/Content/Common/HowtoFieldStepsContainer.tsx → src/pages/Library/Content/Common/LibraryStepsContainer.field.tsx

@@ -1,7 +1,7 @@
 import { FieldArray } from 'react-final-form-arrays'
 import { AnimatePresence, motion } from 'framer-motion'
 import { Button } from 'oa-components'
-import { HowtoFieldStep } from 'src/pages/Howto/Content/Common/HowtoFieldStep'
+import { HowtoFieldStep } from 'src/pages/Library/Content/Common/LibraryStep.field'
 import { COMPARISONS } from 'src/utils/comparisons'
 import { Box, Flex, Heading, Text } from 'theme-ui'
 

src/pages/Howto/Content/Common/HowtoFieldTags.tsx → src/pages/Library/Content/Common/LibraryTags.field.tsx

@@ -1,6 +1,6 @@
 import { Field } from 'react-final-form'
 import { TagsSelectField } from 'src/common/Form/TagsSelect.field'
-import { FormFieldWrapper } from 'src/pages/Howto/Content/Common/FormFieldWrapper'
+import { FormFieldWrapper } from 'src/pages/Library/Content/Common/FormFieldWrapper'
 import { COMPARISONS } from 'src/utils/comparisons'
 
 import { intro } from '../../labels'

src/pages/Howto/Content/Common/HowtoFieldTime.tsx → src/pages/Library/Content/Common/LibraryTime.field.tsx

@@ -1,6 +1,6 @@
 import { Field } from 'react-final-form'
 import { SelectField } from 'src/common/Form/Select.field'
-import { FormFieldWrapper } from 'src/pages/Howto/Content/Common/FormFieldWrapper'
+import { FormFieldWrapper } from 'src/pages/Library/Content/Common/FormFieldWrapper'
 import { COMPARISONS } from 'src/utils/comparisons'
 import { draftValidationWrapper, required } from 'src/utils/validators'
 

src/pages/Howto/Content/Common/HowtoFieldTitle.test.tsx → src/pages/Library/Content/Common/LibraryTitle.field.test.tsx

@@ -1,14 +1,14 @@
 import { render, screen } from '@testing-library/react'
 import { describe, it, vi } from 'vitest'
 
-import { HowtoFieldTitle } from './HowtoFieldTitle'
-import { HowtoFormProvider } from './HowtoFormProvider'
+import { HowtoFormProvider } from './LibraryFormProvider'
+import { HowtoFieldTitle } from './LibraryTitle.field'
 
-import type { HowtoStore } from 'src/stores/Howto/howto.store'
-import type { ParentType } from './Howto.form'
+import type { HowtoStore } from 'src/stores/Library/library.store'
+import type { ParentType } from './Library.form'
 
-vi.mock('src/stores/Howto/howto.store')
-const store = await vi.importMock('src/stores/Howto/howto.store')
+vi.mock('src/stores/Library/library.store')
+const store = await vi.importMock('src/stores/Library/library.store')
 
 describe('HowtoFieldTitle', () => {
   it('renders', async () => {

src/pages/Howto/Content/Common/HowtoFieldTitle.tsx → src/pages/Library/Content/Common/LibraryTitle.field.tsx

@@ -1,15 +1,15 @@
 import { useState } from 'react'
 import { Field } from 'react-final-form'
 import { FieldInput } from 'oa-components'
-import { FormFieldWrapper } from 'src/pages/Howto/Content/Common/FormFieldWrapper'
+import { FormFieldWrapper } from 'src/pages/Library/Content/Common/FormFieldWrapper'
 import { COMPARISONS } from 'src/utils/comparisons'
 import { composeValidators, minValue, required } from 'src/utils/validators'
 import { Card, Text } from 'theme-ui'
 
 import { HOWTO_TITLE_MAX_LENGTH, HOWTO_TITLE_MIN_LENGTH } from '../../constants'
 import { intro } from '../../labels'
 
-import type { HowtoStore } from 'src/stores/Howto/howto.store'
+import type { HowtoStore } from 'src/stores/Library/library.store'
 
 interface IProps {
   store: HowtoStore