@viamedici-spc/configurator-framer-bundle 1.1.0 → 1.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +53 -0
- package/package.json +4 -2
package/README.md
ADDED
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
<div >
|
|
2
|
+
<strong>Viamedici SPC</strong>
|
|
3
|
+
</div>
|
|
4
|
+
|
|
5
|
+
# Configurator Components Library for Framer
|
|
6
|
+
|
|
7
|
+
[](https://www.npmjs.com/package/@viamedici-spc/configurator-framer-bundle)
|
|
8
|
+
[](https://github.com/viamedici-spc/configurator-framer/blob/main/LICENSE)
|
|
9
|
+
[](https://github.com/viamedici-spc/configurator-framer/actions/workflows/main.yml?query=branch%3Amain)
|
|
10
|
+
|
|
11
|
+
## Introduction
|
|
12
|
+
|
|
13
|
+
The Configurator Components Library is a set of headless UI components that form the foundation of the [Configurator UIKit](https://spc-configurator-uikit.framer.ai/) for Framer.
|
|
14
|
+
|
|
15
|
+
These React-based UI components are optimized for seamless integration within Framer, while also being fully compatible with standalone React applications.
|
|
16
|
+
|
|
17
|
+
## Installation
|
|
18
|
+
|
|
19
|
+
To integrate the UI components into a Framer application, start by creating a new code file (e.g. `ConfiguratorLib`). Import the `configurator-ts` bundle package and export the components you need.
|
|
20
|
+
|
|
21
|
+
The exported components will then be available in the assets panel as local components.
|
|
22
|
+
|
|
23
|
+
#### ConfiguratorLib.tsx
|
|
24
|
+
|
|
25
|
+
```typescript
|
|
26
|
+
import type {ComponentType} from "react";
|
|
27
|
+
|
|
28
|
+
import {ConfiguratorFramer} from "https://ga.jspm.io/npm:@viamedici-spc/configurator-framer-bundle@1.1.0/dist/index.js";
|
|
29
|
+
|
|
30
|
+
export const Configuration: ComponentType = ConfiguratorFramer.Configuration;
|
|
31
|
+
export const ChoiceSelect: ComponentType = ConfiguratorFramer.ChoiceSelect;
|
|
32
|
+
export const SelectionToggle: ComponentType = ConfiguratorFramer.SelectionToggle;
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
### Why Use JSPM?
|
|
36
|
+
|
|
37
|
+
Framer allows direct importing of npm packages, such as `@viamedici-spc/configurator-framer`, as long as the package and all its dependencies are compliant with the JavaScript Module System.
|
|
38
|
+
|
|
39
|
+
However, there is a limitation: you don't have control over the version of the referenced package. Once imported, updating to a newer version becomes impossible. Hopefully Framer support this in the future.
|
|
40
|
+
|
|
41
|
+
To address this, the library is also provided as a bundled package with all dependencies integrated. This allows you to directly import the hosted `index.js` module, ensuring version control and easier updates.
|
|
42
|
+
|
|
43
|
+
## Live Demo
|
|
44
|
+
|
|
45
|
+
Below are demo configurator applications that showcase the UI components from the Configurator UIKit in action:
|
|
46
|
+
|
|
47
|
+
- [Adventure Wheels (Simple)](https://adventure-wheels-simple.framer.ai/)
|
|
48
|
+
- [Adventure Wheels (Advanced)](https://adventure-wheels-advanced.framer.ai/)
|
|
49
|
+
- [Sudoku Solver](https://spc-sudoku-solver.framer.ai/)
|
|
50
|
+
|
|
51
|
+
## License
|
|
52
|
+
|
|
53
|
+
This project is licensed under the MIT License - see the LICENSE file for details.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@viamedici-spc/configurator-framer-bundle",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.1",
|
|
4
4
|
"description": "Component library to build configurator apps with Framer based on Viamedici SPC. All dependencies are bundled together.",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -25,7 +25,9 @@
|
|
|
25
25
|
"build": "npm --prefix ../configurator-framer run build && vite build",
|
|
26
26
|
"test": "npm --prefix ../configurator-framer run test",
|
|
27
27
|
"preview": "vite preview --port 3000",
|
|
28
|
-
"typecheck": "tsc --noEmit"
|
|
28
|
+
"typecheck": "tsc --noEmit",
|
|
29
|
+
"prepack": "cp ../../README.md README.md",
|
|
30
|
+
"postpack": "rm README.md"
|
|
29
31
|
},
|
|
30
32
|
"keywords": [
|
|
31
33
|
"viamedici",
|