Merge pull request #7 from innovate42/main-chore/fix-deps

chore: fix package versions
innovate42 · May 14, 2024 · e0ebddd · e0ebddd
2 parents e9bb41a + 126304d
commit e0ebddd
Show file tree

Hide file tree

Showing 6 changed files with 4,864 additions and 5,195 deletions.
diff --git a/.flowconfig b/.flowconfig
@@ -2,7 +2,7 @@
 .*/malformed_package_json/package\.json
 
 [version]
-0.178.1
+0.235.1
 
 [include]
 

diff --git a/.pnp.cjs b/.pnp.cjs
diff --git a/README.md b/README.md
@@ -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:
 

diff --git a/component-playground/package.json b/component-playground/package.json
@@ -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",

diff --git a/component-playground/src/stories/GettingStarted.mdx b/component-playground/src/stories/GettingStarted.mdx
@@ -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>
@@ -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.