zitadel next components, react

packages/zitadel-next/package.json

@@ -10,17 +10,18 @@
     "dist/**"
   ],
   "scripts": {
-    "build": "tsup src/index.tsx --format esm,cjs --dts --external react",
+    "build": "tsup",
     "test": "pnpm test:unit",
     "test:watch": "pnpm test:unit:watch",
     "test:unit": "jest",
     "test:unit:watch": "jest --watch",
-    "dev": "tsup src/index.tsx --format esm,cjs --watch --dts --external react",
+    "dev": "tsup --watch",
     "lint": "eslint \"src/**/*.ts*\"",
     "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist"
   },
   "devDependencies": {
     "@types/jest": "^29.5.1",
+    "@types/react": "^17.0.13",
     "@zitadel/tsconfig": "workspace:*",
     "eslint": "^7.32.0",
     "eslint-config-zitadel": "workspace:*",
@@ -28,12 +29,21 @@
     "ts-jest": "^29.1.0",
     "ts-node": "^10.9.1",
     "tsup": "^5.10.1",
-    "typescript": "^4.9.3"
+    "typescript": "^4.9.3",
+    "tailwindcss": "3.2.4",
+    "postcss": "8.4.21",
+    "zitadel-tailwind-config": "workspace:*"
   },
   "peerDependencies": {
-    "next": "^13"
+    "@zitadel/react": "workspace:*",
+    "@zitadel/server": "workspace:*",
+    "next": "^13",
+    "react": "18.2.0"
   },
   "publishConfig": {
     "access": "public"
+  },
+  "dependencies": {
+    "next": "^13.4.10"
   }
-}
+}

packages/zitadel-next/postcss.config.js

@@ -0,0 +1,9 @@
+// If you want to use other PostCSS plugins, see the following:
+// https://tailwindcss.com/docs/using-with-preprocessors
+
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

packages/zitadel-next/src/components/SignInWithIDP.tsx

@@ -0,0 +1,73 @@
+import { ReactNode } from "react";
+
+import {
+  ZitadelServer,
+  settings,
+  GetActiveIdentityProvidersResponse,
+  IdentityProvider,
+  IdentityProviderType,
+} from "@zitadel/server";
+import {
+  SignInWithGitlab,
+  SignInWithAzureAD,
+  SignInWithGoogle,
+  SignInWithGithub,
+} from "@zitadel/react";
+
+export interface SignInWithIDPProps {
+  children?: ReactNode;
+  server: ZitadelServer;
+  orgId?: string;
+}
+
+function getIdentityProviders(
+  server: ZitadelServer,
+  orgId?: string
+): Promise<IdentityProvider[] | undefined> {
+  const settingsService = settings.getSettings(server);
+  console.log("req");
+  return settingsService
+    .getActiveIdentityProviders(
+      orgId ? { ctx: { orgId } } : { ctx: { instance: true } },
+      {}
+    )
+    .then((resp: GetActiveIdentityProvidersResponse) => {
+      return resp.identityProviders;
+    });
+}
+
+export async function SignInWithIDP(props: SignInWithIDPProps) {
+  const identityProviders = await getIdentityProviders(
+    props.server,
+    props.orgId
+  );
+
+  console.log(identityProviders);
+
+  return (
+    <div className="ztdl-next-flex ztdl-next-flex-col ztdl-next-w-full ztdl-next-space-y-2 ztdl-next-text-sm">
+      {identityProviders &&
+        identityProviders.map((idp, i) => {
+          switch (idp.type) {
+            case IdentityProviderType.IDENTITY_PROVIDER_TYPE_GITHUB:
+              return <SignInWithGithub key={`idp-${i}`}></SignInWithGithub>;
+            case IdentityProviderType.IDENTITY_PROVIDER_TYPE_GITHUB_ES:
+              return <SignInWithGithub key={`idp-${i}`}></SignInWithGithub>;
+            case IdentityProviderType.IDENTITY_PROVIDER_TYPE_AZURE_AD:
+              return <SignInWithAzureAD key={`idp-${i}`}></SignInWithAzureAD>;
+            case IdentityProviderType.IDENTITY_PROVIDER_TYPE_GOOGLE:
+              return <SignInWithGoogle key={`idp-${i}`}></SignInWithGoogle>;
+            case IdentityProviderType.IDENTITY_PROVIDER_TYPE_GITLAB:
+              return <SignInWithGitlab key={`idp-${i}`}></SignInWithGitlab>;
+            case IdentityProviderType.IDENTITY_PROVIDER_TYPE_GITLAB_SELF_HOSTED:
+              return <SignInWithGitlab key={`idp-${i}`}></SignInWithGitlab>;
+            default:
+              return <div></div>;
+          }
+        })}
+      {props.children}
+    </div>
+  );
+}
+
+SignInWithIDP.displayName = "SignInWithIDP";

packages/zitadel-next/src/components/ZitadelNextProvider.tsx

@@ -0,0 +1,10 @@
+export type ZitadelNextProps = {
+  dark: boolean;
+  children: React.ReactNode;
+};
+
+export function ZitadelNextProvider({ dark, children }: ZitadelNextProps) {
+  return (
+    <div className={`${dark ? "ztdl-dark" : "ztdl-light"} `}>{children}</div>
+  );
+}

packages/zitadel-next/src/index.test.tsx

@@ -1,5 +0,0 @@
-describe('slug', () => {
-    it('this is not a real test', () => { })
-})
-
-export { }

packages/zitadel-next/src/index.tsx

@@ -1 +1,11 @@
-export { toSlug } from "./toSlug";
+import "./styles.css";
+
+export {
+  SignInWithIDP,
+  type SignInWithIDPProps,
+} from "./components/SignInWithIDP";
+
+export {
+  ZitadelNextProvider,
+  type ZitadelNextProps,
+} from "./components/ZitadelNextProvider";

packages/zitadel-next/src/styles.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

packages/zitadel-next/src/toSlug.ts

@@ -1,10 +0,0 @@
-/**
- * Return a slugified copy of a string.
- *
- * @param {string} str The string to be slugified
- * @return {string} The slugified string.
- */
-export function toSlug(str: string): string {
-  let s = str;
-  return s;
-}

packages/zitadel-next/tailwind.config.js

@@ -0,0 +1,9 @@
+const sharedConfig = require("zitadel-tailwind-config/tailwind.config.js");
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  presets: [sharedConfig],
+  prefix: "ztdl-next-",
+  darkMode: "class",
+  content: [`src/**/*.{js,ts,jsx,tsx}`],
+};

packages/zitadel-next/tsup.config.ts

@@ -0,0 +1,14 @@
+import { defineConfig, Options } from "tsup";
+
+export default defineConfig((options: Options) => ({
+  treeshake: true,
+  splitting: true,
+  publicDir: true,
+  entry: ["src/**/*.tsx"],
+  format: ["esm"],
+  dts: true,
+  minify: true,
+  clean: true,
+  external: ["react"],
+  ...options,
+}));

packages/zitadel-next/turbo.json

@@ -0,0 +1,12 @@
+{
+  "extends": [
+    "//"
+  ],
+  "pipeline": {
+    "build": {
+      "outputs": [
+        "dist/**"
+      ]
+    }
+  }
+}