=> {\n const { users } = project;\n\n const issues = [\n createEntity(Issue, {\n title: 'This is an issue of type: Task.',\n type: IssueType.TASK,\n status: IssueStatus.BACKLOG,\n priority: IssuePriority.HIGH,\n listPosition: 1,\n description: `Your teams can collaborate in Jira applications by breaking down pieces of work into issues. Issues can represent tasks, software bugs, feature requests or any other type of project work.
Jira Software (software projects) issue types:
Bug ๐ A bug is a problem which impairs or prevents the functions of a product.
Story ๐ A user story is the smallest unit of work that needs to be done.
Task ๐ณ A task represents work that needs to be done.
`,\n estimate: 8,\n timeSpent: 4,\n reporterId: users[1].id,\n project,\n users: [users[0]],\n }),\n createEntity(Issue, {\n title: \"Click on an issue to see what's behind it.\",\n type: IssueType.TASK,\n status: IssueStatus.BACKLOG,\n priority: IssuePriority.LOW,\n listPosition: 2,\n description: `Key terms to know
Issues A Jira 'issue' refers to a single work item of any type or size that is tracked from creation to completion. For example, an issue could be a feature being developed by a software team, a to-do item for a marketing team, or a contract that needs to be written by a legal team.
Projects A project is, quite simply, a collection of issues that are held in common by purpose or context. Issues grouped into projects can be configured in a variety of ways, ranging from visibility restrictions to available workflows.
Workflows Workflows represent the sequential path an issues takes from creation to completion. A basic workflow might look something like this:
In this case, Open, Done, and the labels in between represent the status an issue can take, while the arrows represent potential transitions from one status to another.
Agile Agile is not a Jira Software-specific term. It's a work philosophy that originated in the software development field and has since expanded to a variety of other industries. While we won't belabor the definition here (there are great resources for that!), agile emphasizes an iterative approach to work informed by customer feedback where delivery occurs incrementally and continuously. The ideal agile team can move quickly and adapt to changing requirements without missing much of a beat.
Server With Jira Software Server, you host Jira Software on your own hardware and customize your setup however you'd like. This is generally the best option for teams who need to manage all the details, have stricter requirements for data governance, and don't mind the additional complexity of hosting themselves.
Data Center
With Jira Software Data Center, you can host Jira Software on your own hardware or with IaaS vendors like AWS and Azure . This is generally the best option for enterprise teams who need uninterrupted access to Jira Software and performance at scale.
`,\n estimate: 5,\n timeSpent: 2,\n reporterId: users[2].id,\n project,\n users: [users[0]],\n }),\n createEntity(Issue, {\n title: 'Try dragging issues to different columns to transition their status.',\n type: IssueType.STORY,\n status: IssueStatus.BACKLOG,\n priority: IssuePriority.MEDIUM,\n listPosition: 3,\n description: `An issue's status indicates its current place in the project's workflow. Here's a list of the statuses that come with JIRA products, depending on what projects you've created on your site.
Jira software issue statuses:
Backlog The issue is waiting to be picked up in a future sprint.
Selected The issue is open and ready for the assignee to start work on it.
In Progress This issue is being actively worked on at the moment by the assignee.
Done Work has finished on the issue.
`,\n estimate: 15,\n timeSpent: 12,\n reporterId: users[1].id,\n project,\n }),\n createEntity(Issue, {\n title: 'You can use rich text with images in issue descriptions.',\n type: IssueType.STORY,\n status: IssueStatus.BACKLOG,\n priority: IssuePriority.LOWEST,\n listPosition: 4,\n description: `๐ ๐ ๐ ๐ ๐ ๐ ๐ ๐ ๐ ๐ ๐ ๐ ๐ ๐ฅญ ๐ฅฅ ๐ฅ ๐
๐ ๐ฅ ๐ฅฆ ๐ฅ ๐ฅฌ ๐ถ ๐ฝ ๐ฅ ๐ฅ ๐ ๐ฅ ๐ ๐ฅ ๐ฅจ ๐ฅฏ ๐ง ๐ฅ ๐ณ ๐ฅ ๐ฅ ๐ฅฉ ๐ ๐ ๐ญ ๐ ๐ ๐ ๐ฅช ๐ฅ ๐ฎ ๐ฏ ๐ฅ ๐ฅ ๐ฅซ ๐ ๐ ๐ฒ ๐ ๐ฃ ๐ฑ ๐ฅ ๐ค ๐ ๐ ๐ ๐ฅ ๐ฅฎ ๐ฅ ๐ข ๐ก ๐ง ๐จ ๐ฆ ๐ฅง ๐ฐ ๐ ๐ฎ ๐ญ ๐ฌ ๐ซ ๐ฟ ๐ง ๐ฉ ๐ช ๐ฐ ๐ฅ ๐ฏ ๐ฅ ๐ผ โ๏ธ ๐ต ๐ฅค ๐ถ ๐บ ๐ป ๐ฅ ๐ท ๐ฅ ๐ธ ๐น ๐พ ๐ฅ ๐ด ๐ฝ ๐ฅฃ ๐ฅก ๐ฅข An issue's priority indicates its relative importance. The default priorities are listed below. Both the priorities and their meanings can be customized by your administrator to suit your organization. Learn more about configuring priorities and their descriptions .
Jira software issue priorities:
Highest โฌ๏ธ This problem will block progress.
High โฌ๏ธ Serious problem that could block progress.
Medium โฌ๏ธ Has the potential to affect progress.
Low โฌ๏ธ Minor problem or easily worked around.
Lowest โฌ๏ธ Trivial problem with little or no impact on progress.
`,\n estimate: 4,\n timeSpent: 1,\n reporterId: users[2].id,\n project,\n }),\n createEntity(Issue, {\n title: 'Each issue has a single reporter but can have multiple assignees.',\n type: IssueType.STORY,\n status: IssueStatus.SELECTED,\n priority: IssuePriority.HIGH,\n listPosition: 6,\n description: `Try assigning Pickle Rick to this issue. ๐ฅ ๐ฅ ๐ฅ
`,\n estimate: 6,\n timeSpent: 3,\n reporterId: users[1].id,\n project,\n users: [users[1], users[2]],\n }),\n createEntity(Issue, {\n title:\n 'You can track how many hours were spent working on an issue, and how many hours remain.',\n type: IssueType.TASK,\n status: IssueStatus.INPROGRESS,\n priority: IssuePriority.LOWEST,\n listPosition: 7,\n description: `Before you start work on an issue, you can set a time or other type of estimate to calculate how much work you believe it'll take to resolve it. Once you've started to work on a specific issue, log time to keep a record of it.
Open the issue and select โขโขโข > Time tracking Fill in the Time Spent field Fill in the Time Remaining field and click Save
That's it! ๐ฏ๐ฏ `,\n estimate: 12,\n timeSpent: 11,\n reporterId: users[0].id,\n project,\n }),\n createEntity(Issue, {\n title: 'Try leaving a comment on this issue.',\n type: IssueType.TASK,\n status: IssueStatus.DONE,\n priority: IssuePriority.MEDIUM,\n listPosition: 7,\n description: `Adding comments to an issue is a useful way to record additional detail about an issue, and collaborate with team members. Comments are shown in the Comments section when you view an issue .
Open the issue on which to add your comment. Click the Add a comment button. Keyboard shortcut : m In the Comment text box, type your comment, using as many lines as you require. Click the Save button to save the comment. => {\n const comments = [\n createEntity(Comment, {\n body: 'An old silent pond...\\nA frog jumps into the pond,\\nsplash! Silence again.',\n issueId: issues[0].id,\n userId: users[2].id,\n }),\n createEntity(Comment, {\n body: 'Autumn moonlight-\\na worm digs silently\\ninto the chestnut.',\n issueId: issues[1].id,\n userId: users[2].id,\n }),\n createEntity(Comment, {\n body: 'In the twilight rain\\nthese brilliant-hued hibiscus -\\nA lovely sunset.',\n issueId: issues[2].id,\n userId: users[2].id,\n }),\n createEntity(Comment, {\n body: 'A summer river being crossed\\nhow pleasing\\nwith sandals in my hands!',\n issueId: issues[3].id,\n userId: users[2].id,\n }),\n createEntity(Comment, {\n body: \"Light of the moon\\nMoves west, flowers' shadows\\nCreep eastward.\",\n issueId: issues[4].id,\n userId: users[2].id,\n }),\n createEntity(Comment, {\n body: 'In the moonlight,\\nThe color and scent of the wisteria\\nSeems far away.',\n issueId: issues[5].id,\n userId: users[2].id,\n }),\n createEntity(Comment, {\n body: 'O snail\\nClimb Mount Fuji,\\nBut slowly, slowly!',\n issueId: issues[6].id,\n userId: users[2].id,\n }),\n createEntity(Comment, {\n body: 'Everything I touch\\nwith tenderness, alas,\\npricks like a bramble.',\n issueId: issues[7].id,\n userId: users[2].id,\n }),\n ];\n return Promise.all(comments);\n};\n\nconst createGuestAccount = async (): Promise => {\n const users = await seedUsers();\n const project = await seedProject(users);\n const issues = await seedIssues(project);\n await seedComments(issues, project.users);\n return users[2];\n};\n\nexport default createGuestAccount;\n"
},
{
"path": "api/src/database/createTestAccount.ts",
"content": "import { Comment, Issue, Project, User } from 'entities';\nimport { ProjectCategory } from 'constants/projects';\nimport { IssueType, IssueStatus, IssuePriority } from 'constants/issues';\nimport { createEntity } from 'utils/typeorm';\n\nconst seedUsers = (): Promise => {\n const users = [\n createEntity(User, {\n email: 'gaben@jira.test',\n name: 'Gaben',\n avatarUrl: 'https://i.ibb.co/6RJ5hq6/gaben.jpg',\n }),\n createEntity(User, {\n email: 'yoda@jira.test',\n name: 'Yoda',\n avatarUrl: 'https://i.ibb.co/6n0hLML/baby-yoda.jpg',\n }),\n ];\n return Promise.all(users);\n};\n\nconst seedProject = (users: User[]): Promise =>\n createEntity(Project, {\n name: 'Project name',\n url: 'https://www.testurl.com',\n description: 'Project description',\n category: ProjectCategory.SOFTWARE,\n users,\n });\n\nconst seedIssues = (project: Project): Promise => {\n const { users } = project;\n\n const issues = [\n createEntity(Issue, {\n title: 'Issue title 1',\n type: IssueType.TASK,\n status: IssueStatus.BACKLOG,\n priority: IssuePriority.LOWEST,\n listPosition: 1,\n reporterId: users[0].id,\n project,\n }),\n createEntity(Issue, {\n title: 'Issue title 2',\n type: IssueType.TASK,\n status: IssueStatus.BACKLOG,\n priority: IssuePriority.MEDIUM,\n listPosition: 2,\n estimate: 5,\n description: 'Issue description 2',\n reporterId: users[0].id,\n users: [users[0]],\n project,\n }),\n createEntity(Issue, {\n title: 'Issue title 3',\n type: IssueType.STORY,\n status: IssueStatus.SELECTED,\n priority: IssuePriority.HIGH,\n listPosition: 3,\n estimate: 10,\n description: 'Issue description 3',\n reporterId: users[0].id,\n users: [users[0], users[1]],\n project,\n }),\n ];\n return Promise.all(issues);\n};\n\nconst seedComments = (issue: Issue, user: User): Promise =>\n createEntity(Comment, {\n body: 'Comment body',\n issueId: issue.id,\n userId: user.id,\n });\n\nconst createTestAccount = async (): Promise => {\n const users = await seedUsers();\n const project = await seedProject(users);\n const issues = await seedIssues(project);\n await seedComments(issues[0], project.users[0]);\n return users[0];\n};\n\nexport default createTestAccount;\n"
},
{
"path": "api/src/database/resetDatabase.ts",
"content": "import { getConnection } from 'typeorm';\n\nconst resetDatabase = async (): Promise => {\n const connection = getConnection();\n await connection.dropDatabase();\n await connection.synchronize();\n};\n\nexport default resetDatabase;\n"
},
{
"path": "api/src/entities/Comment.ts",
"content": "import {\n BaseEntity,\n Entity,\n Column,\n PrimaryGeneratedColumn,\n CreateDateColumn,\n UpdateDateColumn,\n ManyToOne,\n} from 'typeorm';\n\nimport is from 'utils/validation';\nimport { Issue, User } from '.';\n\n@Entity()\nclass Comment extends BaseEntity {\n static validations = {\n body: [is.required(), is.maxLength(50000)],\n };\n\n @PrimaryGeneratedColumn()\n id: number;\n\n @Column('text')\n body: string;\n\n @CreateDateColumn({ type: 'timestamp' })\n createdAt: Date;\n\n @UpdateDateColumn({ type: 'timestamp' })\n updatedAt: Date;\n\n @ManyToOne(\n () => User,\n user => user.comments,\n )\n user: User;\n\n @Column('integer')\n userId: number;\n\n @ManyToOne(\n () => Issue,\n issue => issue.comments,\n { onDelete: 'CASCADE' },\n )\n issue: Issue;\n\n @Column('integer')\n issueId: number;\n}\n\nexport default Comment;\n"
},
{
"path": "api/src/entities/Issue.ts",
"content": "import striptags from 'striptags';\nimport {\n BaseEntity,\n Entity,\n Column,\n PrimaryGeneratedColumn,\n CreateDateColumn,\n UpdateDateColumn,\n ManyToOne,\n OneToMany,\n ManyToMany,\n JoinTable,\n RelationId,\n BeforeUpdate,\n BeforeInsert,\n} from 'typeorm';\n\nimport is from 'utils/validation';\nimport { IssueType, IssueStatus, IssuePriority } from 'constants/issues';\nimport { Comment, Project, User } from '.';\n\n@Entity()\nclass Issue extends BaseEntity {\n static validations = {\n title: [is.required(), is.maxLength(200)],\n type: [is.required(), is.oneOf(Object.values(IssueType))],\n status: [is.required(), is.oneOf(Object.values(IssueStatus))],\n priority: [is.required(), is.oneOf(Object.values(IssuePriority))],\n listPosition: is.required(),\n reporterId: is.required(),\n };\n\n @PrimaryGeneratedColumn()\n id: number;\n\n @Column('varchar')\n title: string;\n\n @Column('varchar')\n type: IssueType;\n\n @Column('varchar')\n status: IssueStatus;\n\n @Column('varchar')\n priority: IssuePriority;\n\n @Column('double precision')\n listPosition: number;\n\n @Column('text', { nullable: true })\n description: string | null;\n\n @Column('text', { nullable: true })\n descriptionText: string | null;\n\n @Column('integer', { nullable: true })\n estimate: number | null;\n\n @Column('integer', { nullable: true })\n timeSpent: number | null;\n\n @Column('integer', { nullable: true })\n timeRemaining: number | null;\n\n @CreateDateColumn({ type: 'timestamp' })\n createdAt: Date;\n\n @UpdateDateColumn({ type: 'timestamp' })\n updatedAt: Date;\n\n @Column('integer')\n reporterId: number;\n\n @ManyToOne(\n () => Project,\n project => project.issues,\n )\n project: Project;\n\n @Column('integer')\n projectId: number;\n\n @OneToMany(\n () => Comment,\n comment => comment.issue,\n )\n comments: Comment[];\n\n @ManyToMany(\n () => User,\n user => user.issues,\n )\n @JoinTable()\n users: User[];\n\n @RelationId((issue: Issue) => issue.users)\n userIds: number[];\n\n @BeforeInsert()\n @BeforeUpdate()\n setDescriptionText = (): void => {\n if (this.description) {\n this.descriptionText = striptags(this.description);\n }\n };\n}\n\nexport default Issue;\n"
},
{
"path": "api/src/entities/Project.ts",
"content": "import {\n BaseEntity,\n Entity,\n Column,\n PrimaryGeneratedColumn,\n CreateDateColumn,\n UpdateDateColumn,\n OneToMany,\n} from 'typeorm';\n\nimport is from 'utils/validation';\nimport { ProjectCategory } from 'constants/projects';\nimport { Issue, User } from '.';\n\n@Entity()\nclass Project extends BaseEntity {\n static validations = {\n name: [is.required(), is.maxLength(100)],\n url: is.url(),\n category: [is.required(), is.oneOf(Object.values(ProjectCategory))],\n };\n\n @PrimaryGeneratedColumn()\n id: number;\n\n @Column('varchar')\n name: string;\n\n @Column('varchar', { nullable: true })\n url: string | null;\n\n @Column('text', { nullable: true })\n description: string | null;\n\n @Column('varchar')\n category: ProjectCategory;\n\n @CreateDateColumn({ type: 'timestamp' })\n createdAt: Date;\n\n @UpdateDateColumn({ type: 'timestamp' })\n updatedAt: Date;\n\n @OneToMany(\n () => Issue,\n issue => issue.project,\n )\n issues: Issue[];\n\n @OneToMany(\n () => User,\n user => user.project,\n )\n users: User[];\n}\n\nexport default Project;\n"
},
{
"path": "api/src/entities/User.ts",
"content": "import {\n BaseEntity,\n Entity,\n Column,\n PrimaryGeneratedColumn,\n CreateDateColumn,\n UpdateDateColumn,\n OneToMany,\n ManyToMany,\n ManyToOne,\n RelationId,\n} from 'typeorm';\n\nimport is from 'utils/validation';\nimport { Comment, Issue, Project } from '.';\n\n@Entity()\nclass User extends BaseEntity {\n static validations = {\n name: [is.required(), is.maxLength(100)],\n email: [is.required(), is.email(), is.maxLength(200)],\n };\n\n @PrimaryGeneratedColumn()\n id: number;\n\n @Column('varchar')\n name: string;\n\n @Column('varchar')\n email: string;\n\n @Column('varchar', { length: 2000 })\n avatarUrl: string;\n\n @CreateDateColumn({ type: 'timestamp' })\n createdAt: Date;\n\n @UpdateDateColumn({ type: 'timestamp' })\n updatedAt: Date;\n\n @OneToMany(\n () => Comment,\n comment => comment.user,\n )\n comments: Comment[];\n\n @ManyToMany(\n () => Issue,\n issue => issue.users,\n )\n issues: Issue[];\n\n @ManyToOne(\n () => Project,\n project => project.users,\n )\n project: Project;\n\n @RelationId((user: User) => user.project)\n projectId: number;\n}\n\nexport default User;\n"
},
{
"path": "api/src/entities/index.ts",
"content": "export { default as Comment } from './Comment';\nexport { default as Issue } from './Issue';\nexport { default as Project } from './Project';\nexport { default as User } from './User';\n"
},
{
"path": "api/src/errors/asyncCatch.ts",
"content": "import { RequestHandler } from 'express';\n\nexport const catchErrors = (requestHandler: RequestHandler): RequestHandler => {\n return async (req, res, next): Promise => {\n try {\n return await requestHandler(req, res, next);\n } catch (error) {\n next(error);\n }\n };\n};\n"
},
{
"path": "api/src/errors/customErrors.ts",
"content": "/* eslint-disable max-classes-per-file */\n\ntype ErrorData = { [key: string]: any };\n\nexport class CustomError extends Error {\n constructor(\n public message: string,\n public code: string | number = 'INTERNAL_ERROR',\n public status: number = 500,\n public data: ErrorData = {},\n ) {\n super();\n }\n}\n\nexport class RouteNotFoundError extends CustomError {\n constructor(originalUrl: string) {\n super(`Route '${originalUrl}' does not exist.`, 'ROUTE_NOT_FOUND', 404);\n }\n}\n\nexport class EntityNotFoundError extends CustomError {\n constructor(entityName: string) {\n super(`${entityName} not found.`, 'ENTITY_NOT_FOUND', 404);\n }\n}\n\nexport class BadUserInputError extends CustomError {\n constructor(errorData: ErrorData) {\n super('There were validation errors.', 'BAD_USER_INPUT', 400, errorData);\n }\n}\n\nexport class InvalidTokenError extends CustomError {\n constructor(message = 'Authentication token is invalid.') {\n super(message, 'INVALID_TOKEN', 401);\n }\n}\n"
},
{
"path": "api/src/errors/index.ts",
"content": "export * from './customErrors';\nexport { catchErrors } from './asyncCatch';\n"
},
{
"path": "api/src/index.ts",
"content": "import 'module-alias/register';\nimport 'dotenv/config';\nimport 'reflect-metadata';\nimport express from 'express';\nimport cors from 'cors';\n\nimport createDatabaseConnection from 'database/createConnection';\nimport { addRespondToResponse } from 'middleware/response';\nimport { authenticateUser } from 'middleware/authentication';\nimport { handleError } from 'middleware/errors';\nimport { RouteNotFoundError } from 'errors';\n\nimport { attachPublicRoutes, attachPrivateRoutes } from './routes';\n\nconst establishDatabaseConnection = async (): Promise => {\n try {\n await createDatabaseConnection();\n } catch (error) {\n console.log(error);\n }\n};\n\nconst initializeExpress = (): void => {\n const app = express();\n\n app.use(cors());\n app.use(express.json());\n app.use(express.urlencoded());\n\n app.use(addRespondToResponse);\n\n attachPublicRoutes(app);\n\n app.use('/', authenticateUser);\n\n attachPrivateRoutes(app);\n\n app.use((req, _res, next) => next(new RouteNotFoundError(req.originalUrl)));\n app.use(handleError);\n\n app.listen(process.env.PORT || 3000);\n};\n\nconst initializeApp = async (): Promise => {\n await establishDatabaseConnection();\n initializeExpress();\n};\n\ninitializeApp();\n"
},
{
"path": "api/src/middleware/authentication.ts",
"content": "import { Request } from 'express';\n\nimport { verifyToken } from 'utils/authToken';\nimport { catchErrors, InvalidTokenError } from 'errors';\nimport { User } from 'entities';\n\nexport const authenticateUser = catchErrors(async (req, _res, next) => {\n const token = getAuthTokenFromRequest(req);\n if (!token) {\n throw new InvalidTokenError('Authentication token not found.');\n }\n const userId = verifyToken(token).sub;\n if (!userId) {\n throw new InvalidTokenError('Authentication token is invalid.');\n }\n const user = await User.findOne(userId);\n if (!user) {\n throw new InvalidTokenError('Authentication token is invalid: User not found.');\n }\n req.currentUser = user;\n next();\n});\n\nconst getAuthTokenFromRequest = (req: Request): string | null => {\n const header = req.get('Authorization') || '';\n const [bearer, token] = header.split(' ');\n return bearer === 'Bearer' && token ? token : null;\n};\n"
},
{
"path": "api/src/middleware/errors.ts",
"content": "import { ErrorRequestHandler } from 'express';\nimport { pick } from 'lodash';\n\nimport { CustomError } from 'errors';\n\nexport const handleError: ErrorRequestHandler = (error, _req, res, _next) => {\n console.error(error);\n\n const isErrorSafeForClient = error instanceof CustomError;\n\n const clientError = isErrorSafeForClient\n ? pick(error, ['message', 'code', 'status', 'data'])\n : {\n message: 'Something went wrong, please contact our support.',\n code: 'INTERNAL_ERROR',\n status: 500,\n data: {},\n };\n\n res.status(clientError.status).send({ error: clientError });\n};\n"
},
{
"path": "api/src/middleware/response.ts",
"content": "import { RequestHandler } from 'express';\n\nexport const addRespondToResponse: RequestHandler = (_req, res, next) => {\n res.respond = (data): void => {\n res.status(200).send(data);\n };\n next();\n};\n"
},
{
"path": "api/src/routes.ts",
"content": "import * as authentication from 'controllers/authentication';\nimport * as comments from 'controllers/comments';\nimport * as issues from 'controllers/issues';\nimport * as projects from 'controllers/projects';\nimport * as test from 'controllers/test';\nimport * as users from 'controllers/users';\n\nexport const attachPublicRoutes = (app: any): void => {\n if (process.env.NODE_ENV === 'test') {\n app.delete('/test/reset-database', test.resetDatabase);\n app.post('/test/create-account', test.createAccount);\n }\n\n app.post('/authentication/guest', authentication.createGuestAccount);\n};\n\nexport const attachPrivateRoutes = (app: any): void => {\n app.post('/comments', comments.create);\n app.put('/comments/:commentId', comments.update);\n app.delete('/comments/:commentId', comments.remove);\n\n app.get('/issues', issues.getProjectIssues);\n app.get('/issues/:issueId', issues.getIssueWithUsersAndComments);\n app.post('/issues', issues.create);\n app.put('/issues/:issueId', issues.update);\n app.delete('/issues/:issueId', issues.remove);\n\n app.get('/project', projects.getProjectWithUsersAndIssues);\n app.put('/project', projects.update);\n\n app.get('/currentUser', users.getCurrentUser);\n};\n"
},
{
"path": "api/src/serializers/issues.ts",
"content": "import { pick } from 'lodash';\n\nimport { Issue } from 'entities';\n\nexport const issuePartial = (issue: Issue): Partial =>\n pick(issue, [\n 'id',\n 'title',\n 'type',\n 'status',\n 'priority',\n 'listPosition',\n 'createdAt',\n 'updatedAt',\n 'userIds',\n ]);\n"
},
{
"path": "api/src/types/env.d.ts",
"content": "declare namespace NodeJS {\n export interface ProcessEnv {\n DB_HOST: string;\n DB_PORT: string;\n DB_USERNAME: string;\n DB_PASSWORD: string;\n DB_DATABASE: string;\n JWT_SECRET: string;\n }\n}\n"
},
{
"path": "api/src/types/express.d.ts",
"content": "declare namespace Express {\n export interface Response {\n respond: (data: any) => void;\n }\n export interface Request {\n currentUser: import('entities').User;\n }\n}\n"
},
{
"path": "api/src/utils/authToken.ts",
"content": "import jwt, { SignOptions } from 'jsonwebtoken';\nimport { isPlainObject } from 'lodash';\n\nimport { InvalidTokenError } from 'errors';\n\nexport const signToken = (payload: object, options?: SignOptions): string =>\n jwt.sign(payload, process.env.JWT_SECRET, {\n expiresIn: '180 days',\n ...options,\n });\n\nexport const verifyToken = (token: string): { [key: string]: any } => {\n try {\n const payload = jwt.verify(token, process.env.JWT_SECRET);\n\n if (isPlainObject(payload)) {\n return payload as { [key: string]: any };\n }\n throw new Error();\n } catch (error) {\n throw new InvalidTokenError();\n }\n};\n"
},
{
"path": "api/src/utils/typeorm.ts",
"content": "import { FindOneOptions } from 'typeorm/find-options/FindOneOptions';\n\nimport { Project, User, Issue, Comment } from 'entities';\nimport { EntityNotFoundError, BadUserInputError } from 'errors';\nimport { generateErrors } from 'utils/validation';\n\ntype EntityConstructor = typeof Project | typeof User | typeof Issue | typeof Comment;\ntype EntityInstance = Project | User | Issue | Comment;\n\nconst entities: { [key: string]: EntityConstructor } = { Comment, Issue, Project, User };\n\nexport const findEntityOrThrow = async (\n Constructor: T,\n id: number | string,\n options?: FindOneOptions,\n): Promise> => {\n const instance = await Constructor.findOne(id, options);\n if (!instance) {\n throw new EntityNotFoundError(Constructor.name);\n }\n return instance;\n};\n\nexport const validateAndSaveEntity = async (instance: T): Promise => {\n const Constructor = entities[instance.constructor.name];\n\n if ('validations' in Constructor) {\n const errorFields = generateErrors(instance, Constructor.validations);\n\n if (Object.keys(errorFields).length > 0) {\n throw new BadUserInputError({ fields: errorFields });\n }\n }\n return instance.save() as Promise;\n};\n\nexport const createEntity = async (\n Constructor: T,\n input: Partial>,\n): Promise> => {\n const instance = Constructor.create(input);\n return validateAndSaveEntity(instance as InstanceType);\n};\n\nexport const updateEntity = async (\n Constructor: T,\n id: number | string,\n input: Partial>,\n): Promise> => {\n const instance = await findEntityOrThrow(Constructor, id);\n Object.assign(instance, input);\n return validateAndSaveEntity(instance);\n};\n\nexport const deleteEntity = async (\n Constructor: T,\n id: number | string,\n): Promise> => {\n const instance = await findEntityOrThrow(Constructor, id);\n await instance.remove();\n return instance;\n};\n"
},
{
"path": "api/src/utils/validation.ts",
"content": "type Value = any;\ntype ErrorMessage = false | string;\ntype FieldValues = { [key: string]: Value };\ntype Validator = (value: Value, fieldValues?: FieldValues) => ErrorMessage;\ntype FieldValidators = { [key: string]: Validator | Validator[] };\ntype FieldErrors = { [key: string]: string };\n\nconst is = {\n match: (testFn: Function, message = '') => (\n value: Value,\n fieldValues: FieldValues,\n ): ErrorMessage => !testFn(value, fieldValues) && message,\n\n required: () => (value: Value): ErrorMessage =>\n isNilOrEmptyString(value) && 'This field is required',\n\n minLength: (min: number) => (value: Value): ErrorMessage =>\n !!value && value.length < min && `Must be at least ${min} characters`,\n\n maxLength: (max: number) => (value: Value): ErrorMessage =>\n !!value && value.length > max && `Must be at most ${max} characters`,\n\n oneOf: (arr: any[]) => (value: Value): ErrorMessage =>\n !!value && !arr.includes(value) && `Must be one of: ${arr.join(', ')}`,\n\n notEmptyArray: () => (value: Value): ErrorMessage =>\n Array.isArray(value) && value.length === 0 && 'Please add at least one item',\n\n email: () => (value: Value): ErrorMessage =>\n !!value && !/.+@.+\\..+/.test(value) && 'Must be a valid email',\n\n url: () => (value: Value): ErrorMessage =>\n !!value &&\n // eslint-disable-next-line no-useless-escape\n !/^(?:http(s)?:\\/\\/)?[\\w.-]+(?:\\.[\\w\\.-]+)+[\\w\\-\\._~:/?#[\\]@!\\$&'\\(\\)\\*\\+,;=.]+$/.test(value) &&\n 'Must be a valid URL',\n};\n\nconst isNilOrEmptyString = (value: Value): boolean =>\n value === undefined || value === null || value === '';\n\nexport const generateErrors = (\n fieldValues: FieldValues,\n fieldValidators: FieldValidators,\n): FieldErrors => {\n const fieldErrors: FieldErrors = {};\n\n Object.entries(fieldValidators).forEach(([fieldName, validators]) => {\n [validators].flat().forEach(validator => {\n const errorMessage = validator(fieldValues[fieldName], fieldValues);\n\n if (errorMessage !== false && !fieldErrors[fieldName]) {\n fieldErrors[fieldName] = errorMessage;\n }\n });\n });\n return fieldErrors;\n};\n\nexport default is;\n"
},
{
"path": "api/tsconfig-paths.js",
"content": "const tsConfigPaths = require('tsconfig-paths');\n\nconst tsConfig = require('./tsconfig.json');\n\n// Typescript compiler doesn't rewrite absolute paths back to relative\n// when compiling production code to /build. Instead we have to use\n// tsconfig-paths to do that job when we run our production start script.\n// https://github.com/microsoft/TypeScript/issues/10866\ntsConfigPaths.register({\n baseUrl: tsConfig.compilerOptions.outDir,\n paths: tsConfig.compilerOptions.paths,\n});\n"
},
{
"path": "api/tsconfig.json",
"content": "{\n \"compilerOptions\": {\n \"target\": \"es6\",\n \"module\": \"commonjs\",\n \"lib\": [\"dom\", \"es6\", \"es2017\", \"es2019\", \"esnext.asynciterable\"],\n \"sourceMap\": true,\n \"outDir\": \"./build\",\n \"removeComments\": true,\n \"strict\": true,\n \"noImplicitAny\": true,\n \"strictNullChecks\": true,\n \"strictFunctionTypes\": true,\n \"strictBindCallApply\": true,\n \"strictPropertyInitialization\": false,\n \"noImplicitThis\": true,\n \"alwaysStrict\": true,\n \"noUnusedLocals\": true,\n \"noUnusedParameters\": true,\n \"noImplicitReturns\": false,\n \"noFallthroughCasesInSwitch\": true,\n \"moduleResolution\": \"node\",\n \"baseUrl\": \"src\",\n \"paths\": {\n \"*\": [\"./*\"]\n },\n \"types\": [\"node\"],\n \"allowSyntheticDefaultImports\": true,\n \"esModuleInterop\": true,\n \"experimentalDecorators\": true,\n \"emitDecoratorMetadata\": true,\n \"forceConsistentCasingInFileNames\": true\n },\n \"exclude\": [\"node_modules\"],\n \"include\": [\"./src/**/*.ts\"]\n}\n"
},
{
"path": "client/.babelrc",
"content": "{\n \"presets\": [\n [\n \"@babel/preset-env\",\n {\n \"useBuiltIns\": \"entry\",\n \"corejs\": 3\n }\n ],\n \"@babel/react\"\n ],\n \"plugins\": [\n [\"@babel/plugin-proposal-decorators\", { \"legacy\": true }],\n \"@babel/plugin-proposal-export-namespace-from\",\n \"@babel/plugin-syntax-dynamic-import\",\n [\"@babel/plugin-proposal-class-properties\", { \"loose\": true }]\n ]\n}\n"
},
{
"path": "client/.eslintrc.json",
"content": "{\n \"parser\": \"babel-eslint\",\n \"parserOptions\": {\n \"sourceType\": \"module\",\n \"ecmaVersion\": 8,\n \"ecmaFeatures\": {\n \"jsx\": true\n }\n },\n \"env\": {\n \"browser\": true,\n \"jest\": true\n },\n \"extends\": [\"airbnb\", \"prettier\", \"prettier/react\"],\n \"plugins\": [\"react-hooks\"],\n \"rules\": {\n \"react-hooks/rules-of-hooks\": \"error\",\n \"react-hooks/exhaustive-deps\": \"warn\",\n \"radix\": 0,\n \"no-restricted-syntax\": 0,\n \"no-await-in-loop\": 0,\n \"no-console\": 0,\n \"consistent-return\": 0,\n \"no-param-reassign\": [2, { \"props\": false }],\n \"no-return-assign\": [2, \"except-parens\"],\n \"no-use-before-define\": 0,\n \"import/prefer-default-export\": 0,\n \"import/no-cycle\": 0,\n \"react/no-array-index-key\": 0,\n \"react/forbid-prop-types\": 0,\n \"react/prop-types\": [2, { \"skipUndeclared\": true }],\n \"react/jsx-fragments\": [2, \"element\"],\n \"react/state-in-constructor\": 0,\n \"react/jsx-props-no-spreading\": 0,\n \"jsx-a11y/click-events-have-key-events\": 0\n },\n \"settings\": {\n // Allows us to lint absolute imports within codebase\n \"import/resolver\": {\n \"node\": {\n \"moduleDirectory\": [\"node_modules\", \"src/\"]\n }\n }\n }\n}\n"
},
{
"path": "client/.prettierrc",
"content": "{\n \"printWidth\": 100,\n \"singleQuote\": true,\n \"trailingComma\": \"all\"\n}\n"
},
{
"path": "client/README.md",
"content": "# Project structure ๐\n\nI've used this architecture on multiple larger projects in the past and it performed really well.\n\nThere are two special root folders in `src`: `App` and `shared` (described below). All other root folders in `src` (in our case only two: `Auth` and `Project`) should follow the structure of the routes. We can call these folders modules.\n\nThe main rule to follow: **Files from one module can only import from ancestor folders within the same module or from `src/shared`.** This makes the codebase easier to understand, and if you're fiddling with code in one module, you will never introduce a bug in another module.\n\n/jest/fileMock.js',\n '\\\\.(css|scss|less)$': '/jest/styleMock.js',\n },\n};\n"
},
{
"path": "client/jsconfig.json",
"content": "// This config allows VSCode intellisense to work with absolute \"src\" imports and jsx files\n{\n \"compilerOptions\": {\n \"baseUrl\": \"./src\",\n \"jsx\": \"react\"\n },\n \"include\": [\"src/**/*\", \"cypress/**/*.js\", \"./node_modules/cypress\"]\n}\n"
},
{
"path": "client/package.json",
"content": "{\n \"name\": \"jira_client\",\n \"version\": \"1.0.0\",\n \"author\": \"Ivor Reic\",\n \"license\": \"MIT\",\n \"scripts\": {\n \"start\": \"webpack-dev-server\",\n \"start:production\": \"pm2 start --name 'jira_client' server.js\",\n \"test:jest\": \"jest\",\n \"test:cypress\": \"node_modules/.bin/cypress open\",\n \"build\": \"rm -rf build && webpack --config webpack.config.production.js --progress\",\n \"pre-commit\": \"lint-staged\"\n },\n \"devDependencies\": {\n \"@babel/core\": \"^7.7.4\",\n \"@babel/plugin-proposal-class-properties\": \"^7.7.4\",\n \"@babel/plugin-proposal-decorators\": \"^7.7.4\",\n \"@babel/plugin-proposal-export-namespace-from\": \"^7.7.4\",\n \"@babel/plugin-syntax-dynamic-import\": \"^7.7.4\",\n \"@babel/preset-env\": \"^7.7.4\",\n \"@babel/preset-react\": \"^7.7.4\",\n \"@cypress/webpack-preprocessor\": \"^4.1.1\",\n \"babel-eslint\": \"^10.0.3\",\n \"babel-loader\": \"^8.0.6\",\n \"css-loader\": \"^3.3.2\",\n \"cypress\": \"^3.8.1\",\n \"eslint\": \"^6.1.0\",\n \"eslint-config-airbnb\": \"^18.0.1\",\n \"eslint-config-prettier\": \"^6.7.0\",\n \"eslint-plugin-cypress\": \"^2.8.1\",\n \"eslint-plugin-import\": \"^2.18.2\",\n \"eslint-plugin-jsx-a11y\": \"^6.2.3\",\n \"eslint-plugin-react\": \"^7.17.0\",\n \"eslint-plugin-react-hooks\": \"^1.7.0\",\n \"file-loader\": \"^5.0.2\",\n \"html-webpack-plugin\": \"^3.2.0\",\n \"jest\": \"^24.9.0\",\n \"lint-staged\": \"^9.5.0\",\n \"prettier\": \"^1.19.1\",\n \"style-loader\": \"^1.0.1\",\n \"url-loader\": \"^3.0.0\",\n \"webpack\": \"^4.41.2\",\n \"webpack-cli\": \"^3.3.10\",\n \"webpack-dev-server\": \"^3.9.0\"\n },\n \"dependencies\": {\n \"@4tw/cypress-drag-drop\": \"^1.3.0\",\n \"axios\": \"^0.19.0\",\n \"color\": \"^3.1.2\",\n \"compression\": \"^1.7.4\",\n \"core-js\": \"^3.4.7\",\n \"express\": \"^4.17.1\",\n \"express-history-api-fallback\": \"^2.2.1\",\n \"formik\": \"^2.1.1\",\n \"history\": \"^4.10.1\",\n \"jwt-decode\": \"^2.2.0\",\n \"lodash\": \"^4.17.15\",\n \"moment\": \"^2.24.0\",\n \"prop-types\": \"^15.7.2\",\n \"query-string\": \"^6.9.0\",\n \"quill\": \"^1.3.7\",\n \"react\": \"^16.12.0\",\n \"react-beautiful-dnd\": \"^12.2.0\",\n \"react-content-loader\": \"^4.3.3\",\n \"react-dom\": \"^16.12.0\",\n \"react-router-dom\": \"^5.1.2\",\n \"react-textarea-autosize\": \"^7.1.2\",\n \"react-transition-group\": \"^4.3.0\",\n \"regenerator-runtime\": \"^0.13.3\",\n \"styled-components\": \"^4.4.1\",\n \"sweet-pubsub\": \"^1.1.2\"\n },\n \"lint-staged\": {\n \"*.{js,jsx}\": [\n \"eslint --fix\",\n \"prettier --write\",\n \"git add\"\n ]\n }\n}\n"
},
{
"path": "client/server.js",
"content": "const express = require('express');\nconst fallback = require('express-history-api-fallback');\nconst compression = require('compression');\n\nconst app = express();\n\napp.use(compression());\n\napp.use(express.static(`${__dirname}/build`));\n\napp.use(fallback(`${__dirname}/build/index.html`));\n\napp.listen(process.env.PORT || 8081);\n"
},
{
"path": "client/src/App/BaseStyles.js",
"content": "import { createGlobalStyle } from 'styled-components';\n\nimport { color, font, mixin } from 'shared/utils/styles';\n\nexport default createGlobalStyle`\n html, body, #root {\n height: 100%;\n min-height: 100%;\n min-width: 768px;\n }\n\n body {\n color: ${color.textDarkest};\n -webkit-tap-highlight-color: transparent;\n line-height: 1.2;\n ${font.size(16)}\n ${font.regular}\n }\n\n #root {\n display: flex;\n flex-direction: column;\n }\n\n button,\n input,\n optgroup,\n select,\n textarea {\n ${font.regular}\n }\n\n *, *:after, *:before, input[type=\"search\"] {\n box-sizing: border-box;\n }\n\n a {\n color: inherit;\n text-decoration: none;\n }\n\n ul {\n list-style: none;\n }\n\n ul, li, ol, dd, h1, h2, h3, h4, h5, h6, p {\n padding: 0;\n margin: 0;\n }\n\n h1, h2, h3, h4, h5, h6, strong {\n ${font.bold}\n }\n\n button {\n background: none;\n border: none;\n }\n\n /* Workaround for IE11 focus highlighting for select elements */\n select::-ms-value {\n background: none;\n color: #42413d;\n }\n\n [role=\"button\"], button, input, select, textarea {\n outline: none;\n &:focus {\n outline: none;\n }\n &:disabled {\n opacity: 1;\n }\n }\n [role=\"button\"], button, input, textarea {\n appearance: none;\n }\n select:-moz-focusring {\n color: transparent;\n text-shadow: 0 0 0 #000;\n }\n select::-ms-expand {\n display: none;\n }\n select option {\n color: ${color.textDarkest};\n }\n\n p {\n line-height: 1.4285;\n a {\n ${mixin.link()}\n }\n }\n\n textarea {\n line-height: 1.4285;\n }\n\n body, select {\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n }\n\n html {\n touch-action: manipulation;\n }\n\n ${mixin.placeholderColor(color.textLight)}\n`;\n"
},
{
"path": "client/src/App/NormalizeStyles.js",
"content": "import { createGlobalStyle } from 'styled-components';\n\n/** DO NOT ALTER THIS FILE. It is a copy of https://necolas.github.io/normalize.css/ */\n\nexport default createGlobalStyle`\n html {\n line-height: 1.15;\n -webkit-text-size-adjust: 100%;\n }\n body {\n margin: 0;\n }\n main {\n display: block;\n }\n h1 {\n font-size: 2em;\n margin: 0.67em 0;\n }\n hr {\n box-sizing: content-box;\n height: 0;\n overflow: visible;\n }\n pre {\n font-family: monospace, monospace;\n font-size: 1em;\n }\n a {\n background-color: transparent;\n }\n abbr[title] {\n border-bottom: none;\n text-decoration: underline;\n text-decoration: underline dotted;\n }\n b,\n strong {\n font-weight: bolder;\n }\n code,\n kbd,\n samp {\n font-family: monospace, monospace;\n font-size: 1em;\n }\n small {\n font-size: 80%;\n }\n sub,\n sup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n }\n sub {\n bottom: -0.25em;\n }\n sup {\n top: -0.5em;\n }\n img {\n border-style: none;\n }\n button,\n input,\n optgroup,\n select,\n textarea {\n font-family: inherit;\n font-size: 100%;\n line-height: 1.15;\n margin: 0;\n }\n button,\n input {\n overflow: visible;\n }\n button,\n select {\n text-transform: none;\n }\n button,\n [type=\"button\"],\n [type=\"reset\"],\n [type=\"submit\"] {\n -webkit-appearance: button;\n }\n button::-moz-focus-inner,\n [type=\"button\"]::-moz-focus-inner,\n [type=\"reset\"]::-moz-focus-inner,\n [type=\"submit\"]::-moz-focus-inner {\n border-style: none;\n padding: 0;\n }\n button:-moz-focusring,\n [type=\"button\"]:-moz-focusring,\n [type=\"reset\"]:-moz-focusring,\n [type=\"submit\"]:-moz-focusring {\n outline: 1px dotted ButtonText;\n }\n fieldset {\n padding: 0.35em 0.75em 0.625em;\n }\n legend {\n box-sizing: border-box;\n color: inherit;\n display: table;\n max-width: 100%;\n padding: 0;\n white-space: normal;\n }\n progress {\n vertical-align: baseline;\n }\n textarea {\n overflow: auto;\n }\n [type=\"checkbox\"],\n [type=\"radio\"] {\n box-sizing: border-box;\n padding: 0;\n }\n [type=\"number\"]::-webkit-inner-spin-button,\n [type=\"number\"]::-webkit-outer-spin-button {\n height: auto;\n }\n [type=\"search\"] {\n -webkit-appearance: textfield;\n outline-offset: -2px;\n }\n [type=\"search\"]::-webkit-search-decoration {\n -webkit-appearance: none;\n }\n ::-webkit-file-upload-button {\n -webkit-appearance: button;\n font: inherit;\n }\n details {\n display: block;\n }\n summary {\n display: list-item;\n }\n template {\n display: none;\n }\n [hidden] {\n display: none;\n }\n`;\n"
},
{
"path": "client/src/App/Routes.jsx",
"content": "import React from 'react';\nimport { Router, Switch, Route, Redirect } from 'react-router-dom';\n\nimport history from 'browserHistory';\nimport Project from 'Project';\nimport Authenticate from 'Auth/Authenticate';\nimport PageError from 'shared/components/PageError';\n\nconst Routes = () => (\n \n \n \n \n);\n\nexport default Routes;\n"
},
{
"path": "client/src/App/Toast/Styles.js",
"content": "import styled from 'styled-components';\n\nimport { color, font, mixin, zIndexValues } from 'shared/utils/styles';\nimport { Icon } from 'shared/components';\n\nexport const Container = styled.div`\n z-index: ${zIndexValues.modal + 1};\n position: fixed;\n right: 30px;\n top: 50px;\n`;\n\nexport const StyledToast = styled.div`\n position: relative;\n margin-bottom: 5px;\n width: 300px;\n padding: 15px 20px;\n border-radius: 3px;\n color: #fff;\n background: ${props => color[props.type]};\n cursor: pointer;\n transition: all 0.15s;\n ${mixin.clearfix}\n ${mixin.hardwareAccelerate}\n\n &.jira-toast-enter,\n &.jira-toast-exit.jira-toast-exit-active {\n opacity: 0;\n right: -10px;\n }\n\n &.jira-toast-exit,\n &.jira-toast-enter.jira-toast-enter-active {\n opacity: 1;\n right: 0;\n }\n`;\n\nexport const CloseIcon = styled(Icon)`\n position: absolute;\n top: 13px;\n right: 14px;\n font-size: 22px;\n cursor: pointer;\n color: #fff;\n`;\n\nexport const Title = styled.div`\n padding-right: 22px;\n ${font.size(15)}\n ${font.medium}\n`;\n\nexport const Message = styled.div`\n padding: 8px 10px 0 0;\n white-space: pre-wrap;\n ${font.size(14)}\n ${font.medium}\n`;\n"
},
{
"path": "client/src/App/Toast/index.jsx",
"content": "import React, { useState, useEffect } from 'react';\nimport { CSSTransition, TransitionGroup } from 'react-transition-group';\nimport pubsub from 'sweet-pubsub';\nimport { uniqueId } from 'lodash';\n\nimport { Container, StyledToast, CloseIcon, Title, Message } from './Styles';\n\nconst Toast = () => {\n const [toasts, setToasts] = useState([]);\n\n useEffect(() => {\n const addToast = ({ type = 'success', title, message, duration = 5 }) => {\n const id = uniqueId('toast-');\n\n setToasts(currentToasts => [...currentToasts, { id, type, title, message }]);\n\n if (duration) {\n setTimeout(() => removeToast(id), duration * 1000);\n }\n };\n\n pubsub.on('toast', addToast);\n\n return () => {\n pubsub.off('toast', addToast);\n };\n }, []);\n\n const removeToast = id => {\n setToasts(currentToasts => currentToasts.filter(toast => toast.id !== id));\n };\n\n return (\n \n \n {toasts.map(toast => (\n \n removeToast(toast.id)}>\n {toast.title} }\n {toast.message && {toast.message} }\n \n \n ))}\n \n \n );\n};\n\nexport default Toast;\n"
},
{
"path": "client/src/App/fontStyles.css",
"content": "@font-face {\n font-family: 'CircularStdBlack';\n src: url('./assets/fonts/CircularStd-Black.woff2') format('woff2'),\n url('./assets/fonts/CircularStd-Black.woff') format('woff');\n font-weight: normal;\n font-style: normal;\n}\n@font-face {\n font-family: 'CircularStdBold';\n src: url('./assets/fonts/CircularStd-Bold.woff2') format('woff2'),\n url('./assets/fonts/CircularStd-Bold.woff') format('woff');\n font-weight: normal;\n font-style: normal;\n}\n@font-face {\n font-family: 'CircularStdMedium';\n src: url('./assets/fonts/CircularStd-Medium.woff2') format('woff2'),\n url('./assets/fonts/CircularStd-Medium.woff') format('woff');\n font-weight: normal;\n font-style: normal;\n}\n@font-face {\n font-family: 'CircularStdBook';\n src: url('./assets/fonts/CircularStd-Book.woff2') format('woff2'),\n url('./assets/fonts/CircularStd-Book.woff') format('woff');\n font-weight: normal;\n font-style: normal;\n}\n@font-face {\n font-family: 'jira';\n src: url('./assets/fonts/jira.woff') format('truetype'),\n url('./assets/fonts/jira.ttf') format('woff'), url('./assets/fonts/jira.svg#jira') format('svg');\n font-weight: normal;\n font-style: normal;\n}\n"
},
{
"path": "client/src/App/index.jsx",
"content": "import React, { Fragment } from 'react';\n\nimport NormalizeStyles from './NormalizeStyles';\nimport BaseStyles from './BaseStyles';\nimport Toast from './Toast';\nimport Routes from './Routes';\n\n// We're importing .css because @font-face in styled-components causes font files\n// to be constantly re-requested from the server (which causes screen flicker)\n// https://github.com/styled-components/styled-components/issues/1593\nimport './fontStyles.css';\n\nconst App = () => (\n \n \n);\n\nexport default App;\n"
},
{
"path": "client/src/Auth/Authenticate.jsx",
"content": "import React, { useEffect } from 'react';\nimport { useHistory } from 'react-router-dom';\n\nimport api from 'shared/utils/api';\nimport toast from 'shared/utils/toast';\nimport { getStoredAuthToken, storeAuthToken } from 'shared/utils/authToken';\nimport { PageLoader } from 'shared/components';\n\nconst Authenticate = () => {\n const history = useHistory();\n\n useEffect(() => {\n const createGuestAccount = async () => {\n try {\n const { authToken } = await api.post('/authentication/guest');\n storeAuthToken(authToken);\n history.push('/');\n } catch (error) {\n toast.error(error);\n }\n };\n\n if (!getStoredAuthToken()) {\n createGuestAccount();\n }\n }, [history]);\n\n return \n mergeFilters({ searchTerm: value })}\n />\n \n {projectUsers.map(user => (\n \n mergeFilters({ userIds: xor(userIds, [user.id]) })}\n />\n \n ))}\n \n mergeFilters({ myOnly: !myOnly })}\n >\n Only My Issues\n \n mergeFilters({ recent: !recent })}\n >\n Recently Updated\n \n {!areFiltersCleared && (\n mergeFilters(defaultFilters)}>Clear all \n )}\n \n );\n};\n\nProjectBoardFilters.propTypes = propTypes;\n\nexport default ProjectBoardFilters;\n"
},
{
"path": "client/src/Project/Board/Header/Styles.js",
"content": "import styled from 'styled-components';\n\nimport { font } from 'shared/utils/styles';\n\nexport const Header = styled.div`\n margin-top: 6px;\n display: flex;\n justify-content: space-between;\n`;\n\nexport const BoardName = styled.div`\n ${font.size(24)}\n ${font.medium}\n`;\n"
},
{
"path": "client/src/Project/Board/Header/index.jsx",
"content": "import React from 'react';\n\nimport { Button } from 'shared/components';\n\nimport { Header, BoardName } from './Styles';\n\nconst ProjectBoardHeader = () => (\n \n);\n\nexport default ProjectBoardHeader;\n"
},
{
"path": "client/src/Project/Board/IssueDetails/AssigneesReporter/Styles.js",
"content": "import styled, { css } from 'styled-components';\n\nimport { color, font, mixin } from 'shared/utils/styles';\n\nexport const User = styled.div`\n display: flex;\n align-items: center;\n ${mixin.clickable}\n ${props =>\n props.isSelectValue &&\n css`\n margin: 0 10px ${props.withBottomMargin ? 5 : 0}px 0;\n padding: 4px 8px;\n border-radius: 4px;\n background: ${color.backgroundLight};\n transition: background 0.1s;\n &:hover {\n background: ${color.backgroundMedium};\n }\n `}\n`;\n\nexport const Username = styled.div`\n padding: 0 3px 0 8px;\n ${font.size(14.5)}\n`;\n"
},
{
"path": "client/src/Project/Board/IssueDetails/AssigneesReporter/index.jsx",
"content": "import React, { Fragment } from 'react';\nimport PropTypes from 'prop-types';\n\nimport { Avatar, Select, Icon } from 'shared/components';\n\nimport { SectionTitle } from '../Styles';\nimport { User, Username } from './Styles';\n\nconst propTypes = {\n issue: PropTypes.object.isRequired,\n updateIssue: PropTypes.func.isRequired,\n projectUsers: PropTypes.array.isRequired,\n};\n\nconst ProjectBoardIssueDetailsAssigneesReporter = ({ issue, updateIssue, projectUsers }) => {\n const getUserById = userId => projectUsers.find(user => user.id === userId);\n\n const userOptions = projectUsers.map(user => ({ value: user.id, label: user.name }));\n\n return (\n \n Assignees \n {\n updateIssue({ userIds, users: userIds.map(getUserById) });\n }}\n renderValue={({ value: userId, removeOptionValue }) =>\n renderUser(getUserById(userId), true, removeOptionValue)\n }\n renderOption={({ value: userId }) => renderUser(getUserById(userId), false)}\n />\n\n Reporter \n updateIssue({ reporterId: userId })}\n renderValue={({ value: userId }) => renderUser(getUserById(userId), true)}\n renderOption={({ value: userId }) => renderUser(getUserById(userId))}\n />\n \n );\n};\n\nconst renderUser = (user, isSelectValue, removeOptionValue) => (\n removeOptionValue && removeOptionValue()}\n >\n {user.name} \n {removeOptionValue && \n);\n\nProjectBoardIssueDetailsAssigneesReporter.propTypes = propTypes;\n\nexport default ProjectBoardIssueDetailsAssigneesReporter;\n"
},
{
"path": "client/src/Project/Board/IssueDetails/Comments/BodyForm/Styles.js",
"content": "import styled from 'styled-components';\n\nimport { Button } from 'shared/components';\n\nexport const Actions = styled.div`\n display: flex;\n padding-top: 10px;\n`;\n\nexport const FormButton = styled(Button)`\n margin-right: 6px;\n`;\n"
},
{
"path": "client/src/Project/Board/IssueDetails/Comments/BodyForm/index.jsx",
"content": "import React, { Fragment, useRef } from 'react';\nimport PropTypes from 'prop-types';\n\nimport { Textarea } from 'shared/components';\n\nimport { Actions, FormButton } from './Styles';\n\nconst propTypes = {\n value: PropTypes.string.isRequired,\n onChange: PropTypes.func.isRequired,\n isWorking: PropTypes.bool.isRequired,\n onSubmit: PropTypes.func.isRequired,\n onCancel: PropTypes.func.isRequired,\n};\n\nconst ProjectBoardIssueDetailsCommentsBodyForm = ({\n value,\n onChange,\n isWorking,\n onSubmit,\n onCancel,\n}) => {\n const $textareaRef = useRef();\n\n const handleSubmit = () => {\n if ($textareaRef.current.value.trim()) {\n onSubmit();\n }\n };\n\n return (\n \n \n \n Save\n \n \n Cancel\n \n \n \n );\n};\n\nProjectBoardIssueDetailsCommentsBodyForm.propTypes = propTypes;\n\nexport default ProjectBoardIssueDetailsCommentsBodyForm;\n"
},
{
"path": "client/src/Project/Board/IssueDetails/Comments/Comment/Styles.js",
"content": "import styled, { css } from 'styled-components';\n\nimport { color, font, mixin } from 'shared/utils/styles';\nimport { Avatar } from 'shared/components';\n\nexport const Comment = styled.div`\n position: relative;\n margin-top: 25px;\n ${font.size(15)}\n`;\n\nexport const UserAvatar = styled(Avatar)`\n position: absolute;\n top: 0;\n left: 0;\n`;\n\nexport const Content = styled.div`\n padding-left: 44px;\n`;\n\nexport const Username = styled.div`\n display: inline-block;\n padding-right: 12px;\n padding-bottom: 10px;\n color: ${color.textDark};\n ${font.medium}\n`;\n\nexport const CreatedAt = styled.div`\n display: inline-block;\n padding-bottom: 10px;\n color: ${color.textDark};\n ${font.size(14.5)}\n`;\n\nexport const Body = styled.p`\n padding-bottom: 10px;\n white-space: pre-wrap;\n`;\n\nconst actionLinkStyles = css`\n display: inline-block;\n padding: 2px 0;\n color: ${color.textMedium};\n ${font.size(14.5)}\n ${mixin.clickable}\n &:hover {\n text-decoration: underline;\n }\n`;\n\nexport const EditLink = styled.div`\n margin-right: 12px;\n ${actionLinkStyles}\n`;\n\nexport const DeleteLink = styled.div`\n ${actionLinkStyles}\n &:before {\n position: relative;\n right: 6px;\n content: 'ยท';\n display: inline-block;\n }\n`;\n"
},
{
"path": "client/src/Project/Board/IssueDetails/Comments/Comment/index.jsx",
"content": "import React, { Fragment, useState } from 'react';\nimport PropTypes from 'prop-types';\n\nimport api from 'shared/utils/api';\nimport toast from 'shared/utils/toast';\nimport { formatDateTimeConversational } from 'shared/utils/dateTime';\nimport { ConfirmModal } from 'shared/components';\n\nimport BodyForm from '../BodyForm';\nimport {\n Comment,\n UserAvatar,\n Content,\n Username,\n CreatedAt,\n Body,\n EditLink,\n DeleteLink,\n} from './Styles';\n\nconst propTypes = {\n comment: PropTypes.object.isRequired,\n fetchIssue: PropTypes.func.isRequired,\n};\n\nconst ProjectBoardIssueDetailsComment = ({ comment, fetchIssue }) => {\n const [isFormOpen, setFormOpen] = useState(false);\n const [isUpdating, setUpdating] = useState(false);\n const [body, setBody] = useState(comment.body);\n\n const handleCommentDelete = async () => {\n try {\n await api.delete(`/comments/${comment.id}`);\n await fetchIssue();\n } catch (error) {\n toast.error(error);\n }\n };\n\n const handleCommentUpdate = async () => {\n try {\n setUpdating(true);\n await api.put(`/comments/${comment.id}`, { body });\n await fetchIssue();\n setUpdating(false);\n setFormOpen(false);\n } catch (error) {\n toast.error(error);\n }\n };\n\n return (\n \n \n {comment.user.name} \n {formatDateTimeConversational(comment.createdAt)} \n\n {isFormOpen ? (\n setFormOpen(false)}\n />\n ) : (\n \n {comment.body}\n setFormOpen(true)}>Edit \n Delete }\n />\n \n )}\n \n \n );\n};\n\nProjectBoardIssueDetailsComment.propTypes = propTypes;\n\nexport default ProjectBoardIssueDetailsComment;\n"
},
{
"path": "client/src/Project/Board/IssueDetails/Comments/Create/ProTip/Styles.js",
"content": "import styled from 'styled-components';\n\nimport { color, font } from 'shared/utils/styles';\n\nexport const Tip = styled.div`\n display: flex;\n align-items: center;\n padding-top: 8px;\n color: ${color.textMedium};\n ${font.size(13)}\n strong {\n padding-right: 4px;\n }\n`;\n\nexport const TipLetter = styled.span`\n position: relative;\n top: 1px;\n display: inline-block;\n margin: 0 4px;\n padding: 0 4px;\n border-radius: 2px;\n color: ${color.textDarkest};\n background: ${color.backgroundMedium};\n ${font.bold}\n ${font.size(12)}\n`;\n"
},
{
"path": "client/src/Project/Board/IssueDetails/Comments/Create/ProTip/index.jsx",
"content": "import React, { useEffect } from 'react';\nimport PropTypes from 'prop-types';\n\nimport { KeyCodes } from 'shared/constants/keyCodes';\nimport { isFocusedElementEditable } from 'shared/utils/browser';\n\nimport { Tip, TipLetter } from './Styles';\n\nconst propTypes = {\n setFormOpen: PropTypes.func.isRequired,\n};\n\nconst ProjectBoardIssueDetailsCommentsCreateProTip = ({ setFormOpen }) => {\n useEffect(() => {\n const handleKeyDown = event => {\n if (!isFocusedElementEditable() && event.keyCode === KeyCodes.M) {\n event.preventDefault();\n setFormOpen(true);\n }\n };\n\n document.addEventListener('keydown', handleKeyDown);\n\n return () => {\n document.removeEventListener('keydown', handleKeyDown);\n };\n }, [setFormOpen]);\n\n return (\n \n Pro tip: pressM to comment\n \n );\n};\n\nProjectBoardIssueDetailsCommentsCreateProTip.propTypes = propTypes;\n\nexport default ProjectBoardIssueDetailsCommentsCreateProTip;\n"
},
{
"path": "client/src/Project/Board/IssueDetails/Comments/Create/Styles.js",
"content": "import styled from 'styled-components';\n\nimport { color, font, mixin } from 'shared/utils/styles';\nimport { Avatar } from 'shared/components';\n\nexport const Create = styled.div`\n position: relative;\n margin-top: 25px;\n ${font.size(15)}\n`;\n\nexport const UserAvatar = styled(Avatar)`\n position: absolute;\n top: 0;\n left: 0;\n`;\n\nexport const Right = styled.div`\n padding-left: 44px;\n`;\n\nexport const FakeTextarea = styled.div`\n padding: 12px 16px;\n border-radius: 4px;\n border: 1px solid ${color.borderLightest};\n color: ${color.textLight};\n ${mixin.clickable}\n &:hover {\n border: 1px solid ${color.borderLight};\n }\n`;\n"
},
{
"path": "client/src/Project/Board/IssueDetails/Comments/Create/index.jsx",
"content": "import React, { Fragment, useState } from 'react';\nimport PropTypes from 'prop-types';\n\nimport api from 'shared/utils/api';\nimport useCurrentUser from 'shared/hooks/currentUser';\nimport toast from 'shared/utils/toast';\n\nimport BodyForm from '../BodyForm';\nimport ProTip from './ProTip';\nimport { Create, UserAvatar, Right, FakeTextarea } from './Styles';\n\nconst propTypes = {\n issueId: PropTypes.number.isRequired,\n fetchIssue: PropTypes.func.isRequired,\n};\n\nconst ProjectBoardIssueDetailsCommentsCreate = ({ issueId, fetchIssue }) => {\n const [isFormOpen, setFormOpen] = useState(false);\n const [isCreating, setCreating] = useState(false);\n const [body, setBody] = useState('');\n\n const { currentUser } = useCurrentUser();\n\n const handleCommentCreate = async () => {\n try {\n setCreating(true);\n await api.post(`/comments`, { body, issueId, userId: currentUser.id });\n await fetchIssue();\n setFormOpen(false);\n setCreating(false);\n setBody('');\n } catch (error) {\n toast.error(error);\n }\n };\n\n return (\n \n {currentUser && \n {isFormOpen ? (\n setFormOpen(false)}\n />\n ) : (\n \n setFormOpen(true)}>Add a comment... \n \n )}\n \n \n );\n};\n\nProjectBoardIssueDetailsCommentsCreate.propTypes = propTypes;\n\nexport default ProjectBoardIssueDetailsCommentsCreate;\n"
},
{
"path": "client/src/Project/Board/IssueDetails/Comments/Styles.js",
"content": "import styled from 'styled-components';\n\nimport { font } from 'shared/utils/styles';\n\nexport const Comments = styled.div`\n padding-top: 40px;\n`;\n\nexport const Title = styled.div`\n ${font.medium}\n ${font.size(15)}\n`;\n"
},
{
"path": "client/src/Project/Board/IssueDetails/Comments/index.jsx",
"content": "import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { sortByNewest } from 'shared/utils/javascript';\n\nimport Create from './Create';\nimport Comment from './Comment';\nimport { Comments, Title } from './Styles';\n\nconst propTypes = {\n issue: PropTypes.object.isRequired,\n fetchIssue: PropTypes.func.isRequired,\n};\n\nconst ProjectBoardIssueDetailsComments = ({ issue, fetchIssue }) => (\n \n Comments \n \n);\n\nProjectBoardIssueDetailsComments.propTypes = propTypes;\n\nexport default ProjectBoardIssueDetailsComments;\n"
},
{
"path": "client/src/Project/Board/IssueDetails/Dates/Styles.js",
"content": "import styled from 'styled-components';\n\nimport { color, font } from 'shared/utils/styles';\n\nexport const Dates = styled.div`\n margin-top: 11px;\n padding-top: 13px;\n line-height: 22px;\n border-top: 1px solid ${color.borderLightest};\n color: ${color.textMedium};\n ${font.size(13)}\n`;\n"
},
{
"path": "client/src/Project/Board/IssueDetails/Dates/index.jsx",
"content": "import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { formatDateTimeConversational } from 'shared/utils/dateTime';\n\nimport { Dates } from './Styles';\n\nconst propTypes = {\n issue: PropTypes.object.isRequired,\n};\n\nconst ProjectBoardIssueDetailsDates = ({ issue }) => (\n \n Created at {formatDateTimeConversational(issue.createdAt)}
\n Updated at {formatDateTimeConversational(issue.updatedAt)}
\n \n);\n\nProjectBoardIssueDetailsDates.propTypes = propTypes;\n\nexport default ProjectBoardIssueDetailsDates;\n"
},
{
"path": "client/src/Project/Board/IssueDetails/Delete.jsx",
"content": "import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport api from 'shared/utils/api';\nimport toast from 'shared/utils/toast';\nimport { Button, ConfirmModal } from 'shared/components';\n\nconst propTypes = {\n issue: PropTypes.object.isRequired,\n fetchProject: PropTypes.func.isRequired,\n modalClose: PropTypes.func.isRequired,\n};\n\nconst ProjectBoardIssueDetailsDelete = ({ issue, fetchProject, modalClose }) => {\n const handleIssueDelete = async () => {\n try {\n await api.delete(`/issues/${issue.id}`);\n await fetchProject();\n modalClose();\n } catch (error) {\n toast.error(error);\n }\n };\n\n return (\n (\n \n Description \n {isEditing ? (\n \n \n \n Save\n \n setEditing(false)}>\n Cancel\n \n \n \n ) : (\n \n {isDescriptionEmpty ? (\n setEditing(true)}>Add a description... \n ) : (\n setEditing(true)} />\n )}\n \n )}\n \n );\n};\n\nProjectBoardIssueDetailsDescription.propTypes = propTypes;\n\nexport default ProjectBoardIssueDetailsDescription;\n"
},
{
"path": "client/src/Project/Board/IssueDetails/EstimateTracking/Styles.js",
"content": "import styled from 'styled-components';\n\nimport { color, font, mixin } from 'shared/utils/styles';\n\nexport const TrackingLink = styled.div`\n padding: 4px 4px 2px 0;\n border-radius: 4px;\n transition: background 0.1s;\n ${mixin.clickable}\n &:hover {\n background: ${color.backgroundLight};\n }\n`;\n\nexport const ModalContents = styled.div`\n padding: 20px 25px 25px;\n`;\n\nexport const ModalTitle = styled.div`\n padding-bottom: 14px;\n ${font.medium}\n ${font.size(20)}\n`;\n\nexport const Inputs = styled.div`\n display: flex;\n margin: 20px -5px 30px;\n`;\n\nexport const InputCont = styled.div`\n margin: 0 5px;\n width: 50%;\n`;\n\nexport const InputLabel = styled.div`\n padding-bottom: 5px;\n color: ${color.textMedium};\n ${font.medium};\n ${font.size(13)};\n`;\n\nexport const Actions = styled.div`\n display: flex;\n justify-content: flex-end;\n`;\n"
},
{
"path": "client/src/Project/Board/IssueDetails/EstimateTracking/TrackingWidget/Styles.js",
"content": "import styled from 'styled-components';\n\nimport { color, font } from 'shared/utils/styles';\nimport { Icon } from 'shared/components';\n\nexport const TrackingWidget = styled.div`\n display: flex;\n justify-content: space-between;\n align-items: center;\n`;\n\nexport const WatchIcon = styled(Icon)`\n color: ${color.textMedium};\n`;\n\nexport const Right = styled.div`\n width: 90%;\n`;\n\nexport const BarCont = styled.div`\n height: 5px;\n border-radius: 4px;\n background: ${color.backgroundMedium};\n`;\n\nexport const Bar = styled.div`\n height: 5px;\n border-radius: 4px;\n background: ${color.primary};\n transition: all 0.1s;\n width: ${props => props.width}%;\n`;\n\nexport const Values = styled.div`\n display: flex;\n justify-content: space-between;\n padding-top: 3px;\n ${font.size(14.5)};\n`;\n"
},
{
"path": "client/src/Project/Board/IssueDetails/EstimateTracking/TrackingWidget/index.jsx",
"content": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport { isNil } from 'lodash';\n\nimport { TrackingWidget, WatchIcon, Right, BarCont, Bar, Values } from './Styles';\n\nconst propTypes = {\n issue: PropTypes.object.isRequired,\n};\n\nconst ProjectBoardIssueDetailsTrackingWidget = ({ issue }) => (\n \n \n \n \n \n {issue.timeSpent ? `${issue.timeSpent}h logged` : 'No time logged'}
\n {renderRemainingOrEstimate(issue)}\n \n \n \n);\n\nconst calculateTrackingBarWidth = ({ timeSpent, timeRemaining, estimate }) => {\n if (!timeSpent) {\n return 0;\n }\n if (isNil(timeRemaining) && isNil(estimate)) {\n return 100;\n }\n if (!isNil(timeRemaining)) {\n return (timeSpent / (timeSpent + timeRemaining)) * 100;\n }\n if (!isNil(estimate)) {\n return Math.min((timeSpent / estimate) * 100, 100);\n }\n};\n\nconst renderRemainingOrEstimate = ({ timeRemaining, estimate }) => {\n if (isNil(timeRemaining) && isNil(estimate)) {\n return null;\n }\n if (!isNil(timeRemaining)) {\n return {`${timeRemaining}h remaining`}
;\n }\n if (!isNil(estimate)) {\n return {`${estimate}h estimated`}
;\n }\n};\n\nProjectBoardIssueDetailsTrackingWidget.propTypes = propTypes;\n\nexport default ProjectBoardIssueDetailsTrackingWidget;\n"
},
{
"path": "client/src/Project/Board/IssueDetails/EstimateTracking/index.jsx",
"content": "import React, { Fragment } from 'react';\nimport PropTypes from 'prop-types';\nimport { isNil } from 'lodash';\n\nimport { InputDebounced, Modal, Button } from 'shared/components';\n\nimport TrackingWidget from './TrackingWidget';\nimport { SectionTitle } from '../Styles';\nimport {\n TrackingLink,\n ModalContents,\n ModalTitle,\n Inputs,\n InputCont,\n InputLabel,\n Actions,\n} from './Styles';\n\nconst propTypes = {\n issue: PropTypes.object.isRequired,\n updateIssue: PropTypes.func.isRequired,\n};\n\nconst ProjectBoardIssueDetailsEstimateTracking = ({ issue, updateIssue }) => (\n \n Original Estimate (hours) \n {renderHourInput('estimate', issue, updateIssue)}\n\n Time Tracking \n (\n \n \n )}\n renderContent={modal => (\n \n Time tracking \n \n \n Time spent (hours) \n {renderHourInput('timeSpent', issue, updateIssue)}\n \n \n Time remaining (hours) \n {renderHourInput('timeRemaining', issue, updateIssue)}\n \n \n \n \n Done\n \n \n \n )}\n />\n \n);\n\nconst renderHourInput = (fieldName, issue, updateIssue) => (\n {\n const value = stringValue.trim() ? Number(stringValue) : null;\n updateIssue({ [fieldName]: value });\n }}\n />\n);\n\nProjectBoardIssueDetailsEstimateTracking.propTypes = propTypes;\n\nexport default ProjectBoardIssueDetailsEstimateTracking;\n"
},
{
"path": "client/src/Project/Board/IssueDetails/Loader.jsx",
"content": "import React from 'react';\nimport ContentLoader from 'react-content-loader';\n\nconst IssueDetailsLoader = () => (\n \n \n
\n);\n\nexport default IssueDetailsLoader;\n"
},
{
"path": "client/src/Project/Board/IssueDetails/Priority/Styles.js",
"content": "import styled, { css } from 'styled-components';\n\nimport { color, font } from 'shared/utils/styles';\n\nexport const Priority = styled.div`\n display: flex;\n align-items: center;\n ${props =>\n props.isValue &&\n css`\n padding: 3px 4px 3px 0px;\n border-radius: 4px;\n &:hover,\n &:focus {\n background: ${color.backgroundLight};\n }\n `}\n`;\n\nexport const Label = styled.div`\n padding: 0 3px 0 8px;\n ${font.size(14.5)}\n`;\n"
},
{
"path": "client/src/Project/Board/IssueDetails/Priority/index.jsx",
"content": "import React, { Fragment } from 'react';\nimport PropTypes from 'prop-types';\n\nimport { IssuePriority, IssuePriorityCopy } from 'shared/constants/issues';\nimport { Select, IssuePriorityIcon } from 'shared/components';\n\nimport { SectionTitle } from '../Styles';\nimport { Priority, Label } from './Styles';\n\nconst propTypes = {\n issue: PropTypes.object.isRequired,\n updateIssue: PropTypes.func.isRequired,\n};\n\nconst ProjectBoardIssueDetailsPriority = ({ issue, updateIssue }) => (\n \n Priority \n ({\n value: priority,\n label: IssuePriorityCopy[priority],\n }))}\n onChange={priority => updateIssue({ priority })}\n renderValue={({ value: priority }) => renderPriorityItem(priority, true)}\n renderOption={({ value: priority }) => renderPriorityItem(priority)}\n />\n \n);\n\nconst renderPriorityItem = (priority, isValue) => (\n \n {IssuePriorityCopy[priority]} \n \n);\n\nProjectBoardIssueDetailsPriority.propTypes = propTypes;\n\nexport default ProjectBoardIssueDetailsPriority;\n"
},
{
"path": "client/src/Project/Board/IssueDetails/Status/Styles.js",
"content": "import styled, { css } from 'styled-components';\n\nimport { issueStatusColors, issueStatusBackgroundColors, mixin } from 'shared/utils/styles';\n\nexport const Status = styled.div`\n text-transform: uppercase;\n transition: all 0.1s;\n ${props => mixin.tag(issueStatusBackgroundColors[props.color], issueStatusColors[props.color])}\n ${props =>\n props.isValue &&\n css`\n padding: 0 12px;\n height: 32px;\n &:hover {\n transform: scale(1.05);\n }\n `}\n`;\n"
},
{
"path": "client/src/Project/Board/IssueDetails/Status/index.jsx",
"content": "import React, { Fragment } from 'react';\nimport PropTypes from 'prop-types';\n\nimport { IssueStatus, IssueStatusCopy } from 'shared/constants/issues';\nimport { Select, Icon } from 'shared/components';\n\nimport { SectionTitle } from '../Styles';\nimport { Status } from './Styles';\n\nconst propTypes = {\n issue: PropTypes.object.isRequired,\n updateIssue: PropTypes.func.isRequired,\n};\n\nconst ProjectBoardIssueDetailsStatus = ({ issue, updateIssue }) => (\n \n Status \n ({\n value: status,\n label: IssueStatusCopy[status],\n }))}\n onChange={status => updateIssue({ status })}\n renderValue={({ value: status }) => (\n \n {IssueStatusCopy[status]}
\n \n )}\n renderOption={({ value: status }) => (\n {IssueStatusCopy[status]} \n )}\n />\n \n);\n\nProjectBoardIssueDetailsStatus.propTypes = propTypes;\n\nexport default ProjectBoardIssueDetailsStatus;\n"
},
{
"path": "client/src/Project/Board/IssueDetails/Styles.js",
"content": "import styled from 'styled-components';\n\nimport { color, font } from 'shared/utils/styles';\n\nexport const Content = styled.div`\n display: flex;\n padding: 0 30px 60px;\n`;\n\nexport const Left = styled.div`\n width: 65%;\n padding-right: 50px;\n`;\n\nexport const Right = styled.div`\n width: 35%;\n padding-top: 5px;\n`;\n\nexport const TopActions = styled.div`\n display: flex;\n justify-content: space-between;\n padding: 21px 18px 0;\n`;\n\nexport const TopActionsRight = styled.div`\n display: flex;\n align-items: center;\n & > * {\n margin-left: 4px;\n }\n`;\n\nexport const SectionTitle = styled.div`\n margin: 24px 0 5px;\n text-transform: uppercase;\n color: ${color.textMedium};\n ${font.size(12.5)}\n ${font.bold}\n`;\n"
},
{
"path": "client/src/Project/Board/IssueDetails/Title/Styles.js",
"content": "import styled from 'styled-components';\n\nimport { color, font } from 'shared/utils/styles';\nimport { Textarea } from 'shared/components';\n\nexport const TitleTextarea = styled(Textarea)`\n margin: 18px 0 0 -8px;\n height: 44px;\n width: 100%;\n textarea {\n padding: 7px 7px 8px;\n line-height: 1.28;\n border: none;\n resize: none;\n background: #fff;\n border: 1px solid transparent;\n box-shadow: 0 0 0 1px transparent;\n transition: background 0.1s;\n ${font.size(24)}\n ${font.medium}\n &:hover:not(:focus) {\n background: ${color.backgroundLight};\n }\n }\n`;\n\nexport const ErrorText = styled.div`\n padding-top: 4px;\n color: ${color.danger};\n ${font.size(13)}\n ${font.medium}\n`;\n"
},
{
"path": "client/src/Project/Board/IssueDetails/Title/index.jsx",
"content": "import React, { Fragment, useRef, useState } from 'react';\nimport PropTypes from 'prop-types';\n\nimport { KeyCodes } from 'shared/constants/keyCodes';\nimport { is, generateErrors } from 'shared/utils/validation';\n\nimport { TitleTextarea, ErrorText } from './Styles';\n\nconst propTypes = {\n issue: PropTypes.object.isRequired,\n updateIssue: PropTypes.func.isRequired,\n};\n\nconst ProjectBoardIssueDetailsTitle = ({ issue, updateIssue }) => {\n const $titleInputRef = useRef();\n const [error, setError] = useState(null);\n\n const handleTitleChange = () => {\n setError(null);\n\n const title = $titleInputRef.current.value;\n if (title === issue.title) return;\n\n const errors = generateErrors({ title }, { title: [is.required(), is.maxLength(200)] });\n\n if (errors.title) {\n setError(errors.title);\n } else {\n updateIssue({ title });\n }\n };\n\n return (\n \n {\n if (event.keyCode === KeyCodes.ENTER) {\n event.target.blur();\n }\n }}\n />\n {error && {error} }\n \n );\n};\n\nProjectBoardIssueDetailsTitle.propTypes = propTypes;\n\nexport default ProjectBoardIssueDetailsTitle;\n"
},
{
"path": "client/src/Project/Board/IssueDetails/Type/Styles.js",
"content": "import styled from 'styled-components';\n\nimport { color, font } from 'shared/utils/styles';\nimport { Button } from 'shared/components';\n\nexport const TypeButton = styled(Button)`\n text-transform: uppercase;\n letter-spacing: 0.5px;\n color: ${color.textMedium};\n ${font.size(13)}\n`;\n\nexport const Type = styled.div`\n display: flex;\n align-items: center;\n`;\n\nexport const TypeLabel = styled.div`\n padding: 0 5px 0 7px;\n ${font.size(15)}\n`;\n"
},
{
"path": "client/src/Project/Board/IssueDetails/Type/index.jsx",
"content": "import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { IssueType, IssueTypeCopy } from 'shared/constants/issues';\nimport { IssueTypeIcon, Select } from 'shared/components';\n\nimport { TypeButton, Type, TypeLabel } from './Styles';\n\nconst propTypes = {\n issue: PropTypes.object.isRequired,\n updateIssue: PropTypes.func.isRequired,\n};\n\nconst ProjectBoardIssueDetailsType = ({ issue, updateIssue }) => (\n ({\n value: type,\n label: IssueTypeCopy[type],\n }))}\n onChange={type => updateIssue({ type })}\n renderValue={({ value: type }) => (\n updateIssue({ type })}>\n {IssueTypeCopy[type]} \n \n )}\n />\n);\n\nProjectBoardIssueDetailsType.propTypes = propTypes;\n\nexport default ProjectBoardIssueDetailsType;\n"
},
{
"path": "client/src/Project/Board/IssueDetails/index.jsx",
"content": "import React, { Fragment } from 'react';\nimport PropTypes from 'prop-types';\n\nimport api from 'shared/utils/api';\nimport useApi from 'shared/hooks/api';\nimport { PageError, CopyLinkButton, Button, AboutTooltip } from 'shared/components';\n\nimport Loader from './Loader';\nimport Type from './Type';\nimport Delete from './Delete';\nimport Title from './Title';\nimport Description from './Description';\nimport Comments from './Comments';\nimport Status from './Status';\nimport AssigneesReporter from './AssigneesReporter';\nimport Priority from './Priority';\nimport EstimateTracking from './EstimateTracking';\nimport Dates from './Dates';\nimport { TopActions, TopActionsRight, Content, Left, Right } from './Styles';\n\nconst propTypes = {\n issueId: PropTypes.string.isRequired,\n projectUsers: PropTypes.array.isRequired,\n fetchProject: PropTypes.func.isRequired,\n updateLocalProjectIssues: PropTypes.func.isRequired,\n modalClose: PropTypes.func.isRequired,\n};\n\nconst ProjectBoardIssueDetails = ({\n issueId,\n projectUsers,\n fetchProject,\n updateLocalProjectIssues,\n modalClose,\n}) => {\n const [{ data, error, setLocalData }, fetchIssue] = useApi.get(`/issues/${issueId}`);\n\n if (!data) return \n \n \n (\n \n Give feedback\n \n )}\n />\n \n \n \n \n \n \n \n \n \n );\n};\n\nProjectBoardIssueDetails.propTypes = propTypes;\n\nexport default ProjectBoardIssueDetails;\n"
},
{
"path": "client/src/Project/Board/Lists/List/Issue/Styles.js",
"content": "import styled, { css } from 'styled-components';\nimport { Link } from 'react-router-dom';\n\nimport { color, font, mixin } from 'shared/utils/styles';\nimport { Avatar } from 'shared/components';\n\nexport const IssueLink = styled(Link)`\n display: block;\n margin-bottom: 5px;\n`;\n\nexport const Issue = styled.div`\n padding: 10px;\n border-radius: 3px;\n background: #fff;\n box-shadow: 0px 1px 2px 0px rgba(9, 30, 66, 0.25);\n transition: background 0.1s;\n ${mixin.clickable}\n @media (max-width: 1100px) {\n padding: 10px 8px;\n }\n &:hover {\n background: ${color.backgroundLight};\n }\n ${props =>\n props.isBeingDragged &&\n css`\n transform: rotate(3deg);\n box-shadow: 5px 10px 30px 0px rgba(9, 30, 66, 0.15);\n `}\n`;\n\nexport const Title = styled.p`\n padding-bottom: 11px;\n ${font.size(15)}\n @media (max-width: 1100px) {\n ${font.size(14.5)}\n }\n`;\n\nexport const Bottom = styled.div`\n display: flex;\n justify-content: space-between;\n align-items: center;\n`;\n\nexport const Assignees = styled.div`\n display: flex;\n flex-direction: row-reverse;\n margin-left: 2px;\n`;\n\nexport const AssigneeAvatar = styled(Avatar)`\n margin-left: -2px;\n box-shadow: 0 0 0 2px #fff;\n`;\n"
},
{
"path": "client/src/Project/Board/Lists/List/Issue/index.jsx",
"content": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport { useRouteMatch } from 'react-router-dom';\nimport { Draggable } from 'react-beautiful-dnd';\n\nimport { IssueTypeIcon, IssuePriorityIcon } from 'shared/components';\n\nimport { IssueLink, Issue, Title, Bottom, Assignees, AssigneeAvatar } from './Styles';\n\nconst propTypes = {\n projectUsers: PropTypes.array.isRequired,\n issue: PropTypes.object.isRequired,\n index: PropTypes.number.isRequired,\n};\n\nconst ProjectBoardListIssue = ({ projectUsers, issue, index }) => {\n const match = useRouteMatch();\n\n const assignees = issue.userIds.map(userId => projectUsers.find(user => user.id === userId));\n\n return (\n \n {(provided, snapshot) => (\n \n \n {issue.title} \n \n \n
\n \n {assignees.map(user => (\n \n \n \n \n )}\n \n );\n};\n\nProjectBoardListIssue.propTypes = propTypes;\n\nexport default ProjectBoardListIssue;\n"
},
{
"path": "client/src/Project/Board/Lists/List/Styles.js",
"content": "import styled from 'styled-components';\n\nimport { color, font, mixin } from 'shared/utils/styles';\n\nexport const List = styled.div`\n display: flex;\n flex-direction: column;\n margin: 0 5px;\n min-height: 400px;\n width: 25%;\n border-radius: 3px;\n background: ${color.backgroundLightest};\n`;\n\nexport const Title = styled.div`\n padding: 13px 10px 17px;\n text-transform: uppercase;\n color: ${color.textMedium};\n ${font.size(12.5)};\n ${mixin.truncateText}\n`;\n\nexport const IssuesCount = styled.span`\n text-transform: lowercase;\n ${font.size(13)};\n`;\n\nexport const Issues = styled.div`\n height: 100%;\n padding: 0 5px;\n`;\n"
},
{
"path": "client/src/Project/Board/Lists/List/index.jsx",
"content": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport moment from 'moment';\nimport { Droppable } from 'react-beautiful-dnd';\nimport { intersection } from 'lodash';\n\nimport { IssueStatusCopy } from 'shared/constants/issues';\n\nimport Issue from './Issue';\nimport { List, Title, IssuesCount, Issues } from './Styles';\n\nconst propTypes = {\n status: PropTypes.string.isRequired,\n project: PropTypes.object.isRequired,\n filters: PropTypes.object.isRequired,\n currentUserId: PropTypes.number,\n};\n\nconst defaultProps = {\n currentUserId: null,\n};\n\nconst ProjectBoardList = ({ status, project, filters, currentUserId }) => {\n const filteredIssues = filterIssues(project.issues, filters, currentUserId);\n const filteredListIssues = getSortedListIssues(filteredIssues, status);\n const allListIssues = getSortedListIssues(project.issues, status);\n\n return (\n \n {provided => (\n \n \n {`${IssueStatusCopy[status]} `}\n <IssuesCount>{formatIssuesCount(allListIssues, filteredListIssues)}</IssuesCount>\n \n \n {filteredListIssues.map((issue, index) => (\n
\n )}\n \n );\n};\n\nconst filterIssues = (projectIssues, filters, currentUserId) => {\n const { searchTerm, userIds, myOnly, recent } = filters;\n let issues = projectIssues;\n\n if (searchTerm) {\n issues = issues.filter(issue => issue.title.toLowerCase().includes(searchTerm.toLowerCase()));\n }\n if (userIds.length > 0) {\n issues = issues.filter(issue => intersection(issue.userIds, userIds).length > 0);\n }\n if (myOnly && currentUserId) {\n issues = issues.filter(issue => issue.userIds.includes(currentUserId));\n }\n if (recent) {\n issues = issues.filter(issue => moment(issue.updatedAt).isAfter(moment().subtract(3, 'days')));\n }\n return issues;\n};\n\nconst getSortedListIssues = (issues, status) =>\n issues.filter(issue => issue.status === status).sort((a, b) => a.listPosition - b.listPosition);\n\nconst formatIssuesCount = (allListIssues, filteredListIssues) => {\n if (allListIssues.length !== filteredListIssues.length) {\n return `${filteredListIssues.length} of ${allListIssues.length}`;\n }\n return allListIssues.length;\n};\n\nProjectBoardList.propTypes = propTypes;\nProjectBoardList.defaultProps = defaultProps;\n\nexport default ProjectBoardList;\n"
},
{
"path": "client/src/Project/Board/Lists/Styles.js",
"content": "import styled from 'styled-components';\n\nexport const Lists = styled.div`\n display: flex;\n margin: 26px -5px 0;\n`;\n"
},
{
"path": "client/src/Project/Board/Lists/index.jsx",
"content": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport { DragDropContext } from 'react-beautiful-dnd';\n\nimport useCurrentUser from 'shared/hooks/currentUser';\nimport api from 'shared/utils/api';\nimport { moveItemWithinArray, insertItemIntoArray } from 'shared/utils/javascript';\nimport { IssueStatus } from 'shared/constants/issues';\n\nimport List from './List';\nimport { Lists } from './Styles';\n\nconst propTypes = {\n project: PropTypes.object.isRequired,\n filters: PropTypes.object.isRequired,\n updateLocalProjectIssues: PropTypes.func.isRequired,\n};\n\nconst ProjectBoardLists = ({ project, filters, updateLocalProjectIssues }) => {\n const { currentUserId } = useCurrentUser();\n\n const handleIssueDrop = ({ draggableId, destination, source }) => {\n if (!isPositionChanged(source, destination)) return;\n\n const issueId = Number(draggableId);\n\n api.optimisticUpdate(`/issues/${issueId}`, {\n updatedFields: {\n status: destination.droppableId,\n listPosition: calculateIssueListPosition(project.issues, destination, source, issueId),\n },\n currentFields: project.issues.find(({ id }) => id === issueId),\n setLocalData: fields => updateLocalProjectIssues(issueId, fields),\n });\n };\n\n return (\n \n \n {Object.values(IssueStatus).map(status => (\n \n \n );\n};\n\nconst isPositionChanged = (destination, source) => {\n if (!destination) return false;\n const isSameList = destination.droppableId === source.droppableId;\n const isSamePosition = destination.index === source.index;\n return !isSameList || !isSamePosition;\n};\n\nconst calculateIssueListPosition = (...args) => {\n const { prevIssue, nextIssue } = getAfterDropPrevNextIssue(...args);\n let position;\n\n if (!prevIssue && !nextIssue) {\n position = 1;\n } else if (!prevIssue) {\n position = nextIssue.listPosition - 1;\n } else if (!nextIssue) {\n position = prevIssue.listPosition + 1;\n } else {\n position = prevIssue.listPosition + (nextIssue.listPosition - prevIssue.listPosition) / 2;\n }\n return position;\n};\n\nconst getAfterDropPrevNextIssue = (allIssues, destination, source, droppedIssueId) => {\n const beforeDropDestinationIssues = getSortedListIssues(allIssues, destination.droppableId);\n const droppedIssue = allIssues.find(issue => issue.id === droppedIssueId);\n const isSameList = destination.droppableId === source.droppableId;\n\n const afterDropDestinationIssues = isSameList\n ? moveItemWithinArray(beforeDropDestinationIssues, droppedIssue, destination.index)\n : insertItemIntoArray(beforeDropDestinationIssues, droppedIssue, destination.index);\n\n return {\n prevIssue: afterDropDestinationIssues[destination.index - 1],\n nextIssue: afterDropDestinationIssues[destination.index + 1],\n };\n};\n\nconst getSortedListIssues = (issues, status) =>\n issues.filter(issue => issue.status === status).sort((a, b) => a.listPosition - b.listPosition);\n\nProjectBoardLists.propTypes = propTypes;\n\nexport default ProjectBoardLists;\n"
},
{
"path": "client/src/Project/Board/index.jsx",
"content": "import React, { Fragment } from 'react';\nimport PropTypes from 'prop-types';\nimport { Route, useRouteMatch, useHistory } from 'react-router-dom';\n\nimport useMergeState from 'shared/hooks/mergeState';\nimport { Breadcrumbs, Modal } from 'shared/components';\n\nimport Header from './Header';\nimport Filters from './Filters';\nimport Lists from './Lists';\nimport IssueDetails from './IssueDetails';\n\nconst propTypes = {\n project: PropTypes.object.isRequired,\n fetchProject: PropTypes.func.isRequired,\n updateLocalProjectIssues: PropTypes.func.isRequired,\n};\n\nconst defaultFilters = {\n searchTerm: '',\n userIds: [],\n myOnly: false,\n recent: false,\n};\n\nconst ProjectBoard = ({ project, fetchProject, updateLocalProjectIssues }) => {\n const match = useRouteMatch();\n const history = useHistory();\n\n const [filters, mergeFilters] = useMergeState(defaultFilters);\n\n return (\n \n (\n history.push(match.url)}\n renderContent={modal => (\n \n );\n};\n\nProjectBoard.propTypes = propTypes;\n\nexport default ProjectBoard;\n"
},
{
"path": "client/src/Project/IssueCreate/Styles.js",
"content": "import styled from 'styled-components';\n\nimport { color, font } from 'shared/utils/styles';\nimport { Button, Form } from 'shared/components';\n\nexport const FormElement = styled(Form.Element)`\n padding: 25px 40px 35px;\n`;\n\nexport const FormHeading = styled.div`\n padding-bottom: 15px;\n ${font.size(21)}\n`;\n\nexport const SelectItem = styled.div`\n display: flex;\n align-items: center;\n margin-right: 15px;\n ${props => props.withBottomMargin && `margin-bottom: 5px;`}\n`;\n\nexport const SelectItemLabel = styled.div`\n padding: 0 3px 0 6px;\n`;\n\nexport const Divider = styled.div`\n margin-top: 22px;\n border-top: 1px solid ${color.borderLightest};\n`;\n\nexport const Actions = styled.div`\n display: flex;\n justify-content: flex-end;\n padding-top: 30px;\n`;\n\nexport const ActionButton = styled(Button)`\n margin-left: 10px;\n`;\n"
},
{
"path": "client/src/Project/IssueCreate/index.jsx",
"content": "import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport {\n IssueType,\n IssueStatus,\n IssuePriority,\n IssueTypeCopy,\n IssuePriorityCopy,\n} from 'shared/constants/issues';\nimport toast from 'shared/utils/toast';\nimport useApi from 'shared/hooks/api';\nimport useCurrentUser from 'shared/hooks/currentUser';\nimport { Form, IssueTypeIcon, Icon, Avatar, IssuePriorityIcon } from 'shared/components';\n\nimport {\n FormHeading,\n FormElement,\n SelectItem,\n SelectItemLabel,\n Divider,\n Actions,\n ActionButton,\n} from './Styles';\n\nconst propTypes = {\n project: PropTypes.object.isRequired,\n fetchProject: PropTypes.func.isRequired,\n onCreate: PropTypes.func.isRequired,\n modalClose: PropTypes.func.isRequired,\n};\n\nconst ProjectIssueCreate = ({ project, fetchProject, onCreate, modalClose }) => {\n const [{ isCreating }, createIssue] = useApi.post('/issues');\n\n const { currentUserId } = useCurrentUser();\n\n return (\n {\n try {\n await createIssue({\n ...values,\n status: IssueStatus.BACKLOG,\n projectId: project.id,\n users: values.userIds.map(id => ({ id })),\n });\n await fetchProject();\n toast.success('Issue has been successfully created.');\n onCreate();\n } catch (error) {\n Form.handleAPIError(error, form);\n }\n }}\n >\n \n Create issue \n \n \n Create Issue\n \n \n Cancel\n \n \n \n \n );\n};\n\nconst typeOptions = Object.values(IssueType).map(type => ({\n value: type,\n label: IssueTypeCopy[type],\n}));\n\nconst priorityOptions = Object.values(IssuePriority).map(priority => ({\n value: priority,\n label: IssuePriorityCopy[priority],\n}));\n\nconst userOptions = project => project.users.map(user => ({ value: user.id, label: user.name }));\n\nconst renderType = ({ value: type }) => (\n \n {IssueTypeCopy[type]} \n \n);\n\nconst renderPriority = ({ value: priority }) => (\n \n {IssuePriorityCopy[priority]} \n \n);\n\nconst renderUser = project => ({ value: userId, removeOptionValue }) => {\n const user = project.users.find(({ id }) => id === userId);\n\n return (\n removeOptionValue && removeOptionValue()}\n >\n {user.name} \n {removeOptionValue && \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n);\n\nexport default NoResults;\n"
},
{
"path": "client/src/Project/IssueSearch/Styles.js",
"content": "import styled from 'styled-components';\n\nimport { color, font, mixin } from 'shared/utils/styles';\nimport { InputDebounced, Spinner, Icon } from 'shared/components';\n\nexport const IssueSearch = styled.div`\n padding: 25px 35px 60px;\n`;\n\nexport const SearchInputCont = styled.div`\n position: relative;\n padding-right: 30px;\n margin-bottom: 40px;\n`;\n\nexport const SearchInputDebounced = styled(InputDebounced)`\n height: 40px;\n input {\n padding: 0 0 0 32px;\n border: none;\n border-bottom: 2px solid ${color.primary};\n background: #fff;\n ${font.size(21)}\n &:focus,\n &:hover {\n box-shadow: none;\n border: none;\n border-bottom: 2px solid ${color.primary};\n background: #fff;\n }\n }\n`;\n\nexport const SearchIcon = styled(Icon)`\n position: absolute;\n top: 8px;\n left: 0;\n color: ${color.textMedium};\n`;\n\nexport const SearchSpinner = styled(Spinner)`\n position: absolute;\n top: 5px;\n right: 30px;\n`;\n\nexport const Issue = styled.div`\n display: flex;\n align-items: center;\n padding: 4px 10px;\n border-radius: 4px;\n transition: background 0.1s;\n ${mixin.clickable}\n &:hover {\n background: ${color.backgroundLight};\n }\n`;\n\nexport const IssueData = styled.div`\n padding-left: 15px;\n`;\n\nexport const IssueTitle = styled.div`\n color: ${color.textDark};\n ${font.size(15)}\n`;\n\nexport const IssueTypeId = styled.div`\n text-transform: uppercase;\n color: ${color.textMedium};\n ${font.size(12.5)}\n`;\n\nexport const SectionTitle = styled.div`\n padding-bottom: 12px;\n text-transform: uppercase;\n color: ${color.textMedium};\n ${font.bold}\n ${font.size(11.5)}\n`;\n\nexport const NoResults = styled.div`\n padding-top: 50px;\n text-align: center;\n`;\n\nexport const NoResultsTitle = styled.div`\n padding-top: 30px;\n ${font.medium}\n ${font.size(20)}\n`;\n\nexport const NoResultsTip = styled.div`\n padding-top: 10px;\n ${font.size(15)}\n`;\n"
},
{
"path": "client/src/Project/IssueSearch/index.jsx",
"content": "import React, { Fragment, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { Link } from 'react-router-dom';\nimport { get } from 'lodash';\n\nimport useApi from 'shared/hooks/api';\nimport { sortByNewest } from 'shared/utils/javascript';\nimport { IssueTypeIcon } from 'shared/components';\n\nimport NoResultsSVG from './NoResultsSvg';\nimport {\n IssueSearch,\n SearchInputCont,\n SearchInputDebounced,\n SearchIcon,\n SearchSpinner,\n Issue,\n IssueData,\n IssueTitle,\n IssueTypeId,\n SectionTitle,\n NoResults,\n NoResultsTitle,\n NoResultsTip,\n} from './Styles';\n\nconst propTypes = {\n project: PropTypes.object.isRequired,\n};\n\nconst ProjectIssueSearch = ({ project }) => {\n const [isSearchTermEmpty, setIsSearchTermEmpty] = useState(true);\n\n const [{ data, isLoading }, fetchIssues] = useApi.get('/issues', {}, { lazy: true });\n\n const matchingIssues = get(data, 'issues', []);\n\n const recentIssues = sortByNewest(project.issues, 'createdAt').slice(0, 10);\n\n const handleSearchChange = value => {\n const searchTerm = value.trim();\n\n setIsSearchTermEmpty(!searchTerm);\n\n if (searchTerm) {\n fetchIssues({ searchTerm });\n }\n };\n\n return (\n \n \n \n\n {isSearchTermEmpty && recentIssues.length > 0 && (\n \n Recent Issues \n {recentIssues.map(renderIssue)}\n \n )}\n\n {!isSearchTermEmpty && matchingIssues.length > 0 && (\n \n Matching Issues \n {matchingIssues.map(renderIssue)}\n \n )}\n\n {!isSearchTermEmpty && !isLoading && matchingIssues.length === 0 && (\n \n We couldn't find anything matching your search \n Try again with a different term. \n \n )}\n \n );\n};\n\nconst renderIssue = issue => (\n \n \n {issue.title} \n {`${issue.type}-${issue.id}`} \n \n \n \n);\n\nProjectIssueSearch.propTypes = propTypes;\n\nexport default ProjectIssueSearch;\n"
},
{
"path": "client/src/Project/NavbarLeft/Styles.js",
"content": "import styled from 'styled-components';\nimport { NavLink } from 'react-router-dom';\n\nimport { font, sizes, color, mixin, zIndexValues } from 'shared/utils/styles';\nimport { Logo } from 'shared/components';\n\nexport const NavLeft = styled.aside`\n z-index: ${zIndexValues.navLeft};\n position: fixed;\n top: 0;\n left: 0;\n overflow-x: hidden;\n height: 100vh;\n width: ${sizes.appNavBarLeftWidth}px;\n background: ${color.backgroundDarkPrimary};\n transition: all 0.1s;\n ${mixin.hardwareAccelerate}\n &:hover {\n width: 200px;\n box-shadow: 0 0 50px 0 rgba(0, 0, 0, 0.6);\n }\n`;\n\nexport const LogoLink = styled(NavLink)`\n display: block;\n position: relative;\n left: 0;\n margin: 20px 0 10px;\n transition: left 0.1s;\n`;\n\nexport const StyledLogo = styled(Logo)`\n display: inline-block;\n margin-left: 8px;\n padding: 10px;\n ${mixin.clickable}\n`;\n\nexport const Bottom = styled.div`\n position: absolute;\n bottom: 20px;\n left: 0;\n width: 100%;\n`;\n\nexport const Item = styled.div`\n position: relative;\n width: 100%;\n height: 42px;\n line-height: 42px;\n padding-left: 64px;\n color: #deebff;\n transition: color 0.1s;\n ${mixin.clickable}\n &:hover {\n background: rgba(255, 255, 255, 0.1);\n }\n i {\n position: absolute;\n left: 18px;\n }\n`;\n\nexport const ItemText = styled.div`\n position: relative;\n right: 12px;\n visibility: hidden;\n opacity: 0;\n text-transform: uppercase;\n transition: all 0.1s;\n transition-property: right, visibility, opacity;\n ${font.bold}\n ${font.size(12)}\n ${NavLeft}:hover & {\n right: 0;\n visibility: visible;\n opacity: 1;\n }\n`;\n"
},
{
"path": "client/src/Project/NavbarLeft/index.jsx",
"content": "import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { Icon, AboutTooltip } from 'shared/components';\n\nimport { NavLeft, LogoLink, StyledLogo, Bottom, Item, ItemText } from './Styles';\n\nconst propTypes = {\n issueSearchModalOpen: PropTypes.func.isRequired,\n issueCreateModalOpen: PropTypes.func.isRequired,\n};\n\nconst ProjectNavbarLeft = ({ issueSearchModalOpen, issueCreateModalOpen }) => (\n \n \n \n\n - \n
Search issues \n \n\n - \n
Create Issue \n \n\n \n (\n - \n
About \n \n )}\n />\n \n \n);\n\nProjectNavbarLeft.propTypes = propTypes;\n\nexport default ProjectNavbarLeft;\n"
},
{
"path": "client/src/Project/ProjectSettings/Styles.js",
"content": "import styled from 'styled-components';\n\nimport { font } from 'shared/utils/styles';\nimport { Button, Form } from 'shared/components';\n\nexport const FormCont = styled.div`\n display: flex;\n justify-content: center;\n`;\n\nexport const FormElement = styled(Form.Element)`\n width: 100%;\n max-width: 640px;\n`;\n\nexport const FormHeading = styled.h1`\n padding: 6px 0 15px;\n ${font.size(24)}\n ${font.medium}\n`;\n\nexport const ActionButton = styled(Button)`\n margin-top: 30px;\n`;\n"
},
{
"path": "client/src/Project/ProjectSettings/index.jsx",
"content": "import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { ProjectCategory, ProjectCategoryCopy } from 'shared/constants/projects';\nimport toast from 'shared/utils/toast';\nimport useApi from 'shared/hooks/api';\nimport { Form, Breadcrumbs } from 'shared/components';\n\nimport { FormCont, FormHeading, FormElement, ActionButton } from './Styles';\n\nconst propTypes = {\n project: PropTypes.object.isRequired,\n fetchProject: PropTypes.func.isRequired,\n};\n\nconst ProjectSettings = ({ project, fetchProject }) => {\n const [{ isUpdating }, updateProject] = useApi.put('/project');\n\n return (\n ({\n name: get('name'),\n url: get('url'),\n category: get('category'),\n description: get('description'),\n }))}\n validations={{\n name: [Form.is.required(), Form.is.maxLength(100)],\n url: Form.is.url(),\n category: Form.is.required(),\n }}\n onSubmit={async (values, form) => {\n try {\n await updateProject(values);\n await fetchProject();\n toast.success('Changes have been saved successfully.');\n } catch (error) {\n Form.handleAPIError(error, form);\n }\n }}\n >\n \n \n Project Details \n\n \n Save changes\n \n \n \n \n );\n};\n\nconst categoryOptions = Object.values(ProjectCategory).map(category => ({\n value: category,\n label: ProjectCategoryCopy[category],\n}));\n\nProjectSettings.propTypes = propTypes;\n\nexport default ProjectSettings;\n"
},
{
"path": "client/src/Project/Sidebar/Styles.js",
"content": "import styled from 'styled-components';\n\nimport { color, sizes, font, mixin, zIndexValues } from 'shared/utils/styles';\n\nexport const Sidebar = styled.div`\n position: fixed;\n z-index: ${zIndexValues.navLeft - 1};\n top: 0;\n left: ${sizes.appNavBarLeftWidth}px;\n height: 100vh;\n width: ${sizes.secondarySideBarWidth}px;\n padding: 0 16px 24px;\n background: ${color.backgroundLightest};\n border-right: 1px solid ${color.borderLightest};\n ${mixin.scrollableY}\n ${mixin.customScrollbar()}\n @media (max-width: 1100px) {\n width: ${sizes.secondarySideBarWidth - 10}px;\n }\n @media (max-width: 999px) {\n display: none;\n }\n`;\n\nexport const ProjectInfo = styled.div`\n display: flex;\n padding: 24px 4px;\n`;\n\nexport const ProjectTexts = styled.div`\n padding: 3px 0 0 10px;\n`;\n\nexport const ProjectName = styled.div`\n color: ${color.textDark};\n ${font.size(15)};\n ${font.medium};\n`;\n\nexport const ProjectCategory = styled.div`\n color: ${color.textMedium};\n ${font.size(13)};\n`;\n\nexport const Divider = styled.div`\n margin-top: 17px;\n padding-top: 18px;\n border-top: 1px solid ${color.borderLight};\n`;\n\nexport const LinkItem = styled.div`\n position: relative;\n display: flex;\n padding: 8px 12px;\n border-radius: 3px;\n ${mixin.clickable}\n ${props =>\n !props.to ? `cursor: not-allowed;` : `&:hover { background: ${color.backgroundLight}; }`}\n i {\n margin-right: 15px;\n font-size: 20px;\n }\n &.active {\n color: ${color.primary};\n background: ${color.backgroundLight};\n i {\n color: ${color.primary};\n }\n }\n`;\n\nexport const LinkText = styled.div`\n padding-top: 2px;\n ${font.size(14.7)};\n`;\n\nexport const NotImplemented = styled.div`\n display: inline-block;\n position: absolute;\n top: 7px;\n left: 40px;\n width: 140px;\n padding: 5px 0 5px 8px;\n border-radius: 3px;\n text-transform: uppercase;\n color: ${color.textDark};\n background: ${color.backgroundMedium};\n opacity: 0;\n ${font.size(11.5)};\n ${font.bold}\n ${LinkItem}:hover & {\n opacity: 1;\n }\n`;\n"
},
{
"path": "client/src/Project/Sidebar/index.jsx",
"content": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport { NavLink, useRouteMatch } from 'react-router-dom';\n\nimport { ProjectCategoryCopy } from 'shared/constants/projects';\nimport { Icon, ProjectAvatar } from 'shared/components';\n\nimport {\n Sidebar,\n ProjectInfo,\n ProjectTexts,\n ProjectName,\n ProjectCategory,\n Divider,\n LinkItem,\n LinkText,\n NotImplemented,\n} from './Styles';\n\nconst propTypes = {\n project: PropTypes.object.isRequired,\n};\n\nconst ProjectSidebar = ({ project }) => {\n const match = useRouteMatch();\n\n return (\n \n \n \n {project.name} \n {ProjectCategoryCopy[project.category]} project \n \n \n\n {renderLinkItem(match, 'Kanban Board', 'board', '/board')}\n {renderLinkItem(match, 'Project settings', 'settings', '/settings')}\n \n );\n};\n\nconst renderLinkItem = (match, text, iconType, path) => {\n const isImplemented = !!path;\n\n const linkItemProps = isImplemented\n ? { as: NavLink, exact: true, to: `${match.path}${path}` }\n : { as: 'div' };\n\n return (\n \n {text} \n {!isImplemented && Not implemented }\n \n );\n};\n\nProjectSidebar.propTypes = propTypes;\n\nexport default ProjectSidebar;\n"
},
{
"path": "client/src/Project/Styles.js",
"content": "import styled from 'styled-components';\n\nimport { sizes } from 'shared/utils/styles';\n\nconst paddingLeft = sizes.appNavBarLeftWidth + sizes.secondarySideBarWidth + 40;\n\nexport const ProjectPage = styled.div`\n padding: 25px 32px 50px ${paddingLeft}px;\n\n @media (max-width: 1100px) {\n padding: 25px 20px 50px ${paddingLeft - 20}px;\n }\n @media (max-width: 999px) {\n padding-left: ${paddingLeft - 20 - sizes.secondarySideBarWidth}px;\n }\n`;\n"
},
{
"path": "client/src/Project/index.jsx",
"content": "import React from 'react';\nimport { Route, Redirect, useRouteMatch, useHistory } from 'react-router-dom';\n\nimport useApi from 'shared/hooks/api';\nimport { updateArrayItemById } from 'shared/utils/javascript';\nimport { createQueryParamModalHelpers } from 'shared/utils/queryParamModal';\nimport { PageLoader, PageError, Modal } from 'shared/components';\n\nimport NavbarLeft from './NavbarLeft';\nimport Sidebar from './Sidebar';\nimport Board from './Board';\nimport IssueSearch from './IssueSearch';\nimport IssueCreate from './IssueCreate';\nimport ProjectSettings from './ProjectSettings';\nimport { ProjectPage } from './Styles';\n\nconst Project = () => {\n const match = useRouteMatch();\n const history = useHistory();\n\n const issueSearchModalHelpers = createQueryParamModalHelpers('issue-search');\n const issueCreateModalHelpers = createQueryParamModalHelpers('issue-create');\n\n const [{ data, error, setLocalData }, fetchProject] = useApi.get('/project');\n\n if (!data) return \n (\n history.push(`${match.url}/board`)}\n modalClose={modal.close}\n />\n )}\n />\n )}\n\n (\n \n );\n};\n\nexport default Project;\n"
},
{
"path": "client/src/browserHistory.js",
"content": "import { createBrowserHistory } from 'history';\n\nexport default createBrowserHistory();\n"
},
{
"path": "client/src/index.html",
"content": "\n\n \n Jira Clone \n \n \n
\n \n\n"
},
{
"path": "client/src/index.jsx",
"content": "import 'core-js/stable';\nimport 'regenerator-runtime/runtime';\n\nimport React from 'react';\nimport ReactDOM from 'react-dom';\n\nimport App from 'App';\n\nReactDOM.render( (\n \n \n \n\n \n This simplified Jira clone is built with React on the front-end and Node/TypeScript on the\n back-end.\n \n\n \n {'Read more on my website or reach out via '}\n \n ivor@codetree.co \n \n \n\n \n Visit Website \n \n\n \n \n Github Repo\n \n \n \n )}\n />\n);\n\nexport default AboutTooltip;\n"
},
{
"path": "client/src/shared/components/Avatar/Styles.js",
"content": "import styled from 'styled-components';\n\nimport { font, mixin } from 'shared/utils/styles';\n\nexport const Image = styled.div`\n display: inline-block;\n width: ${props => props.size}px;\n height: ${props => props.size}px;\n border-radius: 100%;\n ${props => mixin.backgroundImage(props.avatarUrl)}\n`;\n\nexport const Letter = styled.div`\n display: inline-block;\n width: ${props => props.size}px;\n height: ${props => props.size}px;\n border-radius: 100%;\n text-transform: uppercase;\n color: #fff;\n background: ${props => props.color};\n ${font.medium}\n ${props => font.size(Math.round(props.size / 1.7))}\n & > span {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n }\n`;\n"
},
{
"path": "client/src/shared/components/Avatar/index.jsx",
"content": "import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { Image, Letter } from './Styles';\n\nconst propTypes = {\n className: PropTypes.string,\n avatarUrl: PropTypes.string,\n name: PropTypes.string,\n size: PropTypes.number,\n};\n\nconst defaultProps = {\n className: undefined,\n avatarUrl: null,\n name: '',\n size: 32,\n};\n\nconst Avatar = ({ className, avatarUrl, name, size, ...otherProps }) => {\n const sharedProps = {\n className,\n size,\n 'data-testid': name ? `avatar:${name}` : 'avatar',\n ...otherProps,\n };\n\n if (avatarUrl) {\n return \n {name.charAt(0)} \n \n );\n};\n\nconst colors = [\n '#DA7657',\n '#6ADA57',\n '#5784DA',\n '#AA57DA',\n '#DA5757',\n '#DA5792',\n '#57DACA',\n '#57A5DA',\n];\n\nconst getColorFromName = name => colors[name.toLocaleLowerCase().charCodeAt(0) % colors.length];\n\nAvatar.propTypes = propTypes;\nAvatar.defaultProps = defaultProps;\n\nexport default Avatar;\n"
},
{
"path": "client/src/shared/components/Breadcrumbs/Styles.js",
"content": "import styled from 'styled-components';\n\nimport { color, font } from 'shared/utils/styles';\n\nexport const Container = styled.div`\n color: ${color.textMedium};\n ${font.size(15)};\n`;\n\nexport const Divider = styled.span`\n position: relative;\n top: 2px;\n margin: 0 10px;\n ${font.size(18)};\n`;\n"
},
{
"path": "client/src/shared/components/Breadcrumbs/index.jsx",
"content": "import React, { Fragment } from 'react';\nimport PropTypes from 'prop-types';\n\nimport { Container, Divider } from './Styles';\n\nconst propTypes = {\n items: PropTypes.array.isRequired,\n};\n\nconst Breadcrumbs = ({ items }) => (\n \n {items.map((item, index) => (\n \n {index !== 0 && / }\n {item}\n \n ))}\n \n);\n\nBreadcrumbs.propTypes = propTypes;\n\nexport default Breadcrumbs;\n"
},
{
"path": "client/src/shared/components/Button/Styles.js",
"content": "import styled, { css } from 'styled-components';\n\nimport { color, font, mixin } from 'shared/utils/styles';\nimport Spinner from 'shared/components/Spinner';\n\nexport const StyledButton = styled.button`\n display: inline-flex;\n align-items: center;\n justify-content: center;\n height: 32px;\n vertical-align: middle;\n line-height: 1;\n padding: 0 ${props => (props.iconOnly ? 9 : 12)}px;\n white-space: nowrap;\n border-radius: 3px;\n transition: all 0.1s;\n appearance: none;\n ${mixin.clickable}\n ${font.size(14.5)}\n ${props => buttonVariants[props.variant]}\n &:disabled {\n opacity: 0.6;\n cursor: default;\n }\n`;\n\nconst colored = css`\n color: #fff;\n background: ${props => color[props.variant]};\n ${font.medium}\n &:not(:disabled) {\n &:hover {\n background: ${props => mixin.lighten(color[props.variant], 0.15)};\n }\n &:active {\n background: ${props => mixin.darken(color[props.variant], 0.1)};\n }\n ${props =>\n props.isActive &&\n css`\n background: ${mixin.darken(color[props.variant], 0.1)} !important;\n `}\n }\n`;\n\nconst secondaryAndEmptyShared = css`\n color: ${color.textDark};\n ${font.regular}\n &:not(:disabled) {\n &:hover {\n background: ${color.backgroundLight};\n }\n &:active {\n color: ${color.primary};\n background: ${color.backgroundLightPrimary};\n }\n ${props =>\n props.isActive &&\n css`\n color: ${color.primary};\n background: ${color.backgroundLightPrimary} !important;\n `}\n }\n`;\n\nconst buttonVariants = {\n primary: colored,\n success: colored,\n danger: colored,\n secondary: css`\n background: ${color.secondary};\n ${secondaryAndEmptyShared};\n `,\n empty: css`\n background: #fff;\n ${secondaryAndEmptyShared};\n `,\n};\n\nexport const StyledSpinner = styled(Spinner)`\n position: relative;\n top: 1px;\n`;\n\nexport const Text = styled.div`\n padding-left: ${props => (props.withPadding ? 7 : 0)}px;\n`;\n"
},
{
"path": "client/src/shared/components/Button/index.jsx",
"content": "import React, { forwardRef } from 'react';\nimport PropTypes from 'prop-types';\n\nimport { color } from 'shared/utils/styles';\nimport Icon from 'shared/components/Icon';\n\nimport { StyledButton, StyledSpinner, Text } from './Styles';\n\nconst propTypes = {\n className: PropTypes.string,\n children: PropTypes.node,\n variant: PropTypes.oneOf(['primary', 'success', 'danger', 'secondary', 'empty']),\n icon: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\n iconSize: PropTypes.number,\n disabled: PropTypes.bool,\n isWorking: PropTypes.bool,\n onClick: PropTypes.func,\n};\n\nconst defaultProps = {\n className: undefined,\n children: undefined,\n variant: 'secondary',\n icon: undefined,\n iconSize: 18,\n disabled: false,\n isWorking: false,\n onClick: () => {},\n};\n\nconst Button = forwardRef(\n ({ children, variant, icon, iconSize, disabled, isWorking, onClick, ...buttonProps }, ref) => {\n const handleClick = () => {\n if (!disabled && !isWorking) {\n onClick();\n }\n };\n\n return (\n \n {isWorking && {children} }\n \n );\n },\n);\n\nconst getIconColor = variant =>\n ['secondary', 'empty'].includes(variant) ? color.textDark : '#fff';\n\nButton.propTypes = propTypes;\nButton.defaultProps = defaultProps;\n\nexport default Button;\n"
},
{
"path": "client/src/shared/components/ConfirmModal/Styles.js",
"content": "import styled from 'styled-components';\n\nimport { font } from 'shared/utils/styles';\nimport Modal from 'shared/components/Modal';\nimport Button from 'shared/components/Button';\n\nexport const StyledConfirmModal = styled(Modal)`\n padding: 35px 40px 40px;\n`;\n\nexport const Title = styled.div`\n padding-bottom: 25px;\n ${font.medium}\n ${font.size(22)}\n line-height: 1.5;\n`;\n\nexport const Message = styled.p`\n padding-bottom: 25px;\n white-space: pre-wrap;\n ${font.size(15)}\n`;\n\nexport const Actions = styled.div`\n display: flex;\n padding-top: 6px;\n`;\n\nexport const StyledButton = styled(Button)`\n margin-right: 10px;\n`;\n"
},
{
"path": "client/src/shared/components/ConfirmModal/index.jsx",
"content": "import React, { Fragment, useState } from 'react';\nimport PropTypes from 'prop-types';\n\nimport { StyledConfirmModal, Title, Message, Actions, StyledButton } from './Styles';\n\nconst propTypes = {\n className: PropTypes.string,\n variant: PropTypes.oneOf(['primary', 'danger']),\n title: PropTypes.string,\n message: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\n confirmText: PropTypes.string,\n cancelText: PropTypes.string,\n onConfirm: PropTypes.func.isRequired,\n renderLink: PropTypes.func.isRequired,\n};\n\nconst defaultProps = {\n className: undefined,\n variant: 'primary',\n title: 'Warning',\n message: 'Are you sure you want to continue with this action?',\n confirmText: 'Confirm',\n cancelText: 'Cancel',\n};\n\nconst ConfirmModal = ({\n className,\n variant,\n title,\n message,\n confirmText,\n cancelText,\n onConfirm,\n renderLink,\n}) => {\n const [isWorking, setWorking] = useState(false);\n\n const handleConfirm = modal => {\n setWorking(true);\n onConfirm({\n close: () => {\n modal.close();\n setWorking(false);\n },\n });\n };\n\n return (\n (\n \n {title} \n {message && {message} }\n \n handleConfirm(modal)}\n >\n {confirmText}\n \n \n {cancelText}\n \n \n \n )}\n />\n );\n};\n\nConfirmModal.propTypes = propTypes;\nConfirmModal.defaultProps = defaultProps;\n\nexport default ConfirmModal;\n"
},
{
"path": "client/src/shared/components/CopyLinkButton.jsx",
"content": "import React, { useState } from 'react';\n\nimport { copyToClipboard } from 'shared/utils/browser';\nimport { Button } from 'shared/components';\n\nconst CopyLinkButton = ({ ...buttonProps }) => {\n const [isLinkCopied, setLinkCopied] = useState(false);\n\n const handleLinkCopy = () => {\n setLinkCopied(true);\n setTimeout(() => setLinkCopied(false), 2000);\n copyToClipboard(window.location.href);\n };\n\n return (\n \n {isLinkCopied ? 'Link Copied' : 'Copy link'}\n \n );\n};\n\nexport default CopyLinkButton;\n"
},
{
"path": "client/src/shared/components/DatePicker/DateSection.jsx",
"content": "import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport moment from 'moment';\nimport { times, range } from 'lodash';\n\nimport { formatDate, formatDateTimeForAPI } from 'shared/utils/dateTime';\nimport Icon from 'shared/components/Icon';\n\nimport {\n DateSection,\n YearSelect,\n SelectedMonthYear,\n Grid,\n PrevNextIcons,\n DayName,\n Day,\n} from './Styles';\n\nconst propTypes = {\n withTime: PropTypes.bool,\n value: PropTypes.string,\n onChange: PropTypes.func.isRequired,\n setDropdownOpen: PropTypes.func.isRequired,\n};\n\nconst defaultProps = {\n withTime: true,\n value: undefined,\n};\n\nconst DatePickerDateSection = ({ withTime, value, onChange, setDropdownOpen }) => {\n const [selectedMonth, setSelectedMonth] = useState(moment(value).startOf('month'));\n\n const handleYearChange = year => {\n setSelectedMonth(moment(selectedMonth).set({ year: Number(year) }));\n };\n\n const handleMonthChange = addOrSubtract => {\n setSelectedMonth(moment(selectedMonth)[addOrSubtract](1, 'month'));\n };\n\n const handleDayChange = newDate => {\n const existingHour = value ? moment(value).hour() : '00';\n const existingMinute = value ? moment(value).minute() : '00';\n\n const newDateWithExistingTime = newDate.set({\n hour: existingHour,\n minute: existingMinute,\n });\n onChange(formatDateTimeForAPI(newDateWithExistingTime));\n\n if (!withTime) {\n setDropdownOpen(false);\n }\n };\n\n return (\n \n {formatDate(selectedMonth, 'MMM YYYY')} \n\n handleYearChange(event.target.value)}>\n {generateYearOptions().map(option => (\n \n {option.label}\n \n ))}\n \n\n \n handleMonthChange('subtract')} />\n handleMonthChange('add')} />\n \n\n \n {generateWeekDayNames().map(name => (\n {name} \n ))}\n {generateFillerDaysBeforeMonthStart(selectedMonth).map(i => (\n handleDayChange(date)}\n >\n {formatDate(date, 'D')}\n \n ))}\n {generateFillerDaysAfterMonthEnd(selectedMonth).map(i => (\n \n \n );\n};\n\nconst currentYear = moment().year();\n\nconst generateYearOptions = () => [\n { label: 'Year', value: '' },\n ...times(50, i => ({ label: `${i + currentYear - 10}`, value: `${i + currentYear - 10}` })),\n];\n\nconst generateWeekDayNames = () => moment.weekdaysMin(true);\n\nconst generateFillerDaysBeforeMonthStart = selectedMonth => {\n const count = selectedMonth.diff(moment(selectedMonth).startOf('week'), 'days');\n return range(count);\n};\n\nconst generateMonthDays = selectedMonth =>\n times(selectedMonth.daysInMonth()).map(i => moment(selectedMonth).add(i, 'days'));\n\nconst generateFillerDaysAfterMonthEnd = selectedMonth => {\n const selectedMonthEnd = moment(selectedMonth).endOf('month');\n const weekEnd = moment(selectedMonthEnd).endOf('week');\n const count = weekEnd.diff(selectedMonthEnd, 'days');\n return range(count);\n};\n\nDatePickerDateSection.propTypes = propTypes;\nDatePickerDateSection.defaultProps = defaultProps;\n\nexport default DatePickerDateSection;\n"
},
{
"path": "client/src/shared/components/DatePicker/Styles.js",
"content": "import styled, { css } from 'styled-components';\n\nimport { color, font, mixin, zIndexValues } from 'shared/utils/styles';\n\nexport const StyledDatePicker = styled.div`\n position: relative;\n`;\n\nexport const Dropdown = styled.div`\n z-index: ${zIndexValues.dropdown};\n position: absolute;\n top: 130%;\n right: 0;\n width: 270px;\n border-radius: 3px;\n background: #fff;\n ${mixin.boxShadowDropdown}\n ${props =>\n props.withTime &&\n css`\n width: 360px;\n padding-right: 90px;\n `}\n`;\n\nexport const DateSection = styled.div`\n position: relative;\n padding: 20px;\n`;\n\nexport const SelectedMonthYear = styled.div`\n display: inline-block;\n padding-left: 7px;\n ${font.bold}\n ${font.size(16)}\n`;\n\nexport const YearSelect = styled.select`\n margin-left: 5px;\n width: 60px;\n height: 22px;\n ${font.size(13)}\n`;\n\nexport const PrevNextIcons = styled.div`\n position: absolute;\n top: 12px;\n right: 19px;\n i {\n padding: 7px 5px 4px;\n font-size: 22px;\n color: ${color.textLight};\n ${mixin.clickable}\n &:hover {\n color: ${color.textDarkest};\n }\n }\n`;\n\nexport const Grid = styled.div`\n display: flex;\n flex-wrap: wrap;\n padding-top: 15px;\n text-align: center;\n`;\n\nexport const DayName = styled.div`\n width: 14.28%;\n height: 30px;\n line-height: 30px;\n color: ${color.textLight};\n ${font.size(13)}\n`;\n\nexport const Day = styled.div`\n width: 14.28%;\n height: 30px;\n line-height: 30px;\n border-radius: 3px;\n ${font.size(15)}\n ${props => !props.isFiller && hoverStyles}\n ${props => props.isToday && font.bold}\n ${props => props.isSelected && selectedStyles}\n`;\n\nexport const TimeSection = styled.div`\n position: absolute;\n top: 0;\n right: 0;\n height: 100%;\n width: 90px;\n padding: 5px 0;\n border-left: 1px solid ${color.borderLight};\n ${mixin.scrollableY}\n`;\n\nexport const Time = styled.div`\n padding: 5px 0 5px 20px;\n ${font.size(14)}\n ${props => !props.isFiller && hoverStyles}\n ${props => props.isSelected && selectedStyles}\n`;\n\nconst hoverStyles = css`\n ${mixin.clickable}\n &:hover {\n background: ${color.backgroundMedium};\n }\n`;\n\nconst selectedStyles = css`\n color: #fff;\n &:hover,\n & {\n background: ${color.primary};\n }\n`;\n"
},
{
"path": "client/src/shared/components/DatePicker/TimeSection.jsx",
"content": "import React, { useLayoutEffect, useRef } from 'react';\nimport PropTypes from 'prop-types';\nimport moment from 'moment';\nimport { range } from 'lodash';\n\nimport { formatDate, formatDateTimeForAPI } from 'shared/utils/dateTime';\n\nimport { TimeSection, Time } from './Styles';\n\nconst propTypes = {\n value: PropTypes.string,\n onChange: PropTypes.func.isRequired,\n setDropdownOpen: PropTypes.func.isRequired,\n};\n\nconst defaultProps = {\n value: undefined,\n};\n\nconst DatePickerTimeSection = ({ value, onChange, setDropdownOpen }) => {\n const $sectionRef = useRef();\n\n useLayoutEffect(() => {\n scrollToSelectedTime($sectionRef.current, value);\n }, [value]);\n\n const handleTimeChange = newTime => {\n const [newHour, newMinute] = newTime.split(':');\n\n const existingDateWithNewTime = moment(value).set({\n hour: Number(newHour),\n minute: Number(newMinute),\n });\n onChange(formatDateTimeForAPI(existingDateWithNewTime));\n setDropdownOpen(false);\n };\n\n return (\n \n {generateTimes().map(time => (\n handleTimeChange(time)}\n >\n {time}\n \n ))}\n \n );\n};\n\nconst formatTime = value => formatDate(value, 'HH:mm');\n\nconst scrollToSelectedTime = ($scrollCont, value) => {\n if (!$scrollCont) return;\n\n const $selectedTime = $scrollCont.querySelector(`[data-time=\"${formatTime(value)}\"]`);\n if (!$selectedTime) return;\n\n $scrollCont.scrollTop = $selectedTime.offsetTop - 80;\n};\n\nconst generateTimes = () =>\n range(48).map(i => {\n const hour = `${Math.floor(i / 2)}`;\n const paddedHour = hour.length < 2 ? `0${hour}` : hour;\n const minute = i % 2 === 0 ? '00' : '30';\n return `${paddedHour}:${minute}`;\n });\n\nDatePickerTimeSection.propTypes = propTypes;\nDatePickerTimeSection.defaultProps = defaultProps;\n\nexport default DatePickerTimeSection;\n"
},
{
"path": "client/src/shared/components/DatePicker/index.jsx",
"content": "import React, { useState, useRef } from 'react';\nimport PropTypes from 'prop-types';\n\nimport { formatDate, formatDateTime } from 'shared/utils/dateTime';\nimport useOnOutsideClick from 'shared/hooks/onOutsideClick';\nimport Input from 'shared/components/Input';\n\nimport DateSection from './DateSection';\nimport TimeSection from './TimeSection';\nimport { StyledDatePicker, Dropdown } from './Styles';\n\nconst propTypes = {\n className: PropTypes.string,\n withTime: PropTypes.bool,\n value: PropTypes.string,\n onChange: PropTypes.func.isRequired,\n};\n\nconst defaultProps = {\n className: undefined,\n withTime: true,\n value: undefined,\n};\n\nconst DatePicker = ({ className, withTime, value, onChange, ...inputProps }) => {\n const [isDropdownOpen, setDropdownOpen] = useState(false);\n const $containerRef = useRef();\n\n useOnOutsideClick($containerRef, isDropdownOpen, () => setDropdownOpen(false));\n\n return (\n \n setDropdownOpen(true)}\n />\n {isDropdownOpen && (\n \n \n )}\n \n );\n};\n\nconst getFormattedInputValue = (value, withTime) => {\n if (!value) return '';\n return withTime ? formatDateTime(value) : formatDate(value);\n};\n\nDatePicker.propTypes = propTypes;\nDatePicker.defaultProps = defaultProps;\n\nexport default DatePicker;\n"
},
{
"path": "client/src/shared/components/Form/Field.jsx",
"content": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport { uniqueId } from 'lodash';\n\nimport Input from 'shared/components/Input';\nimport Select from 'shared/components/Select';\nimport Textarea from 'shared/components/Textarea';\nimport TextEditor from 'shared/components/TextEditor';\nimport DatePicker from 'shared/components/DatePicker';\n\nimport { StyledField, FieldLabel, FieldTip, FieldError } from './Styles';\n\nconst propTypes = {\n className: PropTypes.string,\n label: PropTypes.string,\n tip: PropTypes.string,\n error: PropTypes.string,\n name: PropTypes.string,\n};\n\nconst defaultProps = {\n className: undefined,\n label: undefined,\n tip: undefined,\n error: undefined,\n name: undefined,\n};\n\nconst generateField = FormComponent => {\n const FieldComponent = ({ className, label, tip, error, name, ...otherProps }) => {\n const fieldId = uniqueId('form-field-');\n\n return (\n \n {label && {label} }\n {tip} }\n {error && {error} }\n \n );\n };\n\n FieldComponent.propTypes = propTypes;\n FieldComponent.defaultProps = defaultProps;\n\n return FieldComponent;\n};\n\nexport default {\n Input: generateField(Input),\n Select: generateField(Select),\n Textarea: generateField(Textarea),\n TextEditor: generateField(TextEditor),\n DatePicker: generateField(DatePicker),\n};\n"
},
{
"path": "client/src/shared/components/Form/Styles.js",
"content": "import styled from 'styled-components';\n\nimport { color, font } from 'shared/utils/styles';\n\nexport const StyledField = styled.div`\n margin-top: 20px;\n`;\n\nexport const FieldLabel = styled.label`\n display: block;\n padding-bottom: 5px;\n color: ${color.textMedium};\n ${font.medium}\n ${font.size(13)}\n`;\n\nexport const FieldTip = styled.div`\n padding-top: 6px;\n color: ${color.textMedium};\n ${font.size(12.5)}\n`;\n\nexport const FieldError = styled.div`\n margin-top: 6px;\n line-height: 1;\n color: ${color.danger};\n ${font.medium}\n ${font.size(12.5)}\n`;\n"
},
{
"path": "client/src/shared/components/Form/index.jsx",
"content": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Formik, Form as FormikForm, Field as FormikField } from 'formik';\nimport { get, mapValues } from 'lodash';\n\nimport toast from 'shared/utils/toast';\nimport { is, generateErrors } from 'shared/utils/validation';\n\nimport Field from './Field';\n\nconst propTypes = {\n validate: PropTypes.func,\n validations: PropTypes.object,\n validateOnBlur: PropTypes.bool,\n};\n\nconst defaultProps = {\n validate: undefined,\n validations: undefined,\n validateOnBlur: false,\n};\n\nconst Form = ({ validate, validations, ...otherProps }) => (\n {\n if (validate) {\n return validate(values);\n }\n if (validations) {\n return generateErrors(values, validations);\n }\n return {};\n }}\n />\n);\n\nForm.Element = props => \n {({ field, form: { touched, errors, setFieldValue } }) => (\n setFieldValue(name, value)}\n />\n )}\n \n));\n\nForm.initialValues = (data, getFieldValues) =>\n getFieldValues((key, defaultValue = '') => {\n const value = get(data, key);\n return value === undefined || value === null ? defaultValue : value;\n });\n\nForm.handleAPIError = (error, form) => {\n if (error.data.fields) {\n form.setErrors(error.data.fields);\n } else {\n toast.error(error);\n }\n};\n\nForm.is = is;\n\nForm.propTypes = propTypes;\nForm.defaultProps = defaultProps;\n\nexport default Form;\n"
},
{
"path": "client/src/shared/components/Icon/Styles.js",
"content": "import styled from 'styled-components';\n\nexport const StyledIcon = styled.i`\n display: inline-block;\n font-size: ${props => `${props.size}px`};\n ${props =>\n props.left || props.top ? `transform: translate(${props.left}px, ${props.top}px);` : ''}\n &:before {\n content: \"${props => props.code}\";\n font-family: \"jira\" !important;\n speak: none;\n font-style: normal;\n font-weight: normal;\n font-variant: normal;\n text-transform: none;\n line-height: 1;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n }\n`;\n"
},
{
"path": "client/src/shared/components/Icon/index.jsx",
"content": "import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { StyledIcon } from './Styles';\n\nconst fontIconCodes = {\n [`bug`]: '\\\\e90f',\n [`stopwatch`]: '\\\\e914',\n [`task`]: '\\\\e910',\n [`story`]: '\\\\e911',\n [`arrow-down`]: '\\\\e90a',\n [`arrow-left-circle`]: '\\\\e917',\n [`arrow-up`]: '\\\\e90b',\n [`chevron-down`]: '\\\\e900',\n [`chevron-left`]: '\\\\e901',\n [`chevron-right`]: '\\\\e902',\n [`chevron-up`]: '\\\\e903',\n [`board`]: '\\\\e904',\n [`help`]: '\\\\e905',\n [`link`]: '\\\\e90c',\n [`menu`]: '\\\\e916',\n [`more`]: '\\\\e90e',\n [`attach`]: '\\\\e90d',\n [`plus`]: '\\\\e906',\n [`search`]: '\\\\e907',\n [`issues`]: '\\\\e908',\n [`settings`]: '\\\\e909',\n [`close`]: '\\\\e913',\n [`feedback`]: '\\\\e918',\n [`trash`]: '\\\\e912',\n [`github`]: '\\\\e915',\n [`shipping`]: '\\\\e91c',\n [`component`]: '\\\\e91a',\n [`reports`]: '\\\\e91b',\n [`page`]: '\\\\e919',\n [`calendar`]: '\\\\e91d',\n [`arrow-left`]: '\\\\e91e',\n [`arrow-right`]: '\\\\e91f',\n};\n\nconst propTypes = {\n className: PropTypes.string,\n type: PropTypes.oneOf(Object.keys(fontIconCodes)).isRequired,\n size: PropTypes.number,\n left: PropTypes.number,\n top: PropTypes.number,\n};\n\nconst defaultProps = {\n className: undefined,\n size: 16,\n left: 0,\n top: 0,\n};\n\nconst Icon = ({ type, ...iconProps }) => (\n \n {icon && \n );\n});\n\nInput.propTypes = propTypes;\nInput.defaultProps = defaultProps;\n\nexport default Input;\n"
},
{
"path": "client/src/shared/components/InputDebounced.jsx",
"content": "import React, { useState, useRef, useEffect, useCallback } from 'react';\nimport PropTypes from 'prop-types';\nimport { debounce } from 'lodash';\n\nimport { Input } from 'shared/components';\n\nconst propTypes = {\n value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n onChange: PropTypes.func.isRequired,\n};\n\nconst defaultProps = {\n value: undefined,\n};\n\nconst InputDebounced = ({ onChange, value: propsValue, ...inputProps }) => {\n const [value, setValue] = useState(propsValue);\n const isControlled = propsValue !== undefined;\n\n const handleChange = useCallback(\n debounce(newValue => onChange(newValue), 500),\n [],\n );\n\n const valueRef = useRef(value);\n valueRef.current = value;\n\n useEffect(() => {\n if (propsValue !== valueRef.current) {\n setValue(propsValue);\n }\n }, [propsValue]);\n\n return (\n {\n setValue(newValue);\n handleChange(newValue);\n }}\n />\n );\n};\n\nInputDebounced.propTypes = propTypes;\nInputDebounced.defaultProps = defaultProps;\n\nexport default InputDebounced;\n"
},
{
"path": "client/src/shared/components/IssuePriorityIcon/Styles.js",
"content": "import styled from 'styled-components';\n\nimport { issuePriorityColors } from 'shared/utils/styles';\nimport { Icon } from 'shared/components';\n\nexport const PriorityIcon = styled(Icon)`\n color: ${props => issuePriorityColors[props.color]};\n`;\n"
},
{
"path": "client/src/shared/components/IssuePriorityIcon/index.jsx",
"content": "import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { IssuePriority } from 'shared/constants/issues';\n\nimport { PriorityIcon } from './Styles';\n\nconst propTypes = {\n priority: PropTypes.string.isRequired,\n};\n\nconst IssuePriorityIcon = ({ priority, ...otherProps }) => {\n const iconType = [IssuePriority.LOW, IssuePriority.LOWEST].includes(priority)\n ? 'arrow-down'\n : 'arrow-up';\n\n return \n \n \n \n \n Jira Software-blue \n \n \n \n \n \n \n);\n\nLogo.propTypes = propTypes;\nLogo.defaultProps = defaultProps;\n\nexport default Logo;\n"
},
{
"path": "client/src/shared/components/Modal/Styles.js",
"content": "import styled, { css } from 'styled-components';\n\nimport { color, mixin, zIndexValues } from 'shared/utils/styles';\nimport Icon from 'shared/components/Icon';\n\nexport const ScrollOverlay = styled.div`\n z-index: ${zIndexValues.modal};\n position: fixed;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n ${mixin.scrollableY}\n`;\n\nexport const ClickableOverlay = styled.div`\n min-height: 100%;\n background: rgba(9, 30, 66, 0.54);\n ${props => clickOverlayStyles[props.variant]}\n`;\n\nconst clickOverlayStyles = {\n center: css`\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 50px;\n `,\n aside: '',\n};\n\nexport const StyledModal = styled.div`\n display: inline-block;\n position: relative;\n width: 100%;\n background: #fff;\n ${props => modalStyles[props.variant]}\n`;\n\nconst modalStyles = {\n center: css`\n max-width: ${props => props.width}px;\n vertical-align: middle;\n border-radius: 3px;\n ${mixin.boxShadowMedium}\n `,\n aside: css`\n min-height: 100vh;\n max-width: ${props => props.width}px;\n box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.15);\n `,\n};\n\nexport const CloseIcon = styled(Icon)`\n position: absolute;\n font-size: 25px;\n color: ${color.textMedium};\n transition: all 0.1s;\n ${mixin.clickable}\n ${props => closeIconStyles[props.variant]}\n`;\n\nconst closeIconStyles = {\n center: css`\n top: 10px;\n right: 12px;\n padding: 3px 5px 0px 5px;\n border-radius: 4px;\n &:hover {\n background: ${color.backgroundLight};\n }\n `,\n aside: css`\n top: 10px;\n right: -30px;\n width: 50px;\n height: 50px;\n padding-top: 10px;\n border-radius: 3px;\n text-align: center;\n background: #fff;\n border: 1px solid ${color.borderLightest};\n ${mixin.boxShadowMedium};\n &:hover {\n color: ${color.primary};\n }\n `,\n};\n"
},
{
"path": "client/src/shared/components/Modal/index.jsx",
"content": "import React, { Fragment, useState, useRef, useEffect, useCallback } from 'react';\nimport ReactDOM from 'react-dom';\nimport PropTypes from 'prop-types';\n\nimport useOnOutsideClick from 'shared/hooks/onOutsideClick';\nimport useOnEscapeKeyDown from 'shared/hooks/onEscapeKeyDown';\n\nimport { ScrollOverlay, ClickableOverlay, StyledModal, CloseIcon } from './Styles';\n\nconst propTypes = {\n className: PropTypes.string,\n testid: PropTypes.string,\n variant: PropTypes.oneOf(['center', 'aside']),\n width: PropTypes.number,\n withCloseIcon: PropTypes.bool,\n isOpen: PropTypes.bool,\n onClose: PropTypes.func,\n renderLink: PropTypes.func,\n renderContent: PropTypes.func.isRequired,\n};\n\nconst defaultProps = {\n className: undefined,\n testid: 'modal',\n variant: 'center',\n width: 600,\n withCloseIcon: true,\n isOpen: undefined,\n onClose: () => {},\n renderLink: () => {},\n};\n\nconst Modal = ({\n className,\n testid,\n variant,\n width,\n withCloseIcon,\n isOpen: propsIsOpen,\n onClose: tellParentToClose,\n renderLink,\n renderContent,\n}) => {\n const [stateIsOpen, setStateOpen] = useState(false);\n const isControlled = typeof propsIsOpen === 'boolean';\n const isOpen = isControlled ? propsIsOpen : stateIsOpen;\n\n const $modalRef = useRef();\n const $clickableOverlayRef = useRef();\n\n const closeModal = useCallback(() => {\n if (!isControlled) {\n setStateOpen(false);\n } else {\n tellParentToClose();\n }\n }, [isControlled, tellParentToClose]);\n\n useOnOutsideClick($modalRef, isOpen, closeModal, $clickableOverlayRef);\n useOnEscapeKeyDown(isOpen, closeModal);\n\n useEffect(() => {\n document.body.style.overflow = 'hidden';\n\n return () => {\n document.body.style.overflow = 'visible';\n };\n }, [isOpen]);\n\n return (\n \n {!isControlled && renderLink({ open: () => setStateOpen(true) })}\n\n {isOpen &&\n ReactDOM.createPortal(\n \n \n \n {withCloseIcon && \n ,\n $root,\n )}\n \n );\n};\n\nconst $root = document.getElementById('root');\n\nModal.propTypes = propTypes;\nModal.defaultProps = defaultProps;\n\nexport default Modal;\n"
},
{
"path": "client/src/shared/components/PageError/Styles.js",
"content": "import styled from 'styled-components';\n\nimport { color, font, mixin } from 'shared/utils/styles';\nimport { Icon } from 'shared/components';\n\nimport imageBackground from './assets/background-forest.jpg';\n\nexport const ErrorPage = styled.div`\n padding: 64px;\n`;\n\nexport const ErrorPageInner = styled.div`\n margin: 0 auto;\n max-width: 1440px;\n padding: 200px 0;\n ${mixin.backgroundImage(imageBackground)}\n @media (max-height: 680px) {\n padding: 140px 0;\n }\n`;\n\nexport const ErrorBox = styled.div`\n position: relative;\n margin: 0 auto;\n max-width: 480px;\n padding: 32px;\n border-radius: 3px;\n border: 1px solid ${color.borderLight};\n box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);\n background: rgba(255, 255, 255, 0.9);\n`;\n\nexport const StyledIcon = styled(Icon)`\n position: absolute;\n top: 32px;\n left: 32px;\n font-size: 30px;\n color: ${color.primary};\n`;\n\nexport const Title = styled.h1`\n margin-bottom: 16px;\n padding-left: 42px;\n ${font.size(29)}\n`;\n"
},
{
"path": "client/src/shared/components/PageError/index.jsx",
"content": "import React from 'react';\n\nimport { ErrorPage, ErrorPageInner, ErrorBox, StyledIcon, Title } from './Styles';\n\nconst PageError = () => (\n \n \n \n Thereโs been a glitchโฆ \n \n {'Weโre not quite sure what went wrong. Please contact us or try looking on our '}\n Help Center \n {' if you need a hand.'}\n
\n \n \n \n);\n\nexport default PageError;\n"
},
{
"path": "client/src/shared/components/PageLoader/Styles.js",
"content": "import styled from 'styled-components';\n\nexport default styled.div`\n width: 100%;\n padding: 200px 0;\n text-align: center;\n`;\n"
},
{
"path": "client/src/shared/components/PageLoader/index.jsx",
"content": "import React from 'react';\n\nimport Spinner from 'shared/components/Spinner';\n\nimport StyledPageLoader from './Styles';\n\nconst PageLoader = () => (\n \n \n);\n\nexport default PageLoader;\n"
},
{
"path": "client/src/shared/components/ProjectAvatar.jsx",
"content": "import React from 'react';\nimport PropTypes from 'prop-types';\n\nconst propTypes = {\n className: PropTypes.string,\n size: PropTypes.number,\n};\n\nconst defaultProps = {\n className: undefined,\n size: 40,\n};\n\nconst ProjectAvatar = ({ className, size }) => (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n);\n\nProjectAvatar.propTypes = propTypes;\nProjectAvatar.defaultProps = defaultProps;\n\nexport default ProjectAvatar;\n"
},
{
"path": "client/src/shared/components/Select/Dropdown.jsx",
"content": "import React, { useState, useRef, useLayoutEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport { uniq } from 'lodash';\n\nimport { KeyCodes } from 'shared/constants/keyCodes';\n\nimport { ClearIcon, Dropdown, DropdownInput, Options, Option, OptionsNoResults } from './Styles';\n\nconst propTypes = {\n dropdownWidth: PropTypes.number,\n value: PropTypes.any,\n isValueEmpty: PropTypes.bool.isRequired,\n searchValue: PropTypes.string.isRequired,\n setSearchValue: PropTypes.func.isRequired,\n $inputRef: PropTypes.object.isRequired,\n deactivateDropdown: PropTypes.func.isRequired,\n options: PropTypes.array.isRequired,\n onChange: PropTypes.func.isRequired,\n onCreate: PropTypes.func,\n isMulti: PropTypes.bool.isRequired,\n withClearValue: PropTypes.bool.isRequired,\n propsRenderOption: PropTypes.func,\n};\n\nconst defaultProps = {\n dropdownWidth: undefined,\n value: undefined,\n onCreate: undefined,\n propsRenderOption: undefined,\n};\n\nconst SelectDropdown = ({\n dropdownWidth,\n value,\n isValueEmpty,\n searchValue,\n setSearchValue,\n $inputRef,\n deactivateDropdown,\n options,\n onChange,\n onCreate,\n isMulti,\n withClearValue,\n propsRenderOption,\n}) => {\n const [isCreatingOption, setCreatingOption] = useState(false);\n\n const $optionsRef = useRef();\n\n useLayoutEffect(() => {\n const setFirstOptionAsActive = () => {\n const $active = getActiveOptionNode();\n if ($active) $active.classList.remove(activeOptionClass);\n\n if ($optionsRef.current.firstElementChild) {\n $optionsRef.current.firstElementChild.classList.add(activeOptionClass);\n }\n };\n setFirstOptionAsActive();\n });\n\n const selectOptionValue = optionValue => {\n deactivateDropdown();\n if (isMulti) {\n onChange(uniq([...value, optionValue]));\n } else {\n onChange(optionValue);\n }\n };\n\n const createOption = newOptionLabel => {\n setCreatingOption(true);\n onCreate(newOptionLabel, createdOptionValue => {\n setCreatingOption(false);\n selectOptionValue(createdOptionValue);\n });\n };\n\n const clearOptionValues = () => {\n $inputRef.current.value = '';\n $inputRef.current.focus();\n onChange(isMulti ? [] : null);\n };\n\n const handleInputKeyDown = event => {\n if (event.keyCode === KeyCodes.ESCAPE) {\n handleInputEscapeKeyDown(event);\n } else if (event.keyCode === KeyCodes.ENTER) {\n handleInputEnterKeyDown(event);\n } else if (event.keyCode === KeyCodes.ARROW_DOWN || event.keyCode === KeyCodes.ARROW_UP) {\n handleInputArrowUpOrDownKeyDown(event);\n }\n };\n\n const handleInputEscapeKeyDown = event => {\n event.nativeEvent.stopImmediatePropagation();\n deactivateDropdown();\n };\n\n const handleInputEnterKeyDown = event => {\n event.preventDefault();\n\n const $active = getActiveOptionNode();\n if (!$active) return;\n\n const optionValueToSelect = $active.getAttribute('data-select-option-value');\n const optionLabelToCreate = $active.getAttribute('data-create-option-label');\n\n if (optionValueToSelect) {\n selectOptionValue(optionValueToSelect);\n } else if (optionLabelToCreate) {\n createOption(optionLabelToCreate);\n }\n };\n\n const handleInputArrowUpOrDownKeyDown = event => {\n const $active = getActiveOptionNode();\n if (!$active) return;\n\n const $options = $optionsRef.current;\n const $optionsHeight = $options.getBoundingClientRect().height;\n const $activeHeight = $active.getBoundingClientRect().height;\n\n if (event.keyCode === KeyCodes.ARROW_DOWN) {\n if ($options.lastElementChild === $active) {\n $active.classList.remove(activeOptionClass);\n $options.firstElementChild.classList.add(activeOptionClass);\n $options.scrollTop = 0;\n } else {\n $active.classList.remove(activeOptionClass);\n $active.nextElementSibling.classList.add(activeOptionClass);\n if ($active.offsetTop > $options.scrollTop + $optionsHeight / 1.4) {\n $options.scrollTop += $activeHeight;\n }\n }\n } else if (event.keyCode === KeyCodes.ARROW_UP) {\n if ($options.firstElementChild === $active) {\n $active.classList.remove(activeOptionClass);\n $options.lastElementChild.classList.add(activeOptionClass);\n $options.scrollTop = $options.scrollHeight;\n } else {\n $active.classList.remove(activeOptionClass);\n $active.previousElementSibling.classList.add(activeOptionClass);\n if ($active.offsetTop < $options.scrollTop + $optionsHeight / 2.4) {\n $options.scrollTop -= $activeHeight;\n }\n }\n }\n };\n\n const handleOptionMouseEnter = event => {\n const $active = getActiveOptionNode();\n if ($active) $active.classList.remove(activeOptionClass);\n event.currentTarget.classList.add(activeOptionClass);\n };\n\n const getActiveOptionNode = () => $optionsRef.current.querySelector(`.${activeOptionClass}`);\n\n const optionsFilteredBySearchValue = options.filter(option =>\n option.label\n .toString()\n .toLowerCase()\n .includes(searchValue.toLowerCase()),\n );\n\n const removeSelectedOptionsMulti = opts => opts.filter(option => !value.includes(option.value));\n const removeSelectedOptionsSingle = opts => opts.filter(option => value !== option.value);\n\n const filteredOptions = isMulti\n ? removeSelectedOptionsMulti(optionsFilteredBySearchValue)\n : removeSelectedOptionsSingle(optionsFilteredBySearchValue);\n\n const isSearchValueInOptions = options.map(option => option.label).includes(searchValue);\n const isOptionCreatable = onCreate && searchValue && !isSearchValueInOptions;\n\n return (\n \n setSearchValue(event.target.value)}\n />\n\n {!isValueEmpty && withClearValue && \n {filteredOptions.map(option => (\n selectOptionValue(option.value)}\n >\n {propsRenderOption ? propsRenderOption(option) : option.label}\n \n ))}\n\n {isOptionCreatable && (\n createOption(searchValue)}\n >\n {isCreatingOption ? `Creating \"${searchValue}\"...` : `Create \"${searchValue}\"`}\n \n )}\n \n\n {filteredOptions.length === 0 && No results }\n \n );\n};\n\nconst activeOptionClass = 'jira-select-option-is-active';\n\nSelectDropdown.propTypes = propTypes;\nSelectDropdown.defaultProps = defaultProps;\n\nexport default SelectDropdown;\n"
},
{
"path": "client/src/shared/components/Select/Styles.js",
"content": "import styled, { css } from 'styled-components';\n\nimport { color, font, mixin, zIndexValues } from 'shared/utils/styles';\nimport Icon from 'shared/components/Icon';\n\nexport const StyledSelect = styled.div`\n position: relative;\n border-radius: 4px;\n cursor: pointer;\n ${font.size(14)}\n ${props => props.variant === 'empty' && `display: inline-block;`}\n ${props =>\n props.variant === 'normal' &&\n css`\n width: 100%;\n border: 1px solid ${color.borderLightest};\n background: ${color.backgroundLightest};\n transition: background 0.1s;\n &:hover {\n background: ${color.backgroundLight};\n }\n `}\n &:focus {\n outline: none;\n ${props =>\n props.variant === 'normal' &&\n css`\n border: 1px solid ${color.borderInputFocus};\n box-shadow: 0 0 0 1px ${color.borderInputFocus};\n background: #fff;\n }\n `}\n }\n ${props =>\n props.invalid &&\n css`\n &,\n &:focus {\n border: 1px solid ${color.danger};\n box-shadow: none;\n }\n `}\n`;\n\nexport const ValueContainer = styled.div`\n display: flex;\n align-items: center;\n width: 100%;\n ${props =>\n props.variant === 'normal' &&\n css`\n min-height: 32px;\n padding: 5px 5px 5px 10px;\n `}\n`;\n\nexport const ChevronIcon = styled(Icon)`\n margin-left: auto;\n font-size: 18px;\n color: ${color.textMedium};\n`;\n\nexport const Placeholder = styled.div`\n color: ${color.textLight};\n`;\n\nexport const ValueMulti = styled.div`\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n ${props => props.variant === 'normal' && `padding-top: 5px;`}\n`;\n\nexport const ValueMultiItem = styled.div`\n margin: 0 5px 5px 0;\n ${mixin.tag()}\n`;\n\nexport const AddMore = styled.div`\n display: inline-block;\n margin-bottom: 3px;\n padding: 3px 0;\n ${font.size(12.5)}\n ${mixin.link()}\n i {\n margin-right: 3px;\n vertical-align: middle;\n font-size: 14px;\n }\n`;\n\nexport const Dropdown = styled.div`\n z-index: ${zIndexValues.dropdown};\n position: absolute;\n top: 100%;\n left: 0;\n border-radius: 0 0 4px 4px;\n background: #fff;\n ${mixin.boxShadowDropdown}\n ${props => (props.width ? `width: ${props.width}px;` : 'width: 100%;')}\n`;\n\nexport const DropdownInput = styled.input`\n padding: 10px 14px 8px;\n width: 100%;\n border: none;\n color: ${color.textDarkest};\n background: none;\n &:focus {\n outline: none;\n }\n`;\n\nexport const ClearIcon = styled(Icon)`\n position: absolute;\n top: 4px;\n right: 7px;\n padding: 5px;\n font-size: 16px;\n color: ${color.textMedium};\n ${mixin.clickable}\n`;\n\nexport const Options = styled.div`\n max-height: 200px;\n ${mixin.scrollableY};\n ${mixin.customScrollbar()};\n`;\n\nexport const Option = styled.div`\n padding: 8px 14px;\n word-break: break-word;\n cursor: pointer;\n &:last-of-type {\n margin-bottom: 8px;\n }\n &.jira-select-option-is-active {\n background: ${color.backgroundLightPrimary};\n }\n`;\n\nexport const OptionsNoResults = styled.div`\n padding: 5px 15px 15px;\n color: ${color.textLight};\n`;\n"
},
{
"path": "client/src/shared/components/Select/index.jsx",
"content": "import React, { useState, useRef } from 'react';\nimport PropTypes from 'prop-types';\n\nimport useOnOutsideClick from 'shared/hooks/onOutsideClick';\nimport { KeyCodes } from 'shared/constants/keyCodes';\nimport Icon from 'shared/components/Icon';\n\nimport Dropdown from './Dropdown';\nimport {\n StyledSelect,\n ValueContainer,\n ChevronIcon,\n Placeholder,\n ValueMulti,\n ValueMultiItem,\n AddMore,\n} from './Styles';\n\nconst propTypes = {\n className: PropTypes.string,\n variant: PropTypes.oneOf(['normal', 'empty']),\n dropdownWidth: PropTypes.number,\n name: PropTypes.string,\n value: PropTypes.oneOfType([PropTypes.array, PropTypes.string, PropTypes.number]),\n defaultValue: PropTypes.any,\n placeholder: PropTypes.string,\n invalid: PropTypes.bool,\n options: PropTypes.array.isRequired,\n onChange: PropTypes.func.isRequired,\n onCreate: PropTypes.func,\n isMulti: PropTypes.bool,\n withClearValue: PropTypes.bool,\n renderValue: PropTypes.func,\n renderOption: PropTypes.func,\n};\n\nconst defaultProps = {\n className: undefined,\n variant: 'normal',\n dropdownWidth: undefined,\n name: undefined,\n value: undefined,\n defaultValue: undefined,\n placeholder: 'Select',\n invalid: false,\n onCreate: undefined,\n isMulti: false,\n withClearValue: true,\n renderValue: undefined,\n renderOption: undefined,\n};\n\nconst Select = ({\n className,\n variant,\n dropdownWidth,\n name,\n value: propsValue,\n defaultValue,\n placeholder,\n invalid,\n options,\n onChange,\n onCreate,\n isMulti,\n withClearValue,\n renderValue: propsRenderValue,\n renderOption: propsRenderOption,\n}) => {\n const [stateValue, setStateValue] = useState(defaultValue || (isMulti ? [] : null));\n const [isDropdownOpen, setDropdownOpen] = useState(false);\n const [searchValue, setSearchValue] = useState('');\n\n const isControlled = propsValue !== undefined;\n const value = isControlled ? propsValue : stateValue;\n\n const $selectRef = useRef();\n const $inputRef = useRef();\n\n const activateDropdown = () => {\n if (isDropdownOpen) {\n $inputRef.current.focus();\n } else {\n setDropdownOpen(true);\n }\n };\n\n const deactivateDropdown = () => {\n setDropdownOpen(false);\n setSearchValue('');\n $selectRef.current.focus();\n };\n\n useOnOutsideClick($selectRef, isDropdownOpen, deactivateDropdown);\n\n const preserveValueType = newValue => {\n const areOptionValuesNumbers = options.some(option => typeof option.value === 'number');\n\n if (areOptionValuesNumbers) {\n if (isMulti) {\n return newValue.map(Number);\n }\n if (newValue) {\n return Number(newValue);\n }\n }\n return newValue;\n };\n\n const handleChange = newValue => {\n if (!isControlled) {\n setStateValue(preserveValueType(newValue));\n }\n onChange(preserveValueType(newValue));\n };\n\n const removeOptionValue = optionValue => {\n handleChange(value.filter(val => val !== optionValue));\n };\n\n const handleFocusedSelectKeydown = event => {\n if (isDropdownOpen) return;\n\n if (event.keyCode === KeyCodes.ENTER) {\n event.preventDefault();\n }\n if (event.keyCode !== KeyCodes.ESCAPE && event.keyCode !== KeyCodes.TAB && !event.shiftKey) {\n setDropdownOpen(true);\n }\n };\n\n const getOption = optionValue => options.find(option => option.value === optionValue);\n const getOptionLabel = optionValue => (getOption(optionValue) || { label: '' }).label;\n\n const isValueEmpty = isMulti ? !value.length : !getOption(value);\n\n return (\n \n \n {isValueEmpty && {placeholder} }\n\n {!isValueEmpty && !isMulti && propsRenderValue\n ? propsRenderValue({ value })\n : getOptionLabel(value)}\n\n {!isValueEmpty && isMulti && (\n \n {value.map(optionValue =>\n propsRenderValue ? (\n propsRenderValue({\n value: optionValue,\n removeOptionValue: () => removeOptionValue(optionValue),\n })\n ) : (\n removeOptionValue(optionValue)}>\n {getOptionLabel(optionValue)}\n \n ),\n )}\n \n \n \n )}\n\n {(!isMulti || isValueEmpty) && variant !== 'empty' && (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n);\n\nSpinner.propTypes = propTypes;\nSpinner.defaultProps = defaultProps;\n\nexport default Spinner;\n"
},
{
"path": "client/src/shared/components/TextEditedContent/Styles.js",
"content": "import styled from 'styled-components';\n\nimport { font } from 'shared/utils/styles';\n\nexport const Content = styled.div`\n padding: 0 !important;\n ${font.size(15)}\n ${font.regular}\n`;\n"
},
{
"path": "client/src/shared/components/TextEditedContent/index.jsx",
"content": "/* eslint-disable react/no-danger */\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport 'quill/dist/quill.snow.css';\n\nimport { Content } from './Styles';\n\nconst propTypes = {\n content: PropTypes.string.isRequired,\n};\n\nconst TextEditedContent = ({ content, ...otherProps }) => (\n \n
\n);\n\nTextEditedContent.propTypes = propTypes;\n\nexport default TextEditedContent;\n"
},
{
"path": "client/src/shared/components/TextEditor/Styles.js",
"content": "import styled from 'styled-components';\n\nimport { color, font } from 'shared/utils/styles';\n\nexport const EditorCont = styled.div`\n .ql-toolbar.ql-snow {\n border-radius: 4px 4px 0 0;\n border: 1px solid ${color.borderLightest};\n border-bottom: none;\n }\n .ql-container.ql-snow {\n border-radius: 0 0 4px 4px;\n border: 1px solid ${color.borderLightest};\n border-top: none;\n color: ${color.textDarkest};\n ${font.size(15)}\n ${font.regular}\n }\n .ql-editor {\n min-height: 110px;\n }\n`;\n"
},
{
"path": "client/src/shared/components/TextEditor/index.jsx",
"content": "import React, { useLayoutEffect, useRef } from 'react';\nimport PropTypes from 'prop-types';\nimport Quill from 'quill';\nimport 'quill/dist/quill.snow.css';\n\nimport { EditorCont } from './Styles';\n\nconst propTypes = {\n className: PropTypes.string,\n placeholder: PropTypes.string,\n defaultValue: PropTypes.string,\n value: PropTypes.string,\n onChange: PropTypes.func,\n getEditor: PropTypes.func,\n};\n\nconst defaultProps = {\n className: undefined,\n placeholder: undefined,\n defaultValue: undefined,\n value: undefined,\n onChange: () => {},\n getEditor: () => {},\n};\n\nconst TextEditor = ({\n className,\n placeholder,\n defaultValue,\n // we're not really feeding new value to quill instance on each render because it's too\n // expensive, but we're still accepting 'value' prop as alias for defaultValue because\n // other components like feed their children with data via the 'value' prop\n value: alsoDefaultValue,\n onChange,\n getEditor,\n}) => {\n const $editorContRef = useRef();\n const $editorRef = useRef();\n const initialValueRef = useRef(defaultValue || alsoDefaultValue || '');\n\n useLayoutEffect(() => {\n let quill = new Quill($editorRef.current, { placeholder, ...quillConfig });\n\n const insertInitialValue = () => {\n quill.clipboard.dangerouslyPasteHTML(0, initialValueRef.current);\n quill.blur();\n };\n const handleContentsChange = () => {\n onChange(getHTMLValue());\n };\n const getHTMLValue = () => $editorContRef.current.querySelector('.ql-editor').innerHTML;\n\n insertInitialValue();\n getEditor({ getValue: getHTMLValue });\n\n quill.on('text-change', handleContentsChange);\n return () => {\n quill.off('text-change', handleContentsChange);\n quill = null;\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n return (\n \n
\n \n );\n};\n\nconst quillConfig = {\n theme: 'snow',\n modules: {\n toolbar: [\n ['bold', 'italic', 'underline', 'strike'],\n ['blockquote', 'code-block'],\n [{ list: 'ordered' }, { list: 'bullet' }],\n [{ header: [1, 2, 3, 4, 5, 6, false] }],\n [{ color: [] }, { background: [] }],\n ['clean'],\n ],\n },\n};\n\nTextEditor.propTypes = propTypes;\nTextEditor.defaultProps = defaultProps;\n\nexport default TextEditor;\n"
},
{
"path": "client/src/shared/components/Textarea/Styles.js",
"content": "import styled, { css } from 'styled-components';\n\nimport { color, font } from 'shared/utils/styles';\n\nexport const StyledTextarea = styled.div`\n display: inline-block;\n width: 100%;\n textarea {\n overflow-y: hidden;\n width: 100%;\n padding: 8px 12px 9px;\n border-radius: 3px;\n border: 1px solid ${color.borderLightest};\n color: ${color.textDarkest};\n background: ${color.backgroundLightest};\n ${font.regular}\n ${font.size(15)}\n &:focus {\n background: #fff;\n border: 1px solid ${color.borderInputFocus};\n box-shadow: 0 0 0 1px ${color.borderInputFocus};\n }\n ${props =>\n props.invalid &&\n css`\n &,\n &:focus {\n border: 1px solid ${color.danger};\n }\n `}\n }\n`;\n"
},
{
"path": "client/src/shared/components/Textarea/index.jsx",
"content": "import React, { forwardRef } from 'react';\nimport PropTypes from 'prop-types';\nimport TextareaAutoSize from 'react-textarea-autosize';\n\nimport { StyledTextarea } from './Styles';\n\nconst propTypes = {\n className: PropTypes.string,\n invalid: PropTypes.bool,\n minRows: PropTypes.number,\n value: PropTypes.string,\n onChange: PropTypes.func,\n};\n\nconst defaultProps = {\n className: undefined,\n invalid: false,\n minRows: 2,\n value: undefined,\n onChange: () => {},\n};\n\nconst Textarea = forwardRef(({ className, invalid, onChange, ...textareaProps }, ref) => (\n \n onChange(event.target.value, event)}\n inputRef={ref || undefined}\n />\n \n));\n\nTextarea.propTypes = propTypes;\nTextarea.defaultProps = defaultProps;\n\nexport default Textarea;\n"
},
{
"path": "client/src/shared/components/Tooltip/Styles.js",
"content": "import styled from 'styled-components';\n\nimport { zIndexValues, mixin } from 'shared/utils/styles';\n\nexport const StyledTooltip = styled.div`\n z-index: ${zIndexValues.modal + 1};\n position: fixed;\n width: ${props => props.width}px;\n border-radius: 3px;\n background: #fff;\n ${mixin.hardwareAccelerate}\n ${mixin.boxShadowDropdown}\n`;\n"
},
{
"path": "client/src/shared/components/Tooltip/index.jsx",
"content": "import React, { Fragment, useState, useRef, useLayoutEffect } from 'react';\nimport ReactDOM from 'react-dom';\nimport PropTypes from 'prop-types';\n\nimport useOnOutsideClick from 'shared/hooks/onOutsideClick';\n\nimport { StyledTooltip } from './Styles';\n\nconst propTypes = {\n className: PropTypes.string,\n placement: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),\n offset: PropTypes.shape({\n top: PropTypes.number,\n left: PropTypes.number,\n }),\n width: PropTypes.number.isRequired,\n renderLink: PropTypes.func.isRequired,\n renderContent: PropTypes.func.isRequired,\n};\n\nconst defaultProps = {\n className: undefined,\n placement: 'bottom',\n offset: {\n top: 0,\n left: 0,\n },\n};\n\nconst Tooltip = ({ className, placement, offset, width, renderLink, renderContent }) => {\n const [isOpen, setIsOpen] = useState(false);\n\n const $linkRef = useRef();\n const $tooltipRef = useRef();\n\n const openTooltip = () => setIsOpen(true);\n const closeTooltip = () => setIsOpen(false);\n\n useOnOutsideClick([$tooltipRef, $linkRef], isOpen, closeTooltip);\n\n useLayoutEffect(() => {\n const setTooltipPosition = () => {\n const { top, left } = calcPosition(offset, placement, $tooltipRef, $linkRef);\n $tooltipRef.current.style.top = `${top}px`;\n $tooltipRef.current.style.left = `${left}px`;\n };\n\n if (isOpen) {\n setTooltipPosition();\n window.addEventListener('resize', setTooltipPosition);\n window.addEventListener('scroll', setTooltipPosition);\n }\n\n return () => {\n window.removeEventListener('resize', setTooltipPosition);\n window.removeEventListener('scroll', setTooltipPosition);\n };\n }, [isOpen, offset, placement]);\n\n return (\n \n {renderLink({ ref: $linkRef, onClick: isOpen ? closeTooltip : openTooltip })}\n\n {isOpen &&\n ReactDOM.createPortal(\n \n {renderContent({ close: closeTooltip })}\n ,\n $root,\n )}\n \n );\n};\n\nconst calcPosition = (offset, placement, $tooltipRef, $linkRef) => {\n const margin = 10;\n const finalOffset = { ...defaultProps.offset, ...offset };\n\n const tooltipRect = $tooltipRef.current.getBoundingClientRect();\n const linkRect = $linkRef.current.getBoundingClientRect();\n\n const linkCenterY = linkRect.top + linkRect.height / 2;\n const linkCenterX = linkRect.left + linkRect.width / 2;\n\n const placements = {\n top: {\n top: linkRect.top - margin - tooltipRect.height,\n left: linkCenterX - tooltipRect.width / 2,\n },\n right: {\n top: linkCenterY - tooltipRect.height / 2,\n left: linkRect.right + margin,\n },\n bottom: {\n top: linkRect.bottom + margin,\n left: linkCenterX - tooltipRect.width / 2,\n },\n left: {\n top: linkCenterY - tooltipRect.height / 2,\n left: linkRect.left - margin - tooltipRect.width,\n },\n };\n return {\n top: placements[placement].top + finalOffset.top,\n left: placements[placement].left + finalOffset.left,\n };\n};\n\nconst $root = document.getElementById('root');\n\nTooltip.propTypes = propTypes;\nTooltip.defaultProps = defaultProps;\n\nexport default Tooltip;\n"
},
{
"path": "client/src/shared/components/index.js",
"content": "export { default as AboutTooltip } from './AboutTooltip';\nexport { default as Avatar } from './Avatar';\nexport { default as Button } from './Button';\nexport { default as Breadcrumbs } from './Breadcrumbs';\nexport { default as ConfirmModal } from './ConfirmModal';\nexport { default as CopyLinkButton } from './CopyLinkButton';\nexport { default as DatePicker } from './DatePicker';\nexport { default as Form } from './Form';\nexport { default as Icon } from './Icon';\nexport { default as Input } from './Input';\nexport { default as InputDebounced } from './InputDebounced';\nexport { default as IssueTypeIcon } from './IssueTypeIcon';\nexport { default as IssuePriorityIcon } from './IssuePriorityIcon';\nexport { default as Logo } from './Logo';\nexport { default as Modal } from './Modal';\nexport { default as PageError } from './PageError';\nexport { default as PageLoader } from './PageLoader';\nexport { default as ProjectAvatar } from './ProjectAvatar';\nexport { default as Select } from './Select';\nexport { default as Spinner } from './Spinner';\nexport { default as Textarea } from './Textarea';\nexport { default as TextEditedContent } from './TextEditedContent';\nexport { default as TextEditor } from './TextEditor';\nexport { default as Tooltip } from './Tooltip';\n"
},
{
"path": "client/src/shared/constants/issues.js",
"content": "export const IssueType = {\n TASK: 'task',\n BUG: 'bug',\n STORY: 'story',\n};\n\nexport const IssueStatus = {\n BACKLOG: 'backlog',\n SELECTED: 'selected',\n INPROGRESS: 'inprogress',\n DONE: 'done',\n};\n\nexport const IssuePriority = {\n HIGHEST: '5',\n HIGH: '4',\n MEDIUM: '3',\n LOW: '2',\n LOWEST: '1',\n};\n\nexport const IssueTypeCopy = {\n [IssueType.TASK]: 'Task',\n [IssueType.BUG]: 'Bug',\n [IssueType.STORY]: 'Story',\n};\n\nexport const IssueStatusCopy = {\n [IssueStatus.BACKLOG]: 'Backlog',\n [IssueStatus.SELECTED]: 'Selected for development',\n [IssueStatus.INPROGRESS]: 'In progress',\n [IssueStatus.DONE]: 'Done',\n};\n\nexport const IssuePriorityCopy = {\n [IssuePriority.HIGHEST]: 'Highest',\n [IssuePriority.HIGH]: 'High',\n [IssuePriority.MEDIUM]: 'Medium',\n [IssuePriority.LOW]: 'Low',\n [IssuePriority.LOWEST]: 'Lowest',\n};\n"
},
{
"path": "client/src/shared/constants/keyCodes.js",
"content": "export const KeyCodes = {\n TAB: 9,\n ENTER: 13,\n ESCAPE: 27,\n SPACE: 32,\n ARROW_LEFT: 37,\n ARROW_UP: 38,\n ARROW_RIGHT: 39,\n ARROW_DOWN: 40,\n M: 77,\n};\n"
},
{
"path": "client/src/shared/constants/projects.js",
"content": "export const ProjectCategory = {\n SOFTWARE: 'software',\n MARKETING: 'marketing',\n BUSINESS: 'business',\n};\n\nexport const ProjectCategoryCopy = {\n [ProjectCategory.SOFTWARE]: 'Software',\n [ProjectCategory.MARKETING]: 'Marketing',\n [ProjectCategory.BUSINESS]: 'Business',\n};\n"
},
{
"path": "client/src/shared/hooks/api/index.js",
"content": "import useQuery from './query';\nimport useMutation from './mutation';\n\n/* eslint-disable react-hooks/rules-of-hooks */\nexport default {\n get: (...args) => useQuery(...args),\n post: (...args) => useMutation('post', ...args),\n put: (...args) => useMutation('put', ...args),\n patch: (...args) => useMutation('patch', ...args),\n delete: (...args) => useMutation('delete', ...args),\n};\n"
},
{
"path": "client/src/shared/hooks/api/mutation.js",
"content": "import { useCallback } from 'react';\n\nimport api from 'shared/utils/api';\nimport useMergeState from 'shared/hooks/mergeState';\n\nconst useMutation = (method, url) => {\n const [state, mergeState] = useMergeState({\n data: null,\n error: null,\n isWorking: false,\n });\n\n const makeRequest = useCallback(\n (variables = {}) =>\n new Promise((resolve, reject) => {\n mergeState({ isWorking: true });\n\n api[method](url, variables).then(\n data => {\n resolve(data);\n mergeState({ data, error: null, isWorking: false });\n },\n error => {\n reject(error);\n mergeState({ error, data: null, isWorking: false });\n },\n );\n }),\n [method, url, mergeState],\n );\n\n return [\n {\n ...state,\n [isWorkingAlias[method]]: state.isWorking,\n },\n makeRequest,\n ];\n};\n\nconst isWorkingAlias = {\n post: 'isCreating',\n put: 'isUpdating',\n patch: 'isUpdating',\n delete: 'isDeleting',\n};\n\nexport default useMutation;\n"
},
{
"path": "client/src/shared/hooks/api/query.js",
"content": "import { useRef, useCallback, useEffect } from 'react';\nimport { isEqual } from 'lodash';\n\nimport api from 'shared/utils/api';\nimport useMergeState from 'shared/hooks/mergeState';\nimport useDeepCompareMemoize from 'shared/hooks/deepCompareMemoize';\n\nconst useQuery = (url, propsVariables = {}, options = {}) => {\n const { lazy = false, cachePolicy = 'cache-first' } = options;\n\n const wasCalled = useRef(false);\n const propsVariablesMemoized = useDeepCompareMemoize(propsVariables);\n\n const isSleeping = lazy && !wasCalled.current;\n const isCacheAvailable = cache[url] && isEqual(cache[url].apiVariables, propsVariables);\n const canUseCache = isCacheAvailable && cachePolicy !== 'no-cache' && !wasCalled.current;\n\n const [state, mergeState] = useMergeState({\n data: canUseCache ? cache[url].data : null,\n error: null,\n isLoading: !lazy && !canUseCache,\n variables: {},\n });\n\n const makeRequest = useCallback(\n newVariables => {\n const variables = { ...state.variables, ...(newVariables || {}) };\n const apiVariables = { ...propsVariablesMemoized, ...variables };\n\n const skipLoading = canUseCache && cachePolicy === 'cache-first';\n\n if (!skipLoading) {\n mergeState({ isLoading: true, variables });\n } else if (newVariables) {\n mergeState({ variables });\n }\n\n api.get(url, apiVariables).then(\n data => {\n cache[url] = { data, apiVariables };\n mergeState({ data, error: null, isLoading: false });\n },\n error => {\n mergeState({ error, data: null, isLoading: false });\n },\n );\n\n wasCalled.current = true;\n },\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [propsVariablesMemoized],\n );\n\n useEffect(() => {\n if (isSleeping) return;\n if (canUseCache && cachePolicy === 'cache-only') return;\n\n makeRequest();\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [makeRequest]);\n\n const setLocalData = useCallback(\n getUpdatedData =>\n mergeState(({ data }) => {\n const updatedData = getUpdatedData(data);\n cache[url] = { ...(cache[url] || {}), data: updatedData };\n return { data: updatedData };\n }),\n [mergeState, url],\n );\n\n return [\n {\n ...state,\n variables: { ...propsVariablesMemoized, ...state.variables },\n setLocalData,\n },\n makeRequest,\n ];\n};\n\nconst cache = {};\n\nexport default useQuery;\n"
},
{
"path": "client/src/shared/hooks/currentUser.js",
"content": "import { get } from 'lodash';\n\nimport useApi from 'shared/hooks/api';\n\nconst useCurrentUser = ({ cachePolicy = 'cache-only' } = {}) => {\n const [{ data }] = useApi.get('/currentUser', {}, { cachePolicy });\n\n return {\n currentUser: get(data, 'currentUser'),\n currentUserId: get(data, 'currentUser.id'),\n };\n};\n\nexport default useCurrentUser;\n"
},
{
"path": "client/src/shared/hooks/deepCompareMemoize.js",
"content": "import { useRef } from 'react';\nimport { isEqual } from 'lodash';\n\nconst useDeepCompareMemoize = value => {\n const valueRef = useRef();\n\n if (!isEqual(value, valueRef.current)) {\n valueRef.current = value;\n }\n return valueRef.current;\n};\n\nexport default useDeepCompareMemoize;\n"
},
{
"path": "client/src/shared/hooks/mergeState.js",
"content": "import { useState, useCallback } from 'react';\nimport { isFunction } from 'lodash';\n\nconst useMergeState = initialState => {\n const [state, setState] = useState(initialState || {});\n\n const mergeState = useCallback(newState => {\n if (isFunction(newState)) {\n setState(currentState => ({ ...currentState, ...newState(currentState) }));\n } else {\n setState(currentState => ({ ...currentState, ...newState }));\n }\n }, []);\n\n return [state, mergeState];\n};\n\nexport default useMergeState;\n"
},
{
"path": "client/src/shared/hooks/onEscapeKeyDown.js",
"content": "import { useEffect } from 'react';\n\nimport { KeyCodes } from 'shared/constants/keyCodes';\n\nconst useOnEscapeKeyDown = (isListening, onEscapeKeyDown) => {\n useEffect(() => {\n const handleKeyDown = event => {\n if (event.keyCode === KeyCodes.ESCAPE) {\n onEscapeKeyDown();\n }\n };\n\n if (isListening) {\n document.addEventListener('keydown', handleKeyDown);\n }\n return () => {\n document.removeEventListener('keydown', handleKeyDown);\n };\n }, [isListening, onEscapeKeyDown]);\n};\n\nexport default useOnEscapeKeyDown;\n"
},
{
"path": "client/src/shared/hooks/onOutsideClick.js",
"content": "import { useEffect, useRef } from 'react';\n\nimport useDeepCompareMemoize from 'shared/hooks/deepCompareMemoize';\n\nconst useOnOutsideClick = (\n $ignoredElementRefs,\n isListening,\n onOutsideClick,\n $listeningElementRef,\n) => {\n const $mouseDownTargetRef = useRef();\n const $ignoredElementRefsMemoized = useDeepCompareMemoize([$ignoredElementRefs].flat());\n\n useEffect(() => {\n const handleMouseDown = event => {\n $mouseDownTargetRef.current = event.target;\n };\n\n const handleMouseUp = event => {\n const isAnyIgnoredElementAncestorOfTarget = $ignoredElementRefsMemoized.some(\n $elementRef =>\n $elementRef.current.contains($mouseDownTargetRef.current) ||\n $elementRef.current.contains(event.target),\n );\n if (event.button === 0 && !isAnyIgnoredElementAncestorOfTarget) {\n onOutsideClick();\n }\n };\n\n const $listeningElement = ($listeningElementRef || {}).current || document;\n\n if (isListening) {\n $listeningElement.addEventListener('mousedown', handleMouseDown);\n $listeningElement.addEventListener('mouseup', handleMouseUp);\n }\n return () => {\n $listeningElement.removeEventListener('mousedown', handleMouseDown);\n $listeningElement.removeEventListener('mouseup', handleMouseUp);\n };\n }, [$ignoredElementRefsMemoized, $listeningElementRef, isListening, onOutsideClick]);\n};\n\nexport default useOnOutsideClick;\n"
},
{
"path": "client/src/shared/utils/api.js",
"content": "import axios from 'axios';\n\nimport history from 'browserHistory';\nimport toast from 'shared/utils/toast';\nimport { objectToQueryString } from 'shared/utils/url';\nimport { getStoredAuthToken, removeStoredAuthToken } from 'shared/utils/authToken';\n\nconst defaults = {\n baseURL: process.env.API_URL || 'http://localhost:3000',\n headers: () => ({\n 'Content-Type': 'application/json',\n Authorization: getStoredAuthToken() ? `Bearer ${getStoredAuthToken()}` : undefined,\n }),\n error: {\n code: 'INTERNAL_ERROR',\n message: 'Something went wrong. Please check your internet connection or contact our support.',\n status: 503,\n data: {},\n },\n};\n\nconst api = (method, url, variables) =>\n new Promise((resolve, reject) => {\n axios({\n url: `${defaults.baseURL}${url}`,\n method,\n headers: defaults.headers(),\n params: method === 'get' ? variables : undefined,\n data: method !== 'get' ? variables : undefined,\n paramsSerializer: objectToQueryString,\n }).then(\n response => {\n resolve(response.data);\n },\n error => {\n if (error.response) {\n if (error.response.data.error.code === 'INVALID_TOKEN') {\n removeStoredAuthToken();\n history.push('/authenticate');\n } else {\n reject(error.response.data.error);\n }\n } else {\n reject(defaults.error);\n }\n },\n );\n });\n\nconst optimisticUpdate = async (url, { updatedFields, currentFields, setLocalData }) => {\n try {\n setLocalData(updatedFields);\n await api('put', url, updatedFields);\n } catch (error) {\n setLocalData(currentFields);\n toast.error(error);\n }\n};\n\nexport default {\n get: (...args) => api('get', ...args),\n post: (...args) => api('post', ...args),\n put: (...args) => api('put', ...args),\n patch: (...args) => api('patch', ...args),\n delete: (...args) => api('delete', ...args),\n optimisticUpdate,\n};\n"
},
{
"path": "client/src/shared/utils/authToken.js",
"content": "export const getStoredAuthToken = () => localStorage.getItem('authToken');\n\nexport const storeAuthToken = token => localStorage.setItem('authToken', token);\n\nexport const removeStoredAuthToken = () => localStorage.removeItem('authToken');\n"
},
{
"path": "client/src/shared/utils/browser.js",
"content": "export const getTextContentsFromHtmlString = html => {\n const el = document.createElement('div');\n el.innerHTML = html;\n return el.textContent;\n};\n\nexport const copyToClipboard = value => {\n const $textarea = document.createElement('textarea');\n $textarea.value = value;\n document.body.appendChild($textarea);\n $textarea.select();\n document.execCommand('copy');\n document.body.removeChild($textarea);\n};\n\nexport const isFocusedElementEditable = () =>\n !!document.activeElement.getAttribute('contenteditable') ||\n ['TEXTAREA', 'INPUT'].includes(document.activeElement.tagName);\n"
},
{
"path": "client/src/shared/utils/dateTime.js",
"content": "import moment from 'moment';\n\nexport const formatDate = (date, format = 'MMMM D, YYYY') =>\n date ? moment(date).format(format) : date;\n\nexport const formatDateTime = (date, format = 'MMMM D, YYYY, h:mm A') =>\n date ? moment(date).format(format) : date;\n\nexport const formatDateTimeForAPI = date =>\n date\n ? moment(date)\n .utc()\n .format()\n : date;\n\nexport const formatDateTimeConversational = date => (date ? moment(date).fromNow() : date);\n"
},
{
"path": "client/src/shared/utils/javascript.js",
"content": "export const moveItemWithinArray = (arr, item, newIndex) => {\n const arrClone = [...arr];\n const oldIndex = arrClone.indexOf(item);\n arrClone.splice(newIndex, 0, arrClone.splice(oldIndex, 1)[0]);\n return arrClone;\n};\n\nexport const insertItemIntoArray = (arr, item, index) => {\n const arrClone = [...arr];\n arrClone.splice(index, 0, item);\n return arrClone;\n};\n\nexport const updateArrayItemById = (arr, itemId, fields) => {\n const arrClone = [...arr];\n const item = arrClone.find(({ id }) => id === itemId);\n if (item) {\n const itemIndex = arrClone.indexOf(item);\n arrClone.splice(itemIndex, 1, { ...item, ...fields });\n }\n return arrClone;\n};\n\nexport const sortByNewest = (items, sortField) =>\n items.sort((a, b) => -a[sortField].localeCompare(b[sortField]));\n"
},
{
"path": "client/src/shared/utils/queryParamModal.js",
"content": "import history from 'browserHistory';\nimport { queryStringToObject, addToQueryString, omitFromQueryString } from 'shared/utils/url';\n\nconst open = param =>\n history.push({\n pathname: history.location.pathname,\n search: addToQueryString(history.location.search, { [`modal-${param}`]: true }),\n });\n\nconst close = param =>\n history.push({\n pathname: history.location.pathname,\n search: omitFromQueryString(history.location.search, [`modal-${param}`]),\n });\n\nconst isOpen = param => !!queryStringToObject(history.location.search)[`modal-${param}`];\n\nexport const createQueryParamModalHelpers = param => ({\n open: () => open(param),\n close: () => close(param),\n isOpen: () => isOpen(param),\n});\n"
},
{
"path": "client/src/shared/utils/styles.js",
"content": "import { css } from 'styled-components';\nimport Color from 'color';\n\nimport { IssueType, IssueStatus, IssuePriority } from 'shared/constants/issues';\n\nexport const color = {\n primary: '#0052cc', // Blue\n success: '#0B875B', // green\n danger: '#E13C3C', // red\n warning: '#F89C1C', // orange\n secondary: '#F4F5F7', // light grey\n\n textDarkest: '#172b4d',\n textDark: '#42526E',\n textMedium: '#5E6C84',\n textLight: '#8993a4',\n textLink: '#0052cc',\n\n backgroundDarkPrimary: '#0747A6',\n backgroundMedium: '#dfe1e6',\n backgroundLight: '#ebecf0',\n backgroundLightest: '#F4F5F7',\n backgroundLightPrimary: '#D2E5FE',\n backgroundLightSuccess: '#E4FCEF',\n\n borderLightest: '#dfe1e6',\n borderLight: '#C1C7D0',\n borderInputFocus: '#4c9aff',\n};\n\nexport const issueTypeColors = {\n [IssueType.TASK]: '#4FADE6', // blue\n [IssueType.BUG]: '#E44D42', // red\n [IssueType.STORY]: '#65BA43', // green\n};\n\nexport const issuePriorityColors = {\n [IssuePriority.HIGHEST]: '#CD1317', // red\n [IssuePriority.HIGH]: '#E9494A', // orange\n [IssuePriority.MEDIUM]: '#E97F33', // orange\n [IssuePriority.LOW]: '#2D8738', // green\n [IssuePriority.LOWEST]: '#57A55A', // green\n};\n\nexport const issueStatusColors = {\n [IssueStatus.BACKLOG]: color.textDark,\n [IssueStatus.INPROGRESS]: '#fff',\n [IssueStatus.SELECTED]: color.textDark,\n [IssueStatus.DONE]: '#fff',\n};\n\nexport const issueStatusBackgroundColors = {\n [IssueStatus.BACKLOG]: color.backgroundMedium,\n [IssueStatus.INPROGRESS]: color.primary,\n [IssueStatus.SELECTED]: color.backgroundMedium,\n [IssueStatus.DONE]: color.success,\n};\n\nexport const sizes = {\n appNavBarLeftWidth: 64,\n secondarySideBarWidth: 230,\n minViewportWidth: 1000,\n};\n\nexport const zIndexValues = {\n modal: 1000,\n dropdown: 101,\n navLeft: 100,\n};\n\nexport const font = {\n regular: 'font-family: \"CircularStdBook\"; font-weight: normal;',\n medium: 'font-family: \"CircularStdMedium\"; font-weight: normal;',\n bold: 'font-family: \"CircularStdBold\"; font-weight: normal;',\n black: 'font-family: \"CircularStdBlack\"; font-weight: normal;',\n size: size => `font-size: ${size}px;`,\n};\n\nexport const mixin = {\n darken: (colorValue, amount) =>\n Color(colorValue)\n .darken(amount)\n .string(),\n lighten: (colorValue, amount) =>\n Color(colorValue)\n .lighten(amount)\n .string(),\n rgba: (colorValue, opacity) =>\n Color(colorValue)\n .alpha(opacity)\n .string(),\n boxShadowMedium: css`\n box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.1);\n `,\n boxShadowDropdown: css`\n box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.31) 0px 0px 1px;\n `,\n truncateText: css`\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n `,\n clickable: css`\n cursor: pointer;\n user-select: none;\n `,\n hardwareAccelerate: css`\n transform: translateZ(0);\n `,\n cover: css`\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n `,\n placeholderColor: colorValue => css`\n ::-webkit-input-placeholder {\n color: ${colorValue} !important;\n opacity: 1 !important;\n }\n :-moz-placeholder {\n color: ${colorValue} !important;\n opacity: 1 !important;\n }\n ::-moz-placeholder {\n color: ${colorValue} !important;\n opacity: 1 !important;\n }\n :-ms-input-placeholder {\n color: ${colorValue} !important;\n opacity: 1 !important;\n }\n `,\n scrollableY: css`\n overflow-x: hidden;\n overflow-y: auto;\n -webkit-overflow-scrolling: touch;\n `,\n customScrollbar: ({ width = 8, background = color.backgroundMedium } = {}) => css`\n &::-webkit-scrollbar {\n width: ${width}px;\n }\n &::-webkit-scrollbar-track {\n background: none;\n }\n &::-webkit-scrollbar-thumb {\n border-radius: 99px;\n background: ${background};\n }\n `,\n backgroundImage: imageURL => css`\n background-image: url(\"${imageURL}\");\n background-position: 50% 50%;\n background-repeat: no-repeat;\n background-size: cover;\n background-color: ${color.backgroundLight};\n `,\n link: (colorValue = color.textLink) => css`\n cursor: pointer;\n color: ${colorValue};\n ${font.medium}\n &:hover, &:visited, &:active {\n color: ${colorValue};\n }\n &:hover {\n text-decoration: underline;\n }\n `,\n tag: (background = color.backgroundMedium, colorValue = color.textDarkest) => css`\n display: inline-flex;\n align-items: center;\n height: 24px;\n padding: 0 8px;\n border-radius: 4px;\n cursor: pointer;\n user-select: none;\n color: ${colorValue};\n background: ${background};\n ${font.bold}\n ${font.size(12)}\n i {\n margin-left: 4px;\n }\n `,\n};\n"
},
{
"path": "client/src/shared/utils/toast.js",
"content": "import pubsub from 'sweet-pubsub';\nimport { get } from 'lodash';\n\nconst show = toast => pubsub.emit('toast', toast);\n\nconst success = title => show({ title });\n\nconst error = err => {\n show({\n type: 'danger',\n title: 'Error',\n message: get(err, 'message', err),\n duration: 0,\n });\n};\n\nexport default { show, error, success };\n"
},
{
"path": "client/src/shared/utils/url.js",
"content": "import queryString from 'query-string';\nimport { omit } from 'lodash';\n\nexport const queryStringToObject = (str, options = {}) =>\n queryString.parse(str, {\n arrayFormat: 'bracket',\n ...options,\n });\n\nexport const objectToQueryString = (obj, options = {}) =>\n queryString.stringify(obj, {\n arrayFormat: 'bracket',\n ...options,\n });\n\nexport const omitFromQueryString = (str, keys) =>\n objectToQueryString(omit(queryStringToObject(str), keys));\n\nexport const addToQueryString = (str, fields) =>\n objectToQueryString({\n ...queryStringToObject(str),\n ...fields,\n });\n"
},
{
"path": "client/src/shared/utils/validation.js",
"content": "export const is = {\n match: (testFn, message = '') => (value, fieldValues) => !testFn(value, fieldValues) && message,\n\n required: () => value => isNilOrEmptyString(value) && 'This field is required',\n\n minLength: min => value => !!value && value.length < min && `Must be at least ${min} characters`,\n\n maxLength: max => value => !!value && value.length > max && `Must be at most ${max} characters`,\n\n notEmptyArray: () => value =>\n Array.isArray(value) && value.length === 0 && 'Please add at least one item',\n\n email: () => value => !!value && !/.+@.+\\..+/.test(value) && 'Must be a valid email',\n\n url: () => value =>\n !!value &&\n // eslint-disable-next-line no-useless-escape\n !/^(?:http(s)?:\\/\\/)?[\\w.-]+(?:\\.[\\w\\.-]+)+[\\w\\-\\._~:/?#[\\]@!\\$&'\\(\\)\\*\\+,;=.]+$/.test(value) &&\n 'Must be a valid URL',\n};\n\nconst isNilOrEmptyString = value => value === undefined || value === null || value === '';\n\nexport const generateErrors = (fieldValues, fieldValidators) => {\n const errors = {};\n\n Object.entries(fieldValidators).forEach(([fieldName, validators]) => {\n [validators].flat().forEach(validator => {\n const errorMessage = validator(fieldValues[fieldName], fieldValues);\n if (errorMessage && !errors[fieldName]) {\n errors[fieldName] = errorMessage;\n }\n });\n });\n return errors;\n};\n"
},
{
"path": "client/webpack.config.js",
"content": "const path = require('path');\nconst webpack = require('webpack');\nconst HtmlWebpackPlugin = require('html-webpack-plugin');\n\nmodule.exports = {\n mode: 'development',\n entry: path.join(__dirname, 'src/index.jsx'),\n output: {\n filename: '[name].js',\n path: path.resolve(__dirname, 'dev'),\n publicPath: '/',\n },\n module: {\n rules: [\n {\n test: /\\.jsx?$/,\n exclude: /node_modules/,\n use: ['babel-loader'],\n },\n {\n test: /\\.css$/,\n use: ['style-loader', { loader: 'css-loader' }],\n },\n {\n test: /\\.(jpe?g|png|gif|woff2?|eot|ttf|otf|svg)$/,\n use: [\n {\n loader: 'url-loader',\n options: { limit: 15000 },\n },\n ],\n },\n ],\n },\n resolve: {\n // allows us to do absolute imports from \"src\"\n modules: [path.join(__dirname, 'src'), 'node_modules'],\n extensions: ['*', '.js', '.jsx'],\n },\n devtool: 'eval-source-map',\n devServer: {\n contentBase: path.join(__dirname, 'dev'),\n historyApiFallback: true,\n hot: true,\n },\n plugins: [\n new webpack.HotModuleReplacementPlugin(),\n new HtmlWebpackPlugin({\n template: path.join(__dirname, 'src/index.html'),\n favicon: path.join(__dirname, 'src/favicon.png'),\n }),\n ],\n};\n"
},
{
"path": "client/webpack.config.production.js",
"content": "const path = require('path');\nconst webpack = require('webpack');\nconst HtmlWebpackPlugin = require('html-webpack-plugin');\n\nmodule.exports = {\n mode: 'production',\n entry: {\n main: path.join(__dirname, 'src/index.jsx'),\n },\n output: {\n path: path.resolve(__dirname, 'build'),\n filename: '[name]-[hash].js',\n publicPath: '/',\n },\n module: {\n rules: [\n {\n test: /\\.jsx?$/,\n exclude: /node_modules/,\n use: ['babel-loader'],\n },\n {\n test: /\\.css$/,\n use: [\n 'style-loader',\n {\n loader: 'css-loader',\n options: { sourceMap: true },\n },\n ],\n },\n {\n test: /\\.(jpe?g|png|gif|svg)$/,\n use: [\n {\n loader: 'url-loader',\n options: { name: '[name]-[hash].[ext]', limit: 10000 },\n },\n ],\n },\n {\n test: /\\.(woff2?|eot|ttf|otf)$/,\n use: [\n {\n loader: 'file-loader',\n options: { name: '[name]-[hash].[ext]' },\n },\n ],\n },\n ],\n },\n resolve: {\n modules: [path.join(__dirname, 'src'), 'node_modules'],\n extensions: ['*', '.js', '.jsx', '.css'],\n },\n plugins: [\n new HtmlWebpackPlugin({\n template: path.join(__dirname, 'src/index.html'),\n favicon: path.join(__dirname, 'src/favicon.png'),\n }),\n new webpack.DefinePlugin({\n 'process.env': {\n NODE_ENV: JSON.stringify('production'),\n API_URL: JSON.stringify('https://jira-api.ivorreic.com'),\n },\n }),\n new webpack.IgnorePlugin(/^\\.\\/locale$/, /moment$/),\n ],\n};\n"
},
{
"path": "package.json",
"content": "{\n \"name\": \"jira_clone\",\n \"version\": \"1.0.0\",\n \"author\": \"Ivor Reic\",\n \"license\": \"MIT\",\n \"scripts\": {\n \"pre-commit\": \"cd api && npm run pre-commit && cd ../client && npm run pre-commit\",\n \"install-dependencies\": \"npm install && cd api && npm install && cd ../client && npm install\",\n \"build\": \"cd api && npm run build && cd ../client && npm run build\",\n \"start:production\": \"cd api && npm run start:production && cd ../client && npm run start:production\"\n },\n \"devDependencies\": {\n \"husky\": \"^4.0.0-beta.5\"\n },\n \"husky\": {\n \"hooks\": {\n \"pre-commit\": \"npm run pre-commit\"\n }\n },\n \"dependencies\": {}\n}\n"
}
] ![\"Jira](\"https://wac-cdn.atlassian.com/dam/jcr:6203a73b-f2a1-4d91-9587-bc4b7d822d6b/workflow_timeline_desktop-temporary.svg?cdnVersion=736\")
![\"Data](\"https://wac-cdn.atlassian.com/dam/jcr:4a1b934f-38b4-456e-b807-29e93935e00f/Server%20Cluster@2x.png?cdnVersion=736\")
![\"(tick)\"](\"https://confluence.atlassian.com/s/en_GB/7901/af536c7c6dffcc1d697b914b797aa7f2f306b4f8/_/images/icons/emoticons/check.svg\")
Keyboard shortcut: m