1.0.0-alpha.35 • Published 12 days ago
@easypost/easy-ui v1.0.0-alpha.35
Easy UI
Easy UI is a component library designed to help developers create the best experience for shippers who use EasyPost.
Installation
Run the following command using npm:
npm install @easypost/easy-ui --save
Usage
- EasyUI uses Poppins as its primary font. Include Poppins and its declarations in your setup. You can host it yourself or use Google Fonts. All fonts are included in
.storybook/public/fonts/poppins
for self-hosting.
@font-face {
font-family: "Poppins";
font-style: normal;
font-weight: 400;
font-display: swap;
src:
url("/fonts/poppins/poppins-v20-latin-400.woff2") format("woff2"),
url("/fonts/poppins/poppins-v20-latin-400.woff") format("woff");
}
@font-face {
font-family: "Poppins";
font-style: normal;
font-weight: 500;
font-display: swap;
src:
url("/fonts/poppins/poppins-v20-latin-500.woff2") format("woff2"),
url("/fonts/poppins/poppins-v20-latin-500.woff") format("woff");
}
@font-face {
font-family: "Poppins";
font-style: normal;
font-weight: 600;
font-display: swap;
src:
url("/fonts/poppins/poppins-v20-latin-600.woff2") format("woff2"),
url("/fonts/poppins/poppins-v20-latin-600.woff") format("woff");
}
@font-face {
font-family: "Poppins";
font-style: normal;
font-weight: 700;
font-display: swap;
src:
url("/fonts/poppins/poppins-v20-latin-700.woff2") format("woff2"),
url("/fonts/poppins/poppins-v20-latin-700.woff") format("woff");
}
- Import the CSS directly into your project if your asset packager supports it:
import "@easypost/easy-ui/style.css";
- Include the provider and any relevant components in your project:
import { Provider as EasyUIProvider } from "@easypost/easy-ui/Provider";
- Tell React to render the element in the DOM:
ReactDOM.render(
<EasyUIProvider>
<div>{/* More to come */}</div>
</EasyUIProvider>,
document.querySelector("#app"),
);
Development
We use Storybook to create a simple, hot-reloading playground for development on these components.
Commands
Command | Runs |
---|---|
npm run build | Builds the project |
npm run clean | Removes temp directories |
npm run lint | Lints the project (ESLint, Stylelint, Prettier) |
npm run test | Tests the project |
npm run test:watch | Tests the project in watch mod |
1.0.0-alpha.35
12 days ago
1.0.0-alpha.34
26 days ago
1.0.0-alpha.33
1 month ago
1.0.0-alpha.32
1 month ago
1.0.0-alpha.31
2 months ago
1.0.0-alpha.30
2 months ago
1.0.0-alpha.29
3 months ago
1.0.0-alpha.28
3 months ago
1.0.0-alpha.27
3 months ago
1.0.0-alpha.26
3 months ago
1.0.0-alpha.25
3 months ago
1.0.0-alpha.24
4 months ago
1.0.0-alpha.23
4 months ago
1.0.0-alpha.22
4 months ago
1.0.0-alpha.21
5 months ago
1.0.0-alpha.20
5 months ago
1.0.0-alpha.19
5 months ago
1.0.0-alpha.9
9 months ago
1.0.0-alpha.8
9 months ago
1.0.0-alpha.7
9 months ago
1.0.0-alpha.6
10 months ago
1.0.0-alpha.10
9 months ago
1.0.0-alpha.5
10 months ago
1.0.0-alpha.16
6 months ago
1.0.0-alpha.15
7 months ago
1.0.0-alpha.18
5 months ago
1.0.0-alpha.17
6 months ago
1.0.0-alpha.12
8 months ago
1.0.0-alpha.11
9 months ago
1.0.0-alpha.14
8 months ago
1.0.0-alpha.13
8 months ago
1.0.0-alpha.4
10 months ago
1.0.0-alpha.3
12 months ago
1.0.0-alpha.2
1 year ago
1.0.0-alpha.1
1 year ago
1.0.0-alpha.0
1 year ago