Uiverse is a UI component library designed to provide a set of reusable and customizable components for building modern web applications.
To install Uiverse, use npm or yarn:
npm install galaxis-uiverse
yarn add galaxis-uiverseYou can configure the Uiverse theme by providing a configuration object to the Uiverse. The configuration is optional, and the default theme is "dark".
import { Uiverse } from "galaxis-uiverse";
// Optional, you can use simple <Uiverse></Uiverse>
const config = {
theme: "dark", // or "light"
};
function App() {
return (
<Uiverse config={config}>
<PackageComponents />
</Uiverse>
);
}To set up the project in development mode, follow these steps:
-
Create a public folder: Create a
publicfolder in the root directory of your project. -
Create an index.html: Inside the
publicfolder, create anindex.htmlfile with the following content:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Uiverse</title>
</head>
<body>
<div id="root"></div>
</body>
</html>- Create an index.tsx: In the
srcfolder, create anindex.tsxfile with the following content:
import React from "react";
import ReactDOM from "react-dom/client";
import { Uiverse } from "./uiverse";
const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);
root.render(
<React.StrictMode>
<Uiverse>{/* You can import the developing component here */}</Uiverse>
</React.StrictMode>
);-
Rename the src/index.ts: Rename the
src/index.tsfile tosrc/ignore-index.ts. -
Start the development server: Run the following command to start the development server:
npm run start- Open the app in the browser: Open your browser and navigate to
http://localhost:3000to see your app in action.
To create a new component and integrate it with Figma Code Connect and Storybook, follow these steps:
-
Create a component: In the
src/uiverse/componentsfolder, create a new component file, e.g.,my-component.component.tsxand create a styled wrapper for your component. -
Connect to Figma: Use the
figma connect create https://www.figma.com/componentURLcommand to generate properties from Figma. ReplacecomponentURLwith your Figma component URL. -
Implement the component: Use the generated properties in your component implementation.
-
Publish to Figma: After implementing the component or components, run the following command to publish your code to Figma
figma connect publish. -
Create Storybook examples: Add examples for your component in Storybook. Create a new story file, e.g., my-component.stories.tsx.
-
Run Storybook locally: To see your component in action, run the following command:
npm run storybook- Publish to Chromatic: If everything looks good, publish your Storybook to Chromatic.
npm run chromaticTo configure the environment for publishing to Figma and Chromatic, create a .env file with the following properties:
FIGMA_ACCESS_TOKEN=your_figma_access_token
CHROMATIC_PROJECT_TOKEN=your_chromatic_project_token
To create a Figma access token, follow these steps:
- Go to the Figma website and log in to your account.
- Navigate to your account settings.
- Under the "Personal Access Tokens" section, click on "Create a new personal access token".
- Copy the generated token and use it in your
.envfile.
To publish the Uiverse package to npm, follow these steps:
- Build the package (this is optional because the publish command builds the project too): Run the following command to build the package.
npm run build-
Update the version: Use the
scripts/release.tsscript to update the version of the package. You can choose to increase the subversion, main version, core version, or set a custom version. -
Publish to npm: Run the following command to publish the package to npm.
npm publishMake sure you have the necessary permissions and are logged in to your npm account before publishing.