@linktr.ee/create-link-app 0.3.0-next.38 → 0.3.0-next.4

package/templates/react-ts/src/types/global.d.ts

@@ -1,11 +1,5 @@
-// @HACK: These files are removed at build time, but we need it for type checking
-declare module '*manifest.json' {
-  export const name: string
-}
-
-declare module '*props-data.json' {
-  export const name: string
-}
-
-declare const __LINK_TYPE_ID__: string
-declare const __LINK_TYPE_SLUG__: string
+declare module '*.jpg'
+declare module '*.png'
+declare module '*.jpeg'
+declare module '*.gif'
+declare module '*.svg'

package/templates/react-ts/src/types/index.ts

@@ -1,8 +1,7 @@
-import type { HostData } from '@linktr.ee/ui-link-kit/Schemas'
-import { EditablePrivateData, EditablePublicData, ReadonlyPrivateData, ReadonlyPublicData } from './schema'
-
-export type { HostData } from '@linktr.ee/ui-link-kit/Schemas'
-export { HostDataLayout as Layout } from '@linktr.ee/ui-link-kit/Schemas'
-
-export type AppProps = HostData & EditablePublicData & ReadonlyPublicData
-export type EditorProps = EditablePublicData & ReadonlyPublicData & EditablePrivateData & ReadonlyPrivateData
+type LinktreeLinkContext = {
+  __linkUrl: string
+}
+export type SettingsData = {
+  toggle: boolean
+  your_name: string
+} & LinktreeLinkContext

package/dist/commands/generate-types.js

@@ -1,111 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const path_1 = __importDefault(require("path"));
-const base_1 = __importDefault(require("../base"));
-const child_process_1 = require("child_process");
-class MissingDependencyException extends Error {
-    constructor(packageName) {
-        super(`'${packageName}' is required on your system. Please refer to the create-link-app README`);
-    }
-}
-const ucfirst = (str) => {
-    return str.charAt(0).toUpperCase() + str.slice(1);
-};
-class GenerateTypes extends base_1.default {
-    constructor() {
-        super(...arguments);
-        this.schemaDirPath = path_1.default.join(process.cwd(), '/schema');
-        this.tmpPath = path_1.default.join(process.cwd(), '/__temp__');
-        this.typesPath = path_1.default.join(process.cwd(), '/src/types/schema');
-    }
-    async run() {
-        try {
-            // Check for necessary deps
-            await this.dependOn('npx');
-            await this.dependOn('jtd-codegen');
-            await this.log('✓ All dependencies present');
-            // Ensure necessary directories exist
-            await this.cmd(`mkdir -p ${this.tmpPath} && touch ${this.tmpPath}/index.ts`);
-            await this.cmd(`mkdir -p ${this.typesPath} && touch ${this.typesPath}/index.ts`);
-            await this.log('✓ Files prepped for generation');
-            // Wipe existing types & drop comments
-            await this.cmd(`> ${this.typesPath}/index.ts`);
-            await this.cmd(`echo "/**" >> ${this.typesPath}/index.ts`);
-            await this.cmd(`echo " * These types were autogenerated by @linktr.ee/create-link-app" >> ${this.typesPath}/index.ts`);
-            await this.cmd(`echo " * https://www.npmjs.com/package/@linktr.ee/create-link-app " >> ${this.typesPath}/index.ts`);
-            await this.cmd(`echo " */" >> ${this.typesPath}/index.ts`);
-            // Generate and append types
-            await this.generateAndAppendSchemaType('editablePublic');
-            await this.log('✓ Generated EditablePublicData type');
-            await this.generateAndAppendSchemaType('readonlyPublic');
-            await this.log('✓ Generated ReadonlyPublicData type');
-            await this.generateAndAppendSchemaType('editablePrivate');
-            await this.log('✓ Generated EditablePrivateData type');
-            await this.generateAndAppendSchemaType('readonlyPrivate');
-            await this.log('✓ Generated ReadonlyPrivateData type');
-            // Clean up file formatting
-            await this.cmd(`npx prettier ${this.typesPath}/index.ts --write`);
-            await this.log('✓ All types created successfully');
-            // Garbage collect temporary dir
-            await this.cmd(`rm -rf ${this.tmpPath}`);
-            await this.log('✓ Cleanup complete');
-        }
-        catch (e) {
-            await this.log(`𐄂 ERROR: ${e}`);
-        }
-    }
-    /**
-     * Generates a Typescript type for the schema defined in schema/<schemaName>.jtd.json
-     * and appends that type to src/types/schema/index.ts
-     */
-    async generateAndAppendSchemaType(schemaName) {
-        // Generate schema
-        await this.cmd(`jtd-codegen ${this.schemaDirPath}/${schemaName}.jtd.json --typescript-out ${this.tmpPath} --root-name=${ucfirst(schemaName)}Data`);
-        // Strip jtd comment
-        await this.cmd(`sed '/^\\/\\//d' ${this.tmpPath}/index.ts > ${this.tmpPath}/parsed.ts`);
-        // Append to final file
-        await this.cmd(`cat ${this.tmpPath}/parsed.ts >> ${this.typesPath}/index.ts`);
-    }
-    async dependOn(dependencyName) {
-        try {
-            await this.cmd(`command -v ${dependencyName} || exit 1`);
-        }
-        catch (e) {
-            throw new MissingDependencyException('prettier');
-        }
-    }
-    /**
-     * Run a command with spawn effectively synchronously
-     */
-    async cmd(command, opts = {
-        shell: true,
-        stdio: 'ignore',
-    }, onError) {
-        await new Promise((resolve, reject) => {
-            (0, child_process_1.spawn)(command, opts)
-                .on('error', (e) => {
-                reject(e);
-            })
-                .on('exit', (code) => {
-                if (code === 1)
-                    reject({ exitCode: code });
-            })
-                .on('close', () => {
-                resolve();
-            });
-        }).catch((e) => {
-            if (onError) {
-                onError();
-            }
-            else {
-                throw e;
-            }
-        });
-        return;
-    }
-}
-exports.default = GenerateTypes;
-GenerateTypes.description = 'Generate Typescript types from the schema definitions';

package/dist/commands/storybook.js

@@ -1,28 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const core_1 = require("@oclif/core");
-const child_process_1 = require("child_process");
-const base_1 = __importDefault(require("../base"));
-const path_1 = __importDefault(require("path"));
-class Storybook extends base_1.default {
-    async run() {
-        const configPath = path_1.default.resolve(__dirname, '..', 'storybook');
-        const { flags } = await this.parse(Storybook);
-        const storybook = (0, child_process_1.spawn)(`start-storybook -p ${flags.port} -c ${configPath}`, { shell: true, stdio: 'inherit' });
-        storybook.on('error', (err) => {
-            throw err;
-        });
-    }
-}
-exports.default = Storybook;
-Storybook.description = 'Start the Storybook development server';
-Storybook.flags = {
-    port: core_1.Flags.integer({
-        char: 'p',
-        description: 'Port to run the Storybook server on',
-        default: 6006,
-    }),
-};

package/dist/lib/schema/compile.js

@@ -1,30 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const fs_extra_1 = __importDefault(require("fs-extra"));
-const path_1 = __importDefault(require("path"));
-const jtd_js_1 = __importDefault(require("ajv/dist/jtd.js"));
-const index_js_1 = __importDefault(require("ajv/dist/standalone/index.js"));
-const schemaNames = ['editablePublic', 'readonlyPublic', 'editablePrivate', 'readonlyPrivate', 'system'];
-async function compileSchema() {
-    try {
-        const ajv = new jtd_js_1.default({
-            // @ts-expect-error: In JTD mode some options are not typed correctly.
-            strict: false,
-            code: { source: true, esm: true },
-        });
-        await Promise.all(schemaNames.map(async (schemaName) => {
-            const schemaPath = path_1.default.join(process.cwd(), `./schema/${schemaName}.jtd.json`);
-            const schema = await fs_extra_1.default.readJSON(schemaPath);
-            ajv.addSchema(schema, schemaName);
-        }));
-        const moduleCode = (0, index_js_1.default)(ajv);
-        return moduleCode;
-    }
-    catch (e) {
-        console.error(e);
-    }
-}
-exports.default = compileSchema;

package/dist/postcss/postcss.config.js

@@ -1,31 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getPostcssConfig = void 0;
-const path_1 = __importDefault(require("path"));
-const tailwindcss_1 = __importDefault(require("tailwindcss"));
-const autoprefixer_1 = __importDefault(require("autoprefixer"));
-const componentLibraryContentPath = path_1.default.join(require.resolve('@linktr.ee/component-library/tailwind.config').split('/').slice(0, -1).join('/'), 'dist', '**', '*.js');
-const uiLinkKitPath = path_1.default.join(require.resolve('@linktr.ee/ui-link-kit').split('/').slice(0, -2).join('/'), '**', '*.js');
-function getPostcssConfig({ linkTypeSlug, env = 'production' }) {
-    const isStorybook = env === 'storybook';
-    const content = [`${process.cwd()}/src/**/*.{js,jsx,ts,tsx}`, uiLinkKitPath];
-    if (isStorybook) {
-        content.push(componentLibraryContentPath);
-    }
-    return {
-        ...(isStorybook && { inject: { insertAtTop: true } }),
-        plugins: [
-            (0, tailwindcss_1.default)({
-                important: `[data-link-type-id=${linkTypeSlug}]`,
-                content,
-                presets: [require('@linktr.ee/component-library/tailwind.config')],
-                plugins: [],
-            }),
-            (0, autoprefixer_1.default)(),
-        ],
-    };
-}
-exports.getPostcssConfig = getPostcssConfig;

package/dist/storybook/global.css

@@ -1,53 +0,0 @@
-:root {
-  --lt-color-primary: #849589;
-  --lt-color-on-primary: #ffffff;
-  --lt-color-on-primary-alpha: #ffffffb2;
-
-  --lt-color-secondary: #67776b;
-  --lt-color-on-secondary: #ffffffb3;
-
-  --lt-color-background: #3a463c;
-  --lt-color-on-background: #f7fdf9;
-
-  --lt-color0: #ffffff;
-  --lt-color1: #f7fdf9;
-  --lt-color2: #eef6ed;
-  --lt-color3: #e0ece2;
-  --lt-color4: #c9d5cb;
-  --lt-color5: #b6c5b7;
-  --lt-color6: #849589;
-  --lt-color7: #67776b;
-  --lt-color8: #4d5e52;
-  --lt-color9: #3a463c;
-  --lt-color10: #29382d;
-  --lt-color11: #151e16;
-  --lt-color12: #0b140c;
-  --lt-color13: #000501;
-  --lt-color14: #000000;
-  --lt-color15: #000000;
-
-  --lt-treetop-radius-mobile: 2.5rem;
-
-  --lt-cover-radius: 6rem;
-  --lt-cover-radius-mobile: 4rem;
-
-  --lt-feature-container-radius: 2rem;
-  --lt-feature-thumbnail-radius: 1.5rem;
-
-  --lt-carousel-container-radius: 1.5rem;
-  --lt-carousel-thumbnail-radius: 1rem;
-
-  --lt-grid-container-radius: 1.25rem;
-  --lt-grid-thumbnail-radius: 0.75rem;
-
-  --lt-stack-container-radius: 1rem;
-  --lt-stack-thumbnail-radius: 0.65rem;
-
-  --lt-font-family: INTER;
-  --lt-text-2xl: 1.5rem;
-  --lt-text-xl: 1.25rem;
-  --lt-text-lg: 1.125rem;
-  --lt-text-md: 1rem;
-  --lt-text-sm: 0.875rem;
-  --lt-text-xs: 0.75rem;
-}

package/dist/storybook/main.js

@@ -1,53 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const postcss_1 = __importDefault(require("postcss"));
-const webpack_1 = __importDefault(require("webpack"));
-const postcss_config_1 = require("../postcss/postcss.config");
-// Do not need to be the real values, just need to be defined for storybook
-const linkTypeSlug = 'test-id';
-const linkTypeId = 'testId';
-const config = {
-    stories: [`${process.cwd()}/src/**/*.stories.@(js|jsx|ts|tsx)`],
-    addons: [
-        '@storybook/addon-links',
-        '@storybook/addon-essentials',
-        {
-            name: 'storybook-addon-turbo-build',
-            options: {
-                optimizationLevel: 2,
-            },
-        },
-        {
-            /**
-             * Fix Storybook issue with PostCSS@8
-             * @see https://github.com/storybookjs/storybook/issues/12668#issuecomment-773958085
-             */
-            name: '@storybook/addon-postcss',
-            options: {
-                cssLoaderOptions: { importLoaders: 1 },
-                postcssLoaderOptions: {
-                    implementation: postcss_1.default,
-                    postcssOptions: (0, postcss_config_1.getPostcssConfig)({ linkTypeSlug, env: 'storybook' }),
-                },
-            },
-        },
-    ],
-    framework: '@storybook/react',
-    core: {
-        builder: 'webpack5',
-    },
-    webpackFinal: async (config) => {
-        if (config.plugins?.length) {
-            // Add the DefinePlugin to the Webpack plugins array
-            config.plugins.push(new webpack_1.default.DefinePlugin({
-                __LINK_TYPE_ID__: JSON.stringify(linkTypeId),
-                __LINK_TYPE_SLUG__: JSON.stringify(linkTypeSlug),
-            }));
-        }
-        return config;
-    },
-};
-module.exports = config;

package/dist/storybook/preview.js

@@ -1,21 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.decorators = exports.parameters = void 0;
-const react_1 = __importDefault(require("react"));
-require("./global.css");
-exports.parameters = {
-    actions: { argTypesRegex: '^on[A-Z].*' },
-    controls: {
-        matchers: {
-            color: /(background|color)$/i,
-            date: /Date$/,
-        },
-    },
-};
-const WrapperDecorator = (storyFn) => (react_1.default.createElement("div", { style: {
-        display: 'contents',
-    }, "data-link-type-id": __LINK_TYPE_SLUG__ }, storyFn()));
-exports.decorators = [WrapperDecorator];

package/templates/common/schema/editablePrivate.jtd.json

@@ -1,6 +0,0 @@
-{
-  "metadata": {
-    "description": "These are properties that the Linker can `read` and `write`, but the Visitor will never have access to."
-  },
-  "properties": {}
-}

package/templates/common/schema/editablePublic.jtd.json

@@ -1,10 +0,0 @@
-{
-  "metadata": {
-    "description": "These are properties that the Linker can `read` and `write`, and the Visitor can `read`"
-  },
-  "properties": {
-    "thumbnailUrl": { "type": "string" },
-    "title": { "type": "string" },
-    "url": { "type": "string" }
-  }
-}

package/templates/common/schema/readonlyPrivate.jtd.json

@@ -1,8 +0,0 @@
-{
-  "metadata": {
-    "description": "These are properties that only the Linker can `read`. The Visitor will never have access to these properties"
-  },
-  "properties": {
-    "httpResponseCode": { "type": "int16" }
-  }
-}

package/templates/common/schema/readonlyPublic.jtd.json

@@ -1,6 +0,0 @@
-{
-  "metadata": {
-    "description": "These are properties that the Linker can `read`, and the Visitor can `read`"
-  },
-  "properties": {}
-}

package/templates/common/schema/system.jtd.json

@@ -1,6 +0,0 @@
-{
-  "metadata": {
-    "description": "These are internal-only properties that neither the Linker nor Visitor will ever have access to."
-  },
-  "properties": {}
-}

package/templates/react/src/tailwind.css

@@ -1,5 +0,0 @@
-/* tailwind.css */
-
-@tailwind base;
-@tailwind components;
-@tailwind utilities;

package/templates/react-ts/src/App.tsx

@@ -1,23 +0,0 @@
-import { Featured, Carousel, Grid, Stack } from './components/Layouts'
-import { AppProps, Layout } from './types'
-
-import './tailwind.css'
-
-function App(props: AppProps) {
-  const { layout } = props
-
-  switch (layout) {
-    case Layout.Stack:
-      return <Stack {...props} />
-    case Layout.Grid:
-      return <Grid {...props} />
-    case Layout.Carousel:
-      return <Carousel {...props} />
-    case Layout.Featured:
-      return <Featured {...props} />
-    default:
-      return <div>Unknown layout: {props.layout}</div>
-  }
-}
-
-export default App

package/templates/react-ts/src/Editor.tsx

@@ -1,7 +0,0 @@
-import './tailwind.css'
-
-const Editor = () => {
-  return <div>Editor</div>
-}
-
-export default Editor

package/templates/react-ts/src/Sheet.tsx

@@ -1,7 +0,0 @@
-import './tailwind.css'
-
-const Sheet = () => {
-  return <div>Sheet</div>
-}
-
-export default Sheet

package/templates/react-ts/src/components/Layouts.tsx

@@ -1,59 +0,0 @@
-import { AppProps } from '../types'
-
-const baseStyle = {
-  backgroundColor: 'var(--lt-color-primary)',
-  color: 'var(--lt-color-on-primary)',
-} as React.CSSProperties
-
-const Featured = (props: AppProps) => {
-  return (
-    <div
-      className="px-6 pt-12 pb-11 h-full"
-      style={{
-        ...baseStyle,
-        borderRadius: 'var(--lt-feature-container-radius)',
-      }}
-    >
-      Featured
-    </div>
-  )
-}
-
-const Carousel = (props: AppProps) => {
-  return (
-    <div
-      className="px-4 pt-16 pb-10 h-full"
-      style={{
-        ...baseStyle,
-        borderRadius: 'var(--lt-carousel-container-radius)',
-      }}
-    >
-      Carousel
-    </div>
-  )
-}
-
-const Grid = (props: AppProps) => {
-  return (
-    <div className="px-3 py-10 h-full" style={{ ...baseStyle, borderRadius: 'var(--lt-grid-container-radius)' }}>
-      Grid
-    </div>
-  )
-}
-
-const Stack = (props: AppProps) => {
-  return (
-    <div
-      className="flex p-2 h-full gap-4 w-full"
-      style={{
-        ...baseStyle,
-        borderRadius: 'var(--lt-stack-container-radius)',
-      }}
-    >
-      <div className="w-16 aspect-square"></div>
-      <h2 className="mr-20">Stack</h2>
-    </div>
-  )
-}
-
-export { Featured, Carousel, Grid, Stack }

package/templates/react-ts/src/stories/LinkApp.stories.tsx

@@ -1,94 +0,0 @@
-import React from 'react'
-import { ComponentStory, ComponentMeta } from '@storybook/react'
-import manifest from '../../manifest.json'
-import fixture from '../../fixtures/props-data.json'
-
-import { Layout } from '../types'
-
-import LinkApp from '..'
-
-import './tailwind.sb.css'
-
-export default {
-  title: `Link App/${manifest.name}`,
-  component: LinkApp,
-  tags: ['autodocs'],
-  parameters: {
-    layout: 'fullscreen',
-  },
-  args: {
-    ...fixture,
-    editing: false,
-  },
-  argTypes: {
-    layout: {
-      table: {
-        disable: true,
-      },
-    },
-  },
-} as ComponentMeta<typeof LinkApp>
-
-export const Stack: ComponentStory<typeof LinkApp> = (args) => (
-  <div
-    data-link-type-id={__LINK_TYPE_SLUG__}
-    style={{
-      margin: '0.5rem',
-      width: 374,
-      height: 80,
-    }}
-  >
-    <LinkApp {...args} />
-  </div>
-)
-Stack.args = {
-  layout: Layout.Stack,
-}
-
-export const Grid: ComponentStory<typeof LinkApp> = (args) => (
-  <div
-    data-link-type-id={__LINK_TYPE_SLUG__}
-    style={{
-      margin: '0.5rem',
-      width: 183,
-      height: 240,
-    }}
-  >
-    <LinkApp {...args} />
-  </div>
-)
-Grid.args = {
-  layout: Layout.Grid,
-}
-
-export const Carousel: ComponentStory<typeof LinkApp> = (args) => (
-  <div
-    data-link-type-id={__LINK_TYPE_SLUG__}
-    style={{
-      margin: '0.5rem',
-      width: 224,
-      height: 296,
-    }}
-  >
-    <LinkApp {...args} />
-  </div>
-)
-Carousel.args = {
-  layout: Layout.Carousel,
-}
-
-export const Featured: ComponentStory<typeof LinkApp> = (args) => (
-  <div
-    data-link-type-id={__LINK_TYPE_SLUG__}
-    style={{
-      margin: '0.5rem',
-      width: 374,
-      height: 374,
-    }}
-  >
-    <LinkApp {...args} />
-  </div>
-)
-Featured.args = {
-  layout: Layout.Featured,
-}

package/templates/react-ts/src/stories/tailwind.sb.css

@@ -1,5 +0,0 @@
-/* tailwind.sb.css */
-
-@tailwind base;
-@tailwind components;
-@tailwind utilities;

package/templates/react-ts/src/tailwind.css

@@ -1,4 +0,0 @@
-/* tailwind.css */
-
-@tailwind components;
-@tailwind utilities;

package/templates/react-ts/src/types/schema/index.ts

@@ -1,33 +0,0 @@
-/**
- * These types were autogenerated by @linktr.ee/create-link-app
- * https://www.npmjs.com/package/@linktr.ee/create-link-app
- */
-
-/**
- * These are properties that the Linker can `read` and `write`, and the Visitor
- * can `read`
- */
-export interface EditablePublicData {
-  thumbnailUrl: string
-  title: string
-  url: string
-}
-
-/**
- * These are properties that the Linker can `read`, and the Visitor can `read`
- */
-export interface ReadonlyPublicData {}
-
-/**
- * These are properties that the Linker can `read` and `write`, but the Visitor
- * will never have access to.
- */
-export interface EditablePrivateData {}
-
-/**
- * These are properties that only the Linker can `read`. The Visitor will never
- * have access to these properties
- */
-export interface ReadonlyPrivateData {
-  httpResponseCode: number
-}