galaxis-uiverse

v0.1.20

Published

8 days ago

A UI component library

Downloads

577

0High
0Medium
0Low

krisztian_cc

ui components react

Uiverse

Uiverse is a UI component library designed to provide a set of reusable and customizable components for building modern web applications.

Uiverse

Installation

To install Uiverse, use npm or yarn:

npm install galaxis-uiverse
yarn add galaxis-uiverse

Configuration

You 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>
  );
}

Development Mode

To set up the project in development mode, follow these steps:

Create a public folder: Create a public folder in the root directory of your project.
Create an index.html: Inside the public folder, create an index.html file 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 src folder, create an index.tsx file 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.ts file to src/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:3000 to see your app in action.

Code Connect and Storybook

To create a new component and integrate it with Figma Code Connect and Storybook, follow these steps:

Create a component: In the src/uiverse/components folder, create a new component file, e.g., my-component.component.tsx and create a styled wrapper for your component.
Connect to Figma: Use the figma connect create https://www.figma.com/componentURL command to generate properties from Figma. Replace componentURL with 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 chromatic

Environment Configuration

To 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 .env file.

Publishing the Package

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.ts script 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 publish

Make sure you have the necessary permissions and are logged in to your npm account before publishing.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme