The website for the Regen Network decentralized infrastructure.
- Regen Website
This project uses lerna with yarn workspaces to manage multiple packages:
web-marketplace
: Registry React applicationweb-components
: React components and material-ui custom themeweb-storybook
: Storybook configweb-auth
: React application used for Auth0 Custom Universal Login
If you haven't already, you can set up system dependencies by running the following commands:
brew install python
sudo ln -s /opt/homebrew/bin/python3 /opt/homebrew/bin/python
brew install vips
Note: python
and vips
are dependencies via sharp
.
yarn install
yarn bootstrap
Prepare some artifacts needed to run in dev mode:
yarn build
Set variables in .env
files in web-marketplace/
and web-storybook/
folders based on provided .env.example
files.
For web-auth
, follow these setup instructions.
First, run:
yarn watch
It will watch for changes in web-components
and rebuild them in web-components/lib
directory.
Then, to run the registry app:
yarn start
To run Storybook:
yarn storybook
To run the auth app:
yarn start-auth
Compile web-components
and web-marketplace
to web-components/lib
and web-marketplace/build
respectively:
yarn build
To generate Type definitions from our GraphQL Schema, as well as custom react hooks, make sure the graphQL server is running locally, cd
into the appropriate sub-folder and run (per repo):
For /web-marketplace
there are two commands for the separate sources:
yarn graphql:codegen
- for registry server graphql typesyarn graphql:codegen-sanity
- for sanity CMS graphql types
which generates types for any named GraphQL queries and mutations in web-marketplace/src/graphql/*.graphql
(note - it does not generate types for unnamed queries)
yarn graphql:codegen
This should be done anytime a .graphql
file is created or modified.
As part of https://github.com/regen-network/registry-server/pull/186, we've added some additional filtering features to our GraphQL server (using postgraphile-plugin-connection-filter), though we restricted the filters to only work on certain fields and operators for now for performance and security reasons: https://github.com/regen-network/registry-server/blob/aa97096c9a8e88e1af97655586e0222e263b8df5/server/Server.ts#L111-L115
If you try to use a filter that is not allowed yet, you'll get the following error when trying to generate types:
GraphQLDocumentError: Field "${fieldName}" is not defined by type "${TableName}Filter".
In this case, you might want to submit a PR on https://github.com/regen-network/registry-server first to allow more filtering options.
Similarly, types can be generated for Sanity GraphQL Schema (from web-marketplace/src/graphql/sanity/*.graphql
) using:
yarn graphql:codegen-sanity
Compile web-components
and web-storybook
to web-components/lib
and web-storybook/build
respectively:
yarn build-storybook
Please, follow these instructions and then:
- Run
yarn build-auth
command. - Copy the code from
./build/index.html
. - Paste it into the Universal Login HTML form from Auth dashboard and save.
This could be automated in the future.
yarn test
Launches the test runner in the interactive watch mode. Jest is used as test runner.
We're using StoryShots for snapshots testing. Update web-components snapshots:
yarn test-update-snapshot
Prettier and ESLint are used as code formatter and linter.
Code can be formatted and any auto-fixable errors corrected through the command:
yarn format-and-fix
If you are using VsCode, there are suggested workspace settings in .vscode/settings.json.suggested
- copy those over to your workspace settings.json
and things should format automatically.
Note: You'll need the VsCode extensions for Prettier and ESLint
This repo utilizes custom MUI Typography components to normalize styles with the mockups based on the typography in figma:
<Title />
corresponds to "Header" text in the mockups<Label />
corresponds to "Button Text" in the mockups<Subtitle />
<Body />
Responsive styles are generally normalized (e.g. an H1
on desktop translates to an H3
on mobile in most cases), however these can be overridden with variant
/ mobileVariant
(for Titles) and size
/ mobileSize
(for the others). For example:
<Title /> // renders an h1 (default) on desktop, h3 on mobile
<Title variant="h3" /> // renders an h3 on desktop, h4 on mobile
<Title variant="h3" mobileVariant="h3" /> // renders an h3 on desktop & mobile
<Subtitle size="xl" mobileSize="sm" />
<Body mobileSize="md" /> // keep default `md` size on mobile
One small gotcha: due to how styled
components and the sx
prop function together, if you want to use a custom fontSize
through sx
, you have to pass responsive values:
<Title sx={{ fontSize: 12 }}> // does not work as expected
<Title sx={{ fontSize: [12] }}> // works
<Title sx={{ fontSize: [12, 18] }}> // works
<Title sx={{ fontSize: { xs: 12 } }}> // works
All of these components also accept MUI's SX Prop.
The <Body>
component by default will add styles to child Link
and ul/ol
elements, which can be overridden through props:
<Body>
<Link>text</Link> // will render as green w/ bold text
<ol>
<li>list text</li> // will render with a green dot and custom positioning
</ol>
</Body>
<Body styleLinks={false} styleLists={false}>
<Link>text</Link> // will render as default text
<ol>
<li>list text</li> // will render with default list styles
</ol>
</Body>
Px | Rem | theme.spacing | Figma Component | UI Components | MUI Variants |
---|---|---|---|---|---|
48px | 3rem | 12 | H1 | Title | H1 |
38px | 2.375rem | 9.5 | H2 | Title | H2 |
32px | 2rem | 8 | H3 | Title | H3 |
24px | 1.5rem | 6 | H4 | Title | H4 |
22px | 1.375rem | 5.5 | bodyXLarge, subtitleXLarge | Body, Subtitle | textXLarge |
21px | 1.313rem | 5.252 | H5, ButtonLarge | Title, Label | H5 |
18px | 1.125rem | 4.5 | H6, subtitleLarge bodyLarge, buttonMedium | Title, Subtitle, Body, Label | h6, textLarge |
16px | 1rem | 4 | subtitleMedium, bodyMedium | Subtitle, Label | textMedium |
14px | 0.875rem | 3.5 | subtitleSmall, bodySmall, buttonSmall | Subtitle, Body, Label | textSmall |
12px | 0.75rem | 3 | subtitleXSmall bodyXSmall, buttonXSmall | Subtitle, Body, Label | textXSmall |
some larger packages don't manage to get downloaded in time for yarn's 30 second timeout, you might see an error like this one
info There appears to be trouble with your network connection. Retrying...
error An unexpected error occurred: "https://registry.yarnpkg.com/@material-ui/icons/-/icons-4.5.1.tgz: ESOCKETTIMEDOUT".
info If you think this is a bug, please open a bug report with the information provided in "/Users/jared/Dev/registry/yarn-error.log".
a simple workaround via mui/material-ui#12432 is to run
yarn install --network-timeout 500000
instead of yarn install
Currently we use netlify to deploy this application.
Please see the netlify.toml
in the project root for information about the different deployment environments.
In case you are seeing a build/deploy failure from Netlify, there is a helpful way to debug. Netlify provides the source code for their build-image. This docker image can be used to run a netlify build worker on your local machine. This allows you to test settings and parameters of the build. Hopefully this allows you to reproduce the error/failure you are dealing with.
git clone https://github.com/netlify/build-image
cd build-images
docker pull netlify/build:focal
./test-tools/start-image.sh ../regen-web/
Make sure that any changes you want to test in the local build are committed. Uncommited changes are ignored by the Netlify build image.
After running the start-image.sh
script you will drop into the docker container.
Then you will be able to run any commands, i.e. the build:
/opt/build-bin/build yarn build