Merge pull request #896 from sohosai/paragraph

src/components/Checkbox/index.tsx

@@ -2,7 +2,7 @@ import { FC } from "react"
 
 import { UseFormRegisterReturn } from "react-hook-form"
 
-import { ParagraphWithUrlParsing } from "../"
+import { Paragraph } from "../"
 import { dataset } from "../../utils/dataset"
 
 import styles from "./index.module.scss"
@@ -44,7 +44,7 @@ const Checkbox: FC<Checkbox.Props> = ({
       {formItemTitle && Boolean(formItemTitle?.length) && (
         <div className={styles.titleWrapper}>
           {formItemTitleUrlParsing ? (
-            <ParagraphWithUrlParsing
+            <Paragraph
               text={formItemTitle}
               normalTextClassName={styles.title}
             />
@@ -62,7 +62,7 @@ const Checkbox: FC<Checkbox.Props> = ({
       {descriptions && Boolean(descriptions?.length) && (
         <div className={styles.descriptionsWrapper}>
           {descriptionsUrlParsing ? (
-            <ParagraphWithUrlParsing
+            <Paragraph
               text={descriptions}
               normalTextClassName={styles.description}
             />

src/components/Dropdown/index.tsx

@@ -2,7 +2,7 @@ import { FC } from "react"
 
 import { UseFormRegisterReturn } from "react-hook-form"
 
-import { ParagraphWithUrlParsing } from "../"
+import { Paragraph } from "../"
 import { dataset } from "../../utils/dataset"
 
 import styles from "./index.module.scss"
@@ -68,7 +68,7 @@ const Dropdown: FC<Dropdown.Props> = ({
       {Boolean(descriptions?.length + errors?.length) && (
         <div className={styles.bottomText}>
           {descriptionUrlParsing ? (
-            <ParagraphWithUrlParsing
+            <Paragraph
               text={descriptions}
               normalTextClassName={styles.description}
             />

src/components/FormItem/checkbox.tsx

@@ -3,7 +3,7 @@ import { FC } from "react"
 import { UseFormRegisterReturn } from "react-hook-form"
 
 import styles from "./checkbox.module.scss"
-import { Checkbox, ParagraphWithUrlParsing } from "src/components"
+import { Checkbox, Paragraph } from "src/components"
 import { FormItem } from "src/types/models/form/item"
 
 type Props = {
@@ -32,7 +32,7 @@ const CheckboxFormItem: FC<Props> = ({
     ))}
     {Boolean(formItem.description.length) && (
       <div className={styles.descriptions}>
-        <ParagraphWithUrlParsing
+        <Paragraph
           text={formItem.description}
           normalTextClassName={styles.description}
         />

src/components/FormItem/file.tsx

@@ -1,7 +1,7 @@
 import { ReactElement } from "react"
 
 import styles from "./file.module.scss"
-import { Dropzone, FileList, ParagraphWithUrlParsing } from "src/components"
+import { Dropzone, FileList, Paragraph } from "src/components"
 import { FormItem } from "src/types/models/form/item"
 
 type Props<T> = {
@@ -27,7 +27,7 @@ const FileFormItem = function <T>({
         </p>
         {formItem.description && Boolean(formItem.description?.length) && (
           <div className={styles.description}>
-            <ParagraphWithUrlParsing text={formItem.description} />
+            <Paragraph text={formItem.description} />
           </div>
         )}
       </div>

src/components/ParagraphWithUrlParsing/index.stories.tsx → src/components/Paragraph/index.stories.tsx

@@ -1,19 +1,22 @@
 import { Story } from "@storybook/react"
 
-import { ParagraphWithUrlParsing } from "."
+import { Paragraph } from "."
 
 export default {
-  title: ParagraphWithUrlParsing.name,
-  component: ParagraphWithUrlParsing,
+  title: Paragraph.name,
+  component: Paragraph,
 }
 
-export const Index: Story<ParagraphWithUrlParsing.Props> = (options) => (
-  <ParagraphWithUrlParsing {...options} />
+export const Index: Story<Paragraph.Props> = (options) => (
+  <Paragraph {...options} />
 )
 Index.argTypes = {
   text: {
     control: { type: "text" },
     defaultValue:
       "募集要項を公開しました\nhttps://online.sohosai.com/\nご確認ください",
   },
+  parseUrl: {
+    defaultValue: true,
+  },
 }

src/components/ParagraphWithUrlParsing/index.tsx → src/components/Paragraph/index.tsx

@@ -4,9 +4,10 @@ import isURL, { IsURLOptions } from "validator/lib/isURL"
 
 import styles from "./index.module.scss"
 
-declare namespace ParagraphWithUrlParsing {
+declare namespace Paragraph {
   type Props = Readonly<{
     text: string | string[]
+    parseUrl?: boolean
     normalTextClassName?: string
     urlClassName?: string
     urlWrapperDivClassName?: string
@@ -15,8 +16,9 @@ declare namespace ParagraphWithUrlParsing {
   }>
 }
 
-const ParagraphWithUrlParsing: FC<ParagraphWithUrlParsing.Props> = ({
+const Paragraph: FC<Paragraph.Props> = ({
   text,
+  parseUrl = true,
   normalTextClassName = "",
   urlClassName = "",
   urlWrapperDivClassName = "",
@@ -32,6 +34,7 @@ const ParagraphWithUrlParsing: FC<ParagraphWithUrlParsing.Props> = ({
   return (
     <div className={styles.wrapper}>
       {splitTexts.map((txt) =>
+        parseUrl &&
         isURL(txt, {
           protocols: ["http", "https"],
           ...isURLOptions,
@@ -63,4 +66,4 @@ const ParagraphWithUrlParsing: FC<ParagraphWithUrlParsing.Props> = ({
   )
 }
 
-export { ParagraphWithUrlParsing }
+export { Paragraph }

src/components/TextField/index.tsx

@@ -2,7 +2,7 @@ import { FC } from "react"
 
 import { UseFormRegisterReturn } from "react-hook-form"
 
-import { ParagraphWithUrlParsing } from "../"
+import { Paragraph } from "../"
 import { dataset } from "../../utils/dataset"
 
 import styles from "./index.module.scss"
@@ -61,7 +61,7 @@ const TextField: FC<TextField.Props> = ({
       {Boolean(descriptions?.length + errors?.length) && (
         <div className={styles.bottomText}>
           {descriptionUrlParsing ? (
-            <ParagraphWithUrlParsing
+            <Paragraph
               text={descriptions}
               normalTextClassName={styles.description}
             />

src/components/Textarea/index.tsx

@@ -2,7 +2,7 @@ import { FC } from "react"
 
 import type { UseFormRegisterReturn } from "react-hook-form"
 
-import { ParagraphWithUrlParsing } from "../"
+import { Paragraph } from "../"
 import { dataset } from "../../utils/dataset"
 
 import styles from "./index.module.scss"
@@ -56,7 +56,7 @@ const Textarea: FC<Textarea.Props> = ({
       {Boolean(descriptions?.length + errors?.length) && (
         <div className={styles.bottomText}>
           {descriptionUrlParsing ? (
-            <ParagraphWithUrlParsing
+            <Paragraph
               text={descriptions}
               normalTextClassName={styles.description}
             />

src/components/index.ts

@@ -14,7 +14,7 @@ export { Icon } from "./Icon"
 export { IconButton } from "./IconButton"
 export { PageError } from "./PageError"
 export { Panel } from "./Panel"
-export { ParagraphWithUrlParsing } from "./ParagraphWithUrlParsing"
+export { Paragraph } from "./Paragraph"
 export { ProjectAttributeChips } from "./ProjectAttributeChips"
 export { ProjectQuerySelector } from "./ProjectQuerySelector"
 export { Spinner } from "./Spinner"

src/pages/announcement/[id].tsx

@@ -8,7 +8,7 @@ import type {
 import { useRouter } from "next/router"
 
 import styles from "./[id].module.scss"
-import { Head, Panel, ParagraphWithUrlParsing, Icon } from "src/components"
+import { Head, Panel, Paragraph, Icon } from "src/components"
 import { getAnnouncement, getAnnouncements } from "src/lib/contentful/index"
 
 import type { Announcement } from "src/types/models/announcement"
@@ -53,7 +53,7 @@ const AnnouncementPage: PageFC<InferGetStaticPropsType<typeof getStaticProps>> =
             <Panel style={{ padding: "48px" }}>
               <div className={styles.articleWrapper}>
                 <div className={styles.textWrapper}>
-                  <ParagraphWithUrlParsing
+                  <Paragraph
                     text={announcement.text}
                     normalTextClassName={styles.paragraph}
                     urlWrapperDivClassName={styles.paragraph}

src/pages/committee/project/details.tsx

@@ -14,7 +14,7 @@ import {
   CopyButton,
   Icon,
   ProjectAttributeChips,
-  ParagraphWithUrlParsing,
+  Paragraph,
 } from "src/components"
 import { useAuthNeue } from "src/contexts/auth"
 import { useToastDispatcher } from "src/contexts/toast"
@@ -254,9 +254,7 @@ const ProjectDetails: PageFC = () => {
               />
               <Table.Row
                 keyElement="説明文"
-                valueElement={
-                  <ParagraphWithUrlParsing text={project.description} />
-                }
+                valueElement={<Paragraph text={project.description} />}
               />
             </Table>
           </div>

src/pages/project/file/distribution.tsx

@@ -3,13 +3,7 @@ import { useRouter } from "next/router"
 import { useState, useEffect } from "react"
 
 import styles from "./distribution.module.scss"
-import {
-  FileList,
-  Head,
-  Panel,
-  ParagraphWithUrlParsing,
-  Spinner,
-} from "src/components"
+import { FileList, Head, Panel, Paragraph, Spinner } from "src/components"
 import { useAuthNeue } from "src/contexts/auth"
 import { useMyProject } from "src/contexts/myProject"
 import { useToastDispatcher } from "src/contexts/toast"
@@ -110,7 +104,7 @@ const FileDistribution: PageFC = () => {
               <h1 className={styles.name}>{distribution.name}</h1>
               {distribution.description?.length !== 0 && (
                 <div className={styles.description}>
-                  <ParagraphWithUrlParsing
+                  <Paragraph
                     text={distribution.description}
                     normalTextClassName={styles.descriptionText}
                   />

src/pages/project/form/answer.tsx

@@ -21,7 +21,7 @@ import {
   FormItemSpacer,
   Head,
   Panel,
-  ParagraphWithUrlParsing,
+  Paragraph,
   Spinner,
   Textarea,
   TextField,
@@ -369,7 +369,7 @@ const AnswerForm: PageFC = () => {
             <Panel>
               <h2 className={styles.formName}>{form.name}</h2>
               {form.description && (
-                <ParagraphWithUrlParsing
+                <Paragraph
                   text={form.description}
                   normalTextClassName={styles.formDescription}
                 />
@@ -469,7 +469,7 @@ const AnswerForm: PageFC = () => {
                             ))}
                             {Boolean(formItem.description.length) && (
                               <div className={styles.checkboxDescriptions}>
-                                <ParagraphWithUrlParsing
+                                <Paragraph
                                   text={formItem.description}
                                   normalTextClassName={
                                     styles.checkboxDescription

src/pages/project/registration-form/answer.tsx

@@ -10,7 +10,7 @@ import {
   FormItemSpacer,
   Head,
   Panel,
-  ParagraphWithUrlParsing,
+  Paragraph,
   Spinner,
 } from "src/components"
 import {
@@ -465,7 +465,7 @@ const AnswerRegistrationForm: PageFC = () => {
             <Panel>
               <h2 className={styles.formName}>{registrationForm.name}</h2>
               {registrationForm.description && (
-                <ParagraphWithUrlParsing
+                <Paragraph
                   text={registrationForm.description}
                   normalTextClassName={styles.formDescription}
                 />