Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fixed issue #133: The "Introduction to Storybook" doc needs improvement #3

Merged
merged 3 commits into from
Aug 13, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,13 @@

> All notable changes to this project will be documented in this file

### [1.37.1](https://github.com/open-sauced/docs/compare/v1.37.0...v1.37.1) (2023-08-12)


### Bug Fixes

* Correct typo in resolve-merge-conflicts.md ([#128](https://github.com/open-sauced/docs/issues/128)) ([72f3b45](https://github.com/open-sauced/docs/commit/72f3b45faa0fd2378350230616d181a8ab66e696))

## [1.37.0](https://github.com/open-sauced/docs/compare/v1.36.1...v1.37.0) (2023-07-28)


Expand Down
22 changes: 11 additions & 11 deletions docs/technical/introduction-to-storybook.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ sidebar_label: Introduction to storybook
keywords:
- Introduction to storybook
---

Storybook is an open-source tool that helps developers build, test, and document UI components in isolation.
Storybook is being leveraged to mock out visual React components. The latest version of the design system can be found at this [URL](https://sauced-components.netlify.app/).

To run storybook, use this command:
Expand All @@ -20,34 +20,34 @@ Storybook is broken into several categories:

<ul>
<li><b>Button:</b> These are the button elements that appear in the project in various forms. They primarily are the Button component in the project but can also be icons.</li>
<li><b>Cards:</b> These are the main container elements in the project. Each item represents a live component in their current form in the project.</li>
<li><b>Cards:</b> These are the main container elements in the project. Each item represents a live component in its current form in the project.</li>
<li><b>Primitives: These are the basic styling of base HTML components.</b></li>
<li><b>Nav:</b> This is the main navigation bar for the project. There are two states, when there is no user logged in and when a user is logged in.</li>
<li><b>Nav:</b> This is the main navigation bar for the project. There are two stateswhen there is no user logged in and when a user is logged in.</li>
<li><b>Footer:</b> This represents the various footers for the project.</li>
<li><b>Homepage:</b> This is the main component for the project homepage and shows the home page in its current form.</li>
<li><b>Homepage:</b> This is the main component of the project homepage and shows the home page in its current form.</li>
<li><b>Miscellaneous:</b> These are components that currently don't fit neatly into the above categories.</li>
</ul>

## Making changes to storybook

This section details how to make changes to Storybook, mainly creating new categories or UI elements.

## Adding a new category
This section details how to make changes to Storybook, mainly by creating new categories or UI elements.

To add a new category, a new file needs to be added to `/stories`. Please follow the naming convention of `*Previous File Number + 1*-*Name of Story Capitalized*-stories.js` when creating a new file. In the file ensure you have this code in the file:
### Adding a new category

To add a new category, a new file needs to be added to the `/stories` directory. When creating a new file, the filename should be named using the following convention: ```*Previous File Number + 1*-*Name of Story Capitalized*-stories.js```. For example, if the last file was 2-SideBar-stories.js, then the new file should be named ```3-NameOfYourFile-stories.js```.
In the file ensure you have this code:
```
export default {
title: "*Name of category*"
};
```

## Adding a new UI element
### Adding a new UI element

To add a new UI element to to an existing category, add the following code to that category's file:
To add a new UI element to an existing category, add the following code to that category's file:

```
export const *Name of UI Element* = () => (

// code for the new element
);
```
2 changes: 1 addition & 1 deletion docs/technical/resolve-merge-conflicts.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ keywords:
- Resolve merge conflicts
---

Pretty often when opening a pull request it is very likely to run into merge conflicts as the release process is generally updating `npm-shriknwrap.json`.
Pretty often when opening a pull request it is very likely to run into merge conflicts as the release process is generally updating `npm-shrinkwrap.json`.

To better illustrate the commands listed here at will use commits and screenshots from [open-sauced#1078](https://github.com/open-sauced/open-sauced/pull/1078).

Expand Down
4 changes: 2 additions & 2 deletions npm-shrinkwrap.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@open-sauced/docs.opensauced.pizza",
"version": "1.37.0",
"version": "1.37.1",
"private": true,
"engines": {
"node": ">=14",
Expand Down