npm - create-react-forge - Versions diffs - 1.6.0 → 1.6.1 - Mend

create-react-forge 1.6.0 → 1.6.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (86) hide show

package/src/templates/overlays/styling/css-modules/src/css.d.ts ADDED Viewed

@@ -0,0 +1,13 @@
+declare module '*.module.css' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+declare module '*.css' {
+  const content: string;
+  export default content;
+}

package/src/templates/overlays/styling/styled-components/_nextjs/src/app/error.tsx ADDED Viewed

@@ -0,0 +1,72 @@
+'use client';
+import { useEffect } from 'react';
+import styled from 'styled-components';
+const Container = styled.div`
+  display: flex;
+  min-height: 100vh;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+`;
+const Content = styled.div`
+  text-align: center;
+`;
+const Title = styled.h1`
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: #dc2626;
+`;
+const Message = styled.p`
+  margin-top: 1rem;
+  color: #4b5563;
+`;
+const RetryButton = styled.button`
+  margin-top: 1.5rem;
+  border-radius: 0.375rem;
+  background-color: #4f46e5;
+  padding: 0.625rem 0.875rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: white;
+  border: none;
+  cursor: pointer;
+  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  transition: background-color 0.2s;
+  &:hover {
+    background-color: #6366f1;
+  }
+`;
+export default function Error({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  useEffect(() => {
+    // Log the error to an error reporting service
+    console.error(error);
+  }, [error]);
+  return (
+    <Container role="alert">
+      <Content>
+        <Title>Something went wrong</Title>
+        <Message>{error.message || 'An unexpected error occurred'}</Message>
+        <RetryButton onClick={reset}>Try again</RetryButton>
+      </Content>
+    </Container>
+  );
+}

package/src/templates/overlays/styling/styled-components/_nextjs/src/app/layout.tsx ADDED Viewed

@@ -0,0 +1,25 @@
+import type { Metadata } from 'next';
+import { Providers } from './providers';
+export const metadata: Metadata = {
+  title: '{{PROJECT_NAME}}',
+  description: 'A production-ready Next.js application',
+};
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en">
+      <body>
+        <Providers>{children}</Providers>
+      </body>
+    </html>
+  );
+}

package/src/templates/overlays/styling/styled-components/_nextjs/src/app/loading.tsx ADDED Viewed

@@ -0,0 +1,40 @@
+'use client';
+import styled, { keyframes } from 'styled-components';
+const spin = keyframes`
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+`;
+const Container = styled.div`
+  display: flex;
+  min-height: 100vh;
+  align-items: center;
+  justify-content: center;
+`;
+const Spinner = styled.div`
+  width: 2rem;
+  height: 2rem;
+  border-radius: 50%;
+  border: 2px solid #d1d5db;
+  border-top-color: #4f46e5;
+  animation: ${spin} 1s linear infinite;
+`;
+export default function Loading() {
+  return (
+    <Container>
+      <Spinner role="status" aria-label="Loading" />
+    </Container>
+  );
+}

package/src/templates/overlays/styling/styled-components/_nextjs/src/app/not-found.tsx ADDED Viewed

@@ -0,0 +1,91 @@
+'use client';
+import Link from 'next/link';
+import styled from 'styled-components';
+const Container = styled.div`
+  display: flex;
+  min-height: 100vh;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+`;
+const Content = styled.div`
+  text-align: center;
+`;
+const ErrorCode = styled.p`
+  font-size: 1rem;
+  font-weight: 600;
+  color: #4f46e5;
+`;
+const Title = styled.h1`
+  margin-top: 1rem;
+  font-size: 1.875rem;
+  font-weight: 700;
+  letter-spacing: -0.025em;
+  color: #111827;
+  @media (min-width: 640px) {
+    font-size: 3rem;
+  }
+`;
+const Description = styled.p`
+  margin-top: 1.5rem;
+  font-size: 1rem;
+  line-height: 1.75rem;
+  color: #4b5563;
+`;
+const ButtonGroup = styled.div`
+  margin-top: 2.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 1.5rem;
+`;
+const PrimaryButton = styled(Link)`
+  border-radius: 0.375rem;
+  background-color: #4f46e5;
+  padding: 0.625rem 0.875rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: white;
+  text-decoration: none;
+  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  transition: background-color 0.2s;
+  &:hover {
+    background-color: #6366f1;
+  }
+  &:focus-visible {
+    outline: 2px solid #4f46e5;
+    outline-offset: 2px;
+  }
+`;
+export default function NotFound() {
+  return (
+    <Container>
+      <Content>
+        <ErrorCode>404</ErrorCode>
+        <Title>Page not found</Title>
+        <Description>
+          Sorry, we couldn't find the page you're looking for.
+        </Description>
+        <ButtonGroup>
+          <PrimaryButton href="/">Go back home</PrimaryButton>
+        </ButtonGroup>
+      </Content>
+    </Container>
+  );
+}

package/src/templates/overlays/styling/styled-components/_nextjs/src/app/page.tsx ADDED Viewed

@@ -0,0 +1,102 @@
+'use client';
+import Link from 'next/link';
+import styled from 'styled-components';
+const Container = styled.div`
+  display: flex;
+  min-height: 100vh;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+`;
+const Content = styled.div`
+  text-align: center;
+`;
+const Title = styled.h1`
+  font-size: 2.25rem;
+  font-weight: 700;
+  letter-spacing: -0.025em;
+  color: #111827;
+  @media (min-width: 640px) {
+    font-size: 3.75rem;
+  }
+`;
+const Description = styled.p`
+  margin-top: 1.5rem;
+  font-size: 1.125rem;
+  line-height: 2rem;
+  color: #4b5563;
+`;
+const ButtonGroup = styled.div`
+  margin-top: 2.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 1.5rem;
+`;
+const PrimaryButton = styled(Link)`
+  border-radius: 0.375rem;
+  background-color: #4f46e5;
+  padding: 0.625rem 0.875rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: white;
+  text-decoration: none;
+  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  transition: background-color 0.2s;
+  &:hover {
+    background-color: #6366f1;
+  }
+  &:focus-visible {
+    outline: 2px solid #4f46e5;
+    outline-offset: 2px;
+  }
+`;
+const SecondaryLink = styled.a`
+  font-size: 0.875rem;
+  font-weight: 600;
+  line-height: 1.5rem;
+  color: #111827;
+  text-decoration: none;
+  &:hover {
+    color: #4f46e5;
+  }
+`;
+export default function HomePage() {
+  return (
+    <Container>
+      <Content>
+        <Title>Welcome to Your App</Title>
+        <Description>
+          A production-ready Next.js application scaffolded with create-react-forge.
+        </Description>
+        <ButtonGroup>
+          <PrimaryButton href="/dashboard">Get started</PrimaryButton>
+          <SecondaryLink
+            href="https://github.com/alan2207/bulletproof-react"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Learn more <span aria-hidden="true">→</span>
+          </SecondaryLink>
+        </ButtonGroup>
+      </Content>
+    </Container>
+  );
+}

package/src/templates/overlays/styling/styled-components/_nextjs/src/app/providers.tsx ADDED Viewed

@@ -0,0 +1,22 @@
+'use client';
+import StyledComponentsRegistry from '@/lib/StyledComponentsRegistry';
+import { GlobalStyles } from '@/styles/globals';
+import { ReactNode } from 'react';
+type ProvidersProps = {
+  children: ReactNode;
+};
+export function Providers({ children }: ProvidersProps) {
+  return (
+    <StyledComponentsRegistry>
+      <GlobalStyles />
+      {children}
+    </StyledComponentsRegistry>
+  );
+}

package/src/templates/overlays/styling/styled-components/{src → _nextjs/src}/lib/StyledComponentsRegistry.tsx RENAMED Viewed

@@ -1,7 +1,7 @@
 'use client';
-import React, { useState } from 'react';
 import { useServerInsertedHTML } from 'next/navigation';
+import React, { useState } from 'react';
 import { ServerStyleSheet, StyleSheetManager } from 'styled-components';
 export default function StyledComponentsRegistry({
@@ -10,6 +10,7 @@ export default function StyledComponentsRegistry({
   children: React.ReactNode;
 }) {
   // Only create stylesheet once with lazy initial state
+  // useState with initializer ensures this only runs once
   const [styledComponentsStyleSheet] = useState(() => new ServerStyleSheet());
   useServerInsertedHTML(() => {
@@ -18,7 +19,11 @@ export default function StyledComponentsRegistry({
     return <>{styles}</>;
   });
-  if (typeof window !== 'undefined') return <>{children}</>;
+  // On the client side, styled-components automatically injects styles
+  // We only need StyleSheetManager on the server for SSR collection
+  if (typeof window !== 'undefined') {
+    return <>{children}</>;
+  }
   return (
     <StyleSheetManager sheet={styledComponentsStyleSheet.instance}>
@@ -27,3 +32,6 @@ export default function StyledComponentsRegistry({
   );
 }

package/src/templates/overlays/styling/styled-components/_vite/src/app/provider.tsx ADDED Viewed

@@ -0,0 +1,27 @@
+import { ErrorFallback } from '@/components/errors/ErrorFallback';
+import { LoadingSpinner } from '@/components/ui/LoadingSpinner';
+import { GlobalStyles } from '@/styles/globals';
+import { Suspense } from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
+import { BrowserRouter } from 'react-router-dom';
+type AppProviderProps = {
+  children: React.ReactNode;
+};
+export function AppProvider({ children }: AppProviderProps) {
+  return (
+    <Suspense fallback={<LoadingSpinner />}>
+      <ErrorBoundary FallbackComponent={ErrorFallback}>
+        <BrowserRouter>
+          <GlobalStyles />
+          {children}
+        </BrowserRouter>
+      </ErrorBoundary>
+    </Suspense>
+  );
+}

package/src/templates/overlays/styling/styled-components/_vite/src/components/errors/ErrorFallback.tsx ADDED Viewed

@@ -0,0 +1,59 @@
+import { FallbackProps } from 'react-error-boundary';
+import styled from 'styled-components';
+const Container = styled.div`
+  display: flex;
+  min-height: 100vh;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+`;
+const Content = styled.div`
+  text-align: center;
+`;
+const Title = styled.h1`
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: #dc2626;
+`;
+const Message = styled.p`
+  margin-top: 1rem;
+  color: #4b5563;
+`;
+const RetryButton = styled.button`
+  margin-top: 1.5rem;
+  border-radius: 0.375rem;
+  background-color: #4f46e5;
+  padding: 0.625rem 0.875rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: white;
+  border: none;
+  cursor: pointer;
+  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  transition: background-color 0.2s;
+  &:hover {
+    background-color: #6366f1;
+  }
+`;
+export function ErrorFallback({ error, resetErrorBoundary }: FallbackProps) {
+  return (
+    <Container role="alert">
+      <Content>
+        <Title>Something went wrong</Title>
+        <Message>{error.message || 'An unexpected error occurred'}</Message>
+        <RetryButton onClick={resetErrorBoundary}>Try again</RetryButton>
+      </Content>
+    </Container>
+  );
+}

package/src/templates/overlays/styling/styled-components/_vite/src/components/ui/LoadingSpinner.tsx ADDED Viewed

@@ -0,0 +1,47 @@
+import styled, { keyframes } from 'styled-components';
+type LoadingSpinnerProps = {
+  size?: 'sm' | 'md' | 'lg';
+};
+const spin = keyframes`
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+`;
+const sizes = {
+  sm: '1rem',
+  md: '2rem',
+  lg: '4rem',
+};
+const Container = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+const Spinner = styled.div<{ $size: 'sm' | 'md' | 'lg' }>`
+  width: ${(props) => sizes[props.$size]};
+  height: ${(props) => sizes[props.$size]};
+  border-radius: 50%;
+  border: 2px solid #d1d5db;
+  border-top-color: #4f46e5;
+  animation: ${spin} 1s linear infinite;
+`;
+export function LoadingSpinner({ size = 'md' }: LoadingSpinnerProps) {
+  return (
+    <Container>
+      <Spinner $size={size} role="status" aria-label="Loading" />
+    </Container>
+  );
+}

package/src/templates/overlays/styling/styled-components/_vite/src/features/misc/routes/Landing.tsx ADDED Viewed

@@ -0,0 +1,100 @@
+import { Link } from 'react-router-dom';
+import styled from 'styled-components';
+const Container = styled.div`
+  display: flex;
+  min-height: 100vh;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+`;
+const Content = styled.div`
+  text-align: center;
+`;
+const Title = styled.h1`
+  font-size: 2.25rem;
+  font-weight: 700;
+  letter-spacing: -0.025em;
+  color: #111827;
+  @media (min-width: 640px) {
+    font-size: 3.75rem;
+  }
+`;
+const Description = styled.p`
+  margin-top: 1.5rem;
+  font-size: 1.125rem;
+  line-height: 2rem;
+  color: #4b5563;
+`;
+const ButtonGroup = styled.div`
+  margin-top: 2.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 1.5rem;
+`;
+const PrimaryButton = styled(Link)`
+  border-radius: 0.375rem;
+  background-color: #4f46e5;
+  padding: 0.625rem 0.875rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: white;
+  text-decoration: none;
+  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  transition: background-color 0.2s;
+  &:hover {
+    background-color: #6366f1;
+  }
+  &:focus-visible {
+    outline: 2px solid #4f46e5;
+    outline-offset: 2px;
+  }
+`;
+const SecondaryLink = styled.a`
+  font-size: 0.875rem;
+  font-weight: 600;
+  line-height: 1.5rem;
+  color: #111827;
+  text-decoration: none;
+  &:hover {
+    color: #4f46e5;
+  }
+`;
+export function Landing() {
+  return (
+    <Container>
+      <Content>
+        <Title>Welcome to Your App</Title>
+        <Description>
+          A production-ready React application scaffolded with create-react-forge.
+        </Description>
+        <ButtonGroup>
+          <PrimaryButton to="/dashboard">Get started</PrimaryButton>
+          <SecondaryLink
+            href="https://github.com/alan2207/bulletproof-react"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Learn more <span aria-hidden="true">→</span>
+          </SecondaryLink>
+        </ButtonGroup>
+      </Content>
+    </Container>
+  );
+}