Forem: Mostafa Milly

Storybook Component Story Format 3: A Side-By-Side Comparison

Mostafa Milly — Wed, 13 Sep 2023 19:45:21 +0000

Storybook has recently released a new story format, Component Story Format 3 (CSF3), which promises to be a game-changer in terms of developer productivity and code maintainability. If you're still using CSF2 and curious about what's new in CSF3, then you're in the right place!

In this article, we will explore the new features offered by CSF3 and compare them side-by-side with the older CSF2 format.

The Context

Before diving into the code, let's briefly discuss why CSF3 is a significant milestone. According to Michael Shilman, the developer advocate at Storybook, the new format offers:

Spreadable story objects for easy extensibility
Default render functions for brevity
Automatic titles for convenience
Play functions for scripted interactions and tests

And more importantly, CSF3 is 100% backwards compatible with CSF2.

Example: A Simple Button Component

Let's say we have a Button component that we're showcasing using Storybook. Below are examples in both CSF2 and CSF3.

CSF2 Version

// Button.stories.js (CSF2)
import React from 'react';
import { Button } from './Button';

export default {
  title: 'components/Button',
  component: Button,
};

export const DefaultButton = () => <Button label="Click Me" />;
export const DisabledButton = () => <Button label="Click Me" disabled />;

CSF3 Version

// Button.stories.js (CSF3)
import { Button } from './Button';

export default {
  component: Button,
};

export const DefaultButton = {
  args: {
    label: 'Click Me',
  },
};
export const DisabledButton = {
  args: {
    label: 'Click Me',
    disabled: true,
  },
};

Notable Differences

Boilerplate Reduction

CSF3 reduces the amount of boilerplate code by using story objects and default render functions. As you can see in the example, you don't have to manually write the render function in CSF3 if it's straightforward.

Spreadable Story Objects

With CSF3, it's easy to extend existing stories, which is a blessing for DRY (Don't Repeat Yourself) lovers. Let's consider an example:

CSF2 Version

export const PrimaryButton = () => <Button label="Primary" variant="primary" />;
export const SecondaryButton = () => <Button label="Secondary" variant="secondary" />;

CSF3 Version

export const PrimaryButton = {
  args: {
    label: 'Primary',
    variant: 'primary',
  },
};
export const SecondaryButton = {
  ...PrimaryButton,
  args: {
    ...PrimaryButton.args,
    label: 'Secondary',
    variant: 'secondary',
  },
};

Play Functions for Scripted Interactions

One of the significant enhancements in CSF3 is the ability to simulate user interactions using play functions.

// CSF3
export const PlayButton = {
  args: { label: 'Play' },
  play: async ({ canvasElement }) => {
    const canvas = within(canvasElement);
    const button = canvas.getByText('Play');
    await userEvent.click(button);
  },
};

Upgrading to CSF3

The good news is, upgrading is relatively straightforward. If you're on Storybook 7, you can run the codemod to migrate automatically:

npx storybook@next migrate csf-2-to-3 --glob="**/*.stories.js"

Conclusion

CSF3 offers a series of improvements over CSF2 that promise better ergonomics and maintainability. So why wait? Upgrade your stories today and enjoy a more streamlined development experience!

For more details, refer to the official Storybook documentation.

Managing Monorepos with Lerna v7

Mostafa Milly — Sat, 02 Sep 2023 17:30:15 +0000

Hello! Today, we're diving into the world of monorepos and how to manage them using Lerna. If you've ever wanted to manage multiple packages within a single repository, then this tutorial is for you.

What is a Monorepo?

A monorepo (monolithic repository) is a software development strategy where code for many projects is stored in a single repository. This approach can simplify dependency management, streamline code sharing, and improve collaboration.

Why Lerna?

Lerna is a popular tool for managing JavaScript projects with multiple packages. It optimizes the workflow around managing multi-package repositories with git and npm.

Lerna v7: New Features and Improvements

With the release of Lerna v7, several significant changes and improvements have been introduced. Here's a breakdown of the new features:

1. Legacy Package Management Commands Removed

Lerna has decided to move away from its own package management commands. The bootstrap, add, and link commands are no longer included by default. Instead, it's recommended to use your package manager (npm, yarn, pnpm) for these tasks. This change emphasizes the importance of native package managers and reduces redundancy.

2. Workspaces by Default

Lerna v7 uses your package manager's workspaces configuration by default. The useWorkspaces flag has been removed, simplifying the setup. If you're using pnpm, ensure to set "npmClient": "pnpm" in your lerna.json.

3. Initialization Changes

The lerna init command has been modified. It can no longer be run on an existing Lerna repo. If you need to update your configuration, the lerna repair command is your go-to solution.

4. Deprecated Options Removed

Several long-deprecated options have been removed in v7. If you've been using any of these, it's essential to be aware and adjust your configurations. Running lerna repair can help migrate your configuration to the modern equivalents.

5. Additional Features

Schema Migration: Lerna added migration for adding $schema and increased some strictness.
Custom Directory for publish: The publish command now supports a custom directory per-package.
Dry Run for init: The init command now supports a --dryRun flag, allowing you to preview file system changes before committing.

Getting Started with Lerna

1. Installation

First, you need to install Lerna globally:

npm install -g lerna

2. Setting Up a New Lerna Repo

To initialize a new Lerna repo:

mkdir my-monorepo
cd my-monorepo
lerna init

This will create a lerna.json and packages directory in your project.

3. Adding Packages

Navigate to the packages directory and create your individual projects/packages:

cd packages
mkdir package-1 package-2

You can also use Lerna to create new packages:

lerna create package-name

4. Adding Dependencies

To add a dependency to a specific package:

lerna add module-name --scope=package-name

5. Install Your Packages

Lerna can link dependencies in the repo together:

npm install

This command will install all of the external dependencies in each package, and then it will symlink any cross-dependencies.

6. Running Scripts Across Packages

You can run npm scripts across all packages:

lerna run test

This will run the test npm script in each package that has it.

Versioning with Lerna

Lerna offers two main modes of versioning:

Fixed/Locked mode (default): All packages will be versioned with the same version number.
Independent mode: Allows you to increment package versions independently.

To initialize a repo in independent mode:

lerna init --independent

or if you already create project just set the version key in lerna.json to independent to run in independent mode.

When you're ready to publish your packages:

lerna publish

In independent mode, Lerna will prompt you for the version number for each package that has changed.

Benefits of Using Lerna with a Monorepo

Simplified Management: Manage multiple packages with a single lerna.json configuration.
Atomic Changes: Changes across multiple packages can be committed together, ensuring consistency.
Shared Dependencies: Common dependencies can be hoisted, reducing duplication and speeding up installs.
Streamlined Development: Easily test changes across dependent packages.

Conclusion

Lerna is a powerful tool for managing monorepos, especially in the JavaScript ecosystem. It simplifies many of the challenges associated with managing multiple packages, making it easier to develop, test, and publish interdependent projects.

If you're considering a monorepo for your next project, give Lerna a try and see how it can streamline your development process!

Happy coding! 🚀

Pipelining and composition

Mostafa Milly — Sun, 12 Mar 2023 16:13:42 +0000

Pipelining and Composition are two fundamental concepts in software development that allow developers to build complex and scalable systems by breaking them down into smaller, modular parts.

Pipelining

Pipelining is the process of chaining together multiple functions or operations so that the output of one function becomes the input of the next. This approach is commonly used in data processing and transformation, where large volumes of data are processed in a series of steps.

Basic example

Let's say we have a dataset containing information about books, and we want to filter the books by author, sort them by publication date, and select only the title and publication date fields. We could write a single function to perform all of these operations, but this would make the code difficult to read and maintain.

Instead, we can use a pipeline to break the task down into smaller steps and apply each step in sequence. Here's an example:

import _ from "lodash";

const data = [
  {
    title: "Harry Potter and the Philosopher's Stone",
    author: "J.K. Rowling",
    publicationDate: "1997-06-26",
  },
  {
    title: "Harry Potter and the Chamber of Secrets",
    author: "J.K. Rowling",
    publicationDate: "1998-07-02",
  },
  {
    title: "Harry Potter and the Prisoner of Azkaban",
    author: "J.K. Rowling",
    publicationDate: "1999-07-08",
  },
  {
    title: "The Hobbit",
    author: "J.R.R. Tolkien",
    publicationDate: "1937-09-21",
  },
  {
    title: "The Lord of the Rings",
    author: "J.R.R. Tolkien",
    publicationDate: "1954-07-29",
  },
];

const pipeline = _.flow(
  // Step 1: Filter books by author
  (books) => books.filter((book) => book.author === "J.K. Rowling"),

  // Step 2: Sort books by publication date
  (books) => _.sortBy(books, "publicationDate"),

  // Step 3: Select title and publication date fields
  (books) =>
    books.map((book) => ({
      title: book.title,
      publicationDate: book.publicationDate,
    }))
);

const filteredBooks = pipeline(data);

As you can see by breaking the task down into smaller steps and using a pipeline to process the data, we can make the code easier to read and maintain. Each step in the pipeline is self-contained and can be tested and modified independently, which makes the code more modular and flexible. Additionally, using pipelines allows us to easily add or remove steps as needed, without having to modify a monolithic function.

Composing

Composing is quite similar to pipelining, but has its roots in mathematical theory.
The concept of composition is simply—a sequence of function calls, in which the output of one
function is the input for the next one—but the order is reversed from the one in pipelining.

So, if you have a series of functions, from left to right, when pipelining, the first function of
the series to be applied is the leftmost one, but when you use composition, you start with
the rightmost one

Reimplemention of pipelining example

You can transform our example to compostion by using flowRight method instead of flow and change the order of the functions

import _ from "lodash";

const data = [
  {
    title: "Harry Potter and the Philosopher's Stone",
    author: "J.K. Rowling",
    publicationDate: "1997-06-26",
  },
  {
    title: "Harry Potter and the Chamber of Secrets",
    author: "J.K. Rowling",
    publicationDate: "1998-07-02",
  },
  {
    title: "Harry Potter and the Prisoner of Azkaban",
    author: "J.K. Rowling",
    publicationDate: "1999-07-08",
  },
  {
    title: "The Hobbit",
    author: "J.R.R. Tolkien",
    publicationDate: "1937-09-21",
  },
  {
    title: "The Lord of the Rings",
    author: "J.R.R. Tolkien",
    publicationDate: "1954-07-29",
  },
];

const compose = _.flowRight(
  // Step 3: Select title and publication date fields
  (books) =>
    books.map((book) => ({
      title: book.title,
      publicationDate: book.publicationDate,
    })),
  // Step 2: Sort books by publication date
  (books) => _.sortBy(books, "publicationDate"),

  // Step 1: Filter books by author
  (books) => books.filter((book) => book.author === "J.K. Rowling")
);

const filteredBooks = compose(data);

As you can see using pipelines allows us to easily add or remove steps as needed, without having to modify a monolithic function. Composing is quite similar to pipelining, but has its roots in mathematical theory. The concept of composition is simply a sequence of function calls in which the output of one function is the input for the next one, but the order is reversed from the one in pipelining.

Build landing page using Island Architecture

Mostafa Milly — Fri, 10 Mar 2023 22:35:59 +0000

Island architecture is a software architecture pattern that involves creating small, isolated, and self-contained modules, or "islands," that can communicate with each other through well-defined interfaces. Each island is designed to perform a specific function or set of related functions, and can be developed and maintained independently of the other islands. This makes it easier to build complex systems that are flexible, scalable, and maintainable over time.

What is Astro

Astro is a static site generator that is designed to help developers build modern, performant websites using a component-based architecture. It uses a combination of HTML, CSS, and JavaScript to generate static pages that can be hosted on a server or served from a content delivery network (CDN).

To use Astro with the island architecture pattern, you can break your website or web application into a set of islands, with each island representing a distinct feature or set of features. You can then use Astro to generate static pages for each island, along with the necessary JavaScript and CSS files, and deploy them to a CDN or server.

Getting started

In this tutorial, you will learn how to create simple Astro page which contains multiple islands.

The target of this tutorial to build a simple landing page using Reactjs,Solidjs,Svelete and Vuejs.

Step 1: Set up the project

First, create a new Astro project using the following command:

npm create astro@latest

For React Integration you can use the following command:

npx Astro add react

For Solidjs integration you can use the following command:

npx Astro add solid

For Vuejs integration you can use the following command:

npx Astro add vue

Last for Svelete integration you can use the following command:

npx Astro add svelte

Step 2: building layout component in Svelte

First create file under src/layouts and name it as Layout.svelte

layouts/Layout.svelte

<div class="container">
  <slot />
</div>

<style>
  .container {
    margin: 0 auto;
    padding: 0;
    display: flex;
    flex-direction: column;
    row-gap: 10px;
    width: 100%;
  }
</style>

In this component we create wrapper component for all our components.

By using <slot /> I can inject the children's components into the Layout Svelete component (It's kind of children prop inside Reactjs)

After creating the layout component, we can import it into our index.astro page under pages folder:

pages/index.astro

---
import Layout from "../layouts/Layout.svelte";
---

<Layout client:load>
</Layout>

client:load directive enables to load and hydrate our layout component immediately as soon as possible.

You can learn more about client directives in this link

Step 3: Create a header component using Vuejs

First create file under src/components and name it as Header.vue

components/Header.vue

<template>
  <header>
    <h1>{{ title }}</h1>
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </header>
</template>

<script>
  export default {
    name: "Header",
    props: {
      title: {
        type: String,
        required: true,
      },
    },
  };
</script>

<style>
  header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background-color: #fff;
    color: #262525;
  }

  h1 {
    margin: 0;
    font-size: 2rem;
  }

  nav ul {
    list-style: none;
    display: flex;
  }

  nav li {
    margin-right: 1rem;
  }

  nav a {
    color: #262525;
    text-decoration: none;
    font-weight: bold;
  }
</style>

After that we can import our Header Vuejs component into our Astro page:

pages/index.astro

---
import Layout from "../layouts/Layout.svelte";
import Header from "../components/Header.vue";
---

<Layout client:load>
  <Header title="Astro Islands" client:visible />
</Layout>

As you can see, I can pass props to vue Header component.

client:visible is also client directive to load the component only if its visible on the user viewport

Step 4: Create hero section using Solidjs

First create file under src/components and name it as Hero.tsx

components/Hero.tsx

import { createSignal } from "solid-js";

function Hero() {
  const [isLoggedIn, setIsLoggedIn] = createSignal(false);

  function handleLogin() {
    setIsLoggedIn(true);
  }

  return (
    <div class="hero" style="padding: 3rem;">
      <div
        class="hero-content"
        style="background-color: #fff; padding: 2rem; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); margin-top: -4rem; z-index: 1;"
      >
        <div style="display : flex; column-gap:20px; margin-top : 8px">
          <img
            src="./hero.svg"
            alt="Hero image"
            style="max-width: 200px; height: auto; border-radius: 8px;"
          />
          <div>
            <h1 style="font-size: 3rem; margin-bottom: 1rem;">
              Welcome to our website
            </h1>
            <p style="font-size: 1.5rem; margin-bottom: 2rem;">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </p>
            {!isLoggedIn() && (
              <button
                onClick={handleLogin}
                style="background-color: #007bff; color: #fff; padding: 1rem 2rem; border: none; border-radius: 4px; font-size: 1.2rem; cursor: pointer;"
              >
                Login
              </button>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}

export default Hero;

After that we can import our Hero Solidjs component into our Astro page:

pages/index.astro

---
import Layout from "../layouts/Layout.svelte";
import Header from "../components/Header.vue";
import Hero from "../components/Hero.tsx";
---

<Layout client:load>
  <Header title="Astro Islands" client: visible />
  <Hero client:visible />
</Layout>

Step 5: Create contact us form using Reactjs

First create file under src/components and name it as ContactForm.tsx

components/ContactForm.tsx

import React, { useState } from "react";
import "./ContactForm.css";

type ContactFormProps = {
  onSubmit?: (name: string, email: string, message: string) => void;
};

const ContactForm: React.FC<ContactFormProps> = ({ onSubmit }) => {
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [message, setMessage] = useState("");

  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    onSubmit?.(name, email, message);
  };

  return (
    <form className="contact-form" onSubmit={handleSubmit}>
      <div className="contact-form__field">
        <label className="contact-form__label">Name:</label>
        <input
          type="text"
          id="name"
          value={name}
          onChange={(e) => setName(e.currentTarget.value)}
          required
          className="contact-form__input"
        />
      </div>
      <div className="contact-form__field">
        <label className="contact-form__label">Email:</label>
        <input
          type="email"
          id="email"
          value={email}
          onChange={(e) => setEmail(e.currentTarget.value)}
          required
          className="contact-form__input"
        />
      </div>
      <div className="contact-form__field">
        <label className="contact-form__label">Message:</label>
        <textarea
          id="message"
          value={message}
          onChange={(e) => setMessage(e.currentTarget.value)}
          required
          className="contact-form__textarea"
        ></textarea>
      </div>
      <button type="submit" className="contact-form__submit">
        Submit
      </button>
    </form>
  );
};

export default ContactForm;

After that we can import our ContactForm Reactjs component into our Astro page:

---
import Layout from "../layouts/Layout.svelte";
import Header from "../components/Header.vue";
import Hero from "../components/Hero.tsx";
import ContactForm from "../components/ContactForm.tsx";
---

<Layout client:load>
  <Header title="Astro Islands" client:visible />
  <Hero client:visible />
  <ContactForm client:visible />
</Layout>

Step 6: Create footer component using Svelte

Last thing we want to create a footer component using Svelte so we will create our footer component file:

components/Footer.svelte

<footer class="footer">
  <nav class="footer__nav">
    <a href="#" class="footer__link">Home</a>
    <a href="#" class="footer__link">About</a>
    <a href="#" class="footer__link">Contact</a>
  </nav>
  <p class="footer__text">&copy; 2023 Astro Islands. All rights reserved.</p>
</footer>

<style>
  .footer {
    background-color: #f8f8f8;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .footer__nav {
    display: flex;
    gap: 20px;
    margin-bottom: 10px;
  }

  .footer__link {
    color: #333;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.2rem;
    transition: color 0.2s ease-in-out;
  }

  .footer__link: hover {
    color: #007bff;
  }

  .footer__text {
    font-size: 0.9rem;
    color: #333;
    margin-top: 10px;
  }
</style>

Last thing we should modify our Astro page to include our Svelte Footer:

---
import Layout from "../layouts/Layout.svelte";
import Header from "../components/Header.vue";
import Hero from "../components/Hero.tsx";
import ContactForm from "../components/ContactForm.tsx";
import Footer from "../components/Footer.svelte";
---

<Layout client: load>
  <Header title="Astro Islands" client:visible />
  <Hero client:visible />
  <ContactForm client:visible />
  <Footer client:visible />
</Layout>

In this way you create simple landing page using Reactjs, Vuejs , Solidjs and Svelte.

This is repository link: Link

Thank you for reading, and see you soon with another post ❤️

Order React components using flex order

Mostafa Milly — Mon, 16 Jan 2023 18:40:36 +0000

In my first post here, I will share with you guys how we can reorder any react component using CSS flex order and make orders persist by storing them in localStroage.

Create new react project

First create empty react typescript project using vite by executing this command

yarn create vite simple-app --template react-ts

After remove unnecessary files and create some empty files the folder structure will be look like

1. Implement Orderable Context

First, we will implement React context to pass correct order value and manage order functionality between all children respectively.

`context\OrderableContext.tsx`

import React from "react";

export const OrderableContext = React.createContext<OrderableContextValue>({
  changeOrder: (id, direction) => undefined,
  canMoveDown: (_) => false,
  canMoveUp: (_) => false,
  getCurrnetIndex: (_) => -1,
});

export type OrderableContextValue = {
  /** Change order callback */
  changeOrder: (id: string, direction: "UP" | "DOWN") => void;
  /** Check if we can move component down */
  canMoveDown: (id: string) => boolean;
  /** Check if we can move component up */
  canMoveUp: (id: string) => boolean;
  /** Get current component index */
  getCurrnetIndex: (id: string) => number;
};

Here I create new React context which has the functionalities I need to implement the order functionality.
Also, we need custom hook to consume our context value

`hooks\useOrderable.ts`

import { useContext } from "react";
import { OrderableContext } from "../context/OrderableContext";

export const useOrderable = () => {
  const value = useContext(OrderableContext);
  return value;
};

2. Implement Orderable Layout

Second, we need high order component (aka HOC) to wrap all components which have the order functionality

`components\OrderableLayout.tsx`

import { OrderableContext } from "../context/OrderableContext";

export const OrderableLayout = <
  T extends { id: string; disableOrder?: boolean }
>({
  children,
  localStorageKey,
}: OrderableLayoutProps<T>) => {
  const componentsIds = children
    .filter((child) => Boolean(child.props.disableOrder) === false)
    .map((child) => child.props.id);

  const value = useOrderableLayout(componentsIds, localStorageKey);

  return (
    <div style={{ display: "flex" , flexDirection: "column"}}>
      <OrderableContext.Provider value={value}>
        {children}
      </OrderableContext.Provider>
    </div>
  );
};

type OrderableLayoutProps<T> = {
  localStorageKey?: string;
  children: React.ReactElement<T>[];
};

I ensure that each child will have unique id which will pass as prop to it and I take these ids and pass them to useOrderableLayout hook which will manage all the order functionality inside it and pass the result to all children.

`hooks\useOrderableLayout.ts`

import { useLocalStorage } from "./useLocalStorage";

export const useOrderableLayout = (ids: string[], key: string = "KEY") => {
  const [state, setState] = useLocalStorage(key, ids);

  const changeOrder = (id: string, direction: "UP" | "DOWN") => {
    const index = state.indexOf(id);
    const newIndex = direction === "UP" ? index - 1 : index + 1;
    const newState = [...state];
    newState.splice(index, 1);
    newState.splice(newIndex, 0, id);
    setState(newState);
  };

  const canMoveUp = (id: string) => {
    return state.indexOf(id) !== 0;
  };

  const canMoveDown = (id: string) => {
    return state[state.length - 1] !== id;
  };

  const getCurrnetIndex = (id: string) => {
    return state.indexOf(id);
  };

  return {
    changeOrder,
    canMoveDown,
    canMoveUp,
    getCurrnetIndex,
  };
};

First Inside this hook I use useLocalStorage custom hook to manage to store children's orders inside localStorage and update the localStorage when we call changeOrder function, I think everything is clear so let's go further.

3. Implement Orderable Item

Now we going to finish by consuming out useOrderable inside OrderableItem component which will has order functioanlty

`components\OrderableItem.tsx`

import { useOrderable } from "../hooks/useOrderable";

export const OrderableItem = ({
  content,
  id,
  disableOrder,
}: OrderableItemProps) => {
  const { canMoveDown, canMoveUp, changeOrder, getCurrnetIndex } =
    useOrderable();
  return (
    <div className="flex-item" style={{ order: getCurrnetIndex(id) }}>
      {content}
      <div className="flex-item">
        <button
          disabled={disableOrder || !canMoveUp(id)}
          onClick={() => {
            changeOrder(id, "UP");
          }}
        >
          Up
        </button>
        <button
          disabled={disableOrder || !canMoveDown(id)}
          onClick={() => {
            changeOrder(id, "DOWN");
          }}
        >
          Down
        </button>
      </div>
    </div>
  );
};

type OrderableItemProps = {
  id: string;
  content: string;
  disableOrder?: Boolean;
};

In this component we use useOrderable custom hook which we implement it earlier and implement order functionality inside this component.

In the end we will modify App.tsx file and use OrderableItem , OrderableLayout components.

`App.tsx`

import { OrderableItem } from "./components/OrderableItem";
import { OrderableLayout } from "./components/OrderableLayout";

function App() {
  return (
    <OrderableLayout>
      <OrderableItem id="ITEM_1" content="This is item one" />
      <OrderableItem id="ITEM_2" content="This is item two" />
      <OrderableItem id="ITEM_3" content="This is item three" />
    </OrderableLayout>
  );
}

export default App;

Here is the final result:

GitHub repo : link

Thank you for reading and see you soon with another post 😊