✨ - feat: add login template

maykinmedia · Feb 20, 2024 · 0b2f9b9 · 0b2f9b9
1 parent c2e07f5
commit 0b2f9b9
Show file tree

Hide file tree

Showing 10 changed files with 110 additions and 0 deletions.
diff --git a/package.json b/package.json
@@ -38,6 +38,7 @@
   "exports": {
     ".": "./dist/esm/index.js",
     "./components": "./dist/esm/componets/index.js",
+    "./templates": "./dist/esm/templates/index.js",
     "./style": "./dist/esm/index.css"
   },
   "types": "dist/esm/index.d.ts",

diff --git a/src/index.tsx b/src/index.tsx
@@ -2,3 +2,6 @@ import "./style/default.scss";
 
 export * from "./components";
 export * as components from "./components";
+
+export * from "./templates";
+export * as templates from "./templates";
diff --git a/src/lib/i18n/compiled/en.json b/src/lib/i18n/compiled/en.json
@@ -103,6 +103,12 @@
       "value": "yes"
     }
   ],
+  "mm+twj": [
+    {
+      "type": 0,
+      "value": "login"
+    }
+  ],
   "y0k/u3": [
     {
       "type": 0,

diff --git a/src/lib/i18n/compiled/nl.json b/src/lib/i18n/compiled/nl.json
@@ -103,6 +103,12 @@
       "value": "ja"
     }
   ],
+  "mm+twj": [
+    {
+      "type": 0,
+      "value": "inloggen"
+    }
+  ],
   "y0k/u3": [
     {
       "type": 0,

diff --git a/src/lib/i18n/messages/en.json b/src/lib/i18n/messages/en.json
@@ -59,6 +59,11 @@
     "description": "components.Bool: The accessible label when value is truthy",
     "originalDefault": "ja"
   },
+  "mm+twj": {
+    "defaultMessage": "login",
+    "description": "templates.Login: The login button label",
+    "originalDefault": "inloggen"
+  },
   "y0k/u3": {
     "defaultMessage": "submit",
     "description": "components.Form: The submit form label",

diff --git a/src/lib/i18n/messages/nl.json b/src/lib/i18n/messages/nl.json
@@ -59,6 +59,11 @@
     "description": "components.Bool: The accessible label when value is truthy",
     "originalDefault": "ja"
   },
+  "mm+twj": {
+    "defaultMessage": "inloggen",
+    "description": "templates.Login: The login button label",
+    "originalDefault": "inloggen"
+  },
   "y0k/u3": {
     "defaultMessage": "verzenden",
     "description": "components.Form: The submit form label",

diff --git a/src/templates/index.ts b/src/templates/index.ts
@@ -0,0 +1,2 @@
+// Auto-generated file. Do not modify manually.
+export * from "./login";
diff --git a/src/templates/login/index.ts b/src/templates/login/index.ts
@@ -0,0 +1 @@
+export * from "./login";
diff --git a/src/templates/login/login.stories.tsx b/src/templates/login/login.stories.tsx
@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { Login } from "./login";
+
+const meta = {
+  title: "Templates/Login",
+  component: Login,
+  argTypes: { onSubmit: { action: "onSubmit" } },
+} satisfies Meta<typeof Login>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const LoginTemplate: Story = {
+  args: {
+    autoComplete: "off",
+    fields: [
+      {
+        label: "Gebruikersnaam",
+        name: "username",
+      },
+      {
+        label: "Wachtwoord",
+        name: "Password",
+      },
+    ],
+    labelSubmit: "Log in",
+    nonFieldErrors: ["Username or password invalid"],
+  },
+};
diff --git a/src/templates/login/login.tsx b/src/templates/login/login.tsx
@@ -0,0 +1,51 @@
+import React from "react";
+
+import {
+  Body,
+  Card,
+  Column,
+  Container,
+  Form,
+  FormProps,
+  Grid,
+  Hr,
+  Logo,
+  Page,
+} from "../../components";
+import { ucFirst } from "../../lib/format/string";
+import { useIntl } from "../../lib/i18n/useIntl";
+
+export type LoginProps = FormProps;
+
+/**
+ * Login template
+ * @constructor
+ */
+export const Login: React.FC<LoginProps> = ({ labelSubmit, ...formProps }) => {
+  const intl = useIntl();
+
+  const labelLogin = labelSubmit
+    ? labelSubmit
+    : intl.formatMessage({
+        description: "templates.Login: The login button label",
+        defaultMessage: "inloggen",
+      });
+
+  return (
+    <Page valign="middle">
+      <Container>
+        <Grid>
+          <Column start={5} span={4}>
+            <Card>
+              <Body>
+                <Logo />
+                <Hr />
+                <Form labelSubmit={ucFirst(labelLogin)} {...formProps} />
+              </Body>
+            </Card>
+          </Column>
+        </Grid>
+      </Container>
+    </Page>
+  );
+};
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		// Auto-generated file. Do not modify manually.
		export * from "./login";