Feat/add plugins feature (#1)

* add label component

* Add new configuration to plugin

* feat: add new plugin configuration

package.json

@@ -12,7 +12,13 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
+    "@faststore/core": "^3.0.147",
     "@types/react": "^18.2.12",
+    "next": "13.5.6",
     "typescript": "4.7.3"
+  },
+  "peerDependencies": {
+    "@faststore/core": "^3.0.147",
+    "next": "13.5.6"
   }
 }

plugin.config.js

@@ -0,0 +1,9 @@
+module.exports = {
+  name: "poc-plugin",
+  pages: {
+    "my-account": {
+      path: "/my-account",
+      appLayout: false,
+    },
+  },
+};

src/components/PersonalInfo/PersonalInfo.tsx

@@ -0,0 +1,21 @@
+import { useSession_unstable as useSession } from "@faststore/core/experimental";
+
+type PersonalInfoProps = {
+  title?: string;
+};
+export default function PersonalInfo(props: PersonalInfoProps) {
+  const session = useSession();
+
+  return (
+    <section>
+      <h2>{props.title || "Title of Personal Info Section"}</h2>
+      <h1 style={{ color: "blue", fontSize: 40 }}>{JSON.stringify(session)}</h1>
+      <dl>
+        <dt>Name:</dt>
+        <dd>Placeholder for name</dd>
+        <dt>Address</dt>
+        <dd>Placeholder for address</dd>
+      </dl>
+    </section>
+  );
+}

src/components/ProductDetails/ProductDetails.tsx

@@ -0,0 +1,14 @@
+import { useSession_unstable as useSession } from "@faststore/core/experimental";
+import Link from "next/link";
+
+const ProductDetails = () => {
+  const session = useSession();
+  return (
+    <>
+      <h1 style={{ color: "blue", fontSize: 40 }}>{JSON.stringify(session)}</h1>
+      <Link href="/">Dashboard</Link>
+    </>
+  );
+};
+
+export default ProductDetails;

src/components/index.ts

@@ -0,0 +1,9 @@
+import PersonalInfo from "./PersonalInfo/PersonalInfo";
+import ProductDetails from "./ProductDetails/ProductDetails";
+
+const sections = {
+  ProductDetails,
+  PersonalInfo,
+};
+
+export default sections;

src/pages/my-account.tsx

@@ -1,30 +1,24 @@
-import PersonalInfo from "../sections/personal-info";
-
-export const config = {
-	path: "/my-account",
-	appLayout: false,
-	name: "MyAccount",
-};
+import PersonalInfo from "../components/PersonalInfo/PersonalInfo";
 
 export async function loader() {
-	const result = await fetch(
-		`https://pokeapi.co/api/v2/pokemon/${Math.ceil(Math.random() * 150)}`,
-		{
-			method: "GET",
-		},
-	);
+  const result = await fetch(
+    `https://pokeapi.co/api/v2/pokemon/${Math.ceil(Math.random() * 150)}`,
+    {
+      method: "GET",
+    }
+  );
 
-	return await result.json();
+  return await result.json();
 }
 
 // Como eu passo os dados de um loader para as sections de uma forma que as sections possam ser utilizadas fora dssa página?
 export default function MyAccount(data: any) {
-	return (
-		<>
-			<h1>My Account page</h1>
-			{data.name}
-			<img src={data.sprites.front_default} />
-			<PersonalInfo />
-		</>
-	);
+  return (
+    <>
+      <h1>My Account page</h1>
+      {data.name}
+      <img src={data.sprites.front_default} />
+      <PersonalInfo />
+    </>
+  );
 }

src/themes/index.scss

@@ -0,0 +1,37 @@
+// ----------------------------------------------------------
+// GLOBAL TOKENS
+// Custom Theme
+// ----------------------------------------------------------
+
+@layer theme {
+  .theme {
+    // --------------------------------------------------------
+    // Colors (Branding Core)
+    // --------------------------------------------------------
+    --fs-color-main-0: red;
+    // --------------------------------------------------------
+    // Typography (Branding Core)
+    // --------------------------------------------------------
+
+    // --------------------------------------------------------
+    // Spacing (UI Essentials)
+    // --------------------------------------------------------
+
+    // --------------------------------------------------------
+    // Grid & Layout (UI Essentials)
+    // --------------------------------------------------------
+
+    // --------------------------------------------------------
+    // Interactive Controls (UI Essentials)
+    // --------------------------------------------------------
+
+    // --------------------------------------------------------
+    // Refinements
+    // --------------------------------------------------------
+
+    // --------------------------------------------------------
+    // FS UI Components
+    // --------------------------------------------------------
+    // Add here the customizations for FastStore UI components.
+  }
+}

tsconfig.json

@@ -31,7 +31,7 @@
     /* Modules */
     "module": "NodeNext" /* Specify what module code is generated. */,
     // "rootDir": "./",                                  /* Specify the root folder within your source files. */
-    "moduleResolution": "node" /* Specify how TypeScript looks up a file from a given module specifier. */,
+    "moduleResolution": "node16" /* Specify how TypeScript looks up a file from a given module specifier. */,
     // "baseUrl": "./",                                  /* Specify the base directory to resolve non-relative module names. */
     // "paths": {},                                      /* Specify a set of entries that re-map imports to additional lookup locations. */
     // "rootDirs": [],                                   /* Allow multiple folders to be treated as one when resolving modules. */