nekitk

// See: https://docs.mapbox.com/help/glossary/style/

export const MAP_STYLES = [
  // Vector styles
  {
    label: 'MapBox Light',
    value: 'mapbox://styles/mapbox/light-v10',
  },
  {
    label: 'MapBox Dark',

nekitk

/* https://www.npmjs.com/package/postcss-nested */

.button {
  &_theme_primary {
    color: var(--color-text-active);
    background-color: var(--color-bg-brand);

    &:focus,
    &:hover {
      background-color: var(--color-bg-brand-hover);

nekitk

import React from 'react'

export const getLazyComponent = (componentImport) => {
  const LazyComponent = React.lazy(componentImport)

  return () => (
    <LazyComponentErrorBoundary>
      <React.Suspense fallback={'Loading...'}>
        <LazyComponent />
      </React.Suspense>

nekitk

CodePen Collection

Page Layout

1. Simple page layout
2. Animating grid (FireFox only)
3. Using instead of Bootstrap grid

Items list variations

4. Basic items list
5. Using explicit and implicit properties together

nekitk

Используемые библиотеки:

• react-docgen-typescript-loader для генерации документации
• addon-smart-knobs для автогенерации нобов
• Отображение документации по просам:
  • storybook-addon-react-docgen — на табе Props
  • @storybook/addon-info — под компонентом или в попапе
  • @storybook/addon-docs — на вкладке Docs

Настройка

• Лоадер