CHANGELOG.md

Changelog

All notable changes to this project will be documented in this file. See standard-version for commit guidelines.

0.1.1 (2023-04-09)

0.1.0 (2023-04-09)

Features

• about apge: about Page (0fe6d7b)
• about us: created About us Page with it`s test (d88f78e)
• aboutus page: created About us page with translation (ed65873)
• aboutus page: created Aboutus Page with its test (501d044)
• activation-login-out-buttons-and-user-image: active-login-out-buttons-and-user-image-google (5e0dbf1)
• add appointment apis (88b4845)
• add appointment tests (f53fd22)
• add book appointment page (8f9fdbf)
• add configs for storybook (7843880)
• add email user configs (f48a11e)
• add env variables for app (9bf3860)
• add facebook/google authentication: add FB & Google authentication to the app using firebase (ea837ad)
• add functioality to login-out-buttons and userimage: add funtions to Login and Log out buttons (3e4972d)
• add general button (a60c896)
• add general FormTitle (d4ca2b2)
• add general input (b84d5ff)
• add generated tailwind file for storybook (ef13175)
• add get data from firebase abstraction (23e79e0)
• add get data from firebase abstraction (60a84f9)
• add install dependencies into actions (150a62b)
• add login image (cafa639)
• add logout and userimage: add them and solve the conflict (a9f34c9)
• add mailer and axios packages (41e0aa4)
• add margin top and edit the size of text placeholder (e55b09d)
• add nodemailer base configs (f4e0e1d)
• add or translate (b00ffba)
• add post handler util using axios (f79130e)
• add pull request template (c8ea0d2)
• add radio input item component (0ca2147)
• add requirement component (b66d08e)
• add requirements from firebase (01854b9)
• add requirements image for page (def375a)
• add send email to confirm appointment (a54a0ca)
• add serverside (f94bfa3)
• add shadow to button filled (0f4672d)
• add stories for stepper component (32a1d4c)
• add testid to svg (2c73a9a)
• add tests to the requirements component (10c3c51)
• add the requirements localization files (ffb5e97)
• add the requirements page (aa5d801)
• add the requirements section for the requirements point (bee0b32)
• add the storybook to app (519fc03)
• add the textarea component (2b9c8c7)
• add therapist translate (f40fc56)
• add therapist translate (28437a0)
• add transalte to arabic to same element (8eef6e7)
• adding address (582da95)
• adding content of header (ec324fd)
• adding footer links (8c65d07)
• adding last form as step (e02b0f3)
• adding some details (37228cc)
• adding svg to dir (8c2e578)
• adding translation for contact us page (250f758)
• adding translation of 8th step (93d0aea)
• build radio group component (1a1fb70)
• button: edit the space in mobile screen (9885351)
• capitalize titles of step (29e8de6)
• chang img (f3b77cf)
• communicate through section (639bc73)
• complete recent blog (0ef0e32)
• container for footer (e53f712)
• create script translate simgup page ar (9148b05)
• create script translate simgup page en (63d9c68)
• create new test file (49fda97)
• create PreviewProfile component (dcc2d92)
• create the book appointment component (89af828)
• create therapist page with design (4c1ac50)
• desgin login page (37aa782)
• desgin whole singup page (67d394d)
• design auth as social media (8342d7c)
• design login page (8133939)
• design trust therapists (4c9f57d)
• develop test cases for radio group component (38b9246)
• doc: update readme file (23aa332)
• dsf: sdf (36cadec)
• edit button size (4308d68)
• edit font text size (350dc4f)
• edit form width (cdd4520)
• edit gird of child div (b9bd44c)
• edit sm size to fit placeholder in input (2d86acd)
• edit text size in large screen (4e81977)
• edit the size of button (057bb13)
• edit translate in form title (eca63c3)
• enhance button to make it more responsive (dc5cc3a)
• fetch choices of type contact from firebase (89780c0)
• fetch requirements data from firebase collection (f9a8877)
• footer component along with test (c1802a4)
• footer component along with test (c83116d)
• footer component along with testg (6750601)
• formate file (831b4c5)
• initialize Hero section (0f62957)
• install icons (484ccb8)
• install yup library (fa43b4e)
• make border of input and textarea same (20338d0)
• make image clickable (5f5ce92)
• make image clickable (25757cd)
• make it more responsive (6e5df0c)
• make it more responsive (7ac566d)
• make it responsive in all screen (04afb45)
• modify regex to be able to write in arabic letters (90b944a)
• navbar along with test and translation (4c0602e)
• pageintro: create and test pageintro component (a7cc302)
• putting components to others (c7a14f2)
• reading from firebase (0fa4eb4)
• recent blogs section (2606402)
• remove anrelated code (55a3bb8)
• remove FormTitle.test.js.snap from ui test (313f5f5)
• remove import image (174eadd)
• remove login test file (2a986b2)
• remove some styling on the parent dev (9e63ef8)
• remove testid and add translate to it (10bdfb0)
• rename file (30a5445)
• rename file (18d1376)
• responsive hero (d383bc8)
• responsive navbar along with test (9f1a55d)
• responsive newsletter form to subscribe (683b5f2)
• right buttons in right steps (0e3ed7b)
• save after merge (9e66c62)
• single_team_card_component: created a Team template Card with its test (7805c9c)
• standarize textarea with input (2db3de5)
• standarize textarea with input (aca4c94)
• start working on thanks page (62a6457)
• stepper component has been added (e3ad817)
• submit to db with typeOfContact info (d263375)
• successfull translate (ffee9af)
• successfully add to db (d3615a6)
• successfully read from firebase (cfce12c)
• team page: create Team page with Translation (a6f7d70)
• team section: created Team section with it`s test (6edb39f)
• teampage: created Team page without Layout(navbar and footer) (9e4edd9)
• translate title to ar (ac8c29c)
• translate trust therapist (2d9d7fc)
• update file (8b68f95)
• update package file to be sync with json file (32e7341)
• update text to fit caseCamel (b8b462a)
• use paseed translation (36a50d9)
• use tailwind rtl props (cc85d5e)
• utils staff (533759e)
• validation for form controls and update input & textarea component to accomodate err msg (f1ca4d1)
• wrap field control by form and adding button (351ffca)
• write component style (162042b)

Bug Fixes

• add validation for children component in radio group (dc46478)
• bug in en validation json (fadbae8)
• bug in en validation json (b98b0dc)
• button of 7th stepper (b4df9d5)
• change const props in dropdown component (b9b530b)
• class to className (4e99e75)
• conditional rendering for input item (3ab343b)
• conficts and merge (0388e9b)
• confilct and save after merge (b8d4b84)
• conflict and save after merge (3688aef)
• conflict and save it (75cbe19)
• conflict in index (5874be2)
• conflict in index page (0ec1131)
• conflict in signp ar/en file and save chang (33cf136)
• contactUs key translation and link page to navbar (9978b12)
• correct the location of the car, whether there is a lot of content on the page or not (0eb6e3a)
• correct the location of the footer, whether there is a lot of content on the page or not (a3a374e)
• delete className from dropdown component and delete import all from index and made some changes (68c2c69)
• delete snapshot file (e5d6b7d)
• deploy erorrs (59f475b)
• deploy errors (a00b13e)
• deploy errors try 3 (c986211)
• deploy errors try 4 (a45753b)
• deploy errors try5 (e34917e)
• double click radio button bug (a70db06)
• duplicate in layout for 404 page (5e4201b)
• error in test case (f5656d8)
• firebase config (cab3202)
• firebase configuration for app (ffb6401)
• fix a small error (f69a41f)
• fix all errors (f4ba9dd)
• fix bug in translation and layout (902495c)
• fix dependencies (82ae492)
• fix erroe (2b68c07)
• fix error (43ebc30)
• fix error (0f340b4)
• fix error (41aca14)
• fix errors in dropdowm component (5f8fd28)
• fix issue in dropdown component (f982c00)
• fix merging conflicts (a47ac7c)
• fix multiple namespace translations for i18n (ffa7006)
• fix onChange func and some issues (3ff291a)
• fix style (cd56e65)
• fix style of component (389235a)
• fix template typos (740e56a)
• format file using prettier (8bd5d8a)
• format files using prettier (d57c52c)
• format using prettier (4975b72)
• formate file with prettier (e005c23)
• ignore yarn lock file in git source control (f4e0bfe)
• invalid DOM property for to htmlFor (8c682f6)
• key for each item of recent blog (cb96d2b)
• key prop warning (c90b973)
• merge conflict (322602c)
• merge conflict (3aa90ef)
• merge conflict (642c987)
• merge conflict (70b76ff)
• merge conflict (55a3553)
• merge conflict (66807f4)
• merge conflict (4b4faa0)
• merge conflict (c77ccd5)
• merge conflict (9f7f64b)
• merge conflict (40dfa47)
• merge conflict (4cd41a9)
• merge conflicts (0e0f47e)
• modify rtl, ltr layouts (ff0d503)
• navbar (3b73775)
• navbar in mobile view (a736608)
• onChange event for input values (34aaedd)
• prettier error (765e00a)
• prettier formatter (8d0d940)
• radio group causing server side error (ccb77de)
• remove unused files (cd9e110)
• rename issues to issue (27c8bd9)
• rename prop to props (5a3293b)
• replace button to be below form in mobile device (9c768fd)
• replace command flag (f78ddfe)
• replace png by svg (cb72a72)
• responsive for requirement component (9dab810)
• responsive in footer (ad844b0)
• revert the changes in actions (cf5c833)
• rtl layout using tailwind rtl (d097155)
• snapshot updated (f9824f4)
• standarize font size in links and subscribe subtitle (0cb6671)
• stepper current step if current is less than 0 (2bcbb36)
• stepper submit event (66d18d3)
• team_member_card: fix the name of file (4837352)
• test updated (a4eb067)
• textarea style (ba41951)
• the space x between element in rtl (6926640)
• update changes state for components (73c3109)
• update lock file (25c955e)
• update lock file (6dab344)
• update snapshot file (ad67bfd)
• update test command (952a7ff)
• use the post handler util function (cb01b6f)
• workflow checks bug (365a6b7)

0.5.3 - 2022-02-27

New Features

• Shimmer for NextImage and Skeleton

  Addition of shimmer & blur placeholder for NextImage, and new Skeleton Component with shimmer effect.

  CleanShot.2022-02-27.at.11.02.05.mp4

• Support for SVGR

  You can directly import SVG like

  import Vercel from '~/svg/Vercel.svg';
  
  <Vercel className='text-5xl' />

• Public Folder Path Mapping

  Easily access public folder with ~/ prefix.

• Tailwind CSS Prettier Sorter

  ts-nextjs-tailwind-starter now use first-party plugin prettier-plugin-tailwindcss

Improvements & Bug Fixes

• Layout Declared Twice

  Fix issue where adding elements to Layout ends up rendering them twice

• ESLint Curly Brace Rule

  New autofixable rule

  props={'hi'}
  
  will become
  
  props='hi'

0.5.2 - 2021-12-30

New Features

• New Component: PrimaryLink

  Add a link component with accent color on top of UnstyledLink.

Improvements & Bug Fixes

• Unused Import ESlint Autofix

  Unused import will automatically be removed by the ESlint autofix.

• Renamed CustomLink to UnderlineLink

  This is to compensate the new PrimaryLink component

• Primary Button & ButtonLink Shade

  The shade of the button is now using the 500 instead of 400.

0.5.1 - 2021-12-26

New Features

• New Snippets Wrap: clsx and fragment <></>

  You can select text then wrap it with clsx or React.Fragment shorthand.

  CleanShot.2021-12-26.at.14.28.07.mp4

0.5.0 - 2021-12-21

New Features

• Expansion Pack

  You can easily add expansion such as React Hook Form + Components, Storybook, and more just using a single command line.

  CleanShot.2021-12-04.at.18.54.07-trimmed.mp4

  Check out the expansion pack repository for the commands

Improvements & Bug Fixes

• Can't Use Layout Fill on NextImage

  Using layout fill will make the width and height optional

• Vertically center Button & ButtonLink

  Adds items-center to make the button vertically centered

0.4.1 - 2021-12-12

New Features

• Tailwind CSS v3

  The color palette configuration is also updated accordingly.

0.4.0 - 2021-12-02

New Features

• Button & ButtonLink Variants

  • New Variant: Outline and Ghost, you can also add isDarkBg prop if you are using these variants with dark background.
  • Animated Underline style on Primary, Dark, Light is removed
  • Added ring-primary-500 on focus-visible

  

• ArrowLink

  Adds an animated arrow, this component is Polymorphic, the default element is CustomLink, you can extend it with as prop.

  <ArrowLink
    as={ButtonLink}
    variant='light'
    href='/'
  >
    Register now
  </ArrowLink>

  

• Change default theme to white

Improvements & Bug Fixes

• Split Next.js Link Props Type

  Now, to add props to Next.js <Link> component, you can use nextLinkProps.

  <UnstyledLink 
    href='/'
    nextLinkProps={{
      shallow: true,
    }}
  >
    Link
  </UnstyledLink>

  The rest of <a> props can be directly added as a prop.

• Add Motion Safe to Animations

  All components animation respect user preference about motion.

0.3.0 - 2021-12-01

New Features

• Create Branch & Auto Resolve Issue Actions

  Auto Create Branch	Auto Resolve

  You have to install the app for your organization/account/repository from the GitHub Marketplace for this to work.

  The branch will be created on assign with format i${number}-${issue_title_lowercase}.

• Custom Tailwind CSS Class Sorter

  Classes are sorted using prettier-plugin-sort-class-names with custom class order on this file and custom variant order on prettierrc

  With this plugin, we can now safely check the order of the classes using the preconfigured lint action.

0.2.0 - 2021-11-10

New Features

• Jest

  Jest is configured and will be run every push on Github Actions

• Lint Github Action

  1. ESLint - will fail if there are any warning and error.
  2. Type Check - will fail on tsc error.
  3. Prettier Check - will fail if there are any formatting error.
  4. Test - will fail if there are any test failure.

0.1.0

New Features

• Installed Packages

  1. clsx, utility for constructing className strings conditionally.
  2. react-icons, svg react icons of popular icon packs.

• UnstyledLink Component

  Used as a component for Next.js Link. Will render out Next/Link if the href started with / or #, else will render an a tag with target='_blank'. Also add a cursor style for outside links

• CustomLink Component

  

• Absolute Import

  You can import without using relative path

  import Nav from '../../../components/Nav';
  
  simplified to
  
  import Nav from '@/components/Nav';

• Seo Component

  Configure the default in src/components/Seo.tsx. If you want to use the default, just add <Seo /> on top of your page.

  You can also customize it per page by overriding the title, description as props

  <Seo title='Next.js Tailwind Starter' description='your description' />

  or if you want to still keep the title like %s | Next.js Tailwind Starter, you can use templateTitle props.

• Custom 404 Page

• Workspace Snippets

Snippets such as React import, useState, useEffect, React Component. View more

• Husky, Prettier, Lint, and Commitlint Configured

  3 Husky hooks including:

  1. pre-commit, running next lint and format the code using prettier
  2. commit-msg, running commitlint to ensure the use of Conventional Commit for commit messages
  3. post-merge, running yarn every git pull or after merge to ensure all new packages are installed and ready to go

• Default Favicon Declaration

  Use Favicon Generator and then overwrite the files in /public/favicon

• Default Tailwind CSS Base Styles

  There are default styles for responsive heading sizes, and .layout to support a max-width for larger screen size. Find more about it on my blog post

• Open Graph Generator

  Open Graph is generated using og.thcl.dev, but please fork and self-host if your website is going to have a lot of traffic.

  Check out the repository to see the API parameters.

• Preloaded & Self Hosted Inter Fonts

  Inter fonts is a variable fonts that is self hosted and preloaded.

Snippets

This starter is equipped with workspace-snippets, it is encouraged to use it, especially the np and rc

Next.js Page

File inside src/pages will be the webpage route, there are 2 things that need to be added in Next.js page:

1. Seo component
2. Layout class to give constraint to viewport width. Read more about layout class.

Snippets: np

import * as React from 'react';
import Seo from '@/components/Seo';
export default function TestPage() {
  return (
    <>
      <Seo templateTitle='Test' />
      <main>
        <section className=''>
          <div className='layout'></div>
        </section>
      </main>
    </>
  );
}

React Components

To make a new component, It is encouraged to use export default function. Because when we need to rename it, we only need to do it once.

Snippets: rc

import * as React from 'react';
export default function Component() {
  return <div></div>;
}

Import React

Snippets: ir

import * as React from 'react';

Import Next Image

Snippets: imimg

import Image from 'next/image';

Import Next Link

Snippets: iml

import Link from 'next/link';

useState Hook

Snippets: us

const [state, setState] = React.useState(initialState);

useEffect Hook

Snippets: uf

React.useEffect(() => {}, []);

useReducer Hook

Snippets: ur

const [state, dispatch] = React.useReducer(someReducer, {});

useRef Hook

Snippets: urf

const someRef = React.useRef();

Region Comment

It is really useful when we need to group code. It is also collapsible in VSCode

Snippets: reg

//#region  //*============== FORM SUBMIT
//#endregion  //*============== FORM SUBMIT

You should also use Better Comments extension.