uniform-test2: A TypeScript repository from Saayaman

Uniform Component Starter Kit

The Component Starter kit gives you the key building blocks to create dynamic and compelling web experiences and demonstrate the power of digital experience composition in Uniform. Just install, customize and start creating.

Built with love by Uniform folks, standing on the shoulders of TailwindCSS, DaisyUI, React and Next.js.

Prerequisites

A Uniform account with the ability to create a new empty project. If you don't have a Uniform account, you can request a trial account here.

Setup own project and start locally

In your terminal, from the project root, run the following command and follow the instructions:
```
npm run cli
```

Open http://localhost:3000 with your browser to see the result. The project is connected to your Uniform project. Changes you make an publish on Uniform will reflect in this local project.

Manual Uniform Project Setup

Clone this repo onto your local machine
Create a new project at https://uniform.app. Give it a name and select "Empty Project".
Under your team's Security settings, create an API Key with full permissions to Canvas and Context.
Copy your API Key, Project ID, and Quick Connect Key. You will add these to your .env file (see below) and to the Uniform Chrome extension respectively. It is important to note that once you close the API Key window you're unable to copy the API or Quick Connect key values again. If you do close the API Key window before copying you will need to go through the API Key creation process again.
In your new project, navigate to "Settings -> Canvas Settings" and add http://localhost:3000/api/preview?secret=hello-world into the Preview URL and click "Save". This allows you to preview your project as you develop.

Setup your .env file (see .env.example for reference)

UNIFORM_API_KEY=
UNIFORM_PROJECT_ID=
UNIFORM_PREVIEW_SECRET=hello-world

npm install
Run npm run uniform:push and npm run uniform:publish to push the content from this starter kit (components, compositions and project map) into your project.
Run npm run dev to run in dev mode locally, or npm run build && npm start to run in prod mode locally.

Manual Theme Pack integration Setup

This integration brings Canvas UI extensions for theme management and new useful visual parameters to help control the look and feel of your components.

Open your Uniform project.
Head over to Settings > Canvas and configure preview to http://your-host/api/preview?secret=hello-world
Navigate to Manage Integrations tab and Install Theme Pack integration
Select on of the themes or create your own and press Save
Go to Components list, find the "Header" component - "Main Header" pattern and edit it.
In order to apply theme changes, press Publish (even if the pattern itself is not changed).

Optionally, you can change the main font that will be used along with the theme. Here you can also manage your header and footer content - logo and navigation links.

Important: in order to apply theme changes, you must re-publish the "Main Header" pattern after every time you change the theme on the integration settings page.

Additional examples

This package contains an additional set of examples based on the Component Starter Kit components: