@linktr.ee/create-link-app 0.3.0-next.28 → 0.3.0-next.3
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 +0 -16
- package/dist/commands/build.js +2 -3
- package/dist/commands/dev.js +1 -2
- package/dist/lib/create/create-project.js +0 -3
- package/dist/lib/deploy/pack-project.js +0 -2
- package/dist/webpack/webpack.config.js +4 -55
- package/html-template/development.html +1 -1
- package/html-template/production.html +1 -1
- package/oclif.manifest.json +1 -21
- package/package.json +3 -28
- package/templates/common/README.md +0 -18
- package/templates/common/fixtures/props-data.json +2 -1
- package/templates/common/gitignore +0 -1
- package/templates/common/settings.json +23 -11
- package/templates/react/package.json +2 -5
- package/templates/react/src/images/logo.png +0 -0
- package/templates/react/src/index.jsx +13 -4
- package/templates/react-ts/package.json +2 -5
- package/templates/react-ts/src/images/logo.png +0 -0
- package/templates/react-ts/src/index.tsx +14 -20
- package/templates/react-ts/src/types/global.d.ts +5 -8
- package/templates/react-ts/src/types/index.ts +6 -34
- package/dist/commands/storybook.js +0 -28
- package/dist/lib/schema/compile.js +0 -27
- package/dist/postcss/postcss.config.js +0 -21
- package/dist/storybook/global.css +0 -53
- package/dist/storybook/main.js +0 -62
- package/dist/storybook/preview.js +0 -13
- package/templates/common/schema.json +0 -38
- package/templates/react/src/tailwind.css +0 -5
- package/templates/react-ts/src/components/Layouts.tsx +0 -57
- package/templates/react-ts/src/stories/LinkApp.stories.tsx +0 -99
- package/templates/react-ts/src/stories/tailwind.sb.css +0 -5
- package/templates/react-ts/src/tailwind.css +0 -4
package/README.md
CHANGED
|
@@ -27,7 +27,6 @@ yarn create @linktr.ee/create-link-app my-link-app
|
|
|
27
27
|
* [`create-link-app help [COMMANDS]`](#create-link-app-help-commands)
|
|
28
28
|
* [`create-link-app login`](#create-link-app-login)
|
|
29
29
|
* [`create-link-app logout`](#create-link-app-logout)
|
|
30
|
-
* [`create-link-app storybook`](#create-link-app-storybook)
|
|
31
30
|
|
|
32
31
|
## `create-link-app build`
|
|
33
32
|
|
|
@@ -169,19 +168,4 @@ USAGE
|
|
|
169
168
|
DESCRIPTION
|
|
170
169
|
Logout and clear browser session
|
|
171
170
|
```
|
|
172
|
-
|
|
173
|
-
## `create-link-app storybook`
|
|
174
|
-
|
|
175
|
-
Start the Storybook development server
|
|
176
|
-
|
|
177
|
-
```
|
|
178
|
-
USAGE
|
|
179
|
-
$ create-link-app storybook [-p <value>]
|
|
180
|
-
|
|
181
|
-
FLAGS
|
|
182
|
-
-p, --port=<value> [default: 6006] Port to run the Storybook server on
|
|
183
|
-
|
|
184
|
-
DESCRIPTION
|
|
185
|
-
Start the Storybook development server
|
|
186
|
-
```
|
|
187
171
|
<!-- commandsstop -->
|
package/dist/commands/build.js
CHANGED
|
@@ -10,10 +10,9 @@ const webpack_config_1 = __importDefault(require("../webpack/webpack.config"));
|
|
|
10
10
|
class Build extends base_1.default {
|
|
11
11
|
async run() {
|
|
12
12
|
const { flags } = await this.parse(Build);
|
|
13
|
-
|
|
13
|
+
(0, webpack_1.default)((0, webpack_config_1.default)('production', {
|
|
14
14
|
allowAnyOrigin: flags['allow-any-origin'],
|
|
15
|
-
})
|
|
16
|
-
(0, webpack_1.default)(config, (err, stats) => {
|
|
15
|
+
}), (err, stats) => {
|
|
17
16
|
if (err) {
|
|
18
17
|
this.error(err);
|
|
19
18
|
}
|
package/dist/commands/dev.js
CHANGED
|
@@ -11,7 +11,6 @@ const webpack_config_1 = __importDefault(require("../webpack/webpack.config"));
|
|
|
11
11
|
class Dev extends base_1.default {
|
|
12
12
|
async run() {
|
|
13
13
|
const { flags } = await this.parse(Dev);
|
|
14
|
-
const config = await (0, webpack_config_1.default)('development');
|
|
15
14
|
const devServer = new webpack_dev_server_1.default({
|
|
16
15
|
client: {
|
|
17
16
|
overlay: false,
|
|
@@ -19,7 +18,7 @@ class Dev extends base_1.default {
|
|
|
19
18
|
hot: false,
|
|
20
19
|
https: flags.https,
|
|
21
20
|
port: flags.port,
|
|
22
|
-
}, (0, webpack_1.default)(
|
|
21
|
+
}, (0, webpack_1.default)((0, webpack_config_1.default)('development')));
|
|
23
22
|
await devServer.start();
|
|
24
23
|
}
|
|
25
24
|
}
|
|
@@ -14,9 +14,6 @@ const createProject = async (template, targetDir) => {
|
|
|
14
14
|
await fs_extra_1.default.copy(templateDir, targetDir);
|
|
15
15
|
await fs_extra_1.default.copy(templateCommonDir, targetDir);
|
|
16
16
|
await fs_extra_1.default.move(`${targetDir}/gitignore`, `${targetDir}/.gitignore`);
|
|
17
|
-
if (await fs_extra_1.default.existsSync(`${targetDir}/src/types/global.d.ts`)) {
|
|
18
|
-
await fs_extra_1.default.unlink(`${targetDir}/src/types/global.d.ts`);
|
|
19
|
-
}
|
|
20
17
|
// update `name` field in project manifest
|
|
21
18
|
const manifest = await fs_extra_1.default.readJson(`${targetDir}/manifest.json`);
|
|
22
19
|
manifest.name = (0, project_name_to_title_1.default)(path_1.default.basename(targetDir));
|
|
@@ -9,7 +9,6 @@ const path_1 = __importDefault(require("path"));
|
|
|
9
9
|
/**
|
|
10
10
|
* Pack the Link App source files into `package.tgz`. This includes the following:
|
|
11
11
|
* - `src/`
|
|
12
|
-
* - `schema.json`
|
|
13
12
|
* - `package.json`
|
|
14
13
|
* - `package-lock.json` - *optional*
|
|
15
14
|
* - `yarn.lock` - *optional*
|
|
@@ -44,7 +43,6 @@ async function packProject() {
|
|
|
44
43
|
handleFailure(err);
|
|
45
44
|
});
|
|
46
45
|
archive.pipe(outputWriteStream);
|
|
47
|
-
archive.file(resolveProjPath('schema.json'), { name: 'schema.json' });
|
|
48
46
|
archive.file(resolveProjPath('package.json'), { name: 'package.json' });
|
|
49
47
|
archive.file(resolveProjPath('package-lock.json'), { name: 'package-lock.json' });
|
|
50
48
|
archive.file(resolveProjPath('yarn.lock'), { name: 'yarn.lock' });
|
|
@@ -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
|
};
|
|
@@ -31,26 +8,18 @@ const fork_ts_checker_webpack_plugin_1 = __importDefault(require("fork-ts-checke
|
|
|
31
8
|
const fs_1 = __importDefault(require("fs"));
|
|
32
9
|
const html_webpack_plugin_1 = __importDefault(require("html-webpack-plugin"));
|
|
33
10
|
const inject_body_webpack_plugin_1 = __importDefault(require("inject-body-webpack-plugin"));
|
|
34
|
-
const mini_css_extract_plugin_1 = __importDefault(require("mini-css-extract-plugin"));
|
|
35
11
|
const path_1 = __importDefault(require("path"));
|
|
36
12
|
const webpack_1 = require("webpack");
|
|
37
13
|
const camelcase_1 = __importDefault(require("camelcase"));
|
|
38
14
|
const slugify_1 = __importDefault(require("slugify"));
|
|
39
|
-
const compile_1 = __importDefault(require("../lib/schema/compile"));
|
|
40
|
-
const postcssOptions = __importStar(require("../postcss/postcss.config"));
|
|
41
15
|
const { ModuleFederationPlugin } = webpack_1.container;
|
|
42
|
-
function
|
|
43
|
-
const base64 = Buffer.from(code).toString('base64');
|
|
44
|
-
return `data:text/javascript;base64,${base64}`;
|
|
45
|
-
}
|
|
46
|
-
async function default_1(env, options) {
|
|
16
|
+
function default_1(env, options) {
|
|
47
17
|
const appDir = process.cwd();
|
|
48
18
|
const entryFile = path_1.default.resolve(__dirname, `${env}.entry`);
|
|
49
19
|
const htmlTemplateFile = path_1.default.resolve(__dirname, '..', '..', 'html-template', `${env}.html`);
|
|
50
20
|
const manifestJson = JSON.parse(fs_1.default.readFileSync(path_1.default.resolve(appDir, 'manifest.json'), 'utf8'));
|
|
51
21
|
const linkTypeName = manifestJson.name.replace(/[^A-Za-z0-9 ]/g, '');
|
|
52
|
-
const
|
|
53
|
-
const linkTypeId = (0, camelcase_1.default)(linkTypeSlug, { pascalCase: true });
|
|
22
|
+
const linkTypeId = (0, camelcase_1.default)((0, slugify_1.default)(linkTypeName, { lower: true }), { pascalCase: true });
|
|
54
23
|
const hasTsconfig = fileExists(path_1.default.resolve(appDir, 'tsconfig.json'));
|
|
55
24
|
const config = {
|
|
56
25
|
target: 'web',
|
|
@@ -59,9 +28,7 @@ async function default_1(env, options) {
|
|
|
59
28
|
output: {
|
|
60
29
|
publicPath: 'auto',
|
|
61
30
|
path: path_1.default.resolve(appDir, 'dist'),
|
|
62
|
-
assetModuleFilename: 'images/[hash]
|
|
63
|
-
chunkFilename: '[id].[contenthash].js',
|
|
64
|
-
filename: '[name].[contenthash].js',
|
|
31
|
+
assetModuleFilename: 'images/[hash][ext][query]',
|
|
65
32
|
},
|
|
66
33
|
module: {
|
|
67
34
|
rules: [
|
|
@@ -80,20 +47,7 @@ async function default_1(env, options) {
|
|
|
80
47
|
},
|
|
81
48
|
{
|
|
82
49
|
test: /\.(png|jpe?g|gif|svg)$/i,
|
|
83
|
-
type: 'asset/inline',
|
|
84
|
-
},
|
|
85
|
-
{
|
|
86
|
-
test: /\.css$/,
|
|
87
|
-
use: [
|
|
88
|
-
mini_css_extract_plugin_1.default.loader,
|
|
89
|
-
'css-loader',
|
|
90
|
-
{
|
|
91
|
-
loader: 'postcss-loader',
|
|
92
|
-
options: {
|
|
93
|
-
postcssOptions: { ...postcssOptions },
|
|
94
|
-
},
|
|
95
|
-
},
|
|
96
|
-
],
|
|
50
|
+
type: 'asset/inline',
|
|
97
51
|
},
|
|
98
52
|
],
|
|
99
53
|
},
|
|
@@ -123,7 +77,6 @@ async function default_1(env, options) {
|
|
|
123
77
|
...config.resolve.alias,
|
|
124
78
|
'@linktr.ee/extension-dev-data': path_1.default.resolve(appDir, 'fixtures', 'props-data.json'),
|
|
125
79
|
};
|
|
126
|
-
config.plugins.push(new mini_css_extract_plugin_1.default());
|
|
127
80
|
}
|
|
128
81
|
if (env === 'production') {
|
|
129
82
|
// TODO: Figure out how to manage externals with Module Federation
|
|
@@ -151,7 +104,6 @@ async function default_1(env, options) {
|
|
|
151
104
|
filename: 'remoteEntry.js',
|
|
152
105
|
exposes: {
|
|
153
106
|
['./App']: path_1.default.resolve(appDir, 'src'),
|
|
154
|
-
['./validate']: toVirtualModule((await (0, compile_1.default)())),
|
|
155
107
|
},
|
|
156
108
|
shared: {
|
|
157
109
|
react: {
|
|
@@ -167,9 +119,6 @@ async function default_1(env, options) {
|
|
|
167
119
|
// requiredVersion: '5',
|
|
168
120
|
// },
|
|
169
121
|
},
|
|
170
|
-
}), new mini_css_extract_plugin_1.default({
|
|
171
|
-
filename: '[name].[contenthash].css',
|
|
172
|
-
chunkFilename: '[id].[contenthash].css',
|
|
173
122
|
}));
|
|
174
123
|
}
|
|
175
124
|
return config;
|
package/oclif.manifest.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"version": "0.3.0-next.
|
|
2
|
+
"version": "0.3.0-next.3",
|
|
3
3
|
"commands": {
|
|
4
4
|
"build": {
|
|
5
5
|
"id": "build",
|
|
@@ -216,26 +216,6 @@
|
|
|
216
216
|
}
|
|
217
217
|
},
|
|
218
218
|
"args": {}
|
|
219
|
-
},
|
|
220
|
-
"storybook": {
|
|
221
|
-
"id": "storybook",
|
|
222
|
-
"description": "Start the Storybook development server",
|
|
223
|
-
"strict": true,
|
|
224
|
-
"pluginName": "@linktr.ee/create-link-app",
|
|
225
|
-
"pluginAlias": "@linktr.ee/create-link-app",
|
|
226
|
-
"pluginType": "core",
|
|
227
|
-
"aliases": [],
|
|
228
|
-
"flags": {
|
|
229
|
-
"port": {
|
|
230
|
-
"name": "port",
|
|
231
|
-
"type": "option",
|
|
232
|
-
"char": "p",
|
|
233
|
-
"description": "Port to run the Storybook server on",
|
|
234
|
-
"multiple": false,
|
|
235
|
-
"default": 6006
|
|
236
|
-
}
|
|
237
|
-
},
|
|
238
|
-
"args": {}
|
|
239
219
|
}
|
|
240
220
|
}
|
|
241
221
|
}
|
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.3",
|
|
4
4
|
"description": "Create a Link App on Linktr.ee.",
|
|
5
5
|
"license": "UNLICENSED",
|
|
6
6
|
"author": "Linktree",
|
|
@@ -19,14 +19,13 @@
|
|
|
19
19
|
"/templates"
|
|
20
20
|
],
|
|
21
21
|
"scripts": {
|
|
22
|
-
"build": "shx rm -rf dist && tsc -b
|
|
22
|
+
"build": "shx rm -rf dist && tsc -b",
|
|
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"
|
|
29
|
-
"copy-storybook-global-css": "cp ./src/storybook/global.css ./dist/storybook/global.css"
|
|
28
|
+
"version": "oclif readme && git add README.md"
|
|
30
29
|
},
|
|
31
30
|
"dependencies": {
|
|
32
31
|
"@babel/core": "^7.18.2",
|
|
@@ -35,54 +34,30 @@
|
|
|
35
34
|
"@babel/preset-react": "^7.17.12",
|
|
36
35
|
"@babel/preset-typescript": "^7.17.12",
|
|
37
36
|
"@babel/runtime": "^7.18.3",
|
|
38
|
-
"@linktr.ee/component-library": "^7.0.17",
|
|
39
|
-
"@linktr.ee/ui-link-kit": "latest",
|
|
40
37
|
"@oclif/core": "^1.9.0",
|
|
41
38
|
"@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
|
-
"@testing-library/react": "^12.1.4",
|
|
51
|
-
"@testing-library/user-event": "14",
|
|
52
|
-
"ajv": "^8.12.0",
|
|
53
39
|
"archiver": "^5.3.1",
|
|
54
|
-
"autoprefixer": "^10.4.14",
|
|
55
40
|
"axios": "^0.27.2",
|
|
56
41
|
"babel-loader": "^8.2.5",
|
|
57
42
|
"camelcase": "^6.3.0",
|
|
58
|
-
"css-loader": "^6.7.3",
|
|
59
43
|
"fork-ts-checker-webpack-plugin": "^7.2.11",
|
|
60
44
|
"form-data": "^4.0.0",
|
|
61
45
|
"fs-extra": "^10.1.0",
|
|
62
46
|
"html-webpack-plugin": "^5.5.0",
|
|
63
47
|
"inject-body-webpack-plugin": "^1.3.0",
|
|
64
48
|
"jsonwebtoken": "^8.5.1",
|
|
65
|
-
"mini-css-extract-plugin": "^2.7.5",
|
|
66
49
|
"netrc-parser": "^3.1.6",
|
|
67
50
|
"openid-client": "^5.1.6",
|
|
68
|
-
"postcss": "^8.4.21",
|
|
69
|
-
"postcss-loader": "^4.3.0",
|
|
70
|
-
"prop-types": "^15.8.1",
|
|
71
51
|
"react": "^17.0.2",
|
|
72
52
|
"react-dom": "^17.0.2",
|
|
73
53
|
"slugify": "^1.6.6",
|
|
74
|
-
"storybook-addon-designs": "^6.3.1",
|
|
75
|
-
"storybook-addon-turbo-build": "^1.1.0",
|
|
76
|
-
"style-loader": "^3.3.2",
|
|
77
54
|
"styled-components": "^5.3.5",
|
|
78
|
-
"tailwindcss": "^3.3.2",
|
|
79
55
|
"typescript": "^4.7.3",
|
|
80
56
|
"webpack": "^5.75.0",
|
|
81
57
|
"webpack-dev-server": "^4.11.1"
|
|
82
58
|
},
|
|
83
59
|
"devDependencies": {
|
|
84
60
|
"@oclif/test": "^2.1.0",
|
|
85
|
-
"@tailwindcss/line-clamp": "^0.4.4",
|
|
86
61
|
"@types/archiver": "^5.3.1",
|
|
87
62
|
"@types/axios": "^0.14.0",
|
|
88
63
|
"@types/form-data": "^2.5.0",
|
|
@@ -21,24 +21,6 @@ Several files were created during the bootstrapping of this project. Some of the
|
|
|
21
21
|
| `settings.json` | Defines the settings made available to Linktree users when configuring the Link App via [Linktree Admin](https://linktr.ee/admin) |
|
|
22
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
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.json` | Defines the schema a Link App will use for generating types shared between client and server. The format for the schema 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 `schema.json`
|
|
27
|
-
|
|
28
|
-
To generate the appropriate Typescript types from your schema run one of the following commands:
|
|
29
|
-
|
|
30
|
-
`npm run generate:types` or `yarn generate:types`
|
|
31
|
-
|
|
32
|
-
Please note that under the hood we use the `jtd-codegen` package which must first be installed on your system.
|
|
33
|
-
|
|
34
|
-
This can be installed with the following command:
|
|
35
|
-
|
|
36
|
-
```sh
|
|
37
|
-
brew install jsontypedef/jsontypedef/jtd-codegen
|
|
38
|
-
```
|
|
39
|
-
|
|
40
|
-
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/).
|
|
41
|
-
|
|
42
24
|
|
|
43
25
|
## UI Components
|
|
44
26
|
|
|
@@ -1,21 +1,33 @@
|
|
|
1
1
|
{
|
|
2
|
-
"title": "Link
|
|
2
|
+
"title": "Link Type",
|
|
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
|
+
},
|
|
3
7
|
"elements": [
|
|
4
8
|
{
|
|
5
|
-
"
|
|
6
|
-
"
|
|
7
|
-
"
|
|
8
|
-
"
|
|
9
|
+
"inputType": "linkBehavior",
|
|
10
|
+
"id": "how_link_behaves",
|
|
11
|
+
"title": "How would you like the link to behave?",
|
|
12
|
+
"description": "When a user interacts with this link:",
|
|
13
|
+
"linkBehaviorLabels": {
|
|
14
|
+
"embedLabel": "Embed content on the profile",
|
|
15
|
+
"linkOffLabel": "Go directly to URL"
|
|
16
|
+
},
|
|
17
|
+
"defaultValue": "embedLabel"
|
|
9
18
|
},
|
|
10
19
|
{
|
|
11
|
-
"
|
|
12
|
-
"
|
|
13
|
-
"
|
|
20
|
+
"inputType": "switch",
|
|
21
|
+
"id": "toggle",
|
|
22
|
+
"title": "Use another title/description to break up content",
|
|
23
|
+
"description": "and describe what the next section of inputs will do",
|
|
24
|
+
"label": "Is feature enabled?",
|
|
25
|
+
"defaultValue": true
|
|
14
26
|
},
|
|
15
27
|
{
|
|
16
|
-
"
|
|
17
|
-
"
|
|
18
|
-
"
|
|
28
|
+
"inputType": "text",
|
|
29
|
+
"id": "your_name",
|
|
30
|
+
"label": "elements that only have a label will stick close the element above"
|
|
19
31
|
}
|
|
20
32
|
]
|
|
21
33
|
}
|
|
@@ -3,13 +3,10 @@
|
|
|
3
3
|
"scripts": {
|
|
4
4
|
"build": "create-link-app build",
|
|
5
5
|
"deploy": "create-link-app deploy",
|
|
6
|
-
"
|
|
7
|
-
"dev": "create-link-app dev",
|
|
8
|
-
"generate:types": "jtd-codegen ./schema.json --typescript-out src/types --root-name=LinkAppData"
|
|
6
|
+
"dev": "create-link-app dev"
|
|
9
7
|
},
|
|
10
8
|
"devDependencies": {
|
|
11
|
-
"@linktr.ee/
|
|
12
|
-
"@linktr.ee/create-link-app": "next",
|
|
9
|
+
"@linktr.ee/create-link-app": "latest",
|
|
13
10
|
"@linktr.ee/ui-link-kit": "latest"
|
|
14
11
|
}
|
|
15
12
|
}
|
|
Binary file
|
|
@@ -1,9 +1,18 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { Container, Description, Header } from '@linktr.ee/ui-link-kit'
|
|
2
2
|
|
|
3
|
-
import './
|
|
3
|
+
import logo from './images/logo.png'
|
|
4
4
|
|
|
5
|
-
function App({
|
|
6
|
-
return
|
|
5
|
+
function App({ toggle, your_name, __linkUrl }) {
|
|
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
|
+
)
|
|
7
16
|
}
|
|
8
17
|
|
|
9
18
|
export default App
|
|
@@ -3,13 +3,10 @@
|
|
|
3
3
|
"scripts": {
|
|
4
4
|
"build": "create-link-app build",
|
|
5
5
|
"deploy": "create-link-app deploy",
|
|
6
|
-
"
|
|
7
|
-
"dev": "create-link-app dev",
|
|
8
|
-
"generate:types": "jtd-codegen ./schema.json --typescript-out src/types --root-name=LinkAppData"
|
|
6
|
+
"dev": "create-link-app dev"
|
|
9
7
|
},
|
|
10
8
|
"devDependencies": {
|
|
11
|
-
"@linktr.ee/
|
|
12
|
-
"@linktr.ee/create-link-app": "next",
|
|
9
|
+
"@linktr.ee/create-link-app": "latest",
|
|
13
10
|
"@linktr.ee/ui-link-kit": "latest",
|
|
14
11
|
"@types/react": "^17.0.0",
|
|
15
12
|
"@types/react-dom": "^17.0.0"
|
|
Binary file
|
|
@@ -1,25 +1,19 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { SettingsData
|
|
1
|
+
import { Container, Description, Header } from '@linktr.ee/ui-link-kit'
|
|
2
|
+
import { SettingsData } from './types'
|
|
3
3
|
|
|
4
|
-
import './
|
|
4
|
+
import logo from './images/logo.png'
|
|
5
5
|
|
|
6
|
-
function App(
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
return <Featured {...props} />
|
|
18
|
-
case Layout.sheetBody:
|
|
19
|
-
return <SheetBody />
|
|
20
|
-
default:
|
|
21
|
-
return <div>Unknown layout: {props.layout}</div>
|
|
22
|
-
}
|
|
6
|
+
function App({ toggle, your_name, __linkUrl }: SettingsData) {
|
|
7
|
+
return (
|
|
8
|
+
<Container
|
|
9
|
+
primaryCta={toggle ? { label: 'Visit our UI docs for more info', href: 'https://blstrco.github.io/ui-link-kit/' } : null}
|
|
10
|
+
secondaryCta={toggle ? { label: 'Original url for your Linktree link', href: __linkUrl } : null}
|
|
11
|
+
logo={logo}
|
|
12
|
+
>
|
|
13
|
+
<Header heading={`Hello ${your_name}!`} secondaryHeading="Congratulations, you now have a Linktree link!" layout="hero" />
|
|
14
|
+
<Description>{your_name}</Description>
|
|
15
|
+
</Container>
|
|
16
|
+
)
|
|
23
17
|
}
|
|
24
18
|
|
|
25
19
|
export default App
|
|
@@ -1,8 +1,5 @@
|
|
|
1
|
-
|
|
2
|
-
declare module '
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
declare module '*props-data.json' {
|
|
7
|
-
export const name: string
|
|
8
|
-
}
|
|
1
|
+
declare module '*.jpg'
|
|
2
|
+
declare module '*.png'
|
|
3
|
+
declare module '*.jpeg'
|
|
4
|
+
declare module '*.gif'
|
|
5
|
+
declare module '*.svg'
|
|
@@ -1,35 +1,7 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
export interface LinkAppData {
|
|
4
|
-
protectedData: ProtectedData;
|
|
5
|
-
publicData: PublicData;
|
|
6
|
-
|
|
7
|
-
/**
|
|
8
|
-
* This should never be sent to the client
|
|
9
|
-
*/
|
|
10
|
-
privateData?: PrivateData;
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
/**
|
|
14
|
-
* This represents the types for backend only data, it should never be sent to
|
|
15
|
-
* the client
|
|
16
|
-
*/
|
|
17
|
-
export interface PrivateData {
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
/**
|
|
21
|
-
* This represents the types derived from the linktree-backend context service,
|
|
22
|
-
* and is read only from the client
|
|
23
|
-
*/
|
|
24
|
-
export interface ProtectedData {
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
/**
|
|
28
|
-
* This represents the types derived from settings.json, and is editable from
|
|
29
|
-
* the client
|
|
30
|
-
*/
|
|
31
|
-
export interface PublicData {
|
|
32
|
-
thumbnailUrl: string;
|
|
33
|
-
title: string;
|
|
34
|
-
url: string;
|
|
1
|
+
type LinktreeLinkContext = {
|
|
2
|
+
__linkUrl: string
|
|
35
3
|
}
|
|
4
|
+
export type SettingsData = {
|
|
5
|
+
toggle: boolean
|
|
6
|
+
your_name: string
|
|
7
|
+
} & LinktreeLinkContext
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
-
};
|
|
5
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
const core_1 = require("@oclif/core");
|
|
7
|
-
const child_process_1 = require("child_process");
|
|
8
|
-
const base_1 = __importDefault(require("../base"));
|
|
9
|
-
const path_1 = __importDefault(require("path"));
|
|
10
|
-
class Storybook extends base_1.default {
|
|
11
|
-
async run() {
|
|
12
|
-
const configPath = path_1.default.resolve(__dirname, '..', 'storybook');
|
|
13
|
-
const { flags } = await this.parse(Storybook);
|
|
14
|
-
const storybook = (0, child_process_1.spawn)(`start-storybook -p ${flags.port} -c ${configPath}`, { shell: true, stdio: 'inherit' });
|
|
15
|
-
storybook.on('error', (err) => {
|
|
16
|
-
throw err;
|
|
17
|
-
});
|
|
18
|
-
}
|
|
19
|
-
}
|
|
20
|
-
exports.default = Storybook;
|
|
21
|
-
Storybook.description = 'Start the Storybook development server';
|
|
22
|
-
Storybook.flags = {
|
|
23
|
-
port: core_1.Flags.integer({
|
|
24
|
-
char: 'p',
|
|
25
|
-
description: 'Port to run the Storybook server on',
|
|
26
|
-
default: 6006,
|
|
27
|
-
}),
|
|
28
|
-
};
|
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
-
};
|
|
5
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
const fs_extra_1 = __importDefault(require("fs-extra"));
|
|
7
|
-
const path_1 = __importDefault(require("path"));
|
|
8
|
-
const jtd_js_1 = __importDefault(require("ajv/dist/jtd.js"));
|
|
9
|
-
const index_js_1 = __importDefault(require("ajv/dist/standalone/index.js"));
|
|
10
|
-
const defaultSchemaPath = path_1.default.join(process.cwd(), './schema.json');
|
|
11
|
-
async function compileSchema(inputSchemaPath = defaultSchemaPath) {
|
|
12
|
-
try {
|
|
13
|
-
const schema = await fs_extra_1.default.readJSON(inputSchemaPath);
|
|
14
|
-
const ajv = new jtd_js_1.default({
|
|
15
|
-
// @ts-expect-error: In JTD mode some options are not typed correctly.
|
|
16
|
-
strict: false,
|
|
17
|
-
code: { source: true, esm: true },
|
|
18
|
-
});
|
|
19
|
-
const compiled = ajv.compile(schema);
|
|
20
|
-
const moduleCode = (0, index_js_1.default)(ajv, compiled);
|
|
21
|
-
return moduleCode;
|
|
22
|
-
}
|
|
23
|
-
catch (e) {
|
|
24
|
-
console.error(e);
|
|
25
|
-
}
|
|
26
|
-
}
|
|
27
|
-
exports.default = compileSchema;
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
-
};
|
|
5
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
const path_1 = __importDefault(require("path"));
|
|
7
|
-
const tailwindcss_1 = __importDefault(require("tailwindcss"));
|
|
8
|
-
const autoprefixer_1 = __importDefault(require("autoprefixer"));
|
|
9
|
-
const componentLibraryContentPath = path_1.default.join(require.resolve('@linktr.ee/component-library/tailwind.config').split('/').slice(0, -1).join('/'), 'dist', '**', '*.js');
|
|
10
|
-
const uiLinkKitPath = path_1.default.join(require.resolve('@linktr.ee/ui-link-kit').split('/').slice(0, -2).join('/'), '**', '*.js');
|
|
11
|
-
const config = {
|
|
12
|
-
plugins: [
|
|
13
|
-
(0, tailwindcss_1.default)({
|
|
14
|
-
content: [`${process.cwd()}/src/**/*.{js,jsx,ts,tsx}`, componentLibraryContentPath, uiLinkKitPath],
|
|
15
|
-
presets: [require('@linktr.ee/component-library/tailwind.config')],
|
|
16
|
-
plugins: [require('@tailwindcss/line-clamp')],
|
|
17
|
-
}),
|
|
18
|
-
(0, autoprefixer_1.default)(),
|
|
19
|
-
],
|
|
20
|
-
};
|
|
21
|
-
module.exports = config;
|
|
@@ -1,53 +0,0 @@
|
|
|
1
|
-
:root {
|
|
2
|
-
--lt-color-primary: #849589;
|
|
3
|
-
--lt-color-on-primary: #ffffff;
|
|
4
|
-
--lt-color-on-primary-alpha: #ffffffb2;
|
|
5
|
-
|
|
6
|
-
--lt-color-secondary: #67776b;
|
|
7
|
-
--lt-color-on-secondary: #ffffffb3;
|
|
8
|
-
|
|
9
|
-
--lt-color-background: #3a463c;
|
|
10
|
-
--lt-color-on-background: #f7fdf9;
|
|
11
|
-
|
|
12
|
-
--lt-color0: #ffffff;
|
|
13
|
-
--lt-color1: #f7fdf9;
|
|
14
|
-
--lt-color2: #eef6ed;
|
|
15
|
-
--lt-color3: #e0ece2;
|
|
16
|
-
--lt-color4: #c9d5cb;
|
|
17
|
-
--lt-color5: #b6c5b7;
|
|
18
|
-
--lt-color6: #849589;
|
|
19
|
-
--lt-color7: #67776b;
|
|
20
|
-
--lt-color8: #4d5e52;
|
|
21
|
-
--lt-color9: #3a463c;
|
|
22
|
-
--lt-color10: #29382d;
|
|
23
|
-
--lt-color11: #151e16;
|
|
24
|
-
--lt-color12: #0b140c;
|
|
25
|
-
--lt-color13: #000501;
|
|
26
|
-
--lt-color14: #000000;
|
|
27
|
-
--lt-color15: #000000;
|
|
28
|
-
|
|
29
|
-
--lt-treetop-radius-mobile: 2.5rem;
|
|
30
|
-
|
|
31
|
-
--lt-cover-radius: 6rem;
|
|
32
|
-
--lt-cover-radius-mobile: 4rem;
|
|
33
|
-
|
|
34
|
-
--lt-feature-container-radius: 2rem;
|
|
35
|
-
--lt-feature-thumbnail-radius: 1.5rem;
|
|
36
|
-
|
|
37
|
-
--lt-carousel-container-radius: 1.5rem;
|
|
38
|
-
--lt-carousel-thumbnail-radius: 1rem;
|
|
39
|
-
|
|
40
|
-
--lt-grid-container-radius: 1.25rem;
|
|
41
|
-
--lt-grid-thumbnail-radius: 0.75rem;
|
|
42
|
-
|
|
43
|
-
--lt-stack-container-radius: 1rem;
|
|
44
|
-
--lt-stack-thumbnail-radius: 0.65rem;
|
|
45
|
-
|
|
46
|
-
--lt-font-family: INTER;
|
|
47
|
-
--lt-text-2xl: 1.5rem;
|
|
48
|
-
--lt-text-xl: 1.25rem;
|
|
49
|
-
--lt-text-lg: 1.125rem;
|
|
50
|
-
--lt-text-md: 1rem;
|
|
51
|
-
--lt-text-sm: 0.875rem;
|
|
52
|
-
--lt-text-xs: 0.75rem;
|
|
53
|
-
}
|
package/dist/storybook/main.js
DELETED
|
@@ -1,62 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
-
if (k2 === undefined) k2 = k;
|
|
4
|
-
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
-
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
-
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
-
}
|
|
8
|
-
Object.defineProperty(o, k2, desc);
|
|
9
|
-
}) : (function(o, m, k, k2) {
|
|
10
|
-
if (k2 === undefined) k2 = k;
|
|
11
|
-
o[k2] = m[k];
|
|
12
|
-
}));
|
|
13
|
-
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
-
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
-
}) : function(o, v) {
|
|
16
|
-
o["default"] = v;
|
|
17
|
-
});
|
|
18
|
-
var __importStar = (this && this.__importStar) || function (mod) {
|
|
19
|
-
if (mod && mod.__esModule) return mod;
|
|
20
|
-
var result = {};
|
|
21
|
-
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
22
|
-
__setModuleDefault(result, mod);
|
|
23
|
-
return result;
|
|
24
|
-
};
|
|
25
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
26
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
27
|
-
};
|
|
28
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
29
|
-
const postcss_1 = __importDefault(require("postcss"));
|
|
30
|
-
const postcssOptions = __importStar(require("../postcss/postcss.config"));
|
|
31
|
-
const config = {
|
|
32
|
-
stories: [`${process.cwd()}/src/**/*.stories.@(js|jsx|ts|tsx)`],
|
|
33
|
-
addons: [
|
|
34
|
-
'@storybook/addon-links',
|
|
35
|
-
'@storybook/addon-essentials',
|
|
36
|
-
{
|
|
37
|
-
name: 'storybook-addon-turbo-build',
|
|
38
|
-
options: {
|
|
39
|
-
optimizationLevel: 2,
|
|
40
|
-
},
|
|
41
|
-
},
|
|
42
|
-
{
|
|
43
|
-
/**
|
|
44
|
-
* Fix Storybook issue with PostCSS@8
|
|
45
|
-
* @see https://github.com/storybookjs/storybook/issues/12668#issuecomment-773958085
|
|
46
|
-
*/
|
|
47
|
-
name: '@storybook/addon-postcss',
|
|
48
|
-
options: {
|
|
49
|
-
cssLoaderOptions: { importLoaders: 1 },
|
|
50
|
-
postcssLoaderOptions: {
|
|
51
|
-
implementation: postcss_1.default,
|
|
52
|
-
postcssOptions: { ...postcssOptions },
|
|
53
|
-
},
|
|
54
|
-
},
|
|
55
|
-
},
|
|
56
|
-
],
|
|
57
|
-
framework: '@storybook/react',
|
|
58
|
-
core: {
|
|
59
|
-
builder: 'webpack5',
|
|
60
|
-
},
|
|
61
|
-
};
|
|
62
|
-
module.exports = config;
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.parameters = void 0;
|
|
4
|
-
require("./global.css");
|
|
5
|
-
exports.parameters = {
|
|
6
|
-
actions: { argTypesRegex: '^on[A-Z].*' },
|
|
7
|
-
controls: {
|
|
8
|
-
matchers: {
|
|
9
|
-
color: /(background|color)$/i,
|
|
10
|
-
date: /Date$/,
|
|
11
|
-
},
|
|
12
|
-
},
|
|
13
|
-
};
|
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"definitions": {
|
|
3
|
-
"publicData": {
|
|
4
|
-
"metadata": {
|
|
5
|
-
"description": "This represents the types derived from settings.json, and is editable from the client"
|
|
6
|
-
},
|
|
7
|
-
"properties": {
|
|
8
|
-
"thumbnailUrl": { "type": "string" },
|
|
9
|
-
"title": { "type": "string" },
|
|
10
|
-
"url": { "type": "string" }
|
|
11
|
-
}
|
|
12
|
-
},
|
|
13
|
-
"protectedData": {
|
|
14
|
-
"metadata": {
|
|
15
|
-
"description": "This represents the types derived from the linktree-backend context service, and is read only from the client"
|
|
16
|
-
},
|
|
17
|
-
"properties": {}
|
|
18
|
-
},
|
|
19
|
-
"privateData": {
|
|
20
|
-
"metadata": {
|
|
21
|
-
"description": "This represents the types for backend only data, it should never be sent to the client"
|
|
22
|
-
},
|
|
23
|
-
"properties": {}
|
|
24
|
-
}
|
|
25
|
-
},
|
|
26
|
-
"properties": {
|
|
27
|
-
"publicData": { "ref": "publicData" },
|
|
28
|
-
"protectedData": { "ref": "protectedData" }
|
|
29
|
-
},
|
|
30
|
-
"optionalProperties": {
|
|
31
|
-
"privateData": {
|
|
32
|
-
"metadata": {
|
|
33
|
-
"description": "This should never be sent to the client"
|
|
34
|
-
},
|
|
35
|
-
"ref": "privateData"
|
|
36
|
-
}
|
|
37
|
-
}
|
|
38
|
-
}
|
|
@@ -1,57 +0,0 @@
|
|
|
1
|
-
import { SettingsData } 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: SettingsData) => {
|
|
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: SettingsData) => {
|
|
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: SettingsData) => {
|
|
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: SettingsData) => {
|
|
45
|
-
return (
|
|
46
|
-
<div className="flex p-2 h-full gap-4 w-full" style={{ ...baseStyle, borderRadius: 'var(--lt-stack-container-radius)' }}>
|
|
47
|
-
<div className="w-16 aspect-square"></div>
|
|
48
|
-
<h2 className="mr-20">Stack</h2>
|
|
49
|
-
</div>
|
|
50
|
-
)
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
const SheetBody = () => {
|
|
54
|
-
return <div>sheet body</div>
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
export { Featured, Carousel, Grid, Stack, SheetBody }
|
|
@@ -1,99 +0,0 @@
|
|
|
1
|
-
import React from 'react'
|
|
2
|
-
import { ComponentStory, ComponentMeta } from '@storybook/react'
|
|
3
|
-
import manifest from '../../manifest.json'
|
|
4
|
-
import fixture from '../../fixtures/props-data.json'
|
|
5
|
-
|
|
6
|
-
import { Layout } from '../types'
|
|
7
|
-
|
|
8
|
-
import LinkApp from '..'
|
|
9
|
-
|
|
10
|
-
import './tailwind.sb.css'
|
|
11
|
-
|
|
12
|
-
export default {
|
|
13
|
-
title: `Link App/${manifest.name}`,
|
|
14
|
-
component: LinkApp,
|
|
15
|
-
tags: ['autodocs'],
|
|
16
|
-
parameters: {
|
|
17
|
-
layout: 'fullscreen',
|
|
18
|
-
},
|
|
19
|
-
args: {
|
|
20
|
-
...fixture,
|
|
21
|
-
editing: false,
|
|
22
|
-
},
|
|
23
|
-
argTypes: {
|
|
24
|
-
layout: {
|
|
25
|
-
table: {
|
|
26
|
-
disable: true,
|
|
27
|
-
},
|
|
28
|
-
},
|
|
29
|
-
},
|
|
30
|
-
} as ComponentMeta<typeof LinkApp>
|
|
31
|
-
|
|
32
|
-
export const Stack: ComponentStory<typeof LinkApp> = (args) => (
|
|
33
|
-
<div
|
|
34
|
-
className="m-2"
|
|
35
|
-
style={{
|
|
36
|
-
width: 374,
|
|
37
|
-
height: 80,
|
|
38
|
-
}}
|
|
39
|
-
>
|
|
40
|
-
<LinkApp {...args} />
|
|
41
|
-
</div>
|
|
42
|
-
)
|
|
43
|
-
Stack.args = {
|
|
44
|
-
layout: Layout.stack,
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
export const Grid: ComponentStory<typeof LinkApp> = (args) => (
|
|
48
|
-
<div
|
|
49
|
-
className="m-2"
|
|
50
|
-
style={{
|
|
51
|
-
width: 183,
|
|
52
|
-
height: 240,
|
|
53
|
-
}}
|
|
54
|
-
>
|
|
55
|
-
<LinkApp {...args} />
|
|
56
|
-
</div>
|
|
57
|
-
)
|
|
58
|
-
Grid.args = {
|
|
59
|
-
layout: Layout.grid,
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
export const Carousel: ComponentStory<typeof LinkApp> = (args) => (
|
|
63
|
-
<div
|
|
64
|
-
className="m-2"
|
|
65
|
-
style={{
|
|
66
|
-
width: 224,
|
|
67
|
-
height: 296,
|
|
68
|
-
}}
|
|
69
|
-
>
|
|
70
|
-
<LinkApp {...args} />
|
|
71
|
-
</div>
|
|
72
|
-
)
|
|
73
|
-
Carousel.args = {
|
|
74
|
-
layout: Layout.carousel,
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
export const Featured: ComponentStory<typeof LinkApp> = (args) => (
|
|
78
|
-
<div
|
|
79
|
-
className="m-2"
|
|
80
|
-
style={{
|
|
81
|
-
width: 374,
|
|
82
|
-
height: 374,
|
|
83
|
-
}}
|
|
84
|
-
>
|
|
85
|
-
<LinkApp {...args} />
|
|
86
|
-
</div>
|
|
87
|
-
)
|
|
88
|
-
Featured.args = {
|
|
89
|
-
layout: Layout.featured,
|
|
90
|
-
}
|
|
91
|
-
|
|
92
|
-
export const SheetBody: ComponentStory<typeof LinkApp> = (args) => (
|
|
93
|
-
<div className="m-2">
|
|
94
|
-
<LinkApp {...args} />
|
|
95
|
-
</div>
|
|
96
|
-
)
|
|
97
|
-
SheetBody.args = {
|
|
98
|
-
layout: Layout.sheetBody,
|
|
99
|
-
}
|