Skip to content

Commit e0ebddd

Browse files
benny-obenny-o
authored
Merge pull request #7 from innovate42/main-chore/fix-deps
chore: fix package versions
2 parents e9bb41a + 126304d commit e0ebddd

File tree

6 files changed

+4864
-5195
lines changed

6 files changed

+4864
-5195
lines changed

‎.flowconfig

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
.*/malformed_package_json/package\.json
33

44
[version]
5-
0.178.1
5+
0.235.1
66

77
[include]
88

‎.pnp.cjs

+2,713-3,102
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎README.md

+25
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,32 @@ As you develop your custom component, please keep the following guidelines in mi
5959
* **Modular Structure**: You can structure your component across many files in multiple directories or just in a single file. This flexibility allows you to organize your component in a way that best suits your development style.
6060
* **Styling**: Only .css files are supported for styling. Ensure that your component's visual design is implemented using CSS.
6161
* **External Packages**: External packages can be added to your `package.json` file and will be loaded as part of the component at build time once in Limio. Please just remember to keep the `"react": "*"` dependency so that your component and Limio use the same version of React.
62+
* **Custom Subcomponents**: From Release 102, it is now possible to create custom subcomponents. A subcomponent is one that is intended to be used as part of the Limio Form component. This enables new workflows and means even more customisation is possible when developing a checkout flow. Whether it's inserting custom fields to collect user information or displaying information, it is now possible to deliver that easily with just one small change. In order to add a custom subcomponent, in your package.json file, simply add the isCustomSubcomponent: true flag.
6263

64+
```json
65+
{
66+
"name": "headings",
67+
"version": "1.0.0",
68+
"description": "A custom subcomponent",
69+
"main": "./index.js",
70+
"isCustomSubcomponent": true,
71+
"author": "",
72+
"dependencies": {
73+
...
74+
},
75+
"limioProps": [
76+
...
77+
]
78+
}
79+
```
80+
81+
Once your changes have been pushed and the component has been built, you should then bable to see your new custom subcomponent when managing a Form component on a page.
82+
83+
<div align="center">
84+
<div style="display: flex;">
85+
<img src="https://developers.limio.com/~gitbook/image?url=https%3A%2F%2F2254146468-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-L_ITRAhJRCD176zw_Pu%252Fuploads%252Fj51gv4SNIwlI3kR0npKp%252Fcustom-subcomponent.png%3Falt%3Dmedia%26token%3Df95d7f83-0290-4407-afcf-dcb7a3cf3532&width=768&dpr=1&quality=100&sign=c01f299b380b6236e45710b28948934b2c6d5d5be8a6b417e94a1e3f3ee8defe" />
86+
</div>
87+
</div>
6388
#### Step 2: Viewing Your Component in Storybook
6489
After creating your component, you can immediately see it in action within the Limio Component Playground. To do so:
6590

‎component-playground/package.json

+3-3
Original file line numberDiff line numberDiff line change
@@ -106,13 +106,13 @@
106106
},
107107
"devDependencies": {
108108
"@babel/cli": "^7.19.3",
109-
"@chromatic-com/storybook": "^1.2.18",
109+
"@chromatic-com/storybook": "^1.3.2",
110110
"@storybook/addon-essentials": "^8.0.0",
111111
"@storybook/addon-interactions": "^8.0.0",
112112
"@storybook/addon-links": "^8.0.0",
113113
"@storybook/addon-onboarding": "^8.0.0",
114-
"@storybook/addon-styling-webpack": "^0.0.6",
115-
"@storybook/addon-viewport": "^8.0.7",
114+
"@storybook/addon-styling-webpack": "^1.0.0",
115+
"@storybook/addon-viewport": "^8.0.0",
116116
"@storybook/addon-webpack5-compiler-swc": "^1.0.2",
117117
"@storybook/blocks": "^8.0.0",
118118
"@storybook/react": "^8.0.0",

‎component-playground/src/stories/GettingStarted.mdx

+37-13
Original file line numberDiff line numberDiff line change
@@ -15,18 +15,18 @@ import Accessibility from "./assets/accessibility.png";
1515
import Theming from "./assets/theming.png";
1616
import AddonLibrary from "./assets/addon-library.png";
1717

18-
export const RightArrow = () => <svg
19-
viewBox="0 0 14 14"
20-
width="8px"
21-
height="14px"
22-
style={{
23-
marginLeft: '4px',
24-
display: 'inline-block',
25-
shapeRendering: 'inherit',
26-
verticalAlign: 'middle',
27-
fill: 'currentColor',
28-
'path fill': 'currentColor'
29-
}}
18+
export const RightArrow = () => <svg
19+
viewBox="0 0 14 14"
20+
width="8px"
21+
height="14px"
22+
style={{
23+
marginLeft: '4px',
24+
display: 'inline-block',
25+
shapeRendering: 'inherit',
26+
verticalAlign: 'middle',
27+
fill: 'currentColor',
28+
'path fill': 'currentColor'
29+
}}
3030
>
3131
<path d="m11.1 7.35-5.5 5.5a.5.5 0 0 1-.7-.7L10.04 7 4.9 1.85a.5.5 0 1 1 .7-.7l5.5 5.5c.2.2.2.5 0 .7Z" />
3232
</svg>
@@ -78,8 +78,32 @@ export const RightArrow = () => <svg
7878
* **Modular Structure**: You can structure your component across many files in multiple directories or just in a single file. This flexibility allows you to organize your component in a way that best suits your development style.
7979
* **Styling**: Only .css files are supported for styling. Ensure that your component's visual design is implemented using CSS.
8080
* **External Packages**: External packages can be added to your `package.json` file and will be loaded as part of the component at build time once in Limio. Please just remember to keep the `"react": "*"` dependency so that your component and Limio use the same version of React.
81+
* **Custom Subcomponents**: From Release 102, it is now possible to create custom subcomponents. A subcomponent is one that is intended to be used as part of the Limio Form component. This enables new workflows and means even more customisation is possible when developing a checkout flow. Whether it's inserting custom fields to collect user information or displaying information, it is now possible to deliver that easily with just one small change. In order to add a custom subcomponent, in your package.json file, simply add the isCustomSubcomponent: true flag.
8182

82-
##### Step 2: Viewing Your Component in Storybook
83+
```json
84+
{
85+
"name": "headings",
86+
"version": "1.0.0",
87+
"description": "A custom subcomponent",
88+
"main": "./index.js",
89+
"isCustomSubcomponent": true,
90+
"author": "",
91+
"dependencies": {
92+
...
93+
},
94+
"limioProps": [
95+
...
96+
]
97+
}
98+
```
99+
100+
Once your changes have been pushed and the component has been built, you should then be able to see your new custom subcomponent when managing a Form component on a page.
101+
102+
<div className="sb-image-container">
103+
<img src={"https://developers.limio.com/~gitbook/image?url=https%3A%2F%2F2254146468-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-L_ITRAhJRCD176zw_Pu%252Fuploads%252Fj51gv4SNIwlI3kR0npKp%252Fcustom-subcomponent.png%3Falt%3Dmedia%26token%3Df95d7f83-0290-4407-afcf-dcb7a3cf3532&width=768&dpr=1&quality=100&sign=c01f299b380b6236e45710b28948934b2c6d5d5be8a6b417e94a1e3f3ee8defe"} alt="Custom subcomponents in Limio pagebuilder" />
104+
</div>
105+
106+
#### Step 2: Viewing Your Component in Storybook
83107
After creating your component, you can immediately see it in action within the Limio Component Playground. To do so:
84108

85109
1. Navigate to the Storybook sidebar.

0 commit comments

Comments
 (0)