@replit/ui

v0.0.53

Published

2 days ago

React components for Repl.it UI

Downloads

Repl.it UI

React components for repl.it

Usage

npm install @replit/ui

import { 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 install

Running:


// 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 dev

Principles:

Generally, components are self-contained in their respective tsx files.
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.30 or bump 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 dist inside 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.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme