1.0.15 • Published 3 years ago

@buyfood/components v1.0.15

Weekly downloads
-
License
ISC
Repository
github
Last release
3 years ago

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
1.0.15

3 years ago

1.0.14

3 years ago

1.0.13

3 years ago

1.0.12

3 years ago

1.0.11

3 years ago

1.0.10

3 years ago

1.0.9

3 years ago

1.0.8

3 years ago

1.0.7

3 years ago

1.0.6

3 years ago

1.0.5

3 years ago

1.0.4

3 years ago

1.0.3

3 years ago

1.0.2

3 years ago

1.0.1

3 years ago

1.0.0

3 years ago

0.0.50

3 years ago

0.0.49

3 years ago

0.0.48

3 years ago

0.0.47

3 years ago

0.0.46

3 years ago

0.0.45

3 years ago

0.0.44

3 years ago

0.0.43

3 years ago

0.0.42

3 years ago

0.0.41

3 years ago

0.0.40

3 years ago

0.0.39

3 years ago

0.0.38

3 years ago

0.0.37

3 years ago

0.0.36

3 years ago

0.0.35

3 years ago

0.0.34

3 years ago

0.0.33

3 years ago

0.0.32

3 years ago

0.0.31

3 years ago

0.0.30

3 years ago

0.0.29

3 years ago

0.0.28

3 years ago

0.0.27

3 years ago

0.0.26

3 years ago

0.0.25

3 years ago

0.0.24

3 years ago

0.0.23

3 years ago

0.0.22

3 years ago

0.0.21

3 years ago

0.0.20

3 years ago

0.0.19

3 years ago

0.0.18

3 years ago

0.0.17

3 years ago

0.0.16

3 years ago

0.0.15

3 years ago

0.0.14

3 years ago

0.0.13

3 years ago

0.0.12

3 years ago

0.0.11

3 years ago

0.0.10

3 years ago

0.0.9

3 years ago

0.0.8

3 years ago

0.0.7

3 years ago

0.0.6

3 years ago

0.0.5

3 years ago

0.0.4

3 years ago

0.0.3

3 years ago

0.0.1

3 years ago