swish-design v0.2.15
π¦ Install
npm i swish-design
or if you're using yarn
yarn add swish-design
π¨ Usage
Below demonstrates a simple example of using Swish in your application:
import React from 'react';
import ReactDOM from 'react-dom';
import { Button } from 'swish-design';
ReactDOM.render(
<Button type="primary">Sick!</Button>
document.getElementById('root');
)
Content-Security-Policy
Some may be using this package with a strict Content-Security-Policy. Meaning, they cannot allow inline style tags to be injected into their document at runtime. If your Content-Security-Policy does not allow 'unsafe-inline', one possible solution is to use Swish like so
/* create a swishd.css file */
/* within the swishd.css file */
@import "swish-design";
// in the entry point of your project
import "swishd.css";
// or if you're using a single instance of a Swish component, import swishd.css within that file
πΊ Roadmap
v1.0
β : Completed π οΈ: Building π: Todo
Component | Status |
---|---|
Button | β |
Input | π οΈ |
Tags | π οΈ |
Avatar | π οΈ |
Card | π |
Pagination | π |
Dropdown | π |
Checkbox Group | π |
Our first major release will contain the components listed above. We make minor releases in two week sprints. Components whose status is marked π οΈ fall under the minor release.
Contributing to Swish
To the reader, we feel you're more than welcome to contribute to this project. We'd be thankful for you. Please recognize that Swish is in its baby stages and does not have prototyped assets to aid development; therefore, your implementation of expressing user interaction (styling) will be a truly collaborative process with our team.
π΄ Step 1. Fork
In order to contribute to Swish Design, you need to fork this repo and develop on your local machine.
git clone https://github.com/krfong916/swish-design.git
If you aren't familiar with how to fork and clone repos, follow this guide
π Step 2. Run Storybook
To run storybook, run
npm run storybook
or if you're using yarn
yarn storybook
And open your browser to localhost:6006
π» Step 3. Make Your Changes
You can find specifications of features to implement and changes to make here. Create a new branch from main
and implement your changes on that branch: git checkout -b _branch__name__here_
.
In addition to the tasks listed for the issue, here are some guidelines to consider when developing
- Provide full test coverage
- Meet accessibility guidelines
- Prioritize readability and careful comments, rather than clever code and optimizations
After you've completed every task, and are satisfied with your changes, submit a pull request!
π Step 4. Submit a Pull Request
Last 400m until the finish! At this step, please submit a pull request describing the changes you implemented, and any code that you'd like for us to pay special attention to. After reviewing together, even if your changes need further development, it's important to acknowledge that you're taking a step in the right direction. Once your pull request has been approved... merge that thang to the main branch!!
πΈπΎ Step 5. Celebrate!
You are now a contributor to Swish and the open source community! We sincerely appreciate your efforts to make Swish a great project to use. We're one small project, and with your help, we're able to make the web a better place together.
ππ Contributors
Once your changes are accepted we will add your name to the list of contributors!