Skip to content

ZopaPublic/react-components

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

React components

CI/CD code style: prettier semantic-release Commitizen friendly Dependencies - Always up to date

Shared react styled components for all the Zopa projects.

This repo contains 2 things at the same time:

  • The Typescript library for the react components

  • Documentation for the components managed with React-styleguidist

Check the docs ๐Ÿ’•

Migrating from version 3

There are a number of breaking changes which will need to be addressed when upgrading from Zopa React Components v3 to v4.

The migration guide will walk you through the major changes such as colours and typography.

Installation

git clone https://github.com/zopaUK/react-components.git
pnpm i

Local linking

Local linking with Next.js applications can be particularly challenging due to the way Next.js handles module resolution and its own optimization processes. When attempting to link local packages, such as react-components, with a Next.js application, developers might encounter issues related to module resolution, duplicate React instances, or unexpected behavior in hot module reloading (HMR).

To mitigate these issues, you can use pnpm dev:zrc.

Follow these steps:

  1. In the react-components directory, run the following command to start the watcher:
pnpm dev:zrc
  1. In the application directory, run the following command to link the react-components library (if it exists):
pnpm dev:zrc

Now, any changes made in the react-components codebase will be reflected in the linked application after a delay (~500ms).

NOTE: It is named "zrc" (specifically) to allow the developer to run the same command on both projects.

Running the project

Execute the development environment:

pnpm dev

The docs will run at localhost:6060.

Local development (working on a linked application)

We start a watcher using esbuild and tsc by running:

pnpm dev:code

Your locally running app will have its own way of linking to local dependencies but making changes in react-components codebase should now show in the application.

Motivation

The aim of this project is to share with the frontend community how we code in Zopa.

We think it might be useful for someone who wants to start a new react components library and want to re-use some of our code.

Types

You can access typings for specific components under @zopauk/react-components/types:

import { Button } from '@zopauk/react-components';
import { IButtonProps } from '@zopauk/react-components/types/components/atoms/Button';

To inspect the folder structure within @zopauk/react-components/types you can run yarn compile:types and navigate the generated types/ folder in the project root.

Contributing

In case you want to contribute to this library, please have a look at our contributing guidelines ๐Ÿ™Œ๐Ÿผ

Contributors

moshie
moshie
thegrinder
thegrinder
raff-r
raff-r
ubbe-xyz
ubbe-xyz
admmasters
admmasters
dfvalero
dfvalero
OlenaKashuba
OlenaKashuba
Gabss405
Gabss405
JuliaHempel
JuliaHempel
katebeavis
katebeavis
charlielizzy
charlielizzy
khumbon
khumbon
calvin-fung-zopa
calvin-fung-zopa
MichelleXBai
MichelleXBai
poteirard
poteirard
gbkr
gbkr
endymion1818
endymion1818
emilfjellstrom
emilfjellstrom
MillieClare
MillieClare
steedems
steedems
tlaak
tlaak
t-phamm
t-phamm
TomGroombridge
TomGroombridge
rominamoya
rominamoya
zopa-stephanie-senoner
zopa-stephanie-senoner
rorydpayne
rorydpayne
Blimeys
Blimeys
grabbeh
grabbeh
rory-payne
rory-payne

License

This repository is MIT-licensed.

Trade marks

No permission is granted to use the trade names, trade marks, service marks, or product names of Zopa, except as required for reasonable and customary use in describing the origin of this library and reproducing the content of the notice in the license.

Fonts

Zopa uses Open Sans in its sites and applications. If you want to make use of this font outside of Zopa, you will need to license it directly from Google Fonts.