@infinite-table/infinite-react 0.0.4 → 0.0.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -18,10 +18,9 @@
18
18
 
19
19
  - [Installation](#installation)
20
20
  - [Documentation](#documentation)
21
- - [Development process](#development-process)
22
- - [Running the docs](#running-the-docs)
21
+ - [❤️ TypeScript](#-typescript)
22
+ - [🎨 Themable](#-themable)
23
23
  - [Testing](#testing)
24
- - [Testing in development](#testing-in-development)
25
24
  - [License](#license)
26
25
 
27
26
  <!-- END doctoc generated TOC please keep comment here to allow auto update -->
@@ -38,85 +37,26 @@ Our approach with the `InfiniteTable` is to go documentation first. From our dev
38
37
 
39
38
  **[Visit API docs](https://infinite-table.com/docs)**
40
39
 
41
- ## Development process
40
+ ## ❤️ TypeScript
42
41
 
43
- You can start the examples by running:
42
+ It's fully typed and offers you great developer experience to help you get up and running quickly
44
43
 
45
- ```bash
46
- npm run dev
47
- ```
48
-
49
- ### Running the docs
50
-
51
- ```bash
52
- npm run docs
53
- ```
54
- <!--
55
- ### HTML Element classNames
56
-
57
- - The table has the `ITable` className, and all HTML elements are prefixed with that.
58
-
59
- - All meaningful table parts (table row, header, cell) keep capitalized names, for example:
60
-
61
- - `ITableRow`
62
- - `ITableHeader`
63
- - `ITableCell` - all cells, both in body and in header
64
- - `ITableHeaderCell` - cells in header
65
- - `ITableColumnCell` - cells in body rows
66
-
67
- - Other HTML elements, which are nested inside those table parts, will be prefixed with the table part where they are nested, followed by `_`. Example:
68
-
69
- - `ITableCell_content`
70
-
71
- ### CSS variables
72
-
73
- There are 2 kinds of variables:
74
-
75
- - top-level
76
- - component specific
44
+ > The TypeScript typings file is included in the npm package - you don't have to download an additional **@types** package.
77
45
 
78
- All CSS variables meant primarily to be applied to a specific css property, will end up with `__<property-name>`, like this:
46
+ ## 🎨 Themable
79
47
 
80
- - `--it__border-radius`
48
+ `Infinite Table` is fully customizable, via CSS variables. It ships with both a **light** and a **dark** theme - you have to import the CSS file from the package.
81
49
 
82
- #### CSS top-level variables
83
-
84
- Those are prefixed with `at-`. Examples:
85
-
86
- - `--it-font-size-0`
87
- - `--it-space-0`
88
- - `--it-space-1`
89
- - `--it-color-....`
90
-
91
- The ones meant primarily for a CSS property name will end with `__<property-name>`, like this:
92
-
93
- - `--it__border-radius` -->
50
+ ```js
51
+ import "@infinite-table/infinite-react/index.css"
52
+ ```
94
53
 
54
+ This file includes both the light and the dark themes.
95
55
 
96
56
 
97
57
  ## Testing
98
58
 
99
59
  Infinite Table is built with extensive end-to-end testing via headless chrome (more exactly, puppeteer).
100
- To execute the tests you have to run:
101
-
102
- ```bash
103
- $ npm run test
104
- ```
105
-
106
- Test pages are found in [tests folder](./source/examples/src/pages/tests) - which is part of a nextjs app where every file ending with `.page.tsx` is a page/route, while it's sibling file with the same name, but ending in `.test.tsx` is the actual test code. The test code is visiting the sibling page/route, to load the page and executes assertions against the test page.
107
-
108
- The test command command above does 3 things:
109
-
110
- * compiles the nextjs app found in the [examples folder](./source/examples) - runs `next build && next export`, which creates an `out` folder with the resulting examples/tests app
111
- * starts a webserver that serves the generated `out` folder on [localhost:3000](http://localhost:3000)
112
- * runs jest+puppeteer against the app served at [localhost:3000](http://localhost:3000)
113
-
114
- ### Testing in development
115
-
116
- If you want to run the tests in dev mode, to get feedback sooner, you need to run the following (in the [source/examples folder](./source/examples)):
117
-
118
- * `npm run dev` - to run the nextjs app in development, on port `3000`
119
- * `npm run test:watch` to run jest on changed files - optionally add a test path pattern like `npm run test:watch -- --testPathPattern=x/y/z`
120
60
 
121
61
  ## License
122
62
 
package/index.css CHANGED
@@ -619,6 +619,3 @@
619
619
  background: var(--infinite-load-mask-text-background);
620
620
  border-radius: var(--infinite-load-mask-border-radius);
621
621
  }
622
-
623
-
624
- /*# sourceMappingURL=tmp.css.map */