Fully-tested & strictly-typed component library based on React, using optional Wix styling.
Switch branches/tags
abumami/datepicker abumami/dropdown-readme abumami/popup alisey/multiselect danielstr/autocomplete-access danielstr/popup-scroll/372 gilad/checkbutton_icon gilad/demos_specs gilad/formgroup_validation_specs ido/datagrid-spec iftach/test jm/60/checkbox-child jomarton/checkbox-ie-safari-autofocus jomarton/ci-test jomarton/invisible-element-compose jomarton/radio-fix kieran/datepicker-better-year-selection kieran/datepicker-improve-test-structure kieran/datepicker-localize-names kieran/dropdown-add-popup kieran/dropdown leonidl/theming-classname-n-mixin-refactor liorzisman/dialog liorzisman/popup-driver-branched liorzisman/split-docs-readmes liorzisman/tree-view-stage-4-filter liorzisman/tree-view-stage-4 liorzisman/109/datsource-mutation liorzisman/165/dropdown-phase-3 liorzisman/196/autocomplete-phase-1 liorzisman/203/autocomplete-phase-2 maksumc/components-code-samples maksymc/slider-tooltip maksymc/tabs maksymc/text-area master mster prepare-for-new-stylable-integration remove_background tobich/driver-test tobich/form-contract tobich/stylable-contract-detect tyv/fix-tooltip tyv/master_backup tyv/new_master uri/dataMapper volodymyrk/number-input-rtl volodymyrk/storybook-proposal volodymyrk/31-number-input volodymyrk/31-uncontrolled-number-input volodymyrk/176-cannot-style-sub-elements-in-theme-demo wtfil/button-wix-theme-borders wtfil/input-size wtfil/modal-wix-theme wtfil/no-theme-background wtfil/overlay-manager-optimisations wtfil/popup-auto-position-2 wtfil/portal-position wtfil/rtl wtfil/stepper-feedback wtfil/tooltip-click-conflict wtfil/tooltip-global-events-conflict-2 wtfil/tooltip-hide-on-scroll wtfil/tooltip-hide-reset-styles wtfil/tooltip-hide wtfil/tooltip-position-fix wtfil/tooltip-wix-styles-2 wtfil/tooltip-wix-theme wtfil/tree-view-wix-theme
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.

README.md

stylable-components

npm version Build Status

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