Penguin - The Dive Solutions UI library
Penguin is Dive solution's custom UI library for common React UI components. It is based on our branding and UI/UX styleguide.
Installing and using.
Warning Do not use the
@dive/...scope! This one is not maintained and can lead to security issues. Please use@dive-solutions/...exclusively!
To install, first head over to The Azure feed. Here you will see, that you first have to connect to the feed via npm. Click on "connect to feed" (you only need to do this once).
As a tip: Use the "scoped package" way of defining the registry. This way only @dive-solutions/... packages will be pulled from azure, the rest will still use NPMs global registry.
Now, do a quick
npm install -D @dive-solutions/penguin
Now, you can import all the components from @dive-solutions/penguin, for example
import { Components as Dive } from '@dive-solutions/penguin';However, you still need to import the stylesheet into react's index.ts or App.tsx. Why? Take a look at this explaination.
How to develop
To test the components, run npm run storybook. This will spin up storybook at port 6006 and acts kind of like a dev server. You will be able to develop the components and the "stories" to test them :)
Folders:
-
/assets-> assets used in storybook or the components -
/components-> just a "wrapper" for better import/export of components. -
/lib-> the implementation of actual components -
/stories-> storybook files -
/styles-> global scss styles and variables
building and testing
To build the components, run npm run build. Easy, right? There is some magic going on though.
What's happening, is that rollup takes all the components mentioned in src/index.ts and with the help of the package.json, tsconfig.json and the rollup.config.ts knows how and where to build the files to.
Out comes a dist folder with two subfolders, one built for esm and one for cjs modules. We probably will never need the cjs one, but who knows. Each folder will contain an index<...>.js file, the type definitions and source maps. Currently, CSS is stored inline with JS, but this might change in the future when we optimize the rollup.config.ts.
Publishing
Run npm publish. This will build and publish the library to azure. Don't forget to increment the version number! You can use the npm version command for this.