Forem: Jazim Abbas

UI Design System - Badge Component

Jazim Abbas — Tue, 30 Jul 2024 05:04:30 +0000

FYI: The above mentioned YouTube Video is in Hindi Language.

If you want to get a frontend job, you need to master how to build a Design System from scratch or atleast you know how to build it. Because almost every company is trying to build a design system these days. So in this series we'll exactly build this from scratch.

Tech Stack

We'll be using the following tech stack to build the Design System:

React
Storybook
Rollup
TypeScript
Framer Motion
Styled-Components
xStyled
Shadcn

Reasons to Choose the Above Tech Stack

React will always be my first priority. We need to showcase our component library to other developers or community, for that we'll be using Storybook. There are multiple options for bundling the package e.g. tsup, webpack etc, but these days Rollup is very popular so I am choosing that one and to be very honest I am very comfortable using this bundler so that's why I choose Rollup over other JavaScript bundlers. We need animations for some components, we can build all those animations from scratch or just using css but sometimes by just using css we make our life hell so I am choosing Framer Motion for that.

Now how we style our components that's the main point, we have couple of options:

we can use pure CSS for that but its hard to manage
tailwind css - but I am not comfortable writing it - so skipping it
CSS Modules - its hard to maintain I guess
CSS in JS - we are using this one

There are multiple CSS in JS libraries as well e.g. Emotion, Styled-Components etc.. I picked Styled-Components that's what I am using it for past few years. But its very hard to setup theme, we can do that setup but we have to create it from scratch e.g. Theme, Theme Tokens etc.. For that we'll be using xStyled. xStyled built by the same team that build styled-components.

Source Code

If you want the Source Code, you can use this GitHub Repository, all the code will be there.

Badge Component

This is what we are trying to build it.

And this is what we've built. This is the Final Preview.

Types

First we need to decide what props we should use, in our case we'll be using the following:

BadgeSize
BadgeColor
Any JSX Content i.e. children

export type BadgeSize = "sm" | "md" | "lg";

export type BadgeColor = "neutral" | "error" | "warning" | "success" | "primary";

type Props = {
  children: React.ReactNode;
  size?: BadgeSize;
  color?: BadgeColor;
};

Badge Styles

Next we need to define all the styles related to Badge

"use client";
import styled, { css } from "@xstyled/styled-components";
import { BadgeColor, BadgeSize } from "./types";

const badgeSizes = {
  sm: css`
    padding: 2px 6px;
    font-size: 0.75rem;
  `,
  md: css`
    padding: 2px 8px;
    font-size: 0.875rem;
  `,
  lg: css`
    padding: 4px 10px;
    font-size: 0.875rem;
  `,
};

const badgeColors = {
  neutral: css`
    border: 1px solid #e6e6e6;
    background-color: #f9fafb;
    color: #525252;
  `,
  error: css`
    border: 1px solid #fecaca;
    background-color: #fef2f2;
    color: #dc2626;
  `,
  warning: css`
    border: 1px solid #fde68a;
    background-color: #fffbeb;
    color: #b45309;
  `,
  success: css`
    border: 1px solid #bbf7d0;
    background-color: #f0fdf4;
    color: #15803d;
  `,
  primary: css`
    border: 1px solid #c7d2fe;
    background-color: #eef2ff;
    color: #4338ca;
  `,
};

export const Badge = styled.span<{ $size: BadgeSize; $color: BadgeColor }>`
  text-align: center;
  border-radius: 9999px;

  ${(p) => badgeSizes[p.$size]};
  ${(p) => badgeColors[p.$color]};
`;

As you can see, in the top I added the use client directive. We are marking at client component otherwise you'll get an error if you are using nextjs.

For BadgeSize, I added the styles for each variants separately so that we can easily maintain it. And I did same for BadgeColor. And in the last I added the common styles that should use in the all the variants, I added in the main Badge Styles. Also I am conditionally extract styles from the badgeSizes and badgeColors.

Badge Component

Now I just need to render the Badge Component. Here's how I am rendering it:

import { forwardRef } from "react";
import { Badge as BadgeStyle } from "./styles";
import { BadgeColor, BadgeSize } from "./types";

type Props = {
  children: React.ReactNode;
  size?: BadgeSize;
  color?: BadgeColor;
};

const Badge = forwardRef(function Badge(
  { children, size = "md", color = "neutral" }: Props,
  ref: any,
) {
  return <BadgeStyle ref={ref} $size={size} $color={color} children={children} />;
});

export { Badge };

Its best practice to wrap your component with the ref so that the developer who is using your component library doesn't need to wrap your component with another component just for ref. Because in many cases, we need to pass ref e.g. tooltip. I am also delegating all the rest props to the Badge Component so that developer can pass any additional props if they want.

StoryBook

Last but not least, we need to add StoryBook for our Badge Component so that we can showcase it easily and we also want to test it. Here's how you can create a Badge Component StoryBook:

import type { Meta, StoryObj } from "@storybook/react";
import { Badge } from "../components/Badge";

const meta: Meta<typeof Badge> = {
  title: "Badge",
  component: Badge,
  tags: ["autodocs"],
  parameters: {
    layout: "fullscreen",
  },
  decorators: [
    (story) => (
      <div style={{ display: "flex", justifyContent: "center", margin: "20px" }}>{story()}</div>
    ),
  ],
};

export default meta;
type Story = StoryObj<typeof meta>;

export const General: Story = {
  args: {
    children: "Badge",
  },
};

For each individual story, you need to named export it whatever you like. You can create as much stories as you want. So that's pretty much it.

Conclusion

Its always a good idea to build a design system from scratch so that you know how design system actually built and how much developers are putting efforts into it. And by the time, you'll learn it how fun it is to make a design system.

FYI, all the components that I'll build in this series comes from the GreatFrontend UI Designs.

Bundle and Publish TypeScript Package using Rollup

Jazim Abbas — Thu, 27 Jun 2024 08:33:15 +0000

Last couple of days I was investing most of my time in the Open Source Community. I published few packages to npm and also contributed to some Open Source Projects as well.
Lets see how I bundle my TypeScript package using Rollup.

As you know Rollup is a JavaScript bundler and it is quite popular to Open Source who basically want to build some kind of packages because by bundling through Rollup, we have almost zero boilerplate code as compared to some other bundlers e.g. Webpack. So the bundle size would be quite small. That's why many many developers prefer to choose Rollup over other JavaScript bundlers.

Package written in TypeScript

Lets say this is the code you have and you want to share with other developers by publishing this as a package to npm registry.



export const sum = (a: number, b: number) => {
  return a + b;
};

export const subtract = (a: number, b: number) => {
  return a - b;
};

Configure tsconfig.json

First you need to configure your tsconfig.json file so that our IDE understand our TypeScript code and also it can generate typescript types automatically based on your written typescript code and

Here's is the tsconfig.json file code:



{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext",
    "moduleResolution": "Node",
    "esModuleInterop": true,
    "outDir": "./dist/esm",
    "strict": false,
    "declaration": true,
    "declarationDir": "./dist/types",
    "paths": {
      "rollup/parseAst": ["./node_modules/rollup/dist/parseAst"]
    }
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

Just ignore the paths, the reason I added here because I added unit tests using vitest and vitest also uses rollup under the hood so vitest is throwing an error so that's why I added it here. So just ignore it. You don't need this line anyway. I just added it for my future reference 😀.

Installing Dependencies

First you need to install rollup as a dev dependency because you don't need to ship this dependency to your production code. Use the following command to install the package



npm i -D rollup @rollup/plugin-typescript typescript

and because we are using typescript we also need to install rollup typescript plugin as well. And one more dependency to install i.e. typescript.

Let me clear one thing: we'll generate typescript types using tsc compiler, we can generate types from rollup but I'll explain later why I am not using rollup to generate typescript types out of the code.

Configure Rollup

Thats a fun part. We have two options to configure rollup in order to bundle your files.

use cli directly - I mean add the commands to your script file in the package.json and then run that script (which I would not recommend).
add all the rollup configurations in some kind of config file (we are using this).

Now create a rollup.config.js file in the root of the project. You can use either cjs or mjs way to define all the rollup configurations.

By the way if anyone don't know what is the heck is cjs & mjs cjs is commonjs module system which is using require or module.exports to import and export modules. mjs is a modern es6 way to import and export module or code.

Here's the rollup.config.js code.



const typescript = require("@rollup/plugin-typescript");

const typescriptOptions = {
  exclude: ["tests/**/*"],
  compilerOptions: { declaration: false },
};

const data = [
  {
    external: ["typeorm", "sinon"],
    input: "src/index.ts",
    output: { file: "dist/esm/index.js", format: "esm" },
    plugins: [typescript(typescriptOptions)],
  },
  {
    external: ["typeorm", "sinon"],
    input: "src/index.ts",
    output: { file: "dist/cjs/index.js", format: "cjs" },
    plugins: [typescript(typescriptOptions)],
  },
];

module.exports = data;

I am using cjs way to define my configurations. You can choose mjs its totally upto you.

The configuration is very straight forward. If we want to publish our code as a package, we atleast need two formats

So if anyone is using cjs, then we have that package bundle as well and same for esm.

I am using just one plugin that will basically compile our typescript code to javascript. And as you can see I disable the option to create typescript types out of the code. The reason is if we don't do like this Rollup will create types folder in each bundle separately instead of one in the dist folder.

We can add other plugins as well to make our code minify using terser plugin but I don't need that one. If you do, use any much plugins as you want based on your needs.

Create TypeScript types

As you know we are not using rollup to create typescript types, so do we need to manually create the types? No, we'll use TypeScript compiler for that. Here's how you can do this



"build:types": "tsc -p tsconfig.json --emitDeclarationOnly",

tsc using tsconfig.json file by default. If you want to change to different file just use flags as you can see I am doing here. As you know we just need to create types so we can pass some other arguments e.g. --emitDeclarationOnly.

Setup package.json

This is the final step, now we need to configure package.json. Every package must have package.json file. This is kind of metadata file that npm will use to extract package name, version, author, dependencies, scripts etc.



{
  "name": "jazim-package",
  "version": "1.0.0",
  "main": "./dist/cjs/index.js",
  "module": "./dist/esm/index.js",
  "types": "./dist/types/index.d.ts",
  "exports": {
    ".": {
      "require": "./dist/cjs/index.js",
      "import": "./dist/esm/index.js"
    }
  },
  "scripts": {
    "build:types": "tsc -p tsconfig.package.json --emitDeclarationOnly",
    "build": "rimraf ./dist && npm run build:types && rollup -c",
    "prepublishOnly": "npm run build",
  }
  ...
}

Lets understand these properties.

main: if someone is using cjs e.g. require to import the package then it will use the cjs bundle automatically.
module: if someone is using mjs or es6 in their code then it will use our esm bundle.
types: we need to tell the path where we added our typescript types.

main, module is for those who are using old versions of npm and nodejs. So we need to support those as well.

exports: this is very straight forward, if someone using require then use cjs bundle and if someone is using import then use esm bundle. This is a new way if someone using new versions of npm and nodejs.

Next part is scripts:
build:types: this will generate typescript types.
build: this will bundle our code and we added multiple commands seperated them using &&.
prepublishOnly: this will run before when we publish our package.

There is other command as well e.g. prepublish, the problem of using this command, it will be run before publishing the package as well as when we install the package.

.npmignore

As the filename suggests, many times we don't need to ship our typescript code or some other files so we can simply put all those folders and files into that file. This serves the same purpose as .gitignore



/node_modules
/src
rollup.config.js
tsconfig.json
.gitignore

If you don't wanna use this file, we can simply put the folders and files to the files field in the package.json file e.g.



{
  "files": ["dist", ...]
}

That's pretty much it. If I made some mistake, please correct me. Please let me know your thoughts on this in the comment section.

So if you enjoy my work and found it useful, consider buying me a coffee! I would really appreciate it.

Mock TypeORM Package

Jazim Abbas — Wed, 26 Jun 2024 07:49:38 +0000

References

In the last couple of months, I have been working extensively with TypeORM and built many projects using this ORM. Setting up a test database for my unit tests was quite challenging. To overcome this, I mocked TypeORM methods to avoid interacting with a real database. However, I found myself copying the same mock code into every new project repeatedly.

To streamline this process and help others facing the same issue, I decided to create a package. Initially, I mocked all the TypeORM code using Vitest, but that only worked in the Vitest environment. Since many developers use different testing frameworks such as Jest, Mocha, etc., I needed a more versatile solution. Hence, I used Sinon for mocking TypeORM, which is compatible with various testing frameworks. Although Sinon is excellent, I still have a soft spot for Vitest.

Installation

This package is built using TypeScript, so you’ll get type safety out of the box. I have also added thorough unit tests, which you can refer to for better understanding and reference.

To install this package, use the following command:

npm install --save-dev mock-typeorm sinon @types/sinon

That’s pretty much it! Now you can use this package to mock your TypeORM calls. Note that Sinon is added as a peer dependency, so you need to install it as well.

Key Concepts

Here’s how you can mock TypeORM calls. Use the following snippet:

import { MockTypeORM } from 'mock-typeorm'

test('abc', () => {
  new MockTypeORM()
})

By just doing this, you prevent any interaction with your database. This is the magic of mocking.

Reset or Restore Mock State

After each test, you need to clear the mock state so that other tests cannot use the mock state of previous tests. Otherwise, you’ll get some strange results. To reset the state, you have different methods:

Method 1: Create an instance for each test

import Sinon from 'sinon'
import { MockTypeORM } from 'mock-typeorm'
import { afterEach, beforeEach, describe, expect, it } from 'vitest'

describe('tests suite', () => {
  let typeorm: MockTypeORM

  beforeEach(() => {
    typeorm = new MockTypeORM()
  })

  afterEach(() => {
    typeorm.restore()
    // you can also do this instead - Sinon.restore()
    // Sinon.restore();
  })

  it('first test', async () => {
    const mockUsers = ['user']
    typeorm.onMock('User').toReturn(mockUsers, 'find')

    const users = await dataSource.getRepository(User).find()

    expect(users).toEqual(mockUsers)
  })

  it('second test', async () => {
    const mockUsers = []
    typeorm.onMock('User').toReturn(mockUsers, 'find')

    const users = await dataSource.getRepository(User).find()

    expect(users).toEqual(mockUsers)
  })
})

In this approach, using hooks provided by Vitest (or similar hooks from other testing libraries), we create a new MockTypeORM object in the beforeEach hook and restore TypeORM to its original state in the afterEach hook.

Method 2: Single Instance

import Sinon from 'sinon'
import { MockTypeORM } from 'mock-typeorm'
import { afterAll, afterEach, beforeAll, describe, expect, it } from 'vitest'

describe('tests suite', () => {
  let typeorm: MockTypeORM

  beforeAll(() => {
    typeorm = new MockTypeORM()
  })

  afterEach(() => {
    typeorm.resetAll()
  })

  afterAll(() => {
    typeorm.restore()
  })

  it('first test', async () => {
    const mockUsers = ['user']
    typeorm.onMock('User').toReturn(mockUsers, 'find')

    const users = await dataSource.getRepository(User).find()

    expect(users).toEqual(mockUsers)
  })

  it('second test', async () => {
    const mockUsers = []
    typeorm.onMock('User').toReturn(mockUsers, 'find')

    const users = await dataSource.getRepository(User).find()

    expect(users).toEqual(mockUsers)
  })
})

In this approach, we create a MockTypeORM instance once before all tests start and reset the mock state after each test. After all tests, we restore TypeORM to its original behavior.

Mocking - Fun Stuff

Now that you understand how mocking works and how to restore it to its original behavior, let's see how to mock actual methods like find(), findOne(), save(), etc.

Example

describe('test suites', () => {
  it('test', async () => {
    const typeorm = new MockTypeORM()
    typeorm.onMock(User).toReturn(['user'], 'find')

    const userRepo = dataSource.getRepository(User)
    const users = await userRepo.find()

    expect(users).toEqual(['user'])
  })
})

Helper Functions

onMock()
resetAll()
restore()

onMock()

onMock() accepts a repository class or string (repository name). This is useful when using EntitySchema in JavaScript.

const typeorm = new MockTypeORM()
typeorm.onMock(User) // repository class
typeorm.onMock('User') // repository name as string

onMock() returns this to allow method chaining:

typeorm.onMock(User).toReturn([], 'find').toReturn({ id: '1' }, 'findOne')

reset()

onMock() also returns a reset() method to reset mock data:

describe('test suites', () => {
  it('test', async () => {
    const typeorm = new MockTypeORM()
    typeorm.onMock(User).toReturn(['user'], 'find').reset('find')

    const userRepo = dataSource.getRepository(User)
    const users = await userRepo.find()

    expect(users).toEqual({})
  })
})

As you can see, I reset the mock data for the find method that we set using the toReturn() function. So when the find() method is called and no mock data is found for that method, it will return {} by default. That’s what we are expecting in our test assertion, meaning we have successfully reset the find method.

To reset everything at the repository level:

describe('test suites', () => {
  it('test', async () => {
    const typeorm = new MockTypeORM()
    typeorm
      .onMock(User)
      .toReturn(['user'], 'find')
      .toReturn({ id: '1' }, 'findOne')
      .reset()

    const userRepo = dataSource.getRepository(User)
    const users = await userRepo.find()
    const user = await userRepo.findOne({})

    expect(users).toEqual({})
    expect(user).toEqual({})
  })
})

If you find this package useful please stare this my github repository and share with other developers.

So if you enjoy my work and found it useful, consider buying me a coffee! I would really appreciate it.

How to send Email Using Laravel to GMAIL?

Jazim Abbas — Sun, 16 Jun 2019 12:32:32 +0000

How to send original email on gmail account using laravel. Please help me out.
I watched many videos but all not working for me . So please help me out?