🧱 Components

Our library of components is designed to be modular, optimized, and explicit. Unlike other libraries that centralize all exports, here each component must be imported from its specific path, which allows:

• Improve the tree-shaking
• Decrease the bundle size importing only the components you need.
• Avoid loading unnecessary code.
• Facilitate the understanding of the codebase by making it explicit where each component is located.

📥 How to import a component?

The imports are divided into categories based on atomic design principles, which helps in organizing and understanding the components better. These categories include:

• Atoms: Basic building blocks like Button, TextInput, Switch, etc.

  • Import them from '@madefordevs1999/ui-launch-native/system/atoms/<component-name>'.

• Molecules: Combinations of atoms that form more complex components like SearchBar, Tabs , etc.

  • Import them from '@madefordevs1999/ui-launch-native/system/molecules/<component-name>'.

• Organisms: More complex components that can include multiple molecules and atoms, such as PlaceCard, OfferList, etc.

  • Import them from '@madefordevs1999/ui-launch-native/system/organisms/<component-name>'.

• Icons: Icons are imported from the @madefordevs1999/ui-launch-native/system/icons directory.

  • Import them from '@madefordevs1999/ui-launch-native/system/icons/<icon-category>/<icon-name>'.
  • Note: The icons are organized into categories for better organization and easier access. For example, you can find icons into navigation, functional, informative.

Use individual imports for each component from their specific paths. For example:

import Box from '@madefordevs1999/ui-launch-native/system/atoms/Box';
import ButtonSubmit from '@madefordevs1999/ui-launch-native/system/molecules/ButtonSubmit';
import HomeFilled from '@madefordevs1999/ui-launch-native/system/icons/navigation/HomeFilled';
import OfferCard from '@madefordevs1999/ui-launch-native/system/templates/OfferCard';

const App = () => {
  const theme = useTheme();

  const showOfferCard = () => {
    // Logic to show the OfferCard
  };

  return (
    <Box>
      <ButtonSubmit text="Press me to show OfferCard" onPress={showOfferCard} />
      <HomeFilled color={theme.colors.IconStaticWhite} />
      <OfferCard {...props} />
    </Box>
  );
};