diff --git a/apps/my-new-app/.eslintrc.json b/apps/my-new-app/.eslintrc.json new file mode 100644 index 0000000..19cb2a0 --- /dev/null +++ b/apps/my-new-app/.eslintrc.json @@ -0,0 +1,34 @@ +{ + "extends": [ + "plugin:@nx/react-typescript", + "next", + "next/core-web-vitals", + "../../.eslintrc.json" + ], + "ignorePatterns": ["!**/*", ".next/**/*"], + "overrides": [ + { + "files": ["*.ts", "*.tsx", "*.js", "*.jsx"], + "rules": { + "@next/next/no-html-link-for-pages": [ + "error", + "apps/my-new-app/pages" + ] + } + }, + { + "files": ["*.ts", "*.tsx"], + "rules": {} + }, + { + "files": ["*.js", "*.jsx"], + "rules": {} + }, + { + "files": ["*.spec.ts", "*.spec.tsx", "*.spec.js", "*.spec.jsx"], + "env": { + "jest": true + } + } + ] +} diff --git a/apps/my-new-app/index.d.ts b/apps/my-new-app/index.d.ts new file mode 100644 index 0000000..7ba08fa --- /dev/null +++ b/apps/my-new-app/index.d.ts @@ -0,0 +1,6 @@ +/* eslint-disable @typescript-eslint/no-explicit-any */ +declare module '*.svg' { + const content: any; + export const ReactComponent: any; + export default content; +} diff --git a/apps/my-new-app/jest.config.ts b/apps/my-new-app/jest.config.ts new file mode 100644 index 0000000..483819e --- /dev/null +++ b/apps/my-new-app/jest.config.ts @@ -0,0 +1,11 @@ +/* eslint-disable */ +export default { + displayName: 'my-new-app', + preset: '../../jest.preset.js', + transform: { + '^(?!.*\\.(js|jsx|ts|tsx|css|json)$)': '@nx/react/plugins/jest', + '^.+\\.[tj]sx?$': ['babel-jest', { presets: ['@nx/next/babel'] }], + }, + moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'], + coverageDirectory: '../../coverage/apps/my-new-app', +}; diff --git a/apps/my-new-app/next-env.d.ts b/apps/my-new-app/next-env.d.ts new file mode 100644 index 0000000..4f11a03 --- /dev/null +++ b/apps/my-new-app/next-env.d.ts @@ -0,0 +1,5 @@ +/// +/// + +// NOTE: This file should not be edited +// see https://nextjs.org/docs/basic-features/typescript for more information. diff --git a/apps/my-new-app/next.config.js b/apps/my-new-app/next.config.js new file mode 100644 index 0000000..007b2aa --- /dev/null +++ b/apps/my-new-app/next.config.js @@ -0,0 +1,22 @@ +//@ts-check + +// eslint-disable-next-line @typescript-eslint/no-var-requires +const { composePlugins, withNx } = require('@nx/next'); + +/** + * @type {import('@nx/next/plugins/with-nx').WithNxOptions} + **/ +const nextConfig = { + nx: { + // Set this to true if you would like to use SVGR + // See: https://github.com/gregberge/svgr + svgr: false, + }, +}; + +const plugins = [ + // Add more Next.js plugins to this list if needed. + withNx, +]; + +module.exports = composePlugins(...plugins)(nextConfig); diff --git a/apps/my-new-app/project.json b/apps/my-new-app/project.json new file mode 100644 index 0000000..c389245 --- /dev/null +++ b/apps/my-new-app/project.json @@ -0,0 +1,9 @@ +{ + "name": "my-new-app", + "$schema": "../../node_modules/nx/schemas/project-schema.json", + "sourceRoot": "apps/my-new-app", + "projectType": "application", + "tags": [], + "// targets": "to see all targets run: nx show project my-new-app --web", + "targets": {} +} diff --git a/apps/my-new-app/public/.gitkeep b/apps/my-new-app/public/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/apps/my-new-app/public/favicon.ico b/apps/my-new-app/public/favicon.ico new file mode 100644 index 0000000..317ebcb Binary files /dev/null and b/apps/my-new-app/public/favicon.ico differ diff --git a/apps/my-new-app/specs/index.spec.tsx b/apps/my-new-app/specs/index.spec.tsx new file mode 100644 index 0000000..6038f29 --- /dev/null +++ b/apps/my-new-app/specs/index.spec.tsx @@ -0,0 +1,11 @@ +import React from 'react'; +import { render } from '@testing-library/react'; + +import Page from '../src/app/page'; + +describe('Page', () => { + it('should render successfully', () => { + const { baseElement } = render(); + expect(baseElement).toBeTruthy(); + }); +}); diff --git a/apps/my-new-app/src/app/api/hello/route.ts b/apps/my-new-app/src/app/api/hello/route.ts new file mode 100644 index 0000000..de70bac --- /dev/null +++ b/apps/my-new-app/src/app/api/hello/route.ts @@ -0,0 +1,3 @@ +export async function GET(request: Request) { + return new Response('Hello, from API!'); +} diff --git a/apps/my-new-app/src/app/global.css b/apps/my-new-app/src/app/global.css new file mode 100644 index 0000000..bb41dd8 --- /dev/null +++ b/apps/my-new-app/src/app/global.css @@ -0,0 +1,501 @@ +html { + -webkit-text-size-adjust: 100%; + font-family: + ui-sans-serif, + system-ui, + -apple-system, + BlinkMacSystemFont, + Segoe UI, + Roboto, + Helvetica Neue, + Arial, + Noto Sans, + sans-serif, + Apple Color Emoji, + Segoe UI Emoji, + Segoe UI Symbol, + Noto Color Emoji; + line-height: 1.5; + tab-size: 4; + scroll-behavior: smooth; +} +body { + font-family: inherit; + line-height: inherit; + margin: 0; +} +h1, +h2, +p, +pre { + margin: 0; +} +*, +::before, +::after { + box-sizing: border-box; + border-width: 0; + border-style: solid; + border-color: currentColor; +} +h1, +h2 { + font-size: inherit; + font-weight: inherit; +} +a { + color: inherit; + text-decoration: inherit; +} +pre { + font-family: + ui-monospace, + SFMono-Regular, + Menlo, + Monaco, + Consolas, + Liberation Mono, + Courier New, + monospace; +} +svg { + display: block; + vertical-align: middle; + shape-rendering: auto; + text-rendering: optimizeLegibility; +} +pre { + background-color: rgba(55, 65, 81, 1); + border-radius: 0.25rem; + color: rgba(229, 231, 235, 1); + font-family: + ui-monospace, + SFMono-Regular, + Menlo, + Monaco, + Consolas, + Liberation Mono, + Courier New, + monospace; + overflow: scroll; + padding: 0.5rem 0.75rem; +} + +.shadow { + box-shadow: + 0 0 #0000, + 0 0 #0000, + 0 10px 15px -3px rgba(0, 0, 0, 0.1), + 0 4px 6px -2px rgba(0, 0, 0, 0.05); +} +.rounded { + border-radius: 1.5rem; +} +.wrapper { + width: 100%; +} +.container { + margin-left: auto; + margin-right: auto; + max-width: 768px; + padding-bottom: 3rem; + padding-left: 1rem; + padding-right: 1rem; + color: rgba(55, 65, 81, 1); + width: 100%; +} +#welcome { + margin-top: 2.5rem; +} +#welcome h1 { + font-size: 3rem; + font-weight: 500; + letter-spacing: -0.025em; + line-height: 1; +} +#welcome span { + display: block; + font-size: 1.875rem; + font-weight: 300; + line-height: 2.25rem; + margin-bottom: 0.5rem; +} +#hero { + align-items: center; + background-color: hsla(214, 62%, 21%, 1); + border: none; + box-sizing: border-box; + color: rgba(55, 65, 81, 1); + display: grid; + grid-template-columns: 1fr; + margin-top: 3.5rem; +} +#hero .text-container { + color: rgba(255, 255, 255, 1); + padding: 3rem 2rem; +} +#hero .text-container h2 { + font-size: 1.5rem; + line-height: 2rem; + position: relative; +} +#hero .text-container h2 svg { + color: hsla(162, 47%, 50%, 1); + height: 2rem; + left: -0.25rem; + position: absolute; + top: 0; + width: 2rem; +} +#hero .text-container h2 span { + margin-left: 2.5rem; +} +#hero .text-container a { + background-color: rgba(255, 255, 255, 1); + border-radius: 0.75rem; + color: rgba(55, 65, 81, 1); + display: inline-block; + margin-top: 1.5rem; + padding: 1rem 2rem; + text-decoration: inherit; +} +#hero .logo-container { + display: none; + justify-content: center; + padding-left: 2rem; + padding-right: 2rem; +} +#hero .logo-container svg { + color: rgba(255, 255, 255, 1); + width: 66.666667%; +} +#middle-content { + align-items: flex-start; + display: grid; + gap: 4rem; + grid-template-columns: 1fr; + margin-top: 3.5rem; +} +#learning-materials { + padding: 2.5rem 2rem; +} +#learning-materials h2 { + font-weight: 500; + font-size: 1.25rem; + letter-spacing: -0.025em; + line-height: 1.75rem; + padding-left: 1rem; + padding-right: 1rem; +} +.list-item-link { + align-items: center; + border-radius: 0.75rem; + display: flex; + margin-top: 1rem; + padding: 1rem; + transition-property: + background-color, + border-color, + color, + fill, + stroke, + opacity, + box-shadow, + transform, + filter, + backdrop-filter, + -webkit-backdrop-filter; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; + width: 100%; +} +.list-item-link svg:first-child { + margin-right: 1rem; + height: 1.5rem; + transition-property: + background-color, + border-color, + color, + fill, + stroke, + opacity, + box-shadow, + transform, + filter, + backdrop-filter, + -webkit-backdrop-filter; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; + width: 1.5rem; +} +.list-item-link > span { + flex-grow: 1; + font-weight: 400; + transition-property: + background-color, + border-color, + color, + fill, + stroke, + opacity, + box-shadow, + transform, + filter, + backdrop-filter, + -webkit-backdrop-filter; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; +} +.list-item-link > span > span { + color: rgba(107, 114, 128, 1); + display: block; + flex-grow: 1; + font-size: 0.75rem; + font-weight: 300; + line-height: 1rem; + transition-property: + background-color, + border-color, + color, + fill, + stroke, + opacity, + box-shadow, + transform, + filter, + backdrop-filter, + -webkit-backdrop-filter; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; +} +.list-item-link svg:last-child { + height: 1rem; + transition-property: all; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; + width: 1rem; +} +.list-item-link:hover { + color: rgba(255, 255, 255, 1); + background-color: hsla(162, 47%, 50%, 1); +} +.list-item-link:hover > span { +} +.list-item-link:hover > span > span { + color: rgba(243, 244, 246, 1); +} +.list-item-link:hover svg:last-child { + transform: translateX(0.25rem); +} +#other-links { +} +.button-pill { + padding: 1.5rem 2rem; + transition-duration: 300ms; + transition-property: + background-color, + border-color, + color, + fill, + stroke, + opacity, + box-shadow, + transform, + filter, + backdrop-filter, + -webkit-backdrop-filter; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + align-items: center; + display: flex; +} +.button-pill svg { + transition-property: + background-color, + border-color, + color, + fill, + stroke, + opacity, + box-shadow, + transform, + filter, + backdrop-filter, + -webkit-backdrop-filter; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; + flex-shrink: 0; + width: 3rem; +} +.button-pill > span { + letter-spacing: -0.025em; + font-weight: 400; + font-size: 1.125rem; + line-height: 1.75rem; + padding-left: 1rem; + padding-right: 1rem; +} +.button-pill span span { + display: block; + font-size: 0.875rem; + font-weight: 300; + line-height: 1.25rem; +} +.button-pill:hover svg, +.button-pill:hover { + color: rgba(255, 255, 255, 1) !important; +} +#nx-console:hover { + background-color: rgba(0, 122, 204, 1); +} +#nx-console svg { + color: rgba(0, 122, 204, 1); +} +#nx-console-jetbrains { + margin-top: 2rem; +} +#nx-console-jetbrains:hover { + background-color: rgba(255, 49, 140, 1); +} +#nx-console-jetbrains svg { + color: rgba(255, 49, 140, 1); +} +#nx-repo:hover { + background-color: rgba(24, 23, 23, 1); +} +#nx-repo svg { + color: rgba(24, 23, 23, 1); +} +#nx-cloud { + margin-bottom: 2rem; + margin-top: 2rem; + padding: 2.5rem 2rem; +} +#nx-cloud > div { + align-items: center; + display: flex; +} +#nx-cloud > div svg { + border-radius: 0.375rem; + flex-shrink: 0; + width: 3rem; +} +#nx-cloud > div h2 { + font-size: 1.125rem; + font-weight: 400; + letter-spacing: -0.025em; + line-height: 1.75rem; + padding-left: 1rem; + padding-right: 1rem; +} +#nx-cloud > div h2 span { + display: block; + font-size: 0.875rem; + font-weight: 300; + line-height: 1.25rem; +} +#nx-cloud p { + font-size: 1rem; + line-height: 1.5rem; + margin-top: 1rem; +} +#nx-cloud pre { + margin-top: 1rem; +} +#nx-cloud a { + color: rgba(107, 114, 128, 1); + display: block; + font-size: 0.875rem; + line-height: 1.25rem; + margin-top: 1.5rem; + text-align: right; +} +#nx-cloud a:hover { + text-decoration: underline; +} +#commands { + padding: 2.5rem 2rem; + margin-top: 3.5rem; +} +#commands h2 { + font-size: 1.25rem; + font-weight: 400; + letter-spacing: -0.025em; + line-height: 1.75rem; + padding-left: 1rem; + padding-right: 1rem; +} +#commands p { + font-size: 1rem; + font-weight: 300; + line-height: 1.5rem; + margin-top: 1rem; + padding-left: 1rem; + padding-right: 1rem; +} +details { + align-items: center; + display: flex; + margin-top: 1rem; + padding-left: 1rem; + padding-right: 1rem; + width: 100%; +} +details pre > span { + color: rgba(181, 181, 181, 1); + display: block; +} +summary { + border-radius: 0.5rem; + display: flex; + font-weight: 400; + padding: 0.5rem; + cursor: pointer; + transition-property: + background-color, + border-color, + color, + fill, + stroke, + opacity, + box-shadow, + transform, + filter, + backdrop-filter, + -webkit-backdrop-filter; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; +} +summary:hover { + background-color: rgba(243, 244, 246, 1); +} +summary svg { + height: 1.5rem; + margin-right: 1rem; + width: 1.5rem; +} +#love { + color: rgba(107, 114, 128, 1); + font-size: 0.875rem; + line-height: 1.25rem; + margin-top: 3.5rem; + opacity: 0.6; + text-align: center; +} +#love svg { + color: rgba(252, 165, 165, 1); + width: 1.25rem; + height: 1.25rem; + display: inline; + margin-top: -0.25rem; +} +@media screen and (min-width: 768px) { + #hero { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + #hero .logo-container { + display: flex; + } + #middle-content { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } +} diff --git a/apps/my-new-app/src/app/layout.tsx b/apps/my-new-app/src/app/layout.tsx new file mode 100644 index 0000000..05a3900 --- /dev/null +++ b/apps/my-new-app/src/app/layout.tsx @@ -0,0 +1,18 @@ +import './global.css'; + +export const metadata = { + title: 'Welcome to apps/my-new-app', + description: 'Generated by create-nx-workspace', +}; + +export default function RootLayout({ + children, +}: { + children: React.ReactNode; +}) { + return ( + + {children} + + ); +} diff --git a/apps/my-new-app/src/app/page.module.scss b/apps/my-new-app/src/app/page.module.scss new file mode 100644 index 0000000..8a13e21 --- /dev/null +++ b/apps/my-new-app/src/app/page.module.scss @@ -0,0 +1,2 @@ +.page { +} diff --git a/apps/my-new-app/src/app/page.tsx b/apps/my-new-app/src/app/page.tsx new file mode 100644 index 0000000..51453ca --- /dev/null +++ b/apps/my-new-app/src/app/page.tsx @@ -0,0 +1,472 @@ +import styles from './page.module.scss'; + +export default function Index() { + /* + * Replace the elements below with your own. + * + * Note: The corresponding styles are in the ./index.scss file. + */ + return ( +
+
+
+
+

+ Hello there, + Welcome my-new-app 👋 +

+
+ +
+
+

+ + + + You're up and running +

+ What's next? +
+
+ + + +
+
+ +
+ + +
+ +
+

Next steps

+

Here are some things you can do with Nx:

+
+ + + + + Add UI library + + 
+                # Generate UI lib
+                nx g @nx/next:library ui
+                # Add a component
+                nx g @nx/next:component ui/src/lib/button
+
+
+
+ + + + + View project details + + 
nx show project my-new-app --web
+
+
+ + + + + View interactive project graph + + 
nx graph
+
+
+ + + + + Run affected commands + + 
+                
+                  # see what's been affected by changes
+                
+                nx affected:graph
+                # run tests for current changes
+                nx affected:test
+                # run e2e tests for current changes
+                nx affected:e2e
+
+
+
+ +

+ Carefully crafted with + + + +

+
+
+
+ ); +} diff --git a/apps/my-new-app/tsconfig.json b/apps/my-new-app/tsconfig.json new file mode 100644 index 0000000..b09141b --- /dev/null +++ b/apps/my-new-app/tsconfig.json @@ -0,0 +1,36 @@ +{ + "extends": "../../tsconfig.base.json", + "compilerOptions": { + "jsx": "preserve", + "allowJs": true, + "esModuleInterop": true, + "allowSyntheticDefaultImports": true, + "strict": true, + "forceConsistentCasingInFileNames": true, + "noEmit": true, + "resolveJsonModule": true, + "isolatedModules": true, + "incremental": true, + "plugins": [ + { + "name": "next" + } + ], + "types": ["jest", "node"] + }, + "include": [ + "**/*.ts", + "**/*.tsx", + "**/*.js", + "**/*.jsx", + "../../apps/my-new-app/.next/types/**/*.ts", + "../../dist/apps/my-new-app/.next/types/**/*.ts", + "next-env.d.ts" + ], + "exclude": [ + "node_modules", + "jest.config.ts", + "**/*.spec.ts", + "**/*.test.ts" + ] +} diff --git a/apps/my-new-app/tsconfig.spec.json b/apps/my-new-app/tsconfig.spec.json new file mode 100644 index 0000000..214b2cc --- /dev/null +++ b/apps/my-new-app/tsconfig.spec.json @@ -0,0 +1,21 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../dist/out-tsc", + "module": "commonjs", + "types": ["jest", "node"], + "jsx": "react" + }, + "include": [ + "jest.config.ts", + "src/**/*.test.ts", + "src/**/*.spec.ts", + "src/**/*.test.tsx", + "src/**/*.spec.tsx", + "src/**/*.test.js", + "src/**/*.spec.js", + "src/**/*.test.jsx", + "src/**/*.spec.jsx", + "src/**/*.d.ts" + ] +}