Nutty Professor Movie

    @vtex/admin-primitives
    TypeScript icon, indicating that this package has built-in type declarations

    0.5.0 • Public • Published

    Primitives

    NPM

    Primitives are polymorphic components

    Getting started

    This package is already a part of admin-ui - so if you are using it, there is no need for installation.

    For standalone usage, you can install it as an npm package (with its peer dependencies):

    yarn add @vtex/admin-primitives @vtex/admin-core reakit @emotion/css @emotion/react

    After that, you must add the admin-core's ThemeProvider on your app root - so that you can consume styles.

    import { Flex } from '@vtex/admin-primitives'
    
    function ApplicationRoot() {
      return <Flex>A flex container</Flex>
    }

    Engineering

    csx prop

    This prop is present in all components and is responsible for receiving a style-object. More info Styles

    <Primitive csx={{ bg: 'blue', color: 'light.primary' }}>Blue box</Primitive>s

    Polymorphism

    All primitives are polymorphic, this means that you can assign different elements to them through the element property.

    The default element is the div, this is true to every component:

    <Primitive>renders a div</Primitive>

    You can choose the element to render:

    <Primitive element="a" href="#">
      renders an anchor
    </Primitive>

    You can also pass a valid React component (it must receive className so that styles are passed correctly):

    import { Link } from 'gatsby'
    
    function Example() {
      return <Primitive element={Link}>Gatsby link</Primitive>
    }

    Types

    PrimitiveProps

    prop type required description
    element E 🚫 Element that will be rendered
    className string 🚫 element className
    extends <E> props of E 🚫 This component inherits all props of E

    FlexProps

    prop type required description
    E PrimitiveProps<E> 🚫 Extends all props of Primitive
    align ResponsiveValue<AlignContent> 🚫 Shorthand for CSS alignItems property
    basis ResponsiveValue<FlexBasis> 🚫 Shorthand for CSS flexbasis property
    direction ResponsiveValue<FlexDirection> 🚫 Shorthand for CSS flexDirection property
    grow ResponsiveValue<FlexGrow> 🚫 Shorthand for CSS flexGrow property
    shrink ResponsiveValue<FlexShrink> 🚫 Shorthand for CSS flexShrink property
    justify ResponsiveValue<JustifyContent> 🚫 Shorthand for CSS justifyContent property
    wrap ResponsiveValue<FlexWrap> 🚫 Shorthand for CSS flexWrap property
    order ResponsiveValue<Order> 🚫 Shorthand for CSS order property

    FlexSpacerProps

    prop type required description
    E PrimitiveProps<E> 🚫 Extends all props of Primitive

    GridProps

    prop type required description
    E PrimitiveProps<E> 🚫 Extends all props of Primitive
    gap ResponsiveValue<GridGap> 🚫 Shorthand for CSS gridGap property
    rowGap ResponsiveValue<GridRowGap> 🚫 Shorthand for CSS gridRowGap property
    columnGap ResponsiveValue<GridColumnGap> 🚫 Shorthand for CSS gridColumnGap property
    templateAreas string[] 🚫 Shorthand for CSS gridTemplateAreas property
    templateRows ResponsiveValue<GridTemplateRows> 🚫 Shorthand for CSS gridTemplateRows property
    templateColumns ResponsiveValue<GridTemplateColumns> 🚫 Shorthand for CSS gridTemplateColumns property

    GridItemProps

    prop type required description
    E PrimitiveProps<E> 🚫 Extends all props of Primitive
    area ResponsiveValue<GridArea> 🚫 Shorthand for CSS gridArea property

    Keywords

    none

    Install

    npm i @vtex/admin-primitives

    DownloadsWeekly Downloads

    132

    Version

    0.5.0

    License

    none

    Unpacked Size

    2.04 MB

    Total Files

    44

    Last publish

    Collaborators

    • thiagof7
    • gleicy-vtex
    • rafael.sangalli.vtex
    • vtexlab-user
    • lenderson_morais
    • wender
    • natamelo
    • mairatma
    • vlagedo_vtex
    • samuelfgs
    • mayzabel
    • rafabac
    • augusto.lazaro
    • tergol
    • rafarubim
    • analuizamtg
    • gustavorosolem
    • arthurepc
    • jeymisson
    • marcosvcp
    • victorhmp
    • lurian
    • ericreis
    • lbebber
    • tlgimenes
    • arturpimentel
    • anitavincent
    • brunojdo
    • brunohq
    • lucasecdb
    • matheusps
    • emersonlaurentino
    • viniagostini
    • hugo.cabral
    • lucasaarcoverde
    • lariciamota
    • wdsrocha
    • icazevedo
    • edunmc
    • fabits
    • mateuspontes
    • gmantiqueira
    • vitorlgomes
    • rodolfoams
    • policarpo
    • marcelovicentegc
    • maianabt
    • jeffersontuc
    • hiagolcm
    • william.silva