Buyfood Components

Publish to NPM Run yarn build

This is the codebase for buyfood components.

Visit here to see components documentation. https://buyfood-components.netlify.app/

How to Use

yarn add @buyfood/components

In the root folder, add the CSS

import "@buyfood/components/dist/style.css";
import "@buyfood/components/dist/scss/app.scss";

Main Libraries

• SCSS: We use SCSS for styling in support with CSS modules
• Bootstrap Grid: We only use bootstrap grid system so as not build ours from scratch
• React Aria: We also use React Aria for our components library, we only build ours if it does not exist in React Aria
• Axios: We use Axios to connect to our apis.
• Storybook: We use Storybook to document our components
• Framer Motion: We use Framer Motion to implement animation.

Components Structure

All General Components not limited to a single page will be in the lib/components folder.

Right Ways

• eg lib/components/Form/Button/index.tsx
• eg lib/components/Text/Header.index.tsx
• eg lib/components/H1/index.tsx

Wrong Ways

• eg lib/components/Button/Button.tsx
• eg lib/components/Text/text.tsx
• eg lib/components/Text/H1/text.tsx

Components limited to just a component, should be in the component folder eg lib/components/CashBalances/components/LinkedAccounts

Right Ways

• eg lib/components/CashBalances/components/LinkedAccounts/index.tsx
• eg lib/components/CashBalances/components/TransactionsTable/index.tsx

Wrong Ways

• eg lib/components/CashBalances/components/LinkedAccounts.tsx
• eg lib/components/CashBalances/LinkedAccounts.tsx

All stylings, types and hooks should be extracted to the components folder so as not to overwhelm the component.

• eg lib/components/CashBalances/components/LinkedAccounts/styles.tsx
• eg lib/components/CashBalances/styles.tsx
• eg lib/components/CashBalances/components/LinkedAccounts/types.tsx
• eg lib/components/CashBalances/components/LinkedAccounts/index.stories.tsx

All components should be documented when created with Storybook**

Creating PRs

Prs should come in this format

{ALIAS}/{JIRA-TICKET-NUMBER}-{WHAT-YOU-ARE-WORKING-ON}

eg OA/BF-221-transactions-tables

Run

• Run Storybook to get access to all available components: yarn storybook
• Run the app: yarn dev