@phsa.tec/design-system-react 0.1.0

package/src/components/dataInput/Select/Select.tsx

@@ -0,0 +1,73 @@
+import React from "react";
+import { Label } from "../../../components/ui/label";
+
+import {
+  FormField,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormMessage,
+  FormDescription,
+} from "../../../components/ui/form";
+import { SelectBase, SelectBaseProps } from "./SelectBase";
+import { useFormContext } from "react-hook-form";
+import { cn } from "../../../lib/utils";
+import { ErrorMessage } from "../../../components/dataDisplay/ErrorMessage/ErrorMessage";
+
+export type SelectProps = SelectBaseProps & {
+  label?: string;
+  name?: string;
+  error?: string;
+  description?: string;
+  withoutForm?: boolean;
+};
+
+export const Select = ({
+  name,
+  label,
+  description,
+  error,
+  className,
+  withoutForm,
+  options,
+  placeholder,
+  ...props
+}: SelectProps) => {
+  const form = useFormContext();
+  const hasForm = !!form && !!name;
+
+  if (!hasForm || withoutForm) {
+    return (
+      <div className={cn("space-y-2", className)}>
+        {label && <Label>{label}</Label>}
+        <SelectBase options={options} placeholder={placeholder} {...props} />
+        {description && (
+          <p className="text-sm text-muted-foreground">{description}</p>
+        )}
+        {error && <ErrorMessage>{error}</ErrorMessage>}
+      </div>
+    );
+  }
+
+  return (
+    <FormField
+      control={form.control}
+      name={name!}
+      render={({ field }) => (
+        <FormItem className={className}>
+          {label && <FormLabel>{label}</FormLabel>}
+          <FormControl>
+            <SelectBase
+              options={options}
+              placeholder={placeholder}
+              {...props}
+              {...field}
+            />
+          </FormControl>
+          {description && <FormDescription>{description}</FormDescription>}
+          <FormMessage />
+        </FormItem>
+      )}
+    />
+  );
+};

package/src/components/dataInput/Select/SelectBase.tsx

@@ -0,0 +1,58 @@
+import { useCallback } from "react";
+import {
+  Select,
+  SelectProps,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../../../components/ui/select";
+
+export type SelectBaseProps = Omit<SelectProps, "onValueChange"> & {
+  options: {
+    value: string | number;
+    label: string;
+  }[];
+  placeholder?: string;
+  className?: string;
+  id?: string;
+  onChange?: (value: string) => void;
+  value?: string;
+  onChangeCallback?: (value: string) => void;
+};
+
+export const SelectBase = ({
+  options,
+  placeholder,
+  onChange = () => {},
+  onChangeCallback = () => {},
+  value,
+  ...rest
+}: SelectBaseProps) => {
+  const onSelect = useCallback(
+    (value: string) => {
+      onChange(value);
+      onChangeCallback(value);
+    },
+    [onChange, onChangeCallback]
+  );
+  return (
+    <Select
+      {...rest}
+      onValueChange={onSelect}
+      defaultValue={value}
+      value={value}
+    >
+      <SelectTrigger>
+        <SelectValue placeholder={placeholder} />
+      </SelectTrigger>
+      <SelectContent>
+        {options?.map((option, index: number) => (
+          <SelectItem key={index} value={String(option.value)}>
+            {option.label}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+};

package/src/components/dataInput/Select/index.ts

@@ -0,0 +1,2 @@
+export * from "./Select";
+export * from "./MultiSelect";

package/src/components/dataInput/Switch/Switch.stories.tsx

@@ -0,0 +1,75 @@
+import type { Meta, StoryObj } from "@storybook/nextjs";
+import { Switch } from "./index";
+import { useState } from "react";
+import { Form } from "../form";
+import { useForm } from "react-hook-form";
+
+const meta: Meta<typeof Switch> = {
+  title: "Data Input/Switch",
+  component: Switch,
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof Switch>;
+
+const SwitchWithHooks = () => {
+  const [checked, setChecked] = useState(false);
+
+  return (
+    <Switch
+      label="Notifications"
+      checked={checked}
+      onCheckedChange={setChecked}
+    />
+  );
+};
+
+export const Default: Story = {
+  render: () => <SwitchWithHooks />,
+};
+
+export const WithoutLabel: Story = {
+  render: () => {
+    const [checked, setChecked] = useState(false);
+
+    return <Switch checked={checked} onCheckedChange={setChecked} />;
+  },
+};
+
+export const Checked: Story = {
+  render: () => {
+    const [checked, setChecked] = useState(true);
+
+    return (
+      <Switch
+        label="Active status"
+        checked={checked}
+        onCheckedChange={setChecked}
+      />
+    );
+  },
+};
+
+export const WithForm: Story = {
+  args: {
+    name: "switch",
+    label: "Terms and Conditions",
+    required: true,
+  },
+  decorators: [
+    (Story: React.ComponentType) => {
+      const form = useForm({
+        defaultValues: {
+          switch: true,
+        },
+      });
+
+      return (
+        <Form {...form}>
+          <Story />
+        </Form>
+      );
+    },
+  ],
+};

package/src/components/dataInput/Switch/Switch.tsx

@@ -0,0 +1,52 @@
+import { Label } from "../../../components/ui/label";
+import {
+  Switch as SwitchUI,
+  SwitchProps as SwitchUIProps,
+} from "../../../components/ui/switch";
+import { useFormContext } from "react-hook-form";
+import {
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+} from "../../../components/ui/form";
+import { cn } from "../../../lib/utils";
+
+export type SwitchProps = SwitchUIProps & {
+  label?: string;
+  withoutForm?: boolean;
+};
+
+export function Switch({
+  label,
+  withoutForm,
+  className,
+  ...props
+}: SwitchProps) {
+  const form = useFormContext();
+  const hasForm = !!form && !withoutForm && !!props.name;
+
+  if (!hasForm)
+    return (
+      <div className="flex items-center space-x-2">
+        <SwitchUI {...props} />
+        {label && <Label htmlFor={props.id}>{label}</Label>}
+      </div>
+    );
+  return (
+    <FormField
+      control={form.control}
+      name={props.name ?? ""}
+      render={({ field }) => (
+        <FormItem
+          className={cn(className, "flex items-center space-x-2 space-y-0")}
+        >
+          <FormControl>
+            <Switch checked={field.value} onCheckedChange={field.onChange} />
+          </FormControl>
+          <FormLabel>{label}</FormLabel>
+        </FormItem>
+      )}
+    />
+  );
+}

package/src/components/dataInput/Switch/index.ts

@@ -0,0 +1 @@
+export * from "./Switch";

package/src/components/dataInput/checkbox/Checkbox.tsx

@@ -0,0 +1,57 @@
+import { useFormContext } from "react-hook-form";
+import {
+  Checkbox as CheckboxUI,
+  CheckboxProps as CheckboxUIProps,
+} from "../../ui/checkbox";
+import { Label } from "../../../components/ui/label";
+
+import { FormControl, FormField, FormItem, FormLabel } from "../form";
+
+import { ErrorMessage } from "../../../components/dataDisplay/ErrorMessage";
+
+export type CheckboxProps = CheckboxUIProps & {
+  label: string;
+  error?: string;
+  withoutForm?: boolean;
+};
+
+export const Checkbox = ({
+  label,
+  error,
+  withoutForm,
+  ...props
+}: CheckboxProps) => {
+  const form = useFormContext();
+
+  const hasForm = !withoutForm && !!form && !!props.name;
+  if (!hasForm)
+    return (
+      <div className="flex items-center space-x-2">
+        <CheckboxUI {...props} />
+        {label && <Label htmlFor={props.id}>{label}</Label>}
+        {error && <ErrorMessage>{error}</ErrorMessage>}
+      </div>
+    );
+
+  return (
+    <FormField
+      control={form.control}
+      name={props.name ?? ""}
+      render={({ field }) => (
+        <FormItem className="flex flex-row items-start space-x-3 space-y-0 rounded-md border p-4">
+          <FormControl>
+            <CheckboxUI
+              checked={field.value}
+              onCheckedChange={field.onChange}
+            />
+          </FormControl>
+          {label && (
+            <div className="space-y-1 leading-none">
+              <FormLabel>{label}</FormLabel>
+            </div>
+          )}
+        </FormItem>
+      )}
+    />
+  );
+};

package/src/components/dataInput/checkbox/Checkbox_old.tsx

@@ -0,0 +1,58 @@
+import { Label } from "../../../components/ui/label";
+import {
+  Checkbox as CheckboxUI,
+  CheckboxProps as CheckboxUIProps,
+} from "../../ui/checkbox";
+import { ErrorMessage } from "../../../components/dataDisplay/ErrorMessage";
+import { FormControl } from "..";
+import { FormField, FormItem, FormLabel } from "../form";
+import { useFormContext } from "react-hook-form";
+
+export type CheckboxProps = CheckboxUIProps & {
+  label: string;
+  error?: string;
+  withoutForm?: boolean;
+};
+
+export const Checkbox = ({
+  label,
+  error,
+  withoutForm,
+  ...props
+}: CheckboxProps) => {
+  const form = useFormContext();
+
+  const hasForm = !withoutForm && !!form && !!props.name;
+  // if (!hasForm)
+  //   return (
+  //     <div className="flex items-center space-x-2">
+  //       <CheckboxUI {...props} />
+  //       {label && <Label htmlFor={props.id}>{label}</Label>}
+  //       {error && <ErrorMessage>{error}</ErrorMessage>}
+  //     </div>
+  //   );
+
+  return <></>;
+
+  return (
+    <FormField
+      control={form.control}
+      name={props.name ?? ""}
+      render={({ field }) => (
+        <FormItem className="flex flex-row items-start space-x-3 space-y-0 rounded-md border p-4">
+          <FormControl>
+            <CheckboxUI
+              checked={field.value}
+              onCheckedChange={field.onChange}
+            />
+          </FormControl>
+          {label && (
+            <div className="space-y-1 leading-none">
+              <FormLabel>{label}</FormLabel>
+            </div>
+          )}
+        </FormItem>
+      )}
+    />
+  );
+};

package/src/components/dataInput/checkbox/Checkout.stories.tsx

@@ -0,0 +1,62 @@
+import type { Meta, StoryObj } from "@storybook/nextjs";
+import { Checkbox } from "./Checkbox";
+import { Form } from "../form";
+import { useForm } from "react-hook-form";
+
+type Story = StoryObj<typeof Checkbox>;
+
+const meta = {
+  title: "Data Input/Checkbox",
+  component: Checkbox,
+  tags: ["autodocs"],
+  args: {
+    label: "Accept terms and conditions",
+  },
+} satisfies Meta<typeof Checkbox>;
+
+export default meta;
+
+export const Default: Story = {
+  args: {
+    label: "Accept terms and conditions",
+  },
+};
+
+export const Checked: Story = {
+  args: {
+    label: "Accept terms and conditions",
+    checked: true,
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    label: "Accept terms and conditions",
+    disabled: true,
+  },
+};
+
+export const DisabledChecked: Story = {
+  args: {
+    label: "Accept terms and conditions",
+    disabled: true,
+    checked: true,
+  },
+};
+
+export const WithForm: Story = {
+  args: {
+    label: "Accept terms and conditions",
+  },
+  decorators: [
+    (Story: React.ComponentType) => {
+      const form = useForm();
+
+      return (
+        <Form {...form}>
+          <Story />
+        </Form>
+      );
+    },
+  ],
+};

package/src/components/dataInput/checkbox/index.ts

@@ -0,0 +1 @@
+export * from "./Checkbox";

package/src/components/dataInput/form/Form.tsx

@@ -0,0 +1,47 @@
+import { useMemo } from "react";
+import {
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "./index";
+import {
+  ControllerRenderProps,
+  FieldValues,
+  useFormContext,
+} from "react-hook-form";
+
+export type FormContainerProps = {
+  name: string;
+  label?: string;
+  render: (
+    props?: ControllerRenderProps<FieldValues, string>
+  ) => React.ReactNode;
+  className?: string;
+};
+export const FormContainer = ({
+  name,
+  label,
+  className,
+  render = () => <></>,
+}: FormContainerProps) => {
+  const form = useFormContext();
+  const control = useMemo(() => form?.control, [form]);
+
+  return (
+    <FormField
+      control={control}
+      name={name}
+      render={({ field }) => (
+        <FormItem className={className}>
+          <FormItem className={className}>
+            {label && <FormLabel>{label}</FormLabel>}
+            <FormControl>{render && render(field)}</FormControl>
+          </FormItem>
+          <FormMessage />
+        </FormItem>
+      )}
+    />
+  );
+};

package/src/components/dataInput/form/index.ts

@@ -0,0 +1,3 @@
+import { useFormContext } from "react-hook-form";
+export * from "../../ui/form";
+export { useFormContext };

package/src/components/dataInput/index.ts

@@ -0,0 +1,5 @@
+export * from "./checkbox";
+export * from "./Input";
+export * from "./form";
+export * from "./Select";
+export * from "./Switch";

package/src/components/feedback/Spinner/index.ts

@@ -0,0 +1 @@
+export * from "../../ui/spinner";

package/src/components/feedback/Toast/Toast.stories.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/nextjs";
+import { fn } from "storybook/test";
+import { Button } from "../../../components/actions";
+import { Toaster, useToast } from "./index";
+
+const meta = {
+  title: "DataInput/Toast",
+  component: Toaster,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  args: { onClick: fn() },
+} satisfies Meta<typeof Toaster>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    title: "Success",
+    description: "This is a success message",
+    variant: "default",
+  },
+  argTypes: {
+    descritpion: { control: { type: "text" } },
+    title: { control: { type: "text" } },
+    variant: {
+      control: {
+        type: "select",
+      },
+      options: ["default", "success", "destructive"],
+    },
+  },
+  render: (args) => {
+    const { toast } = useToast();
+    return (
+      <div className="w-[500px] h-[500px]">
+        <Button onClick={() => toast(args)}>Success</Button>
+        <Toaster />
+      </div>
+    );
+  },
+};

package/src/components/feedback/Toast/index.ts

@@ -0,0 +1,2 @@
+export * from "../../ui/toaster";
+export * from "../../../hooks/use-toast";

package/src/components/feedback/index.ts

@@ -0,0 +1,2 @@
+export * from "./Spinner";
+export * from "./Toast";

package/src/components/index.ts

@@ -0,0 +1,6 @@
+export * from "./dataDisplay";
+export * from "./dataInput";
+export * from "./actions";
+export * from "./layout";
+export * from "./navigation";
+export * from "./feedback";