Swish Design 🏀

---

A simple, customizable design package that has three design goals: WAI-ARIA compliance, performance, and cross-device/platform support. The contents of this repo is experimental and may not suit your production needs, use at your own discretion

📦 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');
)

Additionally, you will need to create your own typings file. Pain in the ass, we know. We are submitting our typings to DefinitelyTyped, once approved you will be able to import the typing package in your project using npm i -D @types/swish-design or in yarn yarn add @types/swish-design. Using a one-line command will reduce your workload and improve your experience, as opposed to having to create your own typings file of the components you use in your project.

For now, you'll find type definitions located under node_modules/swish-design/lib/index.d.ts.

• Create a folder under the directory path node_modules/@types and name it swish-design.
• Create a file named index.d.ts
• Copy and paste all type definitions from the located in Swish Design package node_modules/swish-design/lib/index.d.ts to the type definitions file you just created under node_modules/@types/swish-design/index.d.ts

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!