Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

chore: fix package versions #7

Merged
merged 4 commits into from
May 14, 2024
Merged

chore: fix package versions #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
99a662d
chore: fix package versions
s-palmer May 10, 2024
61916d1
update flow
s-palmer May 14, 2024
b7057ce
document subcomponents in storybook
s-palmer May 14, 2024
126304d
document in readme
s-palmer May 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .flowconfig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
.*/malformed_package_json/package\.json

[version]
0.178.1
0.235.1

[include]

Expand Down
5,815 changes: 2,713 additions & 3,102 deletions .pnp.cjs
View file
Open in desktop

Large diffs are not rendered by default.

25 changes: 25 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,32 @@ As you develop your custom component, please keep the following guidelines in mi
* **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.
* **Styling**: Only .css files are supported for styling. Ensure that your component's visual design is implemented using CSS.
* **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.
* **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.

```json
{
"name": "headings",
"version": "1.0.0",
"description": "A custom subcomponent",
"main": "./index.js",
"isCustomSubcomponent": true,
"author": "",
"dependencies": {
...
},
"limioProps": [
...
]
}
```

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.

<div align="center">
<div style="display: flex;">
<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" />
</div>
</div>
#### Step 2: Viewing Your Component in Storybook
After creating your component, you can immediately see it in action within the Limio Component Playground. To do so:

Expand Down
6 changes: 3 additions & 3 deletions component-playground/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,13 +106,13 @@
},
"devDependencies": {
"@babel/cli": "^7.19.3",
"@chromatic-com/storybook": "^1.2.18",
"@chromatic-com/storybook": "^1.3.2",
"@storybook/addon-essentials": "^8.0.0",
"@storybook/addon-interactions": "^8.0.0",
"@storybook/addon-links": "^8.0.0",
"@storybook/addon-onboarding": "^8.0.0",
"@storybook/addon-styling-webpack": "^0.0.6",
"@storybook/addon-viewport": "^8.0.7",
"@storybook/addon-styling-webpack": "^1.0.0",
"@storybook/addon-viewport": "^8.0.0",
"@storybook/addon-webpack5-compiler-swc": "^1.0.2",
"@storybook/blocks": "^8.0.0",
"@storybook/react": "^8.0.0",
Expand Down
50 changes: 37 additions & 13 deletions component-playground/src/stories/GettingStarted.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,18 +15,18 @@ import Accessibility from "./assets/accessibility.png";
import Theming from "./assets/theming.png";
import AddonLibrary from "./assets/addon-library.png";

export const RightArrow = () => <svg
viewBox="0 0 14 14"
width="8px"
height="14px"
style={{
marginLeft: '4px',
display: 'inline-block',
shapeRendering: 'inherit',
verticalAlign: 'middle',
fill: 'currentColor',
'path fill': 'currentColor'
}}
export const RightArrow = () => <svg
viewBox="0 0 14 14"
width="8px"
height="14px"
style={{
marginLeft: '4px',
display: 'inline-block',
shapeRendering: 'inherit',
verticalAlign: 'middle',
fill: 'currentColor',
'path fill': 'currentColor'
}}
>
<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" />
</svg>
Expand Down Expand Up @@ -78,8 +78,32 @@ export const RightArrow = () => <svg
* **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.
* **Styling**: Only .css files are supported for styling. Ensure that your component's visual design is implemented using CSS.
* **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.
* **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.

##### Step 2: Viewing Your Component in Storybook
```json
{
"name": "headings",
"version": "1.0.0",
"description": "A custom subcomponent",
"main": "./index.js",
"isCustomSubcomponent": true,
"author": "",
"dependencies": {
...
},
"limioProps": [
...
]
}
```

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.

<div className="sb-image-container">
<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" />
</div>

#### Step 2: Viewing Your Component in Storybook
After creating your component, you can immediately see it in action within the Limio Component Playground. To do so:

1. Navigate to the Storybook sidebar.
Expand Down
Loading