feat: saas ui integration

[Pagebakers]

IMPORTANT: Please do not create a Pull Request without creating an issue first.

Any change needs to be discussed before proceeding. Failure to do so may result in the rejection of the pull request.

Please provide enough information so that others can review your pull request:

Explain the details for making this change. What existing problem does the pull request solve?

Test plan (required)

Demonstrate the code is solid. If not, please add WIP: in its title.

Closing issues

Put closes #XXXX in your comment to auto-close the issue that your PR fixes (if such).

Self Check before Merge

Please check all items below before review.

• [x] Corresponding issues are created/updated or not needed
• [ ] Docs are updated/provided or not needed
• [x] Examples are updated/provided or not needed
• [x] TypeScript definitions are updated/provided or not needed
• [x] Tests are updated/provided or not needed
• [ ] Changesets are provided or not needed

[changeset-bot[bot]]

⚠️ No Changeset found

Latest commit: 2f014ec67ba44857000a025041808ac319a34bf6

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[netlify[bot]]

✅ Deploy Preview for refine-doc-live-previews ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	2f014ec67ba44857000a025041808ac319a34bf6
🔍 Latest deploy log	https://app.netlify.com/sites/refine-doc-live-previews/deploys/63c57e356ed18600083c6f8a
😎 Deploy Preview	https://deploy-preview-2945--refine-doc-live-previews.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[aliemir]

Hey @Pagebakers, thank you for your effort! Looks fantastic 🚀 🚀 We'll review the PR this week, as soon as possible and try to release the package very soon 🙏 🙏

We had a quick chat with the team about the PR and discussed on adding @pankod/refine-chakra-ui and extending this package from it so we can replace some of the implementations with the ones from @pankod/refine-chakra-ui so there will be less code to maintain in Saas UI integration. 🤔 Any thoughts on this one?

Thanks again for the great work 🥇

[Pagebakers]

Thanks @aliemir that makes sense, there is some duplicate code indeed. I will look into it and test if it's feaseble.

[aliemir]

@Pagebakers, let's collaborate for this. 🤝 We've just launched @pankod/refine-chakra-ui and our team is feeling confident on handling the changes quickly. 🚀 🚀

Can you mark Allow edits from maintainers as checked? (Should be at right side of this PR). @salihozdemir and @yildirayunlu will try to push some commits to share common parts with our chakra-ui package.

Let me know if this works out for you 🙏

[Pagebakers]

I don't see the option, but I've added them both as collaborators to the fork.

This is great, thanks a lot!

[salihozdemir]

@Pagebakers, When we run your base example, we didn't see so much difference between the @pankod/refine-chakra-ui package. Our biggest expectation was to have <DataTable> and Form components. Can you integrate these components into your example with using useTable and useForm hooks in the @pankod/refine-core package?

At the same time, it would be nice to have following changes:

• Creating CRUD components with saas-ui's <Page> component.
• Creating the <Sider> component with saas-ui's <List> and <Colapse> component.
• Creating an example with using saas-ui's <StepForm>.
• Creating examples with using saas-ui's <Modal> and <Drawer> components for creating and editing records.

This is what we can see at a glance, but we believe you can make many changes to make the 'saas-ui' stand out more 🚀

[Pagebakers]

@salihozdemir thanks for the feedback.

1. I wasn't sure yet how to implement the Table / Forms as Refine uses it's own wrapper hooks around these and the Saas UI components use useForm / useFormContext / useTable internally. Do I need to Refine useForm hook, or can the default hook form hook can be used? Any suggestions?
2. The Page component is currently not OSS, but AppShell / Sidebar have been added already. I will also add NavGroup (collapsible) / NavItem instead of the custom Buttons.
3. useModals with Modals/ Drawer examples should be no problem.
4. StepForm / FormDialog depends on point 1.

[salihozdemir]

Hey @Pagebakers 👋, I think you can create your useForm and useTable hooks in the @pankod/refine-saas-ui package. These hooks should return compatible properties for <Form> and <DataTable> components. Since, <Form> and <DataTable> components based on react-hook-form and react-table libraries, you can use @pankod/refine-react-hook-form and @pankod/refine-react-table packages for creating your hooks. So, you can use useForm hook from @pankod/refine-react-hook-form package and map return values to <Form> component. Same way, you can use useTable hook from @pankod/refine-react-table package and map return values to <DataTable> component. I hope this helps you.

[Pagebakers]

@salihozdemir Thanks.

I've updated the Sider to use NavGroup & NavItem, this cleaned up the component a lot.

Now working on the forms, created a new Form wrapper component and you're able to build forms like this:

import { useEffect } from "react";
import { Edit, Field, FormLayout } from "@pankod/refine-saas-ui";
import { useSelect } from "@pankod/refine-core";
import { useForm } from "@pankod/refine-react-hook-form";

import { IPost } from "../../interfaces";

export const PostEdit = () => {
    const form = useForm<IPost>();

    const {
        refineCore: { queryResult },
        resetField,
    } = form;

    const { options } = useSelect({
        resource: "categories",
        defaultValue: queryResult?.data?.data.category.id,
        queryOptions: { enabled: !!queryResult?.data?.data.category.id },
    });

    useEffect(() => {
        resetField("category.id");
    }, [options]);

    return (
        <Edit form={form}>
            <FormLayout>
                <Field
                    name="title"
                    label="Title"
                    rules={{ required: "Title is required" }}
                />
                <Field
                    name="status"
                    label="Status"
                    type="select"
                    options={[
                        {
                            value: "published",
                            label: "Published",
                        },
                        {
                            value: "draft",
                            label: "Draft",
                        },
                        {
                            value: "rejected",
                            label: "Rejected",
                        },
                    ]}
                    rules={{ required: "Status is required" }}
                />
                <Field
                    name="category.id"
                    label="Category"
                    type="select"
                    options={options}
                    rules={{ required: "Status is required" }}
                />
            </FormLayout>
        </Edit>
    );
};

[yildirayunlu]

Hey @Pagebakers Are there any updates? Is there anything we can help with? 🚀

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.