@fabio.caffarello/react-design-system 1.0.0

package/src/ui/atoms/Text/Text.tsx

@@ -0,0 +1,62 @@
+import type {
+  ComponentPropsWithoutRef,
+  ElementType,
+  HTMLAttributes,
+  JSX,
+} from "react";
+
+interface Props<T extends ElementType>
+  extends HTMLAttributes<JSX.IntrinsicElements> {
+  variant?: "heading" | "list" | "paragraph";
+  as?: T;
+  bold?: boolean;
+  italic?: boolean;
+  color?: string;
+}
+
+type ReturnProps<P extends ElementType> = Props<P> &
+  Omit<ComponentPropsWithoutRef<P>, keyof Props<P>>;
+
+export default function Text<T extends ElementType = "p">({
+  variant,
+  bold,
+  italic,
+  className,
+  as,
+  color,
+  ...rest
+}: ReturnProps<T>) {
+  const classNames = [className];
+  let Tag: ElementType;
+
+  if (as) {
+    Tag = as;
+  } else {
+    switch (variant) {
+      case "heading":
+        Tag = "h2";
+        break;
+      case "list":
+        Tag = "li";
+        break;
+      case "paragraph":
+      default:
+        Tag = "p";
+        break;
+    }
+  }
+
+  if (bold) {
+    classNames.push("font-bold");
+  }
+
+  if (italic) {
+    classNames.push("italic");
+  }
+
+  if (color) {
+    classNames.push(`text-${color}`);
+  }
+
+  return <Tag className={classNames.join(" ")} {...rest} />;
+}

package/src/ui/atoms/index.ts

@@ -0,0 +1,9 @@
+export { default as Info } from "./Info/Info";
+
+export { default as Text } from "./Text/Text";
+
+export { default as Input } from "./Input/Input";
+
+export { default as Button } from "./Button/Button";
+
+export { default as BoxWrapper } from "./BoxWrapper/BoxWrapper";

package/src/ui/index.ts

@@ -0,0 +1,3 @@
+export * from "./atoms";
+export * from "./molecules";
+export * from "./organisms";

package/src/ui/molecules/InputWithLabel/InputWithLabel.stories.tsx

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import InputWithLabel from "./InputWithLabel";
+
+const meta: Meta<typeof InputWithLabel> = {
+  title: "UI/Molecules/InputWithLabel",
+  component: InputWithLabel,
+};
+
+export const Primary: StoryObj<typeof InputWithLabel> = {
+  args: {
+    label: "Hello from Storybook",
+    placeholder: "Type something here",
+    id: "storybook-input",
+  },
+};
+
+export default meta;

package/src/ui/molecules/InputWithLabel/InputWithLabel.tsx

@@ -0,0 +1,21 @@
+import type { HTMLProps } from "react";
+import { Text, Input } from "../../atoms";
+
+interface Props extends HTMLProps<HTMLInputElement> {
+  label: string;
+}
+
+export default function InputWithLabel({ label, ...props }: Props) {
+  if (!props.id) {
+    console.error("InputWithLabel component requires an id prop");
+  }
+
+  return (
+    <div className="mb-medium grid gap-small">
+      <Text as="label" htmlFor={props.id} className="cursor-pointer">
+        {label}
+      </Text>
+      <Input {...props} />
+    </div>
+  );
+}

package/src/ui/molecules/index.ts

@@ -0,0 +1 @@
+export { default as InputWithLabel } from "./InputWithLabel/InputWithLabel";

package/src/ui/organisms/LoginBox/LoginBox.stories.tsx

@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { fn } from "storybook/test";
+import LoginBox from "./LoginBox";
+
+const meta: Meta<typeof LoginBox> = {
+  title: "UI/Organisms/LoginBox",
+  component: LoginBox,
+  parameters: {
+    actions: {
+      argTypesRegex: "^on.*",
+    },
+  },
+};
+
+export const Primary: StoryObj<typeof LoginBox> = {
+  args: {
+    className: "w-[300px]",
+    onSubmit: fn().mockName("onSubmit"),
+  },
+};
+
+export default meta;

package/src/ui/organisms/LoginBox/LoginBox.tsx

@@ -0,0 +1,49 @@
+import type { HTMLAttributes } from "react";
+import { Button, BoxWrapper } from "../../atoms";
+import { InputWithLabel } from "../../molecules";
+
+interface Props extends HTMLAttributes<HTMLFormElement> {
+  onForgotPasswordClick: () => void;
+}
+
+export default function LoginBox({
+  onForgotPasswordClick,
+  className,
+  ...props
+}: Props) {
+  return (
+    <BoxWrapper className={className}>
+      <form
+        {...props}
+        onSubmit={(e) => {
+          e.preventDefault();
+          if (props.onSubmit) props.onSubmit(e);
+        }}
+      >
+        <InputWithLabel
+          id="login-email"
+          label="Your email"
+          placeholder="myname@email.com"
+        />
+        <InputWithLabel
+          id="login-password"
+          label="Your password"
+          placeholder="••••••••"
+          type="password"
+        />
+        <div className="flex justify-between">
+          <Button
+            variant="secondary"
+            type="button"
+            onClick={onForgotPasswordClick}
+          >
+            Forgot password?
+          </Button>
+          <Button variant="regular" type="submit">
+            Sign in
+          </Button>
+        </div>
+      </form>
+    </BoxWrapper>
+  );
+}

package/src/ui/organisms/index.ts

@@ -0,0 +1 @@
+export { default as LoginBox } from "./LoginBox/LoginBox";