Research
Security News
Quasar RAT Disguised as an npm Package for Detecting Vulnerabilities in Ethereum Smart Contracts
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
@cultureamp/kaizen-component-library
Advanced tools
Culture Amp’s Component Library
Detailed component API documentation and working examples can be found on the Kaizen Site.
The Kaizen Component Library is one of three parts of the Kaizen Design System (the other two are the Kaizen UI Kit and Kaizen Site). It is a collection of all the reusable components that we use to make things here at Culture Amp.
This guide assumes you have already cloned the big-frontend-repo (BFR) and have followed the Getting Started guide. This should provide all the information you will need to start using the Kaizen Component Library on your local development machine.
You can import a Kaizen Component Library component from the /kaizen-component-library
folder inside your application, e.g.
React
import { Button } from "@cultureamp/kaizen-component-library"
Elm
import Button.Button as Button
Draft components are reusable components (i.e. not a snowflake) that can be used live in production, but have not yet met all the requirements of a Kaizen Component Library component. All “draft” components are imported explicitly from the /kaizen-component-library/draft
folder:
import { MyExperimentalComponent } from "@cultureamp/kaizen-component-library/draft"
We encourage you to create new draft components. When you add a new draft component, we need to make sure that the component fits in with our overall design vision, so it is important to show it to a designer to make sure they are happy with it. After you have committed the code please announce it via the preferred slack channel/s (#design_systems_team and #pract_front_end_eng) and also at the fortnightly Front End Practice meeting for visibillity, peer review and feedback.
All new component proposals live inside kaizen-component-library/draft
folder (this applies for all Design Systems Team (DST) and Product team initiated components).
Product teams are responsible for ensuring all draft checklist items have been completed for components that they introduce.
The Design Systems Team will be responsible for finalising components that are in the draft components folder as they are prioritised.
Following is a list of components currently in draft status. If you would like to see if a specific component is "ready" to use for your project, check below.
Component | |
---|---|
TextField | Status |
TitleBlock | Status |
We use React Storybook to create isolated prototypes of our components and test component variants and configurations, which are known as "stories" in Storybook.
To start using Storybook, type the following command in the BFR repo:
bfr storybook kaizen-component-library
It is important that all Kaizen Component Library components have accompanying stories in our Storybook. This enables engineers to easily understand how a component works, test any new changes, and work on components in isolation.
All components need to work on the browsers below.
Browser | Version | Platform | Engine |
---|---|---|---|
Internet Explorer | 11 | Windows 8.1 | Trident |
Edge | Latest | Windows 10 | EdgeHTML |
Firefox | Latest | OS X | Gecko |
Firefox | Latest | Windows 10 | Gecko |
Chrome | Latest | OS X | Blink |
Chrome | Latest | Windows 10 | Blink |
Safari | Latest (11) | OS X | WebKit |
Chrome | pixel 7.1 | ||
Chrome +1 | |||
Safari +1 | |||
Firefox +1 |
https://cultureamp.atlassian.net/wiki/spaces/Prod/pages/1572948/Browser+Support+and+Stats
To develop Kaizen Components locally and see the changes reflected inside of Murmur you will need to "symlink" you local version of @cultuream/kaizen-component-library
with your local copy of Murmur.
step 1.
Make your local copy of @cultuream/kaizen-component-library
available.
# Navigate to code source
$ cd code/cultureamp/big-front-end-repo/packages/kaizen-component-library
# Register package for linking
$ yarn link
# Build in watch mode
$ yarn build:watch
step 2.
Link @cultuream/kaizen-component-library
to Murmur.
# Navigate to code source
$ cd code/cultureamp/murmur
# Register package for linking
$ yarn link @cultuream/kaizen-component-library
step 3. You can now run Murmur locally and any changes you make will be reflected locally.
When you are finished developing locally you can clean up the generated files using the command
yarn clean
and to unlink the npm package useyarn unlink @cultuream/kaizen-component-library
from the terminal running Murmur.
More information on Yarn link here
This library ships with flow
type definitions. These are not yet publicly available through the flow-typed repo so to get the types working please add the following line to your .flowconfig
under [libs]
.
[libs]
./node_modules/@cultureamp/kaizen-component-library/flow-typed/definitions/npm
The Kaizen Design System is maintained by the #team_design_systems.
FAQs
Component Library for Culture Amp's Kaizen Design System
The npm package @cultureamp/kaizen-component-library receives a total of 11 weekly downloads. As such, @cultureamp/kaizen-component-library popularity was classified as not popular.
We found that @cultureamp/kaizen-component-library demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 6 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.