Skip to content

Commit 7a5150a

Browse files
mgcreamgcrea
committed
feat(components): add Rectangle, Spacer components, improve styling
1 parent cba9fb8 commit 7a5150a

27 files changed

+229
-64
lines changed

‎example/App.tsx‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,12 @@ import React from 'react';
22
import {BasicFormExample} from './src/views/BasicFormExample';
33
import {FullFormExample} from './src/views/FullFormExample';
44
import {WorkoutExample} from './src/views/WorkoutExample.private';
5-
import {AdvancedFormExample} from './src/views/AdvancedFormExample.private';
65
import {ReactHookFormExample} from './src/views/ReactHookFormExample';
76
import {TanStackFormExample} from './src/views/TanStackFormExample';
7+
import {AdvancedFormExample} from './src/views/AdvancedFormExample.private';
88

99
function App(): React.JSX.Element {
10-
return <BasicFormExample />;
11-
// return <WorkoutExample />;
12-
// return <AdvancedFormExample />;
13-
// return <TanStackFormExample />;
14-
// return <ReactHookFormExample />;
10+
return <FullFormExample />;
1511
}
1612

1713
export default App;

‎example/ios/Podfile.lock‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1525,7 +1525,7 @@ PODS:
15251525
- React-logger (= 0.78.0)
15261526
- React-perflogger (= 0.78.0)
15271527
- React-utils (= 0.78.0)
1528-
- RNSwiftUI (0.0.1):
1528+
- RNSwiftUI (0.2.3):
15291529
- DoubleConversion
15301530
- glog
15311531
- hermes-engine
@@ -1545,10 +1545,8 @@ PODS:
15451545
- ReactCodegen
15461546
- ReactCommon/turbomodule/bridging
15471547
- ReactCommon/turbomodule/core
1548-
- SwiftUIIntrospect (~> 1.3)
15491548
- Yoga
15501549
- SocketRocket (0.7.1)
1551-
- SwiftUIIntrospect (1.3.0)
15521550
- Yoga (0.0.0)
15531551

15541552
DEPENDENCIES:
@@ -1625,7 +1623,6 @@ DEPENDENCIES:
16251623
SPEC REPOS:
16261624
trunk:
16271625
- SocketRocket
1628-
- SwiftUIIntrospect
16291626

16301627
EXTERNAL SOURCES:
16311628
boost:
@@ -1830,9 +1827,8 @@ SPEC CHECKSUMS:
18301827
ReactAppDependencyProvider: a1fb08dfdc7ebc387b2e54cfc9decd283ed821d8
18311828
ReactCodegen: 008c319179d681a6a00966edfc67fda68f9fbb2e
18321829
ReactCommon: 0c097b53f03d6bf166edbcd0915da32f3015dd90
1833-
RNSwiftUI: 87f6d42a187811199ac049c2301d63934ef75d51
1830+
RNSwiftUI: be3460c08b493866bd2a4729d0d3de6a39bc467f
18341831
SocketRocket: d4aabe649be1e368d1318fdf28a022d714d65748
1835-
SwiftUIIntrospect: fee9aa07293ee280373a591e1824e8ddc869ba5d
18361832
Yoga: afd04ff05ebe0121a00c468a8a3c8080221cb14c
18371833

18381834
PODFILE CHECKSUM: 4fa18c8365472611163bdca71e748ca33ad1be02

‎example/src/views/FullFormExample.tsx‎

Lines changed: 35 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ export const FullFormExample: FunctionComponent = () => {
88
<SwiftUI style={{flex: 1}}>
99
<SwiftUI.Text text="FullFormExample" />
1010
<SwiftUI.Form>
11+
<RectangleSection />
1112
<TextFieldSection />
1213
<PickerSection />
1314
<DatePickerSection />
@@ -23,7 +24,7 @@ export const FullFormExample: FunctionComponent = () => {
2324
const TextFieldSection: FunctionComponent = () => {
2425
const [firstName, setFirstName] = useState('John');
2526
return (
26-
<SwiftUI.Section header="TextField">
27+
<SwiftUI.Section header="TextField Example">
2728
<SwiftUI.TextField
2829
label="First name"
2930
placeholder="John"
@@ -42,7 +43,7 @@ const PickerSection: FunctionComponent = () => {
4243
const [options, setOptions] = useState(['Option 1', 'Option 2', 'Option 3']);
4344
const [selectedOption, setSelectedOption] = useState(options[0]);
4445
return (
45-
<SwiftUI.Section header="Picker">
46+
<SwiftUI.Section header="Picker Example">
4647
<SwiftUI.Picker
4748
label="Option"
4849
selection={selectedOption}
@@ -62,7 +63,7 @@ const PickerSection: FunctionComponent = () => {
6263
const DatePickerSection: FunctionComponent = () => {
6364
const [birthDate, setBirthDate] = useState(new Date('2019-06-03T00:00:00'));
6465
return (
65-
<SwiftUI.Section header="DatePicker">
66+
<SwiftUI.Section header="DatePicker Example">
6667
<SwiftUI.DatePicker
6768
label="Birth date"
6869
selection={birthDate}
@@ -86,7 +87,7 @@ const DatePickerSection: FunctionComponent = () => {
8687
const ToggleSection: FunctionComponent = () => {
8788
const [isActive, setIsActive] = useState(false);
8889
return (
89-
<SwiftUI.Section header="Toggle">
90+
<SwiftUI.Section header="Toggle Example">
9091
<SwiftUI.Toggle
9192
label="Enable Feature"
9293
isOn={isActive}
@@ -103,7 +104,7 @@ const ToggleSection: FunctionComponent = () => {
103104
const SliderSection: FunctionComponent = () => {
104105
const [volume, setVolume] = useState(50);
105106
return (
106-
<SwiftUI.Section header="Slider">
107+
<SwiftUI.Section header="Slider Example">
107108
<SwiftUI.Slider
108109
label="Volume"
109110
value={volume}
@@ -120,7 +121,7 @@ const SliderSection: FunctionComponent = () => {
120121
const StepperSection: FunctionComponent = () => {
121122
const [value, setValue] = useState(0);
122123
return (
123-
<SwiftUI.Section header="Stepper">
124+
<SwiftUI.Section header="Stepper Example">
124125
<SwiftUI.Stepper
125126
label="Value"
126127
value={value}
@@ -134,3 +135,31 @@ const StepperSection: FunctionComponent = () => {
134135
</SwiftUI.Section>
135136
);
136137
};
138+
139+
const RectangleSection: FunctionComponent = () => {
140+
const [color, setColor] = useState('blue');
141+
142+
return (
143+
<SwiftUI.Section header="Rectangle Example">
144+
<SwiftUI.HStack
145+
spacing={25}
146+
style={{
147+
backgroundColor: 'white',
148+
borderWidth: 1,
149+
borderColor: 'black',
150+
}}>
151+
<SwiftUI.Rectangle
152+
style={{backgroundColor: color, width: 25, height: 50}}
153+
/>
154+
<SwiftUI.Rectangle
155+
style={{backgroundColor: 'red', width: 25, height: 50}}
156+
/>
157+
</SwiftUI.HStack>
158+
159+
<SwiftUI.Button
160+
title={`Change flag to ${color === 'blue' ? 'Italy' : 'France'}`}
161+
onPress={() => setColor(color === 'blue' ? 'green' : 'blue')}
162+
/>
163+
</SwiftUI.Section>
164+
);
165+
};

‎ios/SwiftUINode.swift‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,10 @@ private struct NodeWrapper: Decodable {
8484
node = try GenericNode<ZStackProps>(from: decoder)
8585
case "Sheet":
8686
node = try GenericNode<SheetProps>(from: decoder)
87+
case "Rectangle":
88+
node = try GenericNode<RectangleProps>(from: decoder)
89+
case "Spacer":
90+
node = try GenericNode<SpacerProps>(from: decoder)
8791
default:
8892
throw DecodingError.typeMismatch(
8993
(any SwiftUINode).self,

‎ios/SwiftUIRootView.swift‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -182,6 +182,10 @@ public class SwiftUIRootView: SwiftUIContainerView {
182182
AnyView(ToggleView(props: toggle.props))
183183
case let slider as GenericNode<SliderProps>:
184184
AnyView(SliderView(props: slider.props))
185+
case let rectangle as GenericNode<RectangleProps>:
186+
AnyView(RectangleView(props: rectangle.props))
187+
case let spacer as GenericNode<SpacerProps>:
188+
AnyView(SpacerView(props: spacer.props))
185189
default:
186190
AnyView(EmptyView())
187191
}
@@ -256,6 +260,10 @@ public class SwiftUIRootView: SwiftUIContainerView {
256260
case let sheet as GenericNode<SheetProps>:
257261
let updatedProps = try decoder.decode(SheetProps.self, from: updatedPropsData)
258262
sheet.props.merge(from: updatedProps)
263+
264+
case let rectangle as GenericNode<RectangleProps>:
265+
let updatedProps = try decoder.decode(RectangleProps.self, from: updatedPropsData)
266+
rectangle.props.merge(from: updatedProps)
259267

260268
default:
261269
print("Unsupported node type for updateChildProps: \(type(of: node))")

‎ios/components/Button/ButtonProps.swift‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ public final class ButtonProps: ObservableObject, Decodable {
44
@Published var title: String = "Button"
55
@Published var buttonStyle: ButtonStyle = .default
66
@Published var disabled: Bool = false
7-
public var style: StyleProps?
7+
@Published public var style: StyleProps?
88
// Events
99
public var onPress: (() -> Void)?
1010

‎ios/components/HStack/HStackProps.swift‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,10 @@ import SwiftUI
33
public final class HStackProps: ObservableObject, Decodable {
44
@Published public var alignment: VerticalAlignment
55
@Published public var spacing: CGFloat?
6+
@Published public var style: StyleProps?
67

78
enum CodingKeys: String, CodingKey {
8-
case alignment, spacing
9+
case alignment, spacing, style
910
}
1011

1112
public init(alignment: VerticalAlignment = .center, spacing: CGFloat? = nil) {
@@ -24,10 +25,12 @@ public final class HStackProps: ObservableObject, Decodable {
2425
default: alignment = .center
2526
}
2627
spacing = try container.decodeIfPresent(CGFloat.self, forKey: .spacing)
28+
style = try container.decodeIfPresent(StyleProps.self, forKey: .style)
2729
}
2830

2931
public func merge(from other: HStackProps) {
3032
alignment = other.alignment
3133
spacing = other.spacing
34+
style = other.style
3235
}
3336
}

‎ios/components/HStack/HStackView.swift‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,5 +13,6 @@ public struct HStackView<Content: View>: View {
1313
HStack(alignment: props.alignment, spacing: props.spacing) {
1414
content()
1515
}
16+
.applyViewStyles(props.style)
1617
}
1718
}

‎ios/components/Rectangle/RectangleProps.swift‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import SwiftUI
2+
3+
public final class RectangleProps: ObservableObject, Decodable {
4+
@Published public var style: StyleProps?
5+
6+
enum CodingKeys: String, CodingKey {
7+
case style
8+
}
9+
10+
public init(style: StyleProps? = nil) {
11+
self.style = style
12+
}
13+
14+
public required init(from decoder: Decoder) throws {
15+
let container = try decoder.container(keyedBy: CodingKeys.self)
16+
style = try container.decodeIfPresent(StyleProps.self, forKey: .style)
17+
}
18+
19+
public func merge(from other: RectangleProps) {
20+
style = other.style
21+
}
22+
}

‎ios/components/Rectangle/RectangleView.swift‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import SwiftUI
2+
3+
public struct RectangleView: View {
4+
@ObservedObject public var props: RectangleProps
5+
6+
public var body: some View {
7+
Rectangle()
8+
.applyShapeStyles(props.style)
9+
}
10+
}

0 commit comments

Comments
 (0)