@linktr.ee/create-link-app 0.3.0-next.4 → 0.3.0-next.40
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 +30 -1
- package/dist/commands/build.js +4 -3
- package/dist/commands/create.js +1 -1
- package/dist/commands/deploy.js +1 -1
- package/dist/commands/dev.js +3 -2
- package/dist/commands/generate-types.js +111 -0
- package/dist/commands/grant-access.js +1 -1
- package/dist/commands/login.js +1 -1
- package/dist/commands/logout.js +1 -1
- package/dist/commands/storybook.js +28 -0
- package/dist/lib/create/create-project.js +3 -0
- package/dist/lib/deploy/pack-project.js +12 -1
- package/dist/lib/schema/compile.js +30 -0
- package/dist/postcss/postcss.config.js +31 -0
- package/dist/storybook/global.css +53 -0
- package/dist/storybook/main.js +53 -0
- package/dist/storybook/preview.js +21 -0
- package/dist/webpack/webpack.config.js +40 -40
- package/html-template/development.html +2 -2
- package/html-template/production.html +2 -2
- package/oclif.manifest.json +32 -1
- package/package.json +24 -5
- package/templates/common/README.md +38 -17
- package/templates/common/fixtures/props-data.json +1 -2
- package/templates/common/gitignore +1 -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 +5 -2
- package/templates/react/src/index.jsx +4 -13
- package/templates/react/src/tailwind.css +5 -0
- package/templates/react-ts/package.json +5 -2
- 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 +94 -0
- package/templates/react-ts/src/stories/tailwind.sb.css +5 -0
- package/templates/react-ts/src/tailwind.css +4 -0
- package/templates/react-ts/src/types/global.d.ts +11 -5
- package/templates/react-ts/src/types/index.ts +8 -7
- package/templates/react-ts/src/types/schema/index.ts +33 -0
- package/templates/react/src/images/logo.png +0 -0
- package/templates/react-ts/src/images/logo.png +0 -0
- package/templates/react-ts/src/index.tsx +0 -19
|
@@ -13,19 +13,35 @@ const path_1 = __importDefault(require("path"));
|
|
|
13
13
|
const webpack_1 = require("webpack");
|
|
14
14
|
const camelcase_1 = __importDefault(require("camelcase"));
|
|
15
15
|
const slugify_1 = __importDefault(require("slugify"));
|
|
16
|
-
const
|
|
17
|
-
const
|
|
16
|
+
const compile_1 = __importDefault(require("../lib/schema/compile"));
|
|
17
|
+
const postcss_config_1 = require("../postcss/postcss.config");
|
|
18
18
|
const { ModuleFederationPlugin } = webpack_1.container;
|
|
19
|
-
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) {
|
|
20
33
|
const appDir = process.cwd();
|
|
21
34
|
const entryFile = path_1.default.resolve(__dirname, `${env}.entry`);
|
|
22
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');
|
|
23
40
|
const manifestJson = JSON.parse(fs_1.default.readFileSync(path_1.default.resolve(appDir, 'manifest.json'), 'utf8'));
|
|
24
41
|
const linkTypeName = manifestJson.name.replace(/[^A-Za-z0-9 ]/g, '');
|
|
25
42
|
const linkTypeSlug = (0, slugify_1.default)(linkTypeName, { lower: true });
|
|
26
43
|
const linkTypeId = (0, camelcase_1.default)(linkTypeSlug, { pascalCase: true });
|
|
27
44
|
const hasTsconfig = fileExists(path_1.default.resolve(appDir, 'tsconfig.json'));
|
|
28
|
-
const componentLibraryContentPath = path_1.default.join(require.resolve('@linktr.ee/component-library/tailwind.config').split('/').slice(0, -1).join('/'), 'dist', '**', '*.js');
|
|
29
45
|
const config = {
|
|
30
46
|
target: 'web',
|
|
31
47
|
mode: env,
|
|
@@ -33,7 +49,9 @@ function default_1(env, options) {
|
|
|
33
49
|
output: {
|
|
34
50
|
publicPath: 'auto',
|
|
35
51
|
path: path_1.default.resolve(appDir, 'dist'),
|
|
36
|
-
assetModuleFilename: 'images/[hash][ext][query]',
|
|
52
|
+
assetModuleFilename: 'images/[hash].[contenthash][ext][query]',
|
|
53
|
+
chunkFilename: '[id].[contenthash].js',
|
|
54
|
+
filename: '[name].[contenthash].js',
|
|
37
55
|
},
|
|
38
56
|
module: {
|
|
39
57
|
rules: [
|
|
@@ -52,7 +70,7 @@ function default_1(env, options) {
|
|
|
52
70
|
},
|
|
53
71
|
{
|
|
54
72
|
test: /\.(png|jpe?g|gif|svg)$/i,
|
|
55
|
-
type: 'asset/inline',
|
|
73
|
+
type: 'asset/inline', // <-- this builds all images into data URLs, is that what you want?
|
|
56
74
|
},
|
|
57
75
|
{
|
|
58
76
|
test: /\.css$/,
|
|
@@ -62,33 +80,7 @@ function default_1(env, options) {
|
|
|
62
80
|
{
|
|
63
81
|
loader: 'postcss-loader',
|
|
64
82
|
options: {
|
|
65
|
-
postcssOptions: {
|
|
66
|
-
plugins: [
|
|
67
|
-
(0, tailwindcss_1.default)({
|
|
68
|
-
content: [`${appDir}/src/**/*.{js,jsx,ts,tsx}`, componentLibraryContentPath],
|
|
69
|
-
important: `.ui-link-app-${linkTypeSlug}`,
|
|
70
|
-
presets: [require('@linktr.ee/component-library/tailwind.config')],
|
|
71
|
-
plugins: [],
|
|
72
|
-
theme: {
|
|
73
|
-
extend: {
|
|
74
|
-
backgroundImage: {
|
|
75
|
-
loading: 'linear-gradient(90deg,#f3f3f1,#fff,#f3f3f1);',
|
|
76
|
-
},
|
|
77
|
-
keyframes: {
|
|
78
|
-
loading: {
|
|
79
|
-
'75%': { transform: 'translateX(100%)' },
|
|
80
|
-
'100%': { transform: 'translateX(100%)' },
|
|
81
|
-
},
|
|
82
|
-
},
|
|
83
|
-
animation: {
|
|
84
|
-
loading: 'loading 1.5s ease-in-out infinite',
|
|
85
|
-
},
|
|
86
|
-
},
|
|
87
|
-
},
|
|
88
|
-
}),
|
|
89
|
-
(0, autoprefixer_1.default)(),
|
|
90
|
-
],
|
|
91
|
-
},
|
|
83
|
+
postcssOptions: { ...(0, postcss_config_1.getPostcssConfig)({ linkTypeSlug }) },
|
|
92
84
|
},
|
|
93
85
|
},
|
|
94
86
|
],
|
|
@@ -101,15 +93,12 @@ function default_1(env, options) {
|
|
|
101
93
|
// TODO: The behaviour here with module resolution is confusing, can we make it more explicit?
|
|
102
94
|
modules: [path_1.default.resolve(appDir, 'node_modules'), 'node_modules'],
|
|
103
95
|
alias: {
|
|
104
|
-
'@linktr.ee/extension':
|
|
96
|
+
'@linktr.ee/extension': appEntry,
|
|
105
97
|
},
|
|
106
98
|
},
|
|
107
99
|
plugins: [
|
|
108
100
|
new html_webpack_plugin_1.default({
|
|
109
101
|
template: htmlTemplateFile,
|
|
110
|
-
templateParameters: {
|
|
111
|
-
tailwindBaseClass: `ui-link-app-${linkTypeSlug}`,
|
|
112
|
-
},
|
|
113
102
|
excludeChunks: [`LinkApp_${linkTypeId}`],
|
|
114
103
|
}),
|
|
115
104
|
],
|
|
@@ -127,6 +116,17 @@ function default_1(env, options) {
|
|
|
127
116
|
config.plugins.push(new mini_css_extract_plugin_1.default());
|
|
128
117
|
}
|
|
129
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
|
+
}
|
|
130
130
|
// TODO: Figure out how to manage externals with Module Federation
|
|
131
131
|
// Possibly make the index.html a host app, via separate webpack config
|
|
132
132
|
// config.externals = {
|
|
@@ -141,6 +141,8 @@ function default_1(env, options) {
|
|
|
141
141
|
};
|
|
142
142
|
config.plugins.push(new webpack_1.DefinePlugin({
|
|
143
143
|
__ALLOW_ANY_ORIGIN__: options?.allowAnyOrigin,
|
|
144
|
+
__LINK_TYPE_SLUG__: JSON.stringify(linkTypeSlug),
|
|
145
|
+
__LINK_TYPE_ID__: JSON.stringify(linkTypeId),
|
|
144
146
|
}),
|
|
145
147
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
146
148
|
// @ts-ignore
|
|
@@ -150,9 +152,7 @@ function default_1(env, options) {
|
|
|
150
152
|
}), new ModuleFederationPlugin({
|
|
151
153
|
name: `LinkApp_${linkTypeId}`,
|
|
152
154
|
filename: 'remoteEntry.js',
|
|
153
|
-
exposes:
|
|
154
|
-
['./App']: path_1.default.resolve(appDir, 'src'),
|
|
155
|
-
},
|
|
155
|
+
exposes: exposedEntryPoints,
|
|
156
156
|
shared: {
|
|
157
157
|
react: {
|
|
158
158
|
singleton: true,
|
package/oclif.manifest.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"version": "0.3.0-next.
|
|
2
|
+
"version": "0.3.0-next.40",
|
|
3
3
|
"commands": {
|
|
4
4
|
"build": {
|
|
5
5
|
"id": "build",
|
|
@@ -139,6 +139,17 @@
|
|
|
139
139
|
},
|
|
140
140
|
"args": {}
|
|
141
141
|
},
|
|
142
|
+
"generate-types": {
|
|
143
|
+
"id": "generate-types",
|
|
144
|
+
"description": "Generate Typescript types from the schema definitions",
|
|
145
|
+
"strict": true,
|
|
146
|
+
"pluginName": "@linktr.ee/create-link-app",
|
|
147
|
+
"pluginAlias": "@linktr.ee/create-link-app",
|
|
148
|
+
"pluginType": "core",
|
|
149
|
+
"aliases": [],
|
|
150
|
+
"flags": {},
|
|
151
|
+
"args": {}
|
|
152
|
+
},
|
|
142
153
|
"grant-access": {
|
|
143
154
|
"id": "grant-access",
|
|
144
155
|
"description": "Grant access to other developers to push updates for your Link App",
|
|
@@ -216,6 +227,26 @@
|
|
|
216
227
|
}
|
|
217
228
|
},
|
|
218
229
|
"args": {}
|
|
230
|
+
},
|
|
231
|
+
"storybook": {
|
|
232
|
+
"id": "storybook",
|
|
233
|
+
"description": "Start the Storybook development server",
|
|
234
|
+
"strict": true,
|
|
235
|
+
"pluginName": "@linktr.ee/create-link-app",
|
|
236
|
+
"pluginAlias": "@linktr.ee/create-link-app",
|
|
237
|
+
"pluginType": "core",
|
|
238
|
+
"aliases": [],
|
|
239
|
+
"flags": {
|
|
240
|
+
"port": {
|
|
241
|
+
"name": "port",
|
|
242
|
+
"type": "option",
|
|
243
|
+
"char": "p",
|
|
244
|
+
"description": "Port to run the Storybook server on",
|
|
245
|
+
"multiple": false,
|
|
246
|
+
"default": 6006
|
|
247
|
+
}
|
|
248
|
+
},
|
|
249
|
+
"args": {}
|
|
219
250
|
}
|
|
220
251
|
}
|
|
221
252
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@linktr.ee/create-link-app",
|
|
3
|
-
"version": "0.3.0-next.
|
|
3
|
+
"version": "0.3.0-next.40",
|
|
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,22 @@
|
|
|
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
41
|
"@oclif/plugin-help": "^5.1.12",
|
|
42
|
+
"@storybook/addon-actions": "^6.5.9",
|
|
43
|
+
"@storybook/addon-essentials": "^6.5.9",
|
|
44
|
+
"@storybook/addon-interactions": "^6.5.9",
|
|
45
|
+
"@storybook/addon-links": "^6.5.9",
|
|
46
|
+
"@storybook/addon-postcss": "^2.0.0",
|
|
47
|
+
"@storybook/builder-webpack5": "^6.5.9",
|
|
48
|
+
"@storybook/manager-webpack5": "^6.5.9",
|
|
49
|
+
"@storybook/react": "^6.5.9",
|
|
50
|
+
"@tailwindcss/line-clamp": "^0.4.4",
|
|
51
|
+
"@testing-library/react": "^12.1.4",
|
|
52
|
+
"@testing-library/user-event": "14",
|
|
53
|
+
"ajv": "^8.12.0",
|
|
40
54
|
"archiver": "^5.3.1",
|
|
41
55
|
"autoprefixer": "^10.4.14",
|
|
42
56
|
"axios": "^0.27.2",
|
|
@@ -53,12 +67,17 @@
|
|
|
53
67
|
"netrc-parser": "^3.1.6",
|
|
54
68
|
"openid-client": "^5.1.6",
|
|
55
69
|
"postcss": "^8.4.21",
|
|
70
|
+
"postcss-loader": "^4.3.0",
|
|
71
|
+
"prettier": "^2.8.8",
|
|
72
|
+
"prop-types": "^15.8.1",
|
|
56
73
|
"react": "^17.0.2",
|
|
57
74
|
"react-dom": "^17.0.2",
|
|
58
75
|
"slugify": "^1.6.6",
|
|
76
|
+
"storybook-addon-designs": "^6.3.1",
|
|
77
|
+
"storybook-addon-turbo-build": "^1.1.0",
|
|
59
78
|
"style-loader": "^3.3.2",
|
|
60
79
|
"styled-components": "^5.3.5",
|
|
61
|
-
"tailwindcss": "^3.3.
|
|
80
|
+
"tailwindcss": "^3.3.2",
|
|
62
81
|
"typescript": "^4.7.3",
|
|
63
82
|
"webpack": "^5.75.0",
|
|
64
83
|
"webpack-dev-server": "^4.11.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
|
}
|
|
@@ -3,10 +3,13 @@
|
|
|
3
3
|
"scripts": {
|
|
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",
|
|
8
|
+
"generate:types": "jtd-codegen ./schema.json --typescript-out src/types --root-name=LinkAppData"
|
|
7
9
|
},
|
|
8
10
|
"devDependencies": {
|
|
9
|
-
"@linktr.ee/
|
|
11
|
+
"@linktr.ee/component-library": "latest",
|
|
12
|
+
"@linktr.ee/create-link-app": "next",
|
|
10
13
|
"@linktr.ee/ui-link-kit": "latest"
|
|
11
14
|
}
|
|
12
15
|
}
|
|
@@ -1,18 +1,9 @@
|
|
|
1
|
-
import
|
|
1
|
+
import P from '@linktr.ee/component-library/P'
|
|
2
2
|
|
|
3
|
-
import
|
|
3
|
+
import './tailwind.css'
|
|
4
4
|
|
|
5
|
-
function App({
|
|
6
|
-
return
|
|
7
|
-
<Container
|
|
8
|
-
primaryCta={toggle ? { label: 'Visit our UI docs for more info', href: 'https://blstrco.github.io/ui-link-kit/' } : null}
|
|
9
|
-
secondaryCta={toggle ? { label: 'Original url for your Linktree link', href: __linkUrl } : null}
|
|
10
|
-
logo={logo}
|
|
11
|
-
>
|
|
12
|
-
<Header heading={`Hello ${your_name}!`} secondaryHeading="Congratulations, you now have a Linktree link!" layout="hero" />
|
|
13
|
-
<Description>{your_name}</Description>
|
|
14
|
-
</Container>
|
|
15
|
-
)
|
|
5
|
+
function App({ title }) {
|
|
6
|
+
return <P>{title}</P>
|
|
16
7
|
}
|
|
17
8
|
|
|
18
9
|
export default App
|
|
@@ -3,10 +3,13 @@
|
|
|
3
3
|
"scripts": {
|
|
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",
|
|
8
|
+
"generate:types": "create-link-app generate-types"
|
|
7
9
|
},
|
|
8
10
|
"devDependencies": {
|
|
9
|
-
"@linktr.ee/
|
|
11
|
+
"@linktr.ee/component-library": "latest",
|
|
12
|
+
"@linktr.ee/create-link-app": "next",
|
|
10
13
|
"@linktr.ee/ui-link-kit": "latest",
|
|
11
14
|
"@types/react": "^17.0.0",
|
|
12
15
|
"@types/react-dom": "^17.0.0"
|
|
@@ -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 }
|