From 09da94beb2f02d67d88fc1dca1786392acb1a0a6 Mon Sep 17 00:00:00 2001 From: Ayush Tiwari <84335414+ayushtiwari110@users.noreply.github.com> Date: Fri, 29 Sep 2023 02:35:46 +0530 Subject: [PATCH 01/12] Added workflows --- .github/workflows/build.yml | 37 +++++++++++++++++++++++++++++++++ .github/workflows/chromatic.yml | 30 ++++++++++++++++++++++++++ package.json | 3 ++- 3 files changed, 69 insertions(+), 1 deletion(-) create mode 100644 .github/workflows/build.yml create mode 100644 .github/workflows/chromatic.yml diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml new file mode 100644 index 00000000..3fc6a53a --- /dev/null +++ b/.github/workflows/build.yml @@ -0,0 +1,37 @@ +name: Runs Preetier Check, Lint Check, Build Check +# first runs prettier and lint checks then builds the code. +on: [pull_request, push] + +jobs: + build-project: + runs-on: ubuntu-latest + + steps: + - name: Checkout Repository + uses: actions/checkout@v2 + + - name: Install Node.js + uses: actions/setup-node@v2 + with: + node-version: 18 + + - name: Install Dependencies + run: npm install + + - name: Code Formatting Check #Runs Prettier Script + run: npm run prettier + + - name: Linting Check #Runs ESLint Script + run: npm run lint + + - name: Build #Build the project + run: npm run build + + - name: Check Build Status + run: | + if [ $? -eq 0 ]; then + echo "Build successful!" + else + echo "Build failed!" + exit 1 + fi diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml new file mode 100644 index 00000000..6a343211 --- /dev/null +++ b/.github/workflows/chromatic.yml @@ -0,0 +1,30 @@ +# Workflow name +name: "Deploy StoryBook on Chromatic" + +# Event for the workflow +on: [pull_request,push] + +# List of jobs +jobs: + chromatic-deployment: + # Operating System + runs-on: ubuntu-latest + # Job steps + steps: + - name: Checkout Repository + uses: actions/checkout@v1 + + - name: Install Node.js + uses: actions/setup-node@v2 + with: + node-version: 18 + + - name: Install dependencies + run: npm install + # 👇 Adds Chromatic as a step in the workflow + - name: Publish to Chromatic + uses: chromaui/action@v1 + # Chromatic GitHub Action options + with: + # 👇 Chromatic projectToken, refer to the manage page to obtain it. + projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }} \ No newline at end of file diff --git a/package.json b/package.json index 74b8d692..2bc92777 100644 --- a/package.json +++ b/package.json @@ -9,7 +9,8 @@ "lint": "next lint", "storybook": "storybook dev -p 6006", "build-storybook": "storybook build", - "chromatic": "npx chromatic --project-token=chpt_1a0522d85a68f99" + "chromatic": "npx chromatic --project-token=chpt_1a0522d85a68f99", + "prettier" : "npx prettier . --check" }, "dependencies": { "autoprefixer": "10.4.16", From a29459d64bd301292c37c7a769dd71ef1ef28720 Mon Sep 17 00:00:00 2001 From: Ayush Tiwari <84335414+ayushtiwari110@users.noreply.github.com> Date: Fri, 29 Sep 2023 03:01:15 +0530 Subject: [PATCH 02/12] prettier changes --- .eslintrc.json | 14 +++--- .github/workflows/build.yml | 56 ++++++++++++------------ .github/workflows/chromatic.yml | 6 +-- .prettierrc.json | 12 ++--- .storybook/main.js | 18 ++++---- .storybook/preview.js | 8 ++-- .vscode/settings.json | 14 +++--- package.json | 2 +- src/app/page.js | 2 +- src/stories/Button.jsx | 22 ++++++---- src/stories/Button.stories.js | 19 ++++---- src/stories/Configure.mdx | 77 ++++++++++++++++++--------------- src/stories/Header.jsx | 28 ++++++++---- src/stories/Header.stories.js | 10 ++--- src/stories/Page.jsx | 54 +++++++++++++++-------- src/stories/Page.stories.js | 18 ++++---- tailwind.config.js | 2 +- 17 files changed, 199 insertions(+), 163 deletions(-) diff --git a/.eslintrc.json b/.eslintrc.json index 3f1cfa89..9c11497a 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -1,8 +1,8 @@ { - // ... - "extends": [ - "next/core-web-vitals", - "prettier" // Add "prettier" last. This will turn off eslint rules conflicting with prettier. This is not what will format our code. - ] - // ... - } \ No newline at end of file + // ... + "extends": [ + "next/core-web-vitals", + "prettier" // Add "prettier" last. This will turn off eslint rules conflicting with prettier. This is not what will format our code. + ] + // ... +} diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml index 3fc6a53a..a5521338 100644 --- a/.github/workflows/build.yml +++ b/.github/workflows/build.yml @@ -7,31 +7,31 @@ jobs: runs-on: ubuntu-latest steps: - - name: Checkout Repository - uses: actions/checkout@v2 - - - name: Install Node.js - uses: actions/setup-node@v2 - with: - node-version: 18 - - - name: Install Dependencies - run: npm install - - - name: Code Formatting Check #Runs Prettier Script - run: npm run prettier - - - name: Linting Check #Runs ESLint Script - run: npm run lint - - - name: Build #Build the project - run: npm run build - - - name: Check Build Status - run: | - if [ $? -eq 0 ]; then - echo "Build successful!" - else - echo "Build failed!" - exit 1 - fi + - name: Checkout Repository + uses: actions/checkout@v2 + + - name: Install Node.js + uses: actions/setup-node@v2 + with: + node-version: 18 + + - name: Install Dependencies + run: npm install + + - name: Code Formatting Check #Runs Prettier Script + run: npm run prettier + + - name: Linting Check #Runs ESLint Script + run: npm run lint + + - name: Build #Build the project + run: npm run build + + - name: Check Build Status + run: | + if [ $? -eq 0 ]; then + echo "Build successful!" + else + echo "Build failed!" + exit 1 + fi diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml index 6a343211..5cacf068 100644 --- a/.github/workflows/chromatic.yml +++ b/.github/workflows/chromatic.yml @@ -1,8 +1,8 @@ # Workflow name -name: "Deploy StoryBook on Chromatic" +name: 'Deploy StoryBook on Chromatic' # Event for the workflow -on: [pull_request,push] +on: [pull_request, push] # List of jobs jobs: @@ -27,4 +27,4 @@ jobs: # Chromatic GitHub Action options with: # 👇 Chromatic projectToken, refer to the manage page to obtain it. - projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }} \ No newline at end of file + projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }} diff --git a/.prettierrc.json b/.prettierrc.json index f6e6b228..043b0cd7 100644 --- a/.prettierrc.json +++ b/.prettierrc.json @@ -1,7 +1,7 @@ { - "semi": false, - "trailingComma": "es5", - "singleQuote": true, - "tabWidth": 2, - "useTabs": false -} \ No newline at end of file + "semi": false, + "trailingComma": "es5", + "singleQuote": true, + "tabWidth": 2, + "useTabs": false +} diff --git a/.storybook/main.js b/.storybook/main.js index b2f24ca0..43111ad9 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -1,19 +1,19 @@ /** @type { import('@storybook/nextjs').StorybookConfig } */ const config = { - stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"], + stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], staticDirs: ['../public'], addons: [ - "@storybook/addon-links", - "@storybook/addon-essentials", - "@storybook/addon-onboarding", - "@storybook/addon-interactions", + '@storybook/addon-links', + '@storybook/addon-essentials', + '@storybook/addon-onboarding', + '@storybook/addon-interactions', ], framework: { - name: "@storybook/nextjs", + name: '@storybook/nextjs', options: {}, }, docs: { - autodocs: "tag", + autodocs: 'tag', }, -}; -export default config; +} +export default config diff --git a/.storybook/preview.js b/.storybook/preview.js index 8602700a..2d360668 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -1,8 +1,8 @@ /** @type { import('@storybook/react').Preview } */ -import '../src/app/globals.css'; +import '../src/app/globals.css' const preview = { parameters: { - actions: { argTypesRegex: "^on[A-Z].*" }, + actions: { argTypesRegex: '^on[A-Z].*' }, controls: { matchers: { color: /(background|color)$/i, @@ -10,6 +10,6 @@ const preview = { }, }, }, -}; +} -export default preview; +export default preview diff --git a/.vscode/settings.json b/.vscode/settings.json index dcde718b..c91ad1bd 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,8 +1,8 @@ { - "editor.codeActionsOnSave": { - "source.fixAll.eslint": true - }, - // Add those two lines: - "editor.formatOnSave": true, // Tell VSCode to format files on save - "editor.defaultFormatter": "esbenp.prettier-vscode" // Tell VSCode to use Prettier as default file formatter -} \ No newline at end of file + "editor.codeActionsOnSave": { + "source.fixAll.eslint": true + }, + // Add those two lines: + "editor.formatOnSave": true, // Tell VSCode to format files on save + "editor.defaultFormatter": "esbenp.prettier-vscode" // Tell VSCode to use Prettier as default file formatter +} diff --git a/package.json b/package.json index 2bc92777..fdb6be27 100644 --- a/package.json +++ b/package.json @@ -10,7 +10,7 @@ "storybook": "storybook dev -p 6006", "build-storybook": "storybook build", "chromatic": "npx chromatic --project-token=chpt_1a0522d85a68f99", - "prettier" : "npx prettier . --check" + "prettier": "npx prettier . --check" }, "dependencies": { "autoprefixer": "10.4.16", diff --git a/src/app/page.js b/src/app/page.js index fdae6833..d7ec537e 100644 --- a/src/app/page.js +++ b/src/app/page.js @@ -1,7 +1,7 @@ export default function Home() { return (
-

BacPac

+

BacPac

) } diff --git a/src/stories/Button.jsx b/src/stories/Button.jsx index 7c613bbf..876f5234 100644 --- a/src/stories/Button.jsx +++ b/src/stories/Button.jsx @@ -1,16 +1,20 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import './button.css'; +import React from 'react' +import PropTypes from 'prop-types' +import './button.css' /** * Primary UI component for user interaction */ export const Button = ({ primary, backgroundColor, size, label, ...props }) => { - const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary'; + const mode = primary + ? 'storybook-button--primary' + : 'storybook-button--secondary' return ( - ); -}; + ) +} Button.propTypes = { /** @@ -44,11 +48,11 @@ Button.propTypes = { * Optional click handler */ onClick: PropTypes.func, -}; +} Button.defaultProps = { backgroundColor: null, primary: false, size: 'medium', onClick: undefined, -}; +} diff --git a/src/stories/Button.stories.js b/src/stories/Button.stories.js index e8d8096e..f7e9aac5 100644 --- a/src/stories/Button.stories.js +++ b/src/stories/Button.stories.js @@ -1,4 +1,4 @@ -import { Button } from './Button'; +import { Button } from './Button' // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export const ButtonStories = { @@ -14,9 +14,9 @@ const ButtonStories = { argTypes: { backgroundColor: { control: 'color' }, }, -}; +} -export default ButtonStories; +export default ButtonStories // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args export const Primary = { @@ -24,33 +24,32 @@ export const Primary = { primary: true, label: 'Button', }, -}; +} export const Secondary = { args: { label: 'Button', }, -}; +} export const Large = { args: { size: 'large', label: 'Button', }, -}; +} export const Small = { args: { size: 'small', label: 'Button', }, -}; - +} export const Warning = { args: { primary: true, label: 'Delete now', backgroundColor: 'red', - } -}; + }, +} diff --git a/src/stories/Configure.mdx b/src/stories/Configure.mdx index e05f151e..b762df65 100644 --- a/src/stories/Configure.mdx +++ b/src/stories/Configure.mdx @@ -1,36 +1,38 @@ -import { Meta } from "@storybook/blocks"; -import Image from "next/image"; - -import Github from "./assets/github.svg"; -import Discord from "./assets/discord.svg"; -import Youtube from "./assets/youtube.svg"; -import Tutorials from "./assets/tutorials.svg"; -import Styling from "./assets/styling.png"; -import Context from "./assets/context.png"; -import Assets from "./assets/assets.png"; -import Docs from "./assets/docs.png"; -import Share from "./assets/share.png"; -import FigmaPlugin from "./assets/figma-plugin.png"; -import Testing from "./assets/testing.png"; -import Accessibility from "./assets/accessibility.png"; -import Theming from "./assets/theming.png"; -import AddonLibrary from "./assets/addon-library.png"; - -export const RightArrow = () => ( + - - + > + + +) @@ -39,6 +41,7 @@ export const RightArrow = () =>
@@ -97,6 +100,7 @@ export const RightArrow = () =>
@@ -234,12 +238,12 @@ export const RightArrow = () => Star on GitHub
- Discord logo
@@ -252,12 +256,12 @@ export const RightArrow = () =>
- Youtube logo
@@ -270,12 +274,12 @@ export const RightArrow = () =>
- A book

Follow guided walkthroughs on for key workflows.

@@ -285,6 +289,7 @@ export const RightArrow = () => Discover tutorials
+