Using Frontastic starter components

Frontastic comes with some starter componentsstarter components - Frontastic components that come with each Frontastic project can be copied into your own project to use. Known in code as `boost theme`. that you can use or as a guide to building your own Frontastic componentsFrontastic components - A customizable building block that's used together with other components to create a commerce site. Known as `tastic` for short in code..

You'll need to copy them into your project repository and you can then use them as you'd like to (steps below). You can also take a look at the code to get inspiration for creating your own Frontastic componentsFrontastic components - A customizable building block that's used together with other components to create a commerce site. Known as `tastic` for short in code..

In this section of the documentation, each article is dedicated to an individual starter componentstarter component - Frontastic components that come with each Frontastic project that can be copied into your own project to use. Known in code as `boost theme`.. Each includes:

  • the name of the starter componentstarter component - Frontastic components that come with each Frontastic project that can be copied into your own project to use. Known in code as `boost theme`.
  • which page types you can use the component on
  • an example image of what the component looks like
  • the schema.json and tastic.jsx code needed to create the Frontastic componentFrontastic component - A customizable building block that's used together with other components to create a commerce site. Known as `tastic` for short in code.

If you haven't created a Frontastic componentFrontastic component - A customizable building block that's used together with other components to create a commerce site. Known as `tastic` for short in code. before, check out our Tutorial: playing with Frontastic components where you build a Frontastic componentsFrontastic components - A customizable building block that's used together with other components to create a commerce site. Known as `tastic` for short in code. from scratch, or our Tutorial: full steps to create a Frontastic component to see what you need to do with the code.

Steps to copy

We recommend copying over the whole package and removing what you don't want to use as it's less work than copying over each Frontastic componentFrontastic component - A customizable building block that's used together with other components to create a commerce site. Known as `tastic` for short in code. and its dependencies separately (our webpack configuration will also ensure to only bundle actually used components). To do this, follow the steps below.

🚧

This example is based on a single project where no code is shared between projects. If you want to share these Frontastic componentsFrontastic components - A customizable building block that's used together with other components to create a commerce site. Known as `tastic` for short in code. between projects, use <customer> rather than <customer>_<project>.

Before you start, make sure that your code uses the most recent version of the @frontastic/theme-boost component by using yarn upgrade-interactive --interactive --latest --caret. In the process of making the starter components, we will then also get rid of this dependency.

  1. Create a Tailwind configuration like the below in the config folder of your project repository, for example, <customer>_<project>/config/tailwind.config.js
const paths = require('@frontastic/catwalk/config/paths')
const plugin = require('tailwindcss/plugin')
const {
    colors,
    borderRadius,
    baseFontSize,
    fontSize,
    fontColor,
    fontFamily,
    boxShadow,
} = require('../src/js/themes/defaultTheme')

module.exports = {
    theme: {
        extend: {
            /* PART OF THEME */
            colors,
            borderRadius,
            fontSize,
            fontFamily,
            boxShadow,
            /* END OF PART THEME */
            borderWidth: {
                '2px': '2px',
                '3px': '3px',
            },
            flex: {
                '0-0-05': '0 0 50%',
            },
            gridColumnEnd: {
                'span-2': 'span 2',
            },
            gridTemplateColumns: {
                '1-340': '1fr 340px',
                '120-1xfr': '120px 1fr',
                '120-2xfr': '120px 1fr 1fr',
                '1fr-2fr': '1fr 2fr',
                '1.25rem-1fr-1.25rem-1fr-1.25rem': '1.25rem 1fr 1.25rem 1fr 1.25rem',
            },
            gridTemplateRows: {
                'auto-1fr': 'auto 1fr',
                'auto-1fr-auto': 'auto 1fr auto',
            },
            height: {
                'fix-120px': '120px',
                'fix-240px': '240px',
                'full-84px': 'calc(100vh - 84px)',
            },
            inset: {
                full: '100%',
                3.3: '3.3rem',
            },
            margin: {
                center: '0 auto',
            },
            maxHeight: {
                0: '0',
                '316px': '316px',
                '736px': '736px',
            },
            maxWidth: {
                '124px': '124px',
                '192px': '192px',
                '960px': '960px',
                '1240px': '1240px',
                '3/4': '75%',
            },
            minHeight: {
                '354px': '354px',
                '400px': '400px',
                inherit: 'inherit',
            },
            spacing: {
                '2px': '2px',
                100: '25rem',
                160: '40rem',
                '1/2': '50%',
                '3/2': '150%',
                '1/3': '33.333333%',
                '2/3': '66.666667%',
                '4/3': '75%',
                '1/4': '25%',
                '2/4': '50%',
                '3/4': '75%',
                '1/5': '20%',
                '2/5': '40%',
                '3/5': '60%',
                '4/5': '80%',
                '1/6': '16.666667%',
                '2/6': '33.333333%',
                '3/6': '50%',
                '4/6': '66.666667%',
                '5/6': '83.333333%',
                '16/9': '56.25%',
                '21/9': '42.85%',
                '1/12': '8.333333%',
                '2/12': '16.666667%',
                '3/12': '25%',
                '4/12': '33.333333%',
                '5/12': '41.666667%',
                '6/12': '50%',
                '7/12': '58.333333%',
                '8/12': '66.666667%',
                '9/12': '75%',
                '10/12': '83.333333%',
                '11/12': '91.666667%',
            },
            transitionProperty: {
                visibility: 'visibility',
                height: 'height',
                'max-height': 'max-height',
            },
            transitionDuration: {
                20: '0.2s',
                30: '0.3s',
            },
            transitionTimingFunction: {
                'ease-out-expo': 'cubic-bezier(0.39, 0.58, 0.57, 1)',
            },
            width: {
                'fix-488px': '488px',
            },
        },
        // The breakpoints have to match with boost/src/js/config/breakpoints.jsx
        screens: {
            xsm: '420px',
            sm: '640px',
            md: '768px',
            lg: '1024px',
            xl: '1280px',
        },
    },
    plugins: [
        plugin(function ({ addUtilities }) {
            const utilities = {
                /* PART OF THEME */
                '.font-family': {
                    fontFamily: fontFamily,
                },
                '.base-font-size': {
                    fontSize: baseFontSize,
                },
                '.font-color': {
                    color: fontColor,
                },
                '.stroke-font-color': {
                    stroke: fontColor,
                },
                '.fill-font-color': {
                    stroke: fontColor,
                },
                '.button-loader-color-themed': {
                    border: '3px solid',
                    borderColor: `${colors.primary.main} transparent ${colors.primary.main} transparent`,
                },
                /* END OF PART OF THEME */

                '.bg-transparent-50': {
                    backgroundColor: 'rgba(253, 250, 250, 0.5)',
                },
                '.border-bottom-solid': {
                    borderBottomStyle: 'solid',
                },
                '.border-bottom-system-error': {
                    borderBottomColor: colors.system.error,
                },
                '.border-x-transparent': {
                    borderLeftColor: 'transparent',
                    borderRightColor: 'transparent',
                },
                '.justify-self-center': {
                    justifySelf: 'center',
                },
                '.justify-self-end': {
                    justifySelf: 'end',
                },
                '.justify-items-center': {
                    justifyItems: 'center',
                },
                '.translate-right': {
                    transform: 'translateX(0)',
                },
                '.translate-left': {
                    transform: 'translateX(-135%)',
                },
                '.webkit-transition': {
                    transitionProperty: '-webkit-transform',
                },
                '.self-baseline': {
                    alignSelf: 'baseline',
                },
            }

            addUtilities(utilities)
        }),
    ],
    variants: {
        borderWidth: ['responsive', 'hover', 'focus'],
        textColor: ['active'],
    },
    purge: {
        content: [
            paths.appSrc + '/**/*.tsx',
            paths.appSrc + '/**/*.jsx',
            paths.appSrc + '/**/*.scss',
        ],
    },
}
  1. Create a webpack configuration like the below in the config folder of your project repository, for example, <customer>_<project>/config/webpack.post.js, so that the Tailwind will be used
const merge = require('webpack-merge')
const path = require('path')
const paths = require('@frontastic/catwalk/config/paths')
const autoprefixer = require('autoprefixer')

global.layout = {}
try {
    global.layout = require(paths.appSrc + '/js/settings.js')
} catch (e) {
    console.warn('Could not load project specific theming: ' + e)
}

module.exports = (config, PRODUCTION, SERVER) => {
    // Add some custom local aliases
    // Add tailwind configuration to SCSS compilation
    for (let rule of config.module.rules) {
        if (rule.use && Array.isArray(rule.use)) {
            for (let loader of rule.use) {
                if (loader.loader && loader.loader.match('postcss-loader') && loader.options) {
                    // @TODO: There is no way to sensibly adapt this plugin
                    // list in a callback, right? So we just overwrite it for
                    // now…
                    loader.options.plugins = () => {
                        return [
                            require('postcss-flexbugs-fixes'),
                            require('tailwindcss')(__dirname + '/tailwind.config.js'),
                            autoprefixer(),
                        ]
                    }
                }
            }
        }
    }

    return config
}
  1. Check the tsconfig.json in your project repository looks the same as below:
{
    "compilerOptions": {
        "module": "commonjs",
        "noImplicitAny": false,
        "removeComments": true,
        "preserveConstEnums": true,
        "esModuleInterop": true,
        "sourceMap": true,
        "jsx": "react",
        "baseUrl": "."
    },
    "include": ["src/js/**/*", "src/js/types/custom.d.ts"]
}
  1. Copy over the flies under Boost theme to the relevant places in your project repository
cp -a node_modules/@frontastic/theme-boost/src/js/{tastic,patterns,themes,icons,config,types} customer_project/src/js/
cp -a node_modules/@frontastic/theme-boost/src/scss/. customer_project/src/scss/
cp -a node_modules/@frontastic/theme-boost/src/icons customer_project/src/
  1. Add the following dependencies to your package.json and remove @frontastic/boost-theme from all of your package.json files (also in <customer>/package.json). The latter is especially important. If you run into TypeScript duplication errors, check that you've found and removed all of them.
"dependencies": {
        "classnames": "^2.2.6",
        "rc-slider": "^9.3.1",
        "react-hook-form": "^5.6.0",
        "react-intersection-observer": "^8.31.0",
        "react-intl": "^2.4.0",
        "react-sliding-pane": "^7.0.0",
        "react-spring": "^9.0.0",
        "react-toastify": "^7.0.3",
        "reactjs-popup": "^2.0.4",
        "tailwindcss": "^1.7.0",
        "tiny-slider-react": "^0.4.0",
        "whatwg-fetch": "3.0.0"
    },
    "devDependencies": {
        "@types/react": "17.0.0",
        "@types/react-dom": "^17.0.0",
        "@types/react-intl": "^2.0.0"
    },
  1. Import the components you want to use in <customer>_<project>/src/js/tastic/tastics.js – this example includes all of them:
import asyncComponent from '@frontastic/catwalk/src/js/component/asyncComponent'

import MarkdownTastic from './content/markdown/tastic'
import ShowcaseTextTastic from './content/showcase-text/tastic'
import NewsletterBlockTastic from './forms/newsletter-block/tastic'
import TileTastic from './content/tile/tastic'
import TileTasticV2 from './content/tile-v2/tastic'
import SimpleTile from './content/simple-tile/tastic'
import MainMenuTastic from './header/main-menu/tastic'
import ProductSlider from './product/product-slider/tastic'
import ProductDetailsTastic from './product/product-details/tastic'
import ProductListingPageTastic from './product-listing/product-listing-page/tastic'
import HorizontalSpacerTastic from './helpers/horizontal-spacer/tastic'
import FeatureServiceTastic from './content/feature-service/tastic'
import Footer from './footer/tastic'
import ProductTitle from './product/product-details/title/tastic'
import ProductPrice from './product/product-details/price/tastic'
import ProductRating from './product/product-details/rating/tastic'
import ProductImages from './product/product-details/product-images/tastic'
import DescriptionPanel from './product/product-details/description-panel/tastic'
import MarkdownPanel from './product/product-details/markdown-panel/tastic'
import VariantSelector from './product/product-details/variant-selector/tastic'
import AddToCartButton from './product/product-details/add-to-cart-button/tastic'
import IconList from './content/icon-list/tastic'

/* eslint-disable arrow-body-style */
const CartTastic = asyncComponent({ import: () => import('./cart/tastic'), height: {} })
const CheckoutTastic = asyncComponent({ import: () => import('./checkout/tastic'), height: {} })
const CheckoutSuccessTastic = asyncComponent({ import: () => import('./checkout-success/tastic'), height: {} })
const CheckoutHeaderTastic = asyncComponent({ import: () => import('./checkout-header/tastic'), height: {} })
const CheckoutFooterTastic = asyncComponent({ import: () => import('./checkout-footer/tastic'), height: {} })
const AccountAccessTastic = asyncComponent({ import: () => import('./account/access/tastic'), height: {} })
const AccountConfirmTastic = asyncComponent({ import: () => import('./account/confirm/tastic'), height: {} })
const AccountProfileTastic = asyncComponent({ import: () => import('./account/profile/tastic'), height: {} })
const ResetPasswordTastic = asyncComponent({ import: () => import('./account/reset-password/tastic'), height: {} })
const AccountOrdersTastic = asyncComponent({ import: () => import('./account/orders/tastic'), height: {} })
const AccountAddressesTastic = asyncComponent({ import: () => import('./account/addresses/tastic'), height: {} })
const AccountWishlistsTastic = asyncComponent({ import: () => import('./account/wishlist/tastic'), height: {} })

export default (() => {
    return {
        'frontastic/boost/content/markdown': MarkdownTastic,
        'frontastic/boost/content/showcase-text': ShowcaseTextTastic,
        'frontastic/boost/forms/newsletter-block': NewsletterBlockTastic,
        'frontastic/boost/content/tile': TileTastic,
        'frontastic/boost/content/tile-v2': TileTasticV2,
        'frontastic/boost/content/simple-tile': SimpleTile,
        'frontastic/boost/header/main-menu': MainMenuTastic,
        'frontastic/boost/product/product-slider': ProductSlider,
        'frontastic/boost/product/product-details': ProductDetailsTastic,
        'frontastic/boost/product-listing/product-listing-page': ProductListingPageTastic,
        'frontastic/boost/helpers/horizontal-spacer': HorizontalSpacerTastic,
        'frontastic/boost/content/feature-service': FeatureServiceTastic,
        'frontastic/boost/content/icon-list': IconList,
        'frontastic/boost/footer': Footer,
        'frontastic/boost/cart': CartTastic,
        'frontastic/boost/checkout': CheckoutTastic,
        'frontastic/boost/checkout-success': CheckoutSuccessTastic,
        'frontastic/boost/checkout-header': CheckoutHeaderTastic,
        'frontastic/boost/checkout-footer': CheckoutFooterTastic,
        'frontastic/boost/account/access': AccountAccessTastic,
        'frontastic/boost/account/confirm': AccountConfirmTastic,
        'frontastic/boost/account/profile': AccountProfileTastic,
        'frontastic/boost/account/reset-password': ResetPasswordTastic,
        'frontastic/boost/account/orders': AccountOrdersTastic,
        'frontastic/boost/account/addresses': AccountAddressesTastic,
        'frontastic/boost/account/wishlists': AccountWishlistsTastic,
        'frontastic/boost/product-details/title': ProductTitle,
        'frontastic/boost/product-details/price': ProductPrice,
        'frontastic/boost/product-details/rating': ProductRating,
        'frontastic/boost/product-details/product-images': ProductImages,
        'frontastic/boost/product-details/variant-selector': VariantSelector,
        'frontastic/boost/product-details/add-to-cart-button': AddToCartButton,
        'frontastic/boost/product-details/markdown-panel': MarkdownPanel,
        'frontastic/boost/product-details/description-panel': DescriptionPanel,
    }
})()
  1. Add the schema.json files for each component the Components section of the Frontastic studio (see the Using Frontastic components article for more information)

  2. Run yarn install on the top level of your repository to apply the changes to the dependencies

  3. Start the Frontastic CLI (see the Frontastic CLI article for more information) in order to run the local development environment

All the starter componentsstarter components - Frontastic components that come with each Frontastic project can be copied into your own project to use. Known in code as `boost theme`. will now be available in your project repository and will be ready to use in the Frontastic studioFrontastic studio - The interface you use to manage, build, and edit all areas of your project and commerce sites. Previously known as `backstage`..

You can use this code as a base to start working with. Feel free to make it your own code, strip it down to the minimum you need to have, and change it to the way you like.


Did this page help you?