{children}
5 | ) 6 | 7 | export default Title 8 | -------------------------------------------------------------------------------- /react/components/admin/store/StoreForm/mutations/SaveAppSettings.graphql: -------------------------------------------------------------------------------- 1 | mutation saveAppSettings($app: String, $version: String, $settings: String) { 2 | saveAppSettings(app: $app, version: $version, settings: $settings) { 3 | message 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /react/components/EditorContainer/Sidebar/BlockSelector/BlockList/BlockListItem/ExpandArrow/styles.css: -------------------------------------------------------------------------------- 1 | .transition { 2 | transition-property: transform, color; 3 | transition-duration: 200ms; 4 | transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); 5 | } 6 | -------------------------------------------------------------------------------- /react/components/EditorContainer/Styles/StyleEditor/graphql/ListFonts.graphql: -------------------------------------------------------------------------------- 1 | query ListFonts { 2 | listFonts { 3 | id 4 | fontFamily 5 | fonts { 6 | id 7 | filename 8 | fontWeight 9 | fontStyle 10 | } 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /react/components/EditorContainer/Topbar/ContextSelectors/graphql/appSettings.graphql: -------------------------------------------------------------------------------- 1 | query AppSettings($appName: String, $version: String) { 2 | appSettings(app: $appName, version: $version) 3 | @context(provider: "vtex.apps-graphql") { 4 | message 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /react/components/EditorContainer/Topbar/ContextSelectors/graphql/TenantInfo.graphql: -------------------------------------------------------------------------------- 1 | query TenantInfoQuery { 2 | tenantInfo { 3 | bindings { 4 | canonicalBaseAddress 5 | id 6 | supportedLocales 7 | targetProduct 8 | } 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /react/components/admin/redirects/mutations/DeleteManyRedirectsFromFile.graphql: -------------------------------------------------------------------------------- 1 | mutation DeleteManyRedirects($paths: [String!]!, $locators: [RouteLocator!]) { 2 | redirect @context(provider: "vtex.rewriter") { 3 | deleteMany(paths: $paths, locators: $locators) 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /react/components/admin/store/PWAForm/mutations/UpdateManifestIcon.graphql: -------------------------------------------------------------------------------- 1 | mutation updateManifest($icon: Upload!, $iOS: Boolean) { 2 | updateManifestIcon(icon: $icon, iOS: $iOS) { 3 | icons { 4 | src 5 | type 6 | sizes 7 | } 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | root = true 3 | 4 | [*] 5 | end_of_line = lf 6 | insert_final_newline = true 7 | indent_style = space 8 | indent_size = 2 9 | charset = utf-8 10 | trim_trailing_whitespace = true 11 | 12 | [*.md] 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /react/components/admin/store/PWAForm/mutations/UpdateManifest.graphql: -------------------------------------------------------------------------------- 1 | mutation updateManifest($manifest: ManifestInput) { 2 | updateManifest(manifest: $manifest) { 3 | start_url 4 | theme_color 5 | background_color 6 | display 7 | orientation 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /react/components/admin/store/StoreForm/queries/AvailableApp.graphql: -------------------------------------------------------------------------------- 1 | query availableApp($id: String!) { 2 | availableApp(id: $id) { 3 | id 4 | title 5 | installed 6 | linked 7 | installedVersion 8 | settingsSchema 9 | settingsUiSchema 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /react/queries/RedirectWithoutBinding.graphql: -------------------------------------------------------------------------------- 1 | query RedirectWithoutBinding($path: String!) { 2 | redirect @context(provider: "vtex.rewriter") { 3 | get(path: $path) { 4 | binding 5 | endDate 6 | from 7 | to 8 | type 9 | } 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /react/components/admin/institutional/Form/Loader.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | import { Spinner } from 'vtex.styleguide' 3 | 4 | const Loader = () => ( 5 |
6 |
8 | )
9 |
10 | export default Loader
11 |
--------------------------------------------------------------------------------
/react/components/admin/pages/Form/stateHandlers/getLoginToggleState.ts:
--------------------------------------------------------------------------------
1 | import { State } from '../index'
2 |
3 | export const getLoginToggleState = (prevState: State) => ({
4 | ...prevState,
5 | data: {
6 | ...prevState.data,
7 | auth: !!prevState.data && !prevState.data.auth,
8 | },
9 | })
10 |
--------------------------------------------------------------------------------
/react/queries/DeleteRedirect.graphql:
--------------------------------------------------------------------------------
1 | mutation DeleteRedirect($path: String!, $binding: String!) {
2 | redirect @context(provider: "vtex.rewriter") {
3 | delete(path: $path, locator: { from: $path, binding: $binding }) {
4 | endDate
5 | from
6 | to
7 | type
8 | }
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/react/queries/Redirect.graphql:
--------------------------------------------------------------------------------
1 | query Redirect($path: String!, $binding: String!) {
2 | redirect @context(provider: "vtex.rewriter") {
3 | get(path: $path, locator: { from: $path, binding: $binding }) {
4 | binding
5 | endDate
6 | from
7 | to
8 | type
9 | }
10 | }
11 | }
12 |
--------------------------------------------------------------------------------
/react/typings/json-schema-traverse.d.ts:
--------------------------------------------------------------------------------
1 | declare module 'json-schema-traverse' {
2 | const traverse: (
3 | schema: ComponentSchema,
4 | opts: (
5 | schema: JSONSchema6 & { widget: Widget },
6 | JSONPointer: string
7 | ) => void
8 | ) => void
9 |
10 | export default traverse
11 | }
12 |
--------------------------------------------------------------------------------
/react/components/EditorContainer/Styles/StyleEditor/graphql/SaveFontFamily.graphql:
--------------------------------------------------------------------------------
1 | mutation SaveFontFamily($font: SaveFontFamilyInput) {
2 | saveFontFamily(font: $font) {
3 | id
4 | fontFamily
5 | fonts {
6 | filename
7 | fontWeight
8 | fontStyle
9 | id
10 | }
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/react/components/admin/pages/Form/stateHandlers/__fixtures__/setupDate.ts:
--------------------------------------------------------------------------------
1 | import MockDate from 'mockdate'
2 |
3 | const setupDate = () => {
4 | beforeEach(() => {
5 | MockDate.set('2019-02-01')
6 | })
7 |
8 | afterEach(() => {
9 | MockDate.reset()
10 | })
11 | }
12 |
13 | export default setupDate
14 |
--------------------------------------------------------------------------------
/react/components/form/RichText.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | import I18nInput from './I18nInput'
4 | import { CustomWidgetProps } from './typings'
5 |
6 | const RichText: React.FunctionComponent{text}
} 11 |
10 |
16 | )
17 |
18 | export default AdminStructure
19 |
--------------------------------------------------------------------------------
/react/components/admin/redirects/UploadModal/UploadModal.css:
--------------------------------------------------------------------------------
1 | .full-modal-width {
2 | width: calc(100% + 6rem);
3 | }
4 |
5 | .error-container {
6 | max-height: 30vh;
7 | margin-bottom: -3rem;
8 | }
9 |
10 | .error-container::-webkit-scrollbar,
11 | .error-container::-webkit-scrollbar-track {
12 | width: 2px;
13 | background: #f2f4f5;
14 | }
15 |
16 | .error-container::-webkit-scrollbar-thumb {
17 | width: 2px;
18 | background: rgba(0, 0, 0, 0.2);
19 | border-radius: 2px;
20 | }
21 |
--------------------------------------------------------------------------------
/react/components/admin/redirects/mutations/DeleteManyRedirectsFromFile.d.ts:
--------------------------------------------------------------------------------
1 | export interface DeleteManyRedirectsFromFileVariables {
2 | paths: string[]
3 | }
4 |
5 | export type DeleteManyRedirectsFromFileResult = boolean
6 |
7 | export type DeleteManyRedirectsFromFileFn = MutationFn<
8 | DeleteManyRedirectsFromFileVariables,
9 | DeleteManyRedirectsFromFileResult
10 | >
11 |
12 | export interface DeleteManyRedirectsProps {
13 | deleteManyRedirects: DeleteManyRedirectsFromFileFn
14 | }
15 |
--------------------------------------------------------------------------------
/react/components/EditorContainer/Sidebar/BlockEditor/BlockConfigurationEditor/ConditionControls/ConditionTitle.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { FormattedMessage } from 'react-intl'
3 |
4 | interface Props {
5 | labelId: string
6 | }
7 |
8 | const ConditionTitle: React.FunctionComponent
11 |
15 | {message}
}
11 |
11 |
13 | ))
14 |
15 | export default Handle
16 |
--------------------------------------------------------------------------------
/react/components/EditorContainer/Styles/components/Colors.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | interface Props {
4 | colors: string[]
5 | }
6 |
7 | const Colors: React.FunctionComponent
9 | {colors.map((color, index) => (
10 |
17 | ))}
18 |
19 | )
20 |
21 | export default Colors
22 |
--------------------------------------------------------------------------------
/react/components/admin/pages/Form/stateHandlers/__fixtures__/newPage.ts:
--------------------------------------------------------------------------------
1 | import { ConditionsOperator } from 'vtex.styleguide'
2 |
3 | const newPage = {
4 | condition: {
5 | allMatches: true,
6 | id: '',
7 | statements: [
8 | {
9 | error: '',
10 | object: {
11 | date: new Date('2019-02-01'),
12 | },
13 | subject: 'date',
14 | verb: 'is',
15 | },
16 | ],
17 | },
18 | operator: 'all' as ConditionsOperator,
19 | pageId: '',
20 | template: '',
21 | }
22 |
23 | export default newPage
24 |
--------------------------------------------------------------------------------
/react/components/admin/pages/Form/stateHandlers/getLoginToggleState.test.ts:
--------------------------------------------------------------------------------
1 | import BASE_STATE from './__fixtures__/state'
2 | import { getLoginToggleState } from './getLoginToggleState'
3 |
4 | describe('getLoginToggleState', () => {
5 | it('should negate data.login value', () => {
6 | const mockState = {
7 | ...BASE_STATE,
8 | data: {
9 | ...BASE_STATE.data,
10 | auth: true,
11 | },
12 | }
13 |
14 | expect(getLoginToggleState(mockState)).toMatchObject({
15 | data: { auth: false },
16 | })
17 | })
18 | })
19 |
--------------------------------------------------------------------------------
/react/Wrapper.tsx:
--------------------------------------------------------------------------------
1 | import React, { ReactNode } from 'react'
2 | import { ToastProvider } from 'vtex.styleguide'
3 | import { AdminLoadingContextProvider } from './utils/AdminLoadingContext'
4 |
5 | interface Props {
6 | children?: ReactNode
7 | }
8 |
9 | const Wrapper: React.FunctionComponent{children}
13 |
13 | setIsVisible(false)} type="error">
14 | {message}
15 |
16 |
17 | ) : null
18 | }
19 |
20 | export default ErrorAlert
21 |
--------------------------------------------------------------------------------
/react/components/admin/pages/Form/utils.test.ts:
--------------------------------------------------------------------------------
1 | import { generateNewRouteId } from './utils'
2 |
3 | describe('#generateNewRouteId', () => {
4 | it('should remove trailing slash from path', () => {
5 | expect(
6 | generateNewRouteId('vtex.store@2.x:store.custom', '/path1/path2/')
7 | ).toBe('vtex.store@2.x:store.custom#path1-path2')
8 | })
9 |
10 | it('should generate a routeId without "/"', () => {
11 | expect(
12 | generateNewRouteId('vtex.store@2.x:store.custom', '/path1/path2')
13 | ).toEqual(expect.not.stringContaining('/'))
14 | })
15 | })
16 |
--------------------------------------------------------------------------------
/react/StoreSettings.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { injectIntl, InjectedIntlProps } from 'react-intl'
3 |
4 | import AdminStructure from './components/admin/AdminStructure'
5 | import Store from './components/admin/store'
6 |
7 | const StoreSettings: React.FC
8 |
14 | {text =>
16 |
17 | )
18 |
19 | export default React.memo(NoImagePlaceholder)
20 |
--------------------------------------------------------------------------------
/react/components/EditorContainer/Styles/StyleEditor/queries/ListFontsQuery.ts:
--------------------------------------------------------------------------------
1 | import { Query, QueryResult } from 'react-apollo'
2 | import ListFonts from '../graphql/ListFonts.graphql'
3 | import { FontFile } from '../mutations/SaveFontFamily'
4 |
5 | export interface FontFamily {
6 | id: string
7 | fontFamily: string
8 | fonts: FontFile[]
9 | }
10 |
11 | export interface ListFontsData {
12 | listFonts: FontFamily[]
13 | }
14 |
15 | export type ListFontsQueryResult = QueryResult{text}
} 15 |
29 | Aa
30 |
31 | )
32 | }
33 |
34 | export default Typography
35 |
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/feature_request.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: Feature request
3 | about: Suggest an idea for this project
4 | title: ''
5 | labels: 'New Feature'
6 | assignees: ''
7 | ---
8 |
9 | **Is your feature request related to a problem? Please describe.**
10 | A clear and concise description of what the problem is. For example: I'm always frustrated when [...]
11 |
12 | **Describe the solution you'd like**
13 | A clear and concise description of what you want to happen.
14 |
15 | **Describe alternatives you've considered**
16 | A clear and concise description of any alternative solutions or features you've considered.
17 |
18 | **Additional context**
19 | Add any other context or screenshots about the feature request here.
20 |
--------------------------------------------------------------------------------
/react/components/admin/pages/Form/stateHandlers/index.ts:
--------------------------------------------------------------------------------
1 | export {
2 | getAddConditionalTemplateState,
3 | } from './getAddConditionalTemplateState'
4 | export {
5 | getChangeOperatorConditionalTemplateState,
6 | } from './getChangeOperatorConditionalTemplateState'
7 | export {
8 | getChangeStatementsConditionalTemplate,
9 | } from './getChangeStatementsConditionalTemplate'
10 | export {
11 | getChangeTemplateConditionalTemplateState,
12 | } from './getChangeTemplateConditionalTemplateState'
13 | export { getLoginToggleState } from './getLoginToggleState'
14 | export {
15 | getRemoveConditionalTemplateState,
16 | } from './getRemoveConditionalTemplateState'
17 | export { getValidateFormState } from './getValidateFormState'
18 |
--------------------------------------------------------------------------------
/react/components/EditorContainer/Styles/StyleList/mutations/DeleteStyle.ts:
--------------------------------------------------------------------------------
1 | import { Mutation, MutationFn } from 'react-apollo'
2 | import DeleteStyle from '../graphql/DeleteStyle.graphql'
3 |
4 | interface DeleteStyleData {
5 | deleteStyle: {
6 | id: string
7 | app: string
8 | name: string
9 | }
10 | }
11 |
12 | interface DeleteStyleVariables {
13 | id: string
14 | }
15 |
16 | export type DeleteStyleMutationFn = MutationFn<
17 | DeleteStyleData,
18 | DeleteStyleVariables
19 | >
20 |
21 | class DeleteStyleMutation extends Mutation<
22 | DeleteStyleData,
23 | DeleteStyleVariables
24 | > {
25 | public static defaultProps = {
26 | mutation: DeleteStyle,
27 | }
28 | }
29 |
30 | export default DeleteStyleMutation
31 |
--------------------------------------------------------------------------------
/react/components/EditorContainer/Styles/StyleEditor/mutations/UpdateStyle.ts:
--------------------------------------------------------------------------------
1 | import { Mutation, MutationFn } from 'react-apollo'
2 | import UpdateStyle from '../graphql/UpdateStyle.graphql'
3 |
4 | interface UpdateStyleData {
5 | updateStyle: {
6 | path: string
7 | selected: boolean
8 | }
9 | }
10 |
11 | interface UpdateStyleVariables {
12 | id: string
13 | config: TachyonsConfig
14 | }
15 |
16 | export type UpdateStyleFunction = MutationFn<
17 | UpdateStyleData,
18 | UpdateStyleVariables
19 | >
20 |
21 | class UpdateStyleMutation extends Mutation<
22 | UpdateStyleData,
23 | UpdateStyleVariables
24 | > {
25 | public static defaultProps = {
26 | mutation: UpdateStyle,
27 | }
28 | }
29 |
30 | export default UpdateStyleMutation
31 |
--------------------------------------------------------------------------------
/react/utils/auditEvents/index.ts:
--------------------------------------------------------------------------------
1 | import { v4 as uuidv4 } from 'uuid'
2 |
3 | export const createEventObject = (
4 | operation: string,
5 | entityName: string,
6 | account: string,
7 | workspace: string,
8 | subjectId?: any
9 | ) => {
10 | const event = {
11 | id: uuidv4(),
12 | date: new Date().toISOString(),
13 | mainAccountName: account,
14 | accountName: account,
15 | subjectId: subjectId ? subjectId : '',
16 | application: 'site-editor',
17 | workspace: workspace,
18 | operation,
19 | meta: {
20 | entityName,
21 | entityBeforeAction: '',
22 | entityAfterAction: '',
23 | remoteIpAddress: '0.0.0.0',
24 | forwardFromVtexUserAgent: 'cms',
25 | },
26 | }
27 |
28 | return event
29 | }
30 |
--------------------------------------------------------------------------------
/react/components/EditorContainer/Sidebar/Transitions/Exit/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { CSSTransition } from 'react-transition-group'
3 |
4 | import { COMMON_PROPS } from '../consts'
5 | import { ExitProps } from '../typings'
6 | import styles from './styles.css'
7 |
8 | const Exit: React.FC
13 |
25 | )
26 |
27 | export default React.memo(CreateButton)
28 |
--------------------------------------------------------------------------------
/react/utils/conditions/index.ts:
--------------------------------------------------------------------------------
1 | import { ConditionsStatement } from 'vtex.styleguide'
2 |
3 | import { DateInfo, DateVerbOptions } from './typings'
4 |
5 | const formatDateInfo = (dateInfo: DateInfo, verb: DateVerbOptions) =>
6 | ({
7 | between: {
8 | from: dateInfo.from,
9 | to: dateInfo.to,
10 | },
11 | from: {
12 | from: dateInfo.date,
13 | },
14 | is: {
15 | from: dateInfo.date,
16 | },
17 | to: {
18 | to: dateInfo.date,
19 | },
20 | }[verb])
21 |
22 | export const formatStatements = (statements: ConditionsStatement[]) =>
23 | statements.map(({ object, subject, verb }) => ({
24 | objectJSON: JSON.stringify(
25 | formatDateInfo(object as DateInfo, verb as DateVerbOptions)
26 | ),
27 | subject: subject as ConditionSubject,
28 | verb,
29 | }))
30 |
--------------------------------------------------------------------------------
/react/components/EditorContainer/graphql/SaveContent.graphql:
--------------------------------------------------------------------------------
1 | mutation saveContent(
2 | $bindingId: String
3 | $blockId: String
4 | $configuration: ContentConfigurationInput
5 | $template: String
6 | $treePath: String
7 | $lang: String
8 | ) {
9 | saveContent(
10 | bindingId: $bindingId
11 | blockId: $blockId
12 | configuration: $configuration
13 | template: $template
14 | treePath: $treePath
15 | lang: $lang
16 | ) {
17 | # Available fields:
18 | # condition {
19 | # allMatches
20 | # id
21 | # pageContext {
22 | # id
23 | # type
24 | # }
25 | # statements {
26 | # objectJSON
27 | # subject
28 | # verb
29 | # }
30 | # }
31 | # contentJSON
32 | # contentId
33 | # label
34 | contentId
35 | }
36 | }
37 |
--------------------------------------------------------------------------------
/react/components/form/ArrayFieldTemplate/AddButton.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { FormattedMessage } from 'react-intl'
3 | import { ButtonWithIcon } from 'vtex.styleguide'
4 |
5 | import AddIcon from '../../icons/AddIcon'
6 |
7 | interface Props {
8 | onClick: (event: Event) => void
9 | }
10 |
11 | const icon =
15 |
16 |
20 | {text =>
22 |
23 |
24 | )
25 |
26 | export default AddButton
27 |
--------------------------------------------------------------------------------
/react/components/form/ArrayFieldTemplate/ArrayFieldTemplateItem/ArrayFieldTemplateItem.css:
--------------------------------------------------------------------------------
1 | .action-menu-container {
2 | opacity: 0;
3 | transition: opacity ease-in 100ms;
4 | }
5 |
6 | .preview-container:hover .action-menu-container {
7 | opacity: 1;
8 | }
9 |
10 | .preview-container {
11 | height: 100%;
12 | }
13 |
14 | .multi-item {
15 | width: calc(100% - 3rem);
16 | }
17 |
18 | .single-item {
19 | width: calc(100% - 1rem);
20 | }
21 |
22 | .preview-text-container {
23 | width: 100%;
24 | }
25 |
26 | .preview-image {
27 | object-fit: cover;
28 | transition: filter ease-in 100ms;
29 | }
30 |
31 | .preview-overlay {
32 | background-color: black;
33 | opacity: 0;
34 | transition: opacity ease-in 100ms;
35 | will-change: opacity;
36 | }
37 |
38 | .preview-container:hover .preview-overlay {
39 | opacity: 0.15;
40 | }
41 |
--------------------------------------------------------------------------------
/react/components/form/FieldTemplate.tsx:
--------------------------------------------------------------------------------
1 | import { JSONSchema6 } from 'json-schema'
2 | import React from 'react'
3 | import { FieldTemplateProps } from 'react-jsonschema-form'
4 |
5 | interface Props {
6 | children?: React.ReactNode
7 | classNames: string
8 | hidden?: boolean
9 | schema: JSONSchema6
10 | }
11 |
12 | const FieldTemplate: React.FunctionComponent{text}
}
21 | {children}
26 | }
27 |
28 | FieldTemplate.defaultProps = {
29 | classNames: '',
30 | hidden: false,
31 | }
32 |
33 | export default FieldTemplate
34 |
--------------------------------------------------------------------------------
/react/components/icons/TemplateIcon.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | const TemplateIcon: React.FC = () => (
4 | // is used for making sure that the icon isn't vertically centered
5 |
8 | }
9 |
10 | export interface Message {
11 | key: string
12 | message: string
13 | }
14 |
15 | export interface Data {
16 | messages: Message[]
17 | }
18 |
19 | export interface Variables {
20 | components: string[]
21 | domain: string
22 | renderMajor: number
23 | }
24 |
25 | export interface AvailableCulturesProps {
26 | client: ApolloClient
27 | intl: InjectedIntl
28 | }
29 |
30 | export interface Languages {
31 | languages: {
32 | default: string
33 | supported: string[]
34 | }
35 | }
36 |
37 | export interface LabelledLocale {
38 | label: string
39 | value: string
40 | }
41 |
--------------------------------------------------------------------------------
/react/components/admin/pages/Form/stateHandlers/getChangeOperatorConditionalTemplateState.ts:
--------------------------------------------------------------------------------
1 | import { ConditionsProps } from 'vtex.styleguide'
2 |
3 | import { State } from '../index'
4 |
5 | export const getChangeOperatorConditionalTemplateState = (
6 | uniqueId: number,
7 | operator: NonNullable
8 | ) => (prevState: State) => {
9 | const newPages = prevState.data.pages.map(page => {
10 | if (page.uniqueId === uniqueId) {
11 | return {
12 | ...page,
13 | condition: {
14 | ...page.condition,
15 | allMatches: operator === 'all',
16 | },
17 | operator,
18 | }
19 | }
20 | return page
21 | })
22 |
23 | return {
24 | ...prevState,
25 | data: {
26 | ...prevState.data,
27 | pages: newPages,
28 | },
29 | formErrors: {},
30 | }
31 | }
32 |
--------------------------------------------------------------------------------
/react/components/EditorContainer/Sidebar/Transitions/Enter/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { CSSTransition } from 'react-transition-group'
3 |
4 | import { COMMON_PROPS } from '../consts'
5 | import { EnterProps } from '../typings'
6 | import styles from './styles.css'
7 |
8 | const Enter: React.FC = ({ children, condition, from }) => (
9 |
21 | {children}
22 |
23 | )
24 |
25 | export default React.memo(Enter)
26 |
--------------------------------------------------------------------------------
/react/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "alwaysStrict": true,
4 | "esModuleInterop": true,
5 | "jsx": "preserve",
6 | "lib": [
7 | "es2019",
8 | "dom",
9 | "es2018.promise",
10 | "esnext.asynciterable"
11 | ],
12 | "module": "esnext",
13 | "moduleResolution": "node",
14 | "noImplicitAny": true,
15 | "noImplicitReturns": true,
16 | "noImplicitThis": true,
17 | "noUnusedLocals": true,
18 | "noUnusedParameters": true,
19 | "skipLibCheck": true,
20 | "sourceMap": true,
21 | "strictFunctionTypes": true,
22 | "strictNullChecks": true,
23 | "strictPropertyInitialization": true,
24 | "target": "es2017"
25 | },
26 | "include": [
27 | "./typings/*.d.ts",
28 | "./**/*.tsx",
29 | "./**/*.ts"
30 | ],
31 | "typeAcquisition": {
32 | "enable": false
33 | }
34 | }
--------------------------------------------------------------------------------
/react/components/EditorContainer/Topbar/ContextSelectors/graphql/GetRoute.graphql:
--------------------------------------------------------------------------------
1 | query GetRoute($routeId: String!) {
2 | route(routeId: $routeId, domain: "store") {
3 | auth
4 | blockId
5 | binding
6 | context
7 | declarer
8 | domain
9 | interfaceId
10 | conflicts {
11 | binding
12 | blockId
13 | interfaceId
14 | routeId
15 | }
16 | pages {
17 | pageId
18 | condition {
19 | id
20 | pageContext {
21 | id
22 | type
23 | }
24 | allMatches
25 | statements {
26 | subject
27 | verb
28 | objectJSON
29 | }
30 | }
31 | template
32 | }
33 | path
34 | routeId
35 | title
36 | uuid
37 | metaTags {
38 | description
39 | keywords
40 | robots
41 | }
42 | }
43 | }
44 |
--------------------------------------------------------------------------------
/react/components/form/ObjectFieldTemplate.tsx:
--------------------------------------------------------------------------------
1 | import React, { Fragment } from 'react'
2 | import { ObjectFieldTemplateProps } from 'react-jsonschema-form'
3 |
4 | const hasFieldToBeDisplayed = (field: ComponentSchema): boolean => {
5 | if (field.type !== 'object') {
6 | return !field.isLayout
7 | }
8 |
9 | return Object.values(field.properties || {}).reduce(
10 | (acc, currValue) => acc || hasFieldToBeDisplayed(currValue),
11 | false
12 | )
13 | }
14 |
15 | const ObjectFieldTemplate: React.FunctionComponent<
16 | ObjectFieldTemplateProps
17 | > = ({ properties, schema }) =>
18 | hasFieldToBeDisplayed(schema as ComponentSchema) ? (
19 | {properties.map(property => property.content)}
20 | ) : null
21 |
22 | ObjectFieldTemplate.defaultProps = {
23 | properties: [],
24 | }
25 |
26 | export default ObjectFieldTemplate
27 |
--------------------------------------------------------------------------------
/react/typings/draft-js.d.ts:
--------------------------------------------------------------------------------
1 | import 'draft-js'
2 | declare module 'draft-js' {
3 | export interface Media {
4 | block: ContentBlock
5 | blockProps: { [key: string]: unknown } | undefined
6 | blockStyleFn?: (block: ContentBlock) => string
7 | contentState: ContentState
8 | customStyleFn?: (
9 | style: DraftInlineStyle,
10 | block: ContentBlock
11 | ) => DraftStyleMap
12 | customStyleMap: DraftStyleMap
13 | decorator: CompositeDecorator
14 | direction: string
15 | forceSelection: boolean
16 | offsetKey: string
17 | selection: SelectionState
18 | tree: Immutable.List
19 | }
20 |
21 | export interface Link {
22 | children: React.ElementType[]
23 | contentState: ContentState
24 | decoratedText: string
25 | dir: string | null
26 | entityKey: string
27 | offsetKey: string
28 | }
29 | }
30 |
--------------------------------------------------------------------------------
/react/components/ActionMenu/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import {
3 | ActionMenu as StyleguideActionMenu,
4 | IconOptionsDots,
5 | } from 'vtex.styleguide'
6 |
7 | import { ActionMenuOption } from './typings'
8 |
9 | interface Props {
10 | buttonSize?: string
11 | menuWidth?: number | string
12 | options: ActionMenuOption[]
13 | variation?: string
14 | }
15 |
16 | const icon = = ({
19 | buttonSize,
20 | menuWidth,
21 | options,
22 | variation = 'tertiary',
23 | }) => (
24 | = ({ color = 'currentColor' }) => (
8 |
30 | )
31 |
32 | export default IconDesktop
33 |
--------------------------------------------------------------------------------
/react/components/icons/ContentScheduledIcon.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | const ContentScheduledIcon: React.FC = () => (
4 |
31 | )
32 |
33 | export default ContentScheduledIcon
34 |
--------------------------------------------------------------------------------
/react/components/HighlightOverlay/HighlightOverlay.css:
--------------------------------------------------------------------------------
1 | .highlight-enter {
2 | opacity: 0;
3 | border-color: rgba(19, 76, 216, 0);
4 | }
5 |
6 | .highlight-enter-active {
7 | transition: opacity 150ms cubic-bezier(0.19, 1, 0.22, 1),
8 | border-color 150ms cubic-bezier(0.19, 1, 0.22, 1);
9 | opacity: 1;
10 | border-color: rgba(19, 76, 216, 1);
11 | }
12 |
13 | .highlight-enter-done {
14 | opacity: 1;
15 | border-color: rgba(19, 76, 216, 1);
16 | }
17 |
18 | .highlight-exit {
19 | opacity: 1;
20 | border-color: rgba(19, 76, 216, 1);
21 | }
22 |
23 | .highlight-exit-active {
24 | transition: opacity 150ms cubic-bezier(0.215, 0.61, 0.355, 1),
25 | border-color 150ms cubic-bezier(0.215, 0.61, 0.355, 1);
26 | opacity: 0;
27 | border-color: rgba(19, 76, 216, 0);
28 | }
29 |
30 | .highlight-exit-done {
31 | opacity: 0;
32 | border-color: rgba(19, 76, 216, 0);
33 | }
34 |
--------------------------------------------------------------------------------
/react/RedirectListWrapper.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Query } from 'react-apollo'
3 | import { Tenant } from 'vtex.tenant-graphql'
4 |
5 | import Loader from './components/Loader'
6 | import TenantInfo from './queries/TenantInfo.graphql'
7 | import RedirectList from './RedirectList'
8 | import { getStoreBindings } from './utils/bindings'
9 |
10 | const RedirectListWrapper = () => {
11 | return (
12 | query={TenantInfo}>
13 | {({ data, loading: isLoading }) => {
14 | const tenantInfo = data?.tenantInfo
15 | if (isLoading || !tenantInfo) {
16 | return 1} />
20 | }}
21 |
22 | )
23 | }
24 |
25 | export default React.memo(RedirectListWrapper)
26 |
--------------------------------------------------------------------------------
/react/components/EditorContainer/Topbar/ContextSelectors/typings.d.ts:
--------------------------------------------------------------------------------
1 | import { QueryResult } from 'react-apollo'
2 |
3 | export type DropdownOptions = {
4 | label: string
5 | value: string
6 | }[]
7 |
8 | export type DropdownValue = string
9 |
10 | type BaseAddress = string
11 |
12 | type Locale = string
13 |
14 | interface Binding {
15 | canonicalBaseAddress: string
16 | id: string
17 | supportedLocales: Locale[]
18 | targetProduct: string
19 | }
20 |
21 | interface TenantInfo {
22 | bindings: Binding[]
23 | }
24 |
25 | export interface TenantInfoData {
26 | tenantInfo: TenantInfo
27 | }
28 |
29 | interface QueryState extends Pick, 'data'> {
30 | hasError: boolean
31 | isLoading: QueryResult['loading']
32 | }
33 |
34 | export type QueryStateReducer = (
35 | prevState: QueryState,
36 | state: Partial
37 | ) => QueryState
38 |
--------------------------------------------------------------------------------
/docs/CONTENT_PAGE.md:
--------------------------------------------------------------------------------
1 | # VTEX Custom Content
2 |
3 | ## Description
4 |
5 | This is just an easier way to create content pages in your store. It provides an editor for you to create new routes and their content in a single form. You can edit the content using the Side Editor later as well.
6 |
7 | :loudspeaker: **Disclaimer:** Don't fork this project; use, contribute, and/or open issues with your feature requests.
8 |
9 | ## Usage
10 |
11 | You must add `store.content` to your `blocks.json` just like the example below:
12 |
13 | ```json
14 | "store.content": {
15 | "children": ["flex-layout.row#content-body"]
16 | },
17 | "flex-layout.row#content-body": {
18 | "children": ["rich-text"]
19 | }
20 | ```
21 |
22 | ## Continuous Integrations
23 |
24 | ### Travis CI
25 |
26 | ](https://travis-ci.org/vtex-apps/pages-editor)
27 |
--------------------------------------------------------------------------------
/react/components/EditorContainer/Sidebar/BlockEditor/BlockConfigurationList/Card/ConditionTags/Tag.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Tag as StyleguideTag } from 'vtex.styleguide'
3 |
4 | import CalendarIcon from '../../../../../../icons/CalendarIcon'
5 | import PersonIcon from '../../../../../../icons/PersonIcon'
6 |
7 | interface Props {
8 | kind: ConditionSubject
9 | text: string
10 | title: string
11 | }
12 |
13 | const iconByKind = {
14 | date: = ({ kind, text, title }) => (
19 |
20 |
28 | )
29 |
30 | export default React.memo(Tag)
31 |
--------------------------------------------------------------------------------
/react/components/EditorContainer/Sidebar/AbsoluteLoader.tsx:
--------------------------------------------------------------------------------
1 | import classnames from 'classnames'
2 | import React from 'react'
3 | import { Spinner } from 'vtex.styleguide'
4 |
5 | import { useEditorContext } from '../../EditorContext'
6 |
7 | interface Props {
8 | containerClassName?: string
9 | }
10 |
11 | const AbsoluteLoader: React.FunctionComponent = ({
12 | children,
13 | containerClassName,
14 | }) => {
15 | const editor = useEditorContext()
16 |
17 | const isLoading = editor.getIsLoading()
18 |
19 | return (
20 | <>
21 | {isLoading ? (
22 | > = props => {
11 | return (
12 | query={TenantInfo}>
13 | {({ data, loading: isLoading }) => {
14 | const tenantInfo = data?.tenantInfo
15 | if (isLoading || !tenantInfo) {
16 | return {
21 | deleteContent: DeleteContentMutationFn
22 | }
23 |
24 | class DeleteContentMutation extends Mutation<
25 | DeleteContentData,
26 | DeleteContentVariables
27 | > {
28 | public static defaultProps = {
29 | mutation: DeleteContent,
30 | }
31 | }
32 |
33 | export default DeleteContentMutation
34 |
--------------------------------------------------------------------------------
/react/components/EditorContainer/queries/ListContent.tsx:
--------------------------------------------------------------------------------
1 | import { Query, QueryResult } from 'react-apollo'
2 | import ListContent from '../graphql/ListContent.graphql'
3 |
4 | export const ListContentGraphqlDocument = ListContent
5 |
6 | export interface ListContentVariables {
7 | bindingId?: string
8 | blockId: string
9 | pageContext: { id: string; type: string }
10 | template: string
11 | treePath: string
12 | }
13 |
14 | export interface ListContentData {
15 | listContentWithSchema?: {
16 | content?: ExtensionConfiguration[]
17 | schemaJSON: string
18 | }
19 | }
20 |
21 | export type ListContentQueryResult = QueryResult<
22 | ListContentData,
23 | ListContentVariables
24 | >
25 |
26 | class ListContentQuery extends Query {
27 | public static defaultProps = {
28 | fetchPolicy: 'network-only',
29 | query: ListContent,
30 | }
31 | }
32 |
33 | export default ListContentQuery
34 |
--------------------------------------------------------------------------------
/react/components/EditorContainer/Styles/StyleEditor/utils/colors.ts:
--------------------------------------------------------------------------------
1 | import { forEachObjIndexed } from 'ramda'
2 |
3 | const fromSemanticColors = (semanticColors: SemanticColors): Colors => {
4 | const getFieldPath = (name: string) => {
5 | let fieldPath = name.split('_')
6 | if (fieldPath.length === 1) {
7 | fieldPath = ['default'].concat(fieldPath)
8 | }
9 | return fieldPath.reverse().join('.')
10 | }
11 |
12 | const colors: Colors = {}
13 | forEachObjIndexed((tokens: Tokens, field: string) => {
14 | forEachObjIndexed((color: string, token: string) => {
15 | if (token.startsWith('__')) {
16 | return
17 | }
18 | const info: ColorInfo = {
19 | color,
20 | configField: field,
21 | path: getFieldPath(field),
22 | }
23 | colors[token] = (colors[token] || []).concat(info)
24 | }, tokens)
25 | }, semanticColors)
26 |
27 | return colors
28 | }
29 |
30 | export default fromSemanticColors
31 |
--------------------------------------------------------------------------------
/react/components/EditorContainer/Sidebar/BlockEditor/BlockConfigurationEditor/hooks.ts:
--------------------------------------------------------------------------------
1 | import { useRef, useState } from 'react'
2 |
3 | import { ComponentFormState } from './typings'
4 |
5 | export function useComponentFormStateStack() {
6 | const [componentFormState, setComponentFormState] = useState<
7 | ComponentFormState | undefined
8 | >()
9 | const stack = useRef([])
10 |
11 | function popComponentFormState() {
12 | stack.current.pop()
13 |
14 | setComponentFormState(stack.current[stack.current.length - 1])
15 | }
16 |
17 | function pushComponentFormState(state: ComponentFormState) {
18 | const stateWithDepth = { ...state, depth: stack.current.length + 1 }
19 |
20 | stack.current.push(stateWithDepth)
21 | setComponentFormState(stateWithDepth)
22 | }
23 |
24 | return {
25 | currentDepth: stack.current.length,
26 | componentFormState,
27 | popComponentFormState,
28 | pushComponentFormState,
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/react/components/EditorContainer/Topbar/ContextSelectors/hooks/useBinding.ts:
--------------------------------------------------------------------------------
1 | import React, { useMemo } from 'react'
2 |
3 | import { Binding } from '../typings'
4 |
5 | const LAST_BINDING_KEY = 'vtex.site-editor.lastBinding'
6 |
7 | export const useBinding = (): [
8 | Binding | undefined,
9 | React.Dispatch
10 | ] => {
11 | const [binding, setBinding] = React.useState(() => {
12 | const lastBinding = window.localStorage.getItem(LAST_BINDING_KEY)
13 | return lastBinding ? (JSON.parse(lastBinding) as Binding) : undefined
14 | })
15 |
16 | return [
17 | binding,
18 | useMemo(() => {
19 | return (value: Binding | undefined) => {
20 | if (value) {
21 | window.localStorage.setItem(LAST_BINDING_KEY, JSON.stringify(value))
22 | } else {
23 | window.localStorage.removeItem(LAST_BINDING_KEY)
24 | }
25 | setBinding(value)
26 | }
27 | }, [setBinding]),
28 | ]
29 | }
30 |
--------------------------------------------------------------------------------
/react/typings/pages.d.ts:
--------------------------------------------------------------------------------
1 | declare module 'pages' {
2 | import { ConditionsProps } from 'vtex.styleguide'
3 |
4 | type ConditionsOperators = NonNullable
5 |
6 | interface Statements {
7 | subject: string
8 | verb: string
9 | object: Record
10 | error: unknown
11 | }
12 |
13 | interface ConditionFormsData {
14 | id?: string
15 | allMatches: boolean
16 | statements: Statements[]
17 | }
18 |
19 | type PagesFormData = Omit & {
20 | condition: ConditionFormsData
21 | uniqueId: number
22 | operator: ConditionsOperators
23 | template: string
24 | }
25 |
26 | interface KeywordsFormData {
27 | value: string
28 | label: string
29 | }
30 |
31 | type RouteFormData = Omit & {
32 | pages: PagesFormData[]
33 | metaTagDescription?: string
34 | metaTagRobots?: string
35 | metaTagKeywords?: KeywordsFormData[]
36 | }
37 | }
38 |
--------------------------------------------------------------------------------
/react/components/form/ImageUploader/EmptyState.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { FormattedMessage } from 'react-intl'
3 |
4 | import IconImage from '../../MediaGalleryWidget/icons/IconImage'
5 | import styles from './styles.css'
6 |
7 | const EmptyState = ({ style }: { style?: React.CSSProperties }) => {
8 | return (
9 |
4 | export const isNewRoute = (route: NewRouteTypeArg) =>
5 | !route.uuid && !route.declarer
6 |
7 | export const isUserRoute = (route: NewRouteTypeArg) => !route.declarer
8 |
9 | type GetRouteTitleArg = Pick &
10 | NewRouteTypeArg
11 |
12 | export const getRouteTitle = (route: GetRouteTitleArg) => {
13 | const { blockId, declarer, interfaceId, title } = route
14 |
15 | const nameFromInterfaceOrBlock = startCase(
16 | blockId.split('#')[1] ||
17 | interfaceId.split('.')[interfaceId.split('.').length - 1]
18 | )
19 |
20 | if (isNewRoute(route)) {
21 | return title || ''
22 | }
23 |
24 | return declarer
25 | ? nameFromInterfaceOrBlock || title
26 | : title || nameFromInterfaceOrBlock
27 | }
28 |
29 | export const isStoreRoute = (domain: Route['domain']) => domain === 'store'
30 |
--------------------------------------------------------------------------------
/react/components/form/Toggle.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { useIntl } from 'react-intl'
3 | import { formatIOMessage } from 'vtex.native-types'
4 | import { Toggle as StyleguideToggle } from 'vtex.styleguide'
5 |
6 | import { CustomWidgetProps } from './typings'
7 |
8 | const Toggle: React.FunctionComponent = ({
9 | disabled,
10 | id,
11 | label,
12 | onChange,
13 | readonly,
14 | schema: { disabled: disabledBySchema },
15 | value,
16 | }) => {
17 | const intl = useIntl()
18 |
19 | return (
20 | ) =>
26 | onChange(event.target.checked)
27 | }
28 | />
29 | )
30 | }
31 |
32 | Toggle.defaultProps = {
33 | disabled: false,
34 | readonly: false,
35 | }
36 |
37 | export default Toggle
38 |
--------------------------------------------------------------------------------
/react/components/EditorContainer/Topbar/icons/IconView.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | interface Props {
4 | color?: string
5 | }
6 |
7 | const IconView: React.FC = ({ color = 'currentColor' }) => (
8 |
32 | )
33 |
34 | export default IconView
35 |
--------------------------------------------------------------------------------
/react/components/EditorContext.tsx:
--------------------------------------------------------------------------------
1 | import { createContext, useContext } from 'react'
2 |
3 | export const initialEditorContextState: EditorContextType = {
4 | activeConditions: [],
5 | addCondition: () => {},
6 | allMatches: true,
7 | availableCultures: [],
8 | blockData: {},
9 | editExtensionPoint: () => {},
10 | editMode: false,
11 | editTreePath: null,
12 | getIsLoading: () => false,
13 | iframeWindow: window.self,
14 | isSidebarVisible: true,
15 | messages: {},
16 | mode: 'content',
17 | onChangeIframeUrl: () => {},
18 | setDevice: () => {},
19 | setIsLoading: () => {},
20 | setMode: () => {},
21 | setBlockData: () => {},
22 | setViewport: () => {},
23 | toggleEditMode: () => {},
24 | toggleSidebarVisibility: () => {},
25 | viewport: 'desktop',
26 | }
27 |
28 | export const EditorContext = createContext(initialEditorContextState)
29 |
30 | EditorContext.displayName = 'EditorContext'
31 |
32 | export const useEditorContext = () => useContext(EditorContext)
33 |
--------------------------------------------------------------------------------
/react/components/icons/AddIcon.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | const AddIcon: React.FunctionComponent = () => (
4 |
30 | )
31 |
32 | export default AddIcon
33 |
--------------------------------------------------------------------------------
/react/components/EditorContainer/Sidebar/utils.test.ts:
--------------------------------------------------------------------------------
1 | import EXTENSIONS from './__fixtures__/extensions'
2 | import { getIsSitewide } from './utils'
3 |
4 | describe('getIsSitewide', () => {
5 | it('should return true for AFTER', () => {
6 | const mockEditTreePath = 'store.home/$after_footer'
7 |
8 | expect(getIsSitewide(EXTENSIONS, mockEditTreePath)).toBe(true)
9 | })
10 |
11 | it('should return true for AROUND', () => {
12 | const mockEditTreePath = 'store.home/$around_homeWrapper'
13 |
14 | expect(getIsSitewide(EXTENSIONS, mockEditTreePath)).toBe(true)
15 | })
16 |
17 | it('should return true for BEFORE', () => {
18 | const mockEditTreePath = 'store.home/$before_header.full'
19 |
20 | expect(getIsSitewide(EXTENSIONS, mockEditTreePath)).toBe(true)
21 | })
22 |
23 | it('should return false for blocks without role', () => {
24 | const mockEditTreePath = 'store.home/carousel#home'
25 |
26 | expect(getIsSitewide(EXTENSIONS, mockEditTreePath)).toBe(false)
27 | })
28 | })
29 |
--------------------------------------------------------------------------------
/react/components/admin/redirects/mutations/SaveRedirectFromFile.tsx:
--------------------------------------------------------------------------------
1 | import { Mutation, MutationFn, MutationResult } from 'react-apollo'
2 |
3 | import SaveRedirectFromFile from './SaveRedirectFromFile.graphql'
4 |
5 | interface SaveRedirectFromFileData {
6 | saveRedirectFromFile: boolean
7 | }
8 |
9 | export type UploadActionType = 'save' | 'delete'
10 |
11 | interface SaveRedirectFromFileVariables {
12 | redirects: Redirect[]
13 | }
14 |
15 | type SaveRedirectFromFileMutationFn = MutationFn<
16 | SaveRedirectFromFileData,
17 | SaveRedirectFromFileVariables
18 | >
19 |
20 | export interface MutationRenderProps
21 | extends MutationResult {
22 | saveRedirectFromFile: SaveRedirectFromFileMutationFn
23 | }
24 |
25 | class SaveRedirectFromFileMutation extends Mutation<
26 | SaveRedirectFromFileData,
27 | SaveRedirectFromFileVariables
28 | > {
29 | public static defaultProps = {
30 | mutation: SaveRedirectFromFile,
31 | }
32 | }
33 |
34 | export default SaveRedirectFromFileMutation
35 |
--------------------------------------------------------------------------------
/react/components/icons/EarthIcon.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | const EarthIcon: React.FC = () => (
4 |
15 | )
16 |
17 | export default EarthIcon
18 |
--------------------------------------------------------------------------------
/react/components/EditorContainer/Topbar/icons/IconPicker.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | interface Props {
4 | color?: string
5 | }
6 |
7 | const IconEdit: React.FC = ({ color = 'currentColor' }) => (
8 |
29 | )
30 |
31 | export default IconEdit
32 |
--------------------------------------------------------------------------------
/react/components/EditorContainer/Topbar/icons/CopyContent.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | interface Props {
4 | color?: string
5 | }
6 |
7 | const CopyContent = ({ color = 'currentColor' }: Props) => (
8 |
31 | )
32 |
33 | export default CopyContent
34 |
--------------------------------------------------------------------------------
/react/components/EditorContainer/mutations/SaveContent.tsx:
--------------------------------------------------------------------------------
1 | import { Mutation, MutationFn, MutationResult } from 'react-apollo'
2 | import SaveContent from '../graphql/SaveContent.graphql'
3 |
4 | interface SaveContentData {
5 | saveContent: Pick
6 | }
7 |
8 | interface SaveContentVariables {
9 | bindingId?: string
10 | blockId?: string
11 | configuration: Omit & {
12 | contentId: string | null
13 | }
14 | lang: RenderContext['culture']['locale']
15 | template: string
16 | treePath: string
17 | }
18 |
19 | export type SaveContentMutationFn = MutationFn<
20 | SaveContentData,
21 | SaveContentVariables
22 | >
23 |
24 | export interface MutationRenderProps extends MutationResult {
25 | SaveContent: SaveContentMutationFn
26 | }
27 |
28 | class SaveContentMutation extends Mutation<
29 | SaveContentData,
30 | SaveContentVariables
31 | > {
32 | public static defaultProps = {
33 | mutation: SaveContent,
34 | }
35 | }
36 |
37 | export default SaveContentMutation
38 |
--------------------------------------------------------------------------------
/react/components/admin/institutional/Form/UnallowedWarning.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { FormattedMessage } from 'react-intl'
3 | import { Button, EmptyState } from 'vtex.styleguide'
4 |
5 | const UnallowedWarning = () => (
6 |
15 | {message =>
17 | = ({
14 | name,
15 | history,
16 | }) => {
17 | const handleClick = React.useCallback(
18 | () => history.push(EditorPath.typeToken.replace(IdParam, name)),
19 | [history, name]
20 | )
21 |
22 | const handleKeyDown = useKeydownFromClick(handleClick)
23 |
24 | return (
25 | ({
9 | setTargetPath: () => undefined,
10 | targetPath: '',
11 | })
12 | const useTargetPathContext = () => useContext(TargetPathContext)
13 |
14 | const withTargetPath = (
15 | Component: ComponentType
16 | ): ComponentType => {
17 | const extendedComponent = (props: TOriginalProps) => (
18 |
19 | {({ setTargetPath, targetPath }) => {
20 | return (
21 |
29 | )
30 | return extendedComponent
31 | }
32 |
33 | export { useTargetPathContext, withTargetPath }
34 | export default TargetPathContext
35 |
--------------------------------------------------------------------------------
/react/components/EditorContainer/Styles/StyleEditor/AvailableEditor.tsx:
--------------------------------------------------------------------------------
1 | import { useKeydownFromClick } from 'keydown-from-click'
2 | import React from 'react'
3 | import { FormattedMessage } from 'react-intl'
4 | import { RouteComponentProps, withRouter } from 'react-router-dom'
5 |
6 | interface Props extends RouteComponentProps {
7 | path: string
8 | titleId: string
9 | widget?: React.ReactNode
10 | }
11 |
12 | const AvailableEditor: React.FunctionComponent = ({
13 | history,
14 | path,
15 | titleId,
16 | widget,
17 | }) => {
18 | const redirect = React.useCallback(() => history.push(path), [history, path])
19 |
20 | const redirectByKeyDown = useKeydownFromClick(redirect)
21 |
22 | return (
23 | ).type === 'string'
12 | )
13 | }
14 |
15 | const messages = defineMessages({
16 | invalidTypeError: {
17 | defaultMessage:
18 | '[Line {line}] Invalid value "{type}" for redirect type. Allowed values are "PERMANENT" and "TEMPORARY".',
19 | id: 'admin/pages.admin.redirects.upload-modal.prompt.validation-error.type',
20 | },
21 | })
22 |
23 | export function validateRedirect(
24 | redirect: Redirect,
25 | line: number,
26 | intl: IntlShape
27 | ): string | undefined {
28 | const { type } = redirect
29 | return type.toUpperCase() !== 'PERMANENT' &&
30 | type.toUpperCase() !== 'TEMPORARY'
31 | ? intl.formatMessage(messages.invalidTypeError, {
32 | line,
33 | type,
34 | })
35 | : undefined
36 | }
37 |
--------------------------------------------------------------------------------
/react/components/EditorContainer/Sidebar/BlockSelector/BlockList/BlockListItem/ExpandArrow/index.tsx:
--------------------------------------------------------------------------------
1 | import classnames from 'classnames'
2 | import { useKeydownFromClick } from 'keydown-from-click'
3 | import React from 'react'
4 |
5 | import ArrowIcon from '../../../../../../icons/ArrowIcon'
6 | import styles from './styles.css'
7 |
8 | interface Props {
9 | isExpanded: boolean
10 | onClick: () => void
11 | }
12 |
13 | const ExpandArrow: React.FC = ({ isExpanded, onClick }) => {
14 | const handleKeyDown = useKeydownFromClick(onClick)
15 |
16 | return (
17 | = ({ history, style }) => {
13 | const title = (
14 |
36 |
40 |
41 | )
42 | }
43 |
--------------------------------------------------------------------------------
/react/components/admin/institutional/Form/utils.tsx:
--------------------------------------------------------------------------------
1 | import { RouteFormData } from 'pages'
2 | import { State } from './index'
3 |
4 | import { slugify } from '../../utils'
5 |
6 | const requiredMessage = 'admin/pages.admin.pages.form.templates.field.required'
7 |
8 | const validateFalsyPath = (path: keyof RouteFormData) => (
9 | data: RouteFormData
10 | ) => !data[path] && { [path]: requiredMessage }
11 |
12 | const validatePathUrl = (path: string) => {
13 | if (!path) return { path: requiredMessage }
14 | if (!path.startsWith('/'))
15 | return {
16 | path: 'admin/pages.admin.pages.form.templates.path.validation-error',
17 | }
18 | if (slugify(path) !== path.slice(1))
19 | return {
20 | path: 'admin/pages.admin.pages.form.templates.path.invalid-format',
21 | }
22 |
23 | return {}
24 | }
25 |
26 | export const getValidateFormState = (prevState: State) => {
27 | return {
28 | ...prevState,
29 | formErrors: {
30 | ...prevState.formErrors,
31 | ...(validatePathUrl(prevState.data.path) as Record),
32 | ...(prevState.isInfoEditable
33 | ? validateFalsyPath('title')(prevState.data)
34 | : {}),
35 | },
36 | }
37 | }
38 |
--------------------------------------------------------------------------------
/react/components/admin/pages/List/Entry.tsx:
--------------------------------------------------------------------------------
1 | import { useKeydownFromClick } from 'keydown-from-click'
2 | import React from 'react'
3 | import { withRuntimeContext } from 'vtex.render-runtime'
4 | import { IconEdit } from 'vtex.styleguide'
5 |
6 | import { ROUTES_FORM } from '../consts'
7 | import { getRouteTitle } from '../utils'
8 |
9 | interface Props {
10 | route: Route
11 | runtime: RenderContext
12 | }
13 |
14 | const Entry = ({ route, runtime }: Props) => {
15 | const handleClick = React.useCallback(() => {
16 | runtime.navigate({
17 | page: ROUTES_FORM,
18 | params: { id: encodeURIComponent(route.routeId) },
19 | })
20 | }, [route.routeId, runtime])
21 |
22 | const handleKeyDown = useKeydownFromClick(handleClick)
23 |
24 | return (
25 | ) => {
23 | e.preventDefault()
24 | onToggle(style)
25 | }
26 |
27 | return (
28 |
29 |
40 | )
41 | }
42 |
43 | StyleButton.defaultProps = {
44 | title: '',
45 | className: '',
46 | }
47 |
48 | export default StyleButton
49 |
--------------------------------------------------------------------------------
/react/components/form/ArrayFieldTemplate/ArrayFieldTemplateItem/icons/IconImage.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | interface Props {
4 | size?: number
5 | stroke?: string
6 | }
7 |
8 | const ImageIcon: React.FunctionComponent = ({ size, stroke }) => (
9 |
39 | )
40 |
41 | ImageIcon.defaultProps = {
42 | size: 16,
43 | stroke: '#979899',
44 | }
45 |
46 | export default React.memo(ImageIcon)
47 |
--------------------------------------------------------------------------------
/react/components/EditorContainer/Styles/StyleEditor/typography/TypographyEditor.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { defineMessages, FormattedMessage } from 'react-intl'
3 |
4 | import AvailableEditor from '../AvailableEditor'
5 | import StyleEditorHeader from '../StyleEditorHeader'
6 | import { EditorPath } from '../StyleEditorRouter'
7 |
8 | defineMessages({
9 | fontFamilyTitle: {
10 | defaultMessage: 'Font Family',
11 | id: 'admin/pages.editor.styles.edit.font-family.title',
12 | },
13 | })
14 |
15 | const TypographyEditor: React.FunctionComponent = () => {
16 | const title = (
17 | = ({ iframeRuntime }) => (
17 | = ({
17 | size,
18 | className,
19 | ...props
20 | }) => {
21 | const newSize = calcIconSize(iconBase, size as number) // TS doesn't detect defaultProps
22 |
23 | return (
24 |
40 | )
41 | }
42 |
43 | DragHandle.defaultProps = {
44 | size: 20,
45 | }
46 |
47 | export default React.memo(DragHandle)
48 |
--------------------------------------------------------------------------------
/react/utils/components/typings.d.ts:
--------------------------------------------------------------------------------
1 | import { JSONSchema6 } from 'json-schema'
2 | import { RenderComponent } from 'vtex.render-runtime'
3 |
4 | export type PropsOrContent = Extension['content'] | Extension['props']
5 |
6 | export interface GetActiveContentIdParams {
7 | extensions: RenderContext['extensions']
8 | treePath: EditorContextType['editTreePath']
9 | }
10 |
11 | export interface GetComponentSchemaParams {
12 | component: RenderComponent | null
13 | contentSchema?: JSONSchema6
14 | propsOrContent: PropsOrContent
15 | runtime: RenderContext
16 | isContent: boolean
17 | }
18 |
19 | export interface GetSchemaPropsOrContentParams {
20 | messages?: RenderContext['messages']
21 | schema?: JSONSchema6Definition
22 | propsOrContent?: Record
23 | }
24 |
25 | export interface GetSchemaPropsOrContentFromRuntimeParams {
26 | component: RenderComponent | null
27 | contentSchema?: JSONSchema6
28 | isContent?: boolean
29 | messages?: RenderContext['messages']
30 | propsOrContent: PropsOrContent
31 | runtime: RenderContext
32 | }
33 |
34 | export interface TranslateMessageParams {
35 | dictionary: Record
36 | id?: string
37 | }
38 |
39 | export interface UpdateExtensionFromFormParams {
40 | data: object
41 | isContent?: boolean
42 | runtime: RenderContext
43 | treePath: string | null
44 | }
45 |
--------------------------------------------------------------------------------
/react/utils/bindings/index.ts:
--------------------------------------------------------------------------------
1 | import React, { useMemo } from 'react'
2 | import { Binding, Tenant } from 'vtex.tenant-graphql'
3 |
4 | const STORE_PRODUCT = 'vtex-storefront'
5 | const LAST_BINDING_KEY = 'vtex.cms-pages.lastBinding'
6 |
7 | export const getStoreBindings = (tenant: Tenant) => {
8 | return tenant.bindings.filter(
9 | binding => binding.targetProduct === STORE_PRODUCT
10 | )
11 | }
12 |
13 | export const getBindingSelectorOptions = (bindings: Binding[]) =>
14 | bindings.map(binding => ({
15 | label: binding.canonicalBaseAddress,
16 | value: binding.id,
17 | }))
18 |
19 | export const useBinding = (): [
20 | Binding | undefined,
21 | React.Dispatch
22 | ] => {
23 | const [binding, setBinding] = React.useState(() => {
24 | const lastBinding = window.localStorage.getItem(LAST_BINDING_KEY)
25 | return lastBinding ? (JSON.parse(lastBinding) as Binding) : undefined
26 | })
27 |
28 | return [
29 | binding,
30 | useMemo(() => {
31 | return (value: Binding | undefined) => {
32 | if (value) {
33 | window.localStorage.setItem(LAST_BINDING_KEY, JSON.stringify(value))
34 | } else {
35 | window.localStorage.removeItem(LAST_BINDING_KEY)
36 | }
37 | setBinding(value)
38 | }
39 | }, [setBinding]),
40 | ]
41 | }
42 |
--------------------------------------------------------------------------------
/react/components/EditorContainer/mutations/SendEventToAudit.tsx:
--------------------------------------------------------------------------------
1 | import { Mutation, MutationFn, MutationResult } from 'react-apollo'
2 |
3 | import SendEventToAudit from '../graphql/SendEventToAudit.graphql'
4 |
5 | interface SendEventToAuditData {
6 | sendEventToAudit: any
7 | }
8 |
9 | interface MetaData {
10 | entityName: string
11 | entityBeforeAction: string
12 | entityAfterAction: string
13 | remoteIpAddress: string
14 | forwardFromVtexUserAgent: string
15 | }
16 |
17 | interface SendEventToAuditInput {
18 | id: string
19 | date: string
20 | mainAccountName: string
21 | accountName: string
22 | subjectId: string
23 | application: string
24 | workspace: string
25 | operation: string
26 | meta: MetaData
27 | }
28 |
29 | interface SendEventToAuditVariables {
30 | input: SendEventToAuditInput
31 | }
32 |
33 | export type SendEventToAuditMutationFn = MutationFn<
34 | SendEventToAuditData,
35 | SendEventToAuditVariables
36 | >
37 |
38 | export interface MutationRenderProps
39 | extends MutationResult {
40 | sendEventToAudit: SendEventToAuditMutationFn
41 | }
42 |
43 | class SendEventToAuditMutation extends Mutation<
44 | SendEventToAuditData,
45 | SendEventToAuditVariables
46 | > {
47 | public static defaultProps = {
48 | mutation: SendEventToAudit,
49 | }
50 | }
51 |
52 | export default SendEventToAuditMutation
53 |
--------------------------------------------------------------------------------
/react/components/EditorContainer/Styles/StyleEditor/typography/FontFamilyEntry.tsx:
--------------------------------------------------------------------------------
1 | import { useKeydownFromClick } from 'keydown-from-click'
2 | import React from 'react'
3 | import { RouteComponentProps, withRouter } from 'react-router'
4 |
5 | import { FontFamily } from '../queries/ListFontsQuery'
6 | import { EditorPath, IdParam } from '../StyleEditorRouter'
7 |
8 | interface Props extends RouteComponentProps {
9 | font: FontFamily
10 | }
11 |
12 | const FontFamilyEntry: React.FunctionComponent = ({ font, history }) => {
13 | const encodedId = React.useMemo(() => encodeURIComponent(font.id), [font.id])
14 |
15 | const isActive = React.useMemo(() => document.URL.includes(encodedId), [
16 | encodedId,
17 | ])
18 |
19 | const handleClick = React.useCallback(
20 | () => history.push(EditorPath.customFontFile.replace(IdParam, encodedId)),
21 | [encodedId, history]
22 | )
23 |
24 | const handleKeyDown = useKeydownFromClick(handleClick)
25 |
26 | return (
27 |
28 | mutation={DeleteRedirect}
29 | update={getStoreUpdater('delete')}
30 | >
31 | {deleteRedirect => (
32 |
33 | mutation={SaveRedirect}
34 | update={getStoreUpdater('save')}
35 | >
36 | {saveRedirect =>
37 | props.children({
38 | deleteRedirect,
39 | saveRedirect,
40 | })
41 | }
42 |
43 | )}
44 |
45 | )
46 |
47 | export default Operations
48 |
--------------------------------------------------------------------------------
/react/components/admin/redirects/Form/typings.d.ts:
--------------------------------------------------------------------------------
1 | import { MutationFn, MutationUpdaterFn } from 'react-apollo'
2 |
3 | import { RedirectsQuery } from '../typings'
4 |
5 | export interface MutationResult {
6 | data?: {
7 | [name: string]: Redirect
8 | }
9 | }
10 |
11 | export type QueryData = RedirectsQuery | null
12 |
13 | export interface RedirectQuery {
14 | redirect: {
15 | get: Redirect
16 | }
17 | }
18 |
19 | export interface DeleteRedirectVariables {
20 | path: string
21 | binding?: string
22 | }
23 |
24 | export interface SaveRedirectVariables {
25 | id?: string
26 | endDate: string | null
27 | from: string
28 | to: string
29 | type: RedirectTypes
30 | binding?: string
31 | }
32 |
33 | interface Mutations {
34 | redirect?: {
35 | delete?: Redirect
36 | save?: Redirect
37 | }
38 | }
39 |
40 | export type StoreUpdaterGetter = (
41 | operation: 'delete' | 'save'
42 | ) => MutationUpdaterFn
43 |
44 | export interface DeleteRedirectData {
45 | redirect: {
46 | delete: Redirect
47 | }
48 | }
49 |
50 | export type DeleteRedirectMutationFn = MutationFn<
51 | DeleteRedirectData,
52 | DeleteRedirectVariables
53 | >
54 |
55 | export interface SaveRedirectData {
56 | redirect: {
57 | save: Redirect
58 | }
59 | }
60 |
61 | export type SaveRedirectMutationFn = MutationFn<
62 | SaveRedirectData,
63 | SaveRedirectVariables
64 | >
65 |
--------------------------------------------------------------------------------
/react/components/HighlightOverlay/hooks/useAutoScroll.ts:
--------------------------------------------------------------------------------
1 | import debounce from 'lodash/debounce'
2 | import { useEffect } from 'react'
3 | import { State } from '../typings'
4 |
5 | interface UseAutoScrollArgs {
6 | highlightTreePath: State['highlightTreePath']
7 | editMode: State['editMode']
8 | visibleElement?: Element
9 | }
10 |
11 | function isElementInViewport(el: Element) {
12 | const rect = el.getBoundingClientRect()
13 |
14 | return (
15 | rect.top >= 0 &&
16 | rect.left >= 0 &&
17 | rect.bottom <=
18 | (window.innerHeight || document.documentElement.clientHeight) &&
19 | rect.right <= (window.innerWidth || document.documentElement.clientWidth)
20 | )
21 | }
22 |
23 | const scrollToElement = debounce((element: Element) => {
24 | if (!isElementInViewport(element)) {
25 | element.scrollIntoView({
26 | behavior: 'smooth',
27 | block: 'center',
28 | inline: 'center',
29 | })
30 | }
31 | }, 75)
32 |
33 | export default function useAutoScroll({
34 | highlightTreePath,
35 | editMode,
36 | visibleElement,
37 | }: UseAutoScrollArgs) {
38 | useEffect(() => {
39 | if (visibleElement && !editMode) {
40 | scrollToElement(visibleElement)
41 | }
42 | }, [visibleElement, editMode])
43 |
44 | useEffect(() => {
45 | if (highlightTreePath === null) {
46 | scrollToElement.cancel()
47 | }
48 | }, [highlightTreePath])
49 | }
50 |
--------------------------------------------------------------------------------
/react/components/admin/utils.ts:
--------------------------------------------------------------------------------
1 | export const slugify = (text: string) => {
2 | const specialChars: { [key: string]: string } = {
3 | à: 'a',
4 | ä: 'a',
5 | á: 'a',
6 | â: 'a',
7 | æ: 'a',
8 | å: 'a',
9 | ë: 'e',
10 | è: 'e',
11 | é: 'e',
12 | ê: 'e',
13 | î: 'i',
14 | ï: 'i',
15 | ì: 'i',
16 | í: 'i',
17 | ò: 'o',
18 | ó: 'o',
19 | ö: 'o',
20 | ô: 'o',
21 | ø: 'o',
22 | ù: 'o',
23 | ú: 'u',
24 | ü: 'u',
25 | û: 'u',
26 | ñ: 'n',
27 | ç: 'c',
28 | ß: 's',
29 | ÿ: 'y',
30 | œ: 'o',
31 | ŕ: 'r',
32 | ś: 's',
33 | ń: 'n',
34 | ṕ: 'p',
35 | ẃ: 'w',
36 | ǵ: 'g',
37 | ǹ: 'n',
38 | ḿ: 'm',
39 | ǘ: 'u',
40 | ẍ: 'x',
41 | ź: 'z',
42 | ḧ: 'h',
43 | '·': '-',
44 | '/': '-',
45 | _: '-',
46 | ',': '-',
47 | ':': '-',
48 | ';': '-',
49 | }
50 |
51 | return text
52 | .toString()
53 | .toLowerCase()
54 | .replace(/\s+/g, '-')
55 | .replace(/./g, target => specialChars[target] || target) // Replace special characters using the hash map
56 | .replace(/&/g, '-and-') // Replace & with 'and'
57 | .replace(/[^\w-]+/g, '') // Remove all non-word chars
58 | .replace(/--+/g, '-') // Replace multiple - with single -
59 | .replace(/^-+/, '') // Trim - from start of text
60 | .replace(/-+$/, '') // Trim - from end of text
61 | }
62 |
--------------------------------------------------------------------------------
/react/components/EditorContainer/Topbar/ContextSelectors/BindingCloning/utils/initialReducerState.ts:
--------------------------------------------------------------------------------
1 | import { Binding } from '../../typings'
2 |
3 | const formatBindings = (binding: Binding, currentBinding: Binding) => ({
4 | label: binding.canonicalBaseAddress,
5 | id: binding.id,
6 | supportedLocales: binding.supportedLocales,
7 | checked: false,
8 | overwrites: false,
9 | isCurrent: currentBinding.id === binding.id,
10 | })
11 |
12 | // Mark items as conflicting or not--that is, if saving on a
13 | // binding will overwrite a page present there or not
14 | export const createInitialCloningState = (
15 | binding: Binding,
16 | currentBinding: Binding,
17 | routeInfo: Route
18 | ) => {
19 | const formattedBinding = formatBindings(binding, currentBinding)
20 |
21 | if (formattedBinding.isCurrent) {
22 | return formattedBinding
23 | }
24 |
25 | // If the page has undefined binding, it is present on all bindings
26 | if (!routeInfo.binding) {
27 | return {
28 | ...formattedBinding,
29 | overwrites: true,
30 | }
31 | }
32 |
33 | if (!routeInfo.conflicts) {
34 | return formattedBinding
35 | }
36 |
37 | if (
38 | routeInfo.conflicts.find(
39 | conflict => formattedBinding.id === conflict.binding
40 | )
41 | ) {
42 | return {
43 | ...formattedBinding,
44 | overwrites: true,
45 | }
46 | }
47 |
48 | return formattedBinding
49 | }
50 |
--------------------------------------------------------------------------------
/react/components/EditorContainer/Sidebar/BlockEditor/BlockConfigurationList/Card/StatusLabel.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { defineMessages, useIntl } from 'react-intl'
3 |
4 | import ContentActiveIcon from '../../../../../icons/ContentActiveIcon'
5 | import ContentInactiveIcon from '../../../../../icons/ContentInactiveIcon'
6 | import ContentScheduledIcon from '../../../../../icons/ContentScheduledIcon'
7 |
8 | interface Props {
9 | type: 'active' | 'inactive' | 'scheduled'
10 | }
11 |
12 | const messages = defineMessages({
13 | active: {
14 | defaultMessage: 'Active',
15 | id: 'admin/pages.editor.component-list.status.active',
16 | },
17 | inactive: {
18 | defaultMessage: 'Inactive',
19 | id: 'admin/pages.editor.component-list.status.inactive',
20 | },
21 | scheduled: {
22 | defaultMessage: 'Scheduled',
23 | id: 'admin/pages.editor.component-list.status.scheduled',
24 | },
25 | })
26 |
27 | const ICON_BY_STATUS = {
28 | active: = ({ type }) => {
34 | const intl = useIntl()
35 |
36 | return (
37 |
7 | export const Link: ReactElement
8 | export const NoSSR: ReactElement
9 | export const RenderContextConsumer: ReactElement
10 | export const canUseDOM: boolean
11 |
12 | export const withRuntimeContext: (
13 | Component: ComponentType
14 | ) => ComponentType<
15 | Pick<
16 | TOriginalProps,
17 | Exclude
18 | >
19 | >
20 |
21 | export declare const useRuntime: () => RenderContext
22 |
23 | interface RenderComponent {
24 | getCustomMessages?: (locale: string) => unknown
25 | schema?: ComponentSchema
26 | getSchema?: (props: object, otherArgs?: unknown) => ComponentSchema
27 | uiSchema?: object
28 | }
29 |
30 | export interface ComponentsRegistry {
31 | [component: string]: RenderComponent
32 | }
33 |
34 | export interface Window extends Window {
35 | __RENDER_8_COMPONENTS__: ComponentsRegistry
36 | }
37 |
38 | export const buildCacheLocator: (
39 | app: string,
40 | type: string,
41 | cacheId: string
42 | ) => string
43 |
44 | const global: Window
45 | }
46 |
--------------------------------------------------------------------------------
/react/components/EditorContainer/Sidebar/BlockEditor/BlockConfigurationList/typings.d.ts:
--------------------------------------------------------------------------------
1 | import { MutationUpdaterFn } from 'react-apollo'
2 | import { ToastConsumerFunctions } from 'vtex.styleguide'
3 |
4 | import {
5 | DeleteContentData,
6 | DeleteContentMutationFn,
7 | } from '../../../mutations/DeleteContent'
8 | import { SendEventToAuditMutationFn } from '../../../mutations/SendEventToAudit'
9 |
10 | interface GetDeleteStoreUpdaterParams
11 | extends Pick {
12 | action: 'reset' | 'delete'
13 | blockId: EditorContextType['blockData']['id']
14 | iframeRuntime: RenderContext
15 | setBlockData: EditorContextType['setBlockData']
16 | }
17 |
18 | export type GetDeleteStoreUpdater = (
19 | params: GetDeleteStoreUpdaterParams
20 | ) => MutationUpdaterFn
21 |
22 | export interface UseListHandlersParams {
23 | activeContentId: ExtensionConfiguration['contentId']
24 | deleteContent: DeleteContentMutationFn
25 | sendEventToAudit: SendEventToAuditMutationFn
26 | iframeRuntime: RenderContext
27 | intl: ReactIntl.InjectedIntl
28 | showToast: ToastConsumerFunctions['showToast']
29 | }
30 |
31 | export type UseListHandlers = (
32 | params: UseListHandlersParams
33 | ) => {
34 | handleConfirmConfigurationDelete: (
35 | configuration: ExtensionConfiguration
36 | ) => void
37 | handleConfigurationDelete: (
38 | configuration: ExtensionConfiguration
39 | ) => Promise
40 | }
41 |
--------------------------------------------------------------------------------
/react/components/EditorContainer/Styles/StyleEditor/typography/TypeTokenDropdown.tsx:
--------------------------------------------------------------------------------
1 | import React, { Dispatch } from 'react'
2 |
3 | import startCase from 'lodash/startCase'
4 | import { Dropdown } from 'vtex.styleguide'
5 |
6 | import { FontFamily } from '../queries/ListFontsQuery'
7 | import { getTypeTokenDropdownOptions } from '../utils/typography'
8 |
9 | function getOnChange(key: keyof Font, dispatch: Dispatch>) {
10 | return (_: React.ChangeEvent, value: string) => {
11 | // Workaround since Dropdown does not work well with nil values
12 | dispatch({ [key]: value === '' ? null : value })
13 | }
14 | }
15 |
16 | function getValue(key: keyof Font, font: Font): string {
17 | return font[key] || ''
18 | }
19 |
20 | interface EntryProps {
21 | font: Font
22 | fontFamilies: FontFamily[]
23 | id: keyof Font
24 | dispatch: Dispatch>
25 | }
26 |
27 | const TypeTokenDropdown: React.FunctionComponent = ({
28 | font,
29 | id,
30 | dispatch,
31 | fontFamilies,
32 | }) => {
33 | return (
34 | = props => {
19 | return (
20 |
21 |
22 | {renameStyle => (
23 |
24 | {updateStyle => (
25 |
26 | {({ showToast }) => (
27 |
37 | )}
38 |
39 | )}
40 |
41 |
42 | )
43 | }
44 |
45 | export default injectIntl(StyleEditor)
46 |
--------------------------------------------------------------------------------
/react/components/EditorContainer/Topbar/DeviceSwitcher/DeviceItem.tsx:
--------------------------------------------------------------------------------
1 | import { createKeydownFromClick } from 'keydown-from-click'
2 | import React from 'react'
3 | import { useIntl } from 'react-intl'
4 | import { Tooltip } from 'vtex.styleguide'
5 |
6 | import { useHover } from '../hooks'
7 | import { BORDER_BY_POSITION, ICON_BY_VIEWPORT } from './consts'
8 | import messages from './messages'
9 |
10 | interface Props {
11 | isActive: boolean
12 | onClick: (e: Pick) => void
13 | position: keyof typeof BORDER_BY_POSITION
14 | type: Viewport
15 | }
16 |
17 | const DeviceItem: React.FC = ({ onClick, position, isActive, type }) => {
18 | const handleKeyDown = createKeydownFromClick(onClick)
19 |
20 | const { handleMouseEnter, handleMouseLeave, hover } = useHover()
21 | const intl = useIntl()
22 |
23 | const Icon = ICON_BY_VIEWPORT[type]
24 |
25 | return (
26 |
27 |
39 |
40 | )
41 | }
42 |
43 | export default DeviceItem
44 |
--------------------------------------------------------------------------------
/react/components/EditorContainer/Topbar/DeviceSwitcher/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | import { useEditorContext } from '../../../EditorContext'
4 |
5 | import { VIEWPORTS_BY_DEVICE } from './consts'
6 | import DeviceItem from './DeviceItem'
7 |
8 | import styles from './DeviceSwitcher.css'
9 |
10 | interface Props {
11 | device: RenderContext['device']
12 | }
13 |
14 | const DeviceSwitcher: React.FC = ({ device }) => {
15 | const editor = useEditorContext()
16 |
17 | const handleClick = React.useCallback(
18 | ({ currentTarget }: Pick) => {
19 | if (currentTarget && currentTarget instanceof HTMLElement) {
20 | editor.setViewport(currentTarget.dataset.type as Viewport)
21 | }
22 | },
23 | [editor]
24 | )
25 |
26 | const viewports = VIEWPORTS_BY_DEVICE[device === 'any' ? 'desktop' : device]
27 |
28 | return (
29 |
13 | ) => void
14 | onMouseLeaveBlock: () => void
15 | }
16 |
17 | const BlockList: React.FC = ({
18 | blocks,
19 | highlightHandler,
20 | onMouseEnterBlock,
21 | onMouseLeaveBlock,
22 | }) => {
23 | const editor = useEditorContext()
24 |
25 | const handleEdit = React.useCallback(
26 | (block: NormalizedBlock) => {
27 | if (block.isEditable) {
28 | editor.editExtensionPoint(block.treePath)
29 |
30 | editor.setIsLoading(true)
31 |
32 | highlightHandler(null)
33 | }
34 | },
35 | [editor, highlightHandler]
36 | )
37 |
38 | return (
39 |
6 | disabled: boolean
7 | extraClasses?: string
8 | onClick: React.MouseEventHandler
9 | onDrop: DropzoneOptions['onDrop']
10 | ref?: React.Ref
11 | }
12 |
13 | const MAX_SIZE = 4 * 1024 * 1024
14 |
15 | const Dropzone = React.forwardRef(
16 | ({ disabled, children, extraClasses, onClick, onDrop }, ref) => {
17 | const { isDragActive } = useDropzone()
18 |
19 | const stlye = isDragActive
20 | ? { borderColor: '#134cd8', width: '14.25rem', height: '7rem' }
21 | : {}
22 |
23 | return (
24 |
31 | {({ getRootProps, getInputProps }) => (
32 |
42 | )
43 | }
44 | )
45 |
46 | Dropzone.displayName = 'Dropzone'
47 |
48 | Dropzone.defaultProps = {
49 | extraClasses: '',
50 | }
51 |
52 | export default Dropzone
53 |
--------------------------------------------------------------------------------
/react/components/Modal.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Button, Modal as StyleguideModal } from 'vtex.styleguide'
3 |
4 | interface Props {
5 | isActionDanger?: boolean
6 | isActionLoading: boolean
7 | isOpen: boolean
8 | onClickAction?: (event: Event) => void
9 | onClickCancel?: (event: Event) => void
10 | onClose: (event?: Event) => void
11 | textButtonAction: string
12 | textButtonCancel: string
13 | textMessage: string | React.ReactNode
14 | title?: string
15 | }
16 |
17 | const Modal = ({
18 | isActionDanger = false,
19 | isActionLoading,
20 | isOpen,
21 | onClickAction,
22 | onClickCancel,
23 | onClose,
24 | textButtonAction,
25 | textButtonCancel,
26 | textMessage,
27 | title,
28 | }: Props) => (
29 |
30 |
54 | )
55 |
56 | export default Modal
57 |
--------------------------------------------------------------------------------
/react/components/admin/pages/Form/typings.d.ts:
--------------------------------------------------------------------------------
1 | import { ConditionsProps } from 'vtex.styleguide'
2 |
3 | export interface DeleteMutationResult {
4 | data?: {
5 | deleteRoute: string
6 | }
7 | }
8 |
9 | export interface SaveMutationResult {
10 | data?: {
11 | saveRoute: Route
12 | }
13 | }
14 |
15 | export interface TemplateMutationResult {
16 | data?: {
17 | availableTemplates: Template[]
18 | }
19 | }
20 |
21 | export type QueryData = RoutesQuery | null
22 |
23 | export interface RoutesQuery {
24 | routes: Route[]
25 | }
26 |
27 | export interface ClientSideUniqueId {
28 | uniqueId: number
29 | operator: ConditionsProps['operator']
30 | }
31 |
32 | interface StatementsOnSaveRoute {
33 | subject: string
34 | verb: string
35 | objectJSON: string
36 | }
37 |
38 | interface ConditionsOnSaveRouteVariables {
39 | id?: string
40 | allMatches: boolean
41 | statements: StatementsOnSaveRoute[]
42 | }
43 |
44 | export interface SaveRouteVariables {
45 | route: Partial &
46 | Pick
47 | }
48 |
49 | export interface DeleteRouteVariables {
50 | uuid: string
51 | }
52 |
53 | export interface DateInfoFormat {
54 | date: string
55 | to: string
56 | from: string
57 | }
58 |
59 | export type DateStatementFormat = Record
60 |
61 | export type FormErrors = Omit, 'pages'> & {
62 | pages?: {
63 | [key: string]: {
64 | template?: string
65 | condition?: string
66 | }
67 | }
68 | }
69 |
--------------------------------------------------------------------------------
/react/components/form/ImageUploader/ImagePreview.tsx:
--------------------------------------------------------------------------------
1 | import { createKeydownFromClick } from 'keydown-from-click'
2 | import React, { useMemo } from 'react'
3 |
4 | import styles from './ImagePreview.css'
5 |
6 | interface Props {
7 | imageUrl: string
8 | children: React.ReactElement
9 | }
10 |
11 | function stopPropagation(
12 | e: Pick, 'stopPropagation'>
13 | ) {
14 | e.stopPropagation()
15 | }
16 |
17 | const stopOnKeyDownPropagation = createKeydownFromClick(stopPropagation)
18 |
19 | const ImagePreview: React.FC = ({ children, imageUrl }) => {
20 | const backgroundImageStyle = useMemo(
21 | () => ({
22 | backgroundImage: `url(${imageUrl}?width=710&height=384&aspect=true)`,
23 | }),
24 | [imageUrl]
25 | )
26 |
27 | return (
28 |
21 | ) => boolean = configuration => configuration.origin !== null
22 |
23 | export const omitUndefined = (obj: Extension['content']) =>
24 | Object.entries(obj).reduce((acc, [currKey, currValue]) => {
25 | if (typeof currValue === 'undefined') {
26 | return acc
27 | }
28 |
29 | return { ...acc, [currKey]: currValue }
30 | }, {})
31 |
32 | export const getConfigurationType: GetConfigurationType = ({
33 | configuration,
34 | activeContentId,
35 | }) => {
36 | if (getIsDefaultContent(configuration)) {
37 | return 'app'
38 | }
39 |
40 | if (activeContentId === configuration.contentId) {
41 | return 'active'
42 | }
43 |
44 | return 'inactive'
45 | }
46 |
47 | export const throttledUpdateExtensionFromForm = throttle(
48 | data => updateExtensionFromForm(data),
49 | 200
50 | )
51 |
--------------------------------------------------------------------------------
/react/components/EditorContainer/Sidebar/FormMetaContext.tsx:
--------------------------------------------------------------------------------
1 | import React, { Component, createContext, useContext } from 'react'
2 |
3 | import { FormMetaContext as FormMetaContextT } from './typings'
4 |
5 | const defaultExternalState: FormMetaContextT = {
6 | getWasModified: () => {
7 | return false
8 | },
9 | setWasModified: () => {
10 | return
11 | },
12 | }
13 |
14 | const FormMetaContext = createContext(defaultExternalState)
15 |
16 | export const useFormMetaContext = () => useContext(FormMetaContext)
17 |
18 | export const FormMetaConsumer = FormMetaContext.Consumer
19 |
20 | interface State extends FormMetaContextT {
21 | isLoading: boolean
22 | wasModified: boolean
23 | }
24 |
25 | export class FormMetaProvider extends Component<{}, State> {
26 | public constructor(props: {}) {
27 | super(props)
28 |
29 | this.state = {
30 | ...defaultExternalState,
31 | getWasModified: this.getWasModified,
32 | isLoading: false,
33 | setWasModified: this.setWasModified,
34 | wasModified: false,
35 | }
36 | }
37 |
38 | public render() {
39 | return (
40 |
41 | {this.props.children}
42 |
43 | )
44 | }
45 |
46 | private getWasModified: State['getWasModified'] = () => this.state.wasModified
47 |
48 | private setWasModified: State['setWasModified'] = (newValue, callback) => {
49 | this.setState({ wasModified: newValue }, () => {
50 | if (callback) {
51 | callback()
52 | }
53 | })
54 | }
55 | }
56 |
--------------------------------------------------------------------------------
/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "vendor": "vtex",
3 | "name": "admin-pages",
4 | "version": "4.59.0",
5 | "title": "VTEX Pages Admin",
6 | "description": "The VTEX Pages CMS admin interface",
7 | "builders": {
8 | "admin": "0.x",
9 | "messages": "1.x",
10 | "react": "3.x",
11 | "docs": "0.x"
12 | },
13 | "dependencies": {
14 | "vtex.apps-graphql": "3.x",
15 | "vtex.file-manager": "0.x",
16 | "vtex.file-manager-graphql": "0.x",
17 | "vtex.native-types": "0.x",
18 | "vtex.pages-graphql": "2.x",
19 | "vtex.pwa-graphql": "1.x",
20 | "vtex.store": "2.x",
21 | "vtex.styles-graphql": "1.x",
22 | "vtex.styleguide": "9.x",
23 | "vtex.messages": "1.x",
24 | "vtex.rewriter": "1.x",
25 | "vtex.tenant-graphql": "0.x",
26 | "vtex.admin-cms": "1.x"
27 | },
28 | "mustUpdateAt": "2018-09-05",
29 | "categories": [],
30 | "registries": [
31 | "smartcheckout"
32 | ],
33 | "settingsSchema": {
34 | "title": "VTEX Pages Admin",
35 | "type": "object",
36 | "properties": {
37 | "copyContentBinding": {
38 | "type": "boolean",
39 | "title": "Copy Content Binding",
40 | "description": "Enables feature to copy pages from one binding to another",
41 | "default": false
42 | }
43 | }
44 | },
45 | "scripts": {
46 | "postreleasy": "vtex publish -r vtex --verbose"
47 | },
48 | "policies": [
49 | {
50 | "name": "vtex.file-manager:saveFileAsync"
51 | }
52 | ],
53 | "$schema": "https://raw.githubusercontent.com/vtex/node-vtex-api/master/gen/manifest.schema"
54 | }
55 |
--------------------------------------------------------------------------------
/react/components/form/MultiSelect.tsx:
--------------------------------------------------------------------------------
1 | import React, { Fragment } from 'react'
2 | import ReactSelect, { Option } from 'react-select'
3 |
4 | interface Props {
5 | disabled?: boolean
6 | id?: string
7 | label?: string
8 | onChange: (newValue: string[]) => void
9 | options: {
10 | enumOptions: Option[]
11 | }
12 | placeholder: string
13 | schema?: {
14 | disabled?: boolean
15 | title: string
16 | }
17 | value: string[]
18 | }
19 |
20 | const MultiSelect: React.FunctionComponent = ({
21 | disabled,
22 | id,
23 | label,
24 | onChange,
25 | options: { enumOptions },
26 | placeholder,
27 | schema,
28 | value,
29 | }) => (
30 |
31 | {(label || (schema && schema.title)) && (
32 |
37 | )}
38 | {
45 | const formattedValue = (optionValues as Option[]).map(
46 | (item: Option) => item.value as string
47 | )
48 | onChange(formattedValue)
49 | }}
50 | options={enumOptions}
51 | placeholder={placeholder}
52 | value={value}
53 | />
54 |
55 | )
56 |
57 | MultiSelect.defaultProps = {
58 | disabled: false,
59 | placeholder: '',
60 | value: [],
61 | }
62 |
63 | export default MultiSelect
64 |
--------------------------------------------------------------------------------
/react/components/admin/redirects/UploadModal/Loading.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { FormattedMessage } from 'react-intl'
3 | import { Button, Progress, Spinner } from 'vtex.styleguide'
4 |
5 | interface Props {
6 | current: number
7 | total: number
8 | onCancel: () => void
9 | }
10 |
11 | const Loading: React.FunctionComponent = ({
12 | current,
13 | onCancel,
14 | total,
15 | }) => {
16 | const percent =
17 | Math.round((current * 100) / total) < 100
18 | ? Math.round((current * 100) / total)
19 | : 100
20 |
21 | return (
22 |
10 | isSave: boolean
11 | shouldUploadRef: MutableRefObject
12 | updateProgress?: (processed: number) => void
13 | }
14 |
15 | export default async function bulkUploadRedirects({
16 | data,
17 | mutation,
18 | shouldUploadRef,
19 | updateProgress = () => {
20 | return undefined
21 | },
22 | }: BulkUploadRedirectsArgs): Promise<{ failedRedirects: Redirect[] }> {
23 | let failedRedirects: Redirect[] = []
24 | let processedCount = 0
25 |
26 | const redirectBatches = splitEvery(MAX_REDIRECTS_PER_REQUEST, data)
27 |
28 | for (const payload of redirectBatches) {
29 | if (!shouldUploadRef.current) {
30 | break
31 | }
32 |
33 | for (let i = 1; i <= NUMBER_OF_RETRIES; i++) {
34 | try {
35 | await mutation(payload)
36 | processedCount += payload.length
37 | updateProgress(processedCount)
38 | break
39 | } catch (e) {
40 | await new Promise(res => {
41 | setTimeout(() => res(), i * 750)
42 | })
43 | if (i === NUMBER_OF_RETRIES) {
44 | failedRedirects = failedRedirects.concat(payload)
45 | }
46 | }
47 | }
48 |
49 | await new Promise(res => {
50 | setTimeout(() => res(), 750)
51 | })
52 | }
53 |
54 | return { failedRedirects }
55 | }
56 |
--------------------------------------------------------------------------------
/react/components/EditorContainer/Sidebar/styles.css:
--------------------------------------------------------------------------------
1 | .transition-editor-enter {
2 | transform: translateX(18em);
3 | }
4 |
5 | .transition-editor-enter-active {
6 | transition: transform 250ms ease-in;
7 | transform: translateX(0);
8 | }
9 |
10 | .transition-editor-enter-done {
11 | transform: translateX(0);
12 | }
13 |
14 | .transition-editor-exit {
15 | transform: translateX(0);
16 | }
17 |
18 | .transition-editor-exit-active {
19 | transition: transform 250ms ease-in;
20 | transform: translateX(18em);
21 | }
22 |
23 | .transition-editor-exit-done {
24 | transform: translateX(18em);
25 | }
26 |
27 | .transition-selector-enter {
28 | transform: translateX(0);
29 | }
30 |
31 | .transition-selector-enter-active {
32 | transition: transform 250ms ease-in;
33 | transform: translateX(-18em);
34 | }
35 |
36 | .transition-selector-enter-done {
37 | transform: translateX(-18em);
38 | }
39 |
40 | .transition-selector-exit {
41 | transform: translateX(-18em);
42 | }
43 |
44 | .transition-selector-exit-active {
45 | transition: transform 250ms ease-in;
46 | transform: translateX(0);
47 | }
48 |
49 | .transition-selector-exit-done {
50 | transform: translateX(0);
51 | }
52 |
53 | /* Non small */
54 | @media screen and (min-width: 30em) {
55 | .admin-sidebar {
56 | border-left: 2px solid #f2f4f5;
57 | }
58 |
59 | .admin-sidebar::-webkit-scrollbar,
60 | .admin-sidebar::-webkit-scrollbar-track {
61 | width: 2px;
62 | background: #f2f4f5;
63 | }
64 |
65 | .admin-sidebar::-webkit-scrollbar-thumb {
66 | width: 2px;
67 | background: rgba(0, 0, 0, 0.2);
68 | border-radius: 2px;
69 | }
70 | }
71 |
--------------------------------------------------------------------------------
/react/components/EditorContainer/Topbar/SidebarVisibilityToggle.tsx:
--------------------------------------------------------------------------------
1 | import { createKeydownFromClick } from 'keydown-from-click'
2 | import React from 'react'
3 | import { InjectedIntlProps, injectIntl } from 'react-intl'
4 | import { Tooltip } from 'vtex.styleguide'
5 |
6 | import { useEditorContext } from '../../EditorContext'
7 |
8 | import { useHover } from './hooks'
9 | import IconView from './icons/IconView'
10 |
11 | const SidebarVisibilityToggle: React.FC = ({ intl }) => {
12 | const editor = useEditorContext()
13 |
14 | const { handleMouseEnter, handleMouseLeave, hover } = useHover()
15 |
16 | const handleSidebarVisibilityToggle = editor.toggleSidebarVisibility
17 |
18 | const handleSidebarVisibilityToggleKeyDown = createKeydownFromClick(
19 | handleSidebarVisibilityToggle
20 | )
21 |
22 | return (
23 |
30 |
43 |
44 | )
45 | }
46 |
47 | export default injectIntl(SidebarVisibilityToggle)
48 |
--------------------------------------------------------------------------------
/react/components/EditorContainer/Sidebar/BlockEditor/BlockConfigurationEditor/ConditionControls/ScopeSelector/ScopeSelector.tsx:
--------------------------------------------------------------------------------
1 | import React, { Fragment } from 'react'
2 | import { InjectedIntlProps, injectIntl } from 'react-intl'
3 | import { RadioGroup } from 'vtex.styleguide'
4 |
5 | import ConditionTitle from '../ConditionTitle'
6 | import { getScopeStandardOptions } from './utils'
7 |
8 | interface CustomProps {
9 | onChange: (event: React.ChangeEvent) => void
10 | pageContext: PageContext
11 | scope: ConfigurationScope
12 | isSitewide: boolean
13 | }
14 |
15 | type Props = CustomProps & InjectedIntlProps
16 |
17 | const ScopeSelector: React.FunctionComponent = ({
18 | intl,
19 | isSitewide,
20 | onChange,
21 | pageContext,
22 | scope,
23 | }) => {
24 | const standardOptions = getScopeStandardOptions(intl, pageContext)
25 |
26 | return (
27 |
28 |
51 | )
52 | }
53 |
54 | export default injectIntl(ScopeSelector)
55 |
--------------------------------------------------------------------------------
/react/components/admin/pages/List/Section.tsx:
--------------------------------------------------------------------------------
1 | import React, { Fragment } from 'react'
2 | import { FormattedMessage } from 'react-intl'
3 | import { withRuntimeContext } from 'vtex.render-runtime'
4 | import { Box, Button } from 'vtex.styleguide'
5 |
6 | import { NEW_ROUTE_ID, ROUTES_FORM } from '../consts'
7 | import SeparatorWithLine from '../SeparatorWithLine'
8 |
9 | import Entry from './Entry'
10 |
11 | interface Props {
12 | hasCreateButton?: boolean
13 | routes: Route[]
14 | runtime: RenderContext
15 | titleId: string
16 | }
17 |
18 | const Section = ({ hasCreateButton, routes, runtime, titleId }: Props) => (
19 |
20 |
46 |
49 | ))}
50 |
51 | )
52 |
53 | export default withRuntimeContext(Section)
54 |
--------------------------------------------------------------------------------
/react/components/EditorContainer/Styles/StyleEditor/mutations/DeleteFontFamily.ts:
--------------------------------------------------------------------------------
1 | import { DataProxy } from 'apollo-cache'
2 | import { Mutation, MutationFn, QueryResult } from 'react-apollo'
3 |
4 | import DeleteFontFamilyMutation from '../graphql/DeleteFontFamily.graphql'
5 | import ListFonts from '../graphql/ListFonts.graphql'
6 | import { ListFontsData } from '../queries/ListFontsQuery'
7 |
8 | interface FontFamilyVariables {
9 | id: string
10 | }
11 |
12 | export interface DeleteFontFamilyData {
13 | deleteFontFamily: {
14 | id: string
15 | }
16 | }
17 |
18 | export type DeleteFontFamilyFn = MutationFn<
19 | DeleteFontFamilyData,
20 | FontFamilyVariables
21 | >
22 |
23 | type DeleteFontFamilyResult = QueryResult
24 |
25 | const updateFontsAfterDelete = (
26 | cache: DataProxy,
27 | result: DeleteFontFamilyResult
28 | ) => {
29 | const listData = cache.readQuery({ query: ListFonts })
30 | if (
31 | result.data == null ||
32 | result.data.deleteFontFamily == null ||
33 | listData == null
34 | ) {
35 | return
36 | }
37 | const { listFonts: families } = listData
38 | const { id: removedId } = result.data.deleteFontFamily
39 | const currentFonts = families.filter(family => family.id !== removedId)
40 | cache.writeQuery({
41 | data: { listFonts: currentFonts },
42 | query: ListFonts,
43 | })
44 | }
45 |
46 | class DeleteFontFamily extends Mutation<
47 | DeleteFontFamilyData,
48 | FontFamilyVariables
49 | > {
50 | public static defaultProps = {
51 | mutation: DeleteFontFamilyMutation,
52 | update: updateFontsAfterDelete,
53 | }
54 | }
55 |
56 | export default DeleteFontFamily
57 |
--------------------------------------------------------------------------------
/react/components/EditorContainer/Topbar/BlockPicker.tsx:
--------------------------------------------------------------------------------
1 | import { useKeydownFromClick } from 'keydown-from-click'
2 | import React from 'react'
3 | import { InjectedIntlProps, injectIntl } from 'react-intl'
4 | import { Tooltip } from 'vtex.styleguide'
5 |
6 | import { useEditorContext } from '../../EditorContext'
7 | import { useHover } from './hooks'
8 | import IconPicker from './icons/IconPicker'
9 |
10 | const BlockPicker: React.FC = ({ intl }) => {
11 | const editor = useEditorContext()
12 |
13 | const { handleMouseEnter, handleMouseLeave, hover } = useHover()
14 |
15 | const handleEditModeToggle = editor.toggleEditMode
16 |
17 | const handleKeyPress = useKeydownFromClick(handleEditModeToggle)
18 |
19 | return (
20 |
27 |
42 |
43 | )
44 | }
45 |
46 | export default injectIntl(BlockPicker)
47 |
--------------------------------------------------------------------------------
/react/PageEditor.tsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect } from 'react'
2 | import { useRuntime } from 'vtex.render-runtime'
3 |
4 | import StoreIframe from './components/EditorContainer/StoreIframe'
5 | import EditorProvider from './components/EditorProvider'
6 | import { TemporaryAlert } from './components/TemporaryAlert'
7 | import { useAdminLoadingContext } from './utils/AdminLoadingContext'
8 |
9 | interface Props extends RenderContextProps {
10 | page: string
11 | params: {
12 | targetPath: string
13 | }
14 | query?: Record[]
15 | }
16 |
17 | const PageEditor: React.FC = props => {
18 | const { page, params, query } = props
19 |
20 | const queryString =
21 | query === undefined || query === null
22 | ? ''
23 | : `?${Object.entries(query)
24 | .map(([key, value]) => `${key}=${value}`)
25 | .join('&')}`
26 |
27 | const runtime = useRuntime()
28 |
29 | if (page.includes('storefront')) {
30 | runtime.navigate({
31 | page: page.replace('storefront', 'site-editor'),
32 | params,
33 | })
34 | }
35 |
36 | const isSiteEditor = React.useMemo(() => page.includes('site-editor'), [page])
37 |
38 | const path = params?.targetPath && `${params.targetPath}${queryString ?? ''}`
39 |
40 | const { stopLoading } = useAdminLoadingContext()
41 |
42 | useEffect(() => {
43 | stopLoading()
44 | }, [stopLoading])
45 |
46 | return (
47 |
6 |
25 |
26 | )
27 |
28 | export default TemplateIcon
29 |
--------------------------------------------------------------------------------
/react/components/DomainMessages/typings.d.ts:
--------------------------------------------------------------------------------
1 | import ApolloClient from 'apollo-client'
2 | import { InjectedIntl } from 'react-intl'
3 |
4 | export interface Props {
5 | runtime: RenderContext
6 | domain: string
7 | client: ApolloClient
21 | {iconByKind[kind]}
22 |
23 | {title}
24 |
25 | {text}
26 |
27 |
23 |
25 | ) : null}
26 |
27 |
28 | {children}
29 |
30 |
31 | )
32 | }
33 |
34 | export default React.memo(AbsoluteLoader)
35 |
--------------------------------------------------------------------------------
/react/components/admin/redirects/List/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Query } from 'react-apollo'
3 | import { Tenant } from 'vtex.tenant-graphql'
4 |
5 | import Loader from '../../../Loader'
6 | import List, { Props } from './List'
7 | import TenantInfo from '../../../../queries/TenantInfo.graphql'
8 | import { getStoreBindings } from '../../../../utils/bindings'
9 |
10 | const ListWrapper: React.FC
12 |
24 | )
25 | }
26 |
27 | export default React.memo(EmptyState)
28 |
--------------------------------------------------------------------------------
/react/components/admin/pages/utils.ts:
--------------------------------------------------------------------------------
1 | import startCase from 'lodash/startCase'
2 |
3 | type NewRouteTypeArg = Pick
16 |
23 |
17 |
19 |
20 |
22 | {message}
} 16 |
18 |
29 |
30 |
31 | )
32 |
33 | export default UnallowedWarning
34 |
--------------------------------------------------------------------------------
/react/components/admin/redirects/consts.ts:
--------------------------------------------------------------------------------
1 | export const BASE_URL = '/admin/app/cms/redirects'
2 | export const CSV_SEPARATOR = ';'
3 |
4 | export const getCSVHeader = (hasMultipleBindings: boolean) =>
5 | hasMultipleBindings ? 'from;to;type;binding;endDate' : 'from;to;type;endDate'
6 |
7 | const CSV_SINGLE_BINDING_TEMPLATE = `/temporary;/;TEMPORARY;
8 | /temporary-with-date;/;TEMPORARY;2025-01-01T00:00:00.000Z;
9 | /permanent;/;PERMANENT;
10 | `
11 | const CSV_MULTIPLE_BINDING_TEMPLATE = `/temporary;/;TEMPORARY;
12 | /temporary-with-date;/;TEMPORARY;1234_binding_id;2025-01-01T00:00:00.000Z;
13 | /permanent;/;PERMANENT;123_binding_id;
14 | `
15 |
16 | export const getCSVTemplate = (hasMultipleBindings: boolean) =>
17 | `${getCSVHeader(hasMultipleBindings)}
18 | ${
19 | hasMultipleBindings
20 | ? CSV_MULTIPLE_BINDING_TEMPLATE
21 | : CSV_SINGLE_BINDING_TEMPLATE
22 | }`
23 |
24 | export const NEW_REDIRECT_ID = 'new'
25 |
26 | export const PAGINATION_START = 0
27 | export const PAGINATION_STEP = 10
28 | export const REDIRECTS_LIMIT = 500
29 |
30 | export const WRAPPER_PATH = 'redirects'
31 |
--------------------------------------------------------------------------------
/react/components/EditorContainer/Styles/StyleEditor/typography/TypeTokensEntry.tsx:
--------------------------------------------------------------------------------
1 | import { useKeydownFromClick } from 'keydown-from-click'
2 | import startCase from 'lodash/startCase'
3 | import React from 'react'
4 | import { RouteComponentProps } from 'react-router'
5 |
6 | import { EditorPath, IdParam } from '../StyleEditorRouter'
7 |
8 | interface EntryProps {
9 | name: string
10 | history: RouteComponentProps['history']
11 | }
12 |
13 | const TypeTokenEntry: React.FunctionComponent
32 | {startCase(name)}
33 |
34 | )
35 | }
36 |
37 | export default TypeTokenEntry
38 |
--------------------------------------------------------------------------------
/react/components/EditorContainer/Styles/typings/config.d.ts:
--------------------------------------------------------------------------------
1 | import {
2 | FontFamilyProperty,
3 | FontSizeProperty,
4 | FontWeightProperty,
5 | LetterSpacingProperty,
6 | TextTransformProperty,
7 | } from 'csstype'
8 |
9 | declare global {
10 | interface Font {
11 | fontFamily: FontFamilyProperty
12 | fontWeight: FontWeightProperty
13 | fontSize: FontSizeProperty
14 | textTransform: TextTransformProperty
15 | letterSpacing: LetterSpacingProperty
16 | }
17 |
18 | interface Tokens {
19 | [token: string]: string
20 | }
21 |
22 | interface SemanticColors {
23 | [field: string]: Tokens
24 | }
25 |
26 | interface TypographyStyles {
27 | heading_1: Font
28 | heading_2: Font
29 | heading_3: Font
30 | heading_4: Font
31 | heading_5: Font
32 | heading_6: Font
33 | body: Font
34 | small: Font
35 | mini: Font
36 | action: Font
37 | action__small: Font
38 | action__large: Font
39 | code: Font
40 | }
41 |
42 | interface TachyonsConfig {
43 | semanticColors: SemanticColors
44 | typography: {
45 | styles: TypographyStyles
46 | }
47 | }
48 | }
49 |
--------------------------------------------------------------------------------
/react/components/admin/TargetPathContext.tsx:
--------------------------------------------------------------------------------
1 | import React, { ComponentType, useContext } from 'react'
2 |
3 | export interface TargetPathContextProps {
4 | targetPath: string
5 | setTargetPath: (s: string) => void
6 | }
7 |
8 | const TargetPathContext = React.createContext
30 |
31 |
35 | )
36 | }
37 |
38 | export default withRouter(AvailableEditor)
39 |
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/bug_report.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: Bug report
3 | about: Create a report to help us improve
4 | labels: bug
5 | ---
6 |
7 | **Describe the bug**
8 | A clear and concise description of what the bug is.
9 |
10 | **To Reproduce**
11 | Steps to reproduce the behavior:
12 |
13 | 1. Go to '...'
14 | 2. Click on '....'
15 | 3. Scroll down to '....'
16 | 4. See error
17 |
18 | **Expected behavior**
19 | A clear and concise description of what you expected to happen.
20 |
21 | **Screenshots**
22 | If applicable, add screenshots to help explain your problem.
23 |
24 | **Desktop environment:**
25 |
26 |
33 |
34 | **Smartphone environment:**
35 |
36 | - Device: [e.g. iPhone6]
37 | - OS: [e.g. iOS8.1]
38 | - Browser [e.g. stock browser, safari]
39 | - Version [e.g. 22]
40 |
41 | **Additional context**
42 | Add any other context about the problem here.
43 |
--------------------------------------------------------------------------------
/react/components/RichTextEditor/style.css:
--------------------------------------------------------------------------------
1 | .RichEditor_root {
2 | background: #fff;
3 | border: 1px solid #ddd;
4 | font-size: 14px;
5 | padding: 15px;
6 | }
7 |
8 | .RichEditor_editor {
9 | border-top: 1px solid #ddd;
10 | cursor: text;
11 | font-size: 16px;
12 | min-height: 20rem;
13 | padding: 10px;
14 | }
15 |
16 | .RichEditor_editor div[data-contents='true'] {
17 | min-height: 20em;
18 | }
19 |
20 | .RichEditor_editor .public-DraftEditorPlaceholder-root,
21 | .RichEditor_editor .public-DraftEditor-content {
22 | margin: 0 -15px -15px;
23 | padding: 15px;
24 | }
25 |
26 | .RichEditor_hidePlaceholder .public-DraftEditorPlaceholder-root {
27 | display: none;
28 | }
29 |
30 | .RichEditor_editor .RichEditor_blockquote {
31 | border-left: 5px solid #eee;
32 | color: #666;
33 | font-family: 'Hoefler Text', 'Georgia', serif;
34 | font-style: italic;
35 | margin: 16px 0;
36 | padding: 10px 20px;
37 | }
38 |
39 | .RichEditor_editor .public-DraftStyleDefault-pre {
40 | background-color: rgba(0, 0, 0, 0.05);
41 | font-family: 'Inconsolata', 'Menlo', 'Consolas', monospace;
42 | font-size: 16px;
43 | padding: 20px;
44 | }
45 |
--------------------------------------------------------------------------------
/react/components/admin/pages/Form/stateHandlers/getAddConditionalTemplateState.ts:
--------------------------------------------------------------------------------
1 | import { PagesFormData } from 'pages'
2 |
3 | import { State } from '../index'
4 |
5 | const getMaxUniqueId: (pages: PagesFormData[]) => number = pages => {
6 | return pages.reduce((acc, { uniqueId: currentValue }) => {
7 | if (acc < currentValue) {
8 | return currentValue
9 | }
10 | return acc
11 | }, -1)
12 | }
13 |
14 | export const getAddConditionalTemplateState = (prevState: State) => {
15 | const maxUniqueId = getMaxUniqueId(prevState.data.pages)
16 | const now = new Date()
17 | const newPage: PagesFormData = {
18 | condition: {
19 | allMatches: true,
20 | id: '',
21 | statements: [
22 | {
23 | error: '',
24 | object: { date: now },
25 | subject: 'date',
26 | verb: 'is',
27 | },
28 | ],
29 | },
30 | operator: 'all',
31 | pageId: '',
32 | template: '',
33 | uniqueId: maxUniqueId + 1,
34 | }
35 |
36 | return {
37 | ...prevState,
38 | data: { ...prevState.data, pages: prevState.data.pages.concat(newPage) },
39 | formErrors: {},
40 | }
41 | }
42 |
--------------------------------------------------------------------------------
/react/components/admin/redirects/UploadModal/UploadPrompt/validateRedirect.ts:
--------------------------------------------------------------------------------
1 | import { defineMessages, IntlShape } from 'react-intl'
2 |
3 | export function isRedirectType(obj: unknown): obj is Redirect {
4 | return (
5 | typeof obj === 'object' &&
6 | obj !== null &&
7 | 'endDate' in obj &&
8 | 'from' in obj &&
9 | 'to' in obj &&
10 | 'type' in obj &&
11 | typeof (obj as Record
24 |
34 | )
35 | }
36 |
37 | export default ExpandArrow
38 |
--------------------------------------------------------------------------------
/react/components/EditorContainer/Styles/StyleList/icons/CreateNewIcon.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | // TODO: Use tachyons on stroke color
4 | const CreateNewIcon: React.FunctionComponent = () => (
5 |
37 | )
38 |
39 | export default CreateNewIcon
40 |
--------------------------------------------------------------------------------
/react/components/EditorContainer/Styles/StyleEditor/typography/TypeTokensList.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { FormattedMessage } from 'react-intl'
3 | import { RouteComponentProps } from 'react-router'
4 |
5 | import StyleEditorHeader from '../StyleEditorHeader'
6 | import TypeTokenEntry from './TypeTokensEntry'
7 |
8 | interface Props extends RouteComponentProps {
9 | style: Style
10 | }
11 |
12 | const TypeTokensList: React.FunctionComponent
25 |
33 |
30 |
32 |
29 | {tokens.map(({ name }) => (
30 |
33 |
34 | )
35 | }
36 |
37 | export default TypeTokensList
38 |
--------------------------------------------------------------------------------
/react/components/HighlightOverlay/OverlayMask/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { CSSTransition } from 'react-transition-group'
3 | import styles from './OverlayMask.css'
4 |
5 | interface Props {
6 | isActive: boolean
7 | style?: React.CSSProperties
8 | }
9 |
10 | const classNames = {
11 | enter: styles['overlay-mask-enter'],
12 | enterActive: styles['overlay-mask-enter-active'],
13 | enterDone: styles['overlay-mask-enter-done'],
14 | exit: styles['overlay-mask-exit'],
15 | exitActive: styles['overlay-mask-exit-active'],
16 | exitDone: styles['overlay-mask-exit-done'],
17 | }
18 |
19 | const timeout = {
20 | enter: 300,
21 | exit: 150,
22 | }
23 |
24 | export default function OverlayMask({ style, isActive }: Props) {
25 | const overlayMaskStyle: React.CSSProperties = isActive
26 | ? {}
27 | : { pointerEvents: 'none' }
28 |
29 | return (
30 |
26 |
37 | )
38 | }
39 |
40 | export default withRuntimeContext(Entry)
41 |
--------------------------------------------------------------------------------
/react/components/RichTextEditor/StyleButton.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | import { Tooltip } from 'vtex.styleguide'
4 |
5 | interface StyleBtnProps {
6 | label: string | JSX.Element
7 | title?: string | JSX.Element
8 | active: boolean
9 | onToggle: (style: string | null) => void
10 | style: string | null
11 | className?: string
12 | }
13 |
14 | const StyleButton = ({
15 | active,
16 | onToggle,
17 | label,
18 | style,
19 | className,
20 | title,
21 | }: StyleBtnProps) => {
22 | const handleToggle = (e: React.MouseEvent{getRouteTitle(route)}
27 |
34 |
36 |
37 | {label}
38 |
39 |
27 |
36 |
37 | )
38 | }
39 |
40 | export default TypographyEditor
41 |
--------------------------------------------------------------------------------
/react/components/admin/institutional/List/Entry.tsx:
--------------------------------------------------------------------------------
1 | import { useKeydownFromClick } from 'keydown-from-click'
2 | import React from 'react'
3 | import { withRuntimeContext } from 'vtex.render-runtime'
4 | import { IconEdit } from 'vtex.styleguide'
5 |
6 | import { INSTITUTIONAL_ROUTES_FORM } from '../../pages/consts'
7 | import { getRouteTitle } from '../../pages/utils'
8 |
9 | interface Props {
10 | route: Route
11 | runtime: RenderContext
12 | }
13 |
14 | const Entry = ({ route, runtime }: Props) => {
15 | const handleClick = React.useCallback(() => {
16 | runtime.navigate({
17 | page: INSTITUTIONAL_ROUTES_FORM,
18 | params: { id: encodeURIComponent(route.routeId) },
19 | })
20 | }, [route.routeId, runtime])
21 |
22 | const handleKeyDown = useKeydownFromClick(handleClick)
23 |
24 | return (
25 |
26 |
37 | )
38 | }
39 |
40 | export default withRuntimeContext(Entry)
41 |
--------------------------------------------------------------------------------
/react/components/EditorContainer/Topbar/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { ToastConsumer } from 'vtex.styleguide'
3 |
4 | import BlockPicker from './BlockPicker'
5 | import ContextSelectors from './ContextSelectors'
6 | import DeviceSwitcher from './DeviceSwitcher'
7 | import SidebarVisibilityToggle from './SidebarVisibilityToggle'
8 | import UrlInput from './UrlInput'
9 |
10 | import styles from '../EditorContainer.css'
11 |
12 | interface Props {
13 | iframeRuntime: RenderContext
14 | }
15 |
16 | const Topbar: React.FunctionComponent{getRouteTitle(route)}
27 |
34 |
36 |
20 |
21 | {({ showToast }) => (
22 |
25 |
26 |
42 | )
43 |
44 | export default Topbar
45 |
--------------------------------------------------------------------------------
/react/components/form/ArrayFieldTemplate/ItemTransitions.css:
--------------------------------------------------------------------------------
1 | .item-enter {
2 | transform: translateX(36rem);
3 | }
4 |
5 | .item-enter-active {
6 | transform: translateX(18rem);
7 | transition: transform 250ms ease-in-out;
8 | }
9 |
10 | .item-enter-done {
11 | transform: translateX(18rem);
12 | }
13 |
14 | .item-exit {
15 | transform: translateX(18rem);
16 | }
17 |
18 | .item-exit-active {
19 | transform: translateX(36rem);
20 | transition: transform 250ms ease-in-out;
21 | }
22 |
23 | .item-exit-done {
24 | transform: translateX(36rem);
25 | }
26 |
27 | .item-depth-enter {
28 | transform: translateX(18rem);
29 | }
30 |
31 | .item-depth-enter-active {
32 | transform: translateX(0rem);
33 | transition: transform 250ms ease-in-out;
34 | }
35 |
36 | .item-depth-enter-done {
37 | transform: translateX(0rem);
38 | }
39 |
40 | /* So the hidden item doesn't affect the height of the current form */
41 | .item-depth-enter-done > :global(.vtex-admin-pages-4-x .form-group) {
42 | height: 0;
43 | overflow: hidden;
44 | }
45 |
46 | .item-depth-exit {
47 | transform: translateX(0rem);
48 | }
49 |
50 | .item-depth-exit-active {
51 | transform: translateX(18rem);
52 | transition: transform 250ms ease-in-out;
53 | }
54 |
55 | .item-depth-exit-done {
56 | transform: translateX(18rem);
57 | }
58 |
--------------------------------------------------------------------------------
/react/components/icons/DragHandle.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { calcIconSize } from './utils'
3 |
4 | import styles from './DragHandle.css'
5 |
6 | interface Props {
7 | className?: string
8 | size?: number
9 | }
10 |
11 | const iconBase = {
12 | height: 12,
13 | width: 6,
14 | }
15 |
16 | const DragHandle: React.FunctionComponent
27 |
29 |
30 |
31 |
33 |
34 |
35 |
37 |
38 |
39 |
41 |
35 | {font.fontFamily}
36 |
37 | )
38 | }
39 |
40 | export default withRouter(FontFamilyEntry)
41 |
--------------------------------------------------------------------------------
/react/components/admin/redirects/Form/Operations.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Mutation } from 'react-apollo'
3 |
4 | import DeleteRedirect from '../../../../queries/DeleteRedirect.graphql'
5 | import SaveRedirect from '../../../../queries/SaveRedirect.graphql'
6 |
7 | import {
8 | DeleteRedirectData,
9 | DeleteRedirectMutationFn,
10 | DeleteRedirectVariables,
11 | SaveRedirectData,
12 | SaveRedirectMutationFn,
13 | SaveRedirectVariables,
14 | } from './typings'
15 | import { getStoreUpdater } from './utils'
16 |
17 | interface Props {
18 | children: (mutations: OperationsObj) => React.ReactNode
19 | }
20 |
21 | interface OperationsObj {
22 | deleteRedirect: DeleteRedirectMutationFn
23 | saveRedirect: SaveRedirectMutationFn
24 | }
25 |
26 | const Operations = (props: Props) => (
27 |
38 | {ICON_BY_STATUS[type]}
39 |
41 | )
42 | }
43 |
44 | export default StatusLabel
45 |
--------------------------------------------------------------------------------
/react/typings/vtex.render-runtime.d.ts:
--------------------------------------------------------------------------------
1 | /* Typings for `render-runtime` */
2 | declare module 'vtex.render-runtime' {
3 | import { Component, ComponentType, ReactElement } from 'react'
4 |
5 | export const ExtensionPoint: ReactElement
6 | export const Helmet: ComponentType{intl.formatMessage(messages[type])}
40 |
35 | {startCase(id)}
36 |
43 | )
44 | }
45 |
46 | export default TypeTokenDropdown
47 |
--------------------------------------------------------------------------------
/react/components/form/ArrayFieldTemplate/styles.css:
--------------------------------------------------------------------------------
1 | .accordion-item {
2 | background-color: white;
3 | }
4 |
5 | .accordion-item-settings {
6 | padding: 2rem;
7 | transform: translateX(0rem) !important;
8 | }
9 |
10 | .accordion-list-container--sorting .accordion-item {
11 | pointer-events: none;
12 | }
13 |
14 | .accordion-item--dragged {
15 | z-index: 999;
16 | }
17 |
18 | .accordion-label {
19 | display: flex;
20 | position: relative;
21 | margin: 0 -24px 0;
22 | padding: 12px 16px;
23 | cursor: pointer;
24 | user-select: none;
25 | }
26 |
27 | .accordion-item--dragged .accordion-label {
28 | background-color: #fff;
29 | }
30 |
31 | .accordion-item--handle-hidden .accordion-label {
32 | padding-left: 16px;
33 | }
34 |
35 | .accordion-item--dragged .accordion-label {
36 | box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.2);
37 | }
38 |
39 | .accordion-label-title {
40 | color: #727273;
41 | font-weight: bold;
42 | cursor: pointer;
43 | }
44 |
45 | .accordion-item--dragged .accordion-handle,
46 | .accordion-label:hover .accordion-handle {
47 | display: block;
48 | }
49 |
50 | .drag-handle-container {
51 | transform: translateZ(0);
52 | transition: transform ease-in-out 100ms;
53 | }
54 |
55 | .drag-handle-container:hover,
56 | .accordion-item--dragged .drag-handle-container {
57 | transform: scale(1.1);
58 | }
59 |
60 | .drag-handle-container:hover circle,
61 | .accordion-item--dragged .drag-handle-container circle {
62 | fill: #368df7;
63 | }
64 |
--------------------------------------------------------------------------------
/react/components/EditorContainer/Styles/StyleEditor/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { createMemoryHistory } from 'history'
3 | import { injectIntl, IntlShape } from 'react-intl'
4 | import { Router } from 'react-router-dom'
5 | import { ToastConsumer } from 'vtex.styleguide'
6 |
7 | import RenameStyleMutation from './mutations/RenameStyle'
8 | import UpdateStyleMutation from './mutations/UpdateStyle'
9 | import StyleEditorHooks from './StyleEditorHooks'
10 |
11 | interface Props {
12 | intl: IntlShape
13 | setStyleAsset: (asset: StyleAssetInfo) => void
14 | stopEditing: () => void
15 | style: Style
16 | }
17 |
18 | const StyleEditor: React.FunctionComponent
30 | {viewports.map((deviceType, index) => {
31 | const isLast = index === viewports.length - 1
32 |
33 | return (
34 |
45 | )
46 | }
47 |
48 | export default DeviceSwitcher
49 |
--------------------------------------------------------------------------------
/react/components/EditorContainer/Sidebar/BlockSelector/BlockList/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | import { useEditorContext } from '../../../../EditorContext'
4 | import { NormalizedBlock } from '../typings'
5 | import BlockListItem from './BlockListItem'
6 |
7 | interface Props {
8 | blocks: NormalizedBlock[]
9 | highlightHandler: (treePath: string | null) => void
10 | iframeRuntime: RenderContextProps['runtime']
11 | onMouseEnterBlock: (
12 | event: React.MouseEvent
35 |
42 | )
43 | })}
44 | -
40 | {blocks.map((block, index) => (
41 |
onClick(e), stlye })}
34 | className={`w-100 h4 br2 ${extraClasses}`}
35 | ref={ref}
36 | >
37 |
38 | {children}
39 |
40 | )}
41 | {textMessage}
31 | 32 |
33 |
53 |
34 |
42 |
43 |
44 |
52 |
32 |
47 | )
48 | }
49 |
50 | export default React.memo(ImagePreview)
51 |
--------------------------------------------------------------------------------
/.github/PULL_REQUEST_TEMPLATE.md:
--------------------------------------------------------------------------------
1 | #### What problem is this solving?
2 |
3 |
4 |
5 | #### How should this be manually tested?
6 |
7 | [Workspace](url)
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 | #### Screenshots or example usage
18 |
19 | #### Type of changes
20 |
21 |
22 |
23 | | ✔️ | Type of Change |
24 | | --- | ----------------------------------------------------------------------------------------- |
25 | | \_ | Bug fix |
26 | | \_ | New feature |
27 | | \_ | Breaking change |
28 | | \_ | Technical improvements |
29 |
30 | #### Notes
31 |
32 |
33 |
34 | #### How does this PR make you feel? [:link:](http://giphy.com/categories/emotions/)
35 |
36 | ![](put .gif link here - can be found under "advanced" on giphy)
37 |
--------------------------------------------------------------------------------
/react/components/icons/GearIcon.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | const GearIcon: React.FunctionComponent = () => (
4 |
17 | )
18 |
19 | export default GearIcon
20 |
--------------------------------------------------------------------------------
/react/components/EditorContainer/Sidebar/BlockEditor/utils.ts:
--------------------------------------------------------------------------------
1 | import throttle from 'lodash/throttle'
2 |
3 | import { updateExtensionFromForm } from '../../../../utils/components'
4 | import { NEW_CONFIGURATION_ID } from '../consts'
5 | import { getDefaultCondition } from '../utils'
6 | import { GetDefaultConfiguration, GetConfigurationType } from './typings'
7 |
8 | export const getDefaultConfiguration: GetDefaultConfiguration = ({
9 | iframeRuntime,
10 | isSitewide,
11 | }) => ({
12 | condition: getDefaultCondition({ iframeRuntime, isSitewide }),
13 | contentId: NEW_CONFIGURATION_ID,
14 | contentJSON: '{}',
15 | label: null,
16 | origin: null,
17 | })
18 |
19 | export const getIsDefaultContent: (
20 | configuration: Pick
35 |
46 |
43 | {children}
44 |
45 |
23 |
46 | )
47 | }
48 |
49 | export default Loading
50 |
--------------------------------------------------------------------------------
/react/components/admin/redirects/bulkUploadRedirects.ts:
--------------------------------------------------------------------------------
1 | import { MutableRefObject } from 'react'
2 | import { splitEvery } from 'ramda'
3 |
4 | const MAX_REDIRECTS_PER_REQUEST = 200
5 | const NUMBER_OF_RETRIES = 3
6 |
7 | interface BulkUploadRedirectsArgs {
8 | data: Redirect[]
9 | mutation: (data: Redirect[]) => Promise
24 |
26 |
27 | {`${percent}%`}
28 |
29 | {current + ' '}/{' ' + total}
30 |
31 |
32 |
33 |
34 |
45 |
21 |
22 | {title =>
24 | {hasCreateButton && (
25 |
44 | {routes.map(route => (
45 | {title}
}
23 |
26 |
41 |
42 | )}
43 |
48 |
50 |
52 |
53 | )
54 | }
55 |
56 | export default PageEditor
57 |
--------------------------------------------------------------------------------
/react/components/HighlightOverlay/hooks/useStyles/index.ts:
--------------------------------------------------------------------------------
1 | import { useCallback, useEffect } from 'react'
2 |
3 | import { UseStyles } from './typings'
4 | import { getStyles } from './utils'
5 |
6 | /*
7 | * The "data-extension-point" attribute is re-added to the element every
8 | * time it's edited. By observing it, we can consistently check if the
9 | * block's automatic height has changed and adapt the HighlightOverlay's
10 | * height accordingly.
11 | */
12 |
13 | const useStyles: UseStyles = ({
14 | hasValidElement,
15 | highlightTreePath,
16 | isOverlayMaskActive,
17 | setState,
18 | subscribeToResize,
19 | unsubscribeToResize,
20 | visibleElement,
21 | }) => {
22 | const updateStyles = useCallback(
23 | (clientHeight?) => {
24 | const elementHeight: HTMLElement['clientHeight'] = clientHeight
25 |
26 | const styles = getStyles({
27 | hasValidElement,
28 | highlightTreePath,
29 | visibleElement,
30 | })
31 |
32 | setState(state => ({
33 | ...state,
34 | ...styles,
35 | elementHeight: elementHeight || state.elementHeight,
36 | }))
37 | },
38 | [hasValidElement, highlightTreePath, setState, visibleElement]
39 | )
40 |
41 | useEffect(() => {
42 | function resizeCallback(element: Element) {
43 | updateStyles(element.clientHeight)
44 | }
45 |
46 | subscribeToResize(resizeCallback)
47 | updateStyles()
48 |
49 | return () => {
50 | unsubscribeToResize(resizeCallback)
51 | }
52 | }, [
53 | isOverlayMaskActive,
54 | subscribeToResize,
55 | unsubscribeToResize,
56 | updateStyles,
57 | visibleElement,
58 | ])
59 | }
60 |
61 | export default useStyles
62 |
--------------------------------------------------------------------------------