@blocklet/component-studio-cli 0.4.134

package/templates/init/1-professional/global.d.ts

@@ -0,0 +1,131 @@
+declare module '@arcblock/ux/*';
+
+interface ComponentMountPoint {
+  did: string;
+  name: string;
+  mountPoint: string;
+  status: 'running' | 'starting';
+}
+
+interface Window {
+  __discuss_kit_client_id__?: string;
+  blocklet: {
+    appId: string;
+    appPid: string;
+    appLogo: string;
+    prefix: string;
+    appUrl: string;
+    appName: string;
+    appDescription: string;
+    componentMountPoints: ComponentMountPoint[];
+    pageGroup: 'blog' | 'discussion' | 'doc' | 'bookmark' | undefined;
+    capabilities: Record<string, any>;
+    preferences: {
+      maxCommentLength: number;
+      allowDeleteComment: boolean;
+      allowEditComment: boolean;
+      allowImageComment: boolean;
+      maxDiscussionLength: number;
+      maxPinLimit: number;
+      maxFeaturedLimit: number;
+      discussMode: 'knowledge-base' | 'BBS';
+      postsViewMode: 'nested' | 'flat';
+      allowDeleteDiscussion: boolean;
+      allowEditDiscussion: boolean;
+      allowNewDiscussion: boolean;
+      allowLockDiscussion: boolean;
+      allowPublishBlog: boolean;
+      displayBlogComments: boolean;
+      displayLabelFilterOnBlogList: boolean;
+      blogListStyle: 'default';
+      displayAuthorOnBlogList: boolean;
+      displayLabelsOnBlogList: boolean;
+      displayPublishTimeFilterOnBlogList: boolean;
+      displayBoardsOnBlogList: boolean;
+      displaySortingOnBlogList: boolean;
+      displayAuthorOnBlog: boolean;
+      displayLabelsOnBlog: boolean;
+      displayBoardOnBlog: boolean;
+      displayBackButtonOnBlog: boolean;
+      displayConnectButtonOnBlog: boolean;
+      displayReactionOnBlog: boolean;
+      displayReplyButtonForAnonymousUsers: boolean;
+      enableNotificationBadge: boolean;
+      enableAISearch: boolean;
+      enableDiscussLog: boolean;
+      discussLogPosition: 'standard' | 'top';
+      enableDiscussPostLog: boolean;
+      enableDiscussCommentLog: boolean;
+      enableBlogLog: boolean;
+      blogLogPosition: 'standard' | 'top';
+      enableBlogPostLog: boolean;
+      enableBlogCommentLog: boolean;
+      enableDocsLog: boolean;
+      docsLogPosition: 'standard' | 'top';
+      enableDocsPostLog: boolean;
+      enableDocsCommentLog: boolean;
+      badgeList: any[];
+      socialShareButtonsDiscussion: boolean;
+      socialShareButtonsBlog: boolean;
+      socialShareButtonsDoc: boolean;
+      blogListTemplate: 'standard' | 'corp';
+      blogTemplate: 'standard' | 'corp';
+      primaryColor: string;
+      secondaryColor: string;
+      subscriptionPublicType: 'blur' | 'slice';
+      enableAssignmentDiscussion: boolean;
+      enableAssignmentBlog: boolean;
+      enableAssignmentDoc: boolean;
+
+      bannerTitleDiscussionEn: string;
+      bannerTitleDiscussionZh: string;
+      bannerDescDiscussionEn: string;
+      bannerDescDiscussionZh: string;
+
+      bannerTitleBlogEn: string;
+      bannerTitleBlogZh: string;
+      bannerDescBlogEn: string;
+      bannerDescBlogZh: string;
+
+      bannerTitleDocEn: string;
+      bannerTitleDocZh: string;
+      bannerDescDocEn: string;
+      bannerDescDocZh: string;
+
+      bannerTitleBookmarkEn: string;
+      bannerTitleBookmarkZh: string;
+      bannerDescBookmarkEn: string;
+      bannerDescBookmarkZh: string;
+
+      discussionsVisiblePostTypes: string[];
+
+      allowDonationOnDiscussion: boolean;
+      allowDonationOnBlog: boolean;
+      allowDonationOnDoc: boolean;
+      allowDonationOnBookmark: boolean;
+      allowDonationAmountCustom: boolean;
+      discussionDonationButtonText: string;
+      discussionDonationHistoryStyle: string;
+      discussionDonationMaximum: string;
+      discussionDonationMinimum: string;
+      discussionDonationPresets: string;
+
+      discussionEnabled: boolean;
+      blogEnabled: boolean;
+      docEnabled: boolean;
+      bookmarkEnabled: boolean;
+      chatEnabled: boolean;
+
+      assignmentAuthorizedPassports: string[];
+
+      translatorAgentAid?: string;
+      inlineTranslatorAgentAid?: string;
+    };
+  };
+
+  chatInWallet?: {
+    safeAreaInsetTop?: string;
+  };
+
+  uploaderRef?: any;
+}

package/templates/init/1-professional/package.json

@@ -0,0 +1,73 @@
+{
+  "name": "professional-component-studio",
+  "description": "A professional component studio project, with a simple `HelloWorld` component example, and engineered project structure",
+  "private": true,
+  "version": "0.1.0",
+  "engines": {
+    "npm": "please-use-pnpm",
+    "yarn": "please-use-pnpm",
+    "node": ">=18",
+    "pnpm": ">=9"
+  },
+  "scripts": {
+    "dev": "component-studio dev",
+    "start": "component-studio dev",
+    "lint": "biome check . && tsc --noEmit",
+    "lint:skip": "echo 'skip lint'",
+    "lint:fix": "biome check --apply .",
+    "format": "biome format --write .",
+    "prepare": "npx simple-git-hooks",
+    "bump-version": "zx --quiet scripts/bump-version.mjs",
+    "update:deps": "npx -y taze -r -n '/arcblock|ocap|abtnode|blocklet|did-connect|did-comment|nedb/' -w -f && pnpm install && pnpm run deduplicate",
+    "deduplicate": "pnpm dedupe"
+  },
+  "lint-staged": {
+    "*.{mjs,js,jsx,ts,tsx,css,less,scss,json,graphql}": [
+      "pnpm run format",
+      "pnpm run lint:skip"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "@biomejs/biome": "^1.9.4",
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5",
+    "bumpp": "^9.9.3",
+    "lint-staged": "^15.3.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "simple-git-hooks": "^2.11.1",
+    "typescript": "^5.7.2",
+    "zx": "^8.3.0"
+  },
+  "peerDependencies": {
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+  },
+  "importSort": {
+    ".js, .jsx, .mjs": {
+      "parser": "babylon",
+      "style": "module"
+    },
+    ".ts, .tsx": {
+      "style": "module",
+      "parser": "typescript"
+    }
+  },
+  "simple-git-hooks": {
+    "pre-commit": "npx lint-staged"
+  },
+  "license": "MIT"
+}

package/templates/init/1-professional/scripts/bump-version.mjs

@@ -0,0 +1,35 @@
+/* eslint-disable no-console */
+import { execSync } from 'child_process';
+import { $, chalk, fs } from 'zx';
+
+async function main() {
+  execSync('bumpp --no-tag --no-commit --no-push package.json', { stdio: 'inherit' });
+
+  const { version } = await fs.readJSON('package.json');
+  await fs.writeFileSync('version', version);
+
+  let newChangelog = '';
+  try {
+    const gitRes = await $`git log --pretty=format:"- %s" "main"...HEAD`;
+    newChangelog = gitRes.stdout.trim();
+  } catch {
+    console.error(chalk.redBright('Could not get git log, please write changelog manually.'));
+  }
+
+  const now = new Date();
+  const currentDate = `${now.getFullYear()}-${now.getMonth() + 1}-${now.getDate()}`;
+  const title = `## ${version} (${currentDate})`;
+
+  await fs.ensureFile('CHANGELOG.md');
+  const oldChangelog = await fs.readFile('CHANGELOG.md', 'utf8');
+  const changelog = [title, newChangelog, oldChangelog].filter((item) => !!item).join('\n\n');
+  await fs.writeFile('CHANGELOG.md', changelog);
+
+  console.log(`\nNow you can make adjustments to ${chalk.cyan('CHANGELOG.md')} . Then press enter to continue.`);
+
+  process.stdin.setRawMode(true);
+  process.stdin.resume();
+  process.stdin.on('data', process.exit.bind(process, 0));
+}
+
+main();

package/templates/init/1-professional/src/atoms/AnimationWrapper.tsx

@@ -0,0 +1,95 @@
+import React, { useEffect, useState, CSSProperties, ReactNode } from 'react';
+
+export type AnimationType = 'fadeIn' | 'fadeSlideUp' | 'fadeSlideDown';
+
+export interface AnimationWrapperProps {
+  children: ReactNode;
+  animationType: AnimationType;
+  delay?: string;
+  duration?: string;
+  style?: CSSProperties;
+  className?: string;
+}
+
+export const AnimationWrapper: React.FC<AnimationWrapperProps> = ({
+  children,
+  animationType,
+  delay = '0s',
+  duration = '0.7s',
+  style = {},
+  className,
+}) => {
+  const [animateIn, setAnimateIn] = useState(false);
+
+  useEffect(() => {
+    // Trigger entrance animation after component mounts
+    const timer = setTimeout(() => {
+      setAnimateIn(true);
+    }, 50);
+
+    return () => clearTimeout(timer);
+  }, []);
+
+  // Base animation styles
+  const animationStyle: CSSProperties = {
+    opacity: animateIn ? 1 : 0,
+    transform: animateIn
+      ? 'translateY(0)'
+      : animationType === 'fadeSlideUp'
+        ? 'translateY(20px)'
+        : animationType === 'fadeSlideDown'
+          ? 'translateY(-20px)'
+          : 'translateY(0)',
+    transition: `transform ${duration} ease, opacity ${duration} ease`,
+    transitionDelay: delay,
+    ...style,
+  };
+
+  return (
+    <div className={className} style={animationStyle}>
+      {children}
+    </div>
+  );
+};
+
+// Adds required keyframes to document head
+export const useAnimationKeyframes = () => {
+  useEffect(() => {
+    const styleEl = document.createElement('style');
+    styleEl.textContent = `
+      @keyframes fadeIn {
+        from { opacity: 0; }
+        to { opacity: 1; }
+      }
+      
+      @keyframes fadeSlideDown {
+        from { 
+          opacity: 0;
+          transform: translateY(-20px);
+        }
+        to { 
+          opacity: 1;
+          transform: translateY(0);
+        }
+      }
+      
+      @keyframes fadeSlideUp {
+        from { 
+          opacity: 0;
+          transform: translateY(20px);
+        }
+        to { 
+          opacity: 1;
+          transform: translateY(0);
+        }
+      }
+    `;
+    document.head.appendChild(styleEl);
+
+    return () => {
+      document.head.removeChild(styleEl);
+    };
+  }, []);
+};
+
+export default AnimationWrapper;

package/templates/init/1-professional/src/atoms/ArrayTable.tsx

@@ -0,0 +1,114 @@
+import React, { CSSProperties } from 'react';
+
+export interface ArrayTableProps<T extends Record<string, any>> {
+  data: T[];
+  columns: {
+    key: keyof T;
+    header: string;
+    render?: (value: any, record: T) => React.ReactNode;
+  }[];
+  title?: string;
+  style?: CSSProperties;
+  className?: string;
+  animate?: boolean;
+  delay?: string;
+}
+
+export function ArrayTable<T extends Record<string, any>>({
+  data,
+  columns,
+  title = 'Array Data',
+  style = {},
+  className,
+  animate = true,
+  delay = '0.3s',
+}: ArrayTableProps<T>) {
+  const containerStyle: CSSProperties = {
+    margin: '2.5rem 0',
+    ...(animate && {
+      opacity: 1,
+      transform: 'translateY(0)',
+      transition: 'transform 0.4s ease, opacity 0.4s ease',
+      transitionDelay: delay,
+    }),
+    background: 'rgba(255, 255, 255, 0.8)',
+    borderRadius: '16px',
+    padding: '1.5rem',
+    backdropFilter: 'blur(10px)',
+    boxShadow: '0 10px 30px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.03)',
+    border: '1px solid rgba(255, 255, 255, 0.7)',
+    ...style,
+  };
+
+  const headerStyle: CSSProperties = {
+    padding: '1rem 1.5rem',
+    textAlign: 'left',
+    borderBottom: '2px solid rgba(99, 102, 241, 0.2)',
+    color: '#4F46E5',
+    fontWeight: 600,
+    fontSize: '1.1rem',
+  };
+
+  const cellStyle: CSSProperties = {
+    padding: '1rem 1.5rem',
+    borderBottom: '1px solid rgba(229, 231, 235, 0.7)',
+    fontSize: '1.05rem',
+  };
+
+  return (
+    <div style={containerStyle} className={className}>
+      <h3
+        style={{
+          textAlign: 'center',
+          margin: '0 0 1.5rem 0',
+          color: '#4F46E5',
+          fontSize: '1.5rem',
+          fontWeight: 600,
+        }}>
+        {title}
+      </h3>
+      <div style={{ overflowX: 'auto' }}>
+        <table style={{ width: '100%', borderCollapse: 'separate', borderSpacing: '0' }}>
+          <thead>
+            <tr>
+              {columns.map((column, index) => (
+                <th key={index} style={headerStyle}>
+                  {column.header}
+                </th>
+              ))}
+            </tr>
+          </thead>
+          <tbody>
+            {data.map((item, rowIndex) => (
+              <tr
+                key={rowIndex}
+                style={{
+                  background: rowIndex % 2 === 0 ? 'rgba(255, 255, 255, 0.5)' : 'rgba(249, 250, 251, 0.5)',
+                  transition: 'background-color 0.2s ease',
+                }}
+                onMouseOver={(e) => {
+                  e.currentTarget.style.backgroundColor = 'rgba(238, 242, 255, 0.7)';
+                }}
+                onMouseOut={(e) => {
+                  e.currentTarget.style.backgroundColor =
+                    rowIndex % 2 === 0 ? 'rgba(255, 255, 255, 0.5)' : 'rgba(249, 250, 251, 0.5)';
+                }}>
+                {columns.map((column, colIndex) => (
+                  <td key={colIndex} style={cellStyle}>
+                    {column.render
+                      ? column.render(item[column.key], item)
+                      : item[column.key] !== undefined && item[column.key] !== null
+                        ? String(item[column.key])
+                        : '-'}
+                  </td>
+                ))}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}
+
+export default ArrayTable;

package/templates/init/1-professional/src/atoms/Card.tsx

@@ -0,0 +1,52 @@
+import React, { CSSProperties } from 'react';
+
+export interface CardProps {
+  children: React.ReactNode;
+  style?: CSSProperties;
+  background?: string;
+  transitionDelay?: string;
+  className?: string;
+}
+
+export const Card: React.FC<CardProps> = ({
+  children,
+  style,
+  background = 'linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(240, 248, 255, 0.9) 100%)',
+  transitionDelay = '0s',
+  className,
+}) => {
+  const cardStyle: CSSProperties = {
+    padding: '1.5rem',
+    borderRadius: '12px',
+    backdropFilter: 'blur(10px)',
+    boxShadow: '0 10px 30px rgba(0, 0, 0, 0.08), 0 6px 12px rgba(99, 102, 241, 0.1)',
+    transition: 'transform 0.3s ease, box-shadow 0.3s ease',
+    margin: '1rem',
+    flex: '1 1 300px',
+    minWidth: '250px',
+    border: '1px solid rgba(255, 255, 255, 0.3)',
+    background,
+    transitionDelay,
+    ...style,
+  };
+
+  const handleMouseOver = (e: React.MouseEvent<HTMLDivElement>) => {
+    const target = e.currentTarget;
+    target.style.transform = 'translateY(-5px)';
+    target.style.boxShadow = '0 15px 35px rgba(0, 0, 0, 0.1), 0 8px 15px rgba(99, 102, 241, 0.2)';
+  };
+
+  const handleMouseOut = (e: React.MouseEvent<HTMLDivElement>) => {
+    const target = e.currentTarget;
+    target.style.transform = 'translateY(0)';
+    target.style.boxShadow = '0 10px 30px rgba(0, 0, 0, 0.08), 0 6px 12px rgba(99, 102, 241, 0.1)';
+  };
+
+  return (
+    <div className={className} style={cardStyle} onMouseOver={handleMouseOver} onMouseOut={handleMouseOut}>
+      {children}
+    </div>
+  );
+};
+
+export default Card;

package/templates/init/1-professional/src/atoms/ContentWrapper.tsx

@@ -0,0 +1,72 @@
+import React, { CSSProperties, ReactNode } from 'react';
+
+import { useAnimationKeyframes } from './AnimationWrapper';
+
+export interface ContentWrapperProps {
+  children: ReactNode;
+  style?: CSSProperties;
+  className?: string;
+  withDecoration?: boolean;
+}
+
+export const ContentWrapper: React.FC<ContentWrapperProps> = ({
+  children,
+  style = {},
+  className,
+  withDecoration = true,
+}) => {
+  // Add animation keyframes to document
+  useAnimationKeyframes();
+
+  const containerStyle: CSSProperties = {
+    fontFamily: '"Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, sans-serif',
+    padding: '2.5rem',
+    maxWidth: '1200px',
+    margin: '0 auto',
+    background: 'linear-gradient(135deg, #f5f7ff 0%, #ffffff 100%)',
+    borderRadius: '20px',
+    boxShadow: '0 20px 60px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.05)',
+    overflow: 'hidden',
+    position: 'relative',
+    ...style,
+  };
+
+  return (
+    <div className={`content-wrapper ${className || ''}`} style={containerStyle}>
+      {/* Background decoration */}
+      {withDecoration && (
+        <>
+          <div
+            style={{
+              position: 'absolute',
+              top: 0,
+              right: 0,
+              width: '300px',
+              height: '300px',
+              borderRadius: '50%',
+              background: 'radial-gradient(circle, rgba(99, 102, 241, 0.1) 0%, rgba(99, 102, 241, 0) 70%)',
+              zIndex: 0,
+            }}
+          />
+          <div
+            style={{
+              position: 'absolute',
+              bottom: '-100px',
+              left: '-100px',
+              width: '400px',
+              height: '400px',
+              borderRadius: '50%',
+              background: 'radial-gradient(circle, rgba(249, 115, 22, 0.08) 0%, rgba(249, 115, 22, 0) 70%)',
+              zIndex: 0,
+            }}
+          />
+        </>
+      )}
+
+      {/* Content area */}
+      <div style={{ position: 'relative', zIndex: 1 }}>{children}</div>
+    </div>
+  );
+};
+
+export default ContentWrapper;

package/templates/init/1-professional/src/atoms/CopyrightFooter.tsx

@@ -0,0 +1,31 @@
+import React, { CSSProperties } from 'react';
+
+export interface CopyrightFooterProps {
+  text: string;
+  style?: CSSProperties;
+  className?: string;
+  animate?: boolean;
+}
+
+export const CopyrightFooter: React.FC<CopyrightFooterProps> = ({ text, style = {}, className, animate = true }) => {
+  const baseStyle: CSSProperties = {
+    textAlign: 'center',
+    color: '#6B7280',
+    fontSize: '0.9rem',
+    marginTop: '3rem',
+    padding: '1rem 0',
+    borderTop: '1px solid rgba(229, 231, 235, 0.7)',
+    ...(animate && { animation: 'fadeIn 1.2s ease forwards' }),
+    opacity: animate ? 0.8 : 0.7,
+    marginBottom: '-2.5rem',
+    ...style,
+  };
+
+  return (
+    <div className={className} style={baseStyle}>
+      {text}
+    </div>
+  );
+};
+
+export default CopyrightFooter;