@phsa.tec/design-system-react 0.1.5 → 0.1.8

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

@@ -1,73 +0,0 @@
-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

@@ -1,58 +0,0 @@
-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

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

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

@@ -1,75 +0,0 @@
-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

@@ -1,52 +0,0 @@
-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

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

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

@@ -1,57 +0,0 @@
-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

@@ -1,58 +0,0 @@
-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

@@ -1,62 +0,0 @@
-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

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

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

@@ -1,47 +0,0 @@
-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

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

package/src/components/dataInput/index.ts

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

package/src/components/feedback/ErrorLabel/index.tsx

@@ -1,24 +0,0 @@
-import React from "react";
-import { Icon } from "@/components/dataDisplay";
-import { cn } from "@/lib/utils";
-
-export type ErrorLabelProps = React.PropsWithChildren<{
-  className?: string;
-  "data-testid"?: string;
-}>;
-
-export const ErrorLabel = ({
-  children,
-  className,
-  "data-testid": dataTestId,
-}: ErrorLabelProps) => {
-  return (
-    <div
-      className={cn("flex items-center gap-2 my-2", className)}
-      data-testid={`${dataTestId}-error-label`}
-    >
-      <Icon name="MdErrorOutline" size={18} className="text-destructive" />
-      <span className="text-destructive text-sm">{children}</span>
-    </div>
-  );
-};

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

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

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

@@ -1,45 +0,0 @@
-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

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

package/src/components/feedback/index.ts

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

package/src/components/index.ts

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