docs: adding concept pages and demos (#3222)

docs/app/components/Rectangle.tsx

@@ -0,0 +1,15 @@
+import type { ReactNode } from 'react';
+
+export interface RectangleProps {
+  height?: string;
+  children?: ReactNode;
+}
+
+export const Rectangle = ({ children, height }: RectangleProps) => (
+  <div
+    className="w-full rounded-sm bg-gradient-to-r from-[hsl(29,_37%,_70%)] to-[hsl(29,_37%,_40%)] shadow"
+    style={{ height: height }}
+  >
+    {children}
+  </div>
+);

docs/app/components/Squircle.tsx

@@ -0,0 +1,26 @@
+import { SVG, type SVGProps } from '@marigold/system';
+
+export interface SquircleProps extends SVGProps {}
+
+export const Squircle = ({ size, ...props }: SquircleProps) => (
+  <SVG viewBox="0 0 150 150" {...props} size={30}>
+    <path
+      fill="url(#a)"
+      d="M.75 74.74C.75 19.8 19.31 1.48 75 1.48s74.25 18.31 74.25 73.26S130.69 148 75 148 .75 129.69.75 74.74"
+    />
+    <defs>
+      <linearGradient
+        id="a"
+        x1="0"
+        x2="1"
+        y1="0"
+        y2="0"
+        spreadMethod="pad"
+        gradientTransform="rotate(65)"
+      >
+        <stop offset=".01" stopColor="hsl(29, 37%, 70%)" />
+        <stop offset="1" stopColor="hsl(29, 37%, 40%)" />
+      </linearGradient>
+    </defs>
+  </SVG>
+);

docs/content/pages/.eslintrc.js

@@ -0,0 +1,8 @@
+module.exports = {
+  rules: {
+    /**
+     * We use default exports for demos.
+     */
+    'import/no-anonymous-default-export': 'off',
+  },
+};

docs/content/pages/concepts/building-forms-hook-form.demo.tsx

@@ -0,0 +1,166 @@
+import { useForm, SubmitHandler, Controller } from 'react-hook-form';
+
+import {
+  Button,
+  FieldGroup,
+  Select,
+  Stack,
+  TextField,
+  Headline,
+  Columns,
+  Checkbox,
+} from '@marigold/components';
+
+interface IFormInputs {
+  firstName: string;
+  name: string;
+  phone: string;
+  mail: string;
+  country: string | number;
+  terms: boolean;
+}
+export default () => {
+  const {
+    control,
+    handleSubmit,
+    formState: { isValid },
+  } = useForm({
+    mode: 'onChange',
+    defaultValues: {
+      firstName: '',
+      name: '',
+      phone: '',
+      mail: '',
+      country: '',
+      terms: false,
+    },
+  });
+
+  const onSubmit: SubmitHandler<IFormInputs> = data => {
+    alert(JSON.stringify(data));
+  };
+
+  return (
+    <FieldGroup labelWidth="medium">
+      <Headline level="2">Account Registration</Headline>
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <Stack space={4}>
+          <Columns columns={[2, 2]} space={4}>
+            <Controller
+              name="firstName"
+              control={control}
+              rules={{ required: true }}
+              render={({ field }) => (
+                <TextField
+                  {...field}
+                  label="Firstname:"
+                  required
+                  description="Please enter your first name."
+                  placeholder="Firstname"
+                  error={field.value.length < 0 ? true : false}
+                  errorMessage="The field is required. Please enter your firstname."
+                />
+              )}
+            />
+            <Controller
+              name="name"
+              control={control}
+              rules={{ required: true }}
+              render={({ field }) => (
+                <TextField
+                  {...field}
+                  label="Name:"
+                  required
+                  description="Please enter your name."
+                  placeholder="Name"
+                  error={field.value.length < 0 ? true : false}
+                  errorMessage="The field is required. Please enter your name."
+                />
+              )}
+            />
+          </Columns>
+          <Stack space={4}>
+            <Controller
+              name="phone"
+              control={control}
+              rules={{
+                required: true,
+                min: 6,
+              }}
+              render={({ field }) => (
+                <TextField
+                  {...field}
+                  label="Phone:"
+                  required
+                  placeholder="Phone"
+                  type="tel"
+                  description="Please enter your phone number."
+                  error={!/^[0-9]*$/.test(field.value) ? true : false}
+                  errorMessage="The field is required. Please enter a valid phone number."
+                />
+              )}
+            />
+            <Controller
+              name="mail"
+              control={control}
+              rules={{ required: true }}
+              render={({ field }) => (
+                <TextField
+                  {...field}
+                  label="E-Mail:"
+                  description="Please enter your E-Mail adress."
+                  placeholder="E-Mail"
+                  required
+                  error={
+                    field.value.length > 0 &&
+                    !/^\S+@\S+\.\S+$/.test(field.value)
+                      ? true
+                      : false
+                  }
+                  errorMessage="The field is required. Please enter a valid E-Mail adress."
+                />
+              )}
+            />
+            <Controller
+              name="country"
+              control={control}
+              render={({ field }) => (
+                <Select
+                  {...field}
+                  label="Country:"
+                  description="Please select your country."
+                >
+                  <Select.Option key={'none'}>
+                    Select an option...
+                  </Select.Option>
+                  <Select.Option key={'germany'}>Germany</Select.Option>
+                  <Select.Option key={'austria'}>Austria</Select.Option>
+                  <Select.Option key={'switzerland'}>Switzerland</Select.Option>
+                </Select>
+              )}
+            />
+            <Controller
+              name="terms"
+              control={control}
+              render={({ field }) => (
+                <Checkbox defaultChecked={field.value}>
+                  Agree to the terms
+                </Checkbox>
+              )}
+            />
+          </Stack>
+        </Stack>
+        <Stack alignX="right">
+          <Button
+            variant="primary"
+            size="small"
+            type="submit"
+            disabled={!isValid}
+          >
+            Submit
+          </Button>
+        </Stack>
+      </form>
+    </FieldGroup>
+  );
+};

docs/content/pages/concepts/building-forms-zod.demo.tsx

@@ -0,0 +1,109 @@
+import { FormEventHandler, useState } from 'react';
+import { z } from 'zod';
+import { zfd } from 'zod-form-data';
+import {
+  Button,
+  Checkbox,
+  Columns,
+  FieldGroup,
+  Headline,
+  Select,
+  Stack,
+  TextField,
+} from '@marigold/components';
+
+export default () => {
+  const schemaData = z.object({
+    firstname: z.string().min(1),
+    name: z.string().min(1),
+    phone: z.string().min(6),
+    mail: z.string().email(),
+    country: z.string(),
+    terms: zfd.checkbox(),
+  });
+
+  const [error, setError] = useState<string[]>([]);
+  const handleSubmit: FormEventHandler<HTMLFormElement> = e => {
+    e.preventDefault();
+    const errorList: Array<any> = [];
+    const formData = new FormData(e.target as HTMLFormElement);
+    const data = Object.fromEntries(formData);
+    const validatedForm = schemaData.safeParse(data);
+
+    if (!validatedForm.success) {
+      validatedForm.error.issues.map(e => {
+        return errorList.push(e.path.toString());
+      });
+      setError(errorList);
+    } else {
+      alert(JSON.stringify(data));
+    }
+  };
+
+  return (
+    <FieldGroup labelWidth="medium">
+      <Headline level="2">Account Registration</Headline>
+      <form onSubmit={handleSubmit}>
+        <Stack space={4}>
+          <Columns columns={[2, 2]} space={4}>
+            <TextField
+              name="firstname"
+              label="Firstname:"
+              required
+              description="Please enter your first name."
+              placeholder="Firstname"
+              error={error.includes('firstname')}
+              errorMessage="The field is required. Please enter your firstname."
+            />
+            <TextField
+              name="name"
+              label="Name:"
+              required
+              description="Please enter your name."
+              placeholder="Name"
+              error={error.includes('name')}
+              errorMessage="The field is required. Please enter your name."
+            />
+          </Columns>
+          <Stack space={4}>
+            <TextField
+              name="phone"
+              label="Phone:"
+              required
+              placeholder="Phone"
+              type="tel"
+              description="Please enter your phone number."
+              error={error.includes('phone')}
+              errorMessage="The field is required. Please enter a valid phone number."
+            />
+            <TextField
+              label="E-Mail:"
+              description="Please enter your E-Mail adress"
+              placeholder="E-Mail"
+              name="mail"
+              required
+              error={error.includes('mail')}
+              errorMessage="The field is required. Please enter a valid E-Mail adress."
+            />
+            <Select
+              name="country"
+              label="Country:"
+              description="Please select your country."
+            >
+              <Select.Option key={'none'}>Select an option...</Select.Option>
+              <Select.Option key={'germany'}>Germany</Select.Option>
+              <Select.Option key={'austria'}>Austria</Select.Option>
+              <Select.Option key={'switzerland'}>Switzerland</Select.Option>
+            </Select>
+            <Checkbox name="terms">Agree to the terms</Checkbox>
+          </Stack>
+        </Stack>
+        <Stack alignX="right">
+          <Button variant="primary" size="small" type="submit">
+            Submit
+          </Button>
+        </Stack>
+      </form>
+    </FieldGroup>
+  );
+};