feat(monorepo): converted to Monorepo Arch

.gitignore

@@ -37,4 +37,7 @@ yarn-error.log*
 # Sentry Auth Token
 .sentryclirc
 
-.env
+.env
+
+/.next
+/node_modules

apps/web/.gitignore

@@ -0,0 +1,43 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel
+
+# Sentry Auth Token
+.sentryclirc
+
+.env
+
+/.next
+/node_modules

apps/web/next.config.mjs

@@ -0,0 +1,52 @@
+import { withSentryConfig } from '@sentry/nextjs'
+import withPWA from 'next-pwa'
+
+/** @type {import('next').NextConfig} */
+
+const nextConfig = {
+  output: 'standalone',
+  reactStrictMode: true,
+  swcMinify: true,
+  transpilePackages: ['@tool-empire/utils'],
+  images: {
+    domains: ['lh3.googleusercontent.com', 'vercel.com'],
+  },
+  withPWA,
+}
+
+const sentryOptions = {
+  // For all available options, see:
+  // https://github.com/getsentry/sentry-webpack-plugin#options
+
+  // Suppresses source map uploading logs during build
+  silent: true,
+
+  org: process.env.SENTRY_ORG,
+  project: process.env.SENTRY_PROJECT,
+}
+
+const sentryConfig = {
+  // For all available options, see:
+  // https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/
+
+  // Upload a larger set of source maps for prettier stack traces (increases build time)
+  widenClientFileUpload: true,
+
+  // Transpiles SDK to be compatible with IE11 (increases bundle size)
+  transpileClientSDK: true,
+
+  // Routes browser requests to Sentry through a Next.js rewrite to circumvent ad-blockers (increases server load)
+  tunnelRoute: '/monitoring',
+
+  // Hides source maps from generated client bundles
+  hideSourceMaps: true,
+
+  // Automatically tree-shake Sentry logger statements to reduce bundle size
+  disableLogger: true,
+}
+
+const exportConfig = process.env.NEXT_PUBLIC_SENTRY_DSN
+  ? withSentryConfig(nextConfig, sentryOptions, sentryConfig)
+  : nextConfig
+
+export default exportConfig

apps/web/package.json

@@ -0,0 +1,104 @@
+{
+  "name": "web",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "analyze": "ANALYZE=true yarn build",
+    "svgr": "svgr --icon --replace-attr-values '#F2F2F2'={props.color} -d src icons/assets --out-dir icons/output --index-template icons-template.js",
+    "postbuild": "next-sitemap"
+  },
+  "dependencies": {
+    "@chakra-ui/react": "^2.2.1",
+    "@dnd-kit/core": "^6.0.8",
+    "@dnd-kit/modifiers": "^6.0.1",
+    "@dnd-kit/sortable": "^7.0.2",
+    "@emotion/react": "^11.9.3",
+    "@emotion/styled": "^11.9.3",
+    "@monaco-editor/react": "^4.6.0",
+    "@next/bundle-analyzer": "^12.2.0",
+    "@radix-ui/react-accordion": "^1.1.2",
+    "@radix-ui/react-alert-dialog": "^1.0.4",
+    "@radix-ui/react-aspect-ratio": "^1.0.3",
+    "@radix-ui/react-avatar": "^1.0.3",
+    "@radix-ui/react-checkbox": "^1.0.4",
+    "@radix-ui/react-collapsible": "^1.0.3",
+    "@radix-ui/react-context-menu": "^2.1.4",
+    "@radix-ui/react-dialog": "^1.0.4",
+    "@radix-ui/react-dropdown-menu": "^2.0.5",
+    "@radix-ui/react-hover-card": "^1.0.6",
+    "@radix-ui/react-label": "^2.0.2",
+    "@radix-ui/react-menubar": "^1.0.3",
+    "@radix-ui/react-navigation-menu": "^1.1.3",
+    "@radix-ui/react-popover": "^1.0.6",
+    "@radix-ui/react-progress": "^1.0.3",
+    "@radix-ui/react-radio-group": "^1.1.3",
+    "@radix-ui/react-scroll-area": "^1.0.4",
+    "@radix-ui/react-select": "^1.2.2",
+    "@radix-ui/react-separator": "^1.0.3",
+    "@radix-ui/react-slider": "^1.1.2",
+    "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-switch": "^1.0.3",
+    "@radix-ui/react-tabs": "^1.0.4",
+    "@radix-ui/react-toast": "^1.1.4",
+    "@radix-ui/react-toggle": "^1.0.3",
+    "@radix-ui/react-tooltip": "^1.0.6",
+    "@sentry/nextjs": "^7.54.0",
+    "@tool-empire/utils": "1.0.0",
+    "@uimakers/tools-ui": "^1.0.0",
+    "@vercel/analytics": "^1.1.1",
+    "class-variance-authority": "^0.7.0",
+    "cmdk": "^0.2.0",
+    "flourite": "^1.2.4",
+    "framer-motion": "^6.3.16",
+    "globby": "11.1.0",
+    "highlight.js": "^11.8.0",
+    "html-to-image": "^1.11.11",
+    "jsonlint-mod": "^1.7.6",
+    "lucide-react": "^0.274.0",
+    "next": "^13.4.19",
+    "next-pwa": "^5.6.0",
+    "next-sitemap": "^4.2.3",
+    "next-themes": "^0.2.1",
+    "pdf-parser": "^1.0.5",
+    "re-resizable": "^6.9.11",
+    "react": "^18.2.0",
+    "react-day-picker": "^8.8.1",
+    "react-dom": "^18.2.0",
+    "react-drag-drop-files": "^2.3.10",
+    "react-dropzone": "^14.2.3",
+    "react-hook-form": "^7.46.0",
+    "react-hot-toast": "^2.4.1",
+    "react-lottie-player": "^1.5.0",
+    "react-markdown": "^9.0.0",
+    "react-monaco-editor": "^0.54.0",
+    "react-simple-code-editor": "^0.13.1",
+    "remark-gfm": "^4.0.0",
+    "styled-components": "^5.3.5",
+    "styled-normalize": "^8.0.7",
+    "tailwindcss-animate": "^1.0.7",
+    "webpack": "^5.75.0",
+    "xml-js": "^1.6.11",
+    "zustand": "^4.4.1"
+  },
+  "devDependencies": {
+    "@svgr/cli": "^6.5.1",
+    "@trivago/prettier-plugin-sort-imports": "^4.2.0",
+    "@types/react": "^18.2.21",
+    "autoprefixer": "^10.4.15",
+    "eslint": "8.11.0",
+    "eslint-config-next": "13.4.19",
+    "postcss": "^8.4.29",
+    "prettier": "2.7.1",
+    "tailwindcss": "^3.3.3",
+    "typescript": "5.2.2"
+  },
+  "browser": {
+    "fs": false,
+    "child_process": false,
+    "os": false
+  }
+}

pages/code-glow.tsx → apps/web/pages/code-glow.tsx

@@ -1,3 +1,4 @@
+import { cn } from '@tool-empire/utils'
 import Head from 'next/head'
 import { Resizable } from 're-resizable'
 import { useEffect, useRef, useState } from 'react'
@@ -13,8 +14,6 @@ import { themes } from '@/constants/code-theme'
 
 import useStore from '@/store/store'
 
-import { cn } from '@/utils/cn'
-
 export default function CodeGlow() {
   const [width, setWidth] = useState('auto')
   const [showWidth, setShowWidth] = useState(false)

pages/contact.tsx → apps/web/pages/contact.tsx

@@ -1,12 +1,11 @@
+import { cn } from '@tool-empire/utils'
 import React from 'react'
 
 import { Header } from '@/components/common/Header'
 import { buttonVariants } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { Textarea } from '@/components/ui/textarea'
 
-import { cn } from '@/utils/cn'
-
 import { Icon } from '@/icon'
 
 export default function SignIn() {

pages/font-wise.tsx → apps/web/pages/font-wise.tsx

@@ -1,11 +1,10 @@
+import { copy } from '@tool-empire/utils'
 import React, { useEffect, useState } from 'react'
 
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { useToast } from '@/components/ui/use-toast'
 
-import { copy } from '../src/utils'
-
 export default function Home() {
   const [maxScreenSize, setMaxScreenSize] = useState(1000)
   const [minScreenSize, setMinScreenSize] = useState(700)

apps/web/public/sitemap-0.xml

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1">
+<url><loc>https://tool-empire.vercel.app</loc><lastmod>2023-10-29T16:54:36.916Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://tool-empire.vercel.app/code-glow</loc><lastmod>2023-10-29T16:54:36.916Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://tool-empire.vercel.app/color-magic</loc><lastmod>2023-10-29T16:54:36.916Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://tool-empire.vercel.app/contact</loc><lastmod>2023-10-29T16:54:36.916Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://tool-empire.vercel.app/font-wise</loc><lastmod>2023-10-29T16:54:36.916Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://tool-empire.vercel.app/json-formatter</loc><lastmod>2023-10-29T16:54:36.916Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://tool-empire.vercel.app/json-formatter/editor</loc><lastmod>2023-10-29T16:54:36.916Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://tool-empire.vercel.app/pdf-to-word</loc><lastmod>2023-10-29T16:54:36.916Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://tool-empire.vercel.app/readme-generator</loc><lastmod>2023-10-29T16:54:36.916Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://tool-empire.vercel.app/readme-generator/editor</loc><lastmod>2023-10-29T16:54:36.916Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://tool-empire.vercel.app/sitemap.xml</loc><lastmod>2023-10-29T16:54:36.916Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+</urlset>

apps/web/public/sitemap.xml

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+<sitemap><loc>https://tool-empire.vercel.app/sitemap-0.xml</loc></sitemap>
+</sitemapindex>

src/components/code-glow/code-editor.tsx → apps/web/src/components/code-glow/code-editor.tsx

@@ -1,3 +1,4 @@
+import { cn } from '@tool-empire/utils'
 import flourite from 'flourite'
 import hljs from 'highlight.js'
 import { useEffect } from 'react'
@@ -8,8 +9,6 @@ import { codeSnippets } from '@/constants/codeSnippets'
 
 import useStore from '@/store/store'
 
-import { cn } from '@/utils/cn'
-
 export default function CodeEditor() {
   const store = useStore()
 

src/components/code-glow/control/theme-select.tsx → apps/web/src/components/code-glow/control/theme-select.tsx

@@ -1,9 +1,9 @@
+import { cn } from '@tool-empire/utils'
+
 import { themes } from '@/constants/code-theme'
 
 import useStore from '@/store/store'
 
-import { cn } from '@/utils/cn'
-
 import {
   Select,
   SelectContent,

src/components/code-glow/width-measurement.tsx → apps/web/src/components/code-glow/width-measurement.tsx

@@ -1,4 +1,4 @@
-import { cn } from '@/utils/cn'
+import { cn } from '@tool-empire/utils'
 
 export default function WidthMeasurement({ showWidth, width }) {
   return (

src/components/pxtorem.tsx → apps/web/src/components/pxtorem.tsx

@@ -1,8 +1,7 @@
+import { copy } from '@tool-empire/utils'
 import React, { useState } from 'react'
 import styled from 'styled-components'
 
-import { copy } from '../utils'
-
 const PxtoRem = (props) => {
   const [pxtorem, setPxtorem] = useState(true)
   const [pxValue, setPxValue] = useState(16)

src/components/ui/accordion.tsx → apps/web/src/components/ui/accordion.tsx

@@ -1,9 +1,8 @@
+import { cn } from '@tool-empire/utils'
 import * as React from 'react'
 
 import * as AccordionPrimitive from '@radix-ui/react-accordion'
 
-import { cn } from '@/utils/cn'
-
 import { Icon } from '@/icon'
 
 const Accordion = AccordionPrimitive.Root

src/components/ui/alert-dialog.tsx → apps/web/src/components/ui/alert-dialog.tsx

@@ -1,11 +1,10 @@
+import { cn } from '@tool-empire/utils'
 import * as React from 'react'
 
 import { buttonVariants } from '@/components/ui/button'
 
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog'
 
-import { cn } from '@/utils/cn'
-
 const AlertDialog = AlertDialogPrimitive.Root
 
 const AlertDialogTrigger = AlertDialogPrimitive.Trigger

src/components/ui/alert.tsx → apps/web/src/components/ui/alert.tsx

@@ -1,8 +1,7 @@
+import { cn } from '@tool-empire/utils'
 import { type VariantProps, cva } from 'class-variance-authority'
 import * as React from 'react'
 
-import { cn } from '@/utils/cn'
-
 const alertVariants = cva(
   'relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground',
   {

src/components/ui/avatar.tsx → apps/web/src/components/ui/avatar.tsx

@@ -1,9 +1,8 @@
+import { cn } from '@tool-empire/utils'
 import * as React from 'react'
 
 import * as AvatarPrimitive from '@radix-ui/react-avatar'
 
-import { cn } from '@/utils/cn'
-
 const Avatar = React.forwardRef<
   React.ElementRef<typeof AvatarPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>

src/components/ui/badge.tsx → apps/web/src/components/ui/badge.tsx

@@ -1,8 +1,7 @@
+import { cn } from '@tool-empire/utils'
 import { type VariantProps, cva } from 'class-variance-authority'
 import * as React from 'react'
 
-import { cn } from '@/utils/cn'
-
 const badgeVariants = cva(
   'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
   {

src/components/ui/button.tsx → apps/web/src/components/ui/button.tsx

@@ -1,10 +1,9 @@
+import { cn } from '@tool-empire/utils'
 import { type VariantProps, cva } from 'class-variance-authority'
 import * as React from 'react'
 
 import { Slot } from '@radix-ui/react-slot'
 
-import { cn } from '@/utils/cn'
-
 const buttonVariants = cva(
   'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
   {

src/components/ui/calendar.tsx → apps/web/src/components/ui/calendar.tsx

@@ -1,10 +1,9 @@
+import { cn } from '@tool-empire/utils'
 import * as React from 'react'
 import { DayPicker } from 'react-day-picker'
 
 import { buttonVariants } from '@/components/ui/button'
 
-import { cn } from '@/utils/cn'
-
 import { Icon } from '@/icon'
 
 export type CalendarProps = React.ComponentProps<typeof DayPicker>