stylable-components

stylable-components

Fully-tested & strictly-typed component library based on React, using optional Wix styling.

Components

• <CheckBox />
• <DatePicker />
• <DropDown />
• <Image />
• <Modal />
• <NumberInput />
• <Popup />
• <Portal />
• <RadioButton />
• <RadioGroup />
• <ScreenReaderNotification />
• <SelectionList />
• <SelectionListDivider />
• <SelectionListDividerSymbol />
• <SelectionListOption />
• <Slider />
• <TimePicker />
• <Toggle />
• <TreeItem />
• <TreeView />

Components to be created:

• <AutoComplete />
• <ColorPicker />
• <DataGrid />
• <FilePicker />
• <Menu />
• <MultiSelect />
• <RichTextInput />
• <ScrollView />
• <Tooltip />
• <TopBar />
• <Video />

Library structure

stylable-components
|
|--src - source code.
|
|--test - test code. browser tests end with: spec.ts/x
|                    node tests end with: .node-spec.ts/x
|
|--demo - demo of all components.
|
|--lib - target code generated by build script.

Test Kit

stylable-components exports component test drivers for its various components, currently exposed via dist/test-kit.

In order to use the drivers, a local project must have test-drive-react installed as a dev dependency:

yarn add test-drive-react --dev

Then, component drivers and util functions can be imported:

import {CheckBoxTestDriver} from 'stylable-components/dist/test-kit';

Example usage can be found in various component specs in the test folder, as the drivers are used there as well.

For further information about using the drivers, refer to test-drive-react's documentation.

Development

The following scripts are available:

npm start - Runs webpack-dev-server (watching, hot-reloading), with access to demos and browser tests available via http://localhost:8080/webpack-dev-server

npm run build - Transpiles src into lib. Run automatically on prepublish.

npm test - Runs test:browser and test:node scripts. See below.

npm run test:browser - Runs karma for an automated single run of browser tests. For watch mode, see start script above.

npm run test:node - Runs mocha for an automated single run of node tests. For watch mode, you can pass in the watch flag: npm run test:node -- -w