Added project pages and cards, most of the screens in chris samuels figma design document. Still need to implement project initialization modal and walkthrough, connect to backend and connect to wallet (maybe be beyond scope of this project)
This commit is contained in:
@@ -0,0 +1,36 @@
|
||||
# Scripts and Hooks
|
||||
|
||||
This directory contains utility scripts for the project.
|
||||
|
||||
## Lefthook Configuration
|
||||
|
||||
The project uses [Lefthook](https://github.com/evilmartians/lefthook) for git hooks to ensure code quality before commits.
|
||||
|
||||
### Pre-commit Hooks
|
||||
|
||||
The pre-commit hooks run:
|
||||
|
||||
1. **Linting** - Checks and fixes code style issues
|
||||
2. **Formatting** - Ensures consistent code formatting
|
||||
3. **Type Checking** - Verifies TypeScript types
|
||||
|
||||
These hooks are configured in `lefthook.yaml` in the root directory.
|
||||
|
||||
### Usage
|
||||
|
||||
The hooks run automatically when you commit code. You can also run them manually:
|
||||
|
||||
```bash
|
||||
# Run all pre-commit hooks
|
||||
pnpm test:hooks
|
||||
|
||||
# Run individual commands
|
||||
pnpm lint:fix
|
||||
pnpm format:fix
|
||||
pnpm check-types
|
||||
pnpm fix-all
|
||||
```
|
||||
|
||||
## VS Code Integration
|
||||
|
||||
TypeScript errors will show up directly in VS Code thanks to the configuration in `.vscode/settings.json`.
|
||||
@@ -0,0 +1,63 @@
|
||||
#!/bin/bash
|
||||
|
||||
# Set colors for better visibility
|
||||
GREEN='\033[0;32m'
|
||||
YELLOW='\033[1;33m'
|
||||
RED='\033[0;31m'
|
||||
NC='\033[0m' # No Color
|
||||
|
||||
# Print header
|
||||
echo -e "${GREEN}=== Qwrk Laconic Core - Cleanup Script ===${NC}"
|
||||
echo -e "${YELLOW}This script will remove all node_modules, .next, and dist folders${NC}"
|
||||
echo
|
||||
|
||||
# Ask for confirmation
|
||||
read -p "Are you sure you want to continue? [y/N] " -n 1 -r
|
||||
echo
|
||||
if [[ ! $REPLY =~ ^[Yy]$ ]]
|
||||
then
|
||||
echo -e "${RED}Cleanup aborted.${NC}"
|
||||
exit 1
|
||||
fi
|
||||
|
||||
echo -e "${YELLOW}Starting cleanup...${NC}"
|
||||
|
||||
# Find and display total size before cleanup
|
||||
echo -e "${GREEN}Calculating size of directories to be removed...${NC}"
|
||||
TOTAL_SIZE=$(du -sh $(find . -type d \( -name "node_modules" -o -name ".next" -o -name "dist" \) -not -path "*/\.*/*" 2>/dev/null) 2>/dev/null | awk '{sum+=$1} END {print sum}')
|
||||
echo -e "${YELLOW}Total space to be freed: ${TOTAL_SIZE}${NC}"
|
||||
|
||||
# Count directories of each type
|
||||
NODE_MODULES_COUNT=$(find . -type d -name "node_modules" -not -path "*/\.*/*" | wc -l)
|
||||
NEXT_COUNT=$(find . -type d -name ".next" -not -path "*/\.*/*" | wc -l)
|
||||
DIST_COUNT=$(find . -type d -name "dist" -not -path "*/\.*/*" | wc -l)
|
||||
|
||||
echo "Found:"
|
||||
echo -e "- ${NODE_MODULES_COUNT} ${YELLOW}node_modules${NC} directories"
|
||||
echo -e "- ${NEXT_COUNT} ${YELLOW}.next${NC} directories"
|
||||
echo -e "- ${DIST_COUNT} ${YELLOW}dist${NC} directories"
|
||||
echo
|
||||
|
||||
# Final confirmation
|
||||
read -p "Proceed with deletion? [y/N] " -n 1 -r
|
||||
echo
|
||||
if [[ ! $REPLY =~ ^[Yy]$ ]]
|
||||
then
|
||||
echo -e "${RED}Cleanup aborted.${NC}"
|
||||
exit 1
|
||||
fi
|
||||
|
||||
# Perform the cleanup
|
||||
echo -e "${GREEN}Removing node_modules directories...${NC}"
|
||||
find . -type d -name "node_modules" -not -path "*/\.*/*" -exec rm -rf {} +
|
||||
|
||||
echo -e "${GREEN}Removing .next directories...${NC}"
|
||||
find . -type d -name ".next" -not -path "*/\.*/*" -exec rm -rf {} +
|
||||
|
||||
echo -e "${GREEN}Removing dist directories...${NC}"
|
||||
find . -type d -name "dist" -not -path "*/\.*/*" -exec rm -rf {} +
|
||||
|
||||
echo -e "${GREEN}Cleanup completed!${NC}"
|
||||
echo -e "${YELLOW}You may want to run 'yarn install' or 'npm install' to reinstall dependencies.${NC}"
|
||||
|
||||
exit 0
|
||||
Executable
+33
@@ -0,0 +1,33 @@
|
||||
#!/bin/bash
|
||||
|
||||
cd /Users/ianlylesblx/IDEA_CORE/laconic/repos/qwrk-laconic-core/services/ui/src/components
|
||||
|
||||
for file in $(find . -maxdepth 1 -type f \( -name "*.tsx" -o -name "*.ts" \) -not -name "index.ts"); do
|
||||
# Extract just the filename without path
|
||||
base_file=$(basename "$file")
|
||||
|
||||
# Get filename without extension
|
||||
base_name="${base_file%.*}"
|
||||
|
||||
# Get file extension
|
||||
extension="${base_file##*.}"
|
||||
|
||||
# Skip if already a directory
|
||||
if [ -d "$base_name" ]; then
|
||||
echo "Directory $base_name already exists, skipping"
|
||||
continue
|
||||
fi
|
||||
|
||||
# Create directory
|
||||
mkdir -p "$base_name"
|
||||
|
||||
# Create index.ts
|
||||
echo "export * from './$base_file';" > "$base_name/index.ts"
|
||||
|
||||
# Move file
|
||||
mv "$base_file" "$base_name/"
|
||||
|
||||
echo "Processed $base_file -> $base_name/$base_file"
|
||||
done
|
||||
|
||||
echo "Component restructuring complete!"
|
||||
Executable
+70
@@ -0,0 +1,70 @@
|
||||
#!/usr/bin/env node
|
||||
|
||||
import chalk from 'chalk'
|
||||
|
||||
const command = process.argv[2]
|
||||
const files = process.argv.slice(3)
|
||||
|
||||
// Format the command name for display
|
||||
const formatCommand = (cmd) => {
|
||||
switch (cmd) {
|
||||
case 'lint:fix':
|
||||
return chalk.blue.bold('LINTING')
|
||||
case 'format:fix':
|
||||
return chalk.magenta.bold('FORMATTING')
|
||||
case 'check-types':
|
||||
return chalk.yellow.bold('TYPE CHECKING')
|
||||
case 'fix-all':
|
||||
return chalk.green.bold('FIXING ALL ISSUES')
|
||||
default:
|
||||
return chalk.white.bold(cmd.toUpperCase())
|
||||
}
|
||||
}
|
||||
|
||||
// Display a header for the command
|
||||
console.log(
|
||||
`\n${chalk.gray('╔═════════════════════════════════════════════════════════════════════════════╗')}`
|
||||
)
|
||||
console.log(
|
||||
`${chalk.gray('║ ')}${chalk.white.bold(`LEFTHOOK: ${formatCommand(command)}`)}${chalk.gray(' ║')}`
|
||||
)
|
||||
console.log(
|
||||
`${chalk.gray('╚═════════════════════════════════════════════════════════════════════════════╝\n')}`
|
||||
)
|
||||
|
||||
// If we have files, display them
|
||||
if (files.length > 0) {
|
||||
console.log(chalk.gray('Files being processed:'))
|
||||
for (const file of files) {
|
||||
console.log(chalk.cyan(` → ${file}`))
|
||||
}
|
||||
console.log('')
|
||||
}
|
||||
|
||||
// Execute the original command
|
||||
const { execSync } = await import('node:child_process')
|
||||
try {
|
||||
// Construct the command based on what was passed
|
||||
let fullCommand
|
||||
if (files.length > 0 && command !== 'check-types') {
|
||||
// For commands that support specific files
|
||||
fullCommand = `pnpm ${command} ${files.join(' ')}`
|
||||
} else {
|
||||
// For commands that run on the whole project
|
||||
fullCommand = `pnpm ${command}`
|
||||
}
|
||||
|
||||
// Execute the command
|
||||
execSync(fullCommand, { stdio: 'inherit' })
|
||||
|
||||
// Show success message
|
||||
console.log(
|
||||
`\n${chalk.green.bold('✓ SUCCESS')}${chalk.green(` ${formatCommand(command)} completed successfully`)}`
|
||||
)
|
||||
} catch (error) {
|
||||
// Show error message
|
||||
console.log(
|
||||
`\n${chalk.red.bold('✗ ERROR')}${chalk.red(` ${formatCommand(command)} failed`)}`
|
||||
)
|
||||
process.exit(1)
|
||||
}
|
||||
Executable
+134
@@ -0,0 +1,134 @@
|
||||
#!/usr/bin/env node
|
||||
|
||||
/**
|
||||
* Component Structure Setup Script
|
||||
*
|
||||
* This script creates the proper folder structure for each component in the migration list
|
||||
* following the React component conventions.
|
||||
*/
|
||||
|
||||
const fs = require('node:fs')
|
||||
const path = require('node:path')
|
||||
|
||||
// Base directory for components
|
||||
const BASE_DIR = path.join(process.cwd(), 'apps/deploy-fe/src/components')
|
||||
|
||||
// Component mappings from migration list
|
||||
const componentMappings = [
|
||||
// Core Components
|
||||
{ name: 'Dropdown', targetDir: 'core/dropdown' },
|
||||
{ name: 'FormatMilliSecond', targetDir: 'core/format-milli-second' },
|
||||
{ name: 'Logo', targetDir: 'core/logo' },
|
||||
{ name: 'SearchBar', targetDir: 'core/search-bar' },
|
||||
{ name: 'Stepper', targetDir: 'core/stepper' },
|
||||
{ name: 'StopWatch', targetDir: 'core/stop-watch' },
|
||||
{ name: 'VerticalStepper', targetDir: 'core/vertical-stepper' },
|
||||
|
||||
// Layout Components - Navigation
|
||||
{
|
||||
name: 'GitHubSessionButton',
|
||||
targetDir: 'layout/navigation/github-session-button'
|
||||
},
|
||||
{ name: 'LaconicIcon', targetDir: 'layout/navigation/laconic-icon' },
|
||||
{
|
||||
name: 'NavigationActions',
|
||||
targetDir: 'layout/navigation/navigation-actions'
|
||||
},
|
||||
{ name: 'WalletSessionId', targetDir: 'layout/navigation/wallet-session-id' },
|
||||
|
||||
// Layout Components - Screen Header
|
||||
{ name: 'ActionButton', targetDir: 'layout/screen-header/action-button' },
|
||||
{ name: 'Header', targetDir: 'layout/screen-header/header' },
|
||||
|
||||
// Layout Components - Screen Wrapper
|
||||
{ name: 'TabWrapper', targetDir: 'layout/screen-wrapper/tab-wrapper' },
|
||||
|
||||
// Layout Components - Search
|
||||
{ name: 'ProjectSearchBar', targetDir: 'layout/search/project-search-bar' }
|
||||
]
|
||||
|
||||
/**
|
||||
* Create index.ts barrel file content
|
||||
*/
|
||||
function createIndexFileContent(componentName) {
|
||||
return `export * from './${componentName}';\nexport * from './types';\n`
|
||||
}
|
||||
|
||||
/**
|
||||
* Create types.ts file content
|
||||
*/
|
||||
function createTypesFileContent(componentName) {
|
||||
return `export interface ${componentName}Props {\n // Define component props here\n}\n`
|
||||
}
|
||||
|
||||
/**
|
||||
* Create README.md file content
|
||||
*/
|
||||
function createReadmeContent(componentName) {
|
||||
return `# ${componentName} Component\n\n## Overview\nThis component was migrated from the original Laconic repository.\n\n## Usage\n\`\`\`tsx\nimport { ${componentName} } from '@/components/${componentName.toLowerCase()}';\n\n// Example usage\n<${componentName} />\n\`\`\`\n`
|
||||
}
|
||||
|
||||
/**
|
||||
* Create placeholder component file content
|
||||
*/
|
||||
function createComponentFileContent(componentName) {
|
||||
return `import { FC } from 'react';\nimport { ${componentName}Props } from './types';\n\n/**\n * ${componentName} component\n */\nexport const ${componentName}: FC<${componentName}Props> = (props) => {\n return (\n <div>\n {/* Component implementation will be migrated here */}\n </div>\n );\n};\n`
|
||||
}
|
||||
|
||||
/**
|
||||
* Create the folder structure for a component
|
||||
*/
|
||||
function setupComponentStructure(mapping) {
|
||||
const { name, targetDir } = mapping
|
||||
const componentDir = path.join(BASE_DIR, targetDir)
|
||||
|
||||
// Create component directory
|
||||
if (!fs.existsSync(componentDir)) {
|
||||
fs.mkdirSync(componentDir, { recursive: true })
|
||||
console.log(`Created directory: ${componentDir}`)
|
||||
}
|
||||
|
||||
// Create index.ts barrel file
|
||||
const indexPath = path.join(componentDir, 'index.ts')
|
||||
if (!fs.existsSync(indexPath)) {
|
||||
fs.writeFileSync(indexPath, createIndexFileContent(name))
|
||||
console.log(`Created file: ${indexPath}`)
|
||||
}
|
||||
|
||||
// Create types.ts file
|
||||
const typesPath = path.join(componentDir, 'types.ts')
|
||||
if (!fs.existsSync(typesPath)) {
|
||||
fs.writeFileSync(typesPath, createTypesFileContent(name))
|
||||
console.log(`Created file: ${typesPath}`)
|
||||
}
|
||||
|
||||
// Create README.md file
|
||||
const readmePath = path.join(componentDir, 'README.md')
|
||||
if (!fs.existsSync(readmePath)) {
|
||||
fs.writeFileSync(readmePath, createReadmeContent(name))
|
||||
console.log(`Created file: ${readmePath}`)
|
||||
}
|
||||
|
||||
// Create placeholder component file
|
||||
const componentPath = path.join(componentDir, `${name}.tsx`)
|
||||
if (!fs.existsSync(componentPath)) {
|
||||
fs.writeFileSync(componentPath, createComponentFileContent(name))
|
||||
console.log(`Created file: ${componentPath}`)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Main function
|
||||
*/
|
||||
function main() {
|
||||
console.log('Setting up component structure...')
|
||||
|
||||
for (const mapping of componentMappings) {
|
||||
setupComponentStructure(mapping)
|
||||
}
|
||||
|
||||
console.log('\nComponent structure setup complete!')
|
||||
}
|
||||
|
||||
// Run the script
|
||||
main()
|
||||
Reference in New Issue
Block a user