@linktr.ee/create-link-app 0.3.0-next.9 → 1.0.0
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 +24 -8
- package/dist/commands/build.js +19 -3
- package/dist/commands/dev.js +2 -1
- package/dist/commands/generate-types.js +111 -0
- package/dist/commands/storybook.js +1 -1
- package/dist/lib/create/create-project.js +3 -2
- package/dist/lib/deploy/create-form-data.js +10 -5
- package/dist/lib/deploy/pack-project.js +14 -3
- package/dist/lib/schema/compile.js +30 -0
- package/dist/postcss/postcss.config.js +22 -11
- package/dist/storybook/global.css +53 -0
- package/dist/storybook/main.js +25 -25
- package/dist/storybook/preview.js +10 -1
- package/dist/webpack/webpack.config.js +40 -32
- package/oclif.manifest.json +19 -2
- package/package.json +17 -10
- package/templates/common/README.md +38 -17
- package/templates/common/gitignore +2 -0
- package/templates/common/schema/editablePrivate.jtd.json +6 -0
- package/templates/common/schema/editablePublic.jtd.json +10 -0
- package/templates/common/schema/readonlyPrivate.jtd.json +8 -0
- package/templates/common/schema/readonlyPublic.jtd.json +6 -0
- package/templates/common/schema/system.jtd.json +6 -0
- package/templates/common/settings.json +11 -23
- package/templates/react/package.json +3 -2
- package/templates/react-ts/package.json +31 -5
- package/templates/react-ts/src/App.tsx +23 -0
- package/templates/react-ts/src/Editor.tsx +7 -0
- package/templates/react-ts/src/Sheet.tsx +7 -0
- package/templates/react-ts/src/components/Layouts.tsx +59 -0
- package/templates/react-ts/src/stories/LinkApp.stories.tsx +71 -15
- package/templates/react-ts/src/stories/tailwind.sb.css +5 -0
- package/templates/react-ts/src/tailwind.css +1 -2
- package/templates/react-ts/src/types/global.d.ts +2 -4
- package/templates/react-ts/src/types/hack.d.ts +8 -0
- package/templates/react-ts/src/types/index.ts +7 -7
- package/templates/react-ts/src/types/schema/index.ts +33 -0
- package/templates/react-ts/tsconfig.json +0 -1
- package/templates/react-ts/src/index.tsx +0 -10
|
@@ -1,28 +1,5 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
/* eslint-disable @typescript-eslint/no-non-null-assertion */
|
|
3
|
-
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
4
|
-
if (k2 === undefined) k2 = k;
|
|
5
|
-
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
6
|
-
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
7
|
-
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
8
|
-
}
|
|
9
|
-
Object.defineProperty(o, k2, desc);
|
|
10
|
-
}) : (function(o, m, k, k2) {
|
|
11
|
-
if (k2 === undefined) k2 = k;
|
|
12
|
-
o[k2] = m[k];
|
|
13
|
-
}));
|
|
14
|
-
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
15
|
-
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
16
|
-
}) : function(o, v) {
|
|
17
|
-
o["default"] = v;
|
|
18
|
-
});
|
|
19
|
-
var __importStar = (this && this.__importStar) || function (mod) {
|
|
20
|
-
if (mod && mod.__esModule) return mod;
|
|
21
|
-
var result = {};
|
|
22
|
-
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
23
|
-
__setModuleDefault(result, mod);
|
|
24
|
-
return result;
|
|
25
|
-
};
|
|
26
3
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
27
4
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
28
5
|
};
|
|
@@ -36,12 +13,30 @@ const path_1 = __importDefault(require("path"));
|
|
|
36
13
|
const webpack_1 = require("webpack");
|
|
37
14
|
const camelcase_1 = __importDefault(require("camelcase"));
|
|
38
15
|
const slugify_1 = __importDefault(require("slugify"));
|
|
39
|
-
const
|
|
16
|
+
const compile_1 = __importDefault(require("../lib/schema/compile"));
|
|
17
|
+
const postcss_config_1 = require("../postcss/postcss.config");
|
|
40
18
|
const { ModuleFederationPlugin } = webpack_1.container;
|
|
41
|
-
function
|
|
19
|
+
function toVirtualModule(code) {
|
|
20
|
+
const base64 = Buffer.from(code).toString('base64');
|
|
21
|
+
return `data:text/javascript;base64,${base64}`;
|
|
22
|
+
}
|
|
23
|
+
function hasEntrypoint(appDir, file) {
|
|
24
|
+
try {
|
|
25
|
+
fs_1.default.accessSync(path_1.default.resolve(appDir, 'src', file));
|
|
26
|
+
return true;
|
|
27
|
+
}
|
|
28
|
+
catch {
|
|
29
|
+
return false;
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
async function default_1(env, options) {
|
|
42
33
|
const appDir = process.cwd();
|
|
43
34
|
const entryFile = path_1.default.resolve(__dirname, `${env}.entry`);
|
|
44
35
|
const htmlTemplateFile = path_1.default.resolve(__dirname, '..', '..', 'html-template', `${env}.html`);
|
|
36
|
+
const useAppEntry = hasEntrypoint(appDir, 'App.tsx');
|
|
37
|
+
const useSheetEntry = hasEntrypoint(appDir, 'Sheet.tsx');
|
|
38
|
+
const useEditorEntry = hasEntrypoint(appDir, 'Editor.tsx');
|
|
39
|
+
const appEntry = useAppEntry ? path_1.default.resolve(appDir, 'src/App') : path_1.default.resolve(appDir, 'src');
|
|
45
40
|
const manifestJson = JSON.parse(fs_1.default.readFileSync(path_1.default.resolve(appDir, 'manifest.json'), 'utf8'));
|
|
46
41
|
const linkTypeName = manifestJson.name.replace(/[^A-Za-z0-9 ]/g, '');
|
|
47
42
|
const linkTypeSlug = (0, slugify_1.default)(linkTypeName, { lower: true });
|
|
@@ -54,7 +49,9 @@ function default_1(env, options) {
|
|
|
54
49
|
output: {
|
|
55
50
|
publicPath: 'auto',
|
|
56
51
|
path: path_1.default.resolve(appDir, 'dist'),
|
|
57
|
-
assetModuleFilename: 'images/[hash][ext][query]',
|
|
52
|
+
assetModuleFilename: 'images/[hash].[contenthash][ext][query]',
|
|
53
|
+
chunkFilename: '[id].[contenthash].js',
|
|
54
|
+
filename: '[name].[contenthash].js',
|
|
58
55
|
},
|
|
59
56
|
module: {
|
|
60
57
|
rules: [
|
|
@@ -73,7 +70,7 @@ function default_1(env, options) {
|
|
|
73
70
|
},
|
|
74
71
|
{
|
|
75
72
|
test: /\.(png|jpe?g|gif|svg)$/i,
|
|
76
|
-
type: 'asset/inline',
|
|
73
|
+
type: 'asset/inline', // <-- this builds all images into data URLs, is that what you want?
|
|
77
74
|
},
|
|
78
75
|
{
|
|
79
76
|
test: /\.css$/,
|
|
@@ -83,7 +80,7 @@ function default_1(env, options) {
|
|
|
83
80
|
{
|
|
84
81
|
loader: 'postcss-loader',
|
|
85
82
|
options: {
|
|
86
|
-
postcssOptions: { ...
|
|
83
|
+
postcssOptions: { ...(0, postcss_config_1.getPostcssConfig)({ linkTypeSlug }) },
|
|
87
84
|
},
|
|
88
85
|
},
|
|
89
86
|
],
|
|
@@ -96,7 +93,7 @@ function default_1(env, options) {
|
|
|
96
93
|
// TODO: The behaviour here with module resolution is confusing, can we make it more explicit?
|
|
97
94
|
modules: [path_1.default.resolve(appDir, 'node_modules'), 'node_modules'],
|
|
98
95
|
alias: {
|
|
99
|
-
'@linktr.ee/extension':
|
|
96
|
+
'@linktr.ee/extension': appEntry,
|
|
100
97
|
},
|
|
101
98
|
},
|
|
102
99
|
plugins: [
|
|
@@ -119,6 +116,17 @@ function default_1(env, options) {
|
|
|
119
116
|
config.plugins.push(new mini_css_extract_plugin_1.default());
|
|
120
117
|
}
|
|
121
118
|
if (env === 'production') {
|
|
119
|
+
const exposedEntryPoints = {
|
|
120
|
+
// Default entry points
|
|
121
|
+
['./App']: appEntry,
|
|
122
|
+
['./validate']: toVirtualModule((await (0, compile_1.default)())),
|
|
123
|
+
};
|
|
124
|
+
if (useEditorEntry) {
|
|
125
|
+
exposedEntryPoints['./Editor'] = path_1.default.resolve(appDir, 'src/Editor');
|
|
126
|
+
}
|
|
127
|
+
if (useSheetEntry) {
|
|
128
|
+
exposedEntryPoints['./Sheet'] = path_1.default.resolve(appDir, 'src/Sheet');
|
|
129
|
+
}
|
|
122
130
|
// TODO: Figure out how to manage externals with Module Federation
|
|
123
131
|
// Possibly make the index.html a host app, via separate webpack config
|
|
124
132
|
// config.externals = {
|
|
@@ -133,6 +141,8 @@ function default_1(env, options) {
|
|
|
133
141
|
};
|
|
134
142
|
config.plugins.push(new webpack_1.DefinePlugin({
|
|
135
143
|
__ALLOW_ANY_ORIGIN__: options?.allowAnyOrigin,
|
|
144
|
+
__LINK_TYPE_SLUG__: JSON.stringify(linkTypeSlug),
|
|
145
|
+
__LINK_TYPE_ID__: JSON.stringify(linkTypeId),
|
|
136
146
|
}),
|
|
137
147
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
138
148
|
// @ts-ignore
|
|
@@ -142,9 +152,7 @@ function default_1(env, options) {
|
|
|
142
152
|
}), new ModuleFederationPlugin({
|
|
143
153
|
name: `LinkApp_${linkTypeId}`,
|
|
144
154
|
filename: 'remoteEntry.js',
|
|
145
|
-
exposes:
|
|
146
|
-
['./App']: path_1.default.resolve(appDir, 'src'),
|
|
147
|
-
},
|
|
155
|
+
exposes: exposedEntryPoints,
|
|
148
156
|
shared: {
|
|
149
157
|
react: {
|
|
150
158
|
singleton: true,
|
package/oclif.manifest.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"version": "0.
|
|
2
|
+
"version": "1.0.0",
|
|
3
3
|
"commands": {
|
|
4
4
|
"build": {
|
|
5
5
|
"id": "build",
|
|
@@ -16,6 +16,12 @@
|
|
|
16
16
|
"description": "Allow Link App iframe to be loadable from non-Linktree origins for debugging",
|
|
17
17
|
"hidden": true,
|
|
18
18
|
"allowNo": false
|
|
19
|
+
},
|
|
20
|
+
"native": {
|
|
21
|
+
"name": "native",
|
|
22
|
+
"type": "boolean",
|
|
23
|
+
"description": "Build native components of a Link App ready for publishing to npm",
|
|
24
|
+
"allowNo": false
|
|
19
25
|
}
|
|
20
26
|
},
|
|
21
27
|
"args": {}
|
|
@@ -139,6 +145,17 @@
|
|
|
139
145
|
},
|
|
140
146
|
"args": {}
|
|
141
147
|
},
|
|
148
|
+
"generate-types": {
|
|
149
|
+
"id": "generate-types",
|
|
150
|
+
"description": "Generate Typescript types from the schema definitions",
|
|
151
|
+
"strict": true,
|
|
152
|
+
"pluginName": "@linktr.ee/create-link-app",
|
|
153
|
+
"pluginAlias": "@linktr.ee/create-link-app",
|
|
154
|
+
"pluginType": "core",
|
|
155
|
+
"aliases": [],
|
|
156
|
+
"flags": {},
|
|
157
|
+
"args": {}
|
|
158
|
+
},
|
|
142
159
|
"grant-access": {
|
|
143
160
|
"id": "grant-access",
|
|
144
161
|
"description": "Grant access to other developers to push updates for your Link App",
|
|
@@ -219,7 +236,7 @@
|
|
|
219
236
|
},
|
|
220
237
|
"storybook": {
|
|
221
238
|
"id": "storybook",
|
|
222
|
-
"description": "Start the
|
|
239
|
+
"description": "Start the Storybook development server",
|
|
223
240
|
"strict": true,
|
|
224
241
|
"pluginName": "@linktr.ee/create-link-app",
|
|
225
242
|
"pluginAlias": "@linktr.ee/create-link-app",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@linktr.ee/create-link-app",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "1.0.0",
|
|
4
4
|
"description": "Create a Link App on Linktr.ee.",
|
|
5
5
|
"license": "UNLICENSED",
|
|
6
6
|
"author": "Linktree",
|
|
@@ -19,13 +19,14 @@
|
|
|
19
19
|
"/templates"
|
|
20
20
|
],
|
|
21
21
|
"scripts": {
|
|
22
|
-
"build": "shx rm -rf dist && tsc -b",
|
|
22
|
+
"build": "shx rm -rf dist && tsc -b && yarn copy-storybook-global-css",
|
|
23
23
|
"postpack": "shx rm -f oclif.manifest.json",
|
|
24
24
|
"prepack": "yarn build && oclif manifest && oclif readme",
|
|
25
25
|
"test": "jest --watch",
|
|
26
26
|
"test:ci": "jest",
|
|
27
27
|
"test:cov": "jest --coverage",
|
|
28
|
-
"version": "oclif readme && git add README.md"
|
|
28
|
+
"version": "oclif readme && git add README.md",
|
|
29
|
+
"copy-storybook-global-css": "cp ./src/storybook/global.css ./dist/storybook/global.css"
|
|
29
30
|
},
|
|
30
31
|
"dependencies": {
|
|
31
32
|
"@babel/core": "^7.18.2",
|
|
@@ -34,9 +35,10 @@
|
|
|
34
35
|
"@babel/preset-react": "^7.17.12",
|
|
35
36
|
"@babel/preset-typescript": "^7.17.12",
|
|
36
37
|
"@babel/runtime": "^7.18.3",
|
|
37
|
-
"@linktr.ee/component-library": "
|
|
38
|
+
"@linktr.ee/component-library": "latest",
|
|
39
|
+
"@linktr.ee/ui-link-kit": "latest",
|
|
38
40
|
"@oclif/core": "^1.9.0",
|
|
39
|
-
"@oclif/plugin-help": "
|
|
41
|
+
"@oclif/plugin-help": "5.1.23",
|
|
40
42
|
"@storybook/addon-actions": "^6.5.9",
|
|
41
43
|
"@storybook/addon-essentials": "^6.5.9",
|
|
42
44
|
"@storybook/addon-interactions": "^6.5.9",
|
|
@@ -45,8 +47,10 @@
|
|
|
45
47
|
"@storybook/builder-webpack5": "^6.5.9",
|
|
46
48
|
"@storybook/manager-webpack5": "^6.5.9",
|
|
47
49
|
"@storybook/react": "^6.5.9",
|
|
50
|
+
"@tailwindcss/line-clamp": "^0.4.4",
|
|
48
51
|
"@testing-library/react": "^12.1.4",
|
|
49
52
|
"@testing-library/user-event": "14",
|
|
53
|
+
"ajv": "^8.12.0",
|
|
50
54
|
"archiver": "^5.3.1",
|
|
51
55
|
"autoprefixer": "^10.4.14",
|
|
52
56
|
"axios": "^0.27.2",
|
|
@@ -64,15 +68,18 @@
|
|
|
64
68
|
"openid-client": "^5.1.6",
|
|
65
69
|
"postcss": "^8.4.21",
|
|
66
70
|
"postcss-loader": "^4.3.0",
|
|
71
|
+
"prettier": "^2.8.8",
|
|
67
72
|
"prop-types": "^15.8.1",
|
|
68
|
-
"react": "^
|
|
69
|
-
"react-dom": "^
|
|
73
|
+
"react": "^18.2.0",
|
|
74
|
+
"react-dom": "^18.2.0",
|
|
75
|
+
"react-native-builder-bob": "^0.21.3",
|
|
70
76
|
"slugify": "^1.6.6",
|
|
71
77
|
"storybook-addon-designs": "^6.3.1",
|
|
72
78
|
"storybook-addon-turbo-build": "^1.1.0",
|
|
73
79
|
"style-loader": "^3.3.2",
|
|
74
80
|
"styled-components": "^5.3.5",
|
|
75
|
-
"tailwindcss": "^3.3.
|
|
81
|
+
"tailwindcss": "^3.3.2",
|
|
82
|
+
"ts-loader": "^9.4.4",
|
|
76
83
|
"typescript": "^4.7.3",
|
|
77
84
|
"webpack": "^5.75.0",
|
|
78
85
|
"webpack-dev-server": "^4.11.1"
|
|
@@ -85,8 +92,8 @@
|
|
|
85
92
|
"@types/fs-extra": "^9.0.13",
|
|
86
93
|
"@types/jest": "^28.1.1",
|
|
87
94
|
"@types/jsonwebtoken": "^8.5.8",
|
|
88
|
-
"@types/react": "^
|
|
89
|
-
"@types/react-dom": "^
|
|
95
|
+
"@types/react": "^18.2.20",
|
|
96
|
+
"@types/react-dom": "^18.2.7",
|
|
90
97
|
"axios-mock-adapter": "^1.21.1",
|
|
91
98
|
"jest": "^28.1.1",
|
|
92
99
|
"oclif": "^3.0.1",
|
|
@@ -14,13 +14,34 @@ Optionally, you can specify a different port or serve over HTTPS. Run command wi
|
|
|
14
14
|
|
|
15
15
|
Several files were created during the bootstrapping of this project. Some of these files play a key role:
|
|
16
16
|
|
|
17
|
-
| File
|
|
18
|
-
|
|
|
19
|
-
| `src/index.jsx`
|
|
20
|
-
| `manifest.json`
|
|
21
|
-
| `settings.json`
|
|
22
|
-
| `fixtures/props-data.json` | Used during development, this file acts as mock data for the `settings.json` output, it is injected as props to the entry point component
|
|
23
|
-
| `url-match-rules.json`
|
|
17
|
+
| File | Description |
|
|
18
|
+
| -------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
19
|
+
| `src/index.jsx` | The entry point for your Link App |
|
|
20
|
+
| `manifest.json` | Defines key information about your Link App, and helps users to discover your Link App via the [Linktree Marketplace](https://linktr.ee/marketplace) |
|
|
21
|
+
| `settings.json` | Defines the settings made available to Linktree users when configuring the Link App via [Linktree Admin](https://linktr.ee/admin) |
|
|
22
|
+
| `fixtures/props-data.json` | Used during development, this file acts as mock data for the `settings.json` output, it is injected as props to the entry point component |
|
|
23
|
+
| `url-match-rules.json` | Defines the URL pattern to match against when users add a link on Linktree via URL, its structure follows the [URL Pattern API](https://developer.mozilla.org/en-US/docs/Web/API/URL_Pattern_API) |
|
|
24
|
+
| `schema/*.jtd.json` | These files define the shape of the data that is stored for each Link that uses this Link App. They are used to validate the data on the front and back end and to generate Typescript types shared between client and server. The format for these schemas adheres to the [JSON Type Definition](https://jsontypedef.com/), aka [RFC 8927](https://datatracker.ietf.org/doc/html/rfc8927), standard. |
|
|
25
|
+
|
|
26
|
+
## Generating types from your `schema/*.jtd.json` files
|
|
27
|
+
|
|
28
|
+
Under the hood Linktree uses the `jtd-codegen` package to generate types from your schema. If you want to generate types for local development, this package must first be installed on your system. You can install it with the following command:
|
|
29
|
+
|
|
30
|
+
```sh
|
|
31
|
+
brew install jsontypedef/jsontypedef/jtd-codegen
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
You will also require `prettier`
|
|
35
|
+
|
|
36
|
+
```sh
|
|
37
|
+
brew install prettier
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
When you have these packages installed, you can generate types by running one of the following commands:
|
|
41
|
+
|
|
42
|
+
`npm run generate:types` or `yarn generate:types`
|
|
43
|
+
|
|
44
|
+
For more information on using `jtd-codegen` to generate code see the [official documentation](https://jsontypedef.com/docs/jtd-codegen/), or for specifics on generating Typescript code [here](https://jsontypedef.com/docs/typescript-codegen/).
|
|
24
45
|
|
|
25
46
|
## UI Components
|
|
26
47
|
|
|
@@ -72,18 +93,18 @@ Access to a Link App can be granted to additional users who may need to retrieve
|
|
|
72
93
|
|
|
73
94
|
Please note the user receiving access must also have a Linktree account with developer privileges. Maintainer access can be granted to as many developer accounts as required.
|
|
74
95
|
|
|
75
|
-
|
|
96
|
+
**_Note: Only the Link App Owner can grant Maintainer access to additional users. You must be logged in with an Owner account in order to use the command._**
|
|
76
97
|
|
|
77
98
|
### Maintainer and Owner Permitted Actions
|
|
78
99
|
|
|
79
100
|
The following table compares which actions are permitted for Maintainers and Owners:
|
|
80
101
|
|
|
81
|
-
|Action
|
|
82
|
-
|
|
83
|
-
|Create Link App
|
|
84
|
-
|Get Link App
|
|
85
|
-
|Update Link App
|
|
86
|
-
|Request Link App review
|
|
87
|
-
|Get Link App maintainers
|
|
88
|
-
|Add new Link App maintainer
|
|
89
|
-
|Remove Link App maintainer
|
|
102
|
+
| Action | Owner | Maintainer | Notes |
|
|
103
|
+
| --------------------------- | ------- | ---------- | ----------------------------------------------- |
|
|
104
|
+
| Create Link App | ✓ | N/A | Owner is defined when Link App is first created |
|
|
105
|
+
| Get Link App | ✓ | ✓ | |
|
|
106
|
+
| Update Link App | ✓ | ✓ | |
|
|
107
|
+
| Request Link App review | ✓ | ✓ | |
|
|
108
|
+
| Get Link App maintainers | ✓ | ✓ | |
|
|
109
|
+
| Add new Link App maintainer | ✓ | ✗ | |
|
|
110
|
+
| Remove Link App maintainer | ✓ | ✗ | |
|
|
@@ -1,33 +1,21 @@
|
|
|
1
1
|
{
|
|
2
|
-
"title": "Link
|
|
3
|
-
"overview": {
|
|
4
|
-
"title": "You can have a heading",
|
|
5
|
-
"description": "as well as a description to inform users on what the link does."
|
|
6
|
-
},
|
|
2
|
+
"title": "Link App",
|
|
7
3
|
"elements": [
|
|
8
4
|
{
|
|
9
|
-
"
|
|
10
|
-
"
|
|
11
|
-
"
|
|
12
|
-
"
|
|
13
|
-
"linkBehaviorLabels": {
|
|
14
|
-
"embedLabel": "Embed content on the profile",
|
|
15
|
-
"linkOffLabel": "Go directly to URL"
|
|
16
|
-
},
|
|
17
|
-
"defaultValue": "embedLabel"
|
|
5
|
+
"id": "thumbnailUrl",
|
|
6
|
+
"title": "Thumbnail",
|
|
7
|
+
"inputType": "file",
|
|
8
|
+
"accept": ["image/*"]
|
|
18
9
|
},
|
|
19
10
|
{
|
|
20
|
-
"
|
|
21
|
-
"
|
|
22
|
-
"
|
|
23
|
-
"description": "and describe what the next section of inputs will do",
|
|
24
|
-
"label": "Is feature enabled?",
|
|
25
|
-
"defaultValue": true
|
|
11
|
+
"id": "title",
|
|
12
|
+
"title": "Title",
|
|
13
|
+
"inputType": "text"
|
|
26
14
|
},
|
|
27
15
|
{
|
|
28
|
-
"
|
|
29
|
-
"
|
|
30
|
-
"
|
|
16
|
+
"id": "url",
|
|
17
|
+
"title": "URL",
|
|
18
|
+
"inputType": "text"
|
|
31
19
|
}
|
|
32
20
|
]
|
|
33
21
|
}
|
|
@@ -4,11 +4,12 @@
|
|
|
4
4
|
"build": "create-link-app build",
|
|
5
5
|
"deploy": "create-link-app deploy",
|
|
6
6
|
"storybook": "create-link-app storybook",
|
|
7
|
-
"dev": "create-link-app dev"
|
|
7
|
+
"dev": "create-link-app dev",
|
|
8
|
+
"generate:types": "jtd-codegen ./schema.json --typescript-out src/types --root-name=LinkAppData"
|
|
8
9
|
},
|
|
9
10
|
"devDependencies": {
|
|
10
11
|
"@linktr.ee/component-library": "latest",
|
|
11
|
-
"@linktr.ee/create-link-app": "
|
|
12
|
+
"@linktr.ee/create-link-app": "next",
|
|
12
13
|
"@linktr.ee/ui-link-kit": "latest"
|
|
13
14
|
}
|
|
14
15
|
}
|
|
@@ -4,13 +4,39 @@
|
|
|
4
4
|
"build": "create-link-app build",
|
|
5
5
|
"deploy": "create-link-app deploy",
|
|
6
6
|
"storybook": "create-link-app storybook",
|
|
7
|
-
"dev": "create-link-app dev"
|
|
7
|
+
"dev": "create-link-app dev",
|
|
8
|
+
"generate:types": "create-link-app generate-types",
|
|
9
|
+
"prepack": "create-link-app build --native"
|
|
8
10
|
},
|
|
9
11
|
"devDependencies": {
|
|
10
12
|
"@linktr.ee/component-library": "latest",
|
|
11
|
-
"@linktr.ee/create-link-app": "
|
|
13
|
+
"@linktr.ee/create-link-app": "next",
|
|
12
14
|
"@linktr.ee/ui-link-kit": "latest",
|
|
13
|
-
"@types/react": "^
|
|
14
|
-
"@types/react-dom": "^
|
|
15
|
-
}
|
|
15
|
+
"@types/react": "^18.2.8",
|
|
16
|
+
"@types/react-dom": "^18.2.4"
|
|
17
|
+
},
|
|
18
|
+
"main": "lib/commonjs/index.js",
|
|
19
|
+
"react-native": "src/index.ts",
|
|
20
|
+
"module": "lib/module/index.js",
|
|
21
|
+
"types": "lib/typescript/src/index.d.ts",
|
|
22
|
+
"files": [
|
|
23
|
+
"src",
|
|
24
|
+
"lib",
|
|
25
|
+
"!**/__tests__",
|
|
26
|
+
"!**/__fixtures__",
|
|
27
|
+
"!**/__mocks__"
|
|
28
|
+
],
|
|
29
|
+
"react-native-builder-bob": {
|
|
30
|
+
"source": "src",
|
|
31
|
+
"output": "lib",
|
|
32
|
+
"targets": [
|
|
33
|
+
"commonjs",
|
|
34
|
+
"module",
|
|
35
|
+
"typescript"
|
|
36
|
+
]
|
|
37
|
+
},
|
|
38
|
+
"eslintIgnore": [
|
|
39
|
+
"node_modules/",
|
|
40
|
+
"lib/"
|
|
41
|
+
]
|
|
16
42
|
}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { Featured, Carousel, Grid, Stack } from './components/Layouts'
|
|
2
|
+
import { AppProps, Layout } from './types'
|
|
3
|
+
|
|
4
|
+
import './tailwind.css'
|
|
5
|
+
|
|
6
|
+
function App(props: AppProps) {
|
|
7
|
+
const { layout } = props
|
|
8
|
+
|
|
9
|
+
switch (layout) {
|
|
10
|
+
case Layout.Stack:
|
|
11
|
+
return <Stack {...props} />
|
|
12
|
+
case Layout.Grid:
|
|
13
|
+
return <Grid {...props} />
|
|
14
|
+
case Layout.Carousel:
|
|
15
|
+
return <Carousel {...props} />
|
|
16
|
+
case Layout.Featured:
|
|
17
|
+
return <Featured {...props} />
|
|
18
|
+
default:
|
|
19
|
+
return <div>Unknown layout: {props.layout}</div>
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
export default App
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
import { AppProps } from '../types'
|
|
2
|
+
|
|
3
|
+
const baseStyle = {
|
|
4
|
+
backgroundColor: 'var(--lt-color-primary)',
|
|
5
|
+
color: 'var(--lt-color-on-primary)',
|
|
6
|
+
} as React.CSSProperties
|
|
7
|
+
|
|
8
|
+
const Featured = (props: AppProps) => {
|
|
9
|
+
return (
|
|
10
|
+
<div
|
|
11
|
+
className="px-6 pt-12 pb-11 h-full"
|
|
12
|
+
style={{
|
|
13
|
+
...baseStyle,
|
|
14
|
+
borderRadius: 'var(--lt-feature-container-radius)',
|
|
15
|
+
}}
|
|
16
|
+
>
|
|
17
|
+
Featured
|
|
18
|
+
</div>
|
|
19
|
+
)
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
const Carousel = (props: AppProps) => {
|
|
23
|
+
return (
|
|
24
|
+
<div
|
|
25
|
+
className="px-4 pt-16 pb-10 h-full"
|
|
26
|
+
style={{
|
|
27
|
+
...baseStyle,
|
|
28
|
+
borderRadius: 'var(--lt-carousel-container-radius)',
|
|
29
|
+
}}
|
|
30
|
+
>
|
|
31
|
+
Carousel
|
|
32
|
+
</div>
|
|
33
|
+
)
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
const Grid = (props: AppProps) => {
|
|
37
|
+
return (
|
|
38
|
+
<div className="px-3 py-10 h-full" style={{ ...baseStyle, borderRadius: 'var(--lt-grid-container-radius)' }}>
|
|
39
|
+
Grid
|
|
40
|
+
</div>
|
|
41
|
+
)
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
const Stack = (props: AppProps) => {
|
|
45
|
+
return (
|
|
46
|
+
<div
|
|
47
|
+
className="flex p-2 h-full gap-4 w-full"
|
|
48
|
+
style={{
|
|
49
|
+
...baseStyle,
|
|
50
|
+
borderRadius: 'var(--lt-stack-container-radius)',
|
|
51
|
+
}}
|
|
52
|
+
>
|
|
53
|
+
<div className="w-16 aspect-square"></div>
|
|
54
|
+
<h2 className="mr-20">Stack</h2>
|
|
55
|
+
</div>
|
|
56
|
+
)
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
export { Featured, Carousel, Grid, Stack }
|