Add desktop (Electron) and mobile (Expo) showcase apps
New workspace packages for demonstrating design system components: - Desktop: Electron + Vite app with brand/theme switching - Mobile: Expo React Native app with brand switching Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
michael
18
packages/showcase/desktop/electron-builder.yml
Normal file
18
packages/showcase/desktop/electron-builder.yml
Normal file
@@ -0,0 +1,18 @@
|
||||
appId: com.dangerousthings.showcase-desktop
|
||||
productName: DT Design System Showcase
|
||||
directories:
|
||||
output: release
|
||||
buildResources: resources
|
||||
npmRebuild: false
|
||||
artifactName: "dt-showcase-desktop-${version}-${arch}.${ext}"
|
||||
files:
|
||||
- dist/**/*
|
||||
- package.json
|
||||
- "!node_modules"
|
||||
mac:
|
||||
target: [dmg, zip]
|
||||
win:
|
||||
target: [nsis, portable]
|
||||
linux:
|
||||
target: [AppImage, deb]
|
||||
category: Development
|
||||
38
packages/showcase/desktop/package.json
Normal file
38
packages/showcase/desktop/package.json
Normal file
@@ -0,0 +1,38 @@
|
||||
{
|
||||
"name": "@dangerousthings/showcase-desktop",
|
||||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"description": "Desktop showcase for the Dangerous Things design system",
|
||||
"author": {
|
||||
"name": "Dangerous Things",
|
||||
"email": "info@dangerousthings.com"
|
||||
},
|
||||
"homepage": "https://github.com/dangerous-tac0s/dt-design-system",
|
||||
"main": "dist/main/main.js",
|
||||
"scripts": {
|
||||
"dev": "vite --config vite.config.ts",
|
||||
"dev:electron": "npm run build:main && concurrently \"vite --config vite.config.ts\" \"wait-on http://localhost:5173 && electron .\"",
|
||||
"build": "tsc -p tsconfig.main.json && vite build --config vite.config.ts",
|
||||
"build:main": "tsc -p tsconfig.main.json",
|
||||
"start": "electron .",
|
||||
"package": "npm run build && electron-builder",
|
||||
"package:dir": "npm run build && electron-builder --dir",
|
||||
"package:win": "npm run build && electron-builder --win",
|
||||
"package:mac": "npm run build && electron-builder --mac",
|
||||
"package:linux": "npm run build && electron-builder --linux",
|
||||
"typecheck": "tsc --noEmit -p tsconfig.json && tsc --noEmit -p tsconfig.main.json",
|
||||
"clean": "rm -rf dist release"
|
||||
},
|
||||
"dependencies": {
|
||||
"@dangerousthings/tokens": "*",
|
||||
"@dangerousthings/web": "*"
|
||||
},
|
||||
"devDependencies": {
|
||||
"concurrently": "^9.0.0",
|
||||
"electron": "33.4.11",
|
||||
"electron-builder": "^25.0.0",
|
||||
"typescript": "^5.8.3",
|
||||
"vite": "^6.0.0",
|
||||
"wait-on": "^8.0.0"
|
||||
}
|
||||
}
|
||||
30
packages/showcase/desktop/src/main/main.ts
Normal file
30
packages/showcase/desktop/src/main/main.ts
Normal file
@@ -0,0 +1,30 @@
|
||||
import { app, BrowserWindow } from 'electron';
|
||||
import path from 'path';
|
||||
|
||||
function createWindow() {
|
||||
const win = new BrowserWindow({
|
||||
width: 1200,
|
||||
height: 800,
|
||||
backgroundColor: '#000000',
|
||||
titleBarStyle: 'hiddenInset',
|
||||
webPreferences: {
|
||||
preload: path.join(__dirname, 'preload.js'),
|
||||
},
|
||||
});
|
||||
|
||||
if (process.env.VITE_DEV_SERVER_URL) {
|
||||
win.loadURL(process.env.VITE_DEV_SERVER_URL);
|
||||
} else {
|
||||
win.loadFile(path.join(__dirname, '../renderer/index.html'));
|
||||
}
|
||||
}
|
||||
|
||||
app.whenReady().then(createWindow);
|
||||
|
||||
app.on('window-all-closed', () => {
|
||||
if (process.platform !== 'darwin') app.quit();
|
||||
});
|
||||
|
||||
app.on('activate', () => {
|
||||
if (BrowserWindow.getAllWindows().length === 0) createWindow();
|
||||
});
|
||||
1
packages/showcase/desktop/src/main/preload.ts
Normal file
1
packages/showcase/desktop/src/main/preload.ts
Normal file
@@ -0,0 +1 @@
|
||||
// Minimal preload — no IPC needed for the showcase
|
||||
77
packages/showcase/desktop/src/renderer/brand-switcher.ts
Normal file
77
packages/showcase/desktop/src/renderer/brand-switcher.ts
Normal file
@@ -0,0 +1,77 @@
|
||||
import { themes } from '@dangerousthings/tokens';
|
||||
import type { ThemeBrand, ThemeMode } from '@dangerousthings/tokens';
|
||||
|
||||
let currentBrand: ThemeBrand = 'dt';
|
||||
let currentMode: ThemeMode = 'dark';
|
||||
|
||||
export function initBrandSwitcher(container: HTMLElement) {
|
||||
// Brand buttons
|
||||
for (const theme of themes) {
|
||||
const btn = document.createElement('button');
|
||||
btn.textContent = theme.name;
|
||||
btn.className = 'brand-btn';
|
||||
btn.dataset.brand = theme.id;
|
||||
if (theme.id === currentBrand) btn.classList.add('active');
|
||||
btn.addEventListener('click', () => switchBrand(theme.id));
|
||||
container.appendChild(btn);
|
||||
}
|
||||
|
||||
// Mode switcher
|
||||
const modeContainer = document.createElement('div');
|
||||
modeContainer.className = 'mode-switcher';
|
||||
|
||||
const modes: ThemeMode[] = ['dark', 'light', 'auto'];
|
||||
for (const mode of modes) {
|
||||
const btn = document.createElement('button');
|
||||
btn.textContent = mode;
|
||||
btn.className = 'mode-btn';
|
||||
btn.dataset.mode = mode;
|
||||
if (mode === currentMode) btn.classList.add('active');
|
||||
btn.addEventListener('click', () => switchMode(mode));
|
||||
modeContainer.appendChild(btn);
|
||||
}
|
||||
|
||||
container.appendChild(modeContainer);
|
||||
|
||||
// Set initial state
|
||||
applyTheme();
|
||||
}
|
||||
|
||||
function switchBrand(id: ThemeBrand) {
|
||||
currentBrand = id;
|
||||
applyTheme();
|
||||
updateBrandButtons();
|
||||
}
|
||||
|
||||
function switchMode(mode: ThemeMode) {
|
||||
currentMode = mode;
|
||||
applyTheme();
|
||||
updateModeButtons();
|
||||
}
|
||||
|
||||
function applyTheme() {
|
||||
document.documentElement.setAttribute('data-brand', currentBrand);
|
||||
document.documentElement.setAttribute('data-theme', currentMode);
|
||||
}
|
||||
|
||||
function updateBrandButtons() {
|
||||
document.querySelectorAll('.brand-btn').forEach((btn) => {
|
||||
const el = btn as HTMLButtonElement;
|
||||
el.classList.toggle('active', el.dataset.brand === currentBrand);
|
||||
});
|
||||
}
|
||||
|
||||
function updateModeButtons() {
|
||||
document.querySelectorAll('.mode-btn').forEach((btn) => {
|
||||
const el = btn as HTMLButtonElement;
|
||||
el.classList.toggle('active', el.dataset.mode === currentMode);
|
||||
});
|
||||
}
|
||||
|
||||
export function getCurrentBrand(): ThemeBrand {
|
||||
return currentBrand;
|
||||
}
|
||||
|
||||
export function getCurrentMode(): ThemeMode {
|
||||
return currentMode;
|
||||
}
|
||||
15
packages/showcase/desktop/src/renderer/index.html
Normal file
15
packages/showcase/desktop/src/renderer/index.html
Normal file
@@ -0,0 +1,15 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" data-brand="dt" data-theme="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>DT Design System — Desktop Showcase</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<nav id="sidebar"></nav>
|
||||
<main id="content"></main>
|
||||
</div>
|
||||
<script type="module" src="./main.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
56
packages/showcase/desktop/src/renderer/main.ts
Normal file
56
packages/showcase/desktop/src/renderer/main.ts
Normal file
@@ -0,0 +1,56 @@
|
||||
import '@dangerousthings/web/index.css';
|
||||
import './style.css';
|
||||
|
||||
import { initRouter } from './utils/router';
|
||||
import { initBrandSwitcher } from './brand-switcher';
|
||||
import { renderHomePage } from './pages/home';
|
||||
import { renderBevelsPage } from './pages/bevels';
|
||||
import { renderGlowsPage } from './pages/glows';
|
||||
import { renderFormsPage } from './pages/forms';
|
||||
import { renderTokensPage } from './pages/tokens';
|
||||
|
||||
const routes: Record<string, (container: HTMLElement) => void> = {
|
||||
'': renderHomePage,
|
||||
'bevels': renderBevelsPage,
|
||||
'glows': renderGlowsPage,
|
||||
'forms': renderFormsPage,
|
||||
'tokens': renderTokensPage,
|
||||
};
|
||||
|
||||
const sidebar = document.getElementById('sidebar')!;
|
||||
const content = document.getElementById('content')!;
|
||||
|
||||
// Build sidebar navigation
|
||||
const navTitle = document.createElement('div');
|
||||
navTitle.className = 'nav-title';
|
||||
navTitle.textContent = 'DT DESIGN SYSTEM';
|
||||
sidebar.appendChild(navTitle);
|
||||
|
||||
const brandContainer = document.createElement('div');
|
||||
brandContainer.className = 'brand-switcher-container';
|
||||
sidebar.appendChild(brandContainer);
|
||||
initBrandSwitcher(brandContainer);
|
||||
|
||||
const navLinks = document.createElement('div');
|
||||
navLinks.className = 'nav-links';
|
||||
|
||||
const pages = [
|
||||
{ hash: '', label: 'Home' },
|
||||
{ hash: 'bevels', label: 'Bevels' },
|
||||
{ hash: 'glows', label: 'Glows' },
|
||||
{ hash: 'forms', label: 'Forms' },
|
||||
{ hash: 'tokens', label: 'Tokens' },
|
||||
];
|
||||
|
||||
for (const page of pages) {
|
||||
const link = document.createElement('a');
|
||||
link.href = `#/${page.hash}`;
|
||||
link.textContent = page.label;
|
||||
link.className = 'nav-link';
|
||||
navLinks.appendChild(link);
|
||||
}
|
||||
|
||||
sidebar.appendChild(navLinks);
|
||||
|
||||
// Initialize router
|
||||
initRouter(routes, content);
|
||||
126
packages/showcase/desktop/src/renderer/pages/bevels.ts
Normal file
126
packages/showcase/desktop/src/renderer/pages/bevels.ts
Normal file
@@ -0,0 +1,126 @@
|
||||
import { el, section, row, label, codeLabel } from '../utils/dom';
|
||||
|
||||
export function renderBevelsPage(container: HTMLElement) {
|
||||
container.appendChild(el('h1', { className: 'page-title' }, 'Bevels'));
|
||||
container.appendChild(el('p', { className: 'page-subtitle' }, 'Angular clip-path patterns from the DT design system. Active on the DT brand.'));
|
||||
|
||||
// Card Bevels
|
||||
const card1 = el('div', { className: 'card', style: 'padding: var(--space-6);' });
|
||||
card1.appendChild(el('div', { className: 'card-title' }, 'CARD TITLE'));
|
||||
card1.appendChild(el('div', { className: 'card-body' }, 'Dual bottom bevels — bottom-right (bevel-md) and bottom-left (bevel-sm). Uses the dual-element technique with ::before pseudo-element.'));
|
||||
const card2 = el('div', { className: 'card', style: 'padding: var(--space-6);' });
|
||||
card2.appendChild(el('div', { className: 'card-body' }, 'Card without title — no header bar, just the beveled container.'));
|
||||
|
||||
container.appendChild(
|
||||
section('Card Bevels', 'Dual bottom bevels using clip-path. Outer bg = border color, ::before = surface fill.',
|
||||
card1,
|
||||
codeLabel('.card or .dt-bevel-card'),
|
||||
card2,
|
||||
codeLabel('.card (no .card-title child)'),
|
||||
),
|
||||
);
|
||||
|
||||
// Button Bevels
|
||||
container.appendChild(
|
||||
section('Button Bevels', 'Top-right corner cut. Filled buttons use direct clip-path, outline uses dual-element.',
|
||||
row(
|
||||
el('button', { className: 'btn-primary' }, 'PRIMARY'),
|
||||
el('button', { className: 'btn-secondary' }, 'SECONDARY'),
|
||||
el('button', { className: 'btn-danger' }, 'DANGER'),
|
||||
),
|
||||
codeLabel('.btn-primary | .btn-secondary | .btn-danger'),
|
||||
),
|
||||
);
|
||||
|
||||
// Badge Bevels
|
||||
container.appendChild(
|
||||
section('Badge Bevels', 'Top-right bevel with dual-element technique. Color variants via CSS custom properties.',
|
||||
row(
|
||||
el('span', { className: 'badge' }, 'Default'),
|
||||
el('span', { className: 'badge badge-success' }, 'Success'),
|
||||
el('span', { className: 'badge badge-error' }, 'Error'),
|
||||
el('span', { className: 'badge badge-warning' }, 'Warning'),
|
||||
el('span', { className: 'badge badge-info' }, 'Info'),
|
||||
),
|
||||
codeLabel('.badge | .badge-success | .badge-error | .badge-warning | .badge-info'),
|
||||
),
|
||||
);
|
||||
|
||||
// Media Frame
|
||||
const mediaFrame = el('div', {
|
||||
className: 'dt-bevel-media',
|
||||
style: 'background: var(--color-primary); width: 100%; aspect-ratio: 16/9; display: flex; align-items: center; justify-content: center;',
|
||||
});
|
||||
mediaFrame.appendChild(el('span', { style: 'color: var(--color-bg); font-weight: 700;' }, 'MEDIA FRAME'));
|
||||
|
||||
container.appendChild(
|
||||
section('Media Frame Bevels', 'Diagonal opposite corners (top-left + bottom-right).',
|
||||
mediaFrame,
|
||||
codeLabel('.dt-bevel-media'),
|
||||
),
|
||||
);
|
||||
|
||||
// Modal Bevel
|
||||
const modalDemo = el('div', {
|
||||
className: 'dt-bevel-modal',
|
||||
style: 'background: var(--color-primary); padding: var(--space-8); text-align: center;',
|
||||
});
|
||||
const modalInner = el('div', { style: 'background: var(--color-surface); padding: var(--space-6);' });
|
||||
modalInner.appendChild(el('div', { style: 'font-weight: 700; text-transform: uppercase;' }, 'Modal Content'));
|
||||
modalInner.appendChild(el('div', { style: 'color: var(--color-text-muted); margin-top: var(--space-2);' }, 'Large dual bottom bevels'));
|
||||
modalDemo.appendChild(modalInner);
|
||||
|
||||
container.appendChild(
|
||||
section('Modal Bevels', 'Dual bottom bevels at bevel-lg scale.',
|
||||
modalDemo,
|
||||
codeLabel('.dt-bevel-modal'),
|
||||
),
|
||||
);
|
||||
|
||||
// Drawer Bevels
|
||||
const drawerRight = el('div', {
|
||||
className: 'dt-bevel-drawer-right',
|
||||
style: 'background: var(--color-primary); padding: var(--space-6); width: 200px; height: 120px; display: flex; align-items: center; justify-content: center;',
|
||||
});
|
||||
drawerRight.appendChild(el('span', { style: 'color: var(--color-bg); font-weight: 700;' }, 'RIGHT'));
|
||||
const drawerLeft = el('div', {
|
||||
className: 'dt-bevel-drawer-left',
|
||||
style: 'background: var(--color-primary); padding: var(--space-6); width: 200px; height: 120px; display: flex; align-items: center; justify-content: center;',
|
||||
});
|
||||
drawerLeft.appendChild(el('span', { style: 'color: var(--color-bg); font-weight: 700;' }, 'LEFT'));
|
||||
|
||||
container.appendChild(
|
||||
section('Drawer Bevels', 'Exposed-edge bevels for sliding panels.',
|
||||
row(drawerRight, drawerLeft),
|
||||
codeLabel('.dt-bevel-drawer-right | .dt-bevel-drawer-left'),
|
||||
),
|
||||
);
|
||||
|
||||
// Small Bevel Utility
|
||||
const smallBevel = el('div', {
|
||||
className: 'dt-bevel-sm',
|
||||
style: 'background: var(--color-primary); width: 60px; height: 60px; display: flex; align-items: center; justify-content: center;',
|
||||
});
|
||||
smallBevel.appendChild(el('span', { style: 'color: var(--color-bg); font-weight: 700; font-size: 0.75rem;' }, 'SM'));
|
||||
|
||||
container.appendChild(
|
||||
section('Small Bevel Utility', 'For compact elements — arrows, stepper buttons.',
|
||||
row(smallBevel),
|
||||
codeLabel('.dt-bevel-sm'),
|
||||
),
|
||||
);
|
||||
|
||||
// Accent Top
|
||||
const accentDemo = el('div', {
|
||||
className: 'dt-accent-top',
|
||||
style: 'padding: var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border);',
|
||||
});
|
||||
accentDemo.appendChild(el('span', { style: 'font-weight: 600; text-transform: uppercase;' }, 'Thick Top Border Accent'));
|
||||
|
||||
container.appendChild(
|
||||
section('Accent Top', 'Used on accordion headers and menu items.',
|
||||
accentDemo,
|
||||
codeLabel('.dt-accent-top'),
|
||||
),
|
||||
);
|
||||
}
|
||||
199
packages/showcase/desktop/src/renderer/pages/forms.ts
Normal file
199
packages/showcase/desktop/src/renderer/pages/forms.ts
Normal file
@@ -0,0 +1,199 @@
|
||||
import { el, section, row, label, codeLabel } from '../utils/dom';
|
||||
|
||||
export function renderFormsPage(container: HTMLElement) {
|
||||
container.appendChild(el('h1', { className: 'page-title' }, 'Forms'));
|
||||
container.appendChild(el('p', { className: 'page-subtitle' }, 'DT-branded form components. Angular styling with focus effects.'));
|
||||
|
||||
// Text Inputs
|
||||
const normalInput = el('input', { type: 'text', placeholder: 'Normal input — click to focus', style: 'max-width: 400px;' }) as HTMLInputElement;
|
||||
const errorInput = el('input', { type: 'text', className: 'error', placeholder: 'Error state input', style: 'max-width: 400px;' }) as HTMLInputElement;
|
||||
const textarea = el('textarea', { placeholder: 'Textarea element', style: 'max-width: 400px; min-height: 80px;' }) as HTMLTextAreaElement;
|
||||
|
||||
container.appendChild(
|
||||
section('Text Input', 'Sharp corners + focus glow bar. 2px solid border, no border-radius.',
|
||||
normalInput,
|
||||
codeLabel('input[type="text"] — focus glow bar on [data-brand="dt"]'),
|
||||
el('br'),
|
||||
errorInput,
|
||||
codeLabel('input.error — red focus bar on [data-brand="dt"]'),
|
||||
el('br'),
|
||||
textarea,
|
||||
codeLabel('textarea — same styling'),
|
||||
),
|
||||
);
|
||||
|
||||
// Checkboxes
|
||||
function checkbox(labelText: string, checked: boolean, disabled = false): HTMLElement {
|
||||
const wrapper = el('label', { style: 'display: flex; align-items: center; gap: 12px; cursor: pointer; padding: 4px 0;' });
|
||||
const input = document.createElement('input');
|
||||
input.type = 'checkbox';
|
||||
if (checked) input.checked = true;
|
||||
if (disabled) input.disabled = true;
|
||||
wrapper.appendChild(input);
|
||||
wrapper.appendChild(el('span', {}, labelText));
|
||||
return wrapper;
|
||||
}
|
||||
|
||||
container.appendChild(
|
||||
section('Checkbox', 'Beveled hexagon shape via clip-path. 30% corner cuts.',
|
||||
checkbox('Unchecked checkbox', false),
|
||||
checkbox('Checked checkbox', true),
|
||||
checkbox('Disabled checked', true, true),
|
||||
checkbox('Disabled unchecked', false, true),
|
||||
codeLabel('input[type="checkbox"] — hex bevel on [data-brand="dt"]'),
|
||||
),
|
||||
);
|
||||
|
||||
// Switch / Toggle
|
||||
function switchEl(labelText: string, checked: boolean, disabled = false): HTMLElement {
|
||||
const wrapper = el('div', { style: 'display: flex; align-items: center; gap: 12px; margin-bottom: 8px;' });
|
||||
const sw = el('label', { className: 'dt-switch' });
|
||||
const input = document.createElement('input');
|
||||
input.type = 'checkbox';
|
||||
if (checked) input.checked = true;
|
||||
if (disabled) input.disabled = true;
|
||||
sw.appendChild(input);
|
||||
sw.appendChild(el('div', { className: 'dt-switch-track' }));
|
||||
sw.appendChild(el('div', { className: 'dt-switch-thumb' }));
|
||||
wrapper.appendChild(sw);
|
||||
wrapper.appendChild(el('span', {}, labelText));
|
||||
return wrapper;
|
||||
}
|
||||
|
||||
container.appendChild(
|
||||
section('Switch / Toggle', 'Angular track + sliding square thumb. 48x26 track, 20x20 thumb.',
|
||||
switchEl('Off', false),
|
||||
switchEl('On', true),
|
||||
switchEl('Disabled (on)', true, true),
|
||||
switchEl('Disabled (off)', false, true),
|
||||
codeLabel('.dt-switch > input + .dt-switch-track + .dt-switch-thumb'),
|
||||
),
|
||||
);
|
||||
|
||||
// Radio Buttons
|
||||
function radioGroup(name: string, options: { value: string; label: string; checked?: boolean; disabled?: boolean }[]): HTMLElement {
|
||||
const group = el('div', { style: 'display: flex; flex-direction: column; gap: 4px;' });
|
||||
for (const opt of options) {
|
||||
const wrapper = el('label', { className: `dt-radio-option${opt.checked ? ' selected' : ''}`, style: 'cursor: pointer;' });
|
||||
const input = document.createElement('input');
|
||||
input.type = 'radio';
|
||||
input.name = name;
|
||||
input.value = opt.value;
|
||||
if (opt.checked) input.checked = true;
|
||||
if (opt.disabled) input.disabled = true;
|
||||
|
||||
input.addEventListener('change', () => {
|
||||
group.querySelectorAll('.dt-radio-option').forEach((o) => o.classList.remove('selected'));
|
||||
if (input.checked) wrapper.classList.add('selected');
|
||||
});
|
||||
|
||||
wrapper.appendChild(input);
|
||||
wrapper.appendChild(el('span', {}, opt.label));
|
||||
group.appendChild(wrapper);
|
||||
}
|
||||
return group;
|
||||
}
|
||||
|
||||
container.appendChild(
|
||||
section('Radio Button', 'Hexagonal indicator via clip-path. Flat-top hexagon shape.',
|
||||
radioGroup('demo-radio', [
|
||||
{ value: 'nfc', label: 'NFC (Near Field Communication)', checked: true },
|
||||
{ value: 'rfid', label: 'RFID (Radio Frequency ID)' },
|
||||
{ value: 'ble', label: 'BLE (Bluetooth Low Energy)' },
|
||||
]),
|
||||
codeLabel('input[type="radio"] — hex indicator on [data-brand="dt"]'),
|
||||
),
|
||||
);
|
||||
|
||||
// Progress Bar
|
||||
function progressBar(value: number, showLabel = false): HTMLElement {
|
||||
const wrapper = el('div');
|
||||
const bar = el('div', { className: 'dt-progress' });
|
||||
const fill = el('div', { className: 'dt-progress-fill', style: `width: ${value * 100}%;` });
|
||||
bar.appendChild(fill);
|
||||
wrapper.appendChild(bar);
|
||||
if (showLabel) {
|
||||
wrapper.appendChild(el('div', { className: 'dt-progress-label' }, `${Math.round(value * 100)}%`));
|
||||
}
|
||||
return wrapper;
|
||||
}
|
||||
|
||||
container.appendChild(
|
||||
section('Progress Bar', 'Angular, no border-radius. 4px default height.',
|
||||
label('25%'),
|
||||
progressBar(0.25),
|
||||
label('50% WITH LABEL'),
|
||||
progressBar(0.5, true),
|
||||
label('75%'),
|
||||
progressBar(0.75),
|
||||
label('100%'),
|
||||
progressBar(1.0, true),
|
||||
codeLabel('.dt-progress > .dt-progress-fill'),
|
||||
),
|
||||
);
|
||||
|
||||
// Accordion
|
||||
function accordion(items: { title: string; content: string }[]): HTMLElement {
|
||||
const acc = el('div', { className: 'dt-accordion' });
|
||||
for (const item of items) {
|
||||
const header = el('button', { className: 'dt-accordion-header', 'aria-expanded': 'false' });
|
||||
header.appendChild(document.createTextNode(item.title));
|
||||
header.appendChild(el('span', { className: 'dt-accordion-chevron' }));
|
||||
|
||||
const content = el('div', { className: 'dt-accordion-content', 'data-open': 'false' });
|
||||
content.appendChild(el('div', { style: 'padding: var(--space-4);' }, item.content));
|
||||
|
||||
header.addEventListener('click', () => {
|
||||
const expanded = header.getAttribute('aria-expanded') === 'true';
|
||||
header.setAttribute('aria-expanded', String(!expanded));
|
||||
content.setAttribute('data-open', String(!expanded));
|
||||
});
|
||||
|
||||
acc.appendChild(header);
|
||||
acc.appendChild(content);
|
||||
}
|
||||
return acc;
|
||||
}
|
||||
|
||||
container.appendChild(
|
||||
section('Accordion', 'Click headers to expand. 5px top border, chevron rotation.',
|
||||
accordion([
|
||||
{ title: 'Size', content: 'Small, Medium, Large options available.' },
|
||||
{ title: 'Chip Type', content: 'NTAG, DESFire, MIFARE Classic.' },
|
||||
{ title: 'Frequency', content: '13.56 MHz (HF), 125 kHz (LF).' },
|
||||
]),
|
||||
codeLabel('.dt-accordion > .dt-accordion-header + .dt-accordion-content'),
|
||||
),
|
||||
);
|
||||
|
||||
// Quantity Stepper
|
||||
function stepper(initialValue: number, min: number, max: number): HTMLElement {
|
||||
let value = initialValue;
|
||||
const wrapper = el('div', { className: 'dt-stepper' });
|
||||
const minusBtn = el('button', { className: 'dt-stepper-btn' }, '\u2212') as HTMLButtonElement;
|
||||
const valueEl = el('span', { className: 'dt-stepper-value' }, String(value));
|
||||
const plusBtn = el('button', { className: 'dt-stepper-btn' }, '+') as HTMLButtonElement;
|
||||
|
||||
function update() {
|
||||
valueEl.textContent = String(value);
|
||||
minusBtn.disabled = value <= min;
|
||||
plusBtn.disabled = value >= max;
|
||||
}
|
||||
|
||||
minusBtn.addEventListener('click', () => { value = Math.max(min, value - 1); update(); });
|
||||
plusBtn.addEventListener('click', () => { value = Math.min(max, value + 1); update(); });
|
||||
|
||||
wrapper.appendChild(minusBtn);
|
||||
wrapper.appendChild(valueEl);
|
||||
wrapper.appendChild(plusBtn);
|
||||
update();
|
||||
return wrapper;
|
||||
}
|
||||
|
||||
container.appendChild(
|
||||
section('Quantity Stepper', 'Beveled +/- buttons with center display.',
|
||||
stepper(1, 0, 10),
|
||||
codeLabel('.dt-stepper > .dt-stepper-btn + .dt-stepper-value + .dt-stepper-btn'),
|
||||
),
|
||||
);
|
||||
}
|
||||
97
packages/showcase/desktop/src/renderer/pages/glows.ts
Normal file
97
packages/showcase/desktop/src/renderer/pages/glows.ts
Normal file
@@ -0,0 +1,97 @@
|
||||
import { el, section, row, codeLabel } from '../utils/dom';
|
||||
|
||||
export function renderGlowsPage(container: HTMLElement) {
|
||||
container.appendChild(el('h1', { className: 'page-title' }, 'Glows'));
|
||||
container.appendChild(el('p', { className: 'page-subtitle' }, 'Neon drop-shadow and text-shadow effects. Active on the DT brand.'));
|
||||
|
||||
// Button Glows
|
||||
container.appendChild(
|
||||
section('Button Glows', 'filter: drop-shadow() follows clip-path shape. Hover for enhanced glow.',
|
||||
row(
|
||||
el('button', { className: 'btn-primary' }, 'PRIMARY GLOW'),
|
||||
el('button', { className: 'btn-danger' }, 'DANGER GLOW'),
|
||||
),
|
||||
codeLabel('.btn-primary / .btn-danger — automatic on [data-brand="dt"]'),
|
||||
el('br'),
|
||||
row(
|
||||
el('button', { className: 'btn-secondary' }, 'SECONDARY (HOVER)'),
|
||||
),
|
||||
codeLabel('.btn-secondary — glow on hover'),
|
||||
),
|
||||
);
|
||||
|
||||
// Link Glow
|
||||
const link = el('a', { href: '#', style: 'color: var(--color-primary); font-weight: 600; font-size: 1.125rem;' }, 'Hover this link for text glow');
|
||||
|
||||
container.appendChild(
|
||||
section('Link Glow', 'text-shadow on hover for anchor elements.',
|
||||
row(link),
|
||||
codeLabel('a:hover — automatic on [data-brand="dt"]'),
|
||||
),
|
||||
);
|
||||
|
||||
// Terminal Inset
|
||||
const terminal = el('div', { className: 'terminal dt-accent-top' });
|
||||
terminal.appendChild(el('code', {}, '$ dt-web-theme --install\n> Installing design tokens...\n> Applying cyberpunk aesthetic...\n> Done. Welcome to the future.'));
|
||||
|
||||
container.appendChild(
|
||||
section('Terminal Inset Glow', 'Inset + outer box-shadow. No clip-path so box-shadow works directly.',
|
||||
terminal,
|
||||
codeLabel('.terminal — automatic on [data-brand="dt"]'),
|
||||
),
|
||||
);
|
||||
|
||||
// Card Hover Glow
|
||||
const card = el('div', { className: 'card', style: 'padding: var(--space-6); cursor: pointer;' });
|
||||
card.appendChild(el('div', { className: 'card-title' }, 'HOVER ME'));
|
||||
card.appendChild(el('div', { className: 'card-body' }, 'Cards get a drop-shadow glow on hover.'));
|
||||
|
||||
container.appendChild(
|
||||
section('Card Hover Glow', 'filter: drop-shadow() respects the beveled clip-path.',
|
||||
card,
|
||||
codeLabel('.card:hover — automatic on [data-brand="dt"]'),
|
||||
),
|
||||
);
|
||||
|
||||
// Input Focus Glow
|
||||
const input = el('input', {
|
||||
type: 'text',
|
||||
className: 'input',
|
||||
placeholder: 'Click to focus — see the glow bar',
|
||||
style: 'max-width: 400px;',
|
||||
}) as HTMLInputElement;
|
||||
|
||||
container.appendChild(
|
||||
section('Input Focus Glow', 'box-shadow: 0 4px 0 1px — bright bar beneath the input.',
|
||||
input,
|
||||
codeLabel('.input:focus — automatic on [data-brand="dt"]'),
|
||||
),
|
||||
);
|
||||
|
||||
// Generic Glow Utilities
|
||||
const glowBox = el('div', {
|
||||
className: 'dt-glow',
|
||||
style: 'background: var(--color-primary); padding: var(--space-4) var(--space-6); display: inline-block; font-weight: 700; color: var(--color-bg);',
|
||||
}, '.dt-glow');
|
||||
const glowStrong = el('div', {
|
||||
className: 'dt-glow-strong',
|
||||
style: 'background: var(--color-primary); padding: var(--space-4) var(--space-6); display: inline-block; font-weight: 700; color: var(--color-bg);',
|
||||
}, '.dt-glow-strong');
|
||||
const glowInset = el('div', {
|
||||
className: 'dt-glow-inset',
|
||||
style: 'padding: var(--space-4) var(--space-6); display: inline-block; font-weight: 700; border: 1px solid var(--color-border);',
|
||||
}, '.dt-glow-inset');
|
||||
const textGlow = el('div', {
|
||||
className: 'dt-text-glow',
|
||||
style: 'font-size: 1.25rem; font-weight: 700; color: var(--color-primary); display: inline-block;',
|
||||
}, '.dt-text-glow');
|
||||
|
||||
container.appendChild(
|
||||
section('Glow Utilities', 'Generic utility classes for applying glow effects to any element.',
|
||||
row(glowBox, glowStrong),
|
||||
codeLabel('.dt-glow | .dt-glow-strong'),
|
||||
row(glowInset, textGlow),
|
||||
codeLabel('.dt-glow-inset | .dt-text-glow'),
|
||||
),
|
||||
);
|
||||
}
|
||||
33
packages/showcase/desktop/src/renderer/pages/home.ts
Normal file
33
packages/showcase/desktop/src/renderer/pages/home.ts
Normal file
@@ -0,0 +1,33 @@
|
||||
import { el, section } from '../utils/dom';
|
||||
|
||||
export function renderHomePage(container: HTMLElement) {
|
||||
container.appendChild(el('h1', { className: 'page-title' }, 'DT Design System'));
|
||||
container.appendChild(el('p', { className: 'page-subtitle' }, 'Web CSS component showcase — switch brands and modes in the sidebar.'));
|
||||
|
||||
const categories = [
|
||||
{ hash: 'bevels', title: 'Bevels', desc: 'Angular clip-path patterns — cards, buttons, badges, media frames, modals, drawers' },
|
||||
{ hash: 'glows', title: 'Glows', desc: 'Neon drop-shadow and text-shadow effects for the DT brand' },
|
||||
{ hash: 'forms', title: 'Forms', desc: 'Text inputs, checkboxes, switches, radios, progress bars, accordions, steppers' },
|
||||
{ hash: 'tokens', title: 'Tokens', desc: 'Color palette, typography, spacing, and shape values for the active brand' },
|
||||
];
|
||||
|
||||
for (const cat of categories) {
|
||||
const link = el('a', { href: `#/${cat.hash}`, className: 'home-card-link' });
|
||||
const card = el('div', { className: 'card' });
|
||||
card.appendChild(el('div', { className: 'card-title' }, cat.title.toUpperCase()));
|
||||
card.appendChild(el('div', { className: 'card-body' }, cat.desc));
|
||||
link.appendChild(card);
|
||||
container.appendChild(link);
|
||||
}
|
||||
|
||||
// Quick overview terminal
|
||||
container.appendChild(
|
||||
section('Quick Start', 'Include the CSS and set data attributes on your HTML element.',
|
||||
el('div', { className: 'terminal dt-accent-top' },
|
||||
el('code', {},
|
||||
'<link rel="stylesheet" href="@dangerousthings/web">\n<html data-brand="dt" data-theme="dark">'
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
141
packages/showcase/desktop/src/renderer/pages/tokens.ts
Normal file
141
packages/showcase/desktop/src/renderer/pages/tokens.ts
Normal file
@@ -0,0 +1,141 @@
|
||||
import { brands } from '@dangerousthings/tokens';
|
||||
import type { ThemeBrand } from '@dangerousthings/tokens';
|
||||
import { el, section, codeLabel } from '../utils/dom';
|
||||
import { getCurrentBrand } from '../brand-switcher';
|
||||
|
||||
export function renderTokensPage(container: HTMLElement) {
|
||||
container.appendChild(el('h1', { className: 'page-title' }, 'Tokens'));
|
||||
container.appendChild(el('p', { className: 'page-subtitle' }, 'Design token values for the active brand. Switch brands in the sidebar.'));
|
||||
|
||||
const brandId = getCurrentBrand();
|
||||
const brand = brands[brandId];
|
||||
|
||||
if (!brand) return;
|
||||
|
||||
// Color Palette — Dark Mode
|
||||
const darkColors = brand.dark;
|
||||
const colorEntries: [string, string][] = Object.entries(darkColors);
|
||||
|
||||
const colorsGrid = el('div', { style: 'display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--space-3);' });
|
||||
|
||||
for (const [name, hex] of colorEntries) {
|
||||
const swatch = el('div', { style: 'display: flex; align-items: center; gap: var(--space-3);' });
|
||||
const colorBox = el('div', { style: `width: 32px; height: 32px; background: ${hex}; border: 1px solid rgba(255,255,255,0.15); flex-shrink: 0;` });
|
||||
const info = el('div');
|
||||
info.appendChild(el('div', { style: 'font-weight: 600; font-size: 0.8125rem;' }, name));
|
||||
info.appendChild(el('div', { style: 'font-family: var(--font-mono); font-size: 0.6875rem; opacity: 0.5;' }, hex));
|
||||
swatch.appendChild(colorBox);
|
||||
swatch.appendChild(info);
|
||||
colorsGrid.appendChild(swatch);
|
||||
}
|
||||
|
||||
container.appendChild(
|
||||
section(`Color Palette — ${brand.name} (Dark Mode)`, brand.description,
|
||||
colorsGrid,
|
||||
),
|
||||
);
|
||||
|
||||
// Light Mode
|
||||
const lightColors = brand.light;
|
||||
const lightEntries: [string, string][] = Object.entries(lightColors);
|
||||
|
||||
const lightGrid = el('div', { style: 'display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--space-3);' });
|
||||
|
||||
for (const [name, hex] of lightEntries) {
|
||||
const swatch = el('div', { style: 'display: flex; align-items: center; gap: var(--space-3);' });
|
||||
const colorBox = el('div', { style: `width: 32px; height: 32px; background: ${hex}; border: 1px solid rgba(255,255,255,0.15); flex-shrink: 0;` });
|
||||
const info = el('div');
|
||||
info.appendChild(el('div', { style: 'font-weight: 600; font-size: 0.8125rem;' }, name));
|
||||
info.appendChild(el('div', { style: 'font-family: var(--font-mono); font-size: 0.6875rem; opacity: 0.5;' }, hex));
|
||||
swatch.appendChild(colorBox);
|
||||
swatch.appendChild(info);
|
||||
lightGrid.appendChild(swatch);
|
||||
}
|
||||
|
||||
container.appendChild(
|
||||
section(`Color Palette — ${brand.name} (Light Mode)`, 'Light mode color tokens.',
|
||||
lightGrid,
|
||||
),
|
||||
);
|
||||
|
||||
// Typography
|
||||
const typo = el('div', { className: 'terminal', style: 'margin-bottom: var(--space-4);' });
|
||||
typo.appendChild(el('code', {},
|
||||
`heading: ${brand.typography.heading}\nbody: ${brand.typography.body}\nmono: ${brand.typography.mono}`
|
||||
));
|
||||
|
||||
container.appendChild(
|
||||
section('Typography', 'Font family tokens for headings, body text, and monospace.',
|
||||
typo,
|
||||
),
|
||||
);
|
||||
|
||||
// Typography Scale Demo
|
||||
const scaleItems = [
|
||||
{ tag: 'h1', label: 'Heading 1', style: 'font-family: var(--font-heading); font-size: 2rem; font-weight: 900;' },
|
||||
{ tag: 'h2', label: 'Heading 2', style: 'font-family: var(--font-heading); font-size: 1.5rem; font-weight: 700;' },
|
||||
{ tag: 'h3', label: 'Heading 3', style: 'font-family: var(--font-heading); font-size: 1.25rem; font-weight: 600;' },
|
||||
{ tag: 'p', label: 'Body text — the quick brown fox jumps over the lazy dog', style: 'font-family: var(--font-body); font-size: 1rem;' },
|
||||
{ tag: 'code', label: 'const monospace = "code";', style: 'font-family: var(--font-mono); font-size: 0.875rem;' },
|
||||
];
|
||||
|
||||
const scaleDemo = el('div', { style: 'display: flex; flex-direction: column; gap: var(--space-3);' });
|
||||
for (const item of scaleItems) {
|
||||
scaleDemo.appendChild(el(item.tag, { style: item.style }, item.label));
|
||||
}
|
||||
|
||||
container.appendChild(
|
||||
section('Typography Scale', 'Live rendering with the current brand\'s font families.',
|
||||
scaleDemo,
|
||||
),
|
||||
);
|
||||
|
||||
// Shape Tokens
|
||||
const shape = el('div', { className: 'terminal', style: 'margin-bottom: var(--space-4);' });
|
||||
shape.appendChild(el('code', {},
|
||||
`bevelSm: ${brand.shape.bevelSm}\nbevelMd: ${brand.shape.bevelMd}\nbevelLg: ${brand.shape.bevelLg}\nradiusSm: ${brand.shape.radiusSm}\nradius: ${brand.shape.radius}\nradiusLg: ${brand.shape.radiusLg}`
|
||||
));
|
||||
|
||||
container.appendChild(
|
||||
section('Shape Tokens', 'Bevel and radius values determine the visual language — angular (DT) vs rounded (Classic).',
|
||||
shape,
|
||||
),
|
||||
);
|
||||
|
||||
// Spacing Scale
|
||||
const spacings = [
|
||||
{ name: '--space-1', value: '0.25rem (4px)' },
|
||||
{ name: '--space-2', value: '0.5rem (8px)' },
|
||||
{ name: '--space-3', value: '0.75rem (12px)' },
|
||||
{ name: '--space-4', value: '1rem (16px)' },
|
||||
{ name: '--space-6', value: '1.5rem (24px)' },
|
||||
{ name: '--space-8', value: '2rem (32px)' },
|
||||
];
|
||||
|
||||
const spacingDemo = el('div', { style: 'display: flex; flex-direction: column; gap: var(--space-2);' });
|
||||
for (const sp of spacings) {
|
||||
const row = el('div', { style: 'display: flex; align-items: center; gap: var(--space-3);' });
|
||||
row.appendChild(el('div', { style: `width: ${sp.name.replace('--', 'var(--') + ')'}; width: calc(${sp.value.split(' ')[0]} * 6); height: 12px; background: var(--color-primary); opacity: 0.6;` }));
|
||||
row.appendChild(el('span', { style: 'font-family: var(--font-mono); font-size: 0.75rem; opacity: 0.6;' }, `${sp.name}: ${sp.value}`));
|
||||
spacingDemo.appendChild(row);
|
||||
}
|
||||
|
||||
container.appendChild(
|
||||
section('Spacing Scale', 'Shared spacing tokens across all brands.',
|
||||
spacingDemo,
|
||||
),
|
||||
);
|
||||
|
||||
// CSS Custom Properties reference
|
||||
const cssRef = el('div', { className: 'terminal' });
|
||||
cssRef.appendChild(el('code', {},
|
||||
`/* Generated CSS custom properties */\n--color-bg: ${darkColors.bg};\n--color-primary: ${darkColors.primary};\n--color-secondary: ${darkColors.secondary};\n--color-error: ${darkColors.error};\n--color-success: ${darkColors.success};\n--bevel-sm: ${brand.shape.bevelSm};\n--bevel-md: ${brand.shape.bevelMd};\n--font-heading: ${brand.typography.heading};`
|
||||
));
|
||||
|
||||
container.appendChild(
|
||||
section('CSS Custom Properties', 'These are generated from TypeScript tokens and applied per-brand via data-brand attribute.',
|
||||
cssRef,
|
||||
codeLabel('See packages/tokens/src/scripts/generate-css.ts'),
|
||||
),
|
||||
);
|
||||
}
|
||||
305
packages/showcase/desktop/src/renderer/style.css
Normal file
305
packages/showcase/desktop/src/renderer/style.css
Normal file
@@ -0,0 +1,305 @@
|
||||
/* Showcase App Layout */
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--color-bg);
|
||||
color: var(--color-text-primary);
|
||||
font-family: var(--font-body);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
#app {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* ---- Sidebar ---- */
|
||||
#sidebar {
|
||||
width: 220px;
|
||||
min-height: 100vh;
|
||||
background: var(--color-surface);
|
||||
border-right: 2px solid var(--color-border);
|
||||
padding: var(--space-6);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-4);
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
font-family: var(--font-heading);
|
||||
font-weight: 900;
|
||||
font-size: 0.875rem;
|
||||
letter-spacing: 0.1em;
|
||||
color: var(--color-primary);
|
||||
text-transform: uppercase;
|
||||
padding-bottom: var(--space-4);
|
||||
border-bottom: 2px solid var(--color-primary);
|
||||
}
|
||||
|
||||
.brand-switcher-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.brand-btn {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: var(--space-2) var(--space-3);
|
||||
border: 2px solid var(--color-primary);
|
||||
background: transparent;
|
||||
color: var(--color-primary);
|
||||
font-weight: 700;
|
||||
font-size: 0.75rem;
|
||||
letter-spacing: 0.05em;
|
||||
cursor: pointer;
|
||||
text-transform: uppercase;
|
||||
transition: all var(--transition-fast);
|
||||
}
|
||||
|
||||
.brand-btn:hover {
|
||||
background: rgba(var(--color-primary-rgb), 0.1);
|
||||
}
|
||||
|
||||
.brand-btn.active {
|
||||
background: var(--color-primary);
|
||||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
.mode-switcher {
|
||||
display: flex;
|
||||
gap: var(--space-1);
|
||||
margin-top: var(--space-2);
|
||||
}
|
||||
|
||||
.mode-btn {
|
||||
flex: 1;
|
||||
padding: var(--space-1) var(--space-2);
|
||||
border: 1px solid var(--color-border);
|
||||
background: transparent;
|
||||
color: var(--color-text-secondary);
|
||||
font-size: 0.625rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
text-transform: uppercase;
|
||||
transition: all var(--transition-fast);
|
||||
}
|
||||
|
||||
.mode-btn.active {
|
||||
background: var(--color-primary);
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-1);
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
display: block;
|
||||
padding: var(--space-2) var(--space-3);
|
||||
color: var(--color-text-secondary);
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
font-size: 0.875rem;
|
||||
letter-spacing: 0.02em;
|
||||
text-transform: uppercase;
|
||||
border-left: 3px solid transparent;
|
||||
transition: all var(--transition-fast);
|
||||
}
|
||||
|
||||
.nav-link:hover {
|
||||
color: var(--color-primary);
|
||||
border-left-color: var(--color-primary);
|
||||
background: rgba(var(--color-primary-rgb), 0.05);
|
||||
}
|
||||
|
||||
.nav-link.active {
|
||||
color: var(--color-primary);
|
||||
border-left-color: var(--color-primary);
|
||||
}
|
||||
|
||||
/* ---- Main Content ---- */
|
||||
#content {
|
||||
flex: 1;
|
||||
margin-left: 220px;
|
||||
padding: var(--space-8);
|
||||
max-width: 900px;
|
||||
}
|
||||
|
||||
/* ---- Demo Sections ---- */
|
||||
.demo-section {
|
||||
margin-bottom: var(--space-8);
|
||||
}
|
||||
|
||||
.demo-section h2 {
|
||||
font-family: var(--font-heading);
|
||||
font-weight: 700;
|
||||
font-size: 1.125rem;
|
||||
color: var(--color-primary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
margin-bottom: var(--space-2);
|
||||
padding-bottom: var(--space-2);
|
||||
border-bottom: 2px solid var(--color-primary);
|
||||
}
|
||||
|
||||
.demo-description {
|
||||
color: var(--color-text-muted);
|
||||
font-size: 0.875rem;
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
|
||||
.demo-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-3);
|
||||
align-items: center;
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
|
||||
.demo-label {
|
||||
color: var(--color-text-muted);
|
||||
font-size: 0.6875rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
margin-bottom: var(--space-2);
|
||||
margin-top: var(--space-4);
|
||||
}
|
||||
|
||||
.code-label {
|
||||
color: rgba(var(--color-text-primary-rgb, 255, 255, 255), 0.35);
|
||||
font-size: 0.625rem;
|
||||
font-family: var(--font-mono);
|
||||
margin-top: var(--space-1);
|
||||
}
|
||||
|
||||
/* ---- Shared Component Base Styles ---- */
|
||||
|
||||
/* Buttons */
|
||||
.btn-primary,
|
||||
.btn-secondary,
|
||||
.btn-danger {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: var(--space-3) var(--space-6);
|
||||
font-weight: 700;
|
||||
font-size: 0.875rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-fast);
|
||||
border: none;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: var(--color-primary);
|
||||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: transparent;
|
||||
color: var(--color-primary);
|
||||
border: 2px solid var(--color-primary);
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background: var(--color-error);
|
||||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
.btn-danger:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
/* Cards */
|
||||
.card {
|
||||
padding: var(--space-6);
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-weight: 900;
|
||||
font-size: 1rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
color: var(--color-text-secondary);
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* Badges */
|
||||
.badge {
|
||||
display: inline-block;
|
||||
padding: var(--space-2) var(--space-3);
|
||||
font-weight: 600;
|
||||
font-size: 0.75rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
/* Inputs */
|
||||
.input,
|
||||
input[type="text"],
|
||||
input[type="email"],
|
||||
input[type="password"] {
|
||||
padding: var(--space-3) var(--space-4);
|
||||
font-size: 0.875rem;
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
border: 2px solid var(--color-border);
|
||||
background: var(--color-bg);
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.input:focus,
|
||||
input:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* Terminal */
|
||||
.terminal {
|
||||
background: var(--color-surface);
|
||||
border: 1px solid var(--color-border);
|
||||
padding: var(--space-6);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.8125rem;
|
||||
color: var(--color-accent, var(--color-primary));
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* Page title */
|
||||
.page-title {
|
||||
font-family: var(--font-heading);
|
||||
font-weight: 900;
|
||||
font-size: 1.75rem;
|
||||
color: var(--color-primary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
margin-bottom: var(--space-2);
|
||||
}
|
||||
|
||||
.page-subtitle {
|
||||
color: var(--color-text-muted);
|
||||
font-size: 0.875rem;
|
||||
margin-bottom: var(--space-8);
|
||||
}
|
||||
46
packages/showcase/desktop/src/renderer/utils/dom.ts
Normal file
46
packages/showcase/desktop/src/renderer/utils/dom.ts
Normal file
@@ -0,0 +1,46 @@
|
||||
export function el(
|
||||
tag: string,
|
||||
attrs?: Record<string, string>,
|
||||
...children: (string | HTMLElement)[]
|
||||
): HTMLElement {
|
||||
const element = document.createElement(tag);
|
||||
if (attrs) {
|
||||
for (const [key, value] of Object.entries(attrs)) {
|
||||
if (key === 'className') {
|
||||
element.className = value;
|
||||
} else {
|
||||
element.setAttribute(key, value);
|
||||
}
|
||||
}
|
||||
}
|
||||
for (const child of children) {
|
||||
if (typeof child === 'string') {
|
||||
element.appendChild(document.createTextNode(child));
|
||||
} else {
|
||||
element.appendChild(child);
|
||||
}
|
||||
}
|
||||
return element;
|
||||
}
|
||||
|
||||
export function section(title: string, description: string, ...children: HTMLElement[]): HTMLElement {
|
||||
const container = el('div', { className: 'demo-section' });
|
||||
container.appendChild(el('h2', {}, title));
|
||||
container.appendChild(el('p', { className: 'demo-description' }, description));
|
||||
for (const child of children) {
|
||||
container.appendChild(child);
|
||||
}
|
||||
return container;
|
||||
}
|
||||
|
||||
export function row(...children: HTMLElement[]): HTMLElement {
|
||||
return el('div', { className: 'demo-row' }, ...children);
|
||||
}
|
||||
|
||||
export function label(text: string): HTMLElement {
|
||||
return el('div', { className: 'demo-label' }, text);
|
||||
}
|
||||
|
||||
export function codeLabel(text: string): HTMLElement {
|
||||
return el('div', { className: 'code-label' }, text);
|
||||
}
|
||||
28
packages/showcase/desktop/src/renderer/utils/router.ts
Normal file
28
packages/showcase/desktop/src/renderer/utils/router.ts
Normal file
@@ -0,0 +1,28 @@
|
||||
export function initRouter(
|
||||
routes: Record<string, (container: HTMLElement) => void>,
|
||||
container: HTMLElement,
|
||||
) {
|
||||
function navigate() {
|
||||
const hash = window.location.hash.replace('#/', '').replace('#', '');
|
||||
const render = routes[hash] || routes[''];
|
||||
|
||||
// Update active nav link
|
||||
document.querySelectorAll('.nav-link').forEach((link) => {
|
||||
const href = (link as HTMLAnchorElement).getAttribute('href') || '';
|
||||
const linkHash = href.replace('#/', '').replace('#', '');
|
||||
link.classList.toggle('active', linkHash === hash);
|
||||
});
|
||||
|
||||
// Clear content safely
|
||||
while (container.firstChild) {
|
||||
container.removeChild(container.firstChild);
|
||||
}
|
||||
|
||||
if (render) {
|
||||
render(container);
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('hashchange', navigate);
|
||||
navigate();
|
||||
}
|
||||
10
packages/showcase/desktop/tsconfig.json
Normal file
10
packages/showcase/desktop/tsconfig.json
Normal file
@@ -0,0 +1,10 @@
|
||||
{
|
||||
"extends": "../../../tsconfig.base.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "dist/renderer",
|
||||
"rootDir": "src/renderer",
|
||||
"lib": ["ES2022", "DOM", "DOM.Iterable"],
|
||||
"noEmit": true
|
||||
},
|
||||
"include": ["src/renderer"]
|
||||
}
|
||||
14
packages/showcase/desktop/tsconfig.main.json
Normal file
14
packages/showcase/desktop/tsconfig.main.json
Normal file
@@ -0,0 +1,14 @@
|
||||
{
|
||||
"extends": "../../../tsconfig.base.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "dist/main",
|
||||
"rootDir": "src/main",
|
||||
"module": "CommonJS",
|
||||
"moduleResolution": "node",
|
||||
"lib": ["ES2022"],
|
||||
"declaration": false,
|
||||
"declarationMap": false,
|
||||
"sourceMap": false
|
||||
},
|
||||
"include": ["src/main"]
|
||||
}
|
||||
16
packages/showcase/desktop/vite.config.ts
Normal file
16
packages/showcase/desktop/vite.config.ts
Normal file
@@ -0,0 +1,16 @@
|
||||
import { defineConfig } from 'vite';
|
||||
import path from 'path';
|
||||
|
||||
export default defineConfig({
|
||||
root: 'src/renderer',
|
||||
base: './',
|
||||
build: {
|
||||
outDir: '../../dist/renderer',
|
||||
emptyOutDir: true,
|
||||
},
|
||||
resolve: {
|
||||
alias: {
|
||||
'@dangerousthings/web': path.resolve(__dirname, '../../web/dist'),
|
||||
},
|
||||
},
|
||||
});
|
||||
45
packages/showcase/mobile/App.tsx
Normal file
45
packages/showcase/mobile/App.tsx
Normal file
@@ -0,0 +1,45 @@
|
||||
import React from 'react';
|
||||
import { ActivityIndicator, View } from 'react-native';
|
||||
import { useFonts } from 'expo-font';
|
||||
import { NavigationContainer } from '@react-navigation/native';
|
||||
import { DTThemeProvider } from '@dangerousthings/react-native';
|
||||
import { BrandProvider, useBrand } from './src/brand/BrandContext';
|
||||
import { RootNavigator } from './src/navigation/RootNavigator';
|
||||
import { useNavigationTheme } from './src/navigation/navigationTheme';
|
||||
|
||||
function AppContent() {
|
||||
const { theme } = useBrand();
|
||||
const navigationTheme = useNavigationTheme();
|
||||
|
||||
return (
|
||||
<DTThemeProvider theme={theme}>
|
||||
<NavigationContainer theme={navigationTheme}>
|
||||
<RootNavigator />
|
||||
</NavigationContainer>
|
||||
</DTThemeProvider>
|
||||
);
|
||||
}
|
||||
|
||||
export default function App() {
|
||||
const [fontsLoaded] = useFonts({
|
||||
Tektur: require('./assets/fonts/Tektur-VariableFont_wdth,wght.ttf'),
|
||||
'Tektur-Regular': require('./assets/fonts/Tektur-Regular.ttf'),
|
||||
'Tektur-Medium': require('./assets/fonts/Tektur-Medium.ttf'),
|
||||
'Tektur-SemiBold': require('./assets/fonts/Tektur-SemiBold.ttf'),
|
||||
'Tektur-Bold': require('./assets/fonts/Tektur-Bold.ttf'),
|
||||
});
|
||||
|
||||
if (!fontsLoaded) {
|
||||
return (
|
||||
<View style={{ flex: 1, backgroundColor: '#000', justifyContent: 'center', alignItems: 'center' }}>
|
||||
<ActivityIndicator size="large" color="#00FFFF" />
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<BrandProvider initialBrand="dt">
|
||||
<AppContent />
|
||||
</BrandProvider>
|
||||
);
|
||||
}
|
||||
16
packages/showcase/mobile/android/.gitignore
vendored
Normal file
16
packages/showcase/mobile/android/.gitignore
vendored
Normal file
@@ -0,0 +1,16 @@
|
||||
# OSX
|
||||
#
|
||||
.DS_Store
|
||||
|
||||
# Android/IntelliJ
|
||||
#
|
||||
build/
|
||||
.idea
|
||||
.gradle
|
||||
local.properties
|
||||
*.iml
|
||||
*.hprof
|
||||
.cxx/
|
||||
|
||||
# Bundle artifacts
|
||||
*.jsbundle
|
||||
182
packages/showcase/mobile/android/app/build.gradle
Normal file
182
packages/showcase/mobile/android/app/build.gradle
Normal file
@@ -0,0 +1,182 @@
|
||||
apply plugin: "com.android.application"
|
||||
apply plugin: "org.jetbrains.kotlin.android"
|
||||
apply plugin: "com.facebook.react"
|
||||
|
||||
def projectRoot = rootDir.getAbsoluteFile().getParentFile().getAbsolutePath()
|
||||
|
||||
/**
|
||||
* This is the configuration block to customize your React Native Android app.
|
||||
* By default you don't need to apply any configuration, just uncomment the lines you need.
|
||||
*/
|
||||
react {
|
||||
entryFile = file(["node", "-e", "require('expo/scripts/resolveAppEntry')", projectRoot, "android", "absolute"].execute(null, rootDir).text.trim())
|
||||
reactNativeDir = new File(["node", "--print", "require.resolve('react-native/package.json')"].execute(null, rootDir).text.trim()).getParentFile().getAbsoluteFile()
|
||||
hermesCommand = new File(["node", "--print", "require.resolve('react-native/package.json')"].execute(null, rootDir).text.trim()).getParentFile().getAbsolutePath() + "/sdks/hermesc/%OS-BIN%/hermesc"
|
||||
codegenDir = new File(["node", "--print", "require.resolve('@react-native/codegen/package.json', { paths: [require.resolve('react-native/package.json')] })"].execute(null, rootDir).text.trim()).getParentFile().getAbsoluteFile()
|
||||
|
||||
enableBundleCompression = (findProperty('android.enableBundleCompression') ?: false).toBoolean()
|
||||
// Use Expo CLI to bundle the app, this ensures the Metro config
|
||||
// works correctly with Expo projects.
|
||||
cliFile = new File(["node", "--print", "require.resolve('@expo/cli', { paths: [require.resolve('expo/package.json')] })"].execute(null, rootDir).text.trim())
|
||||
bundleCommand = "export:embed"
|
||||
|
||||
/* Folders */
|
||||
// The root of your project, i.e. where "package.json" lives. Default is '../..'
|
||||
// root = file("../../")
|
||||
// The folder where the react-native NPM package is. Default is ../../node_modules/react-native
|
||||
// reactNativeDir = file("../../node_modules/react-native")
|
||||
// The folder where the react-native Codegen package is. Default is ../../node_modules/@react-native/codegen
|
||||
// codegenDir = file("../../node_modules/@react-native/codegen")
|
||||
|
||||
/* Variants */
|
||||
// The list of variants to that are debuggable. For those we're going to
|
||||
// skip the bundling of the JS bundle and the assets. By default is just 'debug'.
|
||||
// If you add flavors like lite, prod, etc. you'll have to list your debuggableVariants.
|
||||
// debuggableVariants = ["liteDebug", "prodDebug"]
|
||||
|
||||
/* Bundling */
|
||||
// A list containing the node command and its flags. Default is just 'node'.
|
||||
// nodeExecutableAndArgs = ["node"]
|
||||
|
||||
//
|
||||
// The path to the CLI configuration file. Default is empty.
|
||||
// bundleConfig = file(../rn-cli.config.js)
|
||||
//
|
||||
// The name of the generated asset file containing your JS bundle
|
||||
// bundleAssetName = "MyApplication.android.bundle"
|
||||
//
|
||||
// The entry file for bundle generation. Default is 'index.android.js' or 'index.js'
|
||||
// entryFile = file("../js/MyApplication.android.js")
|
||||
//
|
||||
// A list of extra flags to pass to the 'bundle' commands.
|
||||
// See https://github.com/react-native-community/cli/blob/main/docs/commands.md#bundle
|
||||
// extraPackagerArgs = []
|
||||
|
||||
/* Hermes Commands */
|
||||
// The hermes compiler command to run. By default it is 'hermesc'
|
||||
// hermesCommand = "$rootDir/my-custom-hermesc/bin/hermesc"
|
||||
//
|
||||
// The list of flags to pass to the Hermes compiler. By default is "-O", "-output-source-map"
|
||||
// hermesFlags = ["-O", "-output-source-map"]
|
||||
|
||||
/* Autolinking */
|
||||
autolinkLibrariesWithApp()
|
||||
}
|
||||
|
||||
/**
|
||||
* Set this to true in release builds to optimize the app using [R8](https://developer.android.com/topic/performance/app-optimization/enable-app-optimization).
|
||||
*/
|
||||
def enableMinifyInReleaseBuilds = (findProperty('android.enableMinifyInReleaseBuilds') ?: false).toBoolean()
|
||||
|
||||
/**
|
||||
* The preferred build flavor of JavaScriptCore (JSC)
|
||||
*
|
||||
* For example, to use the international variant, you can use:
|
||||
* `def jscFlavor = 'org.webkit:android-jsc-intl:+'`
|
||||
*
|
||||
* The international variant includes ICU i18n library and necessary data
|
||||
* allowing to use e.g. `Date.toLocaleString` and `String.localeCompare` that
|
||||
* give correct results when using with locales other than en-US. Note that
|
||||
* this variant is about 6MiB larger per architecture than default.
|
||||
*/
|
||||
def jscFlavor = 'io.github.react-native-community:jsc-android:2026004.+'
|
||||
|
||||
android {
|
||||
ndkVersion rootProject.ext.ndkVersion
|
||||
|
||||
buildToolsVersion rootProject.ext.buildToolsVersion
|
||||
compileSdk rootProject.ext.compileSdkVersion
|
||||
|
||||
namespace 'com.dangerousthings.showcase'
|
||||
defaultConfig {
|
||||
applicationId 'com.dangerousthings.showcase'
|
||||
minSdkVersion rootProject.ext.minSdkVersion
|
||||
targetSdkVersion rootProject.ext.targetSdkVersion
|
||||
versionCode 1
|
||||
versionName "1.0.0"
|
||||
|
||||
buildConfigField "String", "REACT_NATIVE_RELEASE_LEVEL", "\"${findProperty('reactNativeReleaseLevel') ?: 'stable'}\""
|
||||
}
|
||||
signingConfigs {
|
||||
debug {
|
||||
storeFile file('debug.keystore')
|
||||
storePassword 'android'
|
||||
keyAlias 'androiddebugkey'
|
||||
keyPassword 'android'
|
||||
}
|
||||
}
|
||||
buildTypes {
|
||||
debug {
|
||||
signingConfig signingConfigs.debug
|
||||
}
|
||||
release {
|
||||
// Caution! In production, you need to generate your own keystore file.
|
||||
// see https://reactnative.dev/docs/signed-apk-android.
|
||||
signingConfig signingConfigs.debug
|
||||
def enableShrinkResources = findProperty('android.enableShrinkResourcesInReleaseBuilds') ?: 'false'
|
||||
shrinkResources enableShrinkResources.toBoolean()
|
||||
minifyEnabled enableMinifyInReleaseBuilds
|
||||
proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
|
||||
def enablePngCrunchInRelease = findProperty('android.enablePngCrunchInReleaseBuilds') ?: 'true'
|
||||
crunchPngs enablePngCrunchInRelease.toBoolean()
|
||||
}
|
||||
}
|
||||
packagingOptions {
|
||||
jniLibs {
|
||||
def enableLegacyPackaging = findProperty('expo.useLegacyPackaging') ?: 'false'
|
||||
useLegacyPackaging enableLegacyPackaging.toBoolean()
|
||||
}
|
||||
}
|
||||
androidResources {
|
||||
ignoreAssetsPattern '!.svn:!.git:!.ds_store:!*.scc:!CVS:!thumbs.db:!picasa.ini:!*~'
|
||||
}
|
||||
}
|
||||
|
||||
// Apply static values from `gradle.properties` to the `android.packagingOptions`
|
||||
// Accepts values in comma delimited lists, example:
|
||||
// android.packagingOptions.pickFirsts=/LICENSE,**/picasa.ini
|
||||
["pickFirsts", "excludes", "merges", "doNotStrip"].each { prop ->
|
||||
// Split option: 'foo,bar' -> ['foo', 'bar']
|
||||
def options = (findProperty("android.packagingOptions.$prop") ?: "").split(",");
|
||||
// Trim all elements in place.
|
||||
for (i in 0..<options.size()) options[i] = options[i].trim();
|
||||
// `[] - ""` is essentially `[""].filter(Boolean)` removing all empty strings.
|
||||
options -= ""
|
||||
|
||||
if (options.length > 0) {
|
||||
println "android.packagingOptions.$prop += $options ($options.length)"
|
||||
// Ex: android.packagingOptions.pickFirsts += '**/SCCS/**'
|
||||
options.each {
|
||||
android.packagingOptions[prop] += it
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
dependencies {
|
||||
// The version of react-native is set by the React Native Gradle Plugin
|
||||
implementation("com.facebook.react:react-android")
|
||||
|
||||
def isGifEnabled = (findProperty('expo.gif.enabled') ?: "") == "true";
|
||||
def isWebpEnabled = (findProperty('expo.webp.enabled') ?: "") == "true";
|
||||
def isWebpAnimatedEnabled = (findProperty('expo.webp.animated') ?: "") == "true";
|
||||
|
||||
if (isGifEnabled) {
|
||||
// For animated gif support
|
||||
implementation("com.facebook.fresco:animated-gif:${expoLibs.versions.fresco.get()}")
|
||||
}
|
||||
|
||||
if (isWebpEnabled) {
|
||||
// For webp support
|
||||
implementation("com.facebook.fresco:webpsupport:${expoLibs.versions.fresco.get()}")
|
||||
if (isWebpAnimatedEnabled) {
|
||||
// Animated webp support
|
||||
implementation("com.facebook.fresco:animated-webp:${expoLibs.versions.fresco.get()}")
|
||||
}
|
||||
}
|
||||
|
||||
if (hermesEnabled.toBoolean()) {
|
||||
implementation("com.facebook.react:hermes-android")
|
||||
} else {
|
||||
implementation jscFlavor
|
||||
}
|
||||
}
|
||||
BIN
packages/showcase/mobile/android/app/debug.keystore
Normal file
BIN
packages/showcase/mobile/android/app/debug.keystore
Normal file
Binary file not shown.
14
packages/showcase/mobile/android/app/proguard-rules.pro
vendored
Normal file
14
packages/showcase/mobile/android/app/proguard-rules.pro
vendored
Normal file
@@ -0,0 +1,14 @@
|
||||
# Add project specific ProGuard rules here.
|
||||
# By default, the flags in this file are appended to flags specified
|
||||
# in /usr/local/Cellar/android-sdk/24.3.3/tools/proguard/proguard-android.txt
|
||||
# You can edit the include path and order by changing the proguardFiles
|
||||
# directive in build.gradle.
|
||||
#
|
||||
# For more details, see
|
||||
# http://developer.android.com/guide/developing/tools/proguard.html
|
||||
|
||||
# react-native-reanimated
|
||||
-keep class com.swmansion.reanimated.** { *; }
|
||||
-keep class com.facebook.react.turbomodule.** { *; }
|
||||
|
||||
# Add any project specific keep options here:
|
||||
@@ -0,0 +1,7 @@
|
||||
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
|
||||
xmlns:tools="http://schemas.android.com/tools">
|
||||
|
||||
<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
|
||||
|
||||
<application android:usesCleartextTraffic="true" tools:targetApi="28" tools:ignore="GoogleAppIndexingWarning" tools:replace="android:usesCleartextTraffic" />
|
||||
</manifest>
|
||||
@@ -0,0 +1,7 @@
|
||||
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
|
||||
xmlns:tools="http://schemas.android.com/tools">
|
||||
|
||||
<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
|
||||
|
||||
<application android:usesCleartextTraffic="true" tools:targetApi="28" tools:ignore="GoogleAppIndexingWarning" tools:replace="android:usesCleartextTraffic" />
|
||||
</manifest>
|
||||
@@ -0,0 +1,25 @@
|
||||
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
|
||||
<uses-permission android:name="android.permission.INTERNET"/>
|
||||
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
|
||||
<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
|
||||
<uses-permission android:name="android.permission.VIBRATE"/>
|
||||
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
|
||||
<queries>
|
||||
<intent>
|
||||
<action android:name="android.intent.action.VIEW"/>
|
||||
<category android:name="android.intent.category.BROWSABLE"/>
|
||||
<data android:scheme="https"/>
|
||||
</intent>
|
||||
</queries>
|
||||
<application android:name=".MainApplication" android:label="@string/app_name" android:icon="@mipmap/ic_launcher" android:roundIcon="@mipmap/ic_launcher_round" android:allowBackup="true" android:theme="@style/AppTheme" android:supportsRtl="true" android:enableOnBackInvokedCallback="false">
|
||||
<meta-data android:name="expo.modules.updates.ENABLED" android:value="false"/>
|
||||
<meta-data android:name="expo.modules.updates.EXPO_UPDATES_CHECK_ON_LAUNCH" android:value="ALWAYS"/>
|
||||
<meta-data android:name="expo.modules.updates.EXPO_UPDATES_LAUNCH_WAIT_MS" android:value="0"/>
|
||||
<activity android:name=".MainActivity" android:configChanges="keyboard|keyboardHidden|orientation|screenSize|screenLayout|uiMode" android:launchMode="singleTask" android:windowSoftInputMode="adjustResize" android:theme="@style/Theme.App.SplashScreen" android:exported="true" android:screenOrientation="portrait">
|
||||
<intent-filter>
|
||||
<action android:name="android.intent.action.MAIN"/>
|
||||
<category android:name="android.intent.category.LAUNCHER"/>
|
||||
</intent-filter>
|
||||
</activity>
|
||||
</application>
|
||||
</manifest>
|
||||
@@ -0,0 +1,61 @@
|
||||
package com.dangerousthings.showcase
|
||||
|
||||
import android.os.Build
|
||||
import android.os.Bundle
|
||||
|
||||
import com.facebook.react.ReactActivity
|
||||
import com.facebook.react.ReactActivityDelegate
|
||||
import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.fabricEnabled
|
||||
import com.facebook.react.defaults.DefaultReactActivityDelegate
|
||||
|
||||
import expo.modules.ReactActivityDelegateWrapper
|
||||
|
||||
class MainActivity : ReactActivity() {
|
||||
override fun onCreate(savedInstanceState: Bundle?) {
|
||||
// Set the theme to AppTheme BEFORE onCreate to support
|
||||
// coloring the background, status bar, and navigation bar.
|
||||
// This is required for expo-splash-screen.
|
||||
setTheme(R.style.AppTheme);
|
||||
super.onCreate(null)
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns the name of the main component registered from JavaScript. This is used to schedule
|
||||
* rendering of the component.
|
||||
*/
|
||||
override fun getMainComponentName(): String = "main"
|
||||
|
||||
/**
|
||||
* Returns the instance of the [ReactActivityDelegate]. We use [DefaultReactActivityDelegate]
|
||||
* which allows you to enable New Architecture with a single boolean flags [fabricEnabled]
|
||||
*/
|
||||
override fun createReactActivityDelegate(): ReactActivityDelegate {
|
||||
return ReactActivityDelegateWrapper(
|
||||
this,
|
||||
BuildConfig.IS_NEW_ARCHITECTURE_ENABLED,
|
||||
object : DefaultReactActivityDelegate(
|
||||
this,
|
||||
mainComponentName,
|
||||
fabricEnabled
|
||||
){})
|
||||
}
|
||||
|
||||
/**
|
||||
* Align the back button behavior with Android S
|
||||
* where moving root activities to background instead of finishing activities.
|
||||
* @see <a href="https://developer.android.com/reference/android/app/Activity#onBackPressed()">onBackPressed</a>
|
||||
*/
|
||||
override fun invokeDefaultOnBackPressed() {
|
||||
if (Build.VERSION.SDK_INT <= Build.VERSION_CODES.R) {
|
||||
if (!moveTaskToBack(false)) {
|
||||
// For non-root activities, use the default implementation to finish them.
|
||||
super.invokeDefaultOnBackPressed()
|
||||
}
|
||||
return
|
||||
}
|
||||
|
||||
// Use the default back button implementation on Android S
|
||||
// because it's doing more than [Activity.moveTaskToBack] in fact.
|
||||
super.invokeDefaultOnBackPressed()
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,56 @@
|
||||
package com.dangerousthings.showcase
|
||||
|
||||
import android.app.Application
|
||||
import android.content.res.Configuration
|
||||
|
||||
import com.facebook.react.PackageList
|
||||
import com.facebook.react.ReactApplication
|
||||
import com.facebook.react.ReactNativeApplicationEntryPoint.loadReactNative
|
||||
import com.facebook.react.ReactNativeHost
|
||||
import com.facebook.react.ReactPackage
|
||||
import com.facebook.react.ReactHost
|
||||
import com.facebook.react.common.ReleaseLevel
|
||||
import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint
|
||||
import com.facebook.react.defaults.DefaultReactNativeHost
|
||||
|
||||
import expo.modules.ApplicationLifecycleDispatcher
|
||||
import expo.modules.ReactNativeHostWrapper
|
||||
|
||||
class MainApplication : Application(), ReactApplication {
|
||||
|
||||
override val reactNativeHost: ReactNativeHost = ReactNativeHostWrapper(
|
||||
this,
|
||||
object : DefaultReactNativeHost(this) {
|
||||
override fun getPackages(): List<ReactPackage> =
|
||||
PackageList(this).packages.apply {
|
||||
// Packages that cannot be autolinked yet can be added manually here, for example:
|
||||
// add(MyReactNativePackage())
|
||||
}
|
||||
|
||||
override fun getJSMainModuleName(): String = ".expo/.virtual-metro-entry"
|
||||
|
||||
override fun getUseDeveloperSupport(): Boolean = BuildConfig.DEBUG
|
||||
|
||||
override val isNewArchEnabled: Boolean = BuildConfig.IS_NEW_ARCHITECTURE_ENABLED
|
||||
}
|
||||
)
|
||||
|
||||
override val reactHost: ReactHost
|
||||
get() = ReactNativeHostWrapper.createReactHost(applicationContext, reactNativeHost)
|
||||
|
||||
override fun onCreate() {
|
||||
super.onCreate()
|
||||
DefaultNewArchitectureEntryPoint.releaseLevel = try {
|
||||
ReleaseLevel.valueOf(BuildConfig.REACT_NATIVE_RELEASE_LEVEL.uppercase())
|
||||
} catch (e: IllegalArgumentException) {
|
||||
ReleaseLevel.STABLE
|
||||
}
|
||||
loadReactNative(this)
|
||||
ApplicationLifecycleDispatcher.onApplicationCreate(this)
|
||||
}
|
||||
|
||||
override fun onConfigurationChanged(newConfig: Configuration) {
|
||||
super.onConfigurationChanged(newConfig)
|
||||
ApplicationLifecycleDispatcher.onConfigurationChanged(this, newConfig)
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
|
||||
<item android:drawable="@color/splashscreen_background"/>
|
||||
</layer-list>
|
||||
@@ -0,0 +1,37 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Copyright (C) 2014 The Android Open Source Project
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
-->
|
||||
<inset xmlns:android="http://schemas.android.com/apk/res/android"
|
||||
android:insetLeft="@dimen/abc_edit_text_inset_horizontal_material"
|
||||
android:insetRight="@dimen/abc_edit_text_inset_horizontal_material"
|
||||
android:insetTop="@dimen/abc_edit_text_inset_top_material"
|
||||
android:insetBottom="@dimen/abc_edit_text_inset_bottom_material"
|
||||
>
|
||||
|
||||
<selector>
|
||||
<!--
|
||||
This file is a copy of abc_edit_text_material (https://bit.ly/3k8fX7I).
|
||||
The item below with state_pressed="false" and state_focused="false" causes a NullPointerException.
|
||||
NullPointerException:tempt to invoke virtual method 'android.graphics.drawable.Drawable android.graphics.drawable.Drawable$ConstantState.newDrawable(android.content.res.Resources)'
|
||||
|
||||
<item android:state_pressed="false" android:state_focused="false" android:drawable="@drawable/abc_textfield_default_mtrl_alpha"/>
|
||||
|
||||
For more info, see https://bit.ly/3CdLStv (react-native/pull/29452) and https://bit.ly/3nxOMoR.
|
||||
-->
|
||||
<item android:state_enabled="false" android:drawable="@drawable/abc_textfield_default_mtrl_alpha"/>
|
||||
<item android:drawable="@drawable/abc_textfield_activated_mtrl_alpha"/>
|
||||
</selector>
|
||||
|
||||
</inset>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
@@ -0,0 +1 @@
|
||||
<resources/>
|
||||
@@ -0,0 +1,5 @@
|
||||
<resources>
|
||||
<color name="splashscreen_background">#000000</color>
|
||||
<color name="colorPrimary">#023c69</color>
|
||||
<color name="colorPrimaryDark">#000000</color>
|
||||
</resources>
|
||||
@@ -0,0 +1,5 @@
|
||||
<resources>
|
||||
<string name="app_name">DT Design System Showcase</string>
|
||||
<string name="expo_splash_screen_resize_mode" translatable="false">contain</string>
|
||||
<string name="expo_splash_screen_status_bar_translucent" translatable="false">false</string>
|
||||
</resources>
|
||||
@@ -0,0 +1,11 @@
|
||||
<resources xmlns:tools="http://schemas.android.com/tools">
|
||||
<style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
|
||||
<item name="android:enforceNavigationBarContrast" tools:targetApi="29">true</item>
|
||||
<item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
|
||||
<item name="colorPrimary">@color/colorPrimary</item>
|
||||
<item name="android:statusBarColor">#000000</item>
|
||||
</style>
|
||||
<style name="Theme.App.SplashScreen" parent="AppTheme">
|
||||
<item name="android:windowBackground">@drawable/ic_launcher_background</item>
|
||||
</style>
|
||||
</resources>
|
||||
24
packages/showcase/mobile/android/build.gradle
Normal file
24
packages/showcase/mobile/android/build.gradle
Normal file
@@ -0,0 +1,24 @@
|
||||
// Top-level build file where you can add configuration options common to all sub-projects/modules.
|
||||
|
||||
buildscript {
|
||||
repositories {
|
||||
google()
|
||||
mavenCentral()
|
||||
}
|
||||
dependencies {
|
||||
classpath('com.android.tools.build:gradle')
|
||||
classpath('com.facebook.react:react-native-gradle-plugin')
|
||||
classpath('org.jetbrains.kotlin:kotlin-gradle-plugin')
|
||||
}
|
||||
}
|
||||
|
||||
allprojects {
|
||||
repositories {
|
||||
google()
|
||||
mavenCentral()
|
||||
maven { url 'https://www.jitpack.io' }
|
||||
}
|
||||
}
|
||||
|
||||
apply plugin: "expo-root-project"
|
||||
apply plugin: "com.facebook.react.rootproject"
|
||||
65
packages/showcase/mobile/android/gradle.properties
Normal file
65
packages/showcase/mobile/android/gradle.properties
Normal file
@@ -0,0 +1,65 @@
|
||||
# Project-wide Gradle settings.
|
||||
|
||||
# IDE (e.g. Android Studio) users:
|
||||
# Gradle settings configured through the IDE *will override*
|
||||
# any settings specified in this file.
|
||||
|
||||
# For more details on how to configure your build environment visit
|
||||
# http://www.gradle.org/docs/current/userguide/build_environment.html
|
||||
|
||||
# Specifies the JVM arguments used for the daemon process.
|
||||
# The setting is particularly useful for tweaking memory settings.
|
||||
# Default value: -Xmx512m -XX:MaxMetaspaceSize=256m
|
||||
org.gradle.jvmargs=-Xmx2048m -XX:MaxMetaspaceSize=512m
|
||||
|
||||
# When configured, Gradle will run in incubating parallel mode.
|
||||
# This option should only be used with decoupled projects. More details, visit
|
||||
# http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects
|
||||
org.gradle.parallel=true
|
||||
|
||||
# AndroidX package structure to make it clearer which packages are bundled with the
|
||||
# Android operating system, and which are packaged with your app's APK
|
||||
# https://developer.android.com/topic/libraries/support-library/androidx-rn
|
||||
android.useAndroidX=true
|
||||
|
||||
# Enable AAPT2 PNG crunching
|
||||
android.enablePngCrunchInReleaseBuilds=true
|
||||
|
||||
# Use this property to specify which architecture you want to build.
|
||||
# You can also override it from the CLI using
|
||||
# ./gradlew <task> -PreactNativeArchitectures=x86_64
|
||||
reactNativeArchitectures=armeabi-v7a,arm64-v8a,x86,x86_64
|
||||
|
||||
# Use this property to enable support to the new architecture.
|
||||
# This will allow you to use TurboModules and the Fabric render in
|
||||
# your application. You should enable this flag either if you want
|
||||
# to write custom TurboModules/Fabric components OR use libraries that
|
||||
# are providing them.
|
||||
newArchEnabled=true
|
||||
|
||||
# Use this property to enable or disable the Hermes JS engine.
|
||||
# If set to false, you will be using JSC instead.
|
||||
hermesEnabled=true
|
||||
|
||||
# Use this property to enable edge-to-edge display support.
|
||||
# This allows your app to draw behind system bars for an immersive UI.
|
||||
# Note: Only works with ReactActivity and should not be used with custom Activity.
|
||||
edgeToEdgeEnabled=true
|
||||
|
||||
# Enable GIF support in React Native images (~200 B increase)
|
||||
expo.gif.enabled=true
|
||||
# Enable webp support in React Native images (~85 KB increase)
|
||||
expo.webp.enabled=true
|
||||
# Enable animated webp support (~3.4 MB increase)
|
||||
# Disabled by default because iOS doesn't support animated webp
|
||||
expo.webp.animated=false
|
||||
|
||||
# Enable network inspector
|
||||
EX_DEV_CLIENT_NETWORK_INSPECTOR=true
|
||||
|
||||
# Use legacy packaging to compress native libraries in the resulting APK.
|
||||
expo.useLegacyPackaging=false
|
||||
|
||||
# Specifies whether the app is configured to use edge-to-edge via the app config or plugin
|
||||
# WARNING: This property has been deprecated and will be removed in Expo SDK 55. Use `edgeToEdgeEnabled` or `react.edgeToEdgeEnabled` to determine whether the project is using edge-to-edge.
|
||||
expo.edgeToEdgeEnabled=true
|
||||
BIN
packages/showcase/mobile/android/gradle/wrapper/gradle-wrapper.jar
vendored
Normal file
BIN
packages/showcase/mobile/android/gradle/wrapper/gradle-wrapper.jar
vendored
Normal file
Binary file not shown.
7
packages/showcase/mobile/android/gradle/wrapper/gradle-wrapper.properties
vendored
Normal file
7
packages/showcase/mobile/android/gradle/wrapper/gradle-wrapper.properties
vendored
Normal file
@@ -0,0 +1,7 @@
|
||||
distributionBase=GRADLE_USER_HOME
|
||||
distributionPath=wrapper/dists
|
||||
distributionUrl=https\://services.gradle.org/distributions/gradle-8.14.3-bin.zip
|
||||
networkTimeout=10000
|
||||
validateDistributionUrl=true
|
||||
zipStoreBase=GRADLE_USER_HOME
|
||||
zipStorePath=wrapper/dists
|
||||
251
packages/showcase/mobile/android/gradlew
vendored
Executable file
251
packages/showcase/mobile/android/gradlew
vendored
Executable file
@@ -0,0 +1,251 @@
|
||||
#!/bin/sh
|
||||
|
||||
#
|
||||
# Copyright © 2015-2021 the original authors.
|
||||
#
|
||||
# Licensed under the Apache License, Version 2.0 (the "License");
|
||||
# you may not use this file except in compliance with the License.
|
||||
# You may obtain a copy of the License at
|
||||
#
|
||||
# https://www.apache.org/licenses/LICENSE-2.0
|
||||
#
|
||||
# Unless required by applicable law or agreed to in writing, software
|
||||
# distributed under the License is distributed on an "AS IS" BASIS,
|
||||
# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
# See the License for the specific language governing permissions and
|
||||
# limitations under the License.
|
||||
#
|
||||
# SPDX-License-Identifier: Apache-2.0
|
||||
#
|
||||
|
||||
##############################################################################
|
||||
#
|
||||
# Gradle start up script for POSIX generated by Gradle.
|
||||
#
|
||||
# Important for running:
|
||||
#
|
||||
# (1) You need a POSIX-compliant shell to run this script. If your /bin/sh is
|
||||
# noncompliant, but you have some other compliant shell such as ksh or
|
||||
# bash, then to run this script, type that shell name before the whole
|
||||
# command line, like:
|
||||
#
|
||||
# ksh Gradle
|
||||
#
|
||||
# Busybox and similar reduced shells will NOT work, because this script
|
||||
# requires all of these POSIX shell features:
|
||||
# * functions;
|
||||
# * expansions «$var», «${var}», «${var:-default}», «${var+SET}»,
|
||||
# «${var#prefix}», «${var%suffix}», and «$( cmd )»;
|
||||
# * compound commands having a testable exit status, especially «case»;
|
||||
# * various built-in commands including «command», «set», and «ulimit».
|
||||
#
|
||||
# Important for patching:
|
||||
#
|
||||
# (2) This script targets any POSIX shell, so it avoids extensions provided
|
||||
# by Bash, Ksh, etc; in particular arrays are avoided.
|
||||
#
|
||||
# The "traditional" practice of packing multiple parameters into a
|
||||
# space-separated string is a well documented source of bugs and security
|
||||
# problems, so this is (mostly) avoided, by progressively accumulating
|
||||
# options in "$@", and eventually passing that to Java.
|
||||
#
|
||||
# Where the inherited environment variables (DEFAULT_JVM_OPTS, JAVA_OPTS,
|
||||
# and GRADLE_OPTS) rely on word-splitting, this is performed explicitly;
|
||||
# see the in-line comments for details.
|
||||
#
|
||||
# There are tweaks for specific operating systems such as AIX, CygWin,
|
||||
# Darwin, MinGW, and NonStop.
|
||||
#
|
||||
# (3) This script is generated from the Groovy template
|
||||
# https://github.com/gradle/gradle/blob/HEAD/platforms/jvm/plugins-application/src/main/resources/org/gradle/api/internal/plugins/unixStartScript.txt
|
||||
# within the Gradle project.
|
||||
#
|
||||
# You can find Gradle at https://github.com/gradle/gradle/.
|
||||
#
|
||||
##############################################################################
|
||||
|
||||
# Attempt to set APP_HOME
|
||||
|
||||
# Resolve links: $0 may be a link
|
||||
app_path=$0
|
||||
|
||||
# Need this for daisy-chained symlinks.
|
||||
while
|
||||
APP_HOME=${app_path%"${app_path##*/}"} # leaves a trailing /; empty if no leading path
|
||||
[ -h "$app_path" ]
|
||||
do
|
||||
ls=$( ls -ld "$app_path" )
|
||||
link=${ls#*' -> '}
|
||||
case $link in #(
|
||||
/*) app_path=$link ;; #(
|
||||
*) app_path=$APP_HOME$link ;;
|
||||
esac
|
||||
done
|
||||
|
||||
# This is normally unused
|
||||
# shellcheck disable=SC2034
|
||||
APP_BASE_NAME=${0##*/}
|
||||
# Discard cd standard output in case $CDPATH is set (https://github.com/gradle/gradle/issues/25036)
|
||||
APP_HOME=$( cd -P "${APP_HOME:-./}" > /dev/null && printf '%s\n' "$PWD" ) || exit
|
||||
|
||||
# Use the maximum available, or set MAX_FD != -1 to use that value.
|
||||
MAX_FD=maximum
|
||||
|
||||
warn () {
|
||||
echo "$*"
|
||||
} >&2
|
||||
|
||||
die () {
|
||||
echo
|
||||
echo "$*"
|
||||
echo
|
||||
exit 1
|
||||
} >&2
|
||||
|
||||
# OS specific support (must be 'true' or 'false').
|
||||
cygwin=false
|
||||
msys=false
|
||||
darwin=false
|
||||
nonstop=false
|
||||
case "$( uname )" in #(
|
||||
CYGWIN* ) cygwin=true ;; #(
|
||||
Darwin* ) darwin=true ;; #(
|
||||
MSYS* | MINGW* ) msys=true ;; #(
|
||||
NONSTOP* ) nonstop=true ;;
|
||||
esac
|
||||
|
||||
CLASSPATH="\\\"\\\""
|
||||
|
||||
|
||||
# Determine the Java command to use to start the JVM.
|
||||
if [ -n "$JAVA_HOME" ] ; then
|
||||
if [ -x "$JAVA_HOME/jre/sh/java" ] ; then
|
||||
# IBM's JDK on AIX uses strange locations for the executables
|
||||
JAVACMD=$JAVA_HOME/jre/sh/java
|
||||
else
|
||||
JAVACMD=$JAVA_HOME/bin/java
|
||||
fi
|
||||
if [ ! -x "$JAVACMD" ] ; then
|
||||
die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME
|
||||
|
||||
Please set the JAVA_HOME variable in your environment to match the
|
||||
location of your Java installation."
|
||||
fi
|
||||
else
|
||||
JAVACMD=java
|
||||
if ! command -v java >/dev/null 2>&1
|
||||
then
|
||||
die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
|
||||
|
||||
Please set the JAVA_HOME variable in your environment to match the
|
||||
location of your Java installation."
|
||||
fi
|
||||
fi
|
||||
|
||||
# Increase the maximum file descriptors if we can.
|
||||
if ! "$cygwin" && ! "$darwin" && ! "$nonstop" ; then
|
||||
case $MAX_FD in #(
|
||||
max*)
|
||||
# In POSIX sh, ulimit -H is undefined. That's why the result is checked to see if it worked.
|
||||
# shellcheck disable=SC2039,SC3045
|
||||
MAX_FD=$( ulimit -H -n ) ||
|
||||
warn "Could not query maximum file descriptor limit"
|
||||
esac
|
||||
case $MAX_FD in #(
|
||||
'' | soft) :;; #(
|
||||
*)
|
||||
# In POSIX sh, ulimit -n is undefined. That's why the result is checked to see if it worked.
|
||||
# shellcheck disable=SC2039,SC3045
|
||||
ulimit -n "$MAX_FD" ||
|
||||
warn "Could not set maximum file descriptor limit to $MAX_FD"
|
||||
esac
|
||||
fi
|
||||
|
||||
# Collect all arguments for the java command, stacking in reverse order:
|
||||
# * args from the command line
|
||||
# * the main class name
|
||||
# * -classpath
|
||||
# * -D...appname settings
|
||||
# * --module-path (only if needed)
|
||||
# * DEFAULT_JVM_OPTS, JAVA_OPTS, and GRADLE_OPTS environment variables.
|
||||
|
||||
# For Cygwin or MSYS, switch paths to Windows format before running java
|
||||
if "$cygwin" || "$msys" ; then
|
||||
APP_HOME=$( cygpath --path --mixed "$APP_HOME" )
|
||||
CLASSPATH=$( cygpath --path --mixed "$CLASSPATH" )
|
||||
|
||||
JAVACMD=$( cygpath --unix "$JAVACMD" )
|
||||
|
||||
# Now convert the arguments - kludge to limit ourselves to /bin/sh
|
||||
for arg do
|
||||
if
|
||||
case $arg in #(
|
||||
-*) false ;; # don't mess with options #(
|
||||
/?*) t=${arg#/} t=/${t%%/*} # looks like a POSIX filepath
|
||||
[ -e "$t" ] ;; #(
|
||||
*) false ;;
|
||||
esac
|
||||
then
|
||||
arg=$( cygpath --path --ignore --mixed "$arg" )
|
||||
fi
|
||||
# Roll the args list around exactly as many times as the number of
|
||||
# args, so each arg winds up back in the position where it started, but
|
||||
# possibly modified.
|
||||
#
|
||||
# NB: a `for` loop captures its iteration list before it begins, so
|
||||
# changing the positional parameters here affects neither the number of
|
||||
# iterations, nor the values presented in `arg`.
|
||||
shift # remove old arg
|
||||
set -- "$@" "$arg" # push replacement arg
|
||||
done
|
||||
fi
|
||||
|
||||
|
||||
# Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
|
||||
DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"'
|
||||
|
||||
# Collect all arguments for the java command:
|
||||
# * DEFAULT_JVM_OPTS, JAVA_OPTS, JAVA_OPTS, and optsEnvironmentVar are not allowed to contain shell fragments,
|
||||
# and any embedded shellness will be escaped.
|
||||
# * For example: A user cannot expect ${Hostname} to be expanded, as it is an environment variable and will be
|
||||
# treated as '${Hostname}' itself on the command line.
|
||||
|
||||
set -- \
|
||||
"-Dorg.gradle.appname=$APP_BASE_NAME" \
|
||||
-classpath "$CLASSPATH" \
|
||||
-jar "$APP_HOME/gradle/wrapper/gradle-wrapper.jar" \
|
||||
"$@"
|
||||
|
||||
# Stop when "xargs" is not available.
|
||||
if ! command -v xargs >/dev/null 2>&1
|
||||
then
|
||||
die "xargs is not available"
|
||||
fi
|
||||
|
||||
# Use "xargs" to parse quoted args.
|
||||
#
|
||||
# With -n1 it outputs one arg per line, with the quotes and backslashes removed.
|
||||
#
|
||||
# In Bash we could simply go:
|
||||
#
|
||||
# readarray ARGS < <( xargs -n1 <<<"$var" ) &&
|
||||
# set -- "${ARGS[@]}" "$@"
|
||||
#
|
||||
# but POSIX shell has neither arrays nor command substitution, so instead we
|
||||
# post-process each arg (as a line of input to sed) to backslash-escape any
|
||||
# character that might be a shell metacharacter, then use eval to reverse
|
||||
# that process (while maintaining the separation between arguments), and wrap
|
||||
# the whole thing up as a single "set" statement.
|
||||
#
|
||||
# This will of course break if any of these variables contains a newline or
|
||||
# an unmatched quote.
|
||||
#
|
||||
|
||||
eval "set -- $(
|
||||
printf '%s\n' "$DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS" |
|
||||
xargs -n1 |
|
||||
sed ' s~[^-[:alnum:]+,./:=@_]~\\&~g; ' |
|
||||
tr '\n' ' '
|
||||
)" '"$@"'
|
||||
|
||||
exec "$JAVACMD" "$@"
|
||||
94
packages/showcase/mobile/android/gradlew.bat
vendored
Normal file
94
packages/showcase/mobile/android/gradlew.bat
vendored
Normal file
@@ -0,0 +1,94 @@
|
||||
@rem
|
||||
@rem Copyright 2015 the original author or authors.
|
||||
@rem
|
||||
@rem Licensed under the Apache License, Version 2.0 (the "License");
|
||||
@rem you may not use this file except in compliance with the License.
|
||||
@rem You may obtain a copy of the License at
|
||||
@rem
|
||||
@rem https://www.apache.org/licenses/LICENSE-2.0
|
||||
@rem
|
||||
@rem Unless required by applicable law or agreed to in writing, software
|
||||
@rem distributed under the License is distributed on an "AS IS" BASIS,
|
||||
@rem WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
@rem See the License for the specific language governing permissions and
|
||||
@rem limitations under the License.
|
||||
@rem
|
||||
@rem SPDX-License-Identifier: Apache-2.0
|
||||
@rem
|
||||
|
||||
@if "%DEBUG%"=="" @echo off
|
||||
@rem ##########################################################################
|
||||
@rem
|
||||
@rem Gradle startup script for Windows
|
||||
@rem
|
||||
@rem ##########################################################################
|
||||
|
||||
@rem Set local scope for the variables with windows NT shell
|
||||
if "%OS%"=="Windows_NT" setlocal
|
||||
|
||||
set DIRNAME=%~dp0
|
||||
if "%DIRNAME%"=="" set DIRNAME=.
|
||||
@rem This is normally unused
|
||||
set APP_BASE_NAME=%~n0
|
||||
set APP_HOME=%DIRNAME%
|
||||
|
||||
@rem Resolve any "." and ".." in APP_HOME to make it shorter.
|
||||
for %%i in ("%APP_HOME%") do set APP_HOME=%%~fi
|
||||
|
||||
@rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
|
||||
set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m"
|
||||
|
||||
@rem Find java.exe
|
||||
if defined JAVA_HOME goto findJavaFromJavaHome
|
||||
|
||||
set JAVA_EXE=java.exe
|
||||
%JAVA_EXE% -version >NUL 2>&1
|
||||
if %ERRORLEVEL% equ 0 goto execute
|
||||
|
||||
echo. 1>&2
|
||||
echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 1>&2
|
||||
echo. 1>&2
|
||||
echo Please set the JAVA_HOME variable in your environment to match the 1>&2
|
||||
echo location of your Java installation. 1>&2
|
||||
|
||||
goto fail
|
||||
|
||||
:findJavaFromJavaHome
|
||||
set JAVA_HOME=%JAVA_HOME:"=%
|
||||
set JAVA_EXE=%JAVA_HOME%/bin/java.exe
|
||||
|
||||
if exist "%JAVA_EXE%" goto execute
|
||||
|
||||
echo. 1>&2
|
||||
echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME% 1>&2
|
||||
echo. 1>&2
|
||||
echo Please set the JAVA_HOME variable in your environment to match the 1>&2
|
||||
echo location of your Java installation. 1>&2
|
||||
|
||||
goto fail
|
||||
|
||||
:execute
|
||||
@rem Setup the command line
|
||||
|
||||
set CLASSPATH=
|
||||
|
||||
|
||||
@rem Execute Gradle
|
||||
"%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" -jar "%APP_HOME%\gradle\wrapper\gradle-wrapper.jar" %*
|
||||
|
||||
:end
|
||||
@rem End local scope for the variables with windows NT shell
|
||||
if %ERRORLEVEL% equ 0 goto mainEnd
|
||||
|
||||
:fail
|
||||
rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of
|
||||
rem the _cmd.exe /c_ return code!
|
||||
set EXIT_CODE=%ERRORLEVEL%
|
||||
if %EXIT_CODE% equ 0 set EXIT_CODE=1
|
||||
if not ""=="%GRADLE_EXIT_CONSOLE%" exit %EXIT_CODE%
|
||||
exit /b %EXIT_CODE%
|
||||
|
||||
:mainEnd
|
||||
if "%OS%"=="Windows_NT" endlocal
|
||||
|
||||
:omega
|
||||
39
packages/showcase/mobile/android/settings.gradle
Normal file
39
packages/showcase/mobile/android/settings.gradle
Normal file
@@ -0,0 +1,39 @@
|
||||
pluginManagement {
|
||||
def reactNativeGradlePlugin = new File(
|
||||
providers.exec {
|
||||
workingDir(rootDir)
|
||||
commandLine("node", "--print", "require.resolve('@react-native/gradle-plugin/package.json', { paths: [require.resolve('react-native/package.json')] })")
|
||||
}.standardOutput.asText.get().trim()
|
||||
).getParentFile().absolutePath
|
||||
includeBuild(reactNativeGradlePlugin)
|
||||
|
||||
def expoPluginsPath = new File(
|
||||
providers.exec {
|
||||
workingDir(rootDir)
|
||||
commandLine("node", "--print", "require.resolve('expo-modules-autolinking/package.json', { paths: [require.resolve('expo/package.json')] })")
|
||||
}.standardOutput.asText.get().trim(),
|
||||
"../android/expo-gradle-plugin"
|
||||
).absolutePath
|
||||
includeBuild(expoPluginsPath)
|
||||
}
|
||||
|
||||
plugins {
|
||||
id("com.facebook.react.settings")
|
||||
id("expo-autolinking-settings")
|
||||
}
|
||||
|
||||
extensions.configure(com.facebook.react.ReactSettingsExtension) { ex ->
|
||||
if (System.getenv('EXPO_USE_COMMUNITY_AUTOLINKING') == '1') {
|
||||
ex.autolinkLibrariesFromCommand()
|
||||
} else {
|
||||
ex.autolinkLibrariesFromCommand(expoAutolinking.rnConfigCommand)
|
||||
}
|
||||
}
|
||||
expoAutolinking.useExpoModules()
|
||||
|
||||
rootProject.name = 'DT Design System Showcase'
|
||||
|
||||
expoAutolinking.useExpoVersionCatalog()
|
||||
|
||||
include ':app'
|
||||
includeBuild(expoAutolinking.reactNativeGradlePlugin)
|
||||
23
packages/showcase/mobile/app.json
Normal file
23
packages/showcase/mobile/app.json
Normal file
@@ -0,0 +1,23 @@
|
||||
{
|
||||
"expo": {
|
||||
"name": "DT Design System Showcase",
|
||||
"slug": "dt-showcase",
|
||||
"version": "1.0.0",
|
||||
"orientation": "portrait",
|
||||
"userInterfaceStyle": "dark",
|
||||
"newArchEnabled": true,
|
||||
"splash": {
|
||||
"backgroundColor": "#000000"
|
||||
},
|
||||
"ios": {
|
||||
"supportsTablet": true,
|
||||
"bundleIdentifier": "com.dangerousthings.showcase"
|
||||
},
|
||||
"android": {
|
||||
"adaptiveIcon": {
|
||||
"backgroundColor": "#000000"
|
||||
},
|
||||
"package": "com.dangerousthings.showcase"
|
||||
}
|
||||
}
|
||||
}
|
||||
BIN
packages/showcase/mobile/assets/fonts/Tektur-Bold.ttf
Normal file
BIN
packages/showcase/mobile/assets/fonts/Tektur-Bold.ttf
Normal file
Binary file not shown.
BIN
packages/showcase/mobile/assets/fonts/Tektur-Medium.ttf
Normal file
BIN
packages/showcase/mobile/assets/fonts/Tektur-Medium.ttf
Normal file
Binary file not shown.
BIN
packages/showcase/mobile/assets/fonts/Tektur-Regular.ttf
Normal file
BIN
packages/showcase/mobile/assets/fonts/Tektur-Regular.ttf
Normal file
Binary file not shown.
BIN
packages/showcase/mobile/assets/fonts/Tektur-SemiBold.ttf
Normal file
BIN
packages/showcase/mobile/assets/fonts/Tektur-SemiBold.ttf
Normal file
Binary file not shown.
Binary file not shown.
6
packages/showcase/mobile/babel.config.js
Normal file
6
packages/showcase/mobile/babel.config.js
Normal file
@@ -0,0 +1,6 @@
|
||||
module.exports = function (api) {
|
||||
api.cache(true);
|
||||
return {
|
||||
presets: ['babel-preset-expo'],
|
||||
};
|
||||
};
|
||||
24
packages/showcase/mobile/eas.json
Normal file
24
packages/showcase/mobile/eas.json
Normal file
@@ -0,0 +1,24 @@
|
||||
{
|
||||
"cli": {
|
||||
"version": ">= 12.0.0"
|
||||
},
|
||||
"build": {
|
||||
"preview": {
|
||||
"android": {
|
||||
"buildType": "apk"
|
||||
},
|
||||
"ios": {
|
||||
"simulator": true
|
||||
},
|
||||
"distribution": "internal"
|
||||
},
|
||||
"production": {
|
||||
"android": {
|
||||
"buildType": "apk"
|
||||
},
|
||||
"ios": {
|
||||
"distribution": "store"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
4
packages/showcase/mobile/index.js
Normal file
4
packages/showcase/mobile/index.js
Normal file
@@ -0,0 +1,4 @@
|
||||
import { registerRootComponent } from "expo";
|
||||
import App from "./App";
|
||||
|
||||
registerRootComponent(App);
|
||||
30
packages/showcase/mobile/ios/.gitignore
vendored
Normal file
30
packages/showcase/mobile/ios/.gitignore
vendored
Normal file
@@ -0,0 +1,30 @@
|
||||
# OSX
|
||||
#
|
||||
.DS_Store
|
||||
|
||||
# Xcode
|
||||
#
|
||||
build/
|
||||
*.pbxuser
|
||||
!default.pbxuser
|
||||
*.mode1v3
|
||||
!default.mode1v3
|
||||
*.mode2v3
|
||||
!default.mode2v3
|
||||
*.perspectivev3
|
||||
!default.perspectivev3
|
||||
xcuserdata
|
||||
*.xccheckout
|
||||
*.moved-aside
|
||||
DerivedData
|
||||
*.hmap
|
||||
*.ipa
|
||||
*.xcuserstate
|
||||
project.xcworkspace
|
||||
.xcode.env.local
|
||||
|
||||
# Bundle artifacts
|
||||
*.jsbundle
|
||||
|
||||
# CocoaPods
|
||||
/Pods/
|
||||
11
packages/showcase/mobile/ios/.xcode.env
Normal file
11
packages/showcase/mobile/ios/.xcode.env
Normal file
@@ -0,0 +1,11 @@
|
||||
# This `.xcode.env` file is versioned and is used to source the environment
|
||||
# used when running script phases inside Xcode.
|
||||
# To customize your local environment, you can create an `.xcode.env.local`
|
||||
# file that is not versioned.
|
||||
|
||||
# NODE_BINARY variable contains the PATH to the node executable.
|
||||
#
|
||||
# Customize the NODE_BINARY variable here.
|
||||
# For example, to use nvm with brew, add the following line
|
||||
# . "$(brew --prefix nvm)/nvm.sh" --no-use
|
||||
export NODE_BINARY=$(command -v node)
|
||||
@@ -0,0 +1,436 @@
|
||||
// !$*UTF8*$!
|
||||
{
|
||||
archiveVersion = 1;
|
||||
classes = {
|
||||
};
|
||||
objectVersion = 54;
|
||||
objects = {
|
||||
|
||||
/* Begin PBXBuildFile section */
|
||||
13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 13B07FB51A68108700A75B9A /* Images.xcassets */; };
|
||||
3E461D99554A48A4959DE609 /* SplashScreen.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = AA286B85B6C04FC6940260E9 /* SplashScreen.storyboard */; };
|
||||
BB2F792D24A3F905000567C9 /* Expo.plist in Resources */ = {isa = PBXBuildFile; fileRef = BB2F792C24A3F905000567C9 /* Expo.plist */; };
|
||||
F11748422D0307B40044C1D9 /* AppDelegate.swift in Sources */ = {isa = PBXBuildFile; fileRef = F11748412D0307B40044C1D9 /* AppDelegate.swift */; };
|
||||
/* End PBXBuildFile section */
|
||||
|
||||
/* Begin PBXFileReference section */
|
||||
13B07F961A680F5B00A75B9A /* DTDesignSystemShowcase.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = DTDesignSystemShowcase.app; sourceTree = BUILT_PRODUCTS_DIR; };
|
||||
13B07FB51A68108700A75B9A /* Images.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; name = Images.xcassets; path = DTDesignSystemShowcase/Images.xcassets; sourceTree = "<group>"; };
|
||||
13B07FB61A68108700A75B9A /* Info.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; name = Info.plist; path = DTDesignSystemShowcase/Info.plist; sourceTree = "<group>"; };
|
||||
AA286B85B6C04FC6940260E9 /* SplashScreen.storyboard */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = file.storyboard; name = SplashScreen.storyboard; path = DTDesignSystemShowcase/SplashScreen.storyboard; sourceTree = "<group>"; };
|
||||
BB2F792C24A3F905000567C9 /* Expo.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; path = Expo.plist; sourceTree = "<group>"; };
|
||||
ED297162215061F000B7C4FE /* JavaScriptCore.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = JavaScriptCore.framework; path = System/Library/Frameworks/JavaScriptCore.framework; sourceTree = SDKROOT; };
|
||||
F11748412D0307B40044C1D9 /* AppDelegate.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; name = AppDelegate.swift; path = DTDesignSystemShowcase/AppDelegate.swift; sourceTree = "<group>"; };
|
||||
F11748442D0722820044C1D9 /* DTDesignSystemShowcase-Bridging-Header.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; name = "DTDesignSystemShowcase-Bridging-Header.h"; path = "DTDesignSystemShowcase/DTDesignSystemShowcase-Bridging-Header.h"; sourceTree = "<group>"; };
|
||||
/* End PBXFileReference section */
|
||||
|
||||
/* Begin PBXFrameworksBuildPhase section */
|
||||
13B07F8C1A680F5B00A75B9A /* Frameworks */ = {
|
||||
isa = PBXFrameworksBuildPhase;
|
||||
buildActionMask = 2147483647;
|
||||
files = (
|
||||
);
|
||||
runOnlyForDeploymentPostprocessing = 0;
|
||||
};
|
||||
/* End PBXFrameworksBuildPhase section */
|
||||
|
||||
/* Begin PBXGroup section */
|
||||
13B07FAE1A68108700A75B9A /* DTDesignSystemShowcase */ = {
|
||||
isa = PBXGroup;
|
||||
children = (
|
||||
F11748412D0307B40044C1D9 /* AppDelegate.swift */,
|
||||
F11748442D0722820044C1D9 /* DTDesignSystemShowcase-Bridging-Header.h */,
|
||||
BB2F792B24A3F905000567C9 /* Supporting */,
|
||||
13B07FB51A68108700A75B9A /* Images.xcassets */,
|
||||
13B07FB61A68108700A75B9A /* Info.plist */,
|
||||
AA286B85B6C04FC6940260E9 /* SplashScreen.storyboard */,
|
||||
);
|
||||
name = DTDesignSystemShowcase;
|
||||
sourceTree = "<group>";
|
||||
};
|
||||
2D16E6871FA4F8E400B85C8A /* Frameworks */ = {
|
||||
isa = PBXGroup;
|
||||
children = (
|
||||
ED297162215061F000B7C4FE /* JavaScriptCore.framework */,
|
||||
);
|
||||
name = Frameworks;
|
||||
sourceTree = "<group>";
|
||||
};
|
||||
832341AE1AAA6A7D00B99B32 /* Libraries */ = {
|
||||
isa = PBXGroup;
|
||||
children = (
|
||||
);
|
||||
name = Libraries;
|
||||
sourceTree = "<group>";
|
||||
};
|
||||
83CBB9F61A601CBA00E9B192 = {
|
||||
isa = PBXGroup;
|
||||
children = (
|
||||
13B07FAE1A68108700A75B9A /* DTDesignSystemShowcase */,
|
||||
832341AE1AAA6A7D00B99B32 /* Libraries */,
|
||||
83CBBA001A601CBA00E9B192 /* Products */,
|
||||
2D16E6871FA4F8E400B85C8A /* Frameworks */,
|
||||
);
|
||||
indentWidth = 2;
|
||||
sourceTree = "<group>";
|
||||
tabWidth = 2;
|
||||
usesTabs = 0;
|
||||
};
|
||||
83CBBA001A601CBA00E9B192 /* Products */ = {
|
||||
isa = PBXGroup;
|
||||
children = (
|
||||
13B07F961A680F5B00A75B9A /* DTDesignSystemShowcase.app */,
|
||||
);
|
||||
name = Products;
|
||||
sourceTree = "<group>";
|
||||
};
|
||||
BB2F792B24A3F905000567C9 /* Supporting */ = {
|
||||
isa = PBXGroup;
|
||||
children = (
|
||||
BB2F792C24A3F905000567C9 /* Expo.plist */,
|
||||
);
|
||||
name = Supporting;
|
||||
path = DTDesignSystemShowcase/Supporting;
|
||||
sourceTree = "<group>";
|
||||
};
|
||||
/* End PBXGroup section */
|
||||
|
||||
/* Begin PBXNativeTarget section */
|
||||
13B07F861A680F5B00A75B9A /* DTDesignSystemShowcase */ = {
|
||||
isa = PBXNativeTarget;
|
||||
buildConfigurationList = 13B07F931A680F5B00A75B9A /* Build configuration list for PBXNativeTarget "DTDesignSystemShowcase" */;
|
||||
buildPhases = (
|
||||
08A4A3CD28434E44B6B9DE2E /* [CP] Check Pods Manifest.lock */,
|
||||
13B07F871A680F5B00A75B9A /* Sources */,
|
||||
13B07F8C1A680F5B00A75B9A /* Frameworks */,
|
||||
13B07F8E1A680F5B00A75B9A /* Resources */,
|
||||
00DD1BFF1BD5951E006B06BC /* Bundle React Native code and images */,
|
||||
800E24972A6A228C8D4807E9 /* [CP] Copy Pods Resources */,
|
||||
);
|
||||
buildRules = (
|
||||
);
|
||||
dependencies = (
|
||||
);
|
||||
name = DTDesignSystemShowcase;
|
||||
productName = DTDesignSystemShowcase;
|
||||
productReference = 13B07F961A680F5B00A75B9A /* DTDesignSystemShowcase.app */;
|
||||
productType = "com.apple.product-type.application";
|
||||
};
|
||||
/* End PBXNativeTarget section */
|
||||
|
||||
/* Begin PBXProject section */
|
||||
83CBB9F71A601CBA00E9B192 /* Project object */ = {
|
||||
isa = PBXProject;
|
||||
attributes = {
|
||||
LastUpgradeCheck = 1130;
|
||||
TargetAttributes = {
|
||||
13B07F861A680F5B00A75B9A = {
|
||||
LastSwiftMigration = 1250;
|
||||
};
|
||||
};
|
||||
};
|
||||
buildConfigurationList = 83CBB9FA1A601CBA00E9B192 /* Build configuration list for PBXProject "DTDesignSystemShowcase" */;
|
||||
compatibilityVersion = "Xcode 3.2";
|
||||
developmentRegion = en;
|
||||
hasScannedForEncodings = 0;
|
||||
knownRegions = (
|
||||
en,
|
||||
Base,
|
||||
);
|
||||
mainGroup = 83CBB9F61A601CBA00E9B192;
|
||||
productRefGroup = 83CBBA001A601CBA00E9B192 /* Products */;
|
||||
projectDirPath = "";
|
||||
projectRoot = "";
|
||||
targets = (
|
||||
13B07F861A680F5B00A75B9A /* DTDesignSystemShowcase */,
|
||||
);
|
||||
};
|
||||
/* End PBXProject section */
|
||||
|
||||
/* Begin PBXResourcesBuildPhase section */
|
||||
13B07F8E1A680F5B00A75B9A /* Resources */ = {
|
||||
isa = PBXResourcesBuildPhase;
|
||||
buildActionMask = 2147483647;
|
||||
files = (
|
||||
BB2F792D24A3F905000567C9 /* Expo.plist in Resources */,
|
||||
13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */,
|
||||
3E461D99554A48A4959DE609 /* SplashScreen.storyboard in Resources */,
|
||||
);
|
||||
runOnlyForDeploymentPostprocessing = 0;
|
||||
};
|
||||
/* End PBXResourcesBuildPhase section */
|
||||
|
||||
/* Begin PBXShellScriptBuildPhase section */
|
||||
00DD1BFF1BD5951E006B06BC /* Bundle React Native code and images */ = {
|
||||
isa = PBXShellScriptBuildPhase;
|
||||
alwaysOutOfDate = 1;
|
||||
buildActionMask = 2147483647;
|
||||
files = (
|
||||
);
|
||||
inputPaths = (
|
||||
"$(SRCROOT)/.xcode.env",
|
||||
"$(SRCROOT)/.xcode.env.local",
|
||||
);
|
||||
name = "Bundle React Native code and images";
|
||||
outputPaths = (
|
||||
);
|
||||
runOnlyForDeploymentPostprocessing = 0;
|
||||
shellPath = /bin/sh;
|
||||
shellScript = "if [[ -f \"$PODS_ROOT/../.xcode.env\" ]]; then\n source \"$PODS_ROOT/../.xcode.env\"\nfi\nif [[ -f \"$PODS_ROOT/../.xcode.env.local\" ]]; then\n source \"$PODS_ROOT/../.xcode.env.local\"\nfi\n\n# The project root by default is one level up from the ios directory\nexport PROJECT_ROOT=\"$PROJECT_DIR\"/..\n\nif [[ \"$CONFIGURATION\" = *Debug* ]]; then\n export SKIP_BUNDLING=1\nfi\nif [[ -z \"$ENTRY_FILE\" ]]; then\n # Set the entry JS file using the bundler's entry resolution.\n export ENTRY_FILE=\"$(\"$NODE_BINARY\" -e \"require('expo/scripts/resolveAppEntry')\" \"$PROJECT_ROOT\" ios absolute | tail -n 1)\"\nfi\n\nif [[ -z \"$CLI_PATH\" ]]; then\n # Use Expo CLI\n export CLI_PATH=\"$(\"$NODE_BINARY\" --print \"require.resolve('@expo/cli', { paths: [require.resolve('expo/package.json')] })\")\"\nfi\nif [[ -z \"$BUNDLE_COMMAND\" ]]; then\n # Default Expo CLI command for bundling\n export BUNDLE_COMMAND=\"export:embed\"\nfi\n\n# Source .xcode.env.updates if it exists to allow\n# SKIP_BUNDLING to be unset if needed\nif [[ -f \"$PODS_ROOT/../.xcode.env.updates\" ]]; then\n source \"$PODS_ROOT/../.xcode.env.updates\"\nfi\n# Source local changes to allow overrides\n# if needed\nif [[ -f \"$PODS_ROOT/../.xcode.env.local\" ]]; then\n source \"$PODS_ROOT/../.xcode.env.local\"\nfi\n\n`\"$NODE_BINARY\" --print \"require('path').dirname(require.resolve('react-native/package.json')) + '/scripts/react-native-xcode.sh'\"`\n\n";
|
||||
};
|
||||
08A4A3CD28434E44B6B9DE2E /* [CP] Check Pods Manifest.lock */ = {
|
||||
isa = PBXShellScriptBuildPhase;
|
||||
buildActionMask = 2147483647;
|
||||
files = (
|
||||
);
|
||||
inputFileListPaths = (
|
||||
);
|
||||
inputPaths = (
|
||||
"${PODS_PODFILE_DIR_PATH}/Podfile.lock",
|
||||
"${PODS_ROOT}/Manifest.lock",
|
||||
);
|
||||
name = "[CP] Check Pods Manifest.lock";
|
||||
outputFileListPaths = (
|
||||
);
|
||||
outputPaths = (
|
||||
"$(DERIVED_FILE_DIR)/Pods-DTDesignSystemShowcase-checkManifestLockResult.txt",
|
||||
);
|
||||
runOnlyForDeploymentPostprocessing = 0;
|
||||
shellPath = /bin/sh;
|
||||
shellScript = "diff \"${PODS_PODFILE_DIR_PATH}/Podfile.lock\" \"${PODS_ROOT}/Manifest.lock\" > /dev/null\nif [ $? != 0 ] ; then\n # print error to STDERR\n echo \"error: The sandbox is not in sync with the Podfile.lock. Run 'pod install' or update your CocoaPods installation.\" >&2\n exit 1\nfi\n# This output is used by Xcode 'outputs' to avoid re-running this script phase.\necho \"SUCCESS\" > \"${SCRIPT_OUTPUT_FILE_0}\"\n";
|
||||
showEnvVarsInLog = 0;
|
||||
};
|
||||
800E24972A6A228C8D4807E9 /* [CP] Copy Pods Resources */ = {
|
||||
isa = PBXShellScriptBuildPhase;
|
||||
buildActionMask = 2147483647;
|
||||
files = (
|
||||
);
|
||||
inputPaths = (
|
||||
"${PODS_ROOT}/Target Support Files/Pods-DTDesignSystemShowcase/Pods-DTDesignSystemShowcase-resources.sh",
|
||||
"${PODS_CONFIGURATION_BUILD_DIR}/EXConstants/EXConstants.bundle",
|
||||
"${PODS_CONFIGURATION_BUILD_DIR}/EXUpdates/EXUpdates.bundle",
|
||||
"${PODS_CONFIGURATION_BUILD_DIR}/React-Core/RCTI18nStrings.bundle",
|
||||
);
|
||||
name = "[CP] Copy Pods Resources";
|
||||
outputPaths = (
|
||||
"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/EXConstants.bundle",
|
||||
"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/EXUpdates.bundle",
|
||||
"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/RCTI18nStrings.bundle",
|
||||
);
|
||||
runOnlyForDeploymentPostprocessing = 0;
|
||||
shellPath = /bin/sh;
|
||||
shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-DTDesignSystemShowcase/Pods-DTDesignSystemShowcase-resources.sh\"\n";
|
||||
showEnvVarsInLog = 0;
|
||||
};
|
||||
/* End PBXShellScriptBuildPhase section */
|
||||
|
||||
/* Begin PBXSourcesBuildPhase section */
|
||||
13B07F871A680F5B00A75B9A /* Sources */ = {
|
||||
isa = PBXSourcesBuildPhase;
|
||||
buildActionMask = 2147483647;
|
||||
files = (
|
||||
F11748422D0307B40044C1D9 /* AppDelegate.swift in Sources */,
|
||||
);
|
||||
runOnlyForDeploymentPostprocessing = 0;
|
||||
};
|
||||
/* End PBXSourcesBuildPhase section */
|
||||
|
||||
/* Begin XCBuildConfiguration section */
|
||||
13B07F941A680F5B00A75B9A /* Debug */ = {
|
||||
isa = XCBuildConfiguration;
|
||||
buildSettings = {
|
||||
ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
|
||||
CLANG_ENABLE_MODULES = YES;
|
||||
CURRENT_PROJECT_VERSION = 1;
|
||||
ENABLE_BITCODE = NO;
|
||||
GCC_PREPROCESSOR_DEFINITIONS = (
|
||||
"$(inherited)",
|
||||
"FB_SONARKIT_ENABLED=1",
|
||||
);
|
||||
INFOPLIST_FILE = DTDesignSystemShowcase/Info.plist;
|
||||
IPHONEOS_DEPLOYMENT_TARGET = 15.1;
|
||||
LD_RUNPATH_SEARCH_PATHS = (
|
||||
"$(inherited)",
|
||||
"@executable_path/Frameworks",
|
||||
);
|
||||
MARKETING_VERSION = 1.0;
|
||||
OTHER_LDFLAGS = (
|
||||
"$(inherited)",
|
||||
"-ObjC",
|
||||
"-lc++",
|
||||
);
|
||||
PRODUCT_BUNDLE_IDENTIFIER = "com.dangerousthings.showcase";
|
||||
PRODUCT_NAME = "DTDesignSystemShowcase";
|
||||
SWIFT_OBJC_BRIDGING_HEADER = "DTDesignSystemShowcase/DTDesignSystemShowcase-Bridging-Header.h";
|
||||
SWIFT_OPTIMIZATION_LEVEL = "-Onone";
|
||||
SWIFT_VERSION = 5.0;
|
||||
VERSIONING_SYSTEM = "apple-generic";
|
||||
TARGETED_DEVICE_FAMILY = "1,2";
|
||||
CODE_SIGN_ENTITLEMENTS = DTDesignSystemShowcase/DTDesignSystemShowcase.entitlements;
|
||||
};
|
||||
name = Debug;
|
||||
};
|
||||
13B07F951A680F5B00A75B9A /* Release */ = {
|
||||
isa = XCBuildConfiguration;
|
||||
buildSettings = {
|
||||
ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
|
||||
CLANG_ENABLE_MODULES = YES;
|
||||
CURRENT_PROJECT_VERSION = 1;
|
||||
INFOPLIST_FILE = DTDesignSystemShowcase/Info.plist;
|
||||
IPHONEOS_DEPLOYMENT_TARGET = 15.1;
|
||||
LD_RUNPATH_SEARCH_PATHS = (
|
||||
"$(inherited)",
|
||||
"@executable_path/Frameworks",
|
||||
);
|
||||
MARKETING_VERSION = 1.0;
|
||||
OTHER_LDFLAGS = (
|
||||
"$(inherited)",
|
||||
"-ObjC",
|
||||
"-lc++",
|
||||
);
|
||||
PRODUCT_BUNDLE_IDENTIFIER = "com.dangerousthings.showcase";
|
||||
PRODUCT_NAME = "DTDesignSystemShowcase";
|
||||
SWIFT_OBJC_BRIDGING_HEADER = "DTDesignSystemShowcase/DTDesignSystemShowcase-Bridging-Header.h";
|
||||
SWIFT_VERSION = 5.0;
|
||||
VERSIONING_SYSTEM = "apple-generic";
|
||||
TARGETED_DEVICE_FAMILY = "1,2";
|
||||
CODE_SIGN_ENTITLEMENTS = DTDesignSystemShowcase/DTDesignSystemShowcase.entitlements;
|
||||
};
|
||||
name = Release;
|
||||
};
|
||||
83CBBA201A601CBA00E9B192 /* Debug */ = {
|
||||
isa = XCBuildConfiguration;
|
||||
buildSettings = {
|
||||
ALWAYS_SEARCH_USER_PATHS = NO;
|
||||
CLANG_ANALYZER_LOCALIZABILITY_NONLOCALIZED = YES;
|
||||
CLANG_CXX_LANGUAGE_STANDARD = "c++20";
|
||||
CLANG_CXX_LIBRARY = "libc++";
|
||||
CLANG_ENABLE_MODULES = YES;
|
||||
CLANG_ENABLE_OBJC_ARC = YES;
|
||||
CLANG_WARN_BLOCK_CAPTURE_AUTORELEASING = YES;
|
||||
CLANG_WARN_BOOL_CONVERSION = YES;
|
||||
CLANG_WARN_COMMA = YES;
|
||||
CLANG_WARN_CONSTANT_CONVERSION = YES;
|
||||
CLANG_WARN_DEPRECATED_OBJC_IMPLEMENTATIONS = YES;
|
||||
CLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR;
|
||||
CLANG_WARN_EMPTY_BODY = YES;
|
||||
CLANG_WARN_ENUM_CONVERSION = YES;
|
||||
CLANG_WARN_INFINITE_RECURSION = YES;
|
||||
CLANG_WARN_INT_CONVERSION = YES;
|
||||
CLANG_WARN_NON_LITERAL_NULL_CONVERSION = YES;
|
||||
CLANG_WARN_OBJC_IMPLICIT_RETAIN_SELF = YES;
|
||||
CLANG_WARN_OBJC_LITERAL_CONVERSION = YES;
|
||||
CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR;
|
||||
CLANG_WARN_RANGE_LOOP_ANALYSIS = YES;
|
||||
CLANG_WARN_STRICT_PROTOTYPES = YES;
|
||||
CLANG_WARN_SUSPICIOUS_MOVE = YES;
|
||||
CLANG_WARN_UNREACHABLE_CODE = YES;
|
||||
CLANG_WARN__DUPLICATE_METHOD_MATCH = YES;
|
||||
"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer";
|
||||
COPY_PHASE_STRIP = NO;
|
||||
ENABLE_STRICT_OBJC_MSGSEND = YES;
|
||||
ENABLE_TESTABILITY = YES;
|
||||
GCC_C_LANGUAGE_STANDARD = gnu99;
|
||||
GCC_DYNAMIC_NO_PIC = NO;
|
||||
GCC_NO_COMMON_BLOCKS = YES;
|
||||
GCC_OPTIMIZATION_LEVEL = 0;
|
||||
GCC_PREPROCESSOR_DEFINITIONS = (
|
||||
"DEBUG=1",
|
||||
"$(inherited)",
|
||||
);
|
||||
GCC_SYMBOLS_PRIVATE_EXTERN = NO;
|
||||
GCC_WARN_64_TO_32_BIT_CONVERSION = YES;
|
||||
GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR;
|
||||
GCC_WARN_UNDECLARED_SELECTOR = YES;
|
||||
GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;
|
||||
GCC_WARN_UNUSED_FUNCTION = YES;
|
||||
GCC_WARN_UNUSED_VARIABLE = YES;
|
||||
IPHONEOS_DEPLOYMENT_TARGET = 15.1;
|
||||
LD_RUNPATH_SEARCH_PATHS = (
|
||||
/usr/lib/swift,
|
||||
"$(inherited)",
|
||||
);
|
||||
LIBRARY_SEARCH_PATHS = "\"$(inherited)\"";
|
||||
MTL_ENABLE_DEBUG_INFO = YES;
|
||||
ONLY_ACTIVE_ARCH = YES;
|
||||
SDKROOT = iphoneos;
|
||||
};
|
||||
name = Debug;
|
||||
};
|
||||
83CBBA211A601CBA00E9B192 /* Release */ = {
|
||||
isa = XCBuildConfiguration;
|
||||
buildSettings = {
|
||||
ALWAYS_SEARCH_USER_PATHS = NO;
|
||||
CLANG_ANALYZER_LOCALIZABILITY_NONLOCALIZED = YES;
|
||||
CLANG_CXX_LANGUAGE_STANDARD = "c++20";
|
||||
CLANG_CXX_LIBRARY = "libc++";
|
||||
CLANG_ENABLE_MODULES = YES;
|
||||
CLANG_ENABLE_OBJC_ARC = YES;
|
||||
CLANG_WARN_BLOCK_CAPTURE_AUTORELEASING = YES;
|
||||
CLANG_WARN_BOOL_CONVERSION = YES;
|
||||
CLANG_WARN_COMMA = YES;
|
||||
CLANG_WARN_CONSTANT_CONVERSION = YES;
|
||||
CLANG_WARN_DEPRECATED_OBJC_IMPLEMENTATIONS = YES;
|
||||
CLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR;
|
||||
CLANG_WARN_EMPTY_BODY = YES;
|
||||
CLANG_WARN_ENUM_CONVERSION = YES;
|
||||
CLANG_WARN_INFINITE_RECURSION = YES;
|
||||
CLANG_WARN_INT_CONVERSION = YES;
|
||||
CLANG_WARN_NON_LITERAL_NULL_CONVERSION = YES;
|
||||
CLANG_WARN_OBJC_IMPLICIT_RETAIN_SELF = YES;
|
||||
CLANG_WARN_OBJC_LITERAL_CONVERSION = YES;
|
||||
CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR;
|
||||
CLANG_WARN_RANGE_LOOP_ANALYSIS = YES;
|
||||
CLANG_WARN_STRICT_PROTOTYPES = YES;
|
||||
CLANG_WARN_SUSPICIOUS_MOVE = YES;
|
||||
CLANG_WARN_UNREACHABLE_CODE = YES;
|
||||
CLANG_WARN__DUPLICATE_METHOD_MATCH = YES;
|
||||
"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer";
|
||||
COPY_PHASE_STRIP = YES;
|
||||
ENABLE_NS_ASSERTIONS = NO;
|
||||
ENABLE_STRICT_OBJC_MSGSEND = YES;
|
||||
GCC_C_LANGUAGE_STANDARD = gnu99;
|
||||
GCC_NO_COMMON_BLOCKS = YES;
|
||||
GCC_WARN_64_TO_32_BIT_CONVERSION = YES;
|
||||
GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR;
|
||||
GCC_WARN_UNDECLARED_SELECTOR = YES;
|
||||
GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;
|
||||
GCC_WARN_UNUSED_FUNCTION = YES;
|
||||
GCC_WARN_UNUSED_VARIABLE = YES;
|
||||
IPHONEOS_DEPLOYMENT_TARGET = 15.1;
|
||||
LD_RUNPATH_SEARCH_PATHS = (
|
||||
/usr/lib/swift,
|
||||
"$(inherited)",
|
||||
);
|
||||
LIBRARY_SEARCH_PATHS = "\"$(inherited)\"";
|
||||
MTL_ENABLE_DEBUG_INFO = NO;
|
||||
SDKROOT = iphoneos;
|
||||
VALIDATE_PRODUCT = YES;
|
||||
};
|
||||
name = Release;
|
||||
};
|
||||
/* End XCBuildConfiguration section */
|
||||
|
||||
/* Begin XCConfigurationList section */
|
||||
13B07F931A680F5B00A75B9A /* Build configuration list for PBXNativeTarget "DTDesignSystemShowcase" */ = {
|
||||
isa = XCConfigurationList;
|
||||
buildConfigurations = (
|
||||
13B07F941A680F5B00A75B9A /* Debug */,
|
||||
13B07F951A680F5B00A75B9A /* Release */,
|
||||
);
|
||||
defaultConfigurationIsVisible = 0;
|
||||
defaultConfigurationName = Release;
|
||||
};
|
||||
83CBB9FA1A601CBA00E9B192 /* Build configuration list for PBXProject "DTDesignSystemShowcase" */ = {
|
||||
isa = XCConfigurationList;
|
||||
buildConfigurations = (
|
||||
83CBBA201A601CBA00E9B192 /* Debug */,
|
||||
83CBBA211A601CBA00E9B192 /* Release */,
|
||||
);
|
||||
defaultConfigurationIsVisible = 0;
|
||||
defaultConfigurationName = Release;
|
||||
};
|
||||
/* End XCConfigurationList section */
|
||||
};
|
||||
rootObject = 83CBB9F71A601CBA00E9B192 /* Project object */;
|
||||
}
|
||||
@@ -0,0 +1,88 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<Scheme
|
||||
LastUpgradeVersion = "1130"
|
||||
version = "1.3">
|
||||
<BuildAction
|
||||
parallelizeBuildables = "YES"
|
||||
buildImplicitDependencies = "YES">
|
||||
<BuildActionEntries>
|
||||
<BuildActionEntry
|
||||
buildForTesting = "YES"
|
||||
buildForRunning = "YES"
|
||||
buildForProfiling = "YES"
|
||||
buildForArchiving = "YES"
|
||||
buildForAnalyzing = "YES">
|
||||
<BuildableReference
|
||||
BuildableIdentifier = "primary"
|
||||
BlueprintIdentifier = "13B07F861A680F5B00A75B9A"
|
||||
BuildableName = "DTDesignSystemShowcase.app"
|
||||
BlueprintName = "DTDesignSystemShowcase"
|
||||
ReferencedContainer = "container:DTDesignSystemShowcase.xcodeproj">
|
||||
</BuildableReference>
|
||||
</BuildActionEntry>
|
||||
</BuildActionEntries>
|
||||
</BuildAction>
|
||||
<TestAction
|
||||
buildConfiguration = "Debug"
|
||||
selectedDebuggerIdentifier = "Xcode.DebuggerFoundation.Debugger.LLDB"
|
||||
selectedLauncherIdentifier = "Xcode.DebuggerFoundation.Launcher.LLDB"
|
||||
shouldUseLaunchSchemeArgsEnv = "YES">
|
||||
<Testables>
|
||||
<TestableReference
|
||||
skipped = "NO">
|
||||
<BuildableReference
|
||||
BuildableIdentifier = "primary"
|
||||
BlueprintIdentifier = "00E356ED1AD99517003FC87E"
|
||||
BuildableName = "DTDesignSystemShowcaseTests.xctest"
|
||||
BlueprintName = "DTDesignSystemShowcaseTests"
|
||||
ReferencedContainer = "container:DTDesignSystemShowcase.xcodeproj">
|
||||
</BuildableReference>
|
||||
</TestableReference>
|
||||
</Testables>
|
||||
</TestAction>
|
||||
<LaunchAction
|
||||
buildConfiguration = "Debug"
|
||||
selectedDebuggerIdentifier = "Xcode.DebuggerFoundation.Debugger.LLDB"
|
||||
selectedLauncherIdentifier = "Xcode.DebuggerFoundation.Launcher.LLDB"
|
||||
launchStyle = "0"
|
||||
useCustomWorkingDirectory = "NO"
|
||||
ignoresPersistentStateOnLaunch = "NO"
|
||||
debugDocumentVersioning = "YES"
|
||||
debugServiceExtension = "internal"
|
||||
allowLocationSimulation = "YES">
|
||||
<BuildableProductRunnable
|
||||
runnableDebuggingMode = "0">
|
||||
<BuildableReference
|
||||
BuildableIdentifier = "primary"
|
||||
BlueprintIdentifier = "13B07F861A680F5B00A75B9A"
|
||||
BuildableName = "DTDesignSystemShowcase.app"
|
||||
BlueprintName = "DTDesignSystemShowcase"
|
||||
ReferencedContainer = "container:DTDesignSystemShowcase.xcodeproj">
|
||||
</BuildableReference>
|
||||
</BuildableProductRunnable>
|
||||
</LaunchAction>
|
||||
<ProfileAction
|
||||
buildConfiguration = "Release"
|
||||
shouldUseLaunchSchemeArgsEnv = "YES"
|
||||
savedToolIdentifier = ""
|
||||
useCustomWorkingDirectory = "NO"
|
||||
debugDocumentVersioning = "YES">
|
||||
<BuildableProductRunnable
|
||||
runnableDebuggingMode = "0">
|
||||
<BuildableReference
|
||||
BuildableIdentifier = "primary"
|
||||
BlueprintIdentifier = "13B07F861A680F5B00A75B9A"
|
||||
BuildableName = "DTDesignSystemShowcase.app"
|
||||
BlueprintName = "DTDesignSystemShowcase"
|
||||
ReferencedContainer = "container:DTDesignSystemShowcase.xcodeproj">
|
||||
</BuildableReference>
|
||||
</BuildableProductRunnable>
|
||||
</ProfileAction>
|
||||
<AnalyzeAction
|
||||
buildConfiguration = "Debug">
|
||||
</AnalyzeAction>
|
||||
<ArchiveAction
|
||||
buildConfiguration = "Release"
|
||||
revealArchiveInOrganizer = "YES">
|
||||
</ArchiveAction>
|
||||
</Scheme>
|
||||
@@ -0,0 +1,70 @@
|
||||
import Expo
|
||||
import React
|
||||
import ReactAppDependencyProvider
|
||||
|
||||
@UIApplicationMain
|
||||
public class AppDelegate: ExpoAppDelegate {
|
||||
var window: UIWindow?
|
||||
|
||||
var reactNativeDelegate: ExpoReactNativeFactoryDelegate?
|
||||
var reactNativeFactory: RCTReactNativeFactory?
|
||||
|
||||
public override func application(
|
||||
_ application: UIApplication,
|
||||
didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]? = nil
|
||||
) -> Bool {
|
||||
let delegate = ReactNativeDelegate()
|
||||
let factory = ExpoReactNativeFactory(delegate: delegate)
|
||||
delegate.dependencyProvider = RCTAppDependencyProvider()
|
||||
|
||||
reactNativeDelegate = delegate
|
||||
reactNativeFactory = factory
|
||||
bindReactNativeFactory(factory)
|
||||
|
||||
#if os(iOS) || os(tvOS)
|
||||
window = UIWindow(frame: UIScreen.main.bounds)
|
||||
factory.startReactNative(
|
||||
withModuleName: "main",
|
||||
in: window,
|
||||
launchOptions: launchOptions)
|
||||
#endif
|
||||
|
||||
return super.application(application, didFinishLaunchingWithOptions: launchOptions)
|
||||
}
|
||||
|
||||
// Linking API
|
||||
public override func application(
|
||||
_ app: UIApplication,
|
||||
open url: URL,
|
||||
options: [UIApplication.OpenURLOptionsKey: Any] = [:]
|
||||
) -> Bool {
|
||||
return super.application(app, open: url, options: options) || RCTLinkingManager.application(app, open: url, options: options)
|
||||
}
|
||||
|
||||
// Universal Links
|
||||
public override func application(
|
||||
_ application: UIApplication,
|
||||
continue userActivity: NSUserActivity,
|
||||
restorationHandler: @escaping ([UIUserActivityRestoring]?) -> Void
|
||||
) -> Bool {
|
||||
let result = RCTLinkingManager.application(application, continue: userActivity, restorationHandler: restorationHandler)
|
||||
return super.application(application, continue: userActivity, restorationHandler: restorationHandler) || result
|
||||
}
|
||||
}
|
||||
|
||||
class ReactNativeDelegate: ExpoReactNativeFactoryDelegate {
|
||||
// Extension point for config-plugins
|
||||
|
||||
override func sourceURL(for bridge: RCTBridge) -> URL? {
|
||||
// needed to return the correct URL for expo-dev-client.
|
||||
bridge.bundleURL ?? bundleURL()
|
||||
}
|
||||
|
||||
override func bundleURL() -> URL? {
|
||||
#if DEBUG
|
||||
return RCTBundleURLProvider.sharedSettings().jsBundleURL(forBundleRoot: ".expo/.virtual-metro-entry")
|
||||
#else
|
||||
return Bundle.main.url(forResource: "main", withExtension: "jsbundle")
|
||||
#endif
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
//
|
||||
// Use this file to import your target's public headers that you would like to expose to Swift.
|
||||
//
|
||||
@@ -0,0 +1,5 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
|
||||
<plist version="1.0">
|
||||
<dict/>
|
||||
</plist>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 5.7 KiB |
@@ -0,0 +1,14 @@
|
||||
{
|
||||
"images": [
|
||||
{
|
||||
"filename": "App-Icon-1024x1024@1x.png",
|
||||
"idiom": "universal",
|
||||
"platform": "ios",
|
||||
"size": "1024x1024"
|
||||
}
|
||||
],
|
||||
"info": {
|
||||
"version": 1,
|
||||
"author": "expo"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"info" : {
|
||||
"version" : 1,
|
||||
"author" : "expo"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
{
|
||||
"colors": [
|
||||
{
|
||||
"color": {
|
||||
"components": {
|
||||
"alpha": "1.000",
|
||||
"blue": "0.00000000000000",
|
||||
"green": "0.00000000000000",
|
||||
"red": "0.00000000000000"
|
||||
},
|
||||
"color-space": "srgb"
|
||||
},
|
||||
"idiom": "universal"
|
||||
}
|
||||
],
|
||||
"info": {
|
||||
"version": 1,
|
||||
"author": "expo"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,76 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
|
||||
<plist version="1.0">
|
||||
<dict>
|
||||
<key>CADisableMinimumFrameDurationOnPhone</key>
|
||||
<true/>
|
||||
<key>CFBundleDevelopmentRegion</key>
|
||||
<string>$(DEVELOPMENT_LANGUAGE)</string>
|
||||
<key>CFBundleDisplayName</key>
|
||||
<string>DT Design System Showcase</string>
|
||||
<key>CFBundleExecutable</key>
|
||||
<string>$(EXECUTABLE_NAME)</string>
|
||||
<key>CFBundleIdentifier</key>
|
||||
<string>$(PRODUCT_BUNDLE_IDENTIFIER)</string>
|
||||
<key>CFBundleInfoDictionaryVersion</key>
|
||||
<string>6.0</string>
|
||||
<key>CFBundleName</key>
|
||||
<string>$(PRODUCT_NAME)</string>
|
||||
<key>CFBundlePackageType</key>
|
||||
<string>$(PRODUCT_BUNDLE_PACKAGE_TYPE)</string>
|
||||
<key>CFBundleShortVersionString</key>
|
||||
<string>1.0.0</string>
|
||||
<key>CFBundleSignature</key>
|
||||
<string>????</string>
|
||||
<key>CFBundleURLTypes</key>
|
||||
<array>
|
||||
<dict>
|
||||
<key>CFBundleURLSchemes</key>
|
||||
<array>
|
||||
<string>com.dangerousthings.showcase</string>
|
||||
</array>
|
||||
</dict>
|
||||
</array>
|
||||
<key>CFBundleVersion</key>
|
||||
<string>1</string>
|
||||
<key>LSMinimumSystemVersion</key>
|
||||
<string>12.0</string>
|
||||
<key>LSRequiresIPhoneOS</key>
|
||||
<true/>
|
||||
<key>NSAppTransportSecurity</key>
|
||||
<dict>
|
||||
<key>NSAllowsArbitraryLoads</key>
|
||||
<false/>
|
||||
<key>NSAllowsLocalNetworking</key>
|
||||
<true/>
|
||||
</dict>
|
||||
<key>RCTNewArchEnabled</key>
|
||||
<true/>
|
||||
<key>UILaunchStoryboardName</key>
|
||||
<string>SplashScreen</string>
|
||||
<key>UIRequiredDeviceCapabilities</key>
|
||||
<array>
|
||||
<string>arm64</string>
|
||||
</array>
|
||||
<key>UIRequiresFullScreen</key>
|
||||
<false/>
|
||||
<key>UIStatusBarStyle</key>
|
||||
<string>UIStatusBarStyleDefault</string>
|
||||
<key>UISupportedInterfaceOrientations</key>
|
||||
<array>
|
||||
<string>UIInterfaceOrientationPortrait</string>
|
||||
<string>UIInterfaceOrientationPortraitUpsideDown</string>
|
||||
</array>
|
||||
<key>UISupportedInterfaceOrientations~ipad</key>
|
||||
<array>
|
||||
<string>UIInterfaceOrientationPortrait</string>
|
||||
<string>UIInterfaceOrientationPortraitUpsideDown</string>
|
||||
<string>UIInterfaceOrientationLandscapeLeft</string>
|
||||
<string>UIInterfaceOrientationLandscapeRight</string>
|
||||
</array>
|
||||
<key>UIUserInterfaceStyle</key>
|
||||
<string>Dark</string>
|
||||
<key>UIViewControllerBasedStatusBarAppearance</key>
|
||||
<false/>
|
||||
</dict>
|
||||
</plist>
|
||||
@@ -0,0 +1,39 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="24093.7" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" launchScreen="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES" initialViewController="EXPO-VIEWCONTROLLER-1">
|
||||
<device id="retina6_12" orientation="portrait" appearance="light"/>
|
||||
<dependencies>
|
||||
<deployment identifier="iOS"/>
|
||||
<plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="24053.1"/>
|
||||
<capability name="Named colors" minToolsVersion="9.0"/>
|
||||
<capability name="Safe area layout guides" minToolsVersion="9.0"/>
|
||||
<capability name="System colors in document resources" minToolsVersion="11.0"/>
|
||||
<capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
|
||||
</dependencies>
|
||||
<scenes>
|
||||
<scene sceneID="EXPO-SCENE-1">
|
||||
<objects>
|
||||
<viewController storyboardIdentifier="SplashScreenViewController" id="EXPO-VIEWCONTROLLER-1" sceneMemberID="viewController">
|
||||
<view key="view" userInteractionEnabled="NO" contentMode="scaleToFill" insetsLayoutMarginsFromSafeArea="NO" id="EXPO-ContainerView" userLabel="ContainerView">
|
||||
<rect key="frame" x="0.0" y="0.0" width="393" height="852"/>
|
||||
<autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
|
||||
<subviews/>
|
||||
<viewLayoutGuide key="safeArea" id="Rmq-lb-GrQ"/>
|
||||
<constraints>
|
||||
<constraint firstItem="EXPO-SplashScreen" firstAttribute="centerY" secondItem="EXPO-ContainerView" secondAttribute="centerY" id="0VC-Wk-OaO"/>
|
||||
<constraint firstItem="EXPO-SplashScreen" firstAttribute="centerX" secondItem="EXPO-ContainerView" secondAttribute="centerX" id="zR4-NK-mVN"/>
|
||||
</constraints>
|
||||
<color key="backgroundColor" systemColor="systemBackgroundColor"/>
|
||||
</view>
|
||||
</viewController>
|
||||
<placeholder placeholderIdentifier="IBFirstResponder" id="EXPO-PLACEHOLDER-1" userLabel="First Responder" sceneMemberID="firstResponder"/>
|
||||
</objects>
|
||||
<point key="canvasLocation" x="0.0" y="0.0"/>
|
||||
</scene>
|
||||
</scenes>
|
||||
<resources>
|
||||
<image name="SplashScreenLogo" width="100" height="90.333335876464844"/>
|
||||
<systemColor name="systemBackgroundColor">
|
||||
<color white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
|
||||
</systemColor>
|
||||
</resources>
|
||||
</document>
|
||||
@@ -0,0 +1,12 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
|
||||
<plist version="1.0">
|
||||
<dict>
|
||||
<key>EXUpdatesCheckOnLaunch</key>
|
||||
<string>ALWAYS</string>
|
||||
<key>EXUpdatesEnabled</key>
|
||||
<false/>
|
||||
<key>EXUpdatesLaunchWaitMs</key>
|
||||
<integer>0</integer>
|
||||
</dict>
|
||||
</plist>
|
||||
63
packages/showcase/mobile/ios/Podfile
Normal file
63
packages/showcase/mobile/ios/Podfile
Normal file
@@ -0,0 +1,63 @@
|
||||
require File.join(File.dirname(`node --print "require.resolve('expo/package.json')"`), "scripts/autolinking")
|
||||
require File.join(File.dirname(`node --print "require.resolve('react-native/package.json')"`), "scripts/react_native_pods")
|
||||
|
||||
require 'json'
|
||||
podfile_properties = JSON.parse(File.read(File.join(__dir__, 'Podfile.properties.json'))) rescue {}
|
||||
|
||||
def ccache_enabled?(podfile_properties)
|
||||
# Environment variable takes precedence
|
||||
return ENV['USE_CCACHE'] == '1' if ENV['USE_CCACHE']
|
||||
|
||||
# Fall back to Podfile properties
|
||||
podfile_properties['apple.ccacheEnabled'] == 'true'
|
||||
end
|
||||
|
||||
ENV['RCT_NEW_ARCH_ENABLED'] ||= '0' if podfile_properties['newArchEnabled'] == 'false'
|
||||
ENV['EX_DEV_CLIENT_NETWORK_INSPECTOR'] ||= podfile_properties['EX_DEV_CLIENT_NETWORK_INSPECTOR']
|
||||
ENV['RCT_USE_RN_DEP'] ||= '1' if podfile_properties['ios.buildReactNativeFromSource'] != 'true' && podfile_properties['newArchEnabled'] != 'false'
|
||||
ENV['RCT_USE_PREBUILT_RNCORE'] ||= '1' if podfile_properties['ios.buildReactNativeFromSource'] != 'true' && podfile_properties['newArchEnabled'] != 'false'
|
||||
platform :ios, podfile_properties['ios.deploymentTarget'] || '15.1'
|
||||
|
||||
prepare_react_native_project!
|
||||
|
||||
target 'DTDesignSystemShowcase' do
|
||||
use_expo_modules!
|
||||
|
||||
if ENV['EXPO_USE_COMMUNITY_AUTOLINKING'] == '1'
|
||||
config_command = ['node', '-e', "process.argv=['', '', 'config'];require('@react-native-community/cli').run()"];
|
||||
else
|
||||
config_command = [
|
||||
'node',
|
||||
'--no-warnings',
|
||||
'--eval',
|
||||
'require(\'expo/bin/autolinking\')',
|
||||
'expo-modules-autolinking',
|
||||
'react-native-config',
|
||||
'--json',
|
||||
'--platform',
|
||||
'ios'
|
||||
]
|
||||
end
|
||||
|
||||
config = use_native_modules!(config_command)
|
||||
|
||||
use_frameworks! :linkage => podfile_properties['ios.useFrameworks'].to_sym if podfile_properties['ios.useFrameworks']
|
||||
use_frameworks! :linkage => ENV['USE_FRAMEWORKS'].to_sym if ENV['USE_FRAMEWORKS']
|
||||
|
||||
use_react_native!(
|
||||
:path => config[:reactNativePath],
|
||||
:hermes_enabled => podfile_properties['expo.jsEngine'] == nil || podfile_properties['expo.jsEngine'] == 'hermes',
|
||||
# An absolute path to your application root.
|
||||
:app_path => "#{Pod::Config.instance.installation_root}/..",
|
||||
:privacy_file_aggregation_enabled => podfile_properties['apple.privacyManifestAggregationEnabled'] != 'false',
|
||||
)
|
||||
|
||||
post_install do |installer|
|
||||
react_native_post_install(
|
||||
installer,
|
||||
config[:reactNativePath],
|
||||
:mac_catalyst_enabled => false,
|
||||
:ccache_enabled => ccache_enabled?(podfile_properties),
|
||||
)
|
||||
end
|
||||
end
|
||||
5
packages/showcase/mobile/ios/Podfile.properties.json
Normal file
5
packages/showcase/mobile/ios/Podfile.properties.json
Normal file
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"expo.jsEngine": "hermes",
|
||||
"EX_DEV_CLIENT_NETWORK_INSPECTOR": "true",
|
||||
"newArchEnabled": "true"
|
||||
}
|
||||
27
packages/showcase/mobile/metro.config.js
Normal file
27
packages/showcase/mobile/metro.config.js
Normal file
@@ -0,0 +1,27 @@
|
||||
const { getDefaultConfig } = require('expo/metro-config');
|
||||
const path = require('path');
|
||||
|
||||
const projectRoot = __dirname;
|
||||
const monorepoRoot = path.resolve(projectRoot, '..', '..', '..');
|
||||
|
||||
const config = getDefaultConfig(projectRoot);
|
||||
|
||||
// Watch the monorepo root for live changes to sibling packages
|
||||
config.watchFolders = [monorepoRoot];
|
||||
|
||||
// Resolve node_modules from both the project and monorepo root (hoisted)
|
||||
config.resolver.nodeModulesPaths = [
|
||||
path.resolve(projectRoot, 'node_modules'),
|
||||
path.resolve(monorepoRoot, 'node_modules'),
|
||||
];
|
||||
|
||||
// Block sibling packages' node_modules to prevent duplicate native modules
|
||||
const packagesDir = path.join(monorepoRoot, 'packages');
|
||||
const escapedPath = packagesDir.replace(/[/\\]/g, '[/\\\\]');
|
||||
config.resolver.blockList = [
|
||||
new RegExp(
|
||||
`^${escapedPath}[/\\\\](?!showcase[/\\\\]mobile)[^/\\\\]+[/\\\\]node_modules[/\\\\].*$`
|
||||
),
|
||||
];
|
||||
|
||||
module.exports = config;
|
||||
41
packages/showcase/mobile/package.json
Normal file
41
packages/showcase/mobile/package.json
Normal file
@@ -0,0 +1,41 @@
|
||||
{
|
||||
"name": "@dangerousthings/showcase-mobile",
|
||||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"main": "./index.js",
|
||||
"scripts": {
|
||||
"start": "expo start",
|
||||
"android": "expo run:android",
|
||||
"ios": "expo run:ios",
|
||||
"build": "echo 'No build step for Expo dev'",
|
||||
"prebuild": "expo prebuild --clean",
|
||||
"build:android": "expo prebuild --clean --platform android && cd android && ./gradlew assembleRelease && echo 'APK: android/app/build/outputs/apk/release/'",
|
||||
"build:android:debug": "expo prebuild --clean --platform android && cd android && ./gradlew assembleDebug && echo 'Debug APK (requires Metro): android/app/build/outputs/apk/debug/'",
|
||||
"build:ios": "expo prebuild --clean --platform ios && cd ios && xcodebuild -workspace DtShowcase.xcworkspace -scheme DtShowcase -configuration Release -sdk iphoneos -archivePath build/DtShowcase.xcarchive archive",
|
||||
"build:ios:debug": "expo prebuild --clean --platform ios && cd ios && xcodebuild -workspace DtShowcase.xcworkspace -scheme DtShowcase -configuration Debug -sdk iphonesimulator",
|
||||
"build:android:cloud": "eas build -p android --profile preview",
|
||||
"build:ios:cloud": "eas build -p ios --profile preview",
|
||||
"typecheck": "tsc --noEmit"
|
||||
},
|
||||
"dependencies": {
|
||||
"@dangerousthings/react-native": "*",
|
||||
"@dangerousthings/tokens": "*",
|
||||
"@react-navigation/native": "^7.1.27",
|
||||
"@react-navigation/native-stack": "^7.9.1",
|
||||
"babel-preset-expo": "^54.0.10",
|
||||
"expo": "~54.0.32",
|
||||
"expo-font": "~14.0.11",
|
||||
"expo-status-bar": "^3.0.9",
|
||||
"react": "19.1.0",
|
||||
"react-native": "0.81.5",
|
||||
"react-native-paper": "^5.14.5",
|
||||
"react-native-safe-area-context": "~5.6.0",
|
||||
"react-native-screens": "~4.16.0",
|
||||
"react-native-svg": "15.12.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.25.2",
|
||||
"@types/react": "~19.1.0",
|
||||
"typescript": "^5.8.3"
|
||||
}
|
||||
}
|
||||
42
packages/showcase/mobile/src/brand/BrandContext.tsx
Normal file
42
packages/showcase/mobile/src/brand/BrandContext.tsx
Normal file
@@ -0,0 +1,42 @@
|
||||
import React, { createContext, useContext, useState, useMemo, ReactNode } from 'react';
|
||||
import { brands, themes } from '@dangerousthings/tokens';
|
||||
import type { ThemeBrand, BrandTokens } from '@dangerousthings/tokens';
|
||||
import { buildThemeFromBrand } from './buildTheme';
|
||||
import type { DTExtendedTheme } from '@dangerousthings/react-native';
|
||||
|
||||
interface BrandContextValue {
|
||||
brandId: ThemeBrand;
|
||||
brand: BrandTokens;
|
||||
theme: DTExtendedTheme;
|
||||
setBrand: (id: ThemeBrand) => void;
|
||||
availableBrands: typeof themes;
|
||||
}
|
||||
|
||||
const BrandContext = createContext<BrandContextValue>(null!);
|
||||
|
||||
export function useBrand() {
|
||||
return useContext(BrandContext);
|
||||
}
|
||||
|
||||
interface BrandProviderProps {
|
||||
children: ReactNode;
|
||||
initialBrand?: ThemeBrand;
|
||||
}
|
||||
|
||||
export function BrandProvider({ children, initialBrand = 'dt' }: BrandProviderProps) {
|
||||
const [brandId, setBrandId] = useState<ThemeBrand>(initialBrand);
|
||||
|
||||
const value = useMemo(() => {
|
||||
const brand = brands[brandId] as BrandTokens;
|
||||
const theme = buildThemeFromBrand(brand);
|
||||
return {
|
||||
brandId,
|
||||
brand,
|
||||
theme,
|
||||
setBrand: setBrandId,
|
||||
availableBrands: themes,
|
||||
};
|
||||
}, [brandId]);
|
||||
|
||||
return <BrandContext.Provider value={value}>{children}</BrandContext.Provider>;
|
||||
}
|
||||
68
packages/showcase/mobile/src/brand/buildTheme.ts
Normal file
68
packages/showcase/mobile/src/brand/buildTheme.ts
Normal file
@@ -0,0 +1,68 @@
|
||||
import { MD3DarkTheme } from 'react-native-paper';
|
||||
import type { BrandTokens } from '@dangerousthings/tokens';
|
||||
import type { DTExtendedTheme } from '@dangerousthings/react-native';
|
||||
|
||||
export function buildThemeFromBrand(brand: BrandTokens): DTExtendedTheme {
|
||||
const colors = brand.dark;
|
||||
|
||||
return {
|
||||
...MD3DarkTheme,
|
||||
dark: true,
|
||||
roundness: brand.shape.radiusSm === '0' || brand.shape.radiusSm === '0px' ? 0 : 4,
|
||||
fonts: MD3DarkTheme.fonts,
|
||||
colors: {
|
||||
...MD3DarkTheme.colors,
|
||||
primary: colors.primary,
|
||||
onPrimary: colors.bg,
|
||||
primaryContainer: colors.primaryDim,
|
||||
onPrimaryContainer: colors.bg,
|
||||
secondary: colors.secondary,
|
||||
onSecondary: colors.bg,
|
||||
secondaryContainer: colors.secondary,
|
||||
onSecondaryContainer: colors.bg,
|
||||
tertiary: colors.other,
|
||||
onTertiary: colors.bg,
|
||||
tertiaryContainer: colors.other,
|
||||
onTertiaryContainer: colors.textPrimary,
|
||||
error: colors.error,
|
||||
onError: colors.bg,
|
||||
errorContainer: colors.error,
|
||||
onErrorContainer: colors.textPrimary,
|
||||
background: colors.bg,
|
||||
onBackground: colors.textPrimary,
|
||||
surface: colors.surface,
|
||||
onSurface: colors.textPrimary,
|
||||
surfaceVariant: colors.surface,
|
||||
onSurfaceVariant: colors.textPrimary,
|
||||
outline: colors.primary,
|
||||
outlineVariant: colors.border,
|
||||
inverseSurface: colors.textPrimary,
|
||||
inverseOnSurface: colors.bg,
|
||||
inversePrimary: colors.primaryDim,
|
||||
shadow: colors.bg,
|
||||
scrim: 'rgba(0,0,0,0.7)',
|
||||
elevation: {
|
||||
level0: 'transparent',
|
||||
level1: colors.surface,
|
||||
level2: colors.surfaceHover,
|
||||
level3: colors.surfaceHover,
|
||||
level4: colors.surfaceHover,
|
||||
level5: colors.surfaceHover,
|
||||
},
|
||||
surfaceDisabled: 'rgba(255,255,255,0.1)',
|
||||
onSurfaceDisabled: 'rgba(255,255,255,0.3)',
|
||||
backdrop: 'rgba(0,0,0,0.7)',
|
||||
},
|
||||
custom: {
|
||||
success: colors.success,
|
||||
warning: colors.warning,
|
||||
modeNormal: colors.primary,
|
||||
modeEmphasis: colors.secondary,
|
||||
modeWarning: colors.error,
|
||||
modeSuccess: colors.success,
|
||||
modeOther: colors.other,
|
||||
border: colors.border,
|
||||
borderEmphasis: colors.secondary,
|
||||
},
|
||||
};
|
||||
}
|
||||
70
packages/showcase/mobile/src/components/BrandSwitcher.tsx
Normal file
70
packages/showcase/mobile/src/components/BrandSwitcher.tsx
Normal file
@@ -0,0 +1,70 @@
|
||||
import React from 'react';
|
||||
import { View, Pressable, StyleSheet } from 'react-native';
|
||||
import { Text } from 'react-native-paper';
|
||||
import { useBrand } from '../brand/BrandContext';
|
||||
import type { ThemeBrand } from '@dangerousthings/tokens';
|
||||
|
||||
const brandLabels: Record<ThemeBrand, string> = {
|
||||
dt: 'DT',
|
||||
classic: 'CLASSIC',
|
||||
};
|
||||
|
||||
const brandColors: Record<ThemeBrand, string> = {
|
||||
dt: '#00FFFF',
|
||||
classic: '#FF00FF',
|
||||
};
|
||||
|
||||
export function BrandSwitcher() {
|
||||
const { brandId, setBrand, availableBrands } = useBrand();
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
{availableBrands.map((def) => {
|
||||
const isActive = def.id === brandId;
|
||||
const color = brandColors[def.id];
|
||||
|
||||
return (
|
||||
<Pressable
|
||||
key={def.id}
|
||||
onPress={() => setBrand(def.id)}
|
||||
style={[
|
||||
styles.chip,
|
||||
{
|
||||
borderColor: color,
|
||||
backgroundColor: isActive ? color : 'transparent',
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Text
|
||||
style={[
|
||||
styles.chipText,
|
||||
{ color: isActive ? '#000000' : color },
|
||||
]}
|
||||
>
|
||||
{brandLabels[def.id]}
|
||||
</Text>
|
||||
</Pressable>
|
||||
);
|
||||
})}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'center',
|
||||
gap: 12,
|
||||
marginVertical: 16,
|
||||
},
|
||||
chip: {
|
||||
paddingHorizontal: 16,
|
||||
paddingVertical: 8,
|
||||
borderWidth: 2,
|
||||
},
|
||||
chipText: {
|
||||
fontSize: 12,
|
||||
fontWeight: '700',
|
||||
letterSpacing: 1,
|
||||
},
|
||||
});
|
||||
21
packages/showcase/mobile/src/components/CodeLabel.tsx
Normal file
21
packages/showcase/mobile/src/components/CodeLabel.tsx
Normal file
@@ -0,0 +1,21 @@
|
||||
import React from 'react';
|
||||
import { StyleSheet } from 'react-native';
|
||||
import { Text } from 'react-native-paper';
|
||||
|
||||
interface CodeLabelProps {
|
||||
text: string;
|
||||
}
|
||||
|
||||
export function CodeLabel({ text }: CodeLabelProps) {
|
||||
return <Text style={styles.code}>{text}</Text>;
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
code: {
|
||||
color: 'rgba(255, 255, 255, 0.35)',
|
||||
fontSize: 10,
|
||||
fontFamily: 'monospace',
|
||||
marginTop: 4,
|
||||
marginBottom: 4,
|
||||
},
|
||||
});
|
||||
19
packages/showcase/mobile/src/components/DemoRow.tsx
Normal file
19
packages/showcase/mobile/src/components/DemoRow.tsx
Normal file
@@ -0,0 +1,19 @@
|
||||
import React from 'react';
|
||||
import { View, StyleSheet } from 'react-native';
|
||||
|
||||
interface DemoRowProps {
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
export function DemoRow({ children }: DemoRowProps) {
|
||||
return <View style={styles.row}>{children}</View>;
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
row: {
|
||||
flexDirection: 'row',
|
||||
flexWrap: 'wrap',
|
||||
gap: 12,
|
||||
alignItems: 'center',
|
||||
},
|
||||
});
|
||||
45
packages/showcase/mobile/src/components/DemoSection.tsx
Normal file
45
packages/showcase/mobile/src/components/DemoSection.tsx
Normal file
@@ -0,0 +1,45 @@
|
||||
import React from 'react';
|
||||
import { View, StyleSheet } from 'react-native';
|
||||
import { Text } from 'react-native-paper';
|
||||
import { DTLabel } from '@dangerousthings/react-native';
|
||||
import type { DTVariant } from '@dangerousthings/react-native';
|
||||
|
||||
interface DemoSectionProps {
|
||||
title: string;
|
||||
description?: string;
|
||||
variant?: DTVariant;
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
export function DemoSection({ title, description, variant = 'normal', children }: DemoSectionProps) {
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<DTLabel
|
||||
primaryText={title}
|
||||
mode={variant}
|
||||
size="medium"
|
||||
animated={false}
|
||||
showIndicator={false}
|
||||
/>
|
||||
{description ? (
|
||||
<Text variant="bodySmall" style={styles.description}>
|
||||
{description}
|
||||
</Text>
|
||||
) : null}
|
||||
<View style={styles.content}>{children}</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
marginBottom: 32,
|
||||
},
|
||||
description: {
|
||||
color: 'rgba(255,255,255,0.6)',
|
||||
marginTop: 8,
|
||||
},
|
||||
content: {
|
||||
marginTop: 16,
|
||||
},
|
||||
});
|
||||
22
packages/showcase/mobile/src/components/ScreenContainer.tsx
Normal file
22
packages/showcase/mobile/src/components/ScreenContainer.tsx
Normal file
@@ -0,0 +1,22 @@
|
||||
import React from 'react';
|
||||
import { ScrollView, StyleProp, ViewStyle } from 'react-native';
|
||||
import { useDTTheme } from '@dangerousthings/react-native';
|
||||
|
||||
interface ScreenContainerProps {
|
||||
children: React.ReactNode;
|
||||
style?: StyleProp<ViewStyle>;
|
||||
}
|
||||
|
||||
export function ScreenContainer({ children, style }: ScreenContainerProps) {
|
||||
const theme = useDTTheme();
|
||||
|
||||
return (
|
||||
<ScrollView
|
||||
style={{ flex: 1, backgroundColor: theme.colors.background }}
|
||||
contentContainerStyle={[{ padding: 24, paddingBottom: 48 }, style]}
|
||||
showsVerticalScrollIndicator={false}
|
||||
>
|
||||
{children}
|
||||
</ScrollView>
|
||||
);
|
||||
}
|
||||
48
packages/showcase/mobile/src/data/sampleData.ts
Normal file
48
packages/showcase/mobile/src/data/sampleData.ts
Normal file
@@ -0,0 +1,48 @@
|
||||
export const galleryItems = [
|
||||
{ id: '1', uri: 'https://picsum.photos/seed/dt-gallery1/800/800', alt: 'Sample image 1' },
|
||||
{ id: '2', uri: 'https://picsum.photos/seed/dt-gallery2/800/800', alt: 'Sample image 2' },
|
||||
{ id: '3', uri: 'https://picsum.photos/seed/dt-gallery3/800/800', alt: 'Sample image 3' },
|
||||
{ id: '4', uri: 'https://picsum.photos/seed/dt-gallery4/800/800', alt: 'Sample image 4' },
|
||||
{ id: '5', uri: 'https://picsum.photos/seed/dt-gallery5/800/800', alt: 'Sample image 5' },
|
||||
];
|
||||
|
||||
export const menuItems = [
|
||||
{
|
||||
id: 'home',
|
||||
title: 'Home',
|
||||
isActive: true,
|
||||
onPress: () => {},
|
||||
},
|
||||
{
|
||||
id: 'products',
|
||||
title: 'Products',
|
||||
items: [
|
||||
{ id: 'nfc', title: 'NFC Implants', onPress: () => {} },
|
||||
{ id: 'rfid', title: 'RFID Implants', onPress: () => {} },
|
||||
{
|
||||
id: 'accessories',
|
||||
title: 'Accessories',
|
||||
items: [
|
||||
{ id: 'readers', title: 'Readers', onPress: () => {} },
|
||||
{ id: 'tools', title: 'Tools', onPress: () => {} },
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{ id: 'about', title: 'About', onPress: () => {} },
|
||||
{ id: 'contact', title: 'Contact', onPress: () => {} },
|
||||
];
|
||||
|
||||
export const horizontalMenuItems = [
|
||||
{ id: 'h1', title: 'Home', onPress: () => {}, isActive: true },
|
||||
{ id: 'h2', title: 'Shop', onPress: () => {} },
|
||||
{ id: 'h3', title: 'Blog', onPress: () => {} },
|
||||
{ id: 'h4', title: 'FAQ', onPress: () => {} },
|
||||
];
|
||||
|
||||
export const dropdownItems = [
|
||||
{ id: 'd1', title: 'Edit', onPress: () => {} },
|
||||
{ id: 'd2', title: 'Duplicate', onPress: () => {} },
|
||||
{ id: 'd3', title: 'Archive', onPress: () => {} },
|
||||
{ id: 'd4', title: 'Delete', onPress: () => {} },
|
||||
];
|
||||
67
packages/showcase/mobile/src/navigation/RootNavigator.tsx
Normal file
67
packages/showcase/mobile/src/navigation/RootNavigator.tsx
Normal file
@@ -0,0 +1,67 @@
|
||||
import React from 'react';
|
||||
import { createNativeStackNavigator } from '@react-navigation/native-stack';
|
||||
import { useDTTheme } from '@dangerousthings/react-native';
|
||||
import type { RootStackParamList } from './types';
|
||||
|
||||
import { HomeScreen } from '../screens/HomeScreen';
|
||||
import { ButtonsScreen } from '../screens/ButtonsScreen';
|
||||
import { CardsScreen } from '../screens/CardsScreen';
|
||||
import { FormsScreen } from '../screens/FormsScreen';
|
||||
import { FeedbackScreen } from '../screens/FeedbackScreen';
|
||||
import { OverlaysScreen } from '../screens/OverlaysScreen';
|
||||
import { ThemeScreen } from '../screens/ThemeScreen';
|
||||
|
||||
const Stack = createNativeStackNavigator<RootStackParamList>();
|
||||
|
||||
export function RootNavigator() {
|
||||
const theme = useDTTheme();
|
||||
|
||||
return (
|
||||
<Stack.Navigator
|
||||
initialRouteName="Home"
|
||||
screenOptions={{
|
||||
headerStyle: { backgroundColor: theme.colors.background },
|
||||
headerTintColor: theme.custom.modeNormal,
|
||||
headerTitleStyle: { fontWeight: '600' },
|
||||
contentStyle: { backgroundColor: theme.colors.background },
|
||||
animation: 'slide_from_right',
|
||||
}}
|
||||
>
|
||||
<Stack.Screen
|
||||
name="Home"
|
||||
component={HomeScreen}
|
||||
options={{ headerShown: false }}
|
||||
/>
|
||||
<Stack.Screen
|
||||
name="Buttons"
|
||||
component={ButtonsScreen}
|
||||
options={{ title: 'BUTTONS & ACTIONS' }}
|
||||
/>
|
||||
<Stack.Screen
|
||||
name="Cards"
|
||||
component={CardsScreen}
|
||||
options={{ title: 'CARDS & LABELS' }}
|
||||
/>
|
||||
<Stack.Screen
|
||||
name="Forms"
|
||||
component={FormsScreen}
|
||||
options={{ title: 'FORM CONTROLS' }}
|
||||
/>
|
||||
<Stack.Screen
|
||||
name="Feedback"
|
||||
component={FeedbackScreen}
|
||||
options={{ title: 'PROGRESS & FEEDBACK' }}
|
||||
/>
|
||||
<Stack.Screen
|
||||
name="Overlays"
|
||||
component={OverlaysScreen}
|
||||
options={{ title: 'OVERLAYS & NAV' }}
|
||||
/>
|
||||
<Stack.Screen
|
||||
name="Theme"
|
||||
component={ThemeScreen}
|
||||
options={{ title: 'THEME REFERENCE' }}
|
||||
/>
|
||||
</Stack.Navigator>
|
||||
);
|
||||
}
|
||||
21
packages/showcase/mobile/src/navigation/navigationTheme.ts
Normal file
21
packages/showcase/mobile/src/navigation/navigationTheme.ts
Normal file
@@ -0,0 +1,21 @@
|
||||
import { DefaultTheme } from '@react-navigation/native';
|
||||
import { useBrand } from '../brand/BrandContext';
|
||||
|
||||
export function useNavigationTheme() {
|
||||
const { brand } = useBrand();
|
||||
const colors = brand.dark;
|
||||
|
||||
return {
|
||||
...DefaultTheme,
|
||||
dark: true,
|
||||
colors: {
|
||||
...DefaultTheme.colors,
|
||||
primary: colors.primary,
|
||||
background: colors.bg,
|
||||
card: colors.bg,
|
||||
text: colors.textPrimary,
|
||||
border: colors.primary,
|
||||
notification: colors.secondary,
|
||||
},
|
||||
};
|
||||
}
|
||||
9
packages/showcase/mobile/src/navigation/types.ts
Normal file
9
packages/showcase/mobile/src/navigation/types.ts
Normal file
@@ -0,0 +1,9 @@
|
||||
export type RootStackParamList = {
|
||||
Home: undefined;
|
||||
Buttons: undefined;
|
||||
Cards: undefined;
|
||||
Forms: undefined;
|
||||
Feedback: undefined;
|
||||
Overlays: undefined;
|
||||
Theme: undefined;
|
||||
};
|
||||
178
packages/showcase/mobile/src/screens/ButtonsScreen.tsx
Normal file
178
packages/showcase/mobile/src/screens/ButtonsScreen.tsx
Normal file
@@ -0,0 +1,178 @@
|
||||
import React from 'react';
|
||||
import { View } from 'react-native';
|
||||
import { Text } from 'react-native-paper';
|
||||
import { DTButton, DTChip, DTHexagon, useDTTheme } from '@dangerousthings/react-native';
|
||||
import { ScreenContainer } from '../components/ScreenContainer';
|
||||
import { DemoSection } from '../components/DemoSection';
|
||||
import { DemoRow } from '../components/DemoRow';
|
||||
import { CodeLabel } from '../components/CodeLabel';
|
||||
|
||||
export function ButtonsScreen() {
|
||||
const theme = useDTTheme();
|
||||
|
||||
return (
|
||||
<ScreenContainer>
|
||||
{/* DTButton - Outlined */}
|
||||
<DemoSection
|
||||
title="DTButton - Outlined"
|
||||
variant="normal"
|
||||
description="Border with transparent background. Default mode."
|
||||
>
|
||||
<View style={{ gap: 12 }}>
|
||||
<DTButton variant="normal" onPress={() => {}}>NORMAL</DTButton>
|
||||
<CodeLabel text='variant="normal"' />
|
||||
|
||||
<DTButton variant="emphasis" onPress={() => {}}>EMPHASIS</DTButton>
|
||||
<CodeLabel text='variant="emphasis"' />
|
||||
|
||||
<DTButton variant="warning" onPress={() => {}}>WARNING</DTButton>
|
||||
<CodeLabel text='variant="warning"' />
|
||||
|
||||
<DTButton variant="success" onPress={() => {}}>SUCCESS</DTButton>
|
||||
<CodeLabel text='variant="success"' />
|
||||
|
||||
<DTButton variant="other" onPress={() => {}}>OTHER</DTButton>
|
||||
<CodeLabel text='variant="other"' />
|
||||
</View>
|
||||
</DemoSection>
|
||||
|
||||
{/* DTButton - Contained */}
|
||||
<DemoSection
|
||||
title="DTButton - Contained"
|
||||
variant="emphasis"
|
||||
description="Filled background with dark text."
|
||||
>
|
||||
<View style={{ gap: 12 }}>
|
||||
<DTButton variant="normal" mode="contained" onPress={() => {}}>
|
||||
CONTAINED NORMAL
|
||||
</DTButton>
|
||||
<DTButton variant="emphasis" mode="contained" onPress={() => {}}>
|
||||
CONTAINED EMPHASIS
|
||||
</DTButton>
|
||||
<DTButton variant="warning" mode="contained" onPress={() => {}}>
|
||||
CONTAINED WARNING
|
||||
</DTButton>
|
||||
<DTButton variant="success" mode="contained" onPress={() => {}}>
|
||||
CONTAINED SUCCESS
|
||||
</DTButton>
|
||||
<DTButton variant="other" mode="contained" onPress={() => {}}>
|
||||
CONTAINED OTHER
|
||||
</DTButton>
|
||||
</View>
|
||||
</DemoSection>
|
||||
|
||||
{/* DTButton - States */}
|
||||
<DemoSection
|
||||
title="DTButton - States"
|
||||
variant="warning"
|
||||
description="Disabled and custom bevel sizes."
|
||||
>
|
||||
<View style={{ gap: 12 }}>
|
||||
<DTButton variant="normal" disabled onPress={() => {}}>
|
||||
DISABLED
|
||||
</DTButton>
|
||||
<CodeLabel text="disabled={true}" />
|
||||
|
||||
<DTButton variant="emphasis" bevelSize={16} onPress={() => {}}>
|
||||
LARGE BEVEL (16px)
|
||||
</DTButton>
|
||||
<CodeLabel text="bevelSize={16}" />
|
||||
|
||||
<DTButton variant="success" bevelSize={0} onPress={() => {}}>
|
||||
NO BEVEL (0px)
|
||||
</DTButton>
|
||||
<CodeLabel text="bevelSize={0}" />
|
||||
|
||||
<DTButton variant="other" borderWidth={4} onPress={() => {}}>
|
||||
THICK BORDER (4px)
|
||||
</DTButton>
|
||||
<CodeLabel text="borderWidth={4}" />
|
||||
</View>
|
||||
</DemoSection>
|
||||
|
||||
{/* DTChip */}
|
||||
<DemoSection
|
||||
title="DTChip"
|
||||
variant="normal"
|
||||
description="Chips for tags and statuses. Wraps RNP Chip."
|
||||
>
|
||||
<Text variant="labelSmall" style={{ color: theme.colors.onSurface, opacity: 0.6, marginBottom: 8 }}>
|
||||
ALL VARIANTS:
|
||||
</Text>
|
||||
<DemoRow>
|
||||
<DTChip variant="normal">NTAG215</DTChip>
|
||||
<DTChip variant="emphasis">FEATURED</DTChip>
|
||||
<DTChip variant="warning">DEPRECATED</DTChip>
|
||||
<DTChip variant="success">ACTIVE</DTChip>
|
||||
<DTChip variant="other">BETA</DTChip>
|
||||
</DemoRow>
|
||||
|
||||
<Text variant="labelSmall" style={{ color: theme.colors.onSurface, opacity: 0.6, marginTop: 16, marginBottom: 8 }}>
|
||||
SELECTED:
|
||||
</Text>
|
||||
<DemoRow>
|
||||
<DTChip variant="normal" selected>SELECTED</DTChip>
|
||||
<DTChip variant="emphasis" selected>SELECTED</DTChip>
|
||||
<DTChip variant="success" selected>SELECTED</DTChip>
|
||||
</DemoRow>
|
||||
</DemoSection>
|
||||
|
||||
{/* DTHexagon */}
|
||||
<DemoSection
|
||||
title="DTHexagon"
|
||||
variant="other"
|
||||
description="Decorative hexagon shapes with optional animations."
|
||||
>
|
||||
<Text variant="labelSmall" style={{ color: theme.colors.onSurface, opacity: 0.6, marginBottom: 8 }}>
|
||||
FILLED:
|
||||
</Text>
|
||||
<DemoRow>
|
||||
<DTHexagon size={60} variant="normal" />
|
||||
<DTHexagon size={60} variant="emphasis" />
|
||||
<DTHexagon size={60} variant="warning" />
|
||||
<DTHexagon size={60} variant="success" />
|
||||
<DTHexagon size={60} variant="other" />
|
||||
</DemoRow>
|
||||
|
||||
<Text variant="labelSmall" style={{ color: theme.colors.onSurface, opacity: 0.6, marginTop: 20, marginBottom: 8 }}>
|
||||
OUTLINE:
|
||||
</Text>
|
||||
<DemoRow>
|
||||
<DTHexagon size={60} variant="normal" filled={false} />
|
||||
<DTHexagon size={60} variant="emphasis" filled={false} borderWidth={3} />
|
||||
<DTHexagon size={60} variant="warning" filled={false} />
|
||||
</DemoRow>
|
||||
|
||||
<Text variant="labelSmall" style={{ color: theme.colors.onSurface, opacity: 0.6, marginTop: 20, marginBottom: 8 }}>
|
||||
ANIMATED:
|
||||
</Text>
|
||||
<DemoRow>
|
||||
<View style={{ alignItems: 'center' }}>
|
||||
<DTHexagon size={50} variant="normal" animated animationType="rotate" animationDuration={3000} />
|
||||
<CodeLabel text="rotate" />
|
||||
</View>
|
||||
<View style={{ alignItems: 'center' }}>
|
||||
<DTHexagon size={50} variant="emphasis" animated animationType="pulse" animationDuration={2000} />
|
||||
<CodeLabel text="pulse" />
|
||||
</View>
|
||||
<View style={{ alignItems: 'center' }}>
|
||||
<DTHexagon size={50} variant="other" filled={false} animated animationType="rotate" animationDuration={4000} />
|
||||
<CodeLabel text="rotate outline" />
|
||||
</View>
|
||||
</DemoRow>
|
||||
|
||||
<Text variant="labelSmall" style={{ color: theme.colors.onSurface, opacity: 0.6, marginTop: 20, marginBottom: 8 }}>
|
||||
WITH CONTENT:
|
||||
</Text>
|
||||
<DemoRow>
|
||||
<DTHexagon size={80} variant="normal">
|
||||
<Text style={{ color: theme.colors.background, fontWeight: '700', fontSize: 16 }}>DT</Text>
|
||||
</DTHexagon>
|
||||
<DTHexagon size={80} variant="emphasis" animated animationType="pulse">
|
||||
<Text style={{ color: theme.colors.background, fontWeight: '700', fontSize: 12 }}>SCAN</Text>
|
||||
</DTHexagon>
|
||||
</DemoRow>
|
||||
</DemoSection>
|
||||
</ScreenContainer>
|
||||
);
|
||||
}
|
||||
180
packages/showcase/mobile/src/screens/CardsScreen.tsx
Normal file
180
packages/showcase/mobile/src/screens/CardsScreen.tsx
Normal file
@@ -0,0 +1,180 @@
|
||||
import React from 'react';
|
||||
import { View, Image, Alert } from 'react-native';
|
||||
import { Text } from 'react-native-paper';
|
||||
import { DTCard, DTLabel, DTMediaFrame, useDTTheme } from '@dangerousthings/react-native';
|
||||
import { ScreenContainer } from '../components/ScreenContainer';
|
||||
import { DemoSection } from '../components/DemoSection';
|
||||
import { CodeLabel } from '../components/CodeLabel';
|
||||
|
||||
export function CardsScreen() {
|
||||
const theme = useDTTheme();
|
||||
|
||||
return (
|
||||
<ScreenContainer>
|
||||
{/* DTCard - All Modes */}
|
||||
<DemoSection
|
||||
title="DTCard - Modes"
|
||||
variant="normal"
|
||||
description="Beveled card with dual bottom bevels. Uses DTVariant for mode coloring."
|
||||
>
|
||||
<DTCard mode="normal" title="NORMAL MODE" style={{ marginBottom: 16 }}>
|
||||
<Text variant="bodyMedium" style={{ color: theme.colors.onSurface }}>
|
||||
Primary border with beveled bottom-right and bottom-left corners.
|
||||
</Text>
|
||||
</DTCard>
|
||||
|
||||
<DTCard mode="emphasis" title="EMPHASIS MODE" style={{ marginBottom: 16 }}>
|
||||
<Text variant="bodyMedium" style={{ color: theme.colors.onSurface }}>
|
||||
Secondary border. Used for highlighted or important content.
|
||||
</Text>
|
||||
</DTCard>
|
||||
|
||||
<DTCard mode="warning" title="WARNING MODE" style={{ marginBottom: 16 }}>
|
||||
<Text variant="bodyMedium" style={{ color: theme.colors.onSurface }}>
|
||||
Error border. Used for errors and destructive actions.
|
||||
</Text>
|
||||
</DTCard>
|
||||
|
||||
<DTCard mode="success" title="SUCCESS MODE" style={{ marginBottom: 16 }}>
|
||||
<Text variant="bodyMedium" style={{ color: theme.colors.onSurface }}>
|
||||
Success border. Used for confirmations and success states.
|
||||
</Text>
|
||||
</DTCard>
|
||||
|
||||
<DTCard mode="other" title="OTHER MODE">
|
||||
<Text variant="bodyMedium" style={{ color: theme.colors.onSurface }}>
|
||||
Tertiary border. Used for secondary or miscellaneous info.
|
||||
</Text>
|
||||
</DTCard>
|
||||
</DemoSection>
|
||||
|
||||
{/* DTCard - Variations */}
|
||||
<DemoSection
|
||||
title="DTCard - Variations"
|
||||
variant="emphasis"
|
||||
description="Cards without titles, pressable cards, custom bevels."
|
||||
>
|
||||
<DTCard mode="normal" style={{ marginBottom: 16 }}>
|
||||
<Text variant="bodyMedium" style={{ color: theme.colors.onSurface }}>
|
||||
Card without title (no header bar).
|
||||
</Text>
|
||||
</DTCard>
|
||||
|
||||
<DTCard
|
||||
mode="emphasis"
|
||||
title="PRESSABLE CARD"
|
||||
onPress={() => Alert.alert('Card Pressed', 'You tapped the card!')}
|
||||
style={{ marginBottom: 16 }}
|
||||
>
|
||||
<Text variant="bodyMedium" style={{ color: theme.colors.onSurface }}>
|
||||
Tap me! Cards with onPress get press feedback.
|
||||
</Text>
|
||||
</DTCard>
|
||||
|
||||
<DTCard
|
||||
mode="other"
|
||||
title="CUSTOM BEVELS"
|
||||
bevelSize={48}
|
||||
bevelSizeSmall={24}
|
||||
borderWidth={4}
|
||||
>
|
||||
<Text variant="bodyMedium" style={{ color: theme.colors.onSurface }}>
|
||||
bevelSize=48, bevelSizeSmall=24, borderWidth=4
|
||||
</Text>
|
||||
</DTCard>
|
||||
</DemoSection>
|
||||
|
||||
{/* DTLabel - Sizes and Modes */}
|
||||
<DemoSection
|
||||
title="DTLabel"
|
||||
variant="normal"
|
||||
description="Beveled top-right corner labels with animated ping indicator."
|
||||
>
|
||||
<Text variant="labelSmall" style={{ color: theme.colors.onSurface, opacity: 0.6, marginBottom: 8 }}>
|
||||
SIZES:
|
||||
</Text>
|
||||
<View style={{ gap: 8, marginBottom: 16 }}>
|
||||
<DTLabel primaryText="Small Label" size="small" mode="normal" />
|
||||
<DTLabel primaryText="Medium Label" size="medium" mode="normal" />
|
||||
<DTLabel primaryText="Large Label" size="large" mode="normal" />
|
||||
</View>
|
||||
|
||||
<Text variant="labelSmall" style={{ color: theme.colors.onSurface, opacity: 0.6, marginBottom: 8 }}>
|
||||
WITH SECONDARY TEXT:
|
||||
</Text>
|
||||
<View style={{ gap: 8, marginBottom: 16 }}>
|
||||
<DTLabel primaryText="Detected" secondaryText="NTAG215" mode="success" />
|
||||
<DTLabel primaryText="Status" secondaryText="READY TO SCAN" mode="emphasis" />
|
||||
<DTLabel primaryText="Error" secondaryText="CONNECTION LOST" mode="warning" />
|
||||
</View>
|
||||
|
||||
<Text variant="labelSmall" style={{ color: theme.colors.onSurface, opacity: 0.6, marginBottom: 8 }}>
|
||||
ALL VARIANTS:
|
||||
</Text>
|
||||
<View style={{ gap: 8, marginBottom: 16 }}>
|
||||
<DTLabel primaryText="Normal" mode="normal" />
|
||||
<DTLabel primaryText="Emphasis" mode="emphasis" />
|
||||
<DTLabel primaryText="Warning" mode="warning" />
|
||||
<DTLabel primaryText="Success" mode="success" />
|
||||
<DTLabel primaryText="Other" mode="other" />
|
||||
</View>
|
||||
|
||||
<Text variant="labelSmall" style={{ color: theme.colors.onSurface, opacity: 0.6, marginBottom: 8 }}>
|
||||
FULL WIDTH:
|
||||
</Text>
|
||||
<View style={{ gap: 8, marginBottom: 16 }}>
|
||||
<DTLabel primaryText="Full Width Label" secondaryText="STRETCHES" mode="emphasis" fullWidth />
|
||||
</View>
|
||||
|
||||
<Text variant="labelSmall" style={{ color: theme.colors.onSurface, opacity: 0.6, marginBottom: 8 }}>
|
||||
OPTIONS:
|
||||
</Text>
|
||||
<View style={{ gap: 8 }}>
|
||||
<DTLabel primaryText="No Ping Indicator" mode="normal" showIndicator={false} />
|
||||
<DTLabel primaryText="Not Animated" mode="other" animated={false} />
|
||||
</View>
|
||||
</DemoSection>
|
||||
|
||||
{/* DTMediaFrame */}
|
||||
<DemoSection
|
||||
title="DTMediaFrame"
|
||||
variant="other"
|
||||
description="Beveled media wrapper with diagonal symmetry (top-left + bottom-right)."
|
||||
>
|
||||
<DTMediaFrame variant="normal" aspectRatio={16 / 9} style={{ marginBottom: 8 }}>
|
||||
<Image
|
||||
source={{ uri: 'https://picsum.photos/seed/dt-media1/800/450' }}
|
||||
style={{ flex: 1 }}
|
||||
resizeMode="cover"
|
||||
/>
|
||||
</DTMediaFrame>
|
||||
<CodeLabel text='variant="normal" aspectRatio={16/9}' />
|
||||
|
||||
<DTMediaFrame variant="emphasis" aspectRatio={1} bevelSize={24} style={{ marginTop: 16, marginBottom: 8 }}>
|
||||
<Image
|
||||
source={{ uri: 'https://picsum.photos/seed/dt-media2/400/400' }}
|
||||
style={{ flex: 1 }}
|
||||
resizeMode="cover"
|
||||
/>
|
||||
</DTMediaFrame>
|
||||
<CodeLabel text='variant="emphasis" aspectRatio={1} bevelSize={24}' />
|
||||
|
||||
<DTMediaFrame variant="warning" aspectRatio={4 / 3} borderWidth={4} style={{ marginTop: 16, marginBottom: 8 }}>
|
||||
<Image
|
||||
source={{ uri: 'https://picsum.photos/seed/dt-media3/600/450' }}
|
||||
style={{ flex: 1 }}
|
||||
resizeMode="cover"
|
||||
/>
|
||||
</DTMediaFrame>
|
||||
<CodeLabel text='variant="warning" aspectRatio={4/3} borderWidth={4}' />
|
||||
|
||||
<DTMediaFrame variant="success" aspectRatio={16 / 9} animated={false} style={{ marginTop: 16, marginBottom: 8 }}>
|
||||
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#0a0a0a' }}>
|
||||
<Text style={{ color: theme.custom.modeSuccess }}>PLACEHOLDER CONTENT</Text>
|
||||
</View>
|
||||
</DTMediaFrame>
|
||||
<CodeLabel text='animated={false} — custom View children' />
|
||||
</DemoSection>
|
||||
</ScreenContainer>
|
||||
);
|
||||
}
|
||||
139
packages/showcase/mobile/src/screens/FeedbackScreen.tsx
Normal file
139
packages/showcase/mobile/src/screens/FeedbackScreen.tsx
Normal file
@@ -0,0 +1,139 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { View } from 'react-native';
|
||||
import { Text } from 'react-native-paper';
|
||||
import { DTProgressBar, DTSearchInput, useDTTheme } from '@dangerousthings/react-native';
|
||||
import { ScreenContainer } from '../components/ScreenContainer';
|
||||
import { DemoSection } from '../components/DemoSection';
|
||||
import { CodeLabel } from '../components/CodeLabel';
|
||||
|
||||
export function FeedbackScreen() {
|
||||
const theme = useDTTheme();
|
||||
const [progress, setProgress] = useState(0);
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const [loadingQuery, setLoadingQuery] = useState('NFC implants');
|
||||
|
||||
// Animate progress bar
|
||||
useEffect(() => {
|
||||
const interval = setInterval(() => {
|
||||
setProgress((prev) => (prev >= 1 ? 0 : prev + 0.01));
|
||||
}, 100);
|
||||
return () => clearInterval(interval);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<ScreenContainer>
|
||||
{/* DTProgressBar - Horizontal */}
|
||||
<DemoSection
|
||||
title="DTProgressBar - Horizontal"
|
||||
variant="normal"
|
||||
description="Wraps RNP ProgressBar with angular styling."
|
||||
>
|
||||
<View style={{ gap: 20 }}>
|
||||
<View>
|
||||
<Text variant="labelSmall" style={{ color: theme.colors.onSurface, opacity: 0.6, marginBottom: 8 }}>
|
||||
25%
|
||||
</Text>
|
||||
<DTProgressBar value={0.25} variant="normal" />
|
||||
</View>
|
||||
|
||||
<View>
|
||||
<Text variant="labelSmall" style={{ color: theme.colors.onSurface, opacity: 0.6, marginBottom: 8 }}>
|
||||
50% WITH LABEL
|
||||
</Text>
|
||||
<DTProgressBar value={0.5} variant="emphasis" showLabel height={8} />
|
||||
<CodeLabel text='showLabel height={8}' />
|
||||
</View>
|
||||
|
||||
<View>
|
||||
<Text variant="labelSmall" style={{ color: theme.colors.onSurface, opacity: 0.6, marginBottom: 8 }}>
|
||||
75%
|
||||
</Text>
|
||||
<DTProgressBar value={0.75} variant="success" height={6} />
|
||||
</View>
|
||||
|
||||
<View>
|
||||
<Text variant="labelSmall" style={{ color: theme.colors.onSurface, opacity: 0.6, marginBottom: 8 }}>
|
||||
100% (WARNING)
|
||||
</Text>
|
||||
<DTProgressBar value={1.0} variant="warning" showLabel />
|
||||
</View>
|
||||
|
||||
<View>
|
||||
<Text variant="labelSmall" style={{ color: theme.colors.onSurface, opacity: 0.6, marginBottom: 8 }}>
|
||||
ANIMATED ({Math.round(progress * 100)}%)
|
||||
</Text>
|
||||
<DTProgressBar value={progress} variant="normal" showLabel height={8} />
|
||||
<CodeLabel text="Live cycling 0% → 100% → repeat" />
|
||||
</View>
|
||||
</View>
|
||||
</DemoSection>
|
||||
|
||||
{/* DTProgressBar - Vertical */}
|
||||
<DemoSection
|
||||
title="DTProgressBar - Vertical"
|
||||
variant="emphasis"
|
||||
description="Vertical orientation with height-based fill."
|
||||
>
|
||||
<View style={{ flexDirection: 'row', justifyContent: 'space-around', height: 150, marginBottom: 8 }}>
|
||||
<DTProgressBar value={0.3} variant="normal" orientation="vertical" height={8} showLabel />
|
||||
<DTProgressBar value={0.5} variant="emphasis" orientation="vertical" height={8} showLabel />
|
||||
<DTProgressBar value={0.75} variant="success" orientation="vertical" height={8} showLabel />
|
||||
<DTProgressBar value={1.0} variant="warning" orientation="vertical" height={8} showLabel />
|
||||
<DTProgressBar value={0.15} variant="other" orientation="vertical" height={12} showLabel />
|
||||
</View>
|
||||
<CodeLabel text='orientation="vertical"' />
|
||||
</DemoSection>
|
||||
|
||||
{/* DTSearchInput */}
|
||||
<DemoSection
|
||||
title="DTSearchInput"
|
||||
variant="normal"
|
||||
description="Wraps RNP Searchbar with angular styling."
|
||||
>
|
||||
<View style={{ gap: 16 }}>
|
||||
<View>
|
||||
<DTSearchInput
|
||||
value={searchQuery}
|
||||
onChangeText={setSearchQuery}
|
||||
placeholder="Search components..."
|
||||
variant="normal"
|
||||
/>
|
||||
<CodeLabel text='variant="normal"' />
|
||||
</View>
|
||||
|
||||
<View>
|
||||
<DTSearchInput
|
||||
value={loadingQuery}
|
||||
onChangeText={setLoadingQuery}
|
||||
loading
|
||||
variant="emphasis"
|
||||
placeholder="Searching..."
|
||||
/>
|
||||
<CodeLabel text='loading={true} variant="emphasis"' />
|
||||
</View>
|
||||
|
||||
<View>
|
||||
<DTSearchInput
|
||||
value=""
|
||||
onChangeText={() => {}}
|
||||
variant="warning"
|
||||
placeholder="Disabled search"
|
||||
disabled
|
||||
/>
|
||||
<CodeLabel text='disabled={true} variant="warning"' />
|
||||
</View>
|
||||
|
||||
<View>
|
||||
<DTSearchInput
|
||||
value=""
|
||||
onChangeText={() => {}}
|
||||
variant="other"
|
||||
placeholder="Other variant..."
|
||||
/>
|
||||
<CodeLabel text='variant="other"' />
|
||||
</View>
|
||||
</View>
|
||||
</DemoSection>
|
||||
</ScreenContainer>
|
||||
);
|
||||
}
|
||||
290
packages/showcase/mobile/src/screens/FormsScreen.tsx
Normal file
290
packages/showcase/mobile/src/screens/FormsScreen.tsx
Normal file
@@ -0,0 +1,290 @@
|
||||
import React, { useState } from 'react';
|
||||
import { View } from 'react-native';
|
||||
import { Text } from 'react-native-paper';
|
||||
import {
|
||||
DTTextInput,
|
||||
DTCheckbox,
|
||||
DTSwitch,
|
||||
DTRadioGroup,
|
||||
DTRadioOption,
|
||||
DTQuantityStepper,
|
||||
useDTTheme,
|
||||
} from '@dangerousthings/react-native';
|
||||
import { ScreenContainer } from '../components/ScreenContainer';
|
||||
import { DemoSection } from '../components/DemoSection';
|
||||
import { CodeLabel } from '../components/CodeLabel';
|
||||
|
||||
export function FormsScreen() {
|
||||
const theme = useDTTheme();
|
||||
|
||||
// TextInput state
|
||||
const [username, setUsername] = useState('');
|
||||
const [search, setSearch] = useState('');
|
||||
const [errorField, setErrorField] = useState('');
|
||||
|
||||
// Checkbox state
|
||||
const [check1, setCheck1] = useState(false);
|
||||
const [check2, setCheck2] = useState(true);
|
||||
const [check3, setCheck3] = useState(false);
|
||||
|
||||
// Switch state
|
||||
const [switch1, setSwitch1] = useState(false);
|
||||
const [switch2, setSwitch2] = useState(true);
|
||||
const [switch3, setSwitch3] = useState(false);
|
||||
|
||||
// Radio state
|
||||
const [radio1, setRadio1] = useState<string | null>('nfc');
|
||||
const [radio2, setRadio2] = useState<string | null>(null);
|
||||
|
||||
// Stepper state
|
||||
const [qty1, setQty1] = useState(1);
|
||||
const [qty2, setQty2] = useState(5);
|
||||
const [qty3, setQty3] = useState(0);
|
||||
|
||||
return (
|
||||
<ScreenContainer>
|
||||
{/* DTTextInput */}
|
||||
<DemoSection
|
||||
title="DTTextInput"
|
||||
variant="normal"
|
||||
description="Angular text input wrapping RNP TextInput. Focus glow bar animation."
|
||||
>
|
||||
<View style={{ gap: 16 }}>
|
||||
<View>
|
||||
<DTTextInput
|
||||
variant="normal"
|
||||
label="Username"
|
||||
value={username}
|
||||
onChangeText={setUsername}
|
||||
placeholder="Enter username"
|
||||
/>
|
||||
<CodeLabel text='variant="normal"' />
|
||||
</View>
|
||||
|
||||
<View>
|
||||
<DTTextInput
|
||||
variant="emphasis"
|
||||
label="Search Query"
|
||||
value={search}
|
||||
onChangeText={setSearch}
|
||||
placeholder="Search..."
|
||||
/>
|
||||
<CodeLabel text='variant="emphasis"' />
|
||||
</View>
|
||||
|
||||
<View>
|
||||
<DTTextInput
|
||||
variant="warning"
|
||||
error
|
||||
errorMessage="This field is required"
|
||||
label="Email"
|
||||
value={errorField}
|
||||
onChangeText={setErrorField}
|
||||
placeholder="user@example.com"
|
||||
/>
|
||||
<CodeLabel text='error={true} errorMessage="..."' />
|
||||
</View>
|
||||
|
||||
<View>
|
||||
<DTTextInput
|
||||
variant="success"
|
||||
label="Verified Field"
|
||||
value="verified@example.com"
|
||||
onChangeText={() => {}}
|
||||
/>
|
||||
<CodeLabel text='variant="success"' />
|
||||
</View>
|
||||
</View>
|
||||
</DemoSection>
|
||||
|
||||
{/* DTCheckbox */}
|
||||
<DemoSection
|
||||
title="DTCheckbox"
|
||||
variant="normal"
|
||||
description="Angular square checkbox with SVG checkmark. Custom-built (RNP uses rounded)."
|
||||
>
|
||||
<View style={{ gap: 4 }}>
|
||||
<DTCheckbox
|
||||
checked={check1}
|
||||
onPress={() => setCheck1(!check1)}
|
||||
label="Accept terms and conditions"
|
||||
variant="normal"
|
||||
/>
|
||||
<DTCheckbox
|
||||
checked={check2}
|
||||
onPress={() => setCheck2(!check2)}
|
||||
label="Remember me"
|
||||
variant="success"
|
||||
/>
|
||||
<DTCheckbox
|
||||
checked={check3}
|
||||
onPress={() => setCheck3(!check3)}
|
||||
label="Enable notifications"
|
||||
variant="emphasis"
|
||||
/>
|
||||
<DTCheckbox
|
||||
checked={true}
|
||||
onPress={() => {}}
|
||||
label="Disabled checked"
|
||||
variant="normal"
|
||||
disabled
|
||||
/>
|
||||
<DTCheckbox
|
||||
checked={false}
|
||||
onPress={() => {}}
|
||||
label="Disabled unchecked"
|
||||
variant="normal"
|
||||
disabled
|
||||
/>
|
||||
<DTCheckbox
|
||||
checked={true}
|
||||
onPress={() => {}}
|
||||
label="Large checkbox (size=32)"
|
||||
variant="warning"
|
||||
size={32}
|
||||
/>
|
||||
</View>
|
||||
</DemoSection>
|
||||
|
||||
{/* DTSwitch */}
|
||||
<DemoSection
|
||||
title="DTSwitch"
|
||||
variant="normal"
|
||||
description="Angular toggle switch. Custom-built with animated thumb."
|
||||
>
|
||||
<View style={{ gap: 4 }}>
|
||||
<DTSwitch
|
||||
value={switch1}
|
||||
onValueChange={setSwitch1}
|
||||
label="Enable NFC"
|
||||
variant="normal"
|
||||
/>
|
||||
<DTSwitch
|
||||
value={switch2}
|
||||
onValueChange={setSwitch2}
|
||||
label="Auto-detect"
|
||||
variant="success"
|
||||
/>
|
||||
<DTSwitch
|
||||
value={switch3}
|
||||
onValueChange={setSwitch3}
|
||||
label="Dark mode"
|
||||
variant="emphasis"
|
||||
/>
|
||||
<DTSwitch
|
||||
value={true}
|
||||
onValueChange={() => {}}
|
||||
label="Disabled (on)"
|
||||
variant="normal"
|
||||
disabled
|
||||
/>
|
||||
<DTSwitch
|
||||
value={false}
|
||||
onValueChange={() => {}}
|
||||
label="Disabled (off)"
|
||||
variant="normal"
|
||||
disabled
|
||||
/>
|
||||
</View>
|
||||
</DemoSection>
|
||||
|
||||
{/* DTRadioGroup */}
|
||||
<DemoSection
|
||||
title="DTRadioGroup"
|
||||
variant="normal"
|
||||
description="Angular square radio indicators with selection highlight."
|
||||
>
|
||||
<Text variant="labelSmall" style={{ color: theme.colors.onSurface, opacity: 0.6, marginBottom: 8 }}>
|
||||
BASIC:
|
||||
</Text>
|
||||
<DTRadioGroup value={radio1} onValueChange={setRadio1} variant="normal">
|
||||
<DTRadioOption value="nfc" label="NFC (Near Field Communication)" />
|
||||
<DTRadioOption value="rfid" label="RFID (Radio Frequency ID)" />
|
||||
<DTRadioOption value="ble" label="BLE (Bluetooth Low Energy)" />
|
||||
</DTRadioGroup>
|
||||
|
||||
<Text variant="labelSmall" style={{ color: theme.colors.onSurface, opacity: 0.6, marginTop: 24, marginBottom: 8 }}>
|
||||
WITH DESCRIPTIONS:
|
||||
</Text>
|
||||
<DTRadioGroup value={radio2} onValueChange={setRadio2} variant="emphasis">
|
||||
<DTRadioOption
|
||||
value="xNT"
|
||||
label="xNT"
|
||||
description="NTAG216 implant, 888 bytes, NFC Type 2"
|
||||
/>
|
||||
<DTRadioOption
|
||||
value="xDF2"
|
||||
label="xDF2"
|
||||
description="DESFire EV2 implant, 8K bytes, NFC Type 4"
|
||||
/>
|
||||
<DTRadioOption
|
||||
value="xEM"
|
||||
label="xEM"
|
||||
description="T5577 implant, LF 125kHz"
|
||||
disabled
|
||||
/>
|
||||
</DTRadioGroup>
|
||||
</DemoSection>
|
||||
|
||||
{/* DTQuantityStepper */}
|
||||
<DemoSection
|
||||
title="DTQuantityStepper"
|
||||
variant="emphasis"
|
||||
description="Increment/decrement with beveled +/- buttons."
|
||||
>
|
||||
<View style={{ gap: 24 }}>
|
||||
<View>
|
||||
<DTQuantityStepper
|
||||
value={qty1}
|
||||
onValueChange={setQty1}
|
||||
label="Quantity"
|
||||
min={1}
|
||||
max={10}
|
||||
variant="normal"
|
||||
size="medium"
|
||||
/>
|
||||
<CodeLabel text='size="medium" min={1} max={10}' />
|
||||
</View>
|
||||
|
||||
<View>
|
||||
<DTQuantityStepper
|
||||
value={qty2}
|
||||
onValueChange={setQty2}
|
||||
label="Small Stepper"
|
||||
min={0}
|
||||
max={99}
|
||||
variant="emphasis"
|
||||
size="small"
|
||||
/>
|
||||
<CodeLabel text='size="small" min={0} max={99}' />
|
||||
</View>
|
||||
|
||||
<View>
|
||||
<DTQuantityStepper
|
||||
value={qty3}
|
||||
onValueChange={setQty3}
|
||||
label="Large Stepper"
|
||||
min={0}
|
||||
max={20}
|
||||
step={5}
|
||||
variant="success"
|
||||
size="large"
|
||||
/>
|
||||
<CodeLabel text='size="large" step={5}' />
|
||||
</View>
|
||||
|
||||
<View>
|
||||
<DTQuantityStepper
|
||||
value={3}
|
||||
onValueChange={() => {}}
|
||||
label="Disabled"
|
||||
variant="normal"
|
||||
disabled
|
||||
/>
|
||||
<CodeLabel text="disabled={true}" />
|
||||
</View>
|
||||
</View>
|
||||
</DemoSection>
|
||||
</ScreenContainer>
|
||||
);
|
||||
}
|
||||
160
packages/showcase/mobile/src/screens/HomeScreen.tsx
Normal file
160
packages/showcase/mobile/src/screens/HomeScreen.tsx
Normal file
@@ -0,0 +1,160 @@
|
||||
import React from 'react';
|
||||
import { View, StyleSheet } from 'react-native';
|
||||
import { Text } from 'react-native-paper';
|
||||
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
||||
import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
|
||||
import { DTCard, DTHexagon, useDTTheme } from '@dangerousthings/react-native';
|
||||
import type { DTVariant } from '@dangerousthings/react-native';
|
||||
import type { RootStackParamList } from '../navigation/types';
|
||||
import { ScreenContainer } from '../components/ScreenContainer';
|
||||
import { BrandSwitcher } from '../components/BrandSwitcher';
|
||||
import { useBrand } from '../brand/BrandContext';
|
||||
|
||||
type HomeScreenProps = {
|
||||
navigation: NativeStackNavigationProp<RootStackParamList, 'Home'>;
|
||||
};
|
||||
|
||||
const categories: {
|
||||
title: string;
|
||||
subtitle: string;
|
||||
mode: DTVariant;
|
||||
route: keyof RootStackParamList;
|
||||
count: number;
|
||||
}[] = [
|
||||
{
|
||||
title: 'BUTTONS & ACTIONS',
|
||||
subtitle: 'DTButton, DTChip, DTHexagon',
|
||||
mode: 'normal',
|
||||
route: 'Buttons',
|
||||
count: 3,
|
||||
},
|
||||
{
|
||||
title: 'CARDS & LABELS',
|
||||
subtitle: 'DTCard, DTLabel, DTMediaFrame',
|
||||
mode: 'emphasis',
|
||||
route: 'Cards',
|
||||
count: 3,
|
||||
},
|
||||
{
|
||||
title: 'FORM CONTROLS',
|
||||
subtitle: 'DTTextInput, DTCheckbox, DTSwitch, DTRadioGroup, DTQuantityStepper',
|
||||
mode: 'success',
|
||||
route: 'Forms',
|
||||
count: 5,
|
||||
},
|
||||
{
|
||||
title: 'PROGRESS & FEEDBACK',
|
||||
subtitle: 'DTProgressBar, DTSearchInput',
|
||||
mode: 'other',
|
||||
route: 'Feedback',
|
||||
count: 2,
|
||||
},
|
||||
{
|
||||
title: 'OVERLAYS & NAVIGATION',
|
||||
subtitle: 'DTModal, DTDrawer, DTAccordion, DTMenu, DTGallery',
|
||||
mode: 'warning',
|
||||
route: 'Overlays',
|
||||
count: 5,
|
||||
},
|
||||
{
|
||||
title: 'THEME REFERENCE',
|
||||
subtitle: 'Colors, Typography, Spacing',
|
||||
mode: 'normal',
|
||||
route: 'Theme',
|
||||
count: 0,
|
||||
},
|
||||
];
|
||||
|
||||
export function HomeScreen({ navigation }: HomeScreenProps) {
|
||||
const insets = useSafeAreaInsets();
|
||||
const theme = useDTTheme();
|
||||
const { brand } = useBrand();
|
||||
|
||||
return (
|
||||
<ScreenContainer style={{ paddingTop: insets.top + 24 }}>
|
||||
<View style={styles.header}>
|
||||
<Text variant="displaySmall" style={[styles.title, { color: theme.custom.modeNormal }]}>
|
||||
DANGEROUS THINGS
|
||||
</Text>
|
||||
<Text variant="headlineSmall" style={[styles.subtitle, { color: theme.custom.modeEmphasis }]}>
|
||||
DESIGN SYSTEM
|
||||
</Text>
|
||||
<Text variant="bodySmall" style={styles.version}>
|
||||
{brand.name} theme
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
<BrandSwitcher />
|
||||
|
||||
<View style={styles.hexRow}>
|
||||
<DTHexagon size={18} variant="normal" opacity={0.4} />
|
||||
<DTHexagon size={18} variant="emphasis" opacity={0.6} />
|
||||
<DTHexagon size={18} variant="warning" opacity={0.4} />
|
||||
<DTHexagon size={18} variant="success" opacity={0.6} />
|
||||
<DTHexagon size={18} variant="other" opacity={0.4} />
|
||||
</View>
|
||||
|
||||
<Text variant="labelSmall" style={styles.sectionLabel}>
|
||||
COMPONENT CATALOG
|
||||
</Text>
|
||||
|
||||
{categories.map((cat) => (
|
||||
<DTCard
|
||||
key={cat.route}
|
||||
mode={cat.mode}
|
||||
title={cat.title}
|
||||
onPress={() => navigation.navigate(cat.route)}
|
||||
style={styles.card}
|
||||
>
|
||||
<Text variant="bodySmall" style={styles.cardSubtitle}>
|
||||
{cat.subtitle}
|
||||
</Text>
|
||||
{cat.count > 0 && (
|
||||
<Text variant="labelSmall" style={styles.cardCount}>
|
||||
{cat.count} components
|
||||
</Text>
|
||||
)}
|
||||
</DTCard>
|
||||
))}
|
||||
</ScreenContainer>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
header: {
|
||||
alignItems: 'center',
|
||||
marginBottom: 8,
|
||||
},
|
||||
title: {
|
||||
letterSpacing: 2,
|
||||
},
|
||||
subtitle: {
|
||||
letterSpacing: 3,
|
||||
marginTop: 4,
|
||||
},
|
||||
version: {
|
||||
color: 'rgba(255,255,255,0.4)',
|
||||
marginTop: 8,
|
||||
},
|
||||
hexRow: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'center',
|
||||
gap: 10,
|
||||
marginVertical: 24,
|
||||
},
|
||||
sectionLabel: {
|
||||
color: 'rgba(255,255,255,0.5)',
|
||||
letterSpacing: 2,
|
||||
marginBottom: 16,
|
||||
},
|
||||
card: {
|
||||
marginBottom: 16,
|
||||
},
|
||||
cardSubtitle: {
|
||||
color: 'rgba(255,255,255,0.7)',
|
||||
},
|
||||
cardCount: {
|
||||
color: 'rgba(255,255,255,0.4)',
|
||||
marginTop: 8,
|
||||
},
|
||||
});
|
||||
298
packages/showcase/mobile/src/screens/OverlaysScreen.tsx
Normal file
298
packages/showcase/mobile/src/screens/OverlaysScreen.tsx
Normal file
@@ -0,0 +1,298 @@
|
||||
import React, { useState } from 'react';
|
||||
import { View } from 'react-native';
|
||||
import { Text } from 'react-native-paper';
|
||||
import {
|
||||
DTButton,
|
||||
DTCard,
|
||||
DTChip,
|
||||
DTModal,
|
||||
DTDrawer,
|
||||
DTAccordion,
|
||||
DTMenu,
|
||||
DTMenuDropdown,
|
||||
DTGallery,
|
||||
useDTTheme,
|
||||
} from '@dangerousthings/react-native';
|
||||
import { ScreenContainer } from '../components/ScreenContainer';
|
||||
import { DemoSection } from '../components/DemoSection';
|
||||
import { CodeLabel } from '../components/CodeLabel';
|
||||
import { galleryItems, menuItems, horizontalMenuItems, dropdownItems } from '../data/sampleData';
|
||||
|
||||
export function OverlaysScreen() {
|
||||
const theme = useDTTheme();
|
||||
|
||||
// Modal state
|
||||
const [modalVisible, setModalVisible] = useState(false);
|
||||
const [warningModalVisible, setWarningModalVisible] = useState(false);
|
||||
|
||||
// Drawer state
|
||||
const [rightDrawer, setRightDrawer] = useState(false);
|
||||
const [leftDrawer, setLeftDrawer] = useState(false);
|
||||
|
||||
// Menu dropdown state
|
||||
const [menuDropdownVisible, setMenuDropdownVisible] = useState(false);
|
||||
|
||||
// Gallery state
|
||||
const [galleryIndex, setGalleryIndex] = useState(0);
|
||||
|
||||
return (
|
||||
<ScreenContainer>
|
||||
{/* DTModal */}
|
||||
<DemoSection
|
||||
title="DTModal"
|
||||
variant="normal"
|
||||
description="Wraps RNP Portal + Modal. Content rendered inside DTCard."
|
||||
>
|
||||
<View style={{ gap: 12 }}>
|
||||
<DTButton variant="normal" onPress={() => setModalVisible(true)}>
|
||||
OPEN NORMAL MODAL
|
||||
</DTButton>
|
||||
<DTButton variant="warning" onPress={() => setWarningModalVisible(true)}>
|
||||
OPEN WARNING MODAL
|
||||
</DTButton>
|
||||
</View>
|
||||
|
||||
<DTModal
|
||||
visible={modalVisible}
|
||||
onDismiss={() => setModalVisible(false)}
|
||||
title="CONFIRM ACTION"
|
||||
variant="normal"
|
||||
>
|
||||
<Text variant="bodyMedium" style={{ color: theme.colors.onSurface, marginBottom: 16 }}>
|
||||
Are you sure you want to proceed with this action?
|
||||
</Text>
|
||||
<View style={{ flexDirection: 'row', gap: 12 }}>
|
||||
<DTButton
|
||||
variant="normal"
|
||||
mode="contained"
|
||||
onPress={() => setModalVisible(false)}
|
||||
style={{ flex: 1 }}
|
||||
>
|
||||
CONFIRM
|
||||
</DTButton>
|
||||
<DTButton
|
||||
variant="normal"
|
||||
onPress={() => setModalVisible(false)}
|
||||
style={{ flex: 1 }}
|
||||
>
|
||||
CANCEL
|
||||
</DTButton>
|
||||
</View>
|
||||
</DTModal>
|
||||
|
||||
<DTModal
|
||||
visible={warningModalVisible}
|
||||
onDismiss={() => setWarningModalVisible(false)}
|
||||
title="DELETE ITEM"
|
||||
variant="warning"
|
||||
>
|
||||
<Text variant="bodyMedium" style={{ color: theme.colors.onSurface, marginBottom: 16 }}>
|
||||
This action cannot be undone. All data will be permanently removed.
|
||||
</Text>
|
||||
<DTButton
|
||||
variant="warning"
|
||||
mode="contained"
|
||||
onPress={() => setWarningModalVisible(false)}
|
||||
>
|
||||
DELETE
|
||||
</DTButton>
|
||||
</DTModal>
|
||||
</DemoSection>
|
||||
|
||||
{/* DTDrawer */}
|
||||
<DemoSection
|
||||
title="DTDrawer"
|
||||
variant="emphasis"
|
||||
description="Sliding panel via Portal + Animated. Beveled leading edge."
|
||||
>
|
||||
<View style={{ gap: 12 }}>
|
||||
<DTButton variant="emphasis" onPress={() => setRightDrawer(true)}>
|
||||
OPEN RIGHT DRAWER
|
||||
</DTButton>
|
||||
<DTButton variant="normal" onPress={() => setLeftDrawer(true)}>
|
||||
OPEN LEFT DRAWER
|
||||
</DTButton>
|
||||
</View>
|
||||
|
||||
<DTDrawer
|
||||
visible={rightDrawer}
|
||||
onDismiss={() => setRightDrawer(false)}
|
||||
heading="CART"
|
||||
headingVariant="emphasis"
|
||||
position="right"
|
||||
>
|
||||
<DTCard mode="normal" title="ITEM 1" style={{ marginBottom: 12 }}>
|
||||
<Text style={{ color: theme.colors.onSurface }}>xNT NFC Implant</Text>
|
||||
</DTCard>
|
||||
<DTCard mode="normal" title="ITEM 2" style={{ marginBottom: 12 }}>
|
||||
<Text style={{ color: theme.colors.onSurface }}>xDF2 DESFire Implant</Text>
|
||||
</DTCard>
|
||||
<DTButton
|
||||
variant="emphasis"
|
||||
mode="contained"
|
||||
onPress={() => setRightDrawer(false)}
|
||||
>
|
||||
CHECKOUT
|
||||
</DTButton>
|
||||
</DTDrawer>
|
||||
|
||||
<DTDrawer
|
||||
visible={leftDrawer}
|
||||
onDismiss={() => setLeftDrawer(false)}
|
||||
heading="MENU"
|
||||
headingVariant="normal"
|
||||
position="left"
|
||||
>
|
||||
<View style={{ gap: 12 }}>
|
||||
<DTButton variant="normal" onPress={() => setLeftDrawer(false)}>
|
||||
HOME
|
||||
</DTButton>
|
||||
<DTButton variant="normal" onPress={() => setLeftDrawer(false)}>
|
||||
PRODUCTS
|
||||
</DTButton>
|
||||
<DTButton variant="normal" onPress={() => setLeftDrawer(false)}>
|
||||
ABOUT
|
||||
</DTButton>
|
||||
<DTButton variant="normal" onPress={() => setLeftDrawer(false)}>
|
||||
CONTACT
|
||||
</DTButton>
|
||||
</View>
|
||||
</DTDrawer>
|
||||
</DemoSection>
|
||||
|
||||
{/* DTAccordion */}
|
||||
<DemoSection
|
||||
title="DTAccordion"
|
||||
variant="normal"
|
||||
description="Wraps RNP List.Accordion with angular headers and thick top border."
|
||||
>
|
||||
<Text variant="labelSmall" style={{ color: theme.colors.onSurface, opacity: 0.6, marginBottom: 8 }}>
|
||||
SINGLE EXPAND:
|
||||
</Text>
|
||||
<DTAccordion
|
||||
variant="normal"
|
||||
activeVariant="emphasis"
|
||||
sections={[
|
||||
{
|
||||
key: 'size',
|
||||
title: 'Size',
|
||||
children: (
|
||||
<View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
|
||||
<DTChip variant="normal">Small</DTChip>
|
||||
<DTChip variant="normal">Medium</DTChip>
|
||||
<DTChip variant="normal">Large</DTChip>
|
||||
</View>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: 'type',
|
||||
title: 'Chip Type',
|
||||
children: (
|
||||
<View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
|
||||
<DTChip variant="emphasis">NTAG</DTChip>
|
||||
<DTChip variant="emphasis">DESFire</DTChip>
|
||||
<DTChip variant="emphasis">MIFARE Classic</DTChip>
|
||||
</View>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: 'freq',
|
||||
title: 'Frequency',
|
||||
children: (
|
||||
<View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
|
||||
<DTChip variant="success">13.56 MHz (HF)</DTChip>
|
||||
<DTChip variant="success">125 kHz (LF)</DTChip>
|
||||
</View>
|
||||
),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
||||
<Text variant="labelSmall" style={{ color: theme.colors.onSurface, opacity: 0.6, marginTop: 24, marginBottom: 8 }}>
|
||||
MULTI EXPAND:
|
||||
</Text>
|
||||
<DTAccordion
|
||||
variant="other"
|
||||
activeVariant="warning"
|
||||
allowMultiple
|
||||
initialOpenKeys={['about']}
|
||||
sections={[
|
||||
{
|
||||
key: 'about',
|
||||
title: 'About',
|
||||
children: (
|
||||
<Text style={{ color: theme.colors.onSurface }}>
|
||||
Dangerous Things makes NFC and RFID implants for human use.
|
||||
</Text>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: 'faq',
|
||||
title: 'FAQ',
|
||||
children: (
|
||||
<Text style={{ color: theme.colors.onSurface }}>
|
||||
Frequently asked questions about biohacking and body implants.
|
||||
</Text>
|
||||
),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</DemoSection>
|
||||
|
||||
{/* DTMenu */}
|
||||
<DemoSection
|
||||
title="DTMenu"
|
||||
variant="normal"
|
||||
description="Hierarchical menu with expandable sub-items. Thick top border accent."
|
||||
>
|
||||
<Text variant="labelSmall" style={{ color: theme.colors.onSurface, opacity: 0.6, marginBottom: 8 }}>
|
||||
VERTICAL (default):
|
||||
</Text>
|
||||
<DTMenu
|
||||
variant="normal"
|
||||
activeVariant="emphasis"
|
||||
items={menuItems}
|
||||
/>
|
||||
|
||||
<Text variant="labelSmall" style={{ color: theme.colors.onSurface, opacity: 0.6, marginTop: 24, marginBottom: 8 }}>
|
||||
HORIZONTAL:
|
||||
</Text>
|
||||
<DTMenu
|
||||
variant="normal"
|
||||
layout="horizontal"
|
||||
items={horizontalMenuItems}
|
||||
/>
|
||||
|
||||
<Text variant="labelSmall" style={{ color: theme.colors.onSurface, opacity: 0.6, marginTop: 24, marginBottom: 8 }}>
|
||||
DROPDOWN (DTMenuDropdown):
|
||||
</Text>
|
||||
<DTMenuDropdown
|
||||
visible={menuDropdownVisible}
|
||||
onDismiss={() => setMenuDropdownVisible(false)}
|
||||
variant="normal"
|
||||
anchor={
|
||||
<DTButton variant="normal" onPress={() => setMenuDropdownVisible(true)}>
|
||||
OPEN DROPDOWN
|
||||
</DTButton>
|
||||
}
|
||||
items={dropdownItems}
|
||||
/>
|
||||
</DemoSection>
|
||||
|
||||
{/* DTGallery */}
|
||||
<DemoSection
|
||||
title="DTGallery"
|
||||
variant="normal"
|
||||
description="Image gallery with thumbnail strip and arrow navigation."
|
||||
>
|
||||
<DTGallery
|
||||
items={galleryItems}
|
||||
activeIndex={galleryIndex}
|
||||
onSelect={setGalleryIndex}
|
||||
variant="normal"
|
||||
thumbnailSize={64}
|
||||
/>
|
||||
</DemoSection>
|
||||
</ScreenContainer>
|
||||
);
|
||||
}
|
||||
201
packages/showcase/mobile/src/screens/ThemeScreen.tsx
Normal file
201
packages/showcase/mobile/src/screens/ThemeScreen.tsx
Normal file
@@ -0,0 +1,201 @@
|
||||
import React from 'react';
|
||||
import { View, StyleSheet } from 'react-native';
|
||||
import { Text } from 'react-native-paper';
|
||||
import { useDTTheme } from '@dangerousthings/react-native';
|
||||
import { ScreenContainer } from '../components/ScreenContainer';
|
||||
import { DemoSection } from '../components/DemoSection';
|
||||
import { BrandSwitcher } from '../components/BrandSwitcher';
|
||||
import { useBrand } from '../brand/BrandContext';
|
||||
|
||||
const typographyScale = [
|
||||
{ variant: 'displaySmall' as const, label: 'Display Small (36px)' },
|
||||
{ variant: 'headlineMedium' as const, label: 'Headline Medium (28px)' },
|
||||
{ variant: 'headlineSmall' as const, label: 'Headline Small (24px)' },
|
||||
{ variant: 'titleLarge' as const, label: 'Title Large (22px)' },
|
||||
{ variant: 'titleMedium' as const, label: 'Title Medium (16px)' },
|
||||
{ variant: 'bodyLarge' as const, label: 'Body Large (16px)' },
|
||||
{ variant: 'bodyMedium' as const, label: 'Body Medium (14px)' },
|
||||
{ variant: 'bodySmall' as const, label: 'Body Small (12px)' },
|
||||
{ variant: 'labelLarge' as const, label: 'Label Large (14px)' },
|
||||
{ variant: 'labelSmall' as const, label: 'Label Small (11px)' },
|
||||
];
|
||||
|
||||
export function ThemeScreen() {
|
||||
const theme = useDTTheme();
|
||||
const { brand } = useBrand();
|
||||
const colors = brand.dark;
|
||||
|
||||
const colorSwatches = [
|
||||
{ name: 'primary', hex: colors.primary, label: 'Primary interactive' },
|
||||
{ name: 'secondary', hex: colors.secondary, label: 'Highlights, attention' },
|
||||
{ name: 'error', hex: colors.error, label: 'Errors, destructive' },
|
||||
{ name: 'success', hex: colors.success, label: 'Confirmations' },
|
||||
{ name: 'other', hex: colors.other, label: 'Secondary, misc' },
|
||||
];
|
||||
|
||||
const baseColors = [
|
||||
{ name: 'bg', hex: colors.bg, label: 'Background', textColor: colors.textPrimary },
|
||||
{ name: 'textPrimary', hex: colors.textPrimary, label: 'Text', textColor: colors.bg },
|
||||
{ name: 'surface', hex: colors.surface, label: 'Surface', textColor: colors.textPrimary },
|
||||
{ name: 'border', hex: colors.border, label: 'Border', textColor: colors.bg },
|
||||
];
|
||||
|
||||
return (
|
||||
<ScreenContainer>
|
||||
{/* Brand Switcher */}
|
||||
<DemoSection
|
||||
title="Brand Selector"
|
||||
variant="emphasis"
|
||||
description="Switch between all three brand themes."
|
||||
>
|
||||
<BrandSwitcher />
|
||||
<Text variant="bodySmall" style={{ color: 'rgba(255,255,255,0.5)', textAlign: 'center' }}>
|
||||
Current: {brand.name} — {brand.description}
|
||||
</Text>
|
||||
</DemoSection>
|
||||
|
||||
{/* Color Palette */}
|
||||
<DemoSection
|
||||
title="Color Palette"
|
||||
variant="normal"
|
||||
description={`The ${brand.name} color system. Semantic variants on dark background.`}
|
||||
>
|
||||
<Text variant="labelSmall" style={styles.subLabel}>MODE COLORS:</Text>
|
||||
{colorSwatches.map((swatch) => (
|
||||
<View key={swatch.name} style={styles.swatchRow}>
|
||||
<View style={[styles.swatch, { backgroundColor: swatch.hex }]} />
|
||||
<View style={styles.swatchInfo}>
|
||||
<Text style={[styles.swatchName, { color: swatch.hex }]}>{swatch.name}</Text>
|
||||
<Text style={styles.swatchHex}>{swatch.hex}</Text>
|
||||
<Text style={styles.swatchDesc}>{swatch.label}</Text>
|
||||
</View>
|
||||
</View>
|
||||
))}
|
||||
|
||||
<Text variant="labelSmall" style={[styles.subLabel, { marginTop: 20 }]}>BASE COLORS:</Text>
|
||||
{baseColors.map((color) => (
|
||||
<View key={color.name} style={styles.swatchRow}>
|
||||
<View style={[styles.swatch, { backgroundColor: color.hex, borderWidth: 1, borderColor: '#333' }]} />
|
||||
<View style={styles.swatchInfo}>
|
||||
<Text style={[styles.swatchName, { color: theme.colors.onSurface }]}>{color.name}</Text>
|
||||
<Text style={styles.swatchHex}>{color.hex}</Text>
|
||||
<Text style={styles.swatchDesc}>{color.label}</Text>
|
||||
</View>
|
||||
</View>
|
||||
))}
|
||||
</DemoSection>
|
||||
|
||||
{/* Typography */}
|
||||
<DemoSection
|
||||
title="Typography Scale"
|
||||
variant="emphasis"
|
||||
description={`MD3 type scale. Font: ${brand.typography.heading}`}
|
||||
>
|
||||
<View style={{ gap: 8 }}>
|
||||
{typographyScale.map((item) => (
|
||||
<View key={item.variant} style={styles.typeRow}>
|
||||
<Text variant={item.variant} style={{ color: theme.colors.onSurface }}>
|
||||
{item.label}
|
||||
</Text>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
</DemoSection>
|
||||
|
||||
{/* Shape Tokens */}
|
||||
<DemoSection
|
||||
title="Shape Tokens"
|
||||
variant="success"
|
||||
description="Bevel and radius values for the current brand."
|
||||
>
|
||||
<View style={styles.codeBlock}>
|
||||
<Text style={[styles.codeText, { color: theme.custom.modeSuccess }]}>
|
||||
{`bevelSm: ${brand.shape.bevelSm}\nbevelMd: ${brand.shape.bevelMd}\nbevelLg: ${brand.shape.bevelLg}\nradiusSm: ${brand.shape.radiusSm}\nradius: ${brand.shape.radius}\nradiusLg: ${brand.shape.radiusLg}`}
|
||||
</Text>
|
||||
</View>
|
||||
</DemoSection>
|
||||
|
||||
{/* Spacing */}
|
||||
<DemoSection
|
||||
title="Spacing Reference"
|
||||
variant="other"
|
||||
description="Common spacing values used throughout the design system."
|
||||
>
|
||||
{[4, 8, 12, 16, 24, 32, 48].map((size) => (
|
||||
<View key={size} style={styles.spacingRow}>
|
||||
<View
|
||||
style={[
|
||||
styles.spacingBar,
|
||||
{ width: size * 3, backgroundColor: theme.custom.modeOther },
|
||||
]}
|
||||
/>
|
||||
<Text style={styles.spacingLabel}>{size}px</Text>
|
||||
</View>
|
||||
))}
|
||||
</DemoSection>
|
||||
</ScreenContainer>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
subLabel: {
|
||||
color: 'rgba(255,255,255,0.6)',
|
||||
marginBottom: 12,
|
||||
},
|
||||
swatchRow: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 12,
|
||||
marginBottom: 12,
|
||||
},
|
||||
swatch: {
|
||||
width: 40,
|
||||
height: 40,
|
||||
},
|
||||
swatchInfo: {
|
||||
flex: 1,
|
||||
},
|
||||
swatchName: {
|
||||
fontWeight: '600',
|
||||
fontSize: 14,
|
||||
},
|
||||
swatchHex: {
|
||||
color: 'rgba(255,255,255,0.5)',
|
||||
fontSize: 11,
|
||||
fontFamily: 'monospace',
|
||||
},
|
||||
swatchDesc: {
|
||||
color: 'rgba(255,255,255,0.35)',
|
||||
fontSize: 11,
|
||||
},
|
||||
typeRow: {
|
||||
paddingVertical: 4,
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: 'rgba(255,255,255,0.05)',
|
||||
},
|
||||
codeBlock: {
|
||||
backgroundColor: '#0a0a0a',
|
||||
padding: 16,
|
||||
borderWidth: 1,
|
||||
borderColor: 'rgba(255,255,255,0.1)',
|
||||
},
|
||||
codeText: {
|
||||
fontFamily: 'monospace',
|
||||
fontSize: 12,
|
||||
lineHeight: 20,
|
||||
},
|
||||
spacingRow: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 12,
|
||||
marginBottom: 8,
|
||||
},
|
||||
spacingBar: {
|
||||
height: 12,
|
||||
},
|
||||
spacingLabel: {
|
||||
color: 'rgba(255,255,255,0.5)',
|
||||
fontSize: 11,
|
||||
fontFamily: 'monospace',
|
||||
},
|
||||
});
|
||||
6
packages/showcase/mobile/tsconfig.json
Normal file
6
packages/showcase/mobile/tsconfig.json
Normal file
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"extends": "expo/tsconfig.base",
|
||||
"compilerOptions": {
|
||||
"strict": true
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user