Negatively Proportional Model

    @coog/components-library
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.5 • Public • Published

    Coog React Component Library

    License: GNU

    This projet is a React UI component libraries designed to used in the Coopengo ecosystem.

    The component set is built specifically for React development. This ensures zero dependencies and all the components are fully optimized for React.

    There's a dedicated documentation available at https://coopengo.github.io/coog-portal/.

    Coog React component library using:

    It also features:

    Development

    Testing

    yarn test

    Building

    yarn build

    Storybook

    To run a live-reload Storybook server on your local machine:

    yarn storybook

    To export your Storybook as static files:

    yarn storybook:export

    You can then serve the files under storybook-static using S3, GitHub pages, Express etc.

    Generating New Components

    This project included a handy NodeJS util file under util called create-component.js. Instead of copy pasting components to create a new component, you can instead run this command to generate all the files you need to start building out a new component. To use it:

    yarn generate YourComponentName

    This will generate:

    /src
      /YourComponentName
        YourComponentName.tsx
        YourComponentName.stories.tsx
        YourComponentName.test.tsx
        YourComponentName.types.ts
        YourComponentName.scss
    

    The default templates for each file can be modified under util/templates.

    Don't forget to add the component to your index.ts exports if you want the library to export the component!

    Using Component Library SASS Variables

    You can export SASS variables to projects consuming the library. As such, the rollup-plugin-copy NPM package is used to copy the typography.scss and variables.scss into the build directory as part of the Rollup bundle process. This allows you to use these variables in your projects consuming the component library.

    Additional Help

    Supporting Image Imports

    Add the following library to your component library @rollup/plugin-image:

    npm i -D @rollup/plugin-image

    Then add it to rollup-config.js:

    ...
    plugins:[
      ...,
      image(),
      ...
    ]
    ...

    You can then import and render images in your components like:

    import logo from "./rollup.png";
    
    export const ImageComponent = () => (
      <div>
        <img src={logo} />
      </div>
    );

    Supporting JSON Imports

    Add the following library to your component library @rollup/plugin-json:

    yarn add -D @rollup/plugin-json

    Then add it to rollup-config.js:

    ...
    plugins:[
      ...,
      json(),
      ...
    ]
    ...

    You can then import and use JSON as ES6 Modules:

    import data from "./some-data.json";
    
    export const JsonDataComponent = () => <div>{data.description}</div>;

    Checkout the official Rollup plugin list for additional helpful plugins.

    Install

    npm i @coog/components-library

    DownloadsWeekly Downloads

    47

    Version

    1.1.5

    License

    GPL-3.0-or-later

    Unpacked Size

    8.12 MB

    Total Files

    299

    Last publish

    Collaborators

    • dominiquebertrand