@conduction/components 1.0.2

package/src/components/formFields/types.ts

@@ -0,0 +1,24 @@
+import { FieldErrors, FieldValues, RegisterOptions, UseFormRegister } from "react-hook-form";
+
+export interface IReactHookFormProps {
+  register: UseFormRegister<FieldValues>;
+  errors: FieldErrors;
+  validation?: Omit<RegisterOptions<FieldValues, any>, "valueAsNumber" | "valueAsDate" | "setValueAs" | "disabled">;
+}
+
+export interface IInputProps {
+  name: string;
+  disabled?: boolean;
+  defaultValue?: string;
+}
+
+export interface ITextAreaProps {
+  name: string;
+  disabled?: boolean;
+  defaultValue?: string;
+}
+
+export interface ICheckboxProps {
+  label: string;
+  name: string;
+}

package/src/components/imageDivider/ImageDivider.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import * as styles from "./imageDivider.module.css";
+export const ImageDivider = ({ image, layoutClassName }) => {
+    return _jsx("img", { src: image, className: clsx(styles.divider, layoutClassName) });
+};

package/src/components/imageDivider/ImageDivider.tsx

@@ -0,0 +1,12 @@
+import clsx from "clsx";
+import * as React from "react";
+import * as styles from "./imageDivider.module.css";
+
+interface ImageDividerProps {
+  image: string;
+  layoutClassName: string;
+}
+
+export const ImageDivider: React.FC<ImageDividerProps> = ({ image, layoutClassName }) => {
+  return <img src={image} className={clsx(styles.divider, layoutClassName)} />;
+};

package/src/components/imageDivider/imageDivider.module.css

@@ -0,0 +1,5 @@
+.divider {
+  display: block;
+  object-fit: cover;
+  width: 100%;
+}

package/src/components/logo/Logo.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import { Link } from "gatsby";
+import * as styles from "./Logo.module.css";
+export const AuthenticatedLogo = ({ layoutClassName, href }) => {
+    return (_jsx(Link, { className: styles.logoContainer, to: href ?? "#", children: _jsx("div", { className: clsx(styles.authenticatedLogo, styles.logo, layoutClassName) }) }));
+};
+export const UnauthenticatedLogo = ({ layoutClassName, href }) => {
+    return (_jsx(Link, { className: styles.logoContainer, to: href ?? "#", children: _jsx("div", { className: clsx(styles.unauthenticatedLogo, styles.logo, layoutClassName) }) }));
+};

package/src/components/logo/Logo.module.css

@@ -0,0 +1,15 @@
+.logoContainer {
+  height: 100%;
+}
+
+.logo {
+  background-size: 100% 100%;
+}
+
+.authenticatedLogo {
+  background-image: var(--conduction-authenticated-logo-background);
+}
+
+.unauthenticatedLogo {
+  background-image: var(--conduction-unauthenticated-logo-background);
+}

package/src/components/logo/Logo.tsx

@@ -0,0 +1,25 @@
+import clsx from "clsx";
+import { Link } from "gatsby";
+import * as React from "react";
+import * as styles from "./Logo.module.css";
+
+interface LogoProps {
+  layoutClassName: string;
+  href?: string;
+}
+
+export const AuthenticatedLogo: React.FC<LogoProps> = ({ layoutClassName, href }) => {
+  return (
+    <Link className={styles.logoContainer} to={href ?? "#"}>
+      <div className={clsx(styles.authenticatedLogo, styles.logo, layoutClassName)} />
+    </Link>
+  );
+};
+
+export const UnauthenticatedLogo: React.FC<LogoProps> = ({ layoutClassName, href }) => {
+  return (
+    <Link className={styles.logoContainer} to={href ?? "#"}>
+      <div className={clsx(styles.unauthenticatedLogo, styles.logo, layoutClassName)} />
+    </Link>
+  );
+};

package/src/components/messageForm/MessageForm.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useForm } from "react-hook-form";
+import { Button, FormField, FormFieldInput, FormFieldLabel } from "@gemeente-denhaag/components-react";
+import { useTranslation } from "react-i18next";
+import { Textarea } from "../formFields";
+export const MessageForm = () => {
+    const { t } = useTranslation();
+    const { register, handleSubmit, formState: { errors }, } = useForm();
+    //the empty onSubmit is dependend on an API to function. This API is not yet implemented
+    const onSubmit = async () => { };
+    return (_jsxs("form", { onSubmit: handleSubmit(onSubmit), children: [_jsx(FormField, { children: _jsxs(FormFieldInput, { children: [_jsx(FormFieldLabel, { children: t("Message") }), _jsx(Textarea, { ...{ register, errors }, name: "message", validation: { required: true } })] }) }), _jsx(Button, { size: "large", type: "submit", children: t("Send") })] }));
+};

package/src/components/messageForm/MessageForm.tsx

@@ -0,0 +1,32 @@
+import * as React from "react";
+import { useForm } from "react-hook-form";
+import { Button, FormField, FormFieldInput, FormFieldLabel } from "@gemeente-denhaag/components-react";
+import { useTranslation } from "react-i18next";
+import { Textarea } from "../formFields";
+
+export const MessageForm: React.FC = () => {
+  const { t } = useTranslation();
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm();
+
+  //the empty onSubmit is dependend on an API to function. This API is not yet implemented
+  const onSubmit = async () => {};
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <FormField>
+        <FormFieldInput>
+          <FormFieldLabel>{t("Message")}</FormFieldLabel>
+          <Textarea {...{ register, errors }} name="message" validation={{ required: true }} />
+        </FormFieldInput>
+      </FormField>
+      <Button size="large" type="submit">
+        {t("Send")}
+      </Button>
+    </form>
+  );
+};

package/src/components/messagesTable/MessagesTable.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as styles from "./MessagesTable.module.css";
+import { Link } from "@gemeente-denhaag/components-react";
+import { Table, TableBody, TableCell, TableHeader, TableRow } from "@gemeente-denhaag/table";
+import { useTranslation } from "react-i18next";
+import { ArrowRightIcon } from "@gemeente-denhaag/icons";
+import { navigate } from "gatsby";
+export const MessagesTable = ({ messages }) => {
+    const { t } = useTranslation();
+    return (_jsx(Table, { children: _jsxs(TableBody, { children: [_jsxs(TableRow, { children: [_jsx(TableHeader, { children: t("Organisation") }), _jsx(TableHeader, { children: t("Date") }), _jsx(TableHeader, {})] }), messages.map(({ organisation, date, id }) => (_jsxs(TableRow, { className: styles.contentRow, children: [_jsx(TableCell, { children: organisation }), _jsx(TableCell, { children: date }), _jsx(TableCell, { onClick: () => navigate(`/my-messages/${id}`), children: _jsx(Link, { icon: _jsx(ArrowRightIcon, {}), iconAlign: "start", children: t("View message") }) })] }, id)))] }) }));
+};

package/src/components/messagesTable/MessagesTable.module.css

@@ -0,0 +1,4 @@
+.contentRow > :last-child {
+  display: flex;
+  justify-content: flex-end;
+}

package/src/components/messagesTable/MessagesTable.tsx

@@ -0,0 +1,45 @@
+import * as React from "react";
+import * as styles from "./MessagesTable.module.css";
+import { Link } from "@gemeente-denhaag/components-react";
+import { Table, TableBody, TableCell, TableHeader, TableRow } from "@gemeente-denhaag/table";
+import { useTranslation } from "react-i18next";
+import { ArrowRightIcon } from "@gemeente-denhaag/icons";
+import { navigate } from "gatsby";
+
+export interface IMessageTableItem {
+  organisation: string;
+  date: Date;
+  id: string;
+}
+
+interface MessagesTableProps {
+  messages: IMessageTableItem[];
+}
+
+export const MessagesTable: React.FC<MessagesTableProps> = ({ messages }) => {
+  const { t } = useTranslation();
+
+  return (
+    <Table>
+      <TableBody>
+        <TableRow>
+          <TableHeader>{t("Organisation")}</TableHeader>
+          <TableHeader>{t("Date")}</TableHeader>
+          <TableHeader />
+        </TableRow>
+        {messages.map(({ organisation, date, id }) => (
+          <TableRow key={id} className={styles.contentRow}>
+            <TableCell>{organisation}</TableCell>
+            <TableCell>{date}</TableCell>
+
+            <TableCell onClick={() => navigate(`/my-messages/${id}`)}>
+              <Link icon={<ArrowRightIcon />} iconAlign="start">
+                {t("View message")}
+              </Link>
+            </TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  );
+};

package/src/components/metaIcon/MetaIcon.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as styles from "./MetaIcon.module.css";
+export const MetaIcon = ({ icon, label, value }) => (_jsxs("div", { className: styles.container, children: [_jsx("span", { className: styles.icon, children: icon }), _jsx("span", { children: label }), _jsx("span", { className: styles.value, children: value })] }));

package/src/components/metaIcon/MetaIcon.module.css

@@ -0,0 +1,17 @@
+.container {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+}
+
+.container > *:not(:last-child) {
+  margin-block-end: var(--nlportal-space-block-xs);
+}
+
+.icon {
+  color: var(--nlportal-meta-icon-color);
+}
+
+.value {
+  font-weight: var(--nlportal-meta-icon-font-weight-bold);
+}

package/src/components/metaIcon/MetaIcon.tsx

@@ -0,0 +1,18 @@
+import * as React from "react";
+import * as styles from "./MetaIcon.module.css";
+
+export interface MetaIconProps {
+  icon: JSX.Element;
+  label: string;
+  value: string;
+}
+
+export const MetaIcon: React.FC<MetaIconProps> = ({ icon, label, value }) => (
+  <div className={styles.container}>
+    <span className={styles.icon}>{icon}</span>
+
+    <span>{label}</span>
+
+    <span className={styles.value}>{value}</span>
+  </div>
+);

package/src/components/privateRoute/PrivateRoute.js

@@ -0,0 +1,15 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import { navigate } from "gatsby";
+export const PrivateRoute = ({ children, isLoggedIn }) => {
+    const [authenticated, setAuthenticated] = React.useState(false);
+    React.useEffect(() => {
+        if (!isLoggedIn && window.location.pathname !== "/login") {
+            navigate("/login");
+        }
+        isLoggedIn && setAuthenticated(true);
+    }, [isLoggedIn]);
+    if (!authenticated)
+        return _jsx(_Fragment, {});
+    return _jsx(_Fragment, { children: children });
+};

package/src/components/privateRoute/PrivateRoute.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import { navigate } from "gatsby";
+
+interface PrivateRouteProps {
+  isLoggedIn?: boolean;
+}
+
+export const PrivateRoute: React.FC<PrivateRouteProps> = ({ children, isLoggedIn }) => {
+  const [authenticated, setAuthenticated] = React.useState<boolean>(false);
+
+  React.useEffect(() => {
+    if (!isLoggedIn && window.location.pathname !== "/login") {
+      navigate("/login");
+    }
+
+    isLoggedIn && setAuthenticated(true);
+  }, [isLoggedIn]);
+
+  if (!authenticated) return <></>;
+
+  return <>{children}</>;
+};

package/src/components/statusSteps/StatusSteps.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Step, StepExpandedIcon, StepHeader, StepHeading, StepList, StepMarker, StepSection, SubStep, SubStepHeading, SubStepList, SubStepMarker, } from "@gemeente-denhaag/process-steps";
+export const StatusSteps = ({ steps }) => {
+    return (_jsx(StepList, { children: steps.map(({ title, checked, current, expanded, subSteps }, idx) => (_jsxs(Step, { ...{ checked, current, expanded }, children: [_jsx(StepSection, { children: _jsxs(StepHeader, { children: [_jsx(StepMarker, { children: idx + 1 }), _jsx(StepHeading, { children: title }), subSteps && _jsx(StepExpandedIcon, {})] }) }), subSteps && (_jsx(SubStepList, { children: subSteps.map((subStep) => (_jsxs(SubStep, { children: [_jsx(SubStepMarker, {}), _jsx(SubStepHeading, { children: subStep })] }, idx))) }))] }, idx))) }));
+};

package/src/components/statusSteps/StatusSteps.tsx

@@ -0,0 +1,54 @@
+import * as React from "react";
+import {
+  Step,
+  StepExpandedIcon,
+  StepHeader,
+  StepHeading,
+  StepList,
+  StepMarker,
+  StepSection,
+  SubStep,
+  SubStepHeading,
+  SubStepList,
+  SubStepMarker,
+} from "@gemeente-denhaag/process-steps";
+
+interface IStatusStep {
+  title: string;
+  checked?: boolean;
+  current?: boolean;
+  expanded?: boolean;
+  subSteps?: string[];
+}
+
+interface StatusStepsProps {
+  steps: IStatusStep[];
+}
+
+export const StatusSteps: React.FC<StatusStepsProps> = ({ steps }) => {
+  return (
+    <StepList>
+      {steps.map(({ title, checked, current, expanded, subSteps }, idx) => (
+        <Step key={idx} {...{ checked, current, expanded }}>
+          <StepSection>
+            <StepHeader>
+              <StepMarker>{idx + 1}</StepMarker>
+              <StepHeading>{title}</StepHeading>
+              {subSteps && <StepExpandedIcon />}
+            </StepHeader>
+          </StepSection>
+          {subSteps && (
+            <SubStepList>
+              {subSteps.map((subStep: string) => (
+                <SubStep key={idx}>
+                  <SubStepMarker />
+                  <SubStepHeading>{subStep}</SubStepHeading>
+                </SubStep>
+              ))}
+            </SubStepList>
+          )}
+        </Step>
+      ))}
+    </StepList>
+  );
+};

package/src/components/topNav/TopNav.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as styles from "./TopNav.module.css";
+import { Link } from "@gemeente-denhaag/components-react";
+import { navigate } from "gatsby";
+export const PrimaryTopNav = ({ items }) => {
+    return (_jsx("nav", { className: styles.primary, children: _jsx("ul", { className: styles.ul, children: items.map(({ label, href, icon }, idx) => (_jsx("li", { className: styles.li, onClick: () => navigate(href), children: _jsx(Link, { icon: icon, iconAlign: "start", children: label }) }, idx))) }) }));
+};
+export const SecondaryTopNav = ({ items }) => {
+    return (_jsx("nav", { className: styles.secondary, children: _jsx("ul", { className: styles.ul, children: items.map(({ label, href, icon }, idx) => (_jsx("li", { className: styles.li, onClick: () => navigate(href), children: _jsx(Link, { icon: icon, iconAlign: "start", children: label }) }, idx))) }) }));
+};

package/src/components/topNav/TopNav.module.css

@@ -0,0 +1,22 @@
+.ul {
+  display: flex;
+}
+
+.ul > * {
+  flex: 1;
+}
+
+.li {
+  list-style-type: none;
+  padding-block-start: var(--conduction-navbar-padding);
+  padding-block-end: var(--conduction-navbar-padding);
+}
+
+.li > * {
+  text-decoration: none;
+  color: var(--conduction-navbar-color);
+}
+
+.primary {
+  font-weight: bold;
+}

package/src/components/topNav/TopNav.tsx

@@ -0,0 +1,46 @@
+import * as React from "react";
+import * as styles from "./TopNav.module.css";
+import { Link } from "@gemeente-denhaag/components-react";
+import { navigate } from "gatsby";
+
+export interface ITopNavItem {
+  label: string;
+  href: string;
+  icon?: JSX.Element;
+}
+
+interface TopNavItemsProps {
+  items: ITopNavItem[];
+}
+
+export const PrimaryTopNav: React.FC<TopNavItemsProps> = ({ items }) => {
+  return (
+    <nav className={styles.primary}>
+      <ul className={styles.ul}>
+        {items.map(({ label, href, icon }, idx) => (
+          <li className={styles.li} key={idx} onClick={() => navigate(href)}>
+            <Link icon={icon} iconAlign="start">
+              {label}
+            </Link>
+          </li>
+        ))}
+      </ul>
+    </nav>
+  );
+};
+
+export const SecondaryTopNav: React.FC<TopNavItemsProps> = ({ items }) => {
+  return (
+    <nav>
+      <ul className={styles.ul}>
+        {items.map(({ label, href, icon }, idx) => (
+          <li className={styles.li} key={idx} onClick={() => navigate(href)}>
+            <Link icon={icon} iconAlign="start">
+              {label}
+            </Link>
+          </li>
+        ))}
+      </ul>
+    </nav>
+  );
+};

package/src/custom.d.ts

@@ -0,0 +1,5 @@
+declare module "*.svg";
+
+declare module "*.jpg";
+declare module "*.png";
+declare module "*.module.css";

package/src/index.js

@@ -0,0 +1,14 @@
+export * from "./components/card";
+export * from "./components/casesTable/CasesTable";
+export * from "./components/container/Container";
+export * from "./components/denhaag-wrappers/breadcrumbs/Breadcrumbs";
+export * from "./components/editableTableRow/EditableTableRow";
+export * from "./components/formFields";
+export * from "./components/imageDivider/ImageDivider";
+export * from "./components/logo/Logo";
+export * from "./components/messageForm/MessageForm";
+export * from "./components/messagesTable/MessagesTable";
+export * from "./components/metaIcon/MetaIcon";
+export * from "./components/privateRoute/PrivateRoute";
+export * from "./components/statusSteps/StatusSteps";
+export * from "./components/topNav/TopNav";

package/src/index.ts

@@ -0,0 +1,50 @@
+import { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard } from "./components/card";
+import { CasesTable } from "./components/casesTable/CasesTable";
+import { Container } from "./components/container/Container";
+import { Breadcrumbs } from "./components/denhaag-wrappers/breadcrumbs/Breadcrumbs";
+import { EditableTableRow } from "./components/editableTableRow/EditableTableRow";
+import {
+  InputText,
+  InputPassword,
+  InputEmail,
+  InputDate,
+  InputNumber,
+  Textarea,
+  InputCheckbox,
+} from "./components/formFields";
+import { ImageDivider } from "./components/imageDivider/ImageDivider";
+import { AuthenticatedLogo, UnauthenticatedLogo } from "./components/logo/Logo";
+import { MessageForm } from "./components/messageForm/MessageForm";
+import { MessagesTable } from "./components/messagesTable/MessagesTable";
+import { MetaIcon } from "./components/metaIcon/MetaIcon";
+import { PrivateRoute } from "./components/privateRoute/PrivateRoute";
+import { StatusSteps } from "./components/statusSteps/StatusSteps";
+import { PrimaryTopNav, SecondaryTopNav } from "./components/topNav/TopNav";
+
+export {
+  DownloadCard,
+  HorizontalImageCard,
+  ImageAndDetailsCard,
+  RichContentCard,
+  CasesTable,
+  Container,
+  Breadcrumbs,
+  EditableTableRow,
+  InputText,
+  InputPassword,
+  InputEmail,
+  InputDate,
+  InputNumber,
+  Textarea,
+  InputCheckbox,
+  ImageDivider,
+  AuthenticatedLogo,
+  UnauthenticatedLogo,
+  MessageForm,
+  MessagesTable,
+  MetaIcon,
+  PrivateRoute,
+  StatusSteps,
+  PrimaryTopNav,
+  SecondaryTopNav,
+};

package/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "declaration": true,
+    "outDir": "./lib",
+    "target": "esnext",
+    "lib": ["dom", "esnext"],
+    "jsx": "react-jsx",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "skipLibCheck": true
+  },
+  "hooks": ["copy-files"],
+  "include": ["src", "src/**/*.css"],
+  "exclude": ["node_modules", "**/__tests__/*"]
+}