@thepom/react-components

    0.1.9 • Public • Published

    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

    Install

    npm i @thepom/react-components

    DownloadsWeekly Downloads

    1

    Version

    0.1.9

    License

    ISC

    Unpacked Size

    2.78 MB

    Total Files

    38

    Last publish

    Collaborators

    • vivian.leung
    • vivz753