add styled-components and core components

aleph-im · Mar 5, 2024 · 387d64f · 387d64f
1 parent 8a59659
commit 387d64f
Show file tree

Hide file tree

Showing 8 changed files with 511 additions and 127 deletions.
diff --git a/.npmrc b/.npmrc
@@ -0,0 +1,2 @@
+@fortawesome:registry=https://npm.fontawesome.com/
+//npm.fontawesome.com/:_authToken=${FONTAWESOME_NPM_AUTH_TOKEN}
diff --git a/next.config.mjs b/next.config.mjs
@@ -1,6 +1,6 @@
 import BuilderDevTools from "@builder.io/dev-tools/next";
 
 /** @type {import('next').NextConfig} */
-const nextConfig = BuilderDevTools()({});
+const nextConfig = BuilderDevTools()({ compiler: { styledComponents: true } });
 
 export default nextConfig;
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -9,6 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@aleph-front/core": "^1.15.68",
     "@builder.io/dev-tools": "^0.2.22",
     "@builder.io/react": "^3.2.5",
     "@builder.io/sdk": "^2.2.2",
@@ -20,10 +21,12 @@
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "@types/styled-components": "^5.1.34",
     "autoprefixer": "^10.0.1",
     "eslint": "^8",
     "eslint-config-next": "14.1.1",
     "postcss": "^8",
+    "styled-components": "^6.1.8",
     "tailwindcss": "^3.3.0",
     "typescript": "^5"
   }

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,6 +1,8 @@
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import "./globals.css";
+import StyledComponentsRegistry from './lib/registry'
+import ClientThemeProvider from "./lib/provider";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -16,7 +18,13 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body className={inter.className}>{children}</body>
+      <body className={inter.className}>
+        <StyledComponentsRegistry>
+          <ClientThemeProvider>
+            {children}
+          </ClientThemeProvider>
+        </StyledComponentsRegistry>
+      </body>
     </html>
   );
 }
diff --git a/src/app/lib/provider.tsx b/src/app/lib/provider.tsx
@@ -0,0 +1,16 @@
+'use client'
+
+import { ThemeProvider } from 'styled-components'
+import { themes } from '@aleph-front/core'
+
+export default function ClientThemeProvider({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <ThemeProvider theme={themes.aleph}>
+      {children}
+    </ThemeProvider>
+  )
+} 
diff --git a/src/app/lib/registry.tsx b/src/app/lib/registry.tsx
@@ -0,0 +1,29 @@
+'use client'
+
+import React, { useState } from 'react'
+import { useServerInsertedHTML } from 'next/navigation'
+import { ServerStyleSheet, StyleSheetManager } from 'styled-components'
+
+export default function StyledComponentsRegistry({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  // Only create stylesheet once with lazy initial state
+  // x-ref: https://reactjs.org/docs/hooks-reference.html#lazy-initial-state
+  const [styledComponentsStyleSheet] = useState(() => new ServerStyleSheet())
+
+  useServerInsertedHTML(() => {
+    const styles = styledComponentsStyleSheet.getStyleElement()
+    styledComponentsStyleSheet.instance.clearTag()
+    return <>{styles}</>
+  })
+
+  if (typeof window !== 'undefined') return <>{children}</>
+
+  return (
+    <StyleSheetManager sheet={styledComponentsStyleSheet.instance}>
+      {children}
+    </StyleSheetManager>
+  )
+}
diff --git a/src/builder-registry.ts b/src/builder-registry.ts
@@ -1,6 +1,7 @@
 "use client";
 import { builder, Builder } from "@builder.io/react";
 import Counter from "./components/Counter/Counter";
+import { components as coreComponents } from '@aleph-front/core'
 
 builder.init(process.env.NEXT_PUBLIC_BUILDER_API_KEY!);
 
@@ -13,3 +14,12 @@ Builder.registerComponent(Counter, {
     },
   ],
 });
+
+
+const components = Object.entries(coreComponents)
+
+for (const [name, cmp] of components) {
+  Builder.registerComponent(cmp, {
+    name,
+  });
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		@fortawesome:registry=https://npm.fontawesome.com/
		//npm.fontawesome.com/:_authToken=${FONTAWESOME_NPM_AUTH_TOKEN}