You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
description: 'Figma to React code with Amplify Studio',
6
6
platforms: [
7
-
'android',
8
-
'angular',
9
-
'flutter',
10
-
'javascript',
11
-
'nextjs',
12
-
'react',
13
-
'react-native',
14
-
'swift',
15
-
'vue'
16
-
]
7
+
'android',
8
+
'angular',
9
+
'flutter',
10
+
'javascript',
11
+
'nextjs',
12
+
'react',
13
+
'react-native',
14
+
'swift',
15
+
'vue'
16
+
]
17
17
};
18
18
19
19
exportconst getStaticPaths =async () => {
@@ -28,13 +28,13 @@ export function getStaticProps(context) {
28
28
}
29
29
};
30
30
}
31
-
32
31
33
-
When you run `amplify pull`, Amplify automatically generates JSX and TS versions of your Figma components. You cannot directly edit the code for these components as they will get overwritten on the next `pull`, but you have exposed mechanisms to extend the code.
32
+
When you run `amplify pull`, Amplify automatically generates JSX and TS versions of your Figma components. You cannot directly edit the code for these components as they will get overwritten on the next `pull`, but you have exposed mechanisms to extend the code.
34
33
35
34
## Extend generated code
36
35
37
36
### Extend generated code via component prop
37
+
38
38
When using Figma created components, you can use any exposed component props. The example code below shows how you can add pagination to a collection. The `isPaginated` prop is a property of the [`<Collection/>`](https://ui.docs.amplify.aws/react/components/collection) component. Similarly, you can use any prop such as `gap` or `isSearchable` to extend the collection.
39
39
40
40
```
@@ -45,43 +45,45 @@ import {AmpligramCollection} from './ui-components'
45
45
```
46
46
47
47
### Extend generated components via overrides prop
48
+
48
49
All generated code exposes an `overrides` prop on all components and children to give you full control over extending generated code. The following example shows how to override the color of the title of the `FAQItem` component, that is part of the default Figma file, to red.
49
50
50
-
1. In Studio, navigate to the `FAQItem` component
51
-
2. Find the name of the text element, in this case `Title`
52
-
3. Wherever you are rendering the `FAQItem` add an `overrides` prop.
51
+
1.In Studio, navigate to the `FAQItem` component
52
+
2.Find the name of the text element, in this case `Title`
53
+
3.Wherever you are rendering the `FAQItem` add an `overrides` prop.
### Extend generated collections via overrideItems prop
74
+
76
75
All generated Collection code exposes an `overrideItems` prop to give you full control to extend each collection item with context its data item. `overrideItems` expects a function that accepts an `{ item, index }` parameter and returns the override props that should be applied to each collection item.
77
76
78
77
The following example shows how to override each collection item to show a different color based on their index in the collection and alerts the user of which the clicked home.
79
78
80
79
```jsx
81
-
<HomeCollection overrideItems={({ item, index }) => ({
82
-
backgroundColor: index %2===0?'white':'lightgray',
83
-
onClick: () =>alert(`Home with id: ${item.id} and ${item.address} clicked!`)
84
-
})} />
80
+
<HomeCollection
81
+
overrideItems={({ item, index }) => ({
82
+
backgroundColor: index %2===0?'white':'lightgray',
83
+
onClick: () =>
84
+
alert(`Home with id: ${item.id} and ${item.address} clicked!`)
85
+
})}
86
+
/>
85
87
```
86
88
87
89
@@ -96,72 +98,71 @@ If you want to override a prop for a specific element within a collection item,
96
98
97
99
<Calloutinfo>
98
100
99
-
**Note**: Studio supports nested collections with any GraphQL API created with Amplify, [with and without DataStore](/console/data/data-model/#datastore-and-graphql). However, these different data types have different syntax.
101
+
**Note**: Studio supports nested collections with any GraphQL API created with Amplify, [with and without DataStore](/console/data/data-model/#datastore-and-graphql). However, these different data types have different syntax.
100
102
101
103
</Callout>
102
104
103
-
Component slots within collections allow you to conditionally render additional nested collections. For example, use nested collections to generate a collection of posts, each with its own collection of related comments.
105
+
Component slots within collections allow you to conditionally render additional nested collections. For example, use nested collections to generate a collection of posts, each with its own collection of related comments.
104
106
105
-
In this example, you have two collections: `AmpligramCollection`, which has a slot named `comments`, and `CommentViewCollection`. These are bound to the `Post` and `Comment` data models, which have a [one-to-many relationship](/console/data/relationships/) - therefore, each record in the `Post` data model has a field named `Comments`, whose value is an array of `Comment` records.
107
+
In this example, you have two collections: `AmpligramCollection`, which has a slot named `comments`, and `CommentViewCollection`. These are bound to the `Post` and `Comment` data models, which have a [one-to-many relationship](/console/data/relationships/) - therefore, each record in the `Post` data model has a field named `Comments`, whose value is an array of `Comment` records.
106
108
107
-
First, nest the `CommentViewCollection` within the `comment` component slot in the `AmpligramCollection` by using the `overrideItems` functionality. This will render every item in the `CommentViewCollection` in each `Ampligram` slot.
109
+
First, nest the `CommentViewCollection` within the `comment` component slot in the `AmpligramCollection` by using the `overrideItems` functionality. This will render every item in the `CommentViewCollection` in each `Ampligram` slot.
<AmpligramCollection overrideItems={({ item, index }) => ({
118
-
comments:<CommentViewCollection />//Add the child collection to the "comments" slot
119
-
})} />
116
+
<AmpligramCollection
117
+
overrideItems={({ item, index }) => ({
118
+
comments:<CommentViewCollection />//Add the child collection to the "comments" slot
119
+
})}
120
+
/>
120
121
);
121
122
}
122
123
exportdefaultApp;
123
124
```
124
125
125
-
Next, filter the `CommentViewCollection` to only include `Comment` records related to each `Ampligram`. To filter the `CommentViewCollection`, set the `items` prop equal to the array of `Comment` records. **This syntax varies based on whether you are using DataStore**.
126
+
Next, filter the `CommentViewCollection` to only include `Comment` records related to each `Ampligram`. To filter the `CommentViewCollection`, set the `items` prop equal to the array of `Comment` records. **This syntax varies based on whether you are using DataStore**.
### Add business logic during or after action execution
165
+
165
166
If your components are bound to a [GraphQL API using DataStore](/console/data/data-model/#datastore-and-graphql), you can use the Amplify Hub to listen to actions that are executed via [UI event handlers](/console/uibuilder/eventhandling) and then add your custom business logic.
In the example above, you can add your own custom business logic, when the customer clicks on a "Sign out" button. The Amplify `Hub` provides Studio-generated events on the `ui` channel. The format of action binding Hub events is `actions:[category]:[action_name]:[status]`:
179
180
180
-
| Action name | Description|
181
-
|---|---|
181
+
| Action name | Description |
182
+
|---|---|
182
183
| actions:core:navigate:started |[Navigate action](/console/uibuilder/eventhandling/#bind-ui-to-navigation-actions) started |
183
184
| actions:core:navigate:finished |[Navigate action](/console/uibuilder/eventhandling/#bind-ui-to-navigation-actions) finished (possibly with errors) |
184
185
| actions:datastore:create:started |[DataStore create action](/console/uibuilder/eventhandling/#create-a-record-in-database) started |
@@ -187,10 +188,11 @@ In the example above, you can add your own custom business logic, when the custo
187
188
| actions:datastore:update:finished |[DataStore update action](/console/uibuilder/eventhandling/#update-a-record-from-database) finished (possibly with errors) |
188
189
| actions:datastore:delete:started |[DataStore delete action](/console/uibuilder/eventhandling/#delete-a-record-from-database) started |
189
190
| actions:datastore:delete:finished |[DataStore delete action](/console/uibuilder/eventhandling/#delete-a-record-from-database) finished (possibly with errors) |
190
-
| actions:auth:signout:started |[SignOut action](/console/uibuilder/eventhandling/#bind-ui-to-sign-out-actions) started |
191
+
| actions:auth:signout:started |[SignOut action](/console/uibuilder/eventhandling/#bind-ui-to-sign-out-actions) started |
191
192
| actions:auth:signout:finished |[SignOut action](/console/uibuilder/eventhandling/#bind-ui-to-sign-out-actions) finished (possibly with errors) |
192
193
193
194
## Modify generated code
195
+
194
196
You can't directly customize all generated component code, as changes will be overwritten on the next `amplify pull`. However, the following workaround is available if you want to take control of component modifications.
195
197
196
198
1. Duplicate the generated JSX and TS file inside `ui-components` (e.g. `Ampligram`)
@@ -201,6 +203,7 @@ You can't directly customize all generated component code, as changes will be ov
201
203
The next `amplify pull` will not overwrite this new file.
202
204
203
205
## Example use cases
206
+
204
207
The following code snippets show how you can handle specific scenarios in your app.
205
208
206
209
### Add Pagination to a collection
@@ -211,19 +214,21 @@ import {AmpligramCollection} from './ui-components'
Figma components that use *Auto layout* are automatically mapped to responsive React components. However, some components may require further customizations.
219
+
220
+
Figma components that use _Auto layout_ are automatically mapped to responsive React components. However, some components may require further customizations.
Amplify Studio provides [navigation action bindings](/console/uibuilder/eventhandling/#bind-ui-to-navigation-actions) but if you want to integrate with your own routing system, you can also self-manage the navigation actions.
312
+
Amplify Studio provides [navigation action bindings](/console/uibuilder/eventhandling/#bind-ui-to-navigation-actions) but if you want to integrate with your own routing system, you can also self-manage the navigation actions.
309
313
310
314
For example, you want to click on an item in a collection to get to detail views. Use the `overrideItems` prop to modify each element's property within a collection. The return value of `overrideItems` will be applied as an override onto the collection item's component.
0 commit comments