Forem: abdelrahman seada

Scripts Runner: Manage Your npm Scripts with Style 🚀

abdelrahman seada — Thu, 29 Jan 2026 12:55:18 +0000

Ever found yourself constantly typing npm run dev, npm run build, or scrolling through your package.json to remember script names? I built something to solve that.

Introducing Scripts Runner

Scripts Runner is an open-source VS Code extension that brings all your npm scripts into a beautiful, searchable sidebar. No more terminal commands—just click and run.

Key Features

🎯 Visual Interface - All your scripts in one place with intuitive icons

🔍 Instant Search - Find scripts as you type

▶️ One-Click Run - Execute any script with a single click

🎨 Smart Icons - Automatically recognizes script types (dev, build, test, deploy, etc.)

🔄 Auto-Refresh - Updates when you modify package.json

Quick Demo

Install the extension
Open any project with a package.json
Click the Scripts Runner icon in the sidebar
Search or click any script to run it

That's it. Your scripts run in the integrated terminal instantly.

Why I Built This

Working with multiple projects daily, I was tired of:

Memorizing script names
Switching between package.json and terminal
Typing the same commands repeatedly

So I created a tool that makes this workflow seamless.

Installation

Open VS Code
Press Ctrl+Shift+X (or Cmd+Shift+X on Mac)
Search for "Scripts Runner"
Click Install

Or use the Quick Open command (Ctrl+P) and paste:

ext install abdoseadaa.package-json-scripts-runner

Open Source

This project is MIT licensed and available on GitLab. Contributions, issues, and feedback are welcome!

🔗 GitLab Repository

🔗 VS Code Marketplace

Tech Stack

Built with TypeScript, VS Code Extension API, and a custom webview for the sidebar interface.

If you find this useful, give it a ⭐ on GitLab or rate it on the VS Code Marketplace. Your feedback helps improve the extension!

What features would you like to see next? Drop a comment below.

🔥 Stop Writing Boilerplate: Zustand + Immer, Done Once and Right

abdelrahman seada — Wed, 14 Jan 2026 14:43:26 +0000

Build a Production-Ready Zustand + Immer State Management Library

State management in React can be complex, but it doesn't have to be. In this article, I'll show you how to build a production-ready, type-safe, and highly reusable state management library combining Zustand and Immer.

Why Zustand + Immer?

Zustand is a lightweight state management solution that's:

🪶 Minimal boilerplate
⚡ Fast and efficient
🎯 No providers needed
🔧 Easy to learn

Immer adds:

✍️ Mutable syntax for immutable updates
🛡️ Safe nested state updates
📖 More readable code

Together, they create a powerful yet simple state management solution.

What We'll Build

A complete library with:

✅ Type-safe store creation
✅ Immer integration by default
✅ Optional persistence (localStorage)
✅ Redux DevTools integration
✅ Modular store slices
✅ Optimized selectors
✅ Reset utilities
✅ Development logger

Installation

npm install zustand immer

Core Library

1. Store Creator

This is the heart of our library - a function that creates stores with all features enabled:

// lib/zustand/createStore.ts
import { create, StateCreator } from 'zustand';
import { devtools, persist, subscribeWithSelector } from 'zustand/middleware';
import { immer } from 'zustand/middleware/immer';

interface CreateStoreConfig {
  /** Store name for DevTools */
  name: string;
  /** Enable persistence to localStorage */
  persist?: boolean;
  /** Keys to persist (if undefined, persists all state) */
  persistKeys?: string[];
  /** Enable Redux DevTools integration */
  devtools?: boolean;
  /** Enable fine-grained subscriptions */
  enableSelectors?: boolean;
}

export const createStore = <T extends object>(config: CreateStoreConfig) => {
  const {
    name,
    persist: enablePersist = false,
    persistKeys,
    devtools: enableDevtools = process.env.NODE_ENV === 'development',
    enableSelectors = true,
  } = config;

  return (stateCreator: StateCreator<T, [['zustand/immer', never]], []>) => {
    let store = immer<T>(stateCreator);

    if (enableSelectors) {
      store = subscribeWithSelector(store) as any;
    }

    if (enablePersist) {
      store = persist(store, {
        name: `${name}-storage`,
        ...(persistKeys && {
          partialize: (state) =>
            Object.fromEntries(
              Object.entries(state).filter(([key]) => persistKeys.includes(key))
            ) as T,
        }),
      }) as any;
    }

    if (enableDevtools) {
      store = devtools(store, { name }) as any;
    }

    return create<T>()(store);
  };
};

2. Optimized Selectors

Create selector hooks that prevent unnecessary re-renders:

// lib/zustand/createSelectors.ts

export const createSelectors = <T extends object>(store: any) => {
  const selectors = {} as {
    [K in keyof T]: () => T[K];
  };

  const stateKeys = Object.keys(store.getState()) as (keyof T)[];

  stateKeys.forEach((key) => {
    (selectors as any)[key] = () => store((state: T) => state[key]);
  });

  return selectors;
};

3. Slice Creator

Type helper for creating modular store slices:

// lib/zustand/createSlice.ts
import { StateCreator } from 'zustand';

export type CreateSlice<T> = StateCreator<
  T,
  [['zustand/immer', never]],
  [],
  T
>;

4. Combine Slices

Merge multiple slices into one store:

// lib/zustand/combineSlices.ts

export const combineSlices = <T extends object>(
  ...slices: Array<(set: any, get: any, api: any) => Partial<T>>
) => {
  return (set: any, get: any, api: any) => {
    return slices.reduce(
      (acc, slice) => ({
        ...acc,
        ...slice(set, get, api),
      }),
      {} as T
    );
  };
};

5. Reset Utilities

Built-in reset functionality:

// lib/zustand/resetters.ts

export const createResetters = <T extends object>(
  initialState: T,
  set: (fn: (state: T) => void) => void
) => ({
  reset: () =>
    set((state: any) => {
      Object.assign(state, initialState);
    }),
  resetKey: <K extends keyof T>(params: { key: K }) =>
    set((state: any) => {
      state[params.key] = initialState[params.key];
    }),
});

6. Development Logger

Log state changes in development:

// lib/zustand/logger.ts

export const createLogger = (storeName: string) => {
  if (process.env.NODE_ENV !== 'development') {
    return () => {};
  }

  return (state: any, prevState: any) => {
    console.group(`[${storeName}] State Changed`);
    console.log('Previous:', prevState);
    console.log('Current:', state);
    console.groupEnd();
  };
};

7. Main Export

// lib/zustand/index.ts
export { createStore } from './createStore';
export { createSelectors } from './createSelectors';
export { createSlice, type CreateSlice } from './createSlice';
export { combineSlices } from './combineSlices';
export { createResetters } from './resetters';
export { createLogger } from './logger';

Usage Examples

Simple Counter Store

// stores/useCounterStore.ts
import { createStore } from '@/lib/zustand';

interface CounterState {
  count: number;
  increment: () => void;
  decrement: () => void;
  reset: () => void;
}

const initialState = {
  count: 0,
};

export const useCounterStore = createStore<CounterState>({
  name: 'counter',
  persist: true,
})((set) => ({
  ...initialState,

  increment: () =>
    set((state) => {
      state.count += 1; // Mutable syntax thanks to Immer!
    }),

  decrement: () =>
    set((state) => {
      state.count -= 1;
    }),

  reset: () =>
    set((state) => {
      state.count = initialState.count;
    }),
}));

In Your Component:

import { useCounterStore } from '@/stores/useCounterStore';

export const Counter = () => {
  const { count, increment, decrement, reset } = useCounterStore();

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={increment}>+</button>
      <button onClick={decrement}>-</button>
      <button onClick={reset}>Reset</button>
    </div>
  );
};

Modular Store with Slices

Create reusable slices:

// stores/slices/userSlice.ts
import { type CreateSlice } from '@/lib/zustand';

interface User {
  id: string;
  name: string;
  email: string;
}

export interface UserSlice {
  user: User | null;
  setUser: (params: { user: User | null }) => void;
  clearUser: () => void;
}

export const createUserSlice: CreateSlice<UserSlice> = (set) => ({
  user: null,

  setUser: ({ user }) =>
    set((state) => {
      state.user = user;
    }),

  clearUser: () =>
    set((state) => {
      state.user = null;
    }),
});

// stores/slices/settingsSlice.ts
import { type CreateSlice } from '@/lib/zustand';

export interface SettingsSlice {
  theme: 'light' | 'dark';
  language: string;
  setTheme: (params: { theme: 'light' | 'dark' }) => void;
  setLanguage: (params: { language: string }) => void;
}

export const createSettingsSlice: CreateSlice<SettingsSlice> = (set) => ({
  theme: 'light',
  language: 'en',

  setTheme: ({ theme }) =>
    set((state) => {
      state.theme = theme;
    }),

  setLanguage: ({ language }) =>
    set((state) => {
      state.language = language;
    }),
});

Combine them:

// stores/useAppStore.ts
import { createStore, combineSlices } from '@/lib/zustand';
import { createUserSlice, UserSlice } from './slices/userSlice';
import { createSettingsSlice, SettingsSlice } from './slices/settingsSlice';

type AppStore = UserSlice & SettingsSlice;

export const useAppStore = createStore<AppStore>({
  name: 'app',
  persist: true,
  persistKeys: ['user', 'theme', 'language'], // Only persist these
  devtools: true,
})(combineSlices(createUserSlice, createSettingsSlice));

Optimized Selectors

Prevent unnecessary re-renders:

// stores/useProductStore.ts
import { createStore, createSelectors } from '@/lib/zustand';

interface Product {
  id: string;
  name: string;
  price: number;
}

interface ProductState {
  products: Product[];
  loading: boolean;
  addProduct: (params: { product: Product }) => void;
  setLoading: (params: { loading: boolean }) => void;
}

const useProductStoreBase = createStore<ProductState>({
  name: 'products',
  persist: true,
})((set) => ({
  products: [],
  loading: false,

  addProduct: ({ product }) =>
    set((state) => {
      state.products.push(product);
    }),

  setLoading: ({ loading }) =>
    set((state) => {
      state.loading = loading;
    }),
}));

// Create optimized selectors
export const useProductStore = createSelectors(useProductStoreBase);

In Your Component:

import { useProductStore } from '@/stores/useProductStore';

export const ProductList = () => {
  // Only re-renders when products change, not when loading changes
  const products = useProductStore.products();
  const addProduct = useProductStore.addProduct();

  return (
    <div>
      {products.map((p) => (
        <div key={p.id}>{p.name} - ${p.price}</div>
      ))}
      <button onClick={() => addProduct({ 
        product: { id: '1', name: 'New Product', price: 99 } 
      })}>
        Add Product
      </button>
    </div>
  );
};

Store with Reset Utilities

// stores/useFormStore.ts
import { createStore, createResetters } from '@/lib/zustand';

interface FormState {
  name: string;
  email: string;
  message: string;
  setName: (params: { name: string }) => void;
  setEmail: (params: { email: string }) => void;
  setMessage: (params: { message: string }) => void;
  reset: () => void;
  resetKey: <K extends keyof Pick<FormState, 'name' | 'email' | 'message'>>(
    params: { key: K }
  ) => void;
}

const initialState = {
  name: '',
  email: '',
  message: '',
};

export const useFormStore = createStore<FormState>({
  name: 'form',
})((set) => ({
  ...initialState,

  setName: ({ name }) => set((state) => { state.name = name }),
  setEmail: ({ email }) => set((state) => { state.email = email }),
  setMessage: ({ message }) => set((state) => { state.message = message }),

  ...createResetters(initialState, set),
}));

Usage:

const { name, email, setName, setEmail, reset, resetKey } = useFormStore();

// Reset entire form
reset();

// Reset only email field
resetKey({ key: 'email' });

Development Logger

import { createLogger } from '@/lib/zustand';
import { useDebugStore } from '@/stores/useDebugStore';

// Subscribe to all state changes (development only)
useDebugStore.subscribe(createLogger('DebugStore'));

Best Practices

1. Always Use Object Parameters

// ✅ Good - Easy to remember, order doesn't matter
setUser: ({ user }) => set((state) => { state.user = user })

// ❌ Bad - Hard to remember parameter order
setUser: (user) => set((state) => { state.user = user })

2. Type Everything

// ✅ Good - Full type safety
interface UserState {
  user: User | null;
  setUser: (params: { user: User | null }) => void;
}

// ❌ Bad - No type safety
const useUserStore = create((set: any) => ({
  user: null,
  setUser: (user: any) => set({ user }),
}));

3. Split Large Stores into Slices

// ✅ Good - Modular and reusable
const useAppStore = createStore()(
  combineSlices(
    createUserSlice,
    createProductSlice,
    createCartSlice,
    createOrderSlice
  )
);

// ❌ Bad - One giant store
const useAppStore = createStore()((set) => ({
  // 500 lines of state and actions...
}));

4. Use Selectors for Performance

// ✅ Good - Only re-renders when products change
const products = useProductStore.products();

// ❌ Bad - Re-renders on any store change
const { products } = useProductStore();

5. Only Persist What's Necessary

// ✅ Good - Only persist user preferences
createStore({
  name: 'app',
  persist: true,
  persistKeys: ['theme', 'language', 'user'],
})

// ❌ Bad - Persisting temporary state
createStore({
  name: 'app',
  persist: true, // Persists loading states, errors, etc.
})

Performance Tips

Use Selectors: Only subscribe to the state you need
Split Stores: Separate concerns (auth, UI, data)
Lazy Initialize: Don't compute expensive initial state
Batch Updates: Use Immer to batch multiple state changes
Memoize Computed Values: Use useMemo for derived state

Advanced: Async Actions

interface TodoState {
  todos: Todo[];
  loading: boolean;
  error: string | null;
  fetchTodos: () => Promise<void>;
}

export const useTodoStore = createStore<TodoState>({
  name: 'todos',
  persist: true,
  persistKeys: ['todos'],
})((set) => ({
  todos: [],
  loading: false,
  error: null,

  fetchTodos: async () => {
    set((state) => {
      state.loading = true;
      state.error = null;
    });

    try {
      const response = await fetch('/api/todos');
      const todos = await response.json();

      set((state) => {
        state.todos = todos;
        state.loading = false;
      });
    } catch (error) {
      set((state) => {
        state.error = error.message;
        state.loading = false;
      });
    }
  },
}));

Testing

import { renderHook, act } from '@testing-library/react';
import { useCounterStore } from './useCounterStore';

describe('useCounterStore', () => {
  beforeEach(() => {
    useCounterStore.getState().reset();
  });

  it('increments count', () => {
    const { result } = renderHook(() => useCounterStore());

    act(() => {
      result.current.increment();
    });

    expect(result.current.count).toBe(1);
  });

  it('persists to localStorage', () => {
    const { result } = renderHook(() => useCounterStore());

    act(() => {
      result.current.increment();
    });

    const stored = JSON.parse(
      localStorage.getItem('counter-storage') || '{}'
    );

    expect(stored.state.count).toBe(1);
  });
});

Summary

This library gives you:

✅ Type-Safe - Full TypeScript support

✅ Performant - Optimized selectors prevent re-renders

✅ Modular - Split stores into reusable slices

✅ Persistent - Optional localStorage with key selection

✅ Debuggable - Redux DevTools integration

✅ Clean - Mutable syntax via Immer

✅ Production-Ready - Battle-tested patterns

Complete Example

Here's everything together:

// stores/useShopStore.ts
import { 
  createStore, 
  combineSlices, 
  createSelectors,
  type CreateSlice 
} from '@/lib/zustand';

// User Slice
interface User {
  id: string;
  name: string;
}

interface UserSlice {
  user: User | null;
  setUser: (params: { user: User | null }) => void;
}

const createUserSlice: CreateSlice<UserSlice> = (set) => ({
  user: null,
  setUser: ({ user }) => set((state) => { state.user = user }),
});

// Cart Slice
interface CartItem {
  id: string;
  quantity: number;
}

interface CartSlice {
  items: CartItem[];
  addItem: (params: { item: CartItem }) => void;
  removeItem: (params: { itemId: string }) => void;
}

const createCartSlice: CreateSlice<CartSlice> = (set) => ({
  items: [],

  addItem: ({ item }) =>
    set((state) => {
      const existing = state.items.find((i) => i.id === item.id);
      if (existing) {
        existing.quantity += item.quantity;
      } else {
        state.items.push(item);
      }
    }),

  removeItem: ({ itemId }) =>
    set((state) => {
      state.items = state.items.filter((i) => i.id !== itemId);
    }),
});

// Combine and export
type ShopStore = UserSlice & CartSlice;

const useShopStoreBase = createStore<ShopStore>({
  name: 'shop',
  persist: true,
  persistKeys: ['user', 'items'],
  devtools: true,
})(combineSlices(createUserSlice, createCartSlice));

export const useShopStore = createSelectors(useShopStoreBase);

// components/Cart.tsx
import { useShopStore } from '@/stores/useShopStore';

export const Cart = () => {
  const items = useShopStore.items();
  const addItem = useShopStore.addItem();
  const removeItem = useShopStore.removeItem();

  return (
    <div>
      <h2>Cart ({items.length})</h2>
      {items.map((item) => (
        <div key={item.id}>
          Quantity: {item.quantity}
          <button onClick={() => removeItem({ itemId: item.id })}>
            Remove
          </button>
        </div>
      ))}
    </div>
  );
};

Conclusion

You now have a complete, production-ready state management library that combines the simplicity of Zustand with the power of Immer. This setup has:

Minimal boilerplate
Maximum type safety
Excellent performance
Great developer experience

Try it in your next project and let me know how it works for you!

Resources

What's your favorite state management solution? Let me know in the comments! 👇

If you found this helpful, please give it a ❤️ and share it with your team!

# 🗃️ Dolab — A Lightweight Data-Fetching Hook with Zustand Superpowers ⚡

abdelrahman seada — Tue, 08 Apr 2025 11:52:52 +0000

Managing API calls and shared data in React doesn't have to be a hassle. Dolab simplifies this process with a clean, reusable hook powered by Zustand. It's lightweight, fast, and designed for modern frontend development.

🧠 “Dolab” is the Arabic word for "Drawer" — and like a drawer, it stores, fetches, and shares your data neatly. 🧠

🚀 Why Use Dolab?

✅ Minimal API surface
🔁 Auto-refetch with dependency array
📦 Shared data store across components
⏳ Optional cache expiration (lifetime)
💡 TypeScript-first design
⚡ Built on Zustand (no context, no hassle)

📥 Installation

npm install dolab

🔧 Basic Usage Example

import { SetDolabData, useDolab } from "dolab";

type Todo = { userId: number; id: number; title: string; completed: boolean };

const fetch = async (setData: SetDolabData<Todo[]>) => {
  const res = await fetch("https://jsonplaceholder.typicode.com/todos");
  setData(await res.json());
};

export default function Todos() {
  const { data: todos, loading, triggerRefetch } = useDolab<Todo[]>({
    id: "todos", fetch,
  });

  if (!todos) return (
    <button onClick={triggerRefetch}>
      {loading ? "Loading..." : "Load Todos"}
    </button>
  );

  return (
    <ul>{todos.map(todo => <li key={todo.id}>{todo.title}</li>)}</ul>
  );
}

🧠 Note: The data is not just fetched and displayed — it’s also persisted inside Dolab’s internal store, powered by Zustand. This means you can reuse the same data anywhere across your application without triggering another API call.

To access this stored data in other components, simply use the useDolabData hook and pass in the same id used earlier ("todos" in this case):
const {data : todos}= useDolabData<Todo[]>({ id: "todos" });
🔄 Important: This works only if useDolab({ id, fetch }) was already called before useDolabData in the application lifecycle. That call is what fetches and stores the data initially. From there, any component can subscribe to and reactively use the shared data without duplication or redundant requests.

🔁 Triggering a Manual Refetch:

You can also manually refetch the stored data when needed — for example, after submitting a form or on a button click. Simply destructure triggerRefetch from useDolabData:
const { triggerRefetch: refetch } = useDolabData<Todo[]>({ id: "todos" });

// Example: Trigger refetch on button click
<button onClick={refetch}>Refresh Todos</button>
This will re-invoke the fetch function defined in useDolab for the same id and update the stored data accordingly.

🧪 Live Demo

Want to try it out? Here’s a live playground with examples and integration demos:

👉 Open on CodeSandbox

🧠 Best Practices

Use useDolab once to fetch and store the data.
Use useDolabData in child components to access the shared data.
Customize lifeTime to control cache expiry.
Pass deps to auto-refetch on param/state changes.

📦 npm Package

👉 View on npm

📥 npm install dolab

✍️ Author

Exploring Webdock: A No-Nonsense Cloud VPS Hosting Solution

abdelrahman seada — Mon, 10 Feb 2025 20:41:52 +0000

In the ever-evolving landscape of web hosting, finding a provider that offers simplicity, performance, and affordability can be challenging. Enter Webdock, a Denmark-based hosting company specializing in Virtual Private Servers (VPS) designed to meet diverse needs, from developers to small businesses.

Key Features

Try Before You Pay: Webdock lets you try their servers for 24 hours before making a payment, allowing you to test the performance and features risk-free.

User-Friendly Control Panel: Webdock offers an intuitive control panel that simplifies server management tasks, making it accessible even for users with limited technical expertise.

High-Performance Hardware: With options between Intel Xeon® and AMD Epyc® CPUs, Webdock ensures efficient data handling and quick server responses.

High-Speed Internet: Webdock provides blazing-fast internet speeds of up to 4 Gbps, ensuring smooth data transfers and optimal performance for demanding applications.
Transparent Pricing: Webdock's pricing model is straightforward, with plans starting as low as €2.15 per month for Xeon® servers and €4.30 per month for Epyc® servers.
Easy Customization: Webdock allows you to fully customize your server configuration, including storage, RAM, and CPU allocation, ensuring it meets your exact requirements without unnecessary extras.

Free Inclusions: Customers benefit from free SSL certificates, transactional emailing with Postmark, email forwarding with ImprovMX, and regular backup snapshots, enhancing security and reliability.
Scalability: Webdock offers the flexibility to upgrade or downgrade server resources as needed, accommodating the evolving demands of businesses.

Customer Reviews

Users have expressed satisfaction with Webdock's services:

"The control panel is far better than any other I've used at other hosting companies. Easy and fast signup process, very user-friendly UI, fast VPS services." (whtop.com)
"They provide the cheapest VPS hosting options I've seen with 3 location choices, deployment is really fast and their panel is excellent." (reviews.io)
"With its very simple setup and reasonable pricing, Webdock.io really impressed me. It's so intuitive and cheaper! Everything just works right out of the box." (hostings.info)

However, some users have noted areas for improvement:

"There are a couple of things missing in my opinion. This would make Webdock even more amazing: Better (uptime) monitoring... An easy way to add a staging environment for WordPress..." (makeitwork.press)

Conclusion

Webdock presents a compelling option for those seeking reliable and scalable VPS hosting solutions with a strong emphasis on performance and customer support. Its user-friendly interface, high-performance hardware, and transparent pricing make it a noteworthy contender in the hosting arena.

For a visual overview of Webdock's dashboard and features, you might find this video helpful:

Webdock.io Dashboard Quick Tour

If you're interested in exploring Webdock's offerings, consider signing up to get started.

Note: The information provided in this post is based on available sources and user reviews. It's advisable to visit Webdock's official website for the most current details and offerings.

Unleash the Power of Building Ultimate Desktop Apps!

abdelrahman seada — Mon, 02 Sep 2024 06:11:18 +0000

🚀 Kickstart Your Desktop App Development with the Electron-React-Vite Template! 🚀

Looking to build a high-performance desktop application with a modern tech stack? This template brings together the power of Electron, React, Vite, TypeScript, Tailwind CSS, and shadcn/ui, making it an ideal starting point for developers who want a fast and efficient setup.

What You Get:

Electron for building cross-platform desktop applications.
React for creating dynamic and responsive UIs.
Vite for lightning-fast bundling and hot module replacement.
TypeScript for a robust, type-safe development experience.
Tailwind CSS for utility-first, responsive styling.
shadcn/ui for beautifully crafted UI components.

Why Use This Template?

Quick Setup: Get started with a fully configured environment.
Modern Tech Stack: Leverage the latest tools for optimal performance.
Scalability: Perfect for both small projects and large-scale applications.

👉 Get Started Now: Clone this repository and start building your next desktop app today!

git clone https://github.com/abdoseadaa/electron-react-vite-template.git

Learn More

For detailed instructions on how to set up and use this template, visit the GitHub repository. You'll find comprehensive documentation and examples to help you get started quickly and effectively.

Happy coding! 🎉

Stop rendering conditions like this

abdelrahman seada — Mon, 15 Jul 2024 08:16:04 +0000

we use conditions everywhere on our applications whether for state check or rendering some data into the view depending on some parameters. in this post will show some of how to render conditions in different way than using regular if(...) else {} blocks or even using ternary condition

for example (1)

type UserType = "admin" | "editor" | "user";

type User = { name: string; type: UserType };

const users: User[] = [
  { name: "john", type: "admin" },
  { name: "mike", type: "editor" },
  { name: "abdelrahman", type: "user" },
];

export default function Test() {
  const actions = ["create", "read", "update", "delete"];

  return (
    <div>
      {users.map((user) => (
        <div key={user.name}>
          {/* we need to render actions depending on user type */}
          <p>{user.name}</p>
          <div className="flex items-center">
            user actions:
            {user.type === "admin" && actions.map((a) => <Action a={a} key={a} />)}
            {user.type === "editor" && actions.filter((a) => a !== "create").map((a) => <Action a={a} key={a} />)}
            {user.type === "user" && actions.filter((a) => a === "read").map((a) => <Action a={a} key={a} />)}
          </div>
        </div>
      ))}
    </div>
  );
}

function Action(props: { a: string }) {
  const { a } = props;
  return <p className="px-2 py-1 border-[1px] mx-2 rounded-md">{a}</p>;
}

output for example (1)

in this example we had to make a check condition for each user type to render his actions, as you can see this consumes a lot of code , harder to debug , harder to add more in future lastly looks ugly but this is a better way to do so

example (2)

type UserType = "admin" | "editor" | "user";

type User = { name: string; type: UserType };

const users: User[] = [
  { name: "john", type: "admin" },
  { name: "mike", type: "editor" },
  { name: "abdelrahman", type: "user" },
];

const userActionsStates: Record<UserType, string[]> = {
  admin: ["create", "read", "update", "delete"],
  editor: ["create", "read", "update"],
  user: ["read", "update"],
};

export default function Test() {
  return (
    <div>
      {users.map((user) => (
        <div key={user.name}>
          {/* we need to render actions depending on user type */}
          <p>{user.name}</p>
          <div className="flex items-center">
            user actions:
            {userActionsStates[user.type].map((a) => (
              <Action key={a} a={a} />
            ))}
          </div>
        </div>
      ))}
    </div>
  );
}

function Action(props: { a: string }) {
  const { a } = props;
  return <p className="px-2 py-1 border-[1px] mx-2 rounded-md">{a}</p>;
}

output for example (2)

output is the same as example (1)

key changes

grouping each user type in object key and value should be what ever you want to render
in this case we pass each user type actions like the following

and here instead of rendering each condition like example (1) or making a ternary condition we get user actions from grouped object userActionsStates and just render whatever in the key's value and Voilà it's only one line of code

what about `else` ? what if we pass a user type that does not exists in the object ?

in this case we can add a default key in the object , this key will be used in false or undefined cases
like the following :


const userActionsStates : Record<UserType , string[] > = {
    admin: ["create", "read", "update", "delete"],
    editor: ["create", "read", "update"],
    user: ["read", "update"],
    default : ["read"]
}

if we updated users with new user that it's type is not defined like the last user object

then we will make a small change to the render method

<div className="flex items-center">
  user actions:
  {(userActionsStates[user.type] ?? userActionsStates["default"]).map((a) => (
    <Action key={a} a={a} />
  ))}
</div>

using null coalescing ?? we ensure that it will render as expected on
all conditions. :)

please note

using this method you can render anything in the key's value string , number , array , Component , ...etc.

summary

easy to read , debug and update 🧑‍💻
looks cool 😌
less code

it's up to your creativity and imaginations 💡🔥

Simple yet powerful react table component

abdelrahman seada — Sat, 13 Jul 2024 17:46:59 +0000

Simple yet Powerful React Table Component

In the ever-evolving landscape of front-end development, having efficient and customizable components is crucial for building robust applications. Today, I'm excited to introduce "Gadwal," a simple yet powerful React table component that can enhance your data presentation effortlessly.

Features

Gadwal stands out with the following features:

Customizable Columns: Define the structure and content of your table with ease.
Custom Rendering for Each Cell: Tailor the display of data in each cell to suit your needs.
Tailwind CSS Support: Seamlessly integrate with Tailwind CSS for consistent styling.
open source

Usage

import React from 'react';
import Table from 'gadwal';

const data = [
  {
    id: 1,
    name: "Leanne Graham",
    username: "Bret",
    email: "oqkz9@example.com",
    website: "hildegard.org",
    phone: "1-770-736-8031 x56442",
    company: {
      name: "Romaguera-Crona",
      catchPhrase: "Multi-layered client-server neural-net",
      bs: "harness real-time e-markets",
    },
  }
];

const table = [
  { header: "id", name: "id", size: 2 },
  { header: "name", name: "name", size: 5 },
  { header: "email", name: "email", size: 5 },
  { header: "website", name: "website", size: 4 },
  { header: "phone", name: "phone", size: 4 },
  { header: "company", name: "company", size: 4, custom: (d) => d.company.name },
];

function App() {
  return (
    <div className="flex w-full">
      <Table data={data} table={table} />
    </div>
  );
}

export default App;

output

it can do more complex tables

import Table, { GadwalRow } from 'gadwal';
import { teammates, TeamMatesSchema } from './data.test';
import { _date } from '@helpers/date.helpers';


const userStatus = {
    "invited" : <div className='text-[#063EF8] bg-[#063EF8]/10 w-fit px-3 py-1 rounded-md  '> invited</div> ,
    "active" : <div className='text-[#00A774] bg-[#00A774]/10 w-fit px-3 py-1 rounded-md  '> active</div> ,
    "inactive" : <div className='text-[#A70027] bg-[#A70027]/10 w-fit px-3 py-1 rounded-md  '> inactive</div>
}

export default function Test() {

    const table: GadwalRow<TeamMatesSchema>[] = [
        { header : "email" , name : "email" , size : 7, custom : d =>{
            return <div className='flex items-center'>
                <div className="w-[50px] h-[50px] rounded-full  overflow-hidden mr-2">
                    <img src="https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="profile" className="w-full h-full rounded-full object-cover" />
                </div>
                <div className="flex-1">
                    <p className="capitalize mb-0 text-black">abdelrahman seada</p>
                    <p className="capitalize mb-0">{d.email}</p>
                </div>

            </div>
        } },
        { header : "status" , name : "status" , size : 4 , custom : d => userStatus[d.status] }, 
        { header : "role" , name :"type" , size : 4 , custom : d => <span className='capitalize'>{d.type.split(":")[1]}</span> },
        { header : "invited date" , name : "updated_at" , size : 4 , custom : d => _date(d.updated_at).local() }
    ];

  return (
   <Table
        data={teammates} 
        table={table}
        bodyProps={{ className : "border-b-[1px] items-center h-[90px] !p-0"  }}
        headerProps={{ className : "border-b-[1px] items-center cap   h-[90px]"  }}
        fixedHeight={false}
    />
  )
}

output table

typescript support

if we have an interface of our data like the following

export interface TeamMatesSchema {
    status: "invited" | "active" | "inactive";
    user_name: string;
    _id: string;
    type: string;
    email: string;
    updated_at: string;
}

using Generic GadwalRow will help you to know what is the data looks like in the name key (which should match the data key between table and api data to display it)

GadwalRow<TeamMatesSchema>[]

also for custom cell rendering

props

props	usage	required	default
data	table data that is going to be rendred	true	-
table	coulums of the table each represents a cell	true	-
fixedHeight	to force each table row to a fixed height (50px)	false	true
animated	animate table content	false	false
stripped	make table rows stripped	false	true
bodyProps	to pass custom styles , classes , ...etc all div attributes to each row of data	false	{}
headerProps	to pass custom styles , classes , ...etc all div attributes to only table head	false	{}
bodyCellProps	to pass custom styles , classes , ...etc all div attributes to each row cells of data	false	{}
headerCellProps	to pass custom styles , classes , ...etc all div attributes to only table head cells	false	{}

notes

with props bodyProps, headerProps, bodyCellProps, headerCellProps you can pass any kind of attributes that could be passed to a normal html div element for the whole row (bodyProps) or each cell in the row (bodyCellProps) also for table header (headerProps) or each cell in the header (headerCellProps) , attributes like classes id onClick and and many more...

and many more it's up to your creativity and imaginations

more about installation and configuration on npm gadwal page gadwal on npm

Forem: abdelrahman seada

Scripts Runner: Manage Your npm Scripts with Style 🚀

Introducing Scripts Runner

Key Features

Quick Demo

Why I Built This

Installation

Open Source

Tech Stack

🔥 Stop Writing Boilerplate: Zustand + Immer, Done Once and Right

Build a Production-Ready Zustand + Immer State Management Library

Why Zustand + Immer?

What We'll Build

Installation

Core Library

1. Store Creator

2. Optimized Selectors

3. Slice Creator

4. Combine Slices

5. Reset Utilities

6. Development Logger

7. Main Export

Usage Examples

Simple Counter Store

Modular Store with Slices

Optimized Selectors

Store with Reset Utilities

Development Logger

Best Practices

1. Always Use Object Parameters

2. Type Everything

3. Split Large Stores into Slices

4. Use Selectors for Performance

5. Only Persist What's Necessary

Performance Tips

Advanced: Async Actions

Testing

Summary

Complete Example

Conclusion

Resources

# 🗃️ Dolab — A Lightweight Data-Fetching Hook with Zustand Superpowers ⚡

🚀 Why Use Dolab?

📥 Installation

🔧 Basic Usage Example

🧪 Live Demo

🧠 Best Practices

📦 npm Package

✍️ Author

Exploring Webdock: A No-Nonsense Cloud VPS Hosting Solution

Key Features

Customer Reviews

Conclusion

Unleash the Power of Building Ultimate Desktop Apps!

What You Get:

Why Use This Template?

Learn More

Stop rendering conditions like this

for example (1)

output for example (1)

example (2)

output for example (2)

key changes

what about else ? what if we pass a user type that does not exists in the object ?

please note

summary

it's up to your creativity and imaginations 💡🔥

Simple yet powerful react table component

Simple yet Powerful React Table Component

Features

Usage

output

it can do more complex tables

output table

typescript support

props

notes

and many more it's up to your creativity and imaginations

what about `else` ? what if we pass a user type that does not exists in the object ?