YCH Component Library
As the UI/UX Developer at Yakima Chief Hops, I developed the YCH Component Library using Vue 3, TypeScript, and Storybook. The components and styles were meticulously crafted based on the design system I developed in Figma, ensuring that real projects closely mirrored their Figma counterparts. I packaged the component library into an NPM package to facilitate easy integration and updates, making it simple to import and use across all our Vue projects.
​
My Contributions:
-
Custom Components: Developed 20 unique components from scratch with probably thousands of permutations for every variant/option (i.e., buttons can have no icon, icon on left vs right, be movable or static, be different sizes, automatically full width on mobile, disabled, etc.).
-
Documentation: The Storybook includes documentation on how to setup your local environment for those on the team that want to contribute, how to use the NPM package, how to write additional documentation within Storybook (MDX), a breakdown of the standard story (component) structure to help contributors get started creating their own components.
-
Style Guide: Within the Storybook, I included a style guide for how and when to use certain brand colors, product colors, and greyscale colors, as well as recommended usage for our standard icon package (included as a dev dependency).
-
Styles: The Component Library has a well-defined set of variables and standard styles to ensure that any changes to the design system will automatically be applied to all components. These variable styles are exported along with the components in the NPM package, so they are easy to access during development. For example, if a developer wants to use the red brand color, they could simply write color: var(--ych-red); in the SCSS of whatever project they're working on.
-
Figma Counterpart: Most of the components have a Figma-based counterpart or were originally designed there. ​
​
Unfortunately, accessing the YCH Component Library requires authentication, so I won't be able to link to it. I've included images below.
​
Platform: Web | Framework: Vue 3, TypeScript | Software: Figma, Storybook, PhpStorm