Ecommerce Campaign Elements

Basic Idea behind file/folders naming

Each standalone components (Button,Image,Text etc) are considered as atoms. Any component that is a combination of multiple atoms is considered a molecule

Basic scripts to run

Start storybook

yarn storybook

Start storybook (without caching enabled)

yarn storybook:no-cache

Start development procedure

yarn dev

Build files for production

yarn build

Generate an atom based on preconfigured templates

yarn generate:component <AtomName>

Components files structure

Atoms

Each atom contains at least 5 files

• Atom.scss
• Atom.stories.tsx
• Atom.test.tsx
• Atom.tsx
• config.ts

Key points of the atom development procedure

• Every config.ts file exports AtomProps interface and a SampleData object
• If an atom can be styled dynamically, AtomProps extends an AtomStylingProps type with the enabled css properties this atom can be configured
• If an atom can be styled dynamically, we should use styled-components as bellow (Text example):

    const StyledText = styled['p']((props: TextStylingProps) => ({
        color: props.fontColor,
        fontSize: props.fontSize,
        textAlign: props.textAlignment,
        lineHeight: props.lineHeight
}))

Ways to export atomic components and utils

Library should export as a default object all the available atoms, molecules etc that should be used as the composition view

export default {
    Layout,
    Button,
    Image,
    Text
}

Any component we want to expose as an util should be exported separately

export {
    Composition,
    customHooks,
    helpers,
    etc
}