Skip to content
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
The table of contents is too big for display.
Diff view
Diff view
  •  
  •  
  •  
17 changes: 11 additions & 6 deletions .cursor/rules/nx-rules.mdc
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
description:
globs:
description:
globs:
alwaysApply: true
---

Expand All @@ -11,12 +11,14 @@ You are in an nx workspace using Nx 21.2.2 and npm as the package manager.
You have access to the Nx MCP server and the tools it provides. Use them. Follow these guidelines in order to best help the user:

# General Guidelines

- When answering questions, use the nx_workspace tool first to gain an understanding of the workspace architecture
- For questions around nx configuration, best practices or if you're unsure, use the nx_docs tool to get relevant, up-to-date docs!! Always use this instead of assuming things about nx configuration
- If the user needs help with an Nx configuration or project graph error, use the 'nx_workspace' tool to get any errors
- To help answer questions about the workspace structure or simply help with demonstrating how tasks depend on each other, use the 'nx_visualize_graph' tool

# Generation Guidelines

If the user wants to generate something, use the following flow:

- learn about the nx workspace and any specifics the user needs by using the 'nx_workspace' tool and the 'nx_project_details' tool if applicable
Expand All @@ -31,17 +33,20 @@ If the user wants to generate something, use the following flow:
- use the information provided in the log file to answer the user's question or continue with what they were doing

# Running Tasks Guidelines

If the user wants help with tasks or commands (which include keywords like "test", "build", "lint", or other similar actions), use the following flow:

- Use the 'nx_current_running_tasks_details' tool to get the list of tasks (this can include tasks that were completed, stopped or failed).
- If there are any tasks, ask the user if they would like help with a specific task then use the 'nx_current_running_task_output' tool to get the terminal output for that task/command
- Use the terminal output from 'nx_current_running_task_output' to see what's wrong and help the user fix their problem. Use the appropriate tools if necessary
- If the user would like to rerun the task or command, always use `nx run <taskId>` to rerun in the terminal. This will ensure that the task will run in the nx context and will be run the same way it originally executed
- If the task was marked as "continuous" do not offer to rerun the task. This task is already running and the user can see the output in the terminal. You can use 'nx_current_running_task_output' to get the output of the task to verify the output.
- If the task was marked as "continuous" do not offer to rerun the task. This task is already running and the user can see the output in the terminal. You can use 'nx_current_running_task_output' to get the output of the task to verify the output.

# Commands

- Targets are defined in project.json of each lib or app, but these can also be inferred based on each project config
- To run a command, you can run `nx run [project][:target]`, here are few useful examples:
- test react `npx nx run @ledgerhq/ldls-ui-react:test $1`
- test react-native `npx nx run @ledgerhq/ldls-ui-rnative:test $1`
- test react `npx nx run @ledgerhq/lumen-ui-react:test $1`
- test react-native `npx nx run @ledgerhq/lumen-ui-rnative:test $1`
- lint all `npx nx run-many --target=lint --all`
- typecheck all `npx nx run-many --target=typecheck --all`
- typecheck all `npx nx run-many --target=typecheck --all`
8 changes: 4 additions & 4 deletions .github/ISSUE_TEMPLATE/bug_report.yml
Original file line number Diff line number Diff line change
Expand Up @@ -13,17 +13,17 @@ body:
attributes:
label: Which package(s) are affected?
options:
- label: "@ledgerhq/ldls-design-core (design tokens)"
- label: "@ledgerhq/ldls-ui-react (React UI kit)"
- label: "@ledgerhq/ldls-ui-rnative (React Native UI kit)"
- label: "@ledgerhq/lumen-design-core (design tokens)"
- label: "@ledgerhq/lumen-ui-react (React UI kit)"
- label: "@ledgerhq/lumen-ui-rnative (React Native UI kit)"
validations:
required: true

- type: input
id: package-version
attributes:
label: Package version(s)
placeholder: "e.g., @ledgerhq/ldls[email protected]"
placeholder: "e.g., @ledgerhq/lumen[email protected]"
validations:
required: true

Expand Down
2 changes: 1 addition & 1 deletion .github/workflows/chromatic.yml
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ jobs:
- name: Build ui-react library
env:
NX_NO_CLOUD: true
run: npx nx build @ledgerhq/ldls-ui-react --skip-nx-cache
run: npx nx build @ledgerhq/lumen-ui-react --skip-nx-cache

- name: Build Storybook
env:
Expand Down
16 changes: 8 additions & 8 deletions .github/workflows/sync-figma.yml
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ jobs:
run: npm ci --legacy-peer-deps

- name: Export Design Tokens from Figma
run: npx nx run @ledgerhq/ldls-design-core:figma-export
run: npx nx run @ledgerhq/lumen-design-core:figma-export
env:
FIGMA_API_TOKEN: ${{ secrets.FIGMA_API_TOKEN }}
FIGMA_FOUNDATIONS_FILE_KEY: ${{ github.event.inputs.figma_foundations_file_key || vars.FIGMA_FOUNDATIONS_FILE_KEY }}
Expand Down Expand Up @@ -65,7 +65,7 @@ jobs:
run: npm ci --legacy-peer-deps

- name: Download SVGs from Figma
run: npx nx run @ledgerhq/ldls-design-core:figma-download-svgs
run: npx nx run @ledgerhq/lumen-design-core:figma-download-svgs
env:
FIGMA_API_TOKEN: ${{ secrets.FIGMA_API_TOKEN }}
FIGMA_SYMBOLS_FILE_KEY: ${{ github.event.inputs.figma_symbols_file_key || vars.FIGMA_SYMBOLS_FILE_KEY }}
Expand Down Expand Up @@ -104,7 +104,7 @@ jobs:
path: libs/design-core/tokens/

- name: Run Design Tokens ETL
run: npx nx run @ledgerhq/ldls-design-core:design-tokens-etl
run: npx nx run @ledgerhq/lumen-design-core:design-tokens-etl

- name: Upload processed tokens artifacts
uses: actions/upload-artifact@v4
Expand Down Expand Up @@ -140,7 +140,7 @@ jobs:

- name: Generate React Symbol Components
run: |
npx nx run @ledgerhq/ldls-design-core:generate-symbols-react
npx nx run @ledgerhq/lumen-design-core:generate-symbols-react
npx nx run-many --targets=build-deps --all
npx nx run-many --target=lint --fix

Expand Down Expand Up @@ -178,7 +178,7 @@ jobs:

- name: Generate React Native Symbol Components
run: |
npx nx run @ledgerhq/ldls-design-core:generate-symbols-react-native
npx nx run @ledgerhq/lumen-design-core:generate-symbols-react-native
npx nx run-many --targets=build-deps --all
npx nx run-many --target=lint --fix

Expand Down Expand Up @@ -237,9 +237,9 @@ jobs:
TIMESTAMP=$(node -e "console.log(Date.now())")
cat << EOF > .nx/version-plans/version-plan-$TIMESTAMP.md
---
'@ledgerhq/ldls-design-core': patch
'@ledgerhq/ldls-ui-rnative': patch
'@ledgerhq/ldls-ui-react': patch
'@ledgerhq/lumen-design-core': patch
'@ledgerhq/lumen-ui-rnative': patch
'@ledgerhq/lumen-ui-react': patch
---

Sync Figma Design Tokens & Symbols
Expand Down
34 changes: 17 additions & 17 deletions CONTRIBUTING.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
# Contributing to LDLS Design System
# Contributing to Lumen Design System

<h3 align="center">Development and Contribution Guidelines</h3>

Expand All @@ -13,32 +13,32 @@

## Architecture

The LDLS Design System is structured as a monorepo using Nx, with the following key libraries:
The Lumen Design System is structured as a monorepo using Nx, with the following key libraries:

```sh
ldls
lumen
├──libs/
│ ├── ui-core/ # Shared utilities and types
│ │ # name: @ledgerhq/ldls-ui-core
│ │ # name: @ledgerhq/lumen-ui-core
│ │
│ ├── ui-react/ # React components
│ │ # name: @ledgerhq/ldls-ui-react
│ │ # name: @ledgerhq/lumen-ui-react
│ │
│ ├── ui-rnative/ # React Native components
│ │ # name: @ledgerhq/ldls-ui-rnative
│ │ # name: @ledgerhq/lumen-ui-rnative
│ │
│ ├── design-core/ # Design tokens and themes
│ │ # name: @ledgerhq/ldls-design-core
│ │ # name: @ledgerhq/lumen-design-core
│ │
│ └── utils-shared/ # Shared utilities
│ # name: @ledgerhq/ldls-utils-shared
│ # name: @ledgerhq/lumen-utils-shared
└──apps/
├── app-sandbox-rnative # Demo React-Native application
└── app-sandbox-react # Demo React application
```

- NXJS libraries are prefixed by `@ledgerhq/ldls-*` - defined in the project.json
- NXJS libraries are prefixed by `@ledgerhq/lumen-*` - defined in the project.json
- NPM package will match the name of the NXJS library, to make a library publishable a private:false needs to be set

### Technology Stack
Expand All @@ -52,8 +52,8 @@ ldls
1. Clone the repository:

```bash
git clone https://github.com/your-org/ldls.git
cd ldls
git clone https://github.com/your-org/lumen.git
cd lumen
```

2. Install dependencies:
Expand All @@ -66,7 +66,7 @@ npm install --legacy-peer-deps

```bash
# Start React Storybook
npx nx run @ledgerhq/ldls-ui-react:serve:storybook
npx nx run @ledgerhq/lumen-ui-react:serve:storybook

# Build all libraries
npx nx run-many --target=build --all
Expand All @@ -78,16 +78,16 @@ npx nx run-many --target=build --all

```bash
# Start React components in Storybook
npx nx run @ledgerhq/ldls-ui-react:serve:storybook
npx nx run @ledgerhq/lumen-ui-react:serve:storybook

# Build React components
npx nx run @ledgerhq/ldls-ui-react:build
npx nx run @ledgerhq/lumen-ui-react:build

# Build React Native components
npx nx run @ledgerhq/ldls-ui-rnative:build
npx nx run @ledgerhq/lumen-ui-rnative:build

# Build shared core library
npx nx run @ledgerhq/ldls-ui-core:build
npx nx run @ledgerhq/lumen-ui-core:build
```

### Branch Strategy
Expand Down Expand Up @@ -275,4 +275,4 @@ export const WithInteraction: Story = {

---

Thank you for contributing to LDLS! 🎉
Thank you for contributing to Lumen! 🎉
28 changes: 14 additions & 14 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,29 +9,29 @@

---

## 👩‍💻 Using LDLS in Your Project
## 👩‍💻 Using Lumen in Your Project

LDLS is a comprehensive design system that provides consistent UI components for both web and mobile applications.
Lumen is a comprehensive design system that provides consistent UI components for both web and mobile applications.

### Quick Start

1. Install the packages and their peer dependencies:

```bash
# Install the UI Kit and required peer dependencies
npm install @ledgerhq/ldls-ui-react @ledgerhq/ldls-design-core clsx tailwind-merge class-variance-authority
npm install @ledgerhq/lumen-ui-react @ledgerhq/lumen-design-core clsx tailwind-merge class-variance-authority
```

2. Configure Tailwind:

```typescript
import type { Config } from 'tailwindcss';
import { ledgerLivePreset } from '@ledgerhq/ldls-design-core';
import { ledgerLivePreset } from '@ledgerhq/lumen-design-core';

const config = {
content: [
'./src/**/*.{js,ts,jsx,tsx}', // Your project's files
'./node_modules/@ledgerhq/ldls-ui-react/dist/lib/**/*.{js,ts,jsx,tsx}', // Ledger UI Kit components
'./node_modules/@ledgerhq/lumen-ui-react/dist/lib/**/*.{js,ts,jsx,tsx}', // Ledger UI Kit components
],
presets: [ledgerLivePreset], // the installed tailwind preset
} satisfies Config;
Expand All @@ -49,7 +49,7 @@ npm install @radix-ui/react-slot
`@radix-ui/react-slot`: This dependency is used internally by the Button component to enable flexible composition patterns. It allows the Button to merge its props with child elements when needed.

```tsx
import { Button } from '@ledgerhq/ldls-ui-react';
import { Button } from '@ledgerhq/lumen-ui-react';

function App() {
return <Button appearance='accent'>Get Started</Button>;
Expand All @@ -58,37 +58,37 @@ function App() {

### Learn More

- [📖 Full User Guide](./USER_GUIDE.md) - Comprehensive guide for using LDLS
- [📖 Full User Guide](./USER_GUIDE.md) - Comprehensive guide for using Lumen
- [🎨 Design Guidelines](./USER_GUIDE.md#design-tokens) - Learn about our design tokens and principles
- [🧩 Component Library](https://ldls.vercel.app) - Explore available components
- [⚙️ Configuration Guide](./USER_GUIDE.md#configuration) - Advanced configuration options

### 🤖 AI Assistant Support

LDLS includes AI rules to help assistants (Cursor, Claude, VS Code Copilot, etc.) suggest correct usage patterns.
Lumen includes AI rules to help assistants (Cursor, Claude, VS Code Copilot, etc.) suggest correct usage patterns.

**For Cursor users**, add to your `.cursorrules`:

```
@node_modules/@ledgerhq/ldls-ui-react/ai-rules/RULES.md
@node_modules/@ledgerhq/lumen-ui-react/ai-rules/RULES.md
```

**For other AI tools**, see our [AI Rules README](./libs/ui-react/ai-rules/README.md).

The rules help with:

- ✅ Correct import paths and package usage
- ✅ LDLS design tokens instead of Tailwind defaults
- ✅ Lumen design tokens instead of Tailwind defaults
- ✅ Proper Tailwind configuration
- ✅ Figma-to-code token mapping

[View the rules →](./libs/ui-react/ai-rules/)

---

## 🛠 Contributing to LDLS
## 🛠 Contributing to Lumen

LDLS is built with Nx, supporting both React and React Native development. Here's how to get started with development:
Lumen is built with Nx, supporting both React and React Native development. Here's how to get started with development:

### Setup Development Environment

Expand All @@ -102,7 +102,7 @@ npm install --legacy-peer-deps

```bash
# Start React Storybook
npx nx run @ledgerhq/ldls-ui-react:serve:storybook
npx nx run @ledgerhq/lumen-ui-react:serve:storybook

# Build all libraries
npx nx run-many --target=build --all
Expand All @@ -111,7 +111,7 @@ npx nx run-many --target=build --all
### Project Structure

```
ldls/
lumen/
├── libs/
│ ├── ui-core/ # Shared utilities and types
│ ├── ui-react/ # React components
Expand Down
Loading
Loading