I7-ui NPM | npm.io

i7-UI

A modern React UI component library built on top of Medusa UI, providing reusable components for building beautiful and accessible web applications.

Features

🎨 Built on top of Medusa UI
🌙 Dark mode support
♿️ Accessible components following WCAG guidelines
📱 Responsive design
🎯 TypeScript support
🎄 Tree-shakeable
🎪 Built with TailwindCSS

Installation

Install i7-UI and its peer dependencies:

# Using npm
npm install i7-ui @medusajs/ui @medusajs/ui-preset tailwindcss

# Using yarn
yarn add i7-ui @medusajs/ui @medusajs/ui-preset tailwindcss

# Using pnpm
pnpm add i7-ui @medusajs/ui @medusajs/ui-preset tailwindcss

Setup

Add the Medusa UI preset to your tailwind.config.ts:

import type { Config } from "tailwindcss";
import { join } from "path";

const config: Config = {
  // for stop dark mode medusa js
  darkMode: "class",
  // eslint-disable-next-line @typescript-eslint/no-require-imports
  presets: [require("@medusajs/ui-preset")],
  content: [
    join(__dirname, "src/**/!(*.stories|*.spec).{ts,tsx,html}"),
    "./node_modules/@medusajs/ui/dist/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {
      colors: {},
    },
  },
  plugins: [],
};
export default config;

Usage

Here's a quick example of using i7-UI components:

import { Select } from "@medusajs/ui";

function App() {
  const currencies = [
    {
      value: "eur",
      label: "EUR",
    },
    {
      value: "usd",
      label: "USD",
    },
    {
      value: "dkk",
      label: "DKK",
    },
  ];
  return (
    <div>
      <div className="w-[256px]">
        <Select>
          <Select.Trigger>
            <Select.Value placeholder="Select a currency" />
          </Select.Trigger>
          <Select.Content>
            {currencies.map((item) => (
              <Select.Item key={item.value} value={item.value}>
                {item.label}
              </Select.Item>
            ))}
          </Select.Content>
        </Select>
      </div>
    </div>
  );
}

Action Menu Example

import { ActionMenu } from "@medusajs/ui";

function ActionMenuExample() {
  return (
    <ActionMenu>
      <ActionMenu.Trigger>
        <span>Options</span>
      </ActionMenu.Trigger>
      <ActionMenu.Content>
        <ActionMenu.Item onClick={() => console.log("Edit")}>
          Edit
        </ActionMenu.Item>
        <ActionMenu.Item onClick={() => console.log("Duplicate")}>
          Duplicate
        </ActionMenu.Item>
        <ActionMenu.Separator />
        <ActionMenu.Item
          onClick={() => console.log("Delete")}
          className="text-ui-danger"
        >
          Delete
        </ActionMenu.Item>
      </ActionMenu.Content>
    </ActionMenu>
  );
}

Form with Custom Dropdown Example

const App = () => {
  const form = useForm<zod.infer<typeof CreateBranchesSchema>>({
    defaultValues: {
      name: ["3", "5"],
    },
    resolver: zodResolver(CreateBranchesSchema),
  });
  const handleSubmit = form.handleSubmit((data) => {
    console.log(data);
  });
  return (
    <div className="h-screen w-screen flex justify-center items-center">
      <Form {...form}>
        <KeyboundForm onSubmit={handleSubmit}>
          <Form.Field
            control={form.control}
            name="name"
            render={({ field }) => {
              return (
                <Form.Item>
                  <Form.Label>Name</Form.Label>
                  <Form.Control>
                    <DropDown
                      className="w-[400px]"
                      {...field}
                      isMulti={true}
                      value={field.value}
                      onChange={(value) => {
                        field.onChange(value);
                      }}
                      options={[
                        { label: "test1", value: "1" },
                        { label: "test2", value: "2" },
                        { label: "test3", value: "3" },
                        { label: "test4", value: "4" },
                        { label: "test5", value: "5" },
                        { label: "test6", value: "6" },
                        { label: "test7", value: "7" },
                        { label: "test8", value: "8" },
                        { label: "test9", value: "9" },
                        { label: "test10", value: "10" },
                        { label: "test11", value: "11" },
                        { label: "test12", value: "12" },
                        { label: "test13", value: "13" },
                        { label: "test14", value: "14" },
                      ]}
                    />
                  </Form.Control>
                  <Form.ErrorMessage />
                </Form.Item>
              );
            }}
          />
          <Button type="submit">Submit</Button>
        </KeyboundForm>
      </Form>
    </div>
  );
};

Image Upload Example

You can use the ImageUpload component to upload an image. use useUpload hook to upload the image to the server. You can use this component with react-hook-form or formik.

const App = () => {
  const form = useForm<zod.infer<typeof CreateBranchesSchema>>({
    defaultValues: {
      name: faker.image.avatar(),
    },
    resolver: zodResolver(CreateBranchesSchema),
  });
  const handleSubmit = form.handleSubmit((data) => {
    console.log(data);
  });

  const handleUploadFile = async (
    e: React.ChangeEvent<HTMLInputElement>,
    field: any
  ) => {
    const files = e.target.files;
    if (files && files.length > 0) {
      const file = new FormData();
      file.append("file", files[0]);
      field.onChange(faker.image.avatar());
    }
  };

  return (
    <div className="h-screen w-screen flex justify-center items-center">
      <Form {...form}>
        <KeyboundForm onSubmit={handleSubmit}>
          <Form.Field
            control={form.control}
            name="name"
            render={({ field }) => {
              return (
                <Form.Item>
                  <Form.Label>Name</Form.Label>
                  <Form.Control>
                    <ImageUpload
                      value={field.value}
                      onChange={(e) => handleUploadFile(e, field)}
                    />
                  </Form.Control>
                  <Form.ErrorMessage />
                </Form.Item>
              );
            }}
          />
          <Button type="submit">Submit</Button>
        </KeyboundForm>
      </Form>
    </div>
  );
};

DndFile Example

You can use the DndFile component to upload a file or multiple files here is the example of multiple files. use useUpload hook to upload the file to the server. You can use this component with react-hook-form or formik.

const App = () => {
  const [files, setFiles] = useState<File[]>([]);
  const [rejectedFiles, setRejectedFiles] = useState<FileRejection[]>([]);

  const form = useForm<zod.infer<typeof CreateBranchesSchema>>({
    defaultValues: {
      url: [faker.image.avatar(), faker.image.avatar()],
    },
    resolver: zodResolver(CreateBranchesSchema),
  });
  const handleSubmit = form.handleSubmit((data) => {
    console.log(data);
  });

  const onDrop = useCallback(
    async (acceptedFiles: any, rejectedFiles: any, field: any) => {
      if (rejectedFiles.length > 0) {
        setRejectedFiles(rejectedFiles);
        return;
      }

      setFiles(acceptedFiles);
      field.onChange([
        ...(Array.isArray(field.value) ? field.value : []),
        ...acceptedFiles.map((item: any) => faker.image.avatar()),
      ]);
    },
    []
  );

  return (
    <div className="h-screen w-screen flex justify-center items-center">
      <Form {...form}>
        <KeyboundForm onSubmit={handleSubmit}>
          <Form.Field
            control={form.control}
            name="url"
            render={({ field }) => {
              return (
                <Form.Item>
                  <Form.Label>Url</Form.Label>
                  <Form.Control>
                    <DndFile
                      value={field.value}
                      multiFiles={true}
                      onDrop={(acceptedFiles, rejectedFiles) =>
                        onDrop(acceptedFiles, rejectedFiles, field)
                      }
                      onChange={(values) => field.onChange(values)}
                      uploadOptions={{
                        maxFiles: 3,
                      }}
                      uploadFilesInfo={{
                        progress: 50,
                        files: files,
                        rejectedFiles: rejectedFiles,
                      }}
                      fileCount={true}
                    />
                  </Form.Control>
                  <Form.ErrorMessage />
                </Form.Item>
              );
            }}
          />
          <Button type="submit" className="mt-2">
            Submit
          </Button>
        </KeyboundForm>
      </Form>
    </div>
  );
};

Hooks

useComboboxData

The useComboboxData hook is used when implementing a combobox component that needs to fetch data from an API. It provides functionality for handling search, pagination, and initial data loading.

npm install @tanstack/react-query axios

Available Components

i7-UI provides a wide range of components including:

ActionMenu
Combobox
Dropdown
Form
KeyboundForm
Modal
Dropdown
Container
Header
GridLayout , GridItem
SectionRow
Skeleton
SingleColumnLayout
TwoColumnLayout
Pagination
Table
ImageUpload
DndFile For detailed documentation of each component, please visit our documentation site (coming soon).