studiokit-scaffolding-js
v7.0.7
Published
Common scaffolding for Studio apps at Purdue
Downloads
192
Maintainers
Keywords
Readme
studiokit-scaffolding-js
studiokit-scaffolding-js provides a common scaffolding for react apps.
Installation
Install this library and call startup methods
yarn add studiokit-scaffolding-js
- (Optional) Call configurable extensions in your main entry file
redux/sagas/rootSaga
setOtherDependentSagas
to add more sagas
redux/sagas/postLoginDataSaga
setOnPostLogin
to load more data after login
redux/configureReducers
updatePersistBlacklist
andsetOtherReducers
to add more reducers
- In your main entry file call
startup
import { startup, endpointMappings } from 'studiokit-scaffolding-js' const appConfig = {/* AppConfiguration */} const endpointMappings = {...endpointMappings, .../* App EndpointMappings */} const { history, store, persistor } = startup(appConfig, endpointMappings) // render using history, store, persistor ReactDOM.render( ... )
Styles
Basic Setup
In your project’s startup index.tsx
file, import the scaffolding styles as follows
...third party css...
import 'studiokit-scaffolding-js/lib/css/index-with-variables.css'
...project specific css...
In config-overrides.js
when setting up react-app-require-postcss
, in order for css variables to work, the importFrom
array should look like the following:
importFrom: [
'node_modules/studiokit-scaffolding-js/lib/css/variables.css'
]
Variable Override Setup
In order to override certain color variables from variables.css
, they must be overridden before scaffolding’s index.css
file is imported.
In your project’s startup index.tsx
file, import the scaffolding styles as follows
...third party css...
import 'studiokit-scaffolding-js/lib/css/variables.css'
import './css/variables.css'
import 'studiokit-scaffolding-js/lib/css/index.css'
import './css/index.css'
In config-overrides.js
when setting up react-app-require-postcss
, in order for css variables to work, the importFrom
array should look like the following:
importFrom: [
'node_modules/studiokit-scaffolding-js/lib/css/variables.css',
'src/css/variables.css'
]
Usage
Components and Utils
Components and utils can be imported from studiokit-scaffolding-js/lib/...
Development
Branches
- Create a new branch
- Feature/Issue: In GitLab from an issue, create a branch off of
develop
- Hotfix: Create a
hotfix
branch off ofmaster
(manually or in GitLab by making an MR)
- Feature/Issue: In GitLab from an issue, create a branch off of
- Update the version number
- Feature/Issue
- append
-next.1.1
- e.g. If the current version is
1.0.0
, the new branch should be1.0.0-next.1.1
- append
- Hotfix
- increase the version number and append
-alpha.1
- e.g. If the current version is
1.0.0
, the new branch should be1.0.1-alpha.1
for hotfix
- increase the version number and append
- NOTE: if more than one branch is being developed on at the same time, simply increment the first number after "next"
- e.g.
1.0.0-next.2.1
for the second issue branch (this won't apply for hotfixes)
- e.g.
- Feature/Issue
- Development Loop
- Add/update new components, utils, or styles
- Add/update unit tests for those components or utils to confirm basic functionality
- Increment the last number in the version
- e.g.
1.0.0-next.2.1
=>1.0.0-next.2.2
for a feature/issue branch - e.g.
1.0.1-alpha.1
=>1.0.1-alpha.2
for a hotfix branch
- e.g.
- Push to gitlab. Azure DevOps will run a pipeline and publish this version to npmjs.org
- Install the new version in the project(s) you are working on by updating its
package.json
and runningyarn
- Repeat as needed
- Merging
- After the Merge Request is approved, remove the "next" or "alpha" suffix from the version before merging to develop or master
- For hotfix branches, the version number should be the new patch number, e.g.
1.0.1
- Release
- Feature/Issue: After merging, create a new "release" branch from
develop
and follow the "git flow" release steps as normal - Hotfix: Finish the "git flow" hotfix steps as normal from the hotfix branch
- Azure DevOps will run a pipeline to publish the version merged to
master
to npmjs.org
- Feature/Issue: After merging, create a new "release" branch from
Styles
Styles are organized into the following folders and files inside of src/css
variables.css
- Global constant variables
- Common app-specific variables
utils
- Assorted utility styles, similar to tachyons
- Break out similar styles into separate files once a few similar ones exist
- e.g.
_display.css
contains alldisplay: ...;
related modifier styles
- e.g.
base
_base.css
: Generic tags, .skip-main link, and .main-content_typography.css
: Default fonts, font scale, and text colors
components
- Global component specific styles (e.g. not functional like tachyons)
Your project’s css folders and files should follow this same pattern.