Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/txstate-etc/txstate-components
A collection of UI components used at TXST.
https://github.com/txstate-etc/txstate-components
Last synced: about 1 month ago
JSON representation
A collection of UI components used at TXST.
- Host: GitHub
- URL: https://github.com/txstate-etc/txstate-components
- Owner: txstate-etc
- License: mit
- Created: 2019-07-26T18:44:46.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2022-02-22T19:39:21.000Z (almost 3 years ago)
- Last Synced: 2024-09-10T11:02:40.617Z (5 months ago)
- Language: JavaScript
- Homepage: https://txstate-etc.github.io/txstate-components/
- Size: 15.6 MB
- Stars: 1
- Watchers: 12
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
README
[](https://travis-ci.org/txstate-etc/txstate-components)
[](https://txstate-etc.github.io/txstate-components)
## Texas State University - React Components
Local Development Server
---
Run this command:
> `docker-compose up --build`
The server will be live on `localhost:9009`
Adding A Component (React)
---
1. Create a new folder: `src/React/MyComponent`
1. Add two files to the folder `index.js` and `MyComponent.js`
1. Add `export * from './MyComponent'` to your new `index.js`
1. Write your sweet new React component
1. Make your component available to import from the library by adding and entry to `src/index.js`
* `export { MyComponent } from './MyComponent'`
1. When you're _really_ done with the component, create some type defs in `src/React/index.d.ts`
* This lets people using your component see what props are available, and get auto completion on enum type props. For an example, check the variant prop of Button.
Adding SVG componenet
---
1. Create `.svg` file in `src/assets/svg`
1. run `npx @svgr/cli --template src/utils/svgr.js -d src/components/Svg src/assets/svg` in terminal
1. Make your component available to import from the library by adding and entry to `src/Svg/index.js`
* `export * from './Component'`
1. Component will be available to import with `Svg` prefix
* `import { SvgComponent } from @txstate-mws/txstate-react`
Using Storybook to Develop
---
Storybook is a framework that allows us to develop components in an isolated environment. It acts as a living set of documentation and is extremely useful for development since you don't have to link this library with another project in order to develop with it. When you've written your component and ready to test it using Storybook, do the following:
1. Add a file to `src/stories` called `MyComponent.stories.jsx`
2. Add an entry to `src/stories/index.js` to import your component's stories.
3. Write a story.
Versioning
---
#### Patch (1.0.X)
Increment the minor version if you changed anything and you want other people to have it.
#### Minor (1.X.0)
If you've added a new component the major version should be incremented.
#### Major (X.0.0)
If you've changed the way a component is used increment the major version and explain to the rest of the team why this change is needed (cookies help).
> **The easiest way to communicate changes is to _update CHANGELOG.md_**
#### Location
The version number is in `package.json`
Build A New Version
---
1. Run `yarn build` or `npm run build`
2. You can either publish the new version, or use it locally:
* To use locally, run `npm pack` and install the `.tgz` file it generates as a dependency in your project.
* To publish the package, learn how to publish a package and then write these instructions.
3. When making a commit to the master branch, travis CI will automatically build the library and deploy it to https://txstate-etc.github.io/txstate-components/