@thepom/react-components

POM React Components

A collection of reusable React components to provide consistent UI/UX across POM applications and for the convenience of developers

Install

npm i @thepom/react-components 

or

yarn add @thepom/react-components

Usage

Importing components and styles

import "pom-react-components/dist/tailwind.css"
import { HelloWorld } from 'pom-react-components';

in your main file:

• index.js for CRA
• _app.js for Next.js
• gatsby.config.js for Gatsby

Fonts

For fonts to work correctly, add this into your tailwind.config.js

module.exports = {
  theme: {
    fontFamily: {
      'regular': ['BwGradual', '-apple-system', 'BlinkMacSystemFont'],
      'title': ['MonumentExtended', '-apple-system', 'BlinkMacSystemFont'],
    }
}

You can also access all the font files in @thepom/react-components/dist/fonts

NOTE: react, react-dom, and tailwindcss are peerDependencies so this package assumes that your project already has these installed

Developer Notes

TODO

• [x] add tailwindcss
• [x] add react-styleguidist
• [ ] add twin.macro
• [ ] move over components from discover-pom

Contribute

You may organization access to be granted read/write permissions when publishing to the scope @thepom

After making changes, make sure to update the package version and shrinkwrap before publishing onto npm.

Configuring webpack for TailwindCSS to show correctly with React StyleGuidist

IMPORTANT: Using the correct webpack config is required for react-styleguidist to work with tailwindcss. The styleguide.config.js must specify to use the webpack config file that craco uses, otherwise when you run styleguide, react-styleguidist will use the webpack.config.js located in node_modules/react-scripts which overrides Tailwind styles. FYI this is also why craco must be used instead of react-scripts for when serving create-react-app when getting Tailwind to display correctly

This is already done in the repo, however I wanted to document this in case anyone is curious or for future project setups.

Instructions

Edit styleguide.config.js in the root directory

/* styleguide.config.js */
const { createWebpackDevConfig } = require("@craco/craco");

const cracoConfig = require("./craco.config.js");
const webpackConfig = createWebpackDevConfig(cracoConfig);

module.exports = {
  webpackConfig
}

To apply tailwind css globally:

/* styleguide.config.js */
const path = require('path')

const { createWebpackDevConfig } = require("@craco/craco");

const cracoConfig = require("./craco.config.js");
const webpackConfig = createWebpackDevConfig(cracoConfig);

module.exports = {
  webpackConfig,
  require: [
    path.join(__dirname, './src/styles/tailwind.css')
  ]
}

Scripts

In the root pom-react-components directory, you can run:

yarn && yarn rollup or npm update && npm run rollup

Compiles the code into basic javascript for production in the dist folder. It will generate 2 bundled files

• index.cs.js
• index.esm.js

yarn styleguide

Serves react-styleguidist on http://localhost:6060

Useful commands

npm version major npm version minor npm version patch

To update the package versions

npm publish

Publishes the package onto https://npmjs.com

npm shrinkwrap

Saves a package-lock.json-esque file for anyone who downloads the npm package

Further Reading

Build a Private React Component Library with CRA, Rollup, Material UI

Tailwind CSS with create-react-app

Creating Your Own React Component Library