sailscastshq/boring-stack

The Reliable Full-Stack JavaScript Stack: Ship products with battle-tested technologies. Say no to chasing JavaScript trends.

boring-stack's Issues

Update mellow-react to use the latest syntax in inertia-sails

Description

mellow-react still use the old syntax

Setup some TS configs

Update mellow-svelte to use the latest syntax in inertia-sails

Support flash messages

Description

Flash messages are a stable and boring way to transfer messages from one page to the other leveraging session. For example, you want to "flash" a success, error, or even just a message from one action and then in another page you want to display that message.

With this implementation inertia-sails will leverage the new sails-flash hook and share a flash prop for every request. The signature of the flash prop is an object with 3 properties:

const flash = {
  success: [],
  error: [],
  message: []
}

With this implementation, in your pages you can then reference the flash prop like flash.success or use the usePage hook to get the flash prop. Here is an implementation from Hagfish that uses the flash messages in AppLayout so flash messages can be seen in the dashboard(my components are in Vue you can adjust accordingly for React or Svelte):

import { ref } from 'vue'
const messages = ref(usePage().props.flash.message)
const errors = ref(usePage().props.flash.error)
const successes = ref(usePage().props.flash.success)

Since flash always returns an array, we can loop like so:

<template>
  <main class="p-4 text-gray md:mx-auto md:mt-4 md:w-9/12 md:p-0 lg:w-7/12">
    <template v-for="message in messages">
      <Message severity="info">{{ message }}</Message>
    </template>
    <template v-for="error in errors">
      <Message severity="error">{{ error }}</Message>
    </template>
    <template v-for="success in successes">
      <Message severity="success">{{ success }}</Message>
    </template>
    <slot></slot>
  </main>
</template>

Setup prettier

Add PR template

This will help sure that every PR received will be explained properly for easy review. This you can know the purpose without having to read the code first.

Rewrite create-sails with clack

This will be the 1.0 of create-sails.

We will be using clack from the folks at Astro.

This is not just switching the CLI framework used, but the way create-sails work will also change.

Move mellow-svelte to Shipwright

Add Mellow template for Vue

Related to issue #13

Add the "How to Contribute to Open Source by Kelvin" link to the contributing. md file

Having this link How to Contribute to Open source by Kelvin in the contributing.md makes it easier for first-timers to watch and become familiar with open source in general.

Move create-sails to the boring-stack repo

As part of the re-architecting of the repos, let's move the create-sails repo to a subfolder called create-sails/

Add documentation for Pages and Layouts

Description

Currently there is no docs for adding pages and layouts in a Boring Stack project and even though folks can go to the inertia docs, to get the docs, I rather not because a couple of things are different.

Add an Issue Template to Contributing Guide

There is no format on how to create an issue in the contributing guide and I believe that just as making a PR and commiting good, clear messages are important, creating a good issue that is clear and straight forward is just as important.

Move mellow-vue to Shipwright

Update mellow-vue to use responses and exits

Replace space in square bracket with x e.g [x]

• I have checked and this issue does not exist

Add a list of commit types and their description

This would help contributors easily use the appropriate commit keyword for their changes to the repo

Return a string for validation errors

Most likely Sails will only send the first validation error that happens on a field. Let's unwrap this as string so it's easier to consume client side

Add `InputField` component to Mellow React template

Description

This issue aims to implement a new InputField component in the mellow-react template of the project. The InputField component is intended to provide a reusable input field with customizable options, such as different types (name, email, password) and different states (default, valid, invalid).

Parent Issue #17

Screenshot

Changes to be Made

1. Create a new file component directory with filename within the components directory InputField/input-field.js to contain the implementation of the InputField component.
2. Define the InputField component as a functional component using the React library.
3. Create a MellowIcon directory within within the components directory to implement all associated icons in components (i.e EnvelopeIcon, PortraitIcon, EyeIcon, LockIcon), make this Icon components reusable with props such as size, color and additional props using the spread operator (...props).
4. Define the prop types for the component, including name, label, placeholder, type, and state as required.
5. Within the component, create a ref using the useRef hook to reference the input element.
6. Implement the component's JSX structure, including a label, input field, icons, and error message display.
7. Dynamically apply CSS classes to the input field based on the field's state (i.e. default, valid, invalid) prop using the clsx library.
8. Handle different type props (name, email, password) to display the appropriate icons.
9. Add event handling to the password EyeIcon component to toggle the visibility of the password text.
10. Write the necessary CSS styles to achieve the desired visual appearance and behavior of the InputField component.

Criteria

• The InputField component should render an input field with associated label, icons, and optional error message.
• The component should accept various props, such as name, label, placeholder, type, and state, with appropriate prop type validations using PropTypes.
• CSS classes and styles should be applied to the input field dynamically based on the provided state prop.
• The component should handle the different type props to display the corresponding icons.
• Event handling should be implemented for the password icon to toggle the visibility of the password text.

Additional Notes

• Ensure that the InputField component is reusable, configurable, and can be easily integrated into different forms throughout the project.
• Write unit tests (if possible) to validate the component's behavior, including prop type validations and event handling.

Add support for validation errors

Currently inertia-sails don't support handling validation errors gracefully and in the style of Inertia.

Add Mellow template

Mellow is the default starter template of the Boring Stack. The Boring Stack Mellow is a minimal, simple implementation of User authentication, including

• login,
• registration,
• password reset,
• email verification, and
• password confirmation.

In addition, Mellow includes a simple "profile" page where your user can update their name, email address, and password.

Svelte page has a link for webpack that does not link to the homepage of the project

Description

Svelte page has a link for webpack that does not link to the homepage of the project
...

Current behavior

links to some akward page
...

Expected behavior

link to the homepage of the project
...

Replace space in square bracket with x e.g [x]

[x] I have checked and this issue does not exist

Add Mellow template for Svelte

Related to issue #13

Add basic docs

Introduction

• Why the name
• Who is it for
• What's in the stack
• Getting started

The Basics

• Routing
• Navigation
• Redirects
• Shared data

Guides

• Authentication
• Authorization
• Database
• Email
• Session

Deploy

• Render

Configurations

• Type checking JS files

Move inertia-sails to the boring-stack repo

Let's move the inertia-sails repo to a subfolder inertia-sails/ on the boring-stack repo

Move mellow-react to Shipwright

Fix TypeScript compiler warning on alias

Add CONTRIBUTING.md

This should be a detailed guide on how to quickly get started contributing to the boring-stack and it's ecosystem of packages. Including the templates.

Add create-sails-generator

As I continue to work on Sails.js projects within The Boring JavaScript Stack, I've encountered challenges in maintaining development efficiency and consistency across our codebase. In an effort to address these issues, I am proposing the introduction of create-sails-generator, a tool tailored specifically for development in The Boring JavaScript Stack.

With the introduction of create-sails-generator you should be able to run:

sails generate page dashboard

And a file will be created in assets/js/pages for you. If you are using React it should create a dashboard.js, and if you are using Vue, it should create dashboard.vue, etc.

Also for things like the responses/inertia.js response we can evolve these responses by letting create-sails-generator expose commands for you to get the latest changes by running sails generate response inertia for example.

The sky is the limit to the codegen we can do with this generator in order to improve the DX of working with TBJS.

Let me know what you all think.

Add jsconfig.json to the boring-stack

Primarily this will be used to have to enforce TypeScript checking in JavaScript files in VS Code.

Update README

README should be updated showing the ecosystem of packages that makes up The Boring JavaScript Stack as well as contributors to the boring-stack repo

Add issue template

This will help to ensure that any issue received will be organized and straight to the point.

Add `Button` component to Mellow React template

Add Button Component for mellow-react template

Implementation

• Use prop-types for type checking - https://www.npmjs.com/package/prop-types
• Implement button variant via prop
• • primary
• • outline
• Implement button width via prop
• • fullwidth (boolean)
• Implement button inactive state via prop
• • inactive (boolean)
• Implement button link via href prop
• Implement events in via other props

Parent Issue: #17

create-sails: Implement downloading project from templates folder

The way create-sails works currently need to be changed to accommodate the new folder structure for templates

Add Mellow template for React

Related to issue #13

Web bundler

I think there should be an option for vite since it’s something most people would like to opt for @

List out the tech you'd get with The Boring JavaScript Stack

I've seen a bit of confusion with what The Boring JavaScript Stack is, it might be obvious to me and a lot of folks that follow me online but for folks coming in contact with the project for the first time, we need to do better to let them know what they are getting.

This issue should update the README making it clear that TBJS is a full-stack JavaScript solution to building modern SPA and then list out the tech that make up the stack

typo: mention of "Vue 3" in README for mellow-react and mellow-svelte

You can find mention of "Vue 3" on the READMEs of the mellow-react and mellow-svelte.

templates\mellow-react\README.md

This template should help get you started developing with a modern Sails fullstack application with Inertia and Vue 3

templates\mellow-svelte\README.md

This template should help get you started developing with a modern Sails fullstack application with Inertia and Vue 3

It should read the respective libraries for sure.

Upgrade templates to the latest version of Inertia

https://github.com/inertiajs/inertia/releases/tag/v1.0.9

Bug with non-inertia actions not having access to the flash object

Description

Currently non-inertia pages/actions won't be able to read flash messages
...

Current behavior

When a flash message is shared via req.flash, it is being consumed the inertia middleware even for pages that are non-inertia
...

Expected behavior

Pages and actions that are non-inertia should be able to read from the flash object.
...

Replace space in square bracket with x e.g [x]

• I have checked and this issue does not exist

Fix typo error on ReadMe

In the description of The Boring JavaScript Stack in the ReadMe, there is a duplicate word on the experience of

This stack is based on the experience of on the experience of Kelvin Omereshone and contributors.

Update mellow-vue to signup and login to handle validation errors

Current behavior

Validation errors are not being handled in mellow-vue

Expected behavior

Validation errors should be handled in mellow-vue

Also related to #55 and #79

Use custom responses and exits

Description

For the longest time sails.inertia.render felt like a hack but it was the only way I thought possible at the time to get the req and res needed to implement the Inertia protocol.

Ideally I'd like for the Inertia implementation in Sails to embrace actions2 exits. This was the syntax I've dreamt about for a while

module.exports = {
  friendlyName: 'Home',

  description: 'Home index.',

  inputs: {},

  exits: {
    success: {
      responseType: 'inertia'
    }
  },

  fn: async function () {
    return { page: 'index' }
  }
}

It confirms to how Sails return or throw responses.

This implementation will solve #78 as well because the race condition will no longer exists as sails.inertia.render won't be implemented at all in the InertiaMiddleware

Deprecate sails.inertia.location and sails.inertia.render

These two methods will be deprecated in favour of using custom responses

• inertia - Handles inertia requests
• inertiaRedirect - Handles inertia redirects

The middleware will now be lightweight as it sets the shared props and flash messages.

Upgrading

For now you'd have to just copy the inertia and inertiaRedirect responses in api/responses/ of the mellow-vue template into your applications api/responses. In the future I think I'll provide a Sails generator that will expose sails generate response inertia and sails generate response inertiaRedirect so we can evolve these responses and you run a single command to get the updates if need be.

Let me know your thoughts on this.

Refactor test to use the recommended locators for Playwright

Update sails lift command

Update sails lift command from "sails lift" to "npx sails lift"

Error Response don't work

Hello,

When i try to do this in action 2:

sails.inertia.share('errors', {
        password: errorMessage
      })
      throw { badCombo: 'back' }

In the front "Vuejs", the inertia's form trigger onSuccess evenement 😢

form.post('/login',{
    onSuccess:()=>{
      console.log('success:',form.errors)
    },
    onError:()=>{
      console.log('error:',form.errors)
    }
  })

And form.errors has no keys....

Do you think Blueprints in sails should be deactivated?

Description

I noticed that in the boring-stack, the sails blueprint API is activated, and it works. Though it fetches the data of the page as HTML, not JSON.

I want to be sure if the blueprints API in any way aids inertia, or if it poses no flaw.
I am also pointing it out because the page I am able to fetch with the blueprints API is an authenticated page.

Current behavior

When I run localhost:1337/api/articles, I get my response as JSON on Postman. (can be accessed, not authenticated route)

However, when I run localhost:1337/articles I get my response as HTML on Postman. (should not be access, authenticated route)

Expected behavior

If it is possible for localhost:1337/articles to not be accessible since it is a page, it might be authenticated.

Feel free to ask more questions. @DominusKelvin
...

Replace space in square bracket with x e.g [x]

[x] I have checked and this issue does not exist

When more than 2 users are logged in

Description

When there are more than 2 users logged in and are making a request to server at the same time, I get an error

error: Sending 500 ("Server Error") response:
Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client
at new NodeError (node:internal/errors:405:5)
at ServerResponse.setHeader (node:_http_outgoing:652:11)
at ServerResponse.header (/Users/DavidMendesDaSilva/Sites/h2pro-webapp/node_modules/express/lib/response.js:776:10)
at ServerResponse.send (/Users/DavidMendesDaSilva/Sites/h2pro-webapp/node_modules/express/lib/response.js:170:12)
at ServerResponse.json (/Users/DavidMendesDaSilva/Sites/h2pro-webapp/node_modules/express/lib/response.js:267:15)
at hook.render (/Users/DavidMendesDaSilva/Sites/h2pro-webapp/node_modules/inertia-sails/private/inertia-middleware.js:52:20)
at Object.fn (/Users/DavidMendesDaSilva/Sites/h2pro-webapp/api/controllers/order/view-orders.js:168:26)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
...

Current behavior

only one user request is getting completed and the other one normally gets the error and crashes.
...

Expected behavior

Both users should be able to make requests at the same time
...

Replace space in square bracket with x e.g [x]

[x] I have checked and this issue does not exist

Little typo

hey @DominusKelvin , there is a little typo in the CONTRIBUTING.md. this could serve as a good first issue

Move templates to templates/mellow-[frontend-framework]

Create sails with react doesn't work

Using the command npx create-sails <project-name> --react on windows doesn't create react components.
It's still EJS