Repl.it UI
React components for repl.it
Usage
npm install @replit/uiimport { ROOT_THEME_CLASS } from '@replit/ui';
import Styles from '@replit/ui/Styles';
// Include <Styles /> on every pages to apply global css variables
const Layout = () => (
<body>
<Styles />
<div className={ROOT_THEME_CLASS}>{content}</div>
{/* Add "dark" class for dark theme */}
<div className={ROOT_THEME_CLASS + ' dark'}>{content}</div>
</body>
);
// Use a component
import Button from '@replit/ui/Button';
const Dialog: React.FC<{ /* ... */ }> = (props) => (
<div>
{props.children}
<Button onClick={props.onClick}>Ok</Button>
</div>
);Development
Heuristics: when do we move components into here?
- If there are designs for a component already and you are touching it a lot OR it’s completely new, move it in and implement. It should be there.
- If there are no new designs, but it’s very simple / dumb, if most of the redesign would just be CSS changes, move it into the UI lib, convert it to typescript, and Tyler (I) will go in and redesign it later.
- If there are no new designs and it’s complicated, don’t move it, we’ll deal with it later.
Install packages:
npm installRunning:
// For cosmos workshop
npm run dev
// For nextjs docs app
npm run dev:next
# or run inside docker
docker run -it --rm -v (pwd):/app -w /app -p 3000:3000 node:13-alpine npm run devPrinciples:
- Generally, components are self-contained in their respective
tsxfiles. - Theming is managed by changing the values of CSS variables. Individual components should have no concept of a theme.
Publishing a new version:
Generally we do this in three steps:
- Make a PR titled with the version number you are upgrading to, e.g.
0.0.30orbump to 0.0.030. Make sure you increment by one from the previous version. - Merge into master
- Go back to master and run
npm run distinside the directory. This will package everything up and publish to NPM.
This creates a special package.json file in /dist specifically for publishing to npm. Ultimately, this allows us to import components individually without adding "dist" to any component's import path. For example:
import Button from '@replit/ui/Button'
instead of:
import Button from '@replit/ui/dist/Button'
We set private: true and added an error message prepublishOnly to prevent accidentally publishing from the root using npm publish. directly.