Conventions

Conventions

This sections describes the file or folder management we used.

Assets

Add a graphics

Add a graphics in the images folder

    • To enable theming, naming convention should be <graphics_name>_<theme_name>.svg

    Update assets.tsx

    src/assets/images/assets.tsx

    import Graphics_orange from '@/assets/images/<folder>/graphics_orange.svg'
import Graphics_cyan from '@/assets/images/<folder>/graphics_cyan.svg'
import Graphics_cyan from '@/assets/images/<folder>/graphics_cyan.svg'
    export const assets: Assets = {
  orange: {
    // ...
    graphics: Graphics_orange,
  },
  cyan: {
    // ...
    graphics: Graphics_cyan,
  },
  purple: {
    // ...
    graphics: purple,
  },
}

    Usage

    import { useAppContext } from "@/context";
import { getImage } from "@/assets/images/assets";
    const { theme } = useAppContext();
    export const Demo:React.FC<> = () => {
  const { theme } = useAppContext();
  return (
    <div>
      <Image
        height={50}
        width={50}
        src={getImage("graphics", theme)}
        alt="Technology"
      />
    </div>
  );
};

    Data

    Add new data object

    Add a data object in the @/lib/data.tsx file

        • data.tsx
    • const new_info = {
    //
}

    Add data object definition

    src/app/lib/definitions.ts

    type New_info_props = {
    //
}
    import { New_info_props } from './definitions'
    const new_info:New_info_props = {
    //
}

    Usage

    import { new_info } from "@/lib/data";
    <List
    data={new_info}
    renderItem={item => <Item /> }
/>
    ComponentsAttributions