search

yorkie-team / yorkie-ui

Yorkie UI is a set of components and styles for Yorkie.
https://yorkie.dev/yorkie-ui
Apache License 2.0
6 stars 0 forks source link

Yorkie UI PoC #1

Closed hackerwins closed 1 month ago

hackerwins commented 10 months ago

Current Yorkie UI Overview

The current Yorkie UI, a collaborative effort between KAIST NIL and Hivelab, is good for existing pages but encounters challenges in component reusability. Key issues include difficulty expanding to new pages and outdated technology stack hindering maintenance.

Current Challenges:

  1. Difficulty in expanding to new pages and lack of component reusability. a. Lack of abstraction in CSS and Figma. b. Poor workflow from Figma to Yorkie UI.
  2. Outdated technology stack (e.g., Node 14) posing maintenance challenges

Goals for Yorkie UI 2nd Iteration

The primary goal of the 2nd iteration is to enhance Yorkie UI by addressing existing challenges and expanding functionality seamlessly to the Dashboard and Homepage.

Requirements for the Goal

A. Managing design tokens directly in Figma: SSOT(single source of truth)

We can consider managing design tokens directly in Figma to preserve design intent and structure and be able to extract them as data(JSON). For this, we need to research Figma plugins and features for managing and extracting Design Tokens in Figma.

B. Employ headless UI components and layout system

We need to be able to extract design tokens from Figma and get implementations of the layout system and components we will use. For this, a headless UI Framework is needed.

Candidate solution: Park UI

We need to research Park UI Design System for those requirements: https://park-ui.com/

Workflow

We need to investigate ParkUI to see if it can be used in the workflow below.

Step 1. Park UI(Arc) Components to Figma

Initializing Existing Components (Approximately 35) from Park UI to Figma. https://park-ui.com/docs/panda/overview/figma

Step 2. Preparing tokens directly in Figma and Extracting them to PandaCSS

After modifying tokens such as themes in Figma, we need to be able to extract them as style files(PandaCSS).

Step 3. Convert them into StoryBook

We need to be able to run StoryBook from style files extracted using the Headless UI framework.

References

vitran12 commented 10 months ago

hi @hackerwins

We have a problem with duplication Park UI Figma

We can't get a local variable on Figma Community and We won't know how they've configured the system because Figma duplication shows name variables (spacing & radii/10). When we can edit the file we can get permission to look at it.

Screenshot 2023-11-28 at 10 49 39

I think we need sync the design system Yoirke with Park UI so we are able to extract them into style files for Step 2.

hackerwins commented 1 month ago

For now, it seems more realistic to organize the existing SaaS-based UI rather than apply the new Yorkie UI to Homepage and Dashboard. I will close this issue for now.