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