insomnia/packages/insomnia-components
Mike Ellan b7bc88a326
Design sidebar (#2328)
* updated lock file

* Rolling sidebar from SB into application

* Type fix on the method label output

* Update packages/insomnia-components/components/sidebar.js

Co-authored-by: Opender Singh <opender94@gmail.com>

* PR Feedback - Keys, useCallback Hook

* stubbing component breakout

* PR Feedback

- Breaking out most UI elements into components
- Filter component in place
- Various CSS tweaks

* Removing unused file

* Updating toggle

* Resuable sidebar section (#2359)

* Introduce resuable sidebar section
* Stop eslint complaining
* add react-use
* Lint fixes
* Make the storybook story less wide

* Component development

Abstracting out line level components i.e.
Section > Header > Filter > Panel > Items

Various code fixes

* Cleaning up section visibility state

* Reverting visibiilty state updater

* Adding paths on click for spec scrolling

* refreshing package-lock to resolve conflict

* PR feedback for sidebar components

* Update packages/insomnia-components/components/sidebar/sidebar-header.js

Co-authored-by: Opender Singh <opender94@gmail.com>

* Including lock

* Merge fix

* Component structuring, prop clean-up, css updates

* Cleaning up components, pr feedback, fixing styling

* array index reference clean-up/clarity

* Leveraging useToggle rather than manual useState toggling

* Cleaning up logs

* Hide info section if missing from spec.

* Update packages/insomnia-components/components/sidebar/sidebar-responses.js

Co-authored-by: Opender Singh <opender94@gmail.com>

* Update packages/insomnia-components/components/sidebar/sidebar-schemas.js

Co-authored-by: Opender Singh <opender94@gmail.com>

* Pull fragment

* Destructuring and filter cleanup

* Clearing filter value and DOM on section collapse

* Merge latest

* Merge conflict cleanup

Co-authored-by: Opender Singh <opender94@gmail.com>
2020-07-22 09:13:06 -04:00
..
.storybook Unit test improvements (#2337) 2020-07-01 15:57:42 -07:00
assets Design sidebar (#2328) 2020-07-22 09:13:06 -04:00
components Design sidebar (#2328) 2020-07-22 09:13:06 -04:00
flow-typed Design sidebar (#2328) 2020-07-22 09:13:06 -04:00
webpack Bundling improvements for insomnia-components (#2297) 2020-06-17 07:46:13 +12:00
.babelrc Initial designer merge 2020-04-26 13:33:39 -07:00
.flowconfig Initial designer merge 2020-04-26 13:33:39 -07:00
.gitignore Remove built files from source control and update bootstrap steps (#2165) 2020-05-15 08:57:03 +12:00
.npmignore Remove built files from source control and update bootstrap steps (#2165) 2020-05-15 08:57:03 +12:00
.svgrrc.json Initial designer merge 2020-04-26 13:33:39 -07:00
index.js Design sidebar (#2328) 2020-07-22 09:13:06 -04:00
package-lock.json Design sidebar (#2328) 2020-07-22 09:13:06 -04:00
package.json Design sidebar (#2328) 2020-07-22 09:13:06 -04:00
README.md Initial designer merge 2020-04-26 13:33:39 -07:00

insomnia-components

insomnia-components is a React component library of UI elements needed to build Insomnia. Explore the components via Storybook!

SVGs

We use SVGR on the source SVGs to minify and convert them to React components. This conversion happens during npm run bootstrap.

The generated icons can automatically be bound to the theme library built into Insomnia, by following a few rules. In the source SVG:

  1. All background colors should be black (#000)
  2. All foreground colors should be white (#FFF)

SVGR converts these colors to fill='' and fill='currentColor' respectively. These icons are exposed via svg-icon.js, which sets the css fill and color of the SVG according to the required theme.

You can view the current icons available here.