create-proto 0.3.2 → 0.4.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cli.d.ts.map +1 -1
- package/dist/cli.js +2 -0
- package/dist/cli.js.map +1 -1
- package/dist/write-design.d.ts +7 -0
- package/dist/write-design.d.ts.map +1 -0
- package/dist/write-design.js +17 -0
- package/dist/write-design.js.map +1 -0
- package/package.json +2 -2
- package/template/CLAUDE.md +10 -0
- package/template/assets/lottie/.gitkeep +0 -0
- package/template/components/proto/canvas/index.ts +15 -0
- package/template/components/proto/gestures/index.ts +21 -0
- package/template/components/proto/lottie/index.tsx +13 -0
- package/template/components/proto/motion/index.tsx +80 -0
- package/template/package.json +3 -0
- package/template/DESIGN.md +0 -34
package/dist/cli.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"cli.d.ts","sourceRoot":"","sources":["../src/cli.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"cli.d.ts","sourceRoot":"","sources":["../src/cli.ts"],"names":[],"mappings":"AAiBA,wBAAsB,GAAG,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,OAAO,CAAC,IAAI,CAAC,CA4FvD"}
|
package/dist/cli.js
CHANGED
|
@@ -10,6 +10,7 @@ import { detectPm } from './detect-pm.js';
|
|
|
10
10
|
import { copyTemplate } from './copy-template.js';
|
|
11
11
|
import { installDeps } from './install-deps.js';
|
|
12
12
|
import { renderBanner, readOwnVersion } from './banner.js';
|
|
13
|
+
import { writeDesignDoc } from './write-design.js';
|
|
13
14
|
const DEFAULT_NAME = 'my-prototype';
|
|
14
15
|
const EXPECTED_SETUP_SECONDS = 60;
|
|
15
16
|
export async function run(argv) {
|
|
@@ -63,6 +64,7 @@ export async function run(argv) {
|
|
|
63
64
|
'{{DATE}}': today,
|
|
64
65
|
},
|
|
65
66
|
});
|
|
67
|
+
await writeDesignDoc({ destRoot: dest, projectName: name, date: today });
|
|
66
68
|
const pm = detectPm(process.env.npm_config_user_agent);
|
|
67
69
|
await installDeps({ cwd: dest, pm });
|
|
68
70
|
clearInterval(tick);
|
package/dist/cli.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"cli.js","sourceRoot":"","sources":["../src/cli.ts"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,WAAW,CAAC;AAC7B,OAAO,EAAE,MAAM,SAAS,CAAC;AACzB,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AACzC,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAC5C,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,EAAE,MAAM,gBAAgB,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;
|
|
1
|
+
{"version":3,"file":"cli.js","sourceRoot":"","sources":["../src/cli.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"write-design.d.ts","sourceRoot":"","sources":["../src/write-design.ts"],"names":[],"mappings":"AAQA,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,wBAAsB,cAAc,CAAC,OAAO,EAAE,kBAAkB,GAAG,OAAO,CAAC,IAAI,CAAC,CAS/E"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import fs from 'node:fs';
|
|
2
|
+
import path from 'node:path';
|
|
3
|
+
import { renderDesignDoc } from '@sherizan/proto-cli/design';
|
|
4
|
+
import { getLibrary } from '@sherizan/proto-cli/design-libraries';
|
|
5
|
+
const DEFAULT_THEME = 'liquidGlass';
|
|
6
|
+
const DEFAULT_ACCENT = '#007AFF';
|
|
7
|
+
export async function writeDesignDoc(options) {
|
|
8
|
+
const md = renderDesignDoc({
|
|
9
|
+
appName: options.projectName,
|
|
10
|
+
theme: DEFAULT_THEME,
|
|
11
|
+
accent: DEFAULT_ACCENT,
|
|
12
|
+
library: getLibrary('proto'),
|
|
13
|
+
date: options.date,
|
|
14
|
+
});
|
|
15
|
+
await fs.promises.writeFile(path.join(options.destRoot, 'DESIGN.md'), md, 'utf8');
|
|
16
|
+
}
|
|
17
|
+
//# sourceMappingURL=write-design.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"write-design.js","sourceRoot":"","sources":["../src/write-design.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,SAAS,CAAC;AACzB,OAAO,IAAI,MAAM,WAAW,CAAC;AAC7B,OAAO,EAAE,eAAe,EAAkB,MAAM,4BAA4B,CAAC;AAC7E,OAAO,EAAE,UAAU,EAAE,MAAM,sCAAsC,CAAC;AAElE,MAAM,aAAa,GAAc,aAAa,CAAC;AAC/C,MAAM,cAAc,GAAG,SAAS,CAAC;AAQjC,MAAM,CAAC,KAAK,UAAU,cAAc,CAAC,OAA2B;IAC9D,MAAM,EAAE,GAAG,eAAe,CAAC;QACzB,OAAO,EAAE,OAAO,CAAC,WAAW;QAC5B,KAAK,EAAE,aAAa;QACpB,MAAM,EAAE,cAAc;QACtB,OAAO,EAAE,UAAU,CAAC,OAAO,CAAC;QAC5B,IAAI,EAAE,OAAO,CAAC,IAAI;KACnB,CAAC,CAAC;IACH,MAAM,EAAE,CAAC,QAAQ,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,QAAQ,EAAE,WAAW,CAAC,EAAE,EAAE,EAAE,MAAM,CAAC,CAAC;AACpF,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "create-proto",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.4.1",
|
|
4
4
|
"description": "Scaffold a new Proto prototype: `npm create proto@latest myapp`. Designer-first native iOS prototyping environment that pairs with Claude Code.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"license": "MIT",
|
|
@@ -42,7 +42,7 @@
|
|
|
42
42
|
},
|
|
43
43
|
"dependencies": {
|
|
44
44
|
"@clack/prompts": "^0.7.0",
|
|
45
|
-
"@sherizan/proto-cli": "^0.
|
|
45
|
+
"@sherizan/proto-cli": "^0.4.1",
|
|
46
46
|
"fs-extra": "^11.2.0",
|
|
47
47
|
"qrcode-terminal": "^0.12.0",
|
|
48
48
|
"validate-npm-package-name": "^5.0.1"
|
package/template/CLAUDE.md
CHANGED
|
@@ -18,6 +18,15 @@ You're the design tool inside a Prototo project. The designer prompts you in pla
|
|
|
18
18
|
|
|
19
19
|
**Prototo primitives** in `/components/proto` — small set of themed fallbacks: `Screen`, `Stack`, `Row`, `Text`, `Card`, `Button`, `Toggle`, `Divider`, `Modal`. Read the file when you need the API. Card's `glass={true}` uses `expo-glass-effect`'s native iOS 26 material; on older iOS it falls back to a plain View.
|
|
20
20
|
|
|
21
|
+
**Prototo motion + graphics** — four subpath modules in `/components/proto` cover animation and drawing. Pick by what the prompt actually asks for:
|
|
22
|
+
|
|
23
|
+
- `../components/proto/motion` — `Motion.View` + `Motion.Pressable`. **Default for transitions.** Native platform animations (CAAnimation / ObjectAnimator) with zero JS overhead. Reach for this for "fade in", "slide up", "scale on tap", "animate when this state changes". Driven by `react-native-ease`.
|
|
24
|
+
- `../components/proto/gestures` — `AnimatedView`, `useSharedValue`, `useAnimatedStyle`, `withSpring`, `Gesture`, `GestureDetector`, etc. Use **only** when the animation must read gesture state, scroll position, or interpolate continuously: "drag this card", "swipe to delete", "parallax this header". Driven by `react-native-reanimated` + `react-native-gesture-handler`.
|
|
25
|
+
- `../components/proto/lottie` — `Lottie` component. Plays `.json` files dropped into `/assets/lottie/`. The designer brings the animation file (LottieFiles / After Effects export); you wire it: `<Lottie source={require('../assets/lottie/<name>.json')} />`. Defaults to `autoPlay` and `loop`. Driven by `lottie-react-native`.
|
|
26
|
+
- `../components/proto/canvas` — `Canvas`, `Path`, `Circle`, `Rect`, `LinearGradient`, etc. For custom drawing that doesn't fit RN's box model: confetti bursts, custom charts, badge shapes. Driven by `@shopify/react-native-skia`.
|
|
27
|
+
|
|
28
|
+
Never import `react-native-ease`, `react-native-reanimated`, `lottie-react-native`, or `@shopify/react-native-skia` directly in a screen — always route through the `../components/proto/<subpath>` module above. If `motion` can't express what's needed, fall back to `gestures`.
|
|
29
|
+
|
|
21
30
|
**Share** — `proto share` starts a tunnel + registers a `prototo.app/p/<token>` link. Stakeholders open the link on iPhone with Prototo App to view the live prototype.
|
|
22
31
|
|
|
23
32
|
**Custom** — when none of the above fit, write the component you need with React Native. Put shared ones in `/components/shared/`. The designer's vision wins; primitives are starting points, not constraints.
|
|
@@ -30,6 +39,7 @@ You're the design tool inside a Prototo project. The designer prompts you in pla
|
|
|
30
39
|
/screens/<Name>.tsx screen, PascalCase, default export
|
|
31
40
|
/components/shared/ designer-created custom components
|
|
32
41
|
/components/proto/ Prototo primitives — read-only
|
|
42
|
+
/assets/lottie/ designer-supplied Lottie JSON files (loaded by the Lottie component)
|
|
33
43
|
```
|
|
34
44
|
|
|
35
45
|
A new screen `screens/Settings.tsx` needs:
|
|
File without changes
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
export {
|
|
2
|
+
default as AnimatedView,
|
|
3
|
+
useSharedValue,
|
|
4
|
+
useAnimatedStyle,
|
|
5
|
+
useDerivedValue,
|
|
6
|
+
useAnimatedScrollHandler,
|
|
7
|
+
useAnimatedReaction,
|
|
8
|
+
withTiming,
|
|
9
|
+
withSpring,
|
|
10
|
+
withDelay,
|
|
11
|
+
withSequence,
|
|
12
|
+
withRepeat,
|
|
13
|
+
cancelAnimation,
|
|
14
|
+
interpolate,
|
|
15
|
+
Extrapolation,
|
|
16
|
+
Easing,
|
|
17
|
+
runOnJS,
|
|
18
|
+
runOnUI,
|
|
19
|
+
} from 'react-native-reanimated';
|
|
20
|
+
|
|
21
|
+
export { Gesture, GestureDetector, GestureHandlerRootView } from 'react-native-gesture-handler';
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { forwardRef } from 'react';
|
|
2
|
+
import LottieView, { type LottieViewProps } from 'lottie-react-native';
|
|
3
|
+
|
|
4
|
+
export type LottieProps = LottieViewProps;
|
|
5
|
+
|
|
6
|
+
export const Lottie = forwardRef<LottieView, LottieProps>(function Lottie(
|
|
7
|
+
{ autoPlay = true, loop = true, ...rest },
|
|
8
|
+
ref,
|
|
9
|
+
) {
|
|
10
|
+
return <LottieView ref={ref} autoPlay={autoPlay} loop={loop} {...rest} />;
|
|
11
|
+
});
|
|
12
|
+
|
|
13
|
+
export type LottieRef = LottieView;
|
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
import { useState, type ReactNode } from 'react';
|
|
2
|
+
import { Pressable, type PressableProps, type ViewStyle } from 'react-native';
|
|
3
|
+
import { EaseView } from 'react-native-ease';
|
|
4
|
+
import type {
|
|
5
|
+
AnimateProps,
|
|
6
|
+
CubicBezier,
|
|
7
|
+
EasingType,
|
|
8
|
+
EaseViewProps,
|
|
9
|
+
NoneTransition,
|
|
10
|
+
SingleTransition,
|
|
11
|
+
SpringTransition,
|
|
12
|
+
TimingTransition,
|
|
13
|
+
Transition,
|
|
14
|
+
TransitionEndEvent,
|
|
15
|
+
TransitionMap,
|
|
16
|
+
TransformOrigin,
|
|
17
|
+
TransformPerspective,
|
|
18
|
+
} from 'react-native-ease';
|
|
19
|
+
|
|
20
|
+
export type MotionPressableProps = Omit<PressableProps, 'children' | 'style'> & {
|
|
21
|
+
animate?: AnimateProps;
|
|
22
|
+
pressedAnimate?: AnimateProps;
|
|
23
|
+
transition?: Transition;
|
|
24
|
+
style?: ViewStyle;
|
|
25
|
+
children?: ReactNode;
|
|
26
|
+
};
|
|
27
|
+
|
|
28
|
+
function MotionPressable({
|
|
29
|
+
animate,
|
|
30
|
+
pressedAnimate,
|
|
31
|
+
transition,
|
|
32
|
+
style,
|
|
33
|
+
children,
|
|
34
|
+
onPressIn,
|
|
35
|
+
onPressOut,
|
|
36
|
+
...rest
|
|
37
|
+
}: MotionPressableProps) {
|
|
38
|
+
const [pressed, setPressed] = useState(false);
|
|
39
|
+
const current: AnimateProps | undefined =
|
|
40
|
+
pressed && pressedAnimate ? { ...animate, ...pressedAnimate } : animate;
|
|
41
|
+
|
|
42
|
+
return (
|
|
43
|
+
<Pressable
|
|
44
|
+
onPressIn={(e) => {
|
|
45
|
+
setPressed(true);
|
|
46
|
+
onPressIn?.(e);
|
|
47
|
+
}}
|
|
48
|
+
onPressOut={(e) => {
|
|
49
|
+
setPressed(false);
|
|
50
|
+
onPressOut?.(e);
|
|
51
|
+
}}
|
|
52
|
+
{...rest}
|
|
53
|
+
>
|
|
54
|
+
<EaseView animate={current} transition={transition} style={style}>
|
|
55
|
+
{children}
|
|
56
|
+
</EaseView>
|
|
57
|
+
</Pressable>
|
|
58
|
+
);
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
export const Motion = {
|
|
62
|
+
View: EaseView,
|
|
63
|
+
Pressable: MotionPressable,
|
|
64
|
+
};
|
|
65
|
+
|
|
66
|
+
export type {
|
|
67
|
+
AnimateProps,
|
|
68
|
+
CubicBezier,
|
|
69
|
+
EasingType,
|
|
70
|
+
EaseViewProps,
|
|
71
|
+
NoneTransition,
|
|
72
|
+
SingleTransition,
|
|
73
|
+
SpringTransition,
|
|
74
|
+
TimingTransition,
|
|
75
|
+
Transition,
|
|
76
|
+
TransitionEndEvent,
|
|
77
|
+
TransitionMap,
|
|
78
|
+
TransformOrigin,
|
|
79
|
+
TransformPerspective,
|
|
80
|
+
};
|
package/template/package.json
CHANGED
|
@@ -10,6 +10,7 @@
|
|
|
10
10
|
},
|
|
11
11
|
"dependencies": {
|
|
12
12
|
"@expo/ui": "55.0.17",
|
|
13
|
+
"@shopify/react-native-skia": "2.4.18",
|
|
13
14
|
"expo": "~55.0.26",
|
|
14
15
|
"expo-clipboard": "~55.0.13",
|
|
15
16
|
"expo-dev-client": "~55.0.35",
|
|
@@ -18,8 +19,10 @@
|
|
|
18
19
|
"expo-router": "~55.0.16",
|
|
19
20
|
"expo-status-bar": "~55.0.6",
|
|
20
21
|
"expo-symbols": "~55.0.9",
|
|
22
|
+
"lottie-react-native": "~7.3.4",
|
|
21
23
|
"react": "19.2.0",
|
|
22
24
|
"react-native": "0.83.6",
|
|
25
|
+
"react-native-ease": "^0.7.2",
|
|
23
26
|
"react-native-gesture-handler": "~2.30.1",
|
|
24
27
|
"react-native-reanimated": "4.2.1",
|
|
25
28
|
"react-native-safe-area-context": "5.6.2",
|
package/template/DESIGN.md
DELETED
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
# DESIGN.md
|
|
2
|
-
|
|
3
|
-
> {{APP_NAME}}'s design system. These are starting defaults — change anything by prompting Claude.
|
|
4
|
-
>
|
|
5
|
-
> Examples:
|
|
6
|
-
> - `update DESIGN.md, change accent to indigo`
|
|
7
|
-
> - `double the spacing scale`
|
|
8
|
-
> - `use SF Pro Rounded for headlines`
|
|
9
|
-
> - `add a brand purple to the palette`
|
|
10
|
-
>
|
|
11
|
-
> Last updated: {{DATE}}
|
|
12
|
-
|
|
13
|
-
## App
|
|
14
|
-
- Name: {{APP_NAME}}
|
|
15
|
-
- Platform: iOS
|
|
16
|
-
|
|
17
|
-
## Tokens
|
|
18
|
-
|
|
19
|
-
### Accent
|
|
20
|
-
#007AFF (iOS system blue)
|
|
21
|
-
|
|
22
|
-
### Type
|
|
23
|
-
iOS system font with dynamic type defaults. Override per-size below if you need custom sizing.
|
|
24
|
-
|
|
25
|
-
### Spacing
|
|
26
|
-
xs 4 · sm 8 · md 16 · lg 24 · xl 32
|
|
27
|
-
|
|
28
|
-
### Surface
|
|
29
|
-
Apple Liquid Glass via `expo-glass-effect` (iOS 26+ native material). On older iOS it falls back to a plain surface — Prototo targets iOS 26.
|
|
30
|
-
|
|
31
|
-
(Add your own tokens below as you describe what you want. Claude rewrites this file as the design system evolves.)
|
|
32
|
-
|
|
33
|
-
## Screens
|
|
34
|
-
- Home — welcome screen with tutorial prompts
|