Code Monkey home page Code Monkey logo

kirimase's Introduction

Logo for Kirimase

Kirimase

npm_version

Kirimase is a command-line tool for building full-stack Next.js apps faster. It supercharges your development workflow, allowing you to quickly integrate packages and scaffold resources for your application with best practices in mind.


Kirimase Demo

Watch the most recent demo here

Check out the official tutorial here

Features

  1. Initialization and Configuration: quickly add and set up essential packages to jump-start your Next.js project.
  2. Code Generation: scaffold models, views, and controllers directly from the CLI.

Quick Start

Install Kirimase CLI globally:

npm install -g kirimase

If you don't already have a Nextjs app, run create-next-app with your preferred package manager.

Then run the following command within the directory of your project:

kirimase init

Note: Kirimase is not compatible with the the pages directory.

Commands

Run these commands within the directory of your Nextjs app:

1. kirimase add

Initializes and configures the following packages for your Next.js project, categorized into:

ORM

Drizzle-ORM

  • Based on your chosen database type (PostgreSQL, MySQL, SQLite), Kirimase sets up the required files for Drizzle-ORM, drizzle-zod for validations and and drizzle-kit to manage migrations.
  • Scripts are auto-added to package.json for immediate use of drizzle-kit.

Prisma


Authentication

Auth.js

  • Generates files for Auth.js (Next-Auth), including the latest Drizzle adapter. (For PlanetScale, references are excluded as it doesn't support foreign keys).
  • Generates a generic sign-in component for immediate use within your Next.js project.
  • Wraps the root layout with the auth provider and generates utilities for auth checks and redirects in your Next.js routes.

Clerk

  • Generates files for Clerk including all necessary config.
  • Wraps the root layout with the auth provider and generates utilities for auth checks and redirects in your Next.js routes.

Lucia

  • Generates files for Lucia including all necessary config.
  • Generates UI and API routes for sign-in and sign-up

Kinde

  • Generates files for Kinde including all necessary config.
  • Generates sign in component and route handler

Other

tRPC

  • Generates files to configure tRPC with the app router.
  • Provides client-side tRPC and scaffolds server-side configuration using the experimental server-invoker pattern.
  • Wraps the root layout in the tRPC provider.

Shadcn-UI

  • Installs and configures Shadcn-UI including button and toast components.
  • Inserts the toast-provider (<Toaster />) to the root layout for instant toast notifications in your Next.js app.

Stripe

  • Installs and configures Stripe within your Next.js project so you can start accepting subscription payments.

Resend

  • Installs and configures Resend

Kirimase also adds relevant keys to your .env which you'll need to provide values for.


2. kirimase generate

Akin to rails scaffold but for Next.js:

Kirimase generates:

a) Model:

  • Generates a drizzle schema with column types based on your SQL flavor and database provider.
  • Uses drizzle-zod to generate Zod schemas for frontend and backend validation.
  • Generates queries and mutations for CRUD operations, fully typed and optimized for consumption via a Next.js front-end.

b) Controller:

  • Gives you an option to scaffold tRPC, Server Actions and/or API routes.
  • Uses Zod schemas from models for request validation.
  • Includes built-in error handling for API routes and auto-adding of tRPC routes to the root router.

c) Views:

  • Scaffolds views using Shadcn-UI to enable immediate CRUD operations (including select fields for adding relations and datepickers for dates).
  • Option to use either React Hook Form with tRPC or plain React (useOptimistic and useValidated Form hooks)

Run in non-interactive mode

As of v0.0.23, you can run kirimase init and kirimase add entirely via the command line as follows:

kirimase init -sf yes -pm bun --orm prisma -db pg -a next-auth -ap github discord -mp trpc stripe resend -cl shadcn-ui -ie yes
Command Short Flag Long Option Description Argument
init - - initialise and configure kirimase -
- -sf --src-folder use a src folder yes or no
- -pm --package-manager package manager <pm>
- -cl --component-lib component library <component-lib>
- -o --orm orm <orm>
- -db --db database ("pg", "mysql", "sqlite") <db>
- -dbp --db-provider database provider - important if using drizzle <dbp>
- -a --auth auth <auth>
- -ap --auth-providers auth providers (if using next-auth) <providers>
- -mp --misc-packages packages ("trpc", "shadcn-ui", "resend") <packages>
- -ie --include-example include example yes or no

Contributing

Keen on enhancing Kirimase? Contributions, bug reports, and feature requests are always welcome. Feel free to open an issue or submit a pull request.

To run locally:

pnpm i
pnpm run dev

npm install -g . (in a second terminal - this will then make kirimase available across your machine using "kirimase *command*")

License

MIT

kirimase's People

Contributors

nicoalbanese avatar elie222 avatar omegahawkeye avatar afogel avatar kddige avatar osterkraft avatar codeagencybe avatar dugjason avatar josephdburdick avatar kairedblue avatar martinnormark avatar pjholmes avatar sa-ar avatar sooditk avatar dinhkhanh avatar yursky avatar blupandaman avatar

Stargazers

Osean avatar Kristofer P. avatar Leo Pasquini avatar  avatar ezeja emmanuel chibuike avatar  avatar

Watchers

 avatar Osean avatar

kirimase's Issues

[Feature Request] Generate child model after parent model generated

From kirimase created by xkalf: nicoalbanese#141

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
i generated the products table and few days later i needed to add variant table referenced to products i generated variant and manually add product list component
Describe the solution you'd like
A clear and concise description of what you want to happen.
if i choose model to reference column type add automate child models to parent models
Additional context
Add any other context or screenshots about the feature request here.

[Feature Request] Zenstack

From kirimase created by andrictham: nicoalbanese#174

Is your feature request related to a problem? Please describe.
Zenstack is an extension of Prisma for implementing authorization, that works with Next.js pages & app routers, and has documented integrations with Clerk and NextAuth, as well as tRPC.

Authorization is a missing piece in Kirimase, and adding Zenstack seems like an obvious choice given that it plays nice with the other pieces that are already supported by Kirimase.

It will also make bootstrapping a Zenstack project from create-t3-app easier, and authorization is also a missing piece in the T3 Stack.

Describe the solution you'd like
Add Zenstack to Kirimase

Additional context
โ€”

[Feature Request] Enhance the generate command to support interactive relationship prompts

From kirimase created by yooyea: nicoalbanese#127

Description:

Currently, when using the generate command to create fields, configuring relationships can be a bit cumbersome. I suggest adding an interactive prompt to inquire whether the user wants to establish relationships and automatically handle the connection if needed.

Feature Details:

Relationship Type: When generating fields, the command could prompt the user to confirm the existence of relationships and provide a list of options for relationship types, such as one-to-one, one-to-many, etc.

Relationship Connection: If a relationship is confirmed, the command could further prompt the user to select the fields involved in the relationship, ensuring that the generated code includes the correct relationship connections.


This enhancement would make it easier for users to configure and manage relationships when generating fields, reducing the need for manual intervention and improving the accuracy of the generated code.

Please consider the feasibility of this feature and thank you for your time and effort.

Lucia auth bug

From kirimase created by olivebishop: nicoalbanese#189

Config File
Please copy the contents of your kirimase.config.json file.

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

  1. Go to '...'
  2. Click on '....'
  3. Scroll down to '....'
  4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

  • OS: [e.g. iOS]
  • Browser [e.g. chrome, safari]
  • Version [e.g. 22]

Additional context
Add any other context about the problem here.

[Feature Request] Modify/update existing MVC from 'kirimase generate' process

From kirimase created by briand1l: nicoalbanese#150

Is your feature request related to a problem? Please describe.
'kirimase generate' works wonderfully to scaffold the MVC of something, e.g. Projects. The only problem is its all processed and written to the db, React components, etc, which then require manual edits to add or delete things to the data model or view. As an example if initially I decide that Projects requires a project_name, project_description and project_url, and then down the road I realize that I want a project_image_url for a cover photo, I have to re-do the entire process (it does gracefully overwrite mind you!).

Describe the solution you'd like
If there were some persistence of the schema you just added with 'kirimase generate' (e.g. Projects) that the CLI would interpret and prompt to update instead of creating new, it would make this framework that much better. e.g. if I already created 'projects', ran the Prisma/Drizzle scripts but then wanted to add a 'project_image_url' to it. I suspect the problem with edit/update would become maintaining the View side, as it could be modified by the user manually.

[Feature Request] File Storage support

From kirimase created by knajjars: nicoalbanese#154

Is your feature request related to a problem? Please describe.
One of the main features when looking for a fullstack solution is the file storage, there are libraries that easily integrate with Nextjs like uploadthing, maybe this would be something interesting to add!

Describe the solution you'd like
Users can select a file storage from certain options: vercel blob, uploadthing, s3 API or a generic solution which accepts different adapters that are s3-compatible.

Schema not included in drizzle db constant

From kirimase created by mcapodici: nicoalbanese#75

The generated db/index.ts code was this, but it is not enough:

export const db = drizzle(pool);

To use db.query you need this:

export const db = drizzle(pool, { schema });

Where schema is this import also in db/index.ts:

import * as schema from './schema'

And you also need an index.ts in the schema folder, with this:

export * from './auth';
export * from './computers';

Email verification, password reset

From kirimase created by paulks-software: nicoalbanese#151

Thanks! this is a powerful cli! I always miss standard features like email verification and reset password in similar projects, and can we use nodemailer instead of resend? These are quite basic features of an auth (which legacy systems like wordpress had like 20 years ago for free and now everybody shills additional services like clerk and resend, this feature of auth somehow became commoditized and i do not get it, maybe because it is so difficult for a beginner to implement this in next, if kirimase would handle this problem for all auth providers imo this would be a deal braker, well anyway, i will try to do this for lucia auth

Middleware bug using clerk auth

From kirimase created by olivebishop: nicoalbanese#190

Config File
Please copy the contents of your kirimase.config.json file.

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

  1. Go to '...'
  2. Click on '....'
  3. Scroll down to '....'
  4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

  • OS: [e.g. iOS]
  • Browser [e.g. chrome, safari]
  • Version [e.g. 22]

Additional context
Add any other context about the problem here.

[BUG] Reference error when child models belong to a user

From kirimase created by kaikun213: nicoalbanese#172

Config File

{
  "hasSrc": true,
  "packages": [
    "shadcn-ui",
    "prisma",
    "next-auth"
  ],
  "preferredPackageManager": "bun",
  "t3": false,
  "alias": "@",
  "analytics": true,
  "rootPath": "src/",
  "componentLib": "shadcn-ui",
  "orm": "prisma",
  "driver": "pg",
  "auth": "next-auth"
}

Describe the bug
If I select the option "Does this model belong to the user? yes" for child models, it will mess up the references due to the fields becoming DocumentType instead of documentTypes

To Reproduce

? Please select the resources you would like to generate: Model, Controller, View
? Please select the type of view you would like to generate: Server Actions with Optimistic UI
? Please select any additional controllers you would like to generate:
? Please enter the table name (plural and in snake_case): organisations
? Please select the type of this field: string
? Please enter the field name (in snake_case): name
? Is this field required? yes
? Would you like to add another field? no
? Would you like to set up an index? no
? Would you like timestamps (createdAt, updatedAt)? yes
? Does this model belong to the user? yes
? Would you like to add a child model? (organisations) yes
? Please enter the table name (plural and in snake_case): document_types
? Please select the type of this field: string
? Please enter the field name (in snake_case): name
? Is this field required? yes
? Would you like to add another field? no
? Would you like to set up an index? yes
? Which field would you like to index? name
? Would you like timestamps (createdAt, updatedAt)? yes
? Does this model belong to the user? yes
? Would you like to add a child model? (document_types) no
? Would you like to add a child model? (organisations) yes
? Please enter the table name (plural and in snake_case): documents
? Please select the type of this field: string
? Please enter the field name (in snake_case): title
? Is this field required? yes
? Would you like to add another field? no
? Would you like to set up an index? yes
? Which field would you like to index? title
? Would you like timestamps (createdAt, updatedAt)? yes
? Does this model belong to the user? yes
? Would you like to add a child model? (documents) no
? Would you like to add a child model? (organisations) no
? Would you like to add a link to 'Organisations' in your sidebar? yes
โ„น Updated Prisma schema                                                                                   10:38:45 AM
? Would you like to add a link to 'Document Types' in your sidebar? yes
โ„น Updated Prisma schema                                                                                   10:38:47 AM
? Would you like to add a link to 'Documents' in your sidebar? yes
โ„น Updated Prisma schema                                                                                   10:38:48 AM

Results in

model Organisation {
  id           String         @id @default(cuid())
  name         String
  userId       String
  user         User           @relation(fields: [userId], references: [id], onDelete: Cascade)
  createdAt    DateTime       @default(now())
  updatedAt    DateTime       @updatedAt
  DocumentType DocumentType[]
  Document     Document[]
}

Which for example gives an error in lib/api/organisations/queries.ts

export const getOrganisationByIdWithDocumentTypesAndDocuments = async (id: OrganisationId) => {
  const { session } = await getUserAuth();
  const { id: organisationId } = organisationIdSchema.parse({ id });
  const o = await db.organisation.findFirst({
    where: { id: organisationId, userId: session?.user.id!},
    include: { documentTypes: { include: {organisation: true } }, documents: { include: {organisation: true } } }
  });
  if (o === null) return { organisation: null };
  const { documentTypes, documents, ...organisation } = o;

  return { organisation, documentTypes:documentTypes, documents:documents };
};

The error:

Object literal may only specify known properties, but 'documentTypes' does not exist in type 'OrganisationInclude<DefaultArgs>'. Did you mean to write 'DocumentType'?ts(2561)

Expected behavior
If I generate without the "belongs to user" option for child models, it works well.

Screenshots

Desktop (please complete the following information):

  • OS: [e.g. iOS]
  • Browser [e.g. chrome, safari]
  • Version [e.g. 22]

Additional context
Add any other context about the problem here.

Feature request: Support of Kysely

From kirimase created by matthiasfeist-foodfacts: nicoalbanese#61

Hi.

I love your project and have used it quite a lot. I'm using a lot of geospatial data in my projects and found that Drizzle is not really the best query builder for this but that https://kysely.dev/ actually works a little bit better because it's a tiny bit more mature.
Since those 2 projects are relatively similar, I wonder if it might be interesting for you to support them both?

Init error if opt out Shadcn

From kirimase created by ralvs: nicoalbanese#182

Config File

{
  "hasSrc": false,
  "packages": [],
  "preferredPackageManager": "pnpm",
  "t3": false,
  "alias": "@",
  "analytics": true,
  "rootPath": ""
}

Describe the bug
Does not matter the following combination of options, if I choose None for the component library, I get the error.

โ— Checking project for existing packages...                                                                                                                                                                                                                                                                                                                                                                                                                 2:30:14 PM
โœ” Successfully searched project and found no additional packages.                                                                                                                                                                                                                                                                                                                                                                                          2:30:14 PM


? Select a component library to use: None
? Select an ORM to use: Prisma
? Please choose your DB type Postgres
? Select an authentication package to use: Clerk
? Select any miscellaneous packages to add: TRPC, Stripe, Resend
โ ‹ node:internal/fs/utils:921
    throw new ERR_INVALID_ARG_TYPE(
          ^

TypeError [ERR_INVALID_ARG_TYPE]: The "data" argument must be of type string or an instance of Buffer, TypedArray, or DataView. Received undefined
    at Object.writeFileSync (node:fs:2360:5)
    at replaceFile (file:///Users/renan/Library/Caches/pnpm/dlx/c5dbsceytau2sqvlf5gols4oue/18ecd85c3e4-4018/node_modules/.pnpm/[email protected]/node_modules/kirimase/dist/utils.js:29:8)
    at addPackage (file:///Users/renan/Library/Caches/pnpm/dlx/c5dbsceytau2sqvlf5gols4oue/18ecd85c3e4-4018/node_modules/.pnpm/[email protected]/node_modules/kirimase/dist/commands/add/index.js:103:17)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  code: 'ERR_INVALID_ARG_TYPE'
}

Node.js v20.11.1

To Reproduce
Steps to reproduce the behavior:

  1. pnpmx create-next-app@latest
  2. cd project
  3. pnpmx kirimase@latest init
  4. select "None" for the component library
  5. select the follow options
  6. error after select the miscellaneous packages

Desktop (please complete the following information):

  • OS: MacOS Sonoma
  • Browser: does not apply

db:push script missing from drizzle and postgres configuration

From kirimase created by JulioBarros: nicoalbanese#185

Config File
{
"hasSrc": true,
"packages": [
"shadcn-ui",
"drizzle",
"lucia"
],
"preferredPackageManager": "pnpm",
"t3": false,
"alias": "@",
"analytics": true,
"rootPath": "src/",
"componentLib": "shadcn-ui",
"driver": "pg",
"provider": "postgresjs",
"orm": "drizzle",
"auth": "lucia"
}

Describe the bug
I used pnpm dlx kirimase@latest init to create a new project. It all seemed to work fine but the "db:push": "drizzle-kit push:pg", was missing from package.json.

I believe it should be there. If not, sorry about the confusion.

To Reproduce
Create a new project with the options above.

Expected behavior
It should have the db:push command

Desktop (please complete the following information):
MacOS 14.4.1

[Feature Request] Add international api I18n

From kirimase created by xkalf: nicoalbanese#140

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
I'm making app in other languages after kirimase genrate i'm manually changing texts
Describe the solution you'd like
A clear and concise description of what you want to happen.
In json file set all the label texts and after generate i want to translate only json file
Additional context
Add any other context or screenshots about the feature request here.

[Feature Request] Add interactive REPL to trial new ideas on the CLI

From kirimase created by afogel: nicoalbanese#126

Is your feature request related to a problem? Please describe.
I'd be remiss if I first didn't say: THANK YOU! This project is incredible.

Sometimes, I would like to trial out queries or ideas in a repl without having to go through the entire request/response lifecycle to see whether the idea makes sense.
Rails has implemented this idea in its Rails console. Blitzjs has done something similar.

It would be great if we could mimic core ideas from the blitzjs implementation to enable this feature as a package.json script.

Describe the solution you'd like
On the CLI, I would be able to run bun kirimase:console and jump into an interactive REPL that has loaded my environment (and most importantly, my db config) so I could easily start testing out queries.

Feature Request: Add Magic Link Option

From kirimase created by mcapodici: nicoalbanese#64

I just manually added Magic Link to the scaffold that kirimase set up, and it was pretty easy! So I think it would be nice to have it as one of the built-in init options. It is particularly handy because when starting a project (or something I am just playing with) I don't want to go through and set up a custom OAuth on say Google.

Supporting it would be a case of adding this to route.ts:

import EmailProvider from "next-auth/providers/email";

...

    EmailProvider({
      server: process.env.EMAIL_SERVER,
      from: process.env.EMAIL_FROM
    }),

In addition adding to the .env file boilerplate, and adding a nodemailer dependency.

For local testing I would mention this handy util in the README:

docker run -p 3001:80 -p 2525:25 -d --name smtpdev rnwood/smtp4dev

Happy to make a PR if the idea is wanted.

Init fails, due to next.config not having the expected file extension.

From kirimase created by gaurangrshah: nicoalbanese#186

Config File

{
  "hasSrc": true,
  "packages": [
    "shadcn-ui",
    "drizzle"
  ],
  "preferredPackageManager": "npm",
  "t3": false,
  "alias": "@",
  "analytics": true,
  "rootPath": "src/",
  "componentLib": "shadcn-ui",
  "driver": "sqlite",
  "provider": "turso",
  "orm": "drizzle"
}

Describe the bug
when running npx kirimase init the cli is unable to find a next.config.mjs file. I currently has a legacy dependency (contentlayer) in this project and because of it we are forced to use the .cjs extension instead.

To Reproduce
Steps to reproduce the behavior:

  1. Rename next.config.mjs to next.config.cjs
  2. Run npx kirimase init on the project root
  3. See error

Expected behavior
I hope that the cli would be robust enough to able to check to see if any next-config is available and apply the changes to that file regardless of the extension used in the project.

Screenshots
~image

Desktop (please complete the following information):

  • OS: macOS Sonoma
  • Browser: Arc

Additional context
n/a

[Feature Request] Add quick postgre startup script with docker

From kirimase created by corentin-bot: nicoalbanese#139

Hey,

Just playing with kirimase ๐Ÿ‘

Add I thought it could be great to have a script to start un postgre database directly in docker. I used to dev with T3 stack and they have this feature. It's not a big deal to setup, but it's still nice to just create it with just a script command.

Here is the link of the script for postgre and mysql:
https://github.com/t3-oss/create-t3-app/tree/main/cli/template/extras/start-database

What do you think ?

[Feature Request] drizzle-planetscale connect() will be deprecated

From kirimase created by synhya: nicoalbanese#158

drizzle with planetscale generates code like this

export const connection = connect({
  url: env.DATABASE_URL
});

however docs say its not recommended way of handling connection
image

should be changed to ..

export const connection = new Client({
  host: env.DATABASE_HOST,
  username: env.DATABASE_USERNAME,
  password: env.DATABASE_PASSWORD,
});

with .env file updated respectively

[Feature Request] Enable drizzle queries rather than exclusively leveraging SQL API

From kirimase created by afogel: nicoalbanese#152

Is your feature request related to a problem? Please describe.
Currently, leveraging the drizzle query API is not set up when generating scaffolds out of the box.

Describe the solution you'd like
Create a src/lib/db/schema/index.ts that exports a schema object, e.g.

import * as animals from "@/lib/db/schema/animals";

export const schema = {
  animals,
};

In the src/lib/db/index.ts, pass the schema object into the drizzle client that gets instantiated, e.g.

import { drizzle } from "drizzle-orm/node-postgres";
import { Pool } from "pg"
import { env } from "@/lib/env.mjs";
import { schema } from "@/lib/db/schema";

export const pool = new Pool({
  connectionString: env.DATABASE_URL,
});
export const db = drizzle(pool, {
  schema
});

Whenever the generator creates a new model, the schema object gets automatically updated, e.g.

import * as animals from "@/lib/db/schema/animals";
import * as books from "@/lib/db/schema/books";

export const schema = {
  animals,
  books,
};

These changes will enable the drizzle query interface, which could simplify the default scaffolded queries that use drizzle.

kirimase is getting messy | add templating engine

From kirimase created by ahmedrowaihi: nicoalbanese#102

first of all, I AM SO THANKFUL TO YOU GUYS, I really love the effort and energy has been done here, and I would love to contribute to this project when I finish my final exams

I noticed that the boilerplates are becoming hard to track and maintain, so

Problem : the generators files are getting big and complex

solution

use an amazing templating engine
we can separate implementations for different options by keeping each on its own directory with
handlebarsjs

example:

  • auth
    • lucia.hbs
    • next-auth.hbs
    • etc...
  • orm
    • prisma.hbs
    • drizzle.hbs
    • etc...
  • mailing
  • resend.hbs
  • etc...
    etc...

this way we can keep the boilerplate easy to plug-play and also easy to debug and spot bugs

Rename Dashboard Route

From kirimase created by gaurangrshah: nicoalbanese#165

Is your feature request related to a problem? Please describe.
Currently the kirimase scaffold generates a dashboard that routes to the /dashboard route. This works well, but for Saas project where we have user facing dashboard this route is taking up prime routing real-estate.

Describe the solution you'd like
Rename the dashboard or allow renaming of dashboard via the kirimase.config.json so that we as devs have some control over this functionality.

Hydration Mismacth from NextThemesProvider: Warning Extra attributes form the server: class, style...

From kirimase created by gaurangrshah: nicoalbanese#168

Config File

{
  "hasSrc": false,
  "packages": [
    "shadcn-ui"
  ],
  "preferredPackageManager": "pnpm",
  "t3": false,
  "alias": "@",
  "analytics": true,
  "rootPath": "",
  "componentLib": "shadcn-ui",
  "auth": null
}

Describe the bug
I am not sure if this is true for others, but I've seen this hydration warning in every project I've scaffolded with kirimase so far. I've been meaning to track down the bug and finally got some time.

Seems the NextThemesProvider is causing the hydration mismatch. The fix I found for it was to dynamically import the component and seems to work on my end. Wanted to share the solution for anyone else facing the same issue. Here's my the commit from my repo where I made the change.

Expected behavior
Should not cause hydration issues on a new scaffold.

Screenshots
image

Desktop (please complete the following information):

  • OS: [MacOS Sonoma]
  • Browser [arc, safari]

[Feature Request] Prepare for Partial Prerendering

From kirimase created by leerob: nicoalbanese#87

While Partial Prerendering is not yet stable, we can start building apps that prepare for this model today to make enabling PPR as easy as flipping on the compiler optimization. The key is to move data fetches and other dynamic calls (like cookies or headers) down in the component tree and to wrap them with React Suspense.

For example, I saw some of the authentication code that marked a top level component as async, and then at the top of the component file made a call to get the user state. We might want to consider whether that is always necessary. For example, for routes where it's all or nothing for auth, Middleware might be a better place to put this logic. For routes where it's not, consider moving the auth promise further down in the tree, colocated in a component that is consuming it's data.

Since the entire route can be prerendered, including the Suspense fallback, this can help you more easily design loading states and have a very fast initial page load.

Example: https://github.com/leerob/leerob.io/blob/e9357c5d53737ae977d4bfcb1b58ac832d155b5f/app/page.tsx#L117-L132

Resources

Make it easily extensible

From kirimase created by elie222: nicoalbanese#56

Would be cool if there was a way to add to this without having to make a PR.
With each project being able to add pieces that fit their own workflow even if it doesn't help the wider public.

Sort of like VS Code snippets. You can use a package from someone else. Or write your own.

[Question] Validation when doing partial updates?

From kirimase created by trevorpfiz: nicoalbanese#180

I noticed that the update mutations expect the full object passed in. Is this because of the optimistic updates? How should we best handle cases where we only want to update part of the schema? Use .partial()?

These are the relevant bits of code I am referring to

export const updateReportSchema = baseSchema;
export const updateReportParams = baseSchema
  .extend({
    patientId: z.coerce.string().min(1),
  })
  .omit({
    userId: true,
  });
export const updateReport = async (
  id: ReportId,
  report: UpdateReportParams,
) => {

[ISSUE] emails can be larger than 31 characters and still be legitimate

From kirimase created by lexstefan: nicoalbanese#163

Config File

{
  "hasSrc": true,
  "packages": [
    "shadcn-ui",
    "drizzle",
    "lucia"
  ],
  "preferredPackageManager": "npm",
  "t3": false,
  "alias": "@",
  "analytics": true,
  "rootPath": "src/",
  "componentLib": "shadcn-ui",
  "driver": "sqlite",
  "provider": "turso",
  "orm": "drizzle",
  "auth": "lucia"
}

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

  1. Go to '...'
  2. Click on '....'
  3. Scroll down to '....'
  4. See error

Expected behavior
I expect to not get Invalid Email error when creating an account / signing in.

Screenshots

export const authenticationSchema = z.object({
  email: z.string().email().min(5).max(31),
  password: z
    .string()
    .min(4, { message: "must be at least 4 characters long" })
    .max(15, { message: "cannot be more than 15 characters long" }),
});

Desktop (please complete the following information):

  • OS: Windows 11 / WSL
  • Browser: Firefox
  • Version: Latest

Additional context
Public emails can be larger than expected, mainly because people with the same name got them before. Thus someone might have an email like: [email protected] [43 characters] and still be legitimate. To be safe, i'd set 64 characters to be absolute max.

Bug: Edge Case - Next project not created and init command working.

From kirimase created by DhairyaMajmudar: nicoalbanese#187

Describe the bug
command kirimase init is still running even if a folder has basic package.json file and app folder within it.

To Reproduce
Steps to reproduce the behavior:

  1. Create an empty folder
  2. initialise package.json file using command npm init
  3. create app folder within
  4. Now run the coammnd kirimase init

Expected behavior
command should exit execution while throwing the msg. " No Next.js project detected. Please create a Next.js project and then run kirimase init within that directory. "

Screenshots
image

Desktop (please complete the following information):

  • OS: Linux ( Debian )
  • Browser Firefox
  • Version Latest

Additional context
This can be prevented by adding more checks in the line 13 of file src/commands/init/index.ts

Localhost Based GUI to help build a Kirimase Application

From kirimase created by arvind-iyer-2001: nicoalbanese#157

Is your feature request related to a problem? Please describe.
Kinda frustrating to specify models and stuff using the CLI tool.
Sometimes, we need to make changes on the go to stuff like this and having a GUI can really help make it easier.
GUI can be like the Drizzle Studio and can really supercharge the experience of developing.
Fulfils the purpose of generating boilerplate code to build upon much easier and while being a Rails-CLI type Next.js App Builder.

Describe the solution you'd like
Process that would be like

  1. Create a Kirimase App
  2. Open GUI using npx kirimase studio
  3. Configure all Models that are required.
  4. Basically make it look like a CMS that helps build a Next.js Application.

[Feature Request] Create plugin functionality to allow extending generate prompts and templates

From kirimase created by vkefallinos: nicoalbanese#143

Is your feature request related to a problem? Please describe.

I am trying to add functionality to the generate cli

Describe the solution you'd like

A plugin functionality that allows to add resource types and prompts or add options on the existing resource types. It will then use the prompt answers to scaffold files.

Additional context

A plugin example is

import { select } from 'inquirer'
export default {
  name: 'admin',
  plugin(options) {
    return {
      resources: [{
        name: 'admin_view',
        label: 'Admin View',
        condition: (config) => config.adminView,
        prompt: async (config, resourceTypes,) => {
          const { adminView } = await select({
            name: 'adminView',
            message: 'Which admin view would you like to use?',
            choices: [
              { name: 'Dashboard', value: 'dashboard' },
              { name: 'Entities', value: 'entities' },
            ],
          });
          return { adminView };
        },
        generate: async (config, schema) => {
          if (schema.adminView === 'dashboard') {
            return [{
              path: 'pages/Admin.tsx',
              content: `import ...`
            }]
          }
        }
      }]
    };
  }
};

The beginning of an implementation here: https://github.com/vkefallinos/kirimase/blob/e77574f5e72cee05459f66acd2e3cc6da041d0bc/src/commands/generate/index.ts

[Feature Request] Set Inter as the base font for Shadcn

From kirimase created by moggiex: nicoalbanese#178

Is your feature request related to a problem? Please describe.
We're missing a few lines to set Inter as the base font for Shadcn out of the box, and we already half the work done as fontFamily is set in tailwind.config.ts, cn() already exists the import is preset too.

Describe the solution you'd like
layout.tsx add:

const inter = Inter({ subsets: ['latin'], variable: '--font-sans' });
import { cn } from '@/lib/utils';

and tweak the body line to
<body className={cn('font-sans antialiased', inter.variable)}>
Additional context
See here for the guide to nextJS https://ui.shadcn.com/docs/installation/next Had a look at the source, got lost around the adaptation of the ThemeProvider, so hence the feature request :)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.