Sushis aka SushiJS has now 600 π Users per month on npm! It is the best Agile Scrum and Waterfall web app framework for Project Managers and Developers, with our innovative Next Right Now 2 aka NRN2 by @miguelgargallo, developed at Harvard in 1 week to improve efficiency with the CIL markdown.
OTHER License
Bot releases are visible (Hide)
βΌοΈ Important, components are moved to ui into common and uncommon folders, to simplify.
βΌοΈ Down below is the guide to adapt to the new version the 3.0.0 and 3.0.1
- How to adapt the code to 3.0.0
A revolutionary framework blending Typescript, NextJS, TailwindCSS, and Framer Motion, founded on Agile principles. Introducing NRNx2 β the evolution of Next Right Now. Crafted by the brilliant Harvard University student of Project Management, Miguel Gargallo, @miguelgargallo. Brought to you by ITAMAESAN ORG β leading the development industry with Agile and Project Management methodologies.
β¨ As of version 3.0.1, SushiJS is available under the PylarAI Creative ML FREE License.
Our growth from August 2022 to May 2023 has been inspiring. With "sushis" averaging 273 monthly users and "sushis-demo" at 413 monthly users, we're thrilled by the community's support. Our commitment remains strong; we're scheduling regular bi-annual updates to ensure top-notch user experiences.
In 2022 alone, combined downloads for Sushi's software and Sushi's Demo exceeded 9815. The momentum continued into early 2023, with 4120 downloads for Sushi's software and 8250 for Sushi's Demo. This brings our total downloads to an impressive 12370.
We're also proud to note that our regular six-month update rhythm has positioned us as a reliable and comprehensive framework. For a detailed breakdown, please refer to the Downloads section.
npm i sushis
Work seamlessly with our 4-column system:
π§ Backlog | π· In Progress | β
Publish | π― Review
NRN2 is the evolution of Next Right Now, a framework that introduced the Numerical Reference Number (NRN) system to manage directory identification. This system is now integrated into SushiJS.
CIL is a facilitator to name errors and organize your project, to enumerate folders into a web dynamic project, to ensure a faster, reliable, and efficient identification for:
E.g.,
./ui/uncommon/02 Body/03 Carrousel/index.ts:1:10
It converts into CIL, the answer is:
uu0203-1:10
With the introduction of SushiJS, we've solved many challenges, making the development process quicker, more straightforward, and universally understandable between devs and non-devs. This includes project managers who understand coding basics but aren't deeply involved in the project's intricate file structures.
SushiJS introduced the NRNx2 Agile subsystem folder structure and development methodology.
The second main feature of The SushiJS Framework is the ability to create components that are reusable but not necessarily general for all the pages. This is the reason why we have created the "uncommon" folder. This folder is part of the framework, and it is an extra way create components that are not general for all the pages. It contains, the same strcuture until you navigate to the "elements" folder, and the order of the imports is customizable 100% by the developer.
We simplify from this 2.0.0
To this in 3.0.1
NRNx2 Agile is a project management methodology that combines the best of Agile and Waterfall. It's a hybrid approach that allows for more flexibility and control over the development process.
git clone [repository_link]
npm install
import Appbar from 'ui/uncommon/03_Body/13_Appbar'
- ui/common/
- ui/uncommon/
Delve deeper into folders like:
The "uncommon" directory is there for specialized components tailored for specific pages.
NRN stands for Next Right Now, and x2 symbolizes the integration of SushiJS Agile. This framework introduced a Numerical Reference Number (NRN) system to manage directory identification.
π£ SUSHIJS FRAMEWORK
πͺ---fonts
πͺ---lib
πͺ---src
πͺ---static
πͺ---styles
πͺ---ui
01: π, Cook rice. <- Prepare all your pages.
02: π§, Mix Vinegar, Oil, Sugar & Salt.
03: β², Cook until sugar is dissolved.
04: π₯£, Stir into rice.
05: π, Prepear fillings.
06: β¬οΈ, Put Nori on a bamboo mat.
07: β¬οΈ, Put rice with hands.
08: π², Spride rice over the nori.
09: π₯, Lay the filling.
10: π, Roll the bamboo mat and press.
11: πͺ, Cut with wet knife.
12: π£, Enjoy!
Take a look into the following directory structure:
π£ SUSHIJS FRAMEWORK
πͺ---fonts
πͺ---lib
πͺ---src
πͺ---static
πͺ---styles
πͺ---ui
π£ The UI Components Fix in 3.0.1
πͺ---ui
β π---common
β β π₯---00 Header
β β β β¬οΈ---00 Meta
β β β β π-----π₯£ index.ts
β β β β β²-----π Meta.tsx
β π---uncommin
β β π₯---02 Body
β β β β¬οΈ---06 WelcomeDescriptionText
β β β β β¬οΈ---06 WelcomeDescriptionText
β β β β π-----π₯£ index.ts
β β β β β²-----π Bento.tsx
sushis
and sushis-demo
now sync perfectly.app
folder; retained the common
folder.<Link>
and replaced react-use
package.π§βπ» Due to the recent numbers we decided to update the framework every 6 months for a solid maintenance and support. Please read the Letter to know more about the numbers.
π Now sushis
and sushis-demo
are now on the same version, the transition has been complete at 100% from 2.1.2
to 3.0.0
in code and content. We notice that the this site, ITAMAESAN uses the same technology to demonstrate!
π A real use case at BCN Hostess uses our framework to build their commercial website!
β
We maintain the essence of the framework, this means: no NextJS app folder or turbo are by the moment in our priorities, so we deleted the unused app
folder and we maintain the common
folder, which is the main folder of the framework. You can create it, it is still compatible with the framework, but we do not use it anymore. At your choice. See Deprecated
π± We improved the installation time from 9.1 seconds to 3.8 seconds, that is x2.4 times faster than before by reducing the number of packages from 395 to 372.
πΏ We also updated the depenendencies and devDependencies to the latest version.
π³ And we fixed the <Link>
by replacing <a>
into <p>
and the useInterval
into useState, useEffect
to delete the react-use
package.
Here in this table you have the details of the changes: Table of changes
This update date on Wed 16, August 2023.
We have the honor to present sushis 3.0.0 maintaining the essence of the framework.
The unique 2 changes you need to be aware of are:
import React, { useState, useEffect } from 'react';
instead of import { useInterval } from 'react-use'
to avoid the error of the linksNumber of Packages: The gh 2.1.2 npm 2.1.1 has more packages (395) compared to the gh 3.0.0 npm 3.0.0 (372), with the difference primarily due to the presence of the react-use
package.
Installation Time: The gh 2.1.2 npm 2.1.1 takes more time (9.1 seconds) to install the additional packages, whereas the gh 3.0.0 npm 3.0.0 installs fewer packages and completes faster (3.8 seconds).
Package Integrity Check: The gh 2.1.2 npm 2.1.1 mentions the integrity check of 6061 files during installation, which may have contributed to the longer installation time. This information is not present in the gh 3.0.0 npm 3.0.0.
Package Versions: Both setups share the same oackages (unless 1) for common packages, indicating consistency in dependencies.
Output Format: The outputs have slightly different formatting, but they both include information about the installed packages and installation times.
Type | Name | gh 2.1.2 npm 2.1.1 | --> | gh 3.0.0 npm 3.0.0 |
---|---|---|---|---|
Dependencies | ||||
@segment/in-eu | Dependencies | ^0.3.0 | --> | ^0.4.0 |
eslint-config-prettier | Dependencies | ^8.6.0 | --> | ^9.0.0 |
framer-motion | Dependencies | ^8.5.0 | --> | ^10.15.2 |
next | Dependencies | ^12.2.5 | --> | ^13.4.16 |
- react-use | Dependencies | ^17.4.0 | ||
DevDependencies | ||||
@types/node | DevDependencies | ^18.11.18 | --> | ^20.5.0 |
@types/react | DevDependencies | ^18.0.27 | --> | ^18.2.20 |
@typescript-eslint/eslint-plugin | DevDependencies | ^5.48.2 | --> | ^6.4.0 |
@typescript-eslint/parser | DevDependencies | ^5.48.2 | --> | ^6.4.0 |
autoprefixer | DevDependencies | ^10.4.13 | --> | ^10.4.15 |
eslint | DevDependencies | ^8.32.0 | --> | ^8.47.0 |
eslint-config-next | DevDependencies | 13.1.4 | --> | 13.4.16 |
eslint-plugin-prettier | DevDependencies | ^4.2.1 | --> | ^5.0.0 |
postcss | DevDependencies | ^8.4.21 | --> | ^8.4.28 |
prettier | DevDependencies | ^2.8.3 | --> | ^3.0.2 |
tailwindcss | DevDependencies | ^3.2.4 | --> | ^3.3.3 |
typescript | DevDependencies | ^4.9.4 | --> | ^5.1.6 |
Aspect | gh 2.1.2 npm 2.1.1 | gh 3.0.0 npm 3.0.0 |
---|---|---|
Downloaded Packages | 395 | 372 |
Installation Time | 9.1 seconds | 3.8 seconds |
BigText.tsx
import { useInterval } from 'react-use'
export default function BigText({ slides }: BigTextProps) {
const [currentSlide, setSlide] = React.useState(0)
const totalSlides = slides.length
useInterval(() => {
if (totalSlides - 1 === currentSlide) {
setSlide(0)
} else {
setSlide(currentSlide + 1)
}
}, 2000)
into
import React, { useState, useEffect } from 'react';
import classNames from 'lib/classNames';
interface BigTextProps {
slides: Array<string>;
}
export default function BigText({ slides }: BigTextProps) {
const [currentSlide, setSlide] = useState(0);
const totalSlides = slides.length;
useEffect(() => {
const interval = setInterval(() => {
if (totalSlides - 1 === currentSlide) {
setSlide(0);
} else {
setSlide(currentSlide + 1);
}
}, 2000);
return () => {
clearInterval(interval);
};
}, [currentSlide, totalSlides]);
and
CooltError.tsx
import { useInterval } from 'react-use'
[...]
export default function BigText({ slides }: BigTextProps) {
const [currentSlide, setSlide] = React.useState(0)
const totalSlides = slides.length
useInterval(() => {
if (totalSlides - 1 === currentSlide) {
setSlide(0)
} else {
setSlide(currentSlide + 1)
}
}, 2000)
into
import React, { useState, useEffect } from 'react';
import classNames from 'lib/classNames';
interface BigTextProps {
slides: Array<string>;
}
export default function BigText({ slides }: BigTextProps) {
const [currentSlide, setSlide] = useState(0);
const totalSlides = slides.length;
useEffect(() => {
const interval = setInterval(() => {
if (totalSlides - 1 === currentSlide) {
setSlide(0);
} else {
setSlide(currentSlide + 1);
}
}, 2000);
return () => {
clearInterval(interval);
};
}, [currentSlide, totalSlides]);
Tools we used to make the stats:
npm charts
Total number of downloads between 2022-08-01 and 2023-08-01:
package downloads
sushis 7,545
Total number of downloads between 2022-08-01 and 2023-08-01:
package downloads
sushis-demo 14,641
Year | Downloads | Repo |
---|---|---|
2022 | 3425 | Sushis |
2023 (Jan-Aug) | 4120 | Sushis |
2022 | 6391 | Sushis-Demo |
2023 (Jan-Aug) | 8250 | Sushis-Demo |
Month | Downloads | Repo |
---|---|---|
Jan | 746 | Sushis |
Jan | 1423 | Sushis-Demo |
Apr | 702 | Sushis |
Apr | 1405 | Sushis-Demo |
Year | Downloads |
---|---|
2022 | 9816 |
2023 (Jan-Aug) | 12370 |
Feedback, contributions, and pull requests are welcome. For significant changes, please open an issue first to discuss your ideas.
PylarAI Creative ML FREE License.
Β© 2023 ITAMAESAN ORG. All rights reserved.
Full Changelog: https://github.com/itamaesanorg/SushiJS/commits/Stable