@uob-web-and-digital/component-library 0.0.3 → 0.0.5

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 (6) hide show
  1. package/README.md +19 -6
  2. package/dist/main.js +10 -4
  3. package/dist/main.js.map +1 -1
  4. package/dist/module.js +10 -4
  5. package/dist/module.js.map +1 -1
  6. package/package.json +3 -1
package/README.md CHANGED
@@ -1,50 +1,60 @@
1
1
  # University of Birmingham Component Library
2
+
2
3
  This is the frontend component library for the University of Birmingham website built using Storybook 7 and SASS.
3
4
 
4
5
  ## Contents
5
- * [Installation and setup](#installation-and-setup)
6
- * [Working locally on the project](#working-locally-on-the-project)
7
- * [Deploying changes to the public Storybook](#deploying-project-changes-to-the-public-storybook)
8
- * [Publishing changes to the NPMJS package library](#publishing-changes-to-the-npmjs-package-library)
9
- * [Creating Components](#creating-components)
6
+
7
+ - [Installation and setup](#installation-and-setup)
8
+ - [Working locally on the project](#working-locally-on-the-project)
9
+ - [Deploying changes to the public Storybook](#deploying-project-changes-to-the-public-storybook)
10
+ - [Publishing changes to the NPMJS package library](#publishing-changes-to-the-npmjs-package-library)
11
+ - [Creating Components](#creating-components)
10
12
 
11
13
  ## Installation and setup
12
14
 
13
15
  ### Node Compatibility
16
+
14
17
  **Node:** ^18.18.0
15
18
 
16
19
  ### Setting up the project locally
20
+
17
21
  1. Clone the repo from Github: `git clone git@github.com:uob-itservices/component-library.git`
18
22
  2. Install NPM Node Modules by running `npm install` from the project root
19
23
 
20
24
  ## Working locally on the project
25
+
21
26
  Run `npm run storybook` from the project root. This will run a new instance of [Storybook](https://storybook.js.org/) that can be accessed from `localhost:6006`.
22
27
 
23
28
  Changes made locally are automatically compiled and the browser instance of Storybook will automaticaly refresh, hot-loading changes very quickly where possible.
24
29
 
25
30
  ## Deploying project changes to the public Storybook
31
+
26
32
  The visible Storybook for sharing changes is private and is accessed at [https://stunning-invention-1w42em5.pages.github.io/](https://stunning-invention-1w42em5.pages.github.io/) you will need to be a member of the uob-itservices GitHub organisation and have access to the repository.
27
33
 
28
34
  This is automatically deployed and built when changes are pushed to the `develop` branch of the GitHub repository.
29
35
 
30
36
  ## Publishing changes to the NPMJS package library
37
+
31
38
  The repository will need publishing to the NPMJS package library [https://www.npmjs.com/package/@uob-web-and-digital/component-library](https://www.npmjs.com/package/@uob-web-and-digital/component-library) before it can be used in the UoB website.
32
39
 
33
40
  This is a private package so a read-only NPM access token will need be created in order to install the package.
34
41
 
35
- When the library in ready for a new release of the NPM package, you will need to increase the version number in the package.json and run a `npm install` to ensure the project gets updated with this version. After this you will need to create a pull request into the `develop`` branch and then another pull request from the `develop`` branch into `main`
42
+ When the library in ready for a new release of the NPM package, you will need to increase the version number in the package.json and run a `npm install` to ensure the project gets updated with this version. After this you will need to create a pull request into the `develop`` branch and then another pull request from the `develop``branch into`main`
36
43
 
37
44
  As this is a manual process, ensure that the `main` branch of the repository is always in sync with the currently published package.
38
45
 
39
46
  Releasing to the NPM registry are managed by GitHub Actions. You will need to create a new release and use the new release version as the tag. Once the release is published a GitHub Action will automatically run all the steps to publish the package on NPM.
40
47
 
41
48
  ## Creating components
49
+
42
50
  Components should always be created within the `src/components` folder.
43
51
 
44
52
  ### Naming component folders
53
+
45
54
  You can create a new folder within `src/components` that is based on the chosen name for your component. The format of this folder name, react component and story should always be PascalCase i.e. `MyNewComponent`. SASS files should always be camelCase i.e. `myNewComponent`
46
55
 
47
56
  ### Component file structure
57
+
48
58
  Within the component folder you must create the following 3 files:
49
59
 
50
60
  ```
@@ -55,10 +65,13 @@ ComponentName
55
65
  ```
56
66
 
57
67
  #### {ComponentName}.tsx
68
+
58
69
  This file is where the Component Structure is defined.
59
70
 
60
71
  #### {ComponentName}.stories.ts
72
+
61
73
  This file allows developers to pass in mockup content to the component that will render within Storybook. More information is available in the Storybook docs [Storybook JS - Defining Stories](https://storybook.js.org/docs/react/writing-stories/introduction#defining-stories)
62
74
 
63
75
  #### componentName.scss
76
+
64
77
  This is where component styling is defined using SASS/CSS.