@televet/kibble-ui 1.14.8 → 1.14.9

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.
Files changed (2) hide show
  1. package/README.md +9 -192
  2. package/package.json +1 -1
package/README.md CHANGED
@@ -2,207 +2,24 @@
2
2
 
3
3
  Kibble is a React component library for use at TeleVet.
4
4
 
5
- https://televet.github.io/kibble-ui/
5
+ ## Installation
6
6
 
7
- ## Technologies Used
8
-
9
- - [Create React App](https://github.com/facebook/create-react-app) - (CRA) template to build and publish NPM libraries with **rollup**, **eslint** and **stylelint** configurations.
10
- - [Chakra UI](https://chakra-ui.com/) - Chakra UI is a simple, modular and accessible component library that gives you the building blocks you need to build your React applications.
11
- - [Styled Components](https://styled-components.com/docs) - Visual primitives for the component age.
12
- - [rollup.js](https://rollupjs.org/guide/en/) - Rollup is a module bundler for JavaScript which compiles small pieces of code into something larger and more complex, such as a library or application.
13
- - [Storybook](https://storybook.js.org/docs/basics/introduction/) - Build bulletproof UI components faster.
14
- - [Storybook DocsPage](https://github.com/storybookjs/storybook/tree/master/addons/docs#docspage) - DocsPage pulls information from your stories, components, source code, and story metadata to construct a sensible, zero-config default.
15
- - [React Testing Library](https://testing-library.com/docs/intro) - Simple and complete testing utilities that encourage good testing practices
16
-
17
- ## Usage within a Televet Project
18
-
19
- ### New Project Setup
20
-
21
- If your project does not include a `.npmrc`, create it and add the following:
22
-
23
- `//registry.npmjs.org/:_authToken=${NPM_TOKEN}`
24
-
25
- Then add the NPM_TOKEN environment variable to your .bash_profile or .zshrc
26
-
27
- `export NPM_TOKEN=${SOME_TOKEN}`
28
-
29
- Note: The NPM token can be found here in our [shared accounts table](https://www.notion.so/televet/Shared-Accounts-c691ae4e0dc8482c876aa0f4a56d8ea7)
30
-
31
- ### Install in project
32
-
33
- `npm i --save @televet/kibble-ui`
34
-
35
- ```
36
- import {
37
- ThemeProvider,
38
- theme,
39
- Button,
40
- .... and all other components
41
- } from 'kibble-ui';
42
- ```
43
-
44
- ## Development Setup
45
-
46
- ### Linking Projects for Local Development
47
-
48
- ```
49
- $ cd kibble-ui # navigate into the package directory
50
- $ rm -rf node_modules # remove existing node_modules
51
- $ npm run build # ensure there are build files available for the package to reference
52
-
53
- # Update your library's package.json so that the following packages are pointing to your projects node_modules versions of these packages.
54
-
55
- # "react": "../clinic-web/node_modules/react",
56
- # "react-dom": "../clinic-web/node_modules/react-dom",
57
- # "@chakra-ui/icons": "../clinic-web/node_modules/@chakra-ui/icons",
58
- # "@chakra-ui/react": "../clinic-web/node_modules/@chakra-ui/react",
59
- # "@emotion/react": "../clinic-web/node_modules/@emotion/react",
60
- # "@emotion/styled": "../clinic-web/node_modules/@emotion/styled",
61
-
62
- $ npm i # install packages
63
- $ npm run start # start the development server
64
-
65
- # Navigate to project directory and update package.json to point to your local copy of your library
66
- # "@televet/kibble-ui": "./../kibble-ui"
67
-
68
- $ cd clinic-web # go into a project directory
69
- $ rm -rf node_modules # remove existing node_modules
70
- $ npm install # fresh install with local version of kibble ui
71
- $ npm run start # start the development server
72
-
73
- # When linking local packages like this your text editor may display errors saying the package cannot be found, however, if you restart your editor these errors should dissapear.
74
- ```
75
-
76
- ### Unlinking Projects after Local Development is Complete
77
-
78
- ```
79
- # Inside of library
80
- $ git checkout package.json
81
- $ rm -rf node_modules
82
- $ npm install
83
-
84
- # Inside of project
85
- $ git checkout package.json
86
- $ rm -rf node_modules
87
- $ npm install
88
- ```
89
-
90
- ### `src` directory structure
91
-
92
- Development takes place inside `src` directory. This is where your library code should live, this code will be bundled with rollup and published to NPM. Exports from `src/index.js` will be included in the library. Files with the `.stories.*` extension will be compiled and built to the `docs` folder and deployed with github pages.
7
+ We need to install private packages in this repo, so ensure that you have a `.npmrc` file with the following code in the root of your repository:
93
8
 
94
9
  ```bash
95
- |-- src # library code
96
- | |-- components
97
- | | |-- ComponentName # Component will be exposed as a part of library
98
- | | | |-- Component.spec.js # test file
99
- | | | |-- __snapshots__
100
- | | | | └── Component.spec.js.snap # test snapshot
101
- | | | |-- Component.stories.tsx # storybook file
102
- | | | └── index.tsx
103
- | |-- providers
104
- | | |-- ThemeProvider
105
- | |-- theme
106
- | | |-- blur.ts
107
- | | |-- borders.ts
108
- | | |-- breakpoints.ts
109
- | | |-- colors.ts
110
- | | |-- fonts.ts
111
- | | |-- fontSizes.ts
112
- | | |-- fontWeights.ts
113
- | | |-- index.ts
114
- | | |-- letterSpacings.ts
115
- | | |-- lineHeights.ts
116
- | | |-- radii.ts
117
- | | |-- shadows.ts
118
- | | |-- sizes.ts
119
- | | |-- space.ts
120
- | | |-- transitions.ts
121
- | | |-- zIndeces.ts
122
- | └── index.js # entry point for rollup build
123
- └── setupTests.js
10
+ //registry.npmjs.org/:_authToken=${NPM_TOKEN}
124
11
  ```
125
12
 
126
- ## Build
127
-
128
- This site uses [Storybook](https://storybook.js.org/) configuration to handle documentation and examples.
13
+ Also ensure that you have added the `NPM_TOKEN` environment variable to your `.bash_profile` or `.zshrc`
129
14
 
130
15
  ```bash
131
- npm run build # bundles library code to `build` folder, and documentation code to `docs` folder in the root of project.
16
+ export NPM_TOKEN=${SOME_TOKEN}
132
17
  ```
133
18
 
134
- You can view live documentation here after deploying: https://televet.github.io/kibble-ui/
135
-
136
- ## Deploy and Publish
137
-
138
- 1. Update npm version number with `npm version <patch, major, or minor>`. Read more about [the version options](https://docs.npmjs.com/updating-your-published-package-version-number) here.
139
- 2. Run `npm run build`
140
- 3. Commit changes to git.
141
- 4. When pushing to master, GitHub will publish the package to npm with latest changes.
142
-
143
- This repository is using a [GitHub Worflow](https://docs.github.com/en/actions/using-workflows). See the `.github` folder for more information.
19
+ > _Note: The NPM token can be found here in our [shared accounts table](https://www.notion.so/televet/Shared-Accounts-c691ae4e0dc8482c876aa0f4a56d8ea7)_
144
20
 
145
- ## Test
21
+ Once these steps are complete you should be able to install the packages dependencies
146
22
 
147
- Please include tests next to the file you are testing.
148
- `npm run test` - Run all tests
149
- `npm run test:watch` - Watch tests
150
-
151
- ## Lint
152
-
153
- On commit, [husky](https://github.com/typicode/husky) will run [lint-staged](https://github.com/okonet/lint-staged) with `eslint --fix` command on staged files, preventing you from committing badly formatted code. You can change or disable this behavior inside `.linstagedrc` config file. Before each push tests will run in the same manner.
154
-
155
- ### Caveats
156
-
157
- - If pre-commit hooks not work (e. g. your code is not linted after commit), run `yarn add husky` in your project folder.
158
-
159
- #### eslint
160
-
161
- ```shell script
162
- yarn lint:js # runs eslint in src directory
163
- yarn fix:js # runs eslint in src directory with --fix parameter
164
- ```
165
-
166
- Template extends [CRA eslint rules](https://github.com/facebook/create-react-app/tree/master/packages/eslint-config-react-app) with custom set, tailored for reasonable and clean development process. I added `prettier` to force consistent formatting and `eslint-plugin-fp` to avoid accidental mutations. Don't like trailing semicolons? Feel free to [tweak prettier rules](https://prettier.io/docs/en/configuration.html) inside `.prettierrc` file to match your code style.
167
-
168
- #### stylelint
169
-
170
- ```shell script
171
- yarn lint:style # runs stylelint in src directory
172
- yarn fix:style # runs stylelint in src directory with --fix parameter
173
- ```
174
-
175
- Template includes [stylelint](https://stylelint.io/), to check CSS/SASS/LESS files. We are using [`stylelint-config-standard`](https://github.com/stylelint/stylelint-config-standard) rule set extended with:
176
-
177
- ```js
178
- // Check `calc` functions formatting, required for `calc` to work in IE11
179
- "function-calc-no-unspaced-operator": true,
180
- // Custom rules (aka CSS vars) should go first
181
- "order/order": [
182
- "custom-properties",
183
- "declarations"
184
- ],
185
- // Require rules to be in alphabetical order
186
- "order/properties-alphabetical-order": true,
187
- // Disallow vendor prefixes, since CRA has autoprefixer enabled
188
- "property-no-vendor-prefix": true,
189
- "media-feature-name-no-vendor-prefix": true,
190
- "at-rule-no-vendor-prefix": true,
191
- "selector-no-vendor-prefix": true,
192
- // Limit rules nesting for readablity purposes
193
- "max-nesting-depth": 3,
194
- // Limit selector complexity for readablity purposes
195
- "selector-max-compound-selectors": 5
196
- ```
197
-
198
- Stylelint errors don't prevent build of application in development mode.
199
-
200
- ## Peer Dependencies
201
-
202
- Please see below. These must be dependencies in your project to use this library
203
-
204
- ```
205
- "react": ">=16.8.0",
206
- "react-dom": ">=16.8.0",
207
- "prop-types": ">=15.0.0"
23
+ ```bash
24
+ $ npm install
208
25
  ```
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@televet/kibble-ui",
3
- "version": "1.14.8",
3
+ "version": "1.14.9",
4
4
  "description": "Kibble Design System by Televet",
5
5
  "author": "TeleVet",
6
6
  "main": "build/index.js",