18 |
26 | );
27 |
--------------------------------------------------------------------------------
/templates/ts-tailwind/src/blocks/HeroBlock/index.tsx:
--------------------------------------------------------------------------------
1 | import { defineBlock, useBlockState } from '@instantcommerce/sdk';
2 | import './styles.css';
3 |
4 | const HeroBlock = () => {
5 | const { content } = useBlockState();
6 |
7 | return (
8 |
19 | {title}
20 |
21 |
22 |
23 | {children}
24 |
25 |
9 |
11 | );
12 | };
13 |
14 | export default defineBlock({
15 | component: HeroBlock,
16 | customizerSchema: {
17 | fields: {
18 | color: { type: 'color', label: 'Test color' },
19 | },
20 | },
21 | contentSchema: {
22 | fields: {
23 | title: { type: 'text', label: 'Title', preview: 'Hero title' },
24 | },
25 | },
26 | });
27 |
--------------------------------------------------------------------------------
/examples/block-extension/src/blocks/HeroBlock/index.tsx:
--------------------------------------------------------------------------------
1 | import { defineBlock, useBlockState } from '@instantcommerce/sdk';
2 | import './index.css';
3 |
4 | const Hero = () => {
5 | const { content } = useBlockState();
6 |
7 | return (
8 | {content.title}
10 |
9 |
11 | );
12 | };
13 |
14 | const HeroBlock = defineBlock({
15 | component: Hero,
16 | customizerSchema: {
17 | fields: {
18 | color: { type: 'text' },
19 | },
20 | },
21 | contentSchema: {
22 | fields: {
23 | title: { type: 'text', label: 'Title', preview: 'Hero title' },
24 | },
25 | },
26 | });
27 |
28 | export default HeroBlock;
29 |
--------------------------------------------------------------------------------
/packages/cli/src/lib/schemaFieldTypeMapping.ts:
--------------------------------------------------------------------------------
1 | import {
2 | DefineContentSchema,
3 | DefineCustomizerSchema,
4 | SchemaFieldType,
5 | } from 'types/schemas';
6 |
7 | export const schemaFieldTypeMapping: Record<
8 | | DefineContentSchema['fields'][number]['type']
9 | | DefineCustomizerSchema['fields'][number]['type'],
10 | SchemaFieldType
11 | > = {
12 | color: SchemaFieldType.COLOR,
13 | date: SchemaFieldType.DATE,
14 | image: SchemaFieldType.IMAGE,
15 | link: SchemaFieldType.LINK,
16 | number: SchemaFieldType.NUMBER,
17 | richText: SchemaFieldType.RICH_TEXT,
18 | select: SchemaFieldType.SELECT,
19 | subschema: SchemaFieldType.SUBSCHEMA,
20 | text: SchemaFieldType.TEXT,
21 | toggle: SchemaFieldType.TOGGLE,
22 | };
23 |
--------------------------------------------------------------------------------
/packages/preview/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "ESNext",
4 | "useDefineForClassFields": true,
5 | "lib": ["DOM", "DOM.Iterable", "ESNext"],
6 | "allowJs": false,
7 | "skipLibCheck": true,
8 | "esModuleInterop": false,
9 | "allowSyntheticDefaultImports": true,
10 | "strict": true,
11 | "forceConsistentCasingInFileNames": true,
12 | "module": "ESNext",
13 | "moduleResolution": "Node",
14 | "resolveJsonModule": true,
15 | "isolatedModules": true,
16 | "noEmit": true,
17 | "jsx": "react-jsx",
18 | "paths": {
19 | "instant-client/*": ["../client/src/*"]
20 | }
21 | },
22 | "include": ["src"],
23 | "references": [{ "path": "./tsconfig.node.json" }]
24 | }
25 |
--------------------------------------------------------------------------------
/packages/cli/src/templates/block.ts:
--------------------------------------------------------------------------------
1 | export const blockTemplate = (
2 | name: string,
3 | ) => `import { defineBlock, useBlockState } from "@instantcommerce/sdk";
4 |
5 | const ${name} = () => {
6 | const { content, customizer } = useBlockState();
7 |
8 | return (
9 | {content.title}
10 |
10 |
14 | );
15 | };
16 |
17 | export default defineBlock({
18 | component: ${name},
19 | customizerSchema: {
20 | fields: {
21 | color: { type: "color", label: "Color" },
22 | },
23 | },
24 | contentSchema: {
25 | fields: {
26 | title: { type: "text", label: "Title", preview: 'Hero title' },
27 | },
28 | },
29 | });
30 | ;
31 | `;
32 |
--------------------------------------------------------------------------------
/turbo.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://turborepo.org/schema.json",
3 | "pipeline": {
4 | "build": {
5 | "dependsOn": ["^build"]
6 | },
7 | "dev": {
8 | "cache": false
9 | },
10 | "@instantcommerce/cli#build": {
11 | "dependsOn": [
12 | "@instantcommerce/postcss-plugin-sdk#build",
13 | "@instantcommerce/vite-plugin-sdk#build",
14 | "@instantcommerce/sdk-preview#build"
15 | ]
16 | },
17 | "@instantcommerce/cli#dev": {
18 | "dependsOn": [
19 | "@instantcommerce/postcss-plugin-sdk#build",
20 | "@instantcommerce/vite-plugin-sdk#build",
21 | "@instantcommerce/sdk-preview#build",
22 | "@instantcommerce/sdk#build"
23 | ]
24 | }
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/packages/preview/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | 11 | {content.title} 12 |
13 |
13 |
29 |
30 | );
31 |
--------------------------------------------------------------------------------
/packages/cli/src/lib/auth0/refreshAccessToken.ts:
--------------------------------------------------------------------------------
1 | import axios from 'axios';
2 | import { Auth0AccessTokenResponse } from './abstractions';
3 | import { AUTH0_DOMAIN, AUTH0_CLIENT_ID } from './auth0.constants';
4 |
5 | /**
6 | * Get new tokens from Auth0.
7 | *
8 | * @param refreshToken The current refresh token
9 | * @returns Access token response
10 | */
11 | export const refreshAccessToken = async (
12 | refreshToken: string,
13 | ): Promise
30 | {render(value, {
31 | blokResolvers,
32 | defaultBlokResolver,
33 | markResolvers,
34 | nodeResolvers,
35 | defaultStringResolver,
36 | textResolver,
37 | })}
38 |
39 | );
40 | };
41 |
--------------------------------------------------------------------------------
/packages/preview/src/containers/Preview/storeFallback.ts:
--------------------------------------------------------------------------------
1 | import { PublicStore } from 'types/api';
2 |
3 | export const storeFallback = {
4 | storefront: {
5 | config: {
6 | blocks: [
7 | {
8 | __typename: 'BlockquoteBlock',
9 | id: '123',
10 | // authorColor: '#000',
11 | // backgroundColor: 'yellow',
12 | // blockBackgroundColor: 'pink',
13 | blockBorderRadius: 'MEDIUM',
14 | contentAlignment: 'LEFT',
15 | hasLeftBorder: true,
16 | // leftBorderColor: 'purple',
17 | name: '123',
18 | textSize: 'MEDIUM',
19 | theme: 'PRIMARY',
20 | } as any,
21 | ],
22 | components: {
23 | button: {
24 | borderRadius: 'SMALL',
25 | boxShadow: 'LARGE',
26 | fontWeight: 'MEDIUM',
27 | },
28 | input: {
29 | borderRadius: 'SMALL',
30 | },
31 | },
32 | },
33 | },
34 | } as any as PublicStore;
35 |
--------------------------------------------------------------------------------
/.github/workflows/release.yml:
--------------------------------------------------------------------------------
1 | name: Semantic Release
2 |
3 | on:
4 | push:
5 | branches:
6 | - beta
7 | - main
8 |
9 | jobs:
10 | release:
11 | runs-on: ubuntu-latest
12 |
13 | steps:
14 | - name: Checkout repo
15 | uses: actions/checkout@v3
16 | with:
17 | persist-credentials: false
18 |
19 | - name: Setup Node.js
20 | uses: actions/setup-node@v3
21 | with:
22 | node-version: 18
23 | cache: "yarn"
24 |
25 | - name: Install dependencies
26 | run: yarn
27 |
28 | - name: Build
29 | run: yarn build
30 |
31 | - name: Install semantic-release
32 | run: yarn global add semantic-release semantic-release-monorepo @semantic-release/changelog @semantic-release/npm
33 |
34 | - name: Release
35 | run: yarn workspaces run semantic-release -e semantic-release-monorepo
36 | env:
37 | GITHUB_TOKEN: ${{ secrets.GH_RELEASE_TOKEN }}
38 | NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
39 |
--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 | "files.watcherExclude": {
3 | "**/.cache/**": true,
4 | "**/dist": true
5 | },
6 | "search.exclude": {
7 | "**/dist": true
8 | },
9 | "files.exclude": {
10 | "**/.DS_Store": true
11 | },
12 | "editor.formatOnSave": true,
13 | // turn it off for JS and JSX, we will do this via eslint
14 | "[javascript]": {
15 | "editor.formatOnSave": false,
16 | "editor.defaultFormatter": null
17 | },
18 | "[javascriptreact]": {
19 | "editor.formatOnSave": false,
20 | "editor.defaultFormatter": null
21 | },
22 | "[typescript]": {
23 | "editor.formatOnSave": false,
24 | "editor.defaultFormatter": null
25 | },
26 | "[typescriptreact]": {
27 | "editor.formatOnSave": false,
28 | "editor.defaultFormatter": null
29 | },
30 | // tell the ESLint plugin to run on save
31 | "editor.codeActionsOnSave": {
32 | "source.fixAll": true
33 | },
34 | "editor.tabSize": 2,
35 | "editor.insertSpaces": true,
36 | "editor.defaultFormatter": "esbenp.prettier-vscode"
37 | }
38 |
--------------------------------------------------------------------------------
/packages/vite-plugin/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@instantcommerce/vite-plugin-sdk",
3 | "version": "0.0.0",
4 | "author": "Instant Commerce B.V.",
5 | "license": "MIT",
6 | "files": [
7 | "dist"
8 | ],
9 | "type": "module",
10 | "main": "./dist/index.cjs",
11 | "module": "./dist/index.js",
12 | "types": "./dist/index.d.ts",
13 | "exports": {
14 | ".": {
15 | "types": "./dist/index.d.ts",
16 | "require": "./dist/index.cjs",
17 | "import": "./dist/index.js"
18 | }
19 | },
20 | "publishConfig": {
21 | "access": "public"
22 | },
23 | "scripts": {
24 | "build": "tsup",
25 | "format": "prettier --write ."
26 | },
27 | "engines": {
28 | "node": ">=16.0.0"
29 | },
30 | "dependencies": {
31 | "@babel/core": "7.20.5",
32 | "@instantcommerce/postcss-plugin-sdk": "*",
33 | "glob": "8.0.3",
34 | "hashids": "2.2.10",
35 | "react-refresh": "^0.14.0"
36 | },
37 | "devDependencies": {
38 | "tsconfig": "*",
39 | "tsup": "6.5.0"
40 | },
41 | "peerDependencies": {
42 | "vite": "^3.0.0"
43 | }
44 | }
45 |
--------------------------------------------------------------------------------
/packages/client/src/components/RichText.tsx:
--------------------------------------------------------------------------------
1 | import { HTMLProps } from 'react';
2 | import { createRemoteReactComponent } from '@remote-ui/react';
3 | import {
4 | RenderOptions,
5 | NODE_HEADING,
6 | NODE_CODEBLOCK,
7 | NODE_PARAGRAPH,
8 | NODE_QUOTE,
9 | NODE_OL,
10 | NODE_UL,
11 | NODE_LI,
12 | NODE_HR,
13 | NODE_BR,
14 | NODE_IMAGE,
15 | MARK_BOLD,
16 | MARK_ITALIC,
17 | MARK_STRIKE,
18 | MARK_UNDERLINE,
19 | MARK_CODE,
20 | MARK_LINK,
21 | MARK_STYLED,
22 | } from 'storyblok-rich-text-react-renderer';
23 |
24 | export {
25 | NODE_HEADING,
26 | NODE_CODEBLOCK,
27 | NODE_PARAGRAPH,
28 | NODE_QUOTE,
29 | NODE_OL,
30 | NODE_UL,
31 | NODE_LI,
32 | NODE_HR,
33 | NODE_BR,
34 | NODE_IMAGE,
35 | MARK_BOLD,
36 | MARK_ITALIC,
37 | MARK_STRIKE,
38 | MARK_UNDERLINE,
39 | MARK_CODE,
40 | MARK_LINK,
41 | MARK_STYLED,
42 | };
43 |
44 | export interface RichTextProps
45 | extends RenderOptions,
46 | HTMLProps
2 |
3 | 
4 |
5 |
7 |
8 |
4 |
5 | Instant Commerce SDK
6 |
9 |
16 |
17 | ---
18 |
19 | ## Installation ⚡
20 |
21 | The CLI is available as an npm package. To install the package run:
22 |
23 | ```bash
24 | npm install -g @instantcommerce/cli
25 | ```
26 |
27 | ## Getting started
28 |
29 | Read our [Getting Started guide](https://docs.instantcommerce.io/) to get up and running.
30 |
31 | ## Instant SDK examples
32 |
33 | The [instant-sdk-examples](https://github.com/instantcommerce/instant-sdk-examples) project contains a collection of helpful blocks and components built with the Instant SDK.
34 |
--------------------------------------------------------------------------------
/.lintstagedrc.js:
--------------------------------------------------------------------------------
1 | const ESLint = require('eslint').ESLint
2 |
3 | const removeIgnoredFiles = async (files) => {
4 | const eslint = new ESLint()
5 | const isIgnored = await Promise.all(
6 | files.map((file) => {
7 | return eslint.isPathIgnored(file)
8 | })
9 | )
10 | const filteredFiles = files.filter((_, i) => !isIgnored[i])
11 | return filteredFiles.join(' ')
12 | }
13 |
14 | module.exports = {
15 | "dashboard/**/*.{js,ts,jsx,tsx}": async (files) => {
16 | const filesToLint = await removeIgnoredFiles(files)
17 | return [`eslint --max-warnings=0 ${filesToLint} --fix`]
18 | },
19 | "storefront/**/*.{js,ts,jsx,tsx}": async (files) => {
20 | const filesToLint = await removeIgnoredFiles(files)
21 | return [`eslint --max-warnings=0 ${filesToLint} --fix`]
22 | },
23 | "packages/**/**/*.{js,ts,jsx,tsx}": async (files) => {
24 | const filesToLint = await removeIgnoredFiles(files)
25 | return [`eslint --max-warnings=0 ${filesToLint} --fix`]
26 | },
27 | "*.json": async (files) => {
28 | const filesToLint = await removeIgnoredFiles(files)
29 | return [`prettier --write ${filesToLint} --fix`]
30 | },
31 | }
32 |
--------------------------------------------------------------------------------
/packages/cli/README.md:
--------------------------------------------------------------------------------
1 | # @instantcommerce/cli
2 |
3 | ## Install
4 |
5 | ```bash
6 | $ npm install --global @instantcommerce/cli
7 | ```
8 |
9 | ## CLI
10 |
11 | ```
12 | $ instant --help
13 |
14 | Usage
15 | $ instant 10 | The Instant Commerce SDK enables developers to build completely custom React based blocks and publish them to the Instant Commerce platform. 11 |
12 | 13 | [View documentation 📚](https://docs.instantcommerce.io/) 14 | 15 |
27 |
31 | URL
32 |
33 |
34 |
44 |
45 |
17 |
42 | );
43 | };
44 |
--------------------------------------------------------------------------------
/packages/client/src/hooks/useEventListener.ts:
--------------------------------------------------------------------------------
1 | import { useEffect, useRef } from 'react';
2 |
3 | type InstantEventType =
4 | | 'addToCart'
5 | | 'checkout'
6 | | 'loadPage'
7 | | 'updateCartLine';
8 |
9 | interface InstantEvent
10 | extends Omit<
11 | Event,
12 | 'preventDefault' | 'stopPropagation' | 'stopImmediatePropagation'
13 | > {}
14 |
15 | export const useEventListener = (
16 | event: InstantEventType,
17 | listener: (ev: InstantEvent) => any,
18 | options?: AddEventListenerOptions & { preventDefault?: boolean },
19 | ) => {
20 | const savedListener = useRef
18 |
30 |
40 |
41 | s.value === `${scale}`)?.className,
35 | )}
36 | >
37 | {children}
38 |
39 |
20 |
23 |
24 | {!!breadCrumbs?.length &&
29 |
41 |
42 |
44 | ) : (
45 | {item.label}
46 | ),
47 | )}
48 |
49 | );
50 | };
51 |
--------------------------------------------------------------------------------
/packages/preview/src/containers/Preview/index.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useMemo, useState } from 'react';
2 | import ReactDOM from 'react-dom/client';
3 | import { HelmetProvider } from 'react-helmet-async';
4 |
5 | import { getStore } from './getStore';
6 | import { Head } from './Head';
7 | import { WorkerRenderer } from './WorkerRenderer';
8 |
9 | const Preview = () => {
10 | const [error, setError] = useState('');
11 | const [store, setStore] = useState
42 |
44 | );
45 | }
46 |
47 | if (typeof store === 'undefined') {
48 | return null;
49 | }
50 |
51 | return (
52 | {error}
43 |
39 | {children}
40 |
41 |
42 | No block selected.
;
36 | }
37 |
38 | return (
39 |
49 | );
50 | };
51 |
--------------------------------------------------------------------------------
/packages/cli/src/lib/parseContentSchema.ts:
--------------------------------------------------------------------------------
1 | import humanizeString from 'humanize-string';
2 | import type { ContentSchemaInput } from 'types/api';
3 | import type { DefineContentSchema } from 'types/schemas';
4 |
5 | import { schemaFieldTypeMapping } from './schemaFieldTypeMapping';
6 |
7 | const formatField = (
8 | field: DefineContentSchema['fields'][number] & { name: string },
9 | ) => ({
10 | ...field,
11 | label: field.label || humanizeString(field.name),
12 | type: schemaFieldTypeMapping[field.type],
13 | /** Set optional booleans */
14 | isRequired: !!field.isRequired,
15 | isTranslatable: !!field.isTranslatable,
16 | ...(field.type === 'date'
17 | ? {
18 | withTime: !!field.withTime,
19 | }
20 | : {}),
21 | });
22 |
23 | /**
24 | * Convert contentSchema from format used by defineBlock,
25 | * to format expected by the API.
26 | */
27 | export const parseContentSchema = (
28 | input: DefineContentSchema,
29 | blockName: string,
30 | ): ContentSchemaInput => {
31 | try {
32 | const fields = Object.entries(input.fields).map(([name, field]: any) =>
33 | formatField({ ...field, name }),
34 | );
35 | const subschemas = Object.entries(input.subschemas || {})?.map(
36 | ([subschemaName, subschema]) => ({
37 | ...subschema,
38 | name: subschemaName,
39 | fields: Object.entries(subschema.fields).map(([name, field]: any) =>
40 | formatField({ ...field, name }),
41 | ),
42 | }),
43 | );
44 |
45 | /** @todo remove when API type is correct */
46 | // @ts-ignore
47 | return {
48 | name: blockName,
49 | ...input,
50 | fields,
51 | subschemas,
52 | };
53 | } catch (err) {
54 | throw new Error(
55 | `Failed to parse content schema: ${err?.toString?.() || 'Unknown error'}`,
56 | );
57 | }
58 | };
59 |
--------------------------------------------------------------------------------
/packages/preview/src/components/Input/index.tsx:
--------------------------------------------------------------------------------
1 | import { ChangeEvent, InputHTMLAttributes, useId, useState } from 'react';
2 | import { twMerge } from 'tailwind-merge';
3 | import {
4 | InputWrapper,
5 | InputWrapperProps,
6 | splitInputProps,
7 | } from './InputWrapper';
8 |
9 | export type InputProps = InputHTMLAttributes
22 | {!!label && }
23 |
24 |
28 |
29 |
25 | {value}%
26 |
27 |
31 | {!!icon && (
32 |
63 | );
64 | };
65 |
--------------------------------------------------------------------------------
/packages/preview/src/components/Tabs/index.tsx:
--------------------------------------------------------------------------------
1 | import * as TabsPrimitive from '@radix-ui/react-tabs';
2 | import { twJoin, twMerge } from 'tailwind-merge';
3 |
4 | interface Tab {
5 | title: string;
6 | value: string;
7 | }
8 |
9 | interface TabsProps extends TabsPrimitive.TabsProps {
10 | tabs: Tab[];
11 | content: any;
12 | }
13 |
14 | export const Tabs = ({ tabs, content, className, ...props }: TabsProps) => {
15 | return (
16 |
38 | {createElement(icon, { size: 32 })}
39 |
40 | )}
41 |
42 |
43 |
49 |
50 | {!!button && (
51 |
61 | )}
62 | {title}
44 | 45 | {!!description && ( 46 |{description}
47 | )} 48 |39 |
55 |
87 | );
88 | };
89 |
--------------------------------------------------------------------------------
/packages/preview/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@instantcommerce/sdk-preview",
3 | "version": "0.0.1",
4 | "author": "Instant Commerce B.V.",
5 | "license": "MIT",
6 | "type": "module",
7 | "files": [
8 | "dist"
9 | ],
10 | "publishConfig": {
11 | "access": "public"
12 | },
13 | "scripts": {
14 | "dev": "vite",
15 | "build": "vite build",
16 | "preview": "vite preview"
17 | },
18 | "dependencies": {
19 | "@heroicons/react": "1.0.5",
20 | "@radix-ui/react-dialog": "1.0.2",
21 | "@radix-ui/react-label": "2.0.0",
22 | "@radix-ui/react-select": "1.1.1",
23 | "@radix-ui/react-slider": "1.1.0",
24 | "@radix-ui/react-switch": "1.0.1",
25 | "@radix-ui/react-tabs": "1.0.1",
26 | "@radix-ui/react-toggle-group": "1.0.1",
27 | "@radix-ui/react-tooltip": "1.0.2",
28 | "@remote-ui/react": "4.5.12",
29 | "@remote-ui/rpc": "1.3.4",
30 | "@shopify/web-worker": "5.0.1",
31 | "@tailwindcss/typography": "0.5.8",
32 | "@tiptap/react": "^2.0.0-beta.203",
33 | "@tiptap/starter-kit": "^2.0.0-beta.203",
34 | "@vanilla-extract/dynamic": "2.0.2",
35 | "@vanilla-extract/vite-plugin": "3.2.1",
36 | "autoprefixer": "10.4.8",
37 | "classnames": "2.3.1",
38 | "fast-deep-equal": "3.1.3",
39 | "humanize-string": "3.0.0",
40 | "phosphor-react": "1.4.1",
41 | "qs": "^6.11.0",
42 | "react": "18.2.0",
43 | "react-color": "2.19.3",
44 | "react-dom": "18.2.0",
45 | "react-helmet-async": "1.3.0",
46 | "react-hot-toast": "2.2.0",
47 | "react-router": "6.3.0",
48 | "react-router-dom": "6.3.0",
49 | "react-use": "17.4.0",
50 | "re-resizable": "BJvdA/re-resizable#build",
51 | "shared-utils": "*",
52 | "storyblok-rich-text-react-renderer": "2.6.1",
53 | "tailwindcss": "3.2.4",
54 | "tailwind-merge": "1.8.0",
55 | "tailwindcss-radix": "2.6.1",
56 | "types": "*",
57 | "prosemirror-keymap": "1.2.0",
58 | "prosemirror-gapcursor": "1.3.1",
59 | "prosemirror-dropcursor": "1.6.1",
60 | "prosemirror-history": "1.3.0",
61 | "prosemirror-commands": "1.5.0",
62 | "prosemirror-schema-list": "1.2.2"
63 | },
64 | "devDependencies": {
65 | "@types/react": "18.0.22",
66 | "@types/react-color": "3.0.6",
67 | "@types/react-dom": "18.0.7",
68 | "@vitejs/plugin-react": "2.2.0",
69 | "typescript": "4.6.4",
70 | "vite": "3.2.0"
71 | }
72 | }
73 |
--------------------------------------------------------------------------------
/packages/preview/src/containers/Preview/previewSchema.ts:
--------------------------------------------------------------------------------
1 | import {
2 | ContentSchemaInputField,
3 | CustomizerSchemaInputField,
4 | } from 'types/schemas';
5 | import { SchemaTypes } from '../../components/BlocksProvider/context';
6 |
7 | type FieldType =
8 | | ContentSchemaInputField['type']
9 | | CustomizerSchemaInputField['type'];
10 |
11 | const formatFieldValue = (type: FieldType, value: any, schema: any) => {
12 | switch (type) {
13 | case 'image': {
14 | return {
15 | id: 123,
16 | alt: 'Alt text',
17 | name: 'Name',
18 | focus: null,
19 | title: 'Title',
20 | filename: value,
21 | copyright: '',
22 | fieldtype: 'asset',
23 | };
24 | }
25 | case 'link': {
26 | return {
27 | id: '',
28 | url: value,
29 | linktype: 'url',
30 | fieldtype: 'multilink',
31 | };
32 | }
33 | case 'richText': {
34 | if (typeof value === 'string') {
35 | return {
36 | type: 'doc',
37 | content: [
38 | {
39 | type: 'paragraph',
40 | content: [
41 | {
42 | text: value,
43 | type: 'text',
44 | },
45 | ],
46 | },
47 | ],
48 | };
49 | }
50 |
51 | return value;
52 | }
53 | case 'subschema': {
54 | return value?.map((subschemaField: any) => {
55 | const subschema = schema?.subschemas?.[subschemaField.subschema];
56 |
57 | return {
58 | ...subschemaField,
59 | value: Object.keys(subschemaField.value || {}).reduce((all, key) => {
60 | all[key] = formatFieldValue(
61 | subschema?.fields?.[key]?.type,
62 | subschemaField.value[key],
63 | schema,
64 | );
65 | return all;
66 | }, {} as any),
67 | };
68 | });
69 | }
70 | default:
71 | return value;
72 | }
73 | };
74 |
75 | export const previewSchema = (
76 | schemaType: SchemaTypes,
77 | schema: any,
78 | previewValues?: Record
66 | {!!label && (
67 |
74 | )}
75 |
76 |
82 |
83 | {!!info && (
84 | {info}
85 | )}
86 |
79 | {children}
80 |
81 |
36 | {showPicker && (
37 |
58 |
89 |
90 |
91 | );
92 | };
93 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "instant-sdk",
3 | "version": "0.0.1",
4 | "author": "Instant Commerce B.V.",
5 | "license": "MIT",
6 | "private": true,
7 | "workspaces": [
8 | "packages/*"
9 | ],
10 | "scripts": {
11 | "build": "turbo run build",
12 | "build:cli": "turbo run build --filter=@instantcommerce/cli",
13 | "codegen": "graphql-codegen -r dotenv/config",
14 | "commit": "npx git-emoji-cli",
15 | "dev": "concurrently \"npm run dev:cli dev\" \"npm run dev:preview\"",
16 | "dev:cli": "turbo run dev --filter=@instantcommerce/cli && FORCE_DIR=./../../../examples/block-extension packages/cli/dist/cli.js",
17 | "dev:preview": "turbo run dev --filter=@instantcommerce/sdk-preview",
18 | "prepare": "husky install"
19 | },
20 | "eslintConfig": {
21 | "extends": [
22 | "@storyofams/eslint-config-ams/web"
23 | ],
24 | "settings": {
25 | "import/resolver": {
26 | "alias": [
27 | [
28 | "instant-client",
29 | "./packages/client/src"
30 | ]
31 | ]
32 | }
33 | }
34 | },
35 | "devDependencies": {
36 | "@commitlint/cli": "17.1.2",
37 | "@commitlint/config-conventional": "17.1.0",
38 | "@graphql-codegen/cli": "^2.13.7",
39 | "@graphql-codegen/introspection": "^2.2.1",
40 | "@graphql-codegen/typescript": "^2.7.4",
41 | "@graphql-codegen/typescript-graphql-request": "^4.5.6",
42 | "@graphql-codegen/typescript-operations": "^2.5.4",
43 | "@graphql-codegen/typescript-react-query": "^4.0.2",
44 | "@semantic-release/changelog": "6.0.1",
45 | "@semantic-release/release-notes-generator": "10.0.3",
46 | "@storyofams/eslint-config-ams": "^1.1.7",
47 | "@typescript-eslint/eslint-plugin": "5.17.0",
48 | "@typescript-eslint/parser": "5.17.0",
49 | "concurrently": "7.6.0",
50 | "css-mediaquery": "^0.1.2",
51 | "dotenv": "^16.0.3",
52 | "eslint": "8.17.0",
53 | "eslint-config-prettier": "8.5.0",
54 | "eslint-import-resolver-alias": "1.1.2",
55 | "eslint-plugin-import": "2.26.0",
56 | "eslint-plugin-jsx-a11y": "6.5.1",
57 | "eslint-plugin-mdx": "2.0.5",
58 | "eslint-plugin-prettier": "4.0.0",
59 | "eslint-plugin-react": "7.30.0",
60 | "eslint-plugin-react-hooks": "4.5.0",
61 | "husky": "8.0.1",
62 | "lint-staged": "13.0.3",
63 | "lodash.set": "^4.3.2",
64 | "lodash.get": "^4.4.2",
65 | "npm-run-all": "4.1.5",
66 | "prettier": "2.6.2",
67 | "semantic-release": "19.0.5",
68 | "semantic-release-monorepo": "7.0.5",
69 | "turbo": "1.4.5"
70 | },
71 | "resolutions": {
72 | "@types/react": "18.0.25",
73 | "@types/react-dom": "18.0.5",
74 | "@remote-ui/core": "https://gitpkg.now.sh/instantcommerce/remote-ui/packages/core?8a375d4",
75 | "@remote-ui/react": "https://gitpkg.now.sh/instantcommerce/remote-ui/packages/react?8a375d4",
76 | "react": "18.2.0",
77 | "react-dom": "18.2.0"
78 | }
79 | }
80 |
--------------------------------------------------------------------------------
/packages/preview/tailwind.config.cjs:
--------------------------------------------------------------------------------
1 | const defaultTheme = require('tailwindcss/defaultTheme');
2 |
3 | const primaryColors = {
4 | 50: '#FFF2B9',
5 | 100: '#EFF8FF', //
6 | 200: '#D1E9FF', //
7 | 300: '#84CAFF',
8 | 400: '#FFD82A',
9 | 500: '#2E90FA', //
10 | 600: '#1570EF', //
11 | 700: '#175CD3', //
12 | 800: '#584800',
13 | 900: '#201A00',
14 | };
15 |
16 | const secondaryColors = {
17 | 50: '#F0F9FF',
18 | 100: '#E0F2FE',
19 | 200: '#BAE6FD',
20 | 300: '#7DD3FC',
21 | 400: '#38BDF8',
22 | 500: '#0EA5E9',
23 | 600: '#0284C7',
24 | 700: '#0369A1',
25 | 800: '#075985',
26 | 900: '#0C4A6E',
27 | };
28 |
29 | const neutralColors = {
30 | 50: '#F9FAFB',
31 | 100: '#F4F4F5',
32 | 200: '#E4E4E7',
33 | 300: '#D1D5DB',
34 | 400: '#9CA3AF',
35 | 500: '#71717A',
36 | 600: '#4B5563',
37 | 700: '#3F3F46',
38 | 800: '#27272A',
39 | 900: '#18181B',
40 | };
41 |
42 | const warningColors = {
43 | 50: '#FFFAEB',
44 | 100: '#FEEFC7',
45 | 200: '#FEDF89',
46 | 300: '#FEC84B',
47 | 400: '#FDB022',
48 | 500: '#F79009',
49 | 600: '#DC6803',
50 | 700: '#B54708',
51 | 800: '#93370D',
52 | 900: '#792E0D',
53 | };
54 |
55 | const errorColors = {
56 | 50: '#FEF2F2',
57 | 100: '#FEE2E2',
58 | 200: '#FECACA',
59 | 300: '#FCA5A5',
60 | 400: '#F87171',
61 | 500: '#EF4444',
62 | 600: '#DC2626',
63 | 700: '#B91C1C',
64 | 800: '#991B1B',
65 | 900: '#7F1D1D',
66 | };
67 |
68 | /** @type {import('tailwindcss').Config} */
69 | module.exports = {
70 | content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
71 | theme: {
72 | extend: {
73 | fontFamily: {
74 | sans: ['Patron', ...defaultTheme.fontFamily.sans],
75 | },
76 | colors: {
77 | brand: '#FFD101',
78 | primary: primaryColors,
79 | secondary: secondaryColors,
80 | gray: neutralColors,
81 | error: errorColors,
82 | warning: warningColors,
83 | },
84 | width: {
85 | 50: '12.5rem',
86 | },
87 | spacing: {
88 | 1.5: '0.375rem',
89 | },
90 | space: {
91 | 1.5: '0.375rem',
92 | },
93 | // modal animations
94 | keyframes: {
95 | overlayShow: {
96 | from: { opacity: 0 },
97 | to: { opacity: 0.4 },
98 | },
99 | contentShow: {
100 | from: {
101 | opacity: 0,
102 | transform: 'translate(-50%, -48%) scale(0.96)',
103 | },
104 | to: {
105 | opacity: 1,
106 | transform: 'translate(-50%, -50%) scale(1)',
107 | },
108 | },
109 | },
110 | animation: {
111 | overlayShow: 'overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1)',
112 | contentShow: 'contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1)',
113 | },
114 | },
115 | },
116 | plugins: [require('tailwindcss-radix')(), require('@tailwindcss/typography')],
117 | };
118 |
--------------------------------------------------------------------------------
/packages/preview/src/containers/Preview/getStore.ts:
--------------------------------------------------------------------------------
1 | import { GraphQLClient, gql } from 'graphql-request';
2 |
3 | const client = new GraphQLClient(
4 | `${
5 | import.meta.env.VITE_API_URL || 'https://api.instantcommerce.app'
6 | }/graphql`,
7 | {
8 | fetch,
9 | headers: {
10 | 'x-instant-client': 'Storefront',
11 | },
12 | },
13 | );
14 |
15 | const PublicStoreFragmentFragmentDoc = gql`
16 | fragment PublicStoreFragment on PublicStore {
17 | id
18 | name
19 | slug
20 | assets {
21 | ...AssetFragment
22 | }
23 | integrations {
24 | shopify {
25 | shopId
26 | storefrontAccessToken
27 | }
28 | storyblok {
29 | publicKey
30 | }
31 | }
32 | languages {
33 | isDefault
34 | locale
35 | localizedName
36 | }
37 | organization {
38 | slug
39 | }
40 | snippets {
41 | id
42 | isPrioritized
43 | bypassCookieIntegration
44 | type
45 | url
46 | }
47 | storefront {
48 | config {
49 | theme {
50 | colors {
51 | grayscale {
52 | ...ColorShadesFragment
53 | }
54 | primary {
55 | ...ColorShadesFragment
56 | }
57 | text
58 | }
59 | typography {
60 | display {
61 | font
62 | transform
63 | }
64 | heading {
65 | font
66 | transform
67 | }
68 | paragraph {
69 | font
70 | transform
71 | }
72 | }
73 | }
74 | }
75 | }
76 | }
77 |
78 | fragment ColorShadesFragment on ColorShadesField {
79 | s50
80 | s100
81 | s200
82 | s300
83 | s400
84 | s500
85 | s600
86 | s700
87 | s800
88 | s900
89 | }
90 |
91 | fragment AssetFragment on PublicAsset {
92 | id
93 | mimeType
94 | name
95 | type
96 | url
97 | }
98 | `;
99 |
100 | const previewQuery = gql`
101 | query previewStoreByHostname($hostname: String!) {
102 | previewStoreByHostname(hostname: $hostname) {
103 | ...PublicStoreFragment
104 | }
105 | }
106 | ${PublicStoreFragmentFragmentDoc}
107 | `;
108 |
109 | const publicQuery = gql`
110 | query publicStoreByHostname($hostname: String!) {
111 | publicStoreByHostname(hostname: $hostname) {
112 | ...PublicStoreFragment
113 | }
114 | }
115 | ${PublicStoreFragmentFragmentDoc}
116 | `;
117 |
118 | export const getStore = async (url: URL) => {
119 | const storeHostname = url.hostname;
120 | const isPreview = storeHostname?.startsWith('preview-');
121 |
122 | const store = await client.request(isPreview ? previewQuery : publicQuery, {
123 | hostname: storeHostname,
124 | });
125 |
126 | return isPreview ? store.previewStoreByHostname : store.publicStoreByHostname;
127 | };
128 |
--------------------------------------------------------------------------------
/packages/cli/src/commands/login.tsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useState } from 'react';
2 | import { render, Text } from 'ink';
3 | import open from 'open';
4 | import { CommandModule } from 'yargs';
5 | import { config } from '~/config';
6 | import {
7 | checkDeviceCode,
8 | getDeviceCode,
9 | Auth0DeviceCodeResponse,
10 | Auth0AccessTokenResponse,
11 | Auth0ErrorResponse,
12 | } from '~/lib/auth0';
13 |
14 | export const Login = () => {
15 | const [deviceCodeData, setDeviceCodeData] =
16 | useState
44 | {
46 | setValue(newColor.hex);
47 | onChange(newColor.hex as string);
48 | }}
49 | color={value}
50 | />
51 |
52 | )}
53 |
54 |
23 |
45 | );
46 | };
47 |
48 | export const SideBar = ({ className }: { className?: string }) => {
49 | const { selectedBlock, blocksManifest } = useBlocks();
50 | const { bookmarks } = useConfig();
51 |
52 | const blocks = useMemo(
53 | () =>
54 | Object.keys(blocksManifest)
55 | ?.filter((key) => !bookmarks?.includes(blocksManifest[key]?.name))
56 | ?.map((key) => ({
57 | name: blocksManifest[key]?.name,
58 | url: key,
59 | })),
60 | [blocksManifest, bookmarks],
61 | );
62 |
63 | const bookmarkItems = useMemo(
64 | () =>
65 | Object.keys(blocksManifest)
66 | ?.filter((key) => bookmarks?.includes(blocksManifest[key]?.name))
67 | ?.map((key) => ({ name: blocksManifest[key]?.name, url: key })),
68 | [bookmarks],
69 | );
70 |
71 | const selectedItem = useMemo(
72 | () =>
73 | blocksManifest?.[selectedBlock || Object.keys(blocksManifest)[0]]?.name,
74 | [selectedBlock],
75 | );
76 |
77 | return (
78 |
102 | );
103 | };
104 |
--------------------------------------------------------------------------------
/packages/cli/src/commands/select.tsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useState } from 'react';
2 | import { render, Text } from 'ink';
3 | import { CommandModule } from 'yargs';
4 | import { SelectInput, Item } from '~/components';
5 | import { config } from '~/config';
6 | import { ExtractedApiError, extractApiError, useApiSdk } from '~/lib/api';
7 | import { StoresQuery, UserWithOrgsQuery } from '~/lib/api/sdk';
8 |
9 | export const Switch = () => {
10 | const apiSdk = useApiSdk();
11 |
12 | const [organizations, setOrganizations] =
13 | useState24 | {title} 25 |
26 | 27 |-
28 | {items?.map(({ name, url }) => (
29 |
- 30 | 41 | 42 | ))} 43 |
{children}
,
11 | ],
12 | },
13 | customizerSchema: {
14 | fields: {
15 | number: { type: 'number', min: 2, max: 80, fractionDigits: 3 },
16 | padding: {
17 | type: 'select',
18 | options: [
19 | { label: 'Small', value: 'sm' },
20 | { label: 'Large', value: 'lg' },
21 | ],
22 | preview: 'sm',
23 | },
24 | textColor: { type: 'color', preview: '#A020F0' },
25 | text: { type: 'text', maxLength: 1 },
26 | toggle: { type: 'toggle', preview: true },
27 | },
28 | },
29 | contentSchema: {
30 | fields: {
31 | title: { type: 'text', preview: 'Title' },
32 | select: {
33 | type: 'select',
34 | preview: 'value1',
35 | options: [
36 | { value: 'value1', label: 'Option 1' },
37 | { value: 'value2', label: 'Option 2' },
38 | ],
39 | },
40 | date: {
41 | type: 'date',
42 | preview: '2022-12-12 08:12',
43 | withTime: true,
44 | },
45 | image: {
46 | type: 'image',
47 | preview:
48 | 'https://images.unsplash.com/photo-1669962367460-00b711b2e3f3?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=700&q=80',
49 | },
50 | link: {
51 | type: 'link',
52 | preview: 'https://google.com',
53 | },
54 | richText: {
55 | type: 'richText',
56 | preview: 'Rich text',
57 | toolbar: [],
58 | },
59 | cards: {
60 | type: 'subschema',
61 | allowed: ['card'],
62 | max: 3,
63 | preview: [
64 | {
65 | subschema: 'card',
66 | value: {
67 | cardTitle: 'Card title',
68 | cardImage:
69 | 'https://a.storyblok.com/f/145828/5000x3333/564e281ca1/force-majeure-du8abwm5z2g-unsplash.jpg',
70 | cardButtons: [
71 | {
72 | subschema: 'button',
73 | value: {
74 | text: 'Button',
75 | link: 'https://a.storyblok.com/f/145828/5000x3333/564e281ca1/force-majeure-du8abwm5z2g-unsplash.jpg',
76 | },
77 | },
78 | ],
79 | },
80 | },
81 | ],
82 | },
83 | },
84 | subschemas: {
85 | button: {
86 | fields: {
87 | text: {
88 | type: 'text',
89 | label: 'Text',
90 | isTranslatable: true,
91 | isRequired: true,
92 | maxLength: 40,
93 | },
94 | link: {
95 | type: 'link',
96 | label: 'Link',
97 | isTranslatable: true,
98 | isRequired: true,
99 | },
100 | },
101 | },
102 | card: {
103 | fields: {
104 | cardImage: {
105 | type: 'image',
106 | label: 'Image',
107 | isRequired: true,
108 | },
109 | cardTitle: {
110 | type: 'text',
111 | label: 'Title',
112 | isTranslatable: true,
113 | isRequired: true,
114 | },
115 | cardButtons: {
116 | type: 'subschema',
117 | label: 'Buttons',
118 | isRequired: false,
119 | max: 2,
120 | allowed: ['button'],
121 | },
122 | },
123 | },
124 | },
125 | },
126 | });
127 |
--------------------------------------------------------------------------------
/packages/client/src/BlockProvider/context.ts:
--------------------------------------------------------------------------------
1 | import { createContext } from 'react';
2 |
3 | export interface BlockState {
4 | content?: any;
5 | customizer?: any;
6 | }
7 |
8 | export interface UnifiedCart {
9 | /** Shopify cart ID */
10 | externalId?: string;
11 | lines: {
12 | attributes?: { key: string; value?: string | null }[];
13 | id: string;
14 | product: {
15 | id: string;
16 | handle: string;
17 | title: string;
18 | };
19 | quantity: number;
20 | variant: {
21 | id: string;
22 | title: string;
23 | };
24 | }[];
25 | _raw: any;
26 | }
27 |
28 | export interface Cart extends UnifiedCart {
29 | addLine(params: {
30 | /** Add attributes to the cart line */
31 | attributes?: Array<{ key: string; value: string }>;
32 | /** The Shopify product ID to add */
33 | productId: string;
34 | /** @default 1 */
35 | quantity?: number;
36 | showModalOnSuccess?: boolean;
37 | /** The Shopify product variant ID to add */
38 | variantId: string;
39 | }): Promise{children}
;
19 | };
20 |
21 | interface ProductsConnection {
22 | edges: {
23 | node: {
24 | id: string;
25 | title: string;
26 | };
27 | }[];
28 | }
29 |
30 | interface Products {
31 | products: ProductsConnection;
32 | }
33 |
34 | export const CustomBlock = () => {
35 | const { content, customizer } = useBlockState();
36 | const { colors } = useTheme();
37 | const shopifyClient = useShopifyClient();
38 | const toast = useToast();
39 | const request = useRequestData();
40 |
41 | const [products, setProducts] = useStateProducts
94 | 95 | {/* {products?.edges?.map(({ node }) => ( 96 |
116 | {content?.cards?.map(({ value }: any, idx: number) => (
117 |
159 |
121 | {!!value?.cardImage && (
122 | 
123 | )}
124 |
125 |
157 | ))}
158 |
126 | {!!value?.cardTitle && (
127 |
156 | 128 | {value?.cardTitle} 129 |
130 | )} 131 | 132 | {!!value?.cardButtons?.length && ( 133 |
134 | {value?.cardButtons?.map(
135 | (
136 | {
137 | value: button,
138 | }: {
139 | value: { link: any; text: string };
140 | },
141 | jdx: number,
142 | ) =>
143 | button?.link || button?.text ? (
144 |
149 | {button?.text}
150 |
151 | ) : null,
152 | )}
153 |
154 | )}
155 |
125 |
126 |
133 |
134 |
135 |
151 | );
152 | };
153 |
154 | export const Toast = {
155 | create: ({
156 | message,
157 | type,
158 | position,
159 | duration,
160 | className,
161 | id,
162 | style,
163 | }: Pick{message}
136 | 137 | {!persistent && ( 138 | 149 | )} 150 |