Merge pull request #1073 from dev-launchers/development/components

* feat(alicefate): change OpenResponse, FormField * inital commit for progressBar * change it back to css in FormField.tsx * feat(Hredhya) Add Progress Bar Component * fix(ci): chromatic webhook readability * fix json error * test * fix(alicefate): fix: Text content did not match. * set min and max percentage value and set min width as 5% for inner bar * Set a min width of 5% when percentage is less than 5 and make it invisible at 0 percentage * Roman/discord-webhook: Creating a new file for the webhook and adjusting chromatic.yml * fix:unsubmited required input & textfield turn red * Webhook changes * Changing branch name output. * Fixing error * trying out a different branch name approach * One more approach to branch name * One more attempt at branch name output. * fixing mistake * Extract head branch name from GITHUB_REF step * fix extract head branch name from GITHUB_REF * final fix extract head branch name from GITHUB_REF * final fix extract head branch name from GITHUB_REF * final fix extract head branch name from GITHUB_REF * final fix extract head branch name from GITHUB_REF * final fix extract head branch name from GITHUB_REF * final test for branch name * test for commit message * (fix/hredhya) Use progress tag instead of nested div * fix(alicefate): fix: Text content did not match. * fix:unsubmited required input & textfield turn red * components/discord-webhook: testing discord hook. * triggering the webhook. * triggering another hook. * one more try * once again. * fix(ci): chromatic webhook readability * fix json error * test * Roman/discord-webhook: Creating a new file for the webhook and adjusting chromatic.yml * Webhook changes * Changing branch name output. * Fixing error * trying out a different branch name approach * One more approach to branch name * One more attempt at branch name output. * fixing mistake * Extract head branch name from GITHUB_REF step * fix extract head branch name from GITHUB_REF * final fix extract head branch name from GITHUB_REF * final fix extract head branch name from GITHUB_REF * final fix extract head branch name from GITHUB_REF * final fix extract head branch name from GITHUB_REF * final fix extract head branch name from GITHUB_REF * final test for branch name * test for commit message * inital commit for progressBar * feat(Hredhya) Add Progress Bar Component * set min and max percentage value and set min width as 5% for inner bar * Set a min width of 5% when percentage is less than 5 and make it invisible at 0 percentage * change it back to css in FormField.tsx * fix(alicefate): fix: Text content did not match. * fix:unsubmited required input & textfield turn red * components/discord-webhook: testing discord hook. * triggering the webhook. * triggering another hook. * one more try * once again. * fix(ci): chromatic webhook readability * fix json error * test * Roman/discord-webhook: Creating a new file for the webhook and adjusting chromatic.yml * Webhook changes * Changing branch name output. * Fixing error * trying out a different branch name approach * One more approach to branch name * One more attempt at branch name output. * fixing mistake * Extract head branch name from GITHUB_REF step * fix extract head branch name from GITHUB_REF * final fix extract head branch name from GITHUB_REF * final fix extract head branch name from GITHUB_REF * final fix extract head branch name from GITHUB_REF * final fix extract head branch name from GITHUB_REF * final fix extract head branch name from GITHUB_REF * final test for branch name * test for commit message * inital commit for progressBar * feat(Hredhya) Add Progress Bar Component * set min and max percentage value and set min width as 5% for inner bar * Set a min width of 5% when percentage is less than 5 and make it invisible at 0 percentage * change it back to css in FormField.tsx * triggering another hook. * one more try * once again. * test * Changing branch name output. * Fixing error * Extract head branch name from GITHUB_REF step * feat(alicefate): change OpenResponse, FormField * change it back to css in FormField.tsx * remove dynamic picture to reduce snapshot usage * fix percentage text going off bounds * Roman/export-types: Exporting all components. (#1051) * Roman/export-types: Exporting various compnents. * Roman/export-types: removing the header export. * exporting common components in the index file. * Trying something else to fix the import issue with framer motion. * Roman/export-types: Downgrading framer-motion. --------- Co-authored-by: Enjoy2Live <iMohammedMaqbol@gmail.com> * created a staging area for user-profile app (#1137) --------- Co-authored-by: Iris <2300018151@qq.com> Co-authored-by: Hredhya <hredhya3107@gmail.com> Co-authored-by: mfvil <rarefyev@gmail.com> Co-authored-by: AF <33647003+alicefate@users.noreply.github.com>
dev-launchers · May 27, 2023 · a2f29ad · a2f29ad
2 parents 17e8de6 + f0d90eb
commit a2f29ad
Show file tree

Hide file tree

Showing 16 changed files with 242 additions and 47 deletions.
diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml
@@ -21,11 +21,17 @@ jobs:
       buildUrl: ${{ steps.chromatic.outputs.buildUrl }}
       storybookUrl: ${{ steps.chromatic.outputs.storybookUrl }}
       code: ${{ steps.chromatic.outputs.code }}
+      branch: ${{ steps.extract_branch.outputs.branch }}
     # The list of steps that the action will go through
     steps:
       - name: Checkout
         uses: actions/checkout@v1
-
+
+      - name: Extract branch name
+        shell: bash
+        run: echo "branch=$(echo ${GITHUB_REF#refs/heads/})" >>$GITHUB_OUTPUT
+        id: extract_branch
+
       - name: Use Node.js 16.x
         uses: actions/setup-node@v3
         with:
@@ -46,15 +52,6 @@ jobs:
           projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
           token: ${{ secrets.GITHUB_TOKEN }}
           onlyChanged: true
-
-      - name: Discord Channel Notification
-        env:
-          DISCORD_WEBHOOK: ${{ secrets.UI_BUILDS_WEBHOOK }}
-          DISCORD_EMBEDS: '[{"title": "UI changes are ready for review: ${{ github.event.pull_request.comment }}","description": "Started by ${{ github.event.pull_request.user.login }}. Click [here](${{ steps.chromatic.outputs.buildUrl }}) to view the Chromatic review.","url": "${{steps.chromatic.outputs.storybookUrl}}"}]'
-
-        uses: Ilshidur/action-discord@master
-        with:
-          args: 'New build for {{ EVENT_PAYLOAD.repository.full_name }} Finished.'
       - name: Run Storybook tests
         run: yarn test-storybook
         env:

diff --git a/.github/workflows/discord-webhook.yml b/.github/workflows/discord-webhook.yml
@@ -0,0 +1,35 @@
+name: Discord Webhook
+on:
+  pull_request:
+    paths:
+      - 'packages/UI/.storybook/**'
+      - 'packages/UI/src/**'
+jobs:
+  discord:
+    runs-on: ubuntu-latest
+    outputs:
+      url: ${{ steps.chromatic.outputs.url }}
+      buildUrl: ${{ steps.chromatic.outputs.buildUrl }}
+      storybookUrl: ${{ steps.chromatic.outputs.storybookUrl }}
+      branch: ${{ steps.extract_branch.outputs.branch }}
+      pr_number: ${{ steps.extract_pr_number.outputs.pr_number }}
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+      - name: Extract branch name
+        shell: bash
+        run:  echo "branch=$(echo "${{ github.event.pull_request.head.ref }}" | tr / -)" >> $GITHUB_OUTPUT
+        id: extract_branch
+      - name: Extract PR number
+        shell: bash
+        run: echo "pr_number=$(echo "$GITHUB_REF" | awk -F / '{print $3}')" >> $GITHUB_OUTPUT
+        id: extract_pr_number
+      - name: Discord Channel Notification
+        env:
+          BRANCH: ${{ steps.extract_branch.outputs.branch }}
+          URL: ${{ steps.deploy.outputs.url }}
+          DISCORD_WEBHOOK: ${{ secrets.UI_BUILDS_WEBHOOK }}
+          DISCORD_EMBEDS: '[{"title": "Chromatic","description": "View the Chromatic review.","url": "https://www.chromatic.com/pullrequest?appId=632ca21aeea1618b7fa0bf48&number=${{ steps.extract_pr_number.outputs.pr_number }}"}, {"title": "Storybook","description": "View the storybook for this change.","url": "https://${{ steps.extract_branch.outputs.branch }}--632ca21aeea1618b7fa0bf48.chromatic.com/"}]'
+        uses: Ilshidur/action-discord@master
+        with:
+          args: 'New build for ${{ steps.extract_branch.outputs.branch }} has finished. ${{ github.event.head_commit.author.name }} has made changes with the following commit message: ${{ github.event.pull_request.head_commit.message }}'
diff --git a/.github/workflows/staging-apps.yaml b/.github/workflows/staging-apps.yaml
@@ -11,6 +11,8 @@ on:
       - 'staging/projects[1-2]'
       - 'staging/website'
       - 'staging/website[1-2]'
+      - 'staging/user-profile'
+      - 'staging/user-profile[1-2]'
 
 jobs:
   Publish:
@@ -62,16 +64,19 @@ jobs:
 
 #I'm doing this because in cloudflare pages dashboard I created these projects
 
-#- 'ideaspace'
-#- 'ideaspace1'
-#- 'ideaspace2'
-#- 'recruitment'
-#- 'recruitment1'
-#- 'recruitment2'
-#- 'projects'
-#- 'projects1'
-#- 'projects2'
-#- 'website'
-#- 'website1'
-#- 'website2'
+#- 'ideaspace' => ideaspace.pages.dev
+#- 'ideaspace1' => ideaspace1.pages.dev
+#- 'ideaspace2' => ideaspace2.pages.dev
+#- 'recruitment' => recruitment-djw.pages.dev
+#- 'recruitment1' => recruitment1.pages.dev
+#- 'recruitment2' => recruitment2.pages.dev
+#- 'projects' => projects-2w7.pages.dev
+#- 'projects1' => projects1-1ut.pages.dev
+#- 'projects2' => projects2.pages.dev
+#- 'website' => website-386.pages.dev
+#- 'website1' => website1-c59.pages.dev
+#- 'website2' => website2-7s8.pages.dev
+#- 'user-profile' => user-profile-4zw.pages.dev
+#- 'user-profile1' => user-profile1.pages.dev
+#- 'user-profile2' => user-profile2.pages.dev
 #and on every commit that touches the branches of these teams I deploy to the app from the branch name extraction step:  Extract branch name
diff --git a/packages/UI/package.json b/packages/UI/package.json
@@ -10,7 +10,7 @@
     "babel-loader": "8.2.5",
     "constate": "^3.3.2",
     "formik": "2.2.9",
-    "framer-motion": "8.4.3",
+    "framer-motion": "6.5.1",
     "next": "^12.2.3",
     "polished": "^4.2.2",
     "react": "^17.0.2",

diff --git a/packages/UI/src/components/atoms/index.ts b/packages/UI/src/components/atoms/index.ts
@@ -7,5 +7,9 @@ export { default as Button } from './Button';
 export { default as Checkbox } from './Checkbox';
 export { default as Link } from './Link';
 export { default as Tag } from './Tags';
+export { default as NavLink } from './NavLink';
+export { default as Overlay } from './Overlay';
+export { default as Radio } from './Radio';
+export { default as Tooltip } from './Tooltip';
 export { radiusStyles } from './Radius';
 export { default as BaseLayer } from './BaseLayer';
diff --git a/packages/UI/src/components/molecules/ProgressBar/ProgressBar.stories.tsx b/packages/UI/src/components/molecules/ProgressBar/ProgressBar.stories.tsx
@@ -0,0 +1,21 @@
+import type { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import ProgressBar from './ProgressBar';
+export default {
+  title: 'Molecules/ProgressBar',
+  component: ProgressBar,
+} as ComponentMeta<typeof ProgressBar>;
+
+const TemplateProgressBar: ComponentStory<typeof ProgressBar> = (args) => (
+  <ProgressBar {...args}></ProgressBar>
+);
+
+export const InProgress = TemplateProgressBar.bind({});
+InProgress.args = {
+  value: 50,
+};
+
+export const Finished = TemplateProgressBar.bind({});
+Finished.args = {
+  value: 100,
+};
diff --git a/packages/UI/src/components/molecules/ProgressBar/ProgressBar.tsx b/packages/UI/src/components/molecules/ProgressBar/ProgressBar.tsx
@@ -0,0 +1,27 @@
+import * as React from 'react';
+import Icon from '../../../assets/icons/rawSvg/check-circle.svg';
+import {
+  ProgressBarWrapper,
+  CheckIcon,
+  PercentageWrapper,
+  Percentage,
+} from './StyledProgressBar';
+import type { ProgressBarProps } from '.';
+
+const ProgressBar: React.FC<ProgressBarProps> = ({ value }) => {
+  let progressValue = value;
+  if (value >= 1 && value < 3) {
+    progressValue = 3;
+  }
+  const max = 100;
+  return (
+    <ProgressBarWrapper value={value}>
+      <progress value={progressValue} max={max} />
+      <PercentageWrapper>
+        <Percentage value={value}>{value}%</Percentage>
+        {value >= 100 && <CheckIcon src={Icon} />}
+      </PercentageWrapper>
+    </ProgressBarWrapper>
+  );
+};
+export default ProgressBar;
diff --git a/packages/UI/src/components/molecules/ProgressBar/StyledProgressBar.ts b/packages/UI/src/components/molecules/ProgressBar/StyledProgressBar.ts
@@ -0,0 +1,59 @@
+import type { DefaultTheme } from 'styled-components';
+import styled from 'styled-components';
+import { radiusStyles } from '../../atoms/Radius';
+import type { ProgressBarProps } from '.';
+
+const getColor = (percentage: number, theme: DefaultTheme) => {
+  return percentage >= 100 ? theme.colors.SUCCESS : theme.colors.NOTIFICATION;
+};
+
+export const ProgressBarWrapper = styled.div<ProgressBarProps>`
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  position: relative;
+  width: 320px;
+  progress[value] {
+    // to reset default styles
+    -webkit-appearance: none;
+    appearance: none;
+    border: none;
+    width: 320px;
+    height: 26px;
+    top: 36px;
+    // styling the progress element container and value element
+    ::-webkit-progress-bar {
+      background-color: ${({ theme }) => theme.colors.GREYSCALE_OFF_WHITE};
+      ${radiusStyles['radius300']};
+      border: 2px solid ${({ value, theme }) => getColor(value, theme)};
+    }
+    ::-webkit-progress-value {
+      background-color: ${({ value, theme }) => getColor(value, theme)};
+      ${radiusStyles['radius300']};
+    }
+  }
+`;
+export const PercentageWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  position: absolute;
+  bottom: 88%;
+  width: 100%;
+  gap: 12px;
+`;
+export const Percentage = styled.span<ProgressBarProps>`
+  font-family: 'Nunito Sans';
+  font-style: normal;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 24px;
+  color: ${({ value, theme }) => getColor(value, theme)};
+  width: 35px;
+  height: 24px;
+`;
+export const CheckIcon = styled.img`
+  width: 20px;
+  height: 20px;
+`;
diff --git a/packages/UI/src/components/molecules/ProgressBar/index.ts b/packages/UI/src/components/molecules/ProgressBar/index.ts
@@ -0,0 +1,4 @@
+export interface ProgressBarProps {
+  value: number;
+}
+export { default } from './ProgressBar';
diff --git a/packages/UI/src/components/molecules/index.ts b/packages/UI/src/components/molecules/index.ts
@@ -3,3 +3,4 @@ export { default as BackButton } from './BackButton';
 export { default as ShareButton } from './InteractionButtons/ShareButton';
 export { default as LikeButton } from './InteractionButtons/LikeButton';
 export { default as SaveButton } from './InteractionButtons/SaveButton';
+export { default as SocialIconButton } from './SocialIconButton';
diff --git a/packages/UI/src/components/organisms/FormField/FormField.tsx b/packages/UI/src/components/organisms/FormField/FormField.tsx
@@ -26,7 +26,7 @@ function FormField({
     <>
       <Label htmlFor={id}>
         <Typography type="label">
-          {label} {required && <span style={{ color: 'red' }}>*</span>}
+          {label} {required && <span css={{ color: 'red' }}>*</span>}
         </Typography>
         <InputWrapper>
           <Input

diff --git a/packages/UI/src/components/organisms/cards/PositionCard/PositionCard.stories.tsx b/packages/UI/src/components/organisms/cards/PositionCard/PositionCard.stories.tsx
@@ -14,7 +14,7 @@ const content = {
   title: 'Web Developer',
   level: 'junior',
   timeCommittment: '5 hrs per week',
-  imgUrl: 'https://picsum.photos/200/300',
+  imgUrl: 'https://images.unsplash.com/photo-1573335553610-a871dfd95bf5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1035&q=80',
   role: ' We are looking for a junior web developer who is willing and eagerto learn various web technologies mainly in the field of React while working within a team of ambitious developers! Our goal is to designa platform that brings people of from a diverse range of specialties together to collaboratively design the best possible software solutions. This project provides a space for people to establish and develop their ideas into working projects with input from others.',
   tags: ['unity', 'react', 'social', 'agile', 'digital media'],
   benifits: [

diff --git a/packages/UI/src/components/organisms/cards/ProductCardLarge/ProductCardLarge.tsx b/packages/UI/src/components/organisms/cards/ProductCardLarge/ProductCardLarge.tsx
@@ -6,6 +6,7 @@ import { typographyStyles } from '../../../atoms/Typography';
 import { LikeButton, SaveButton, ShareButton } from '../../../molecules';
 import { CardDescription } from '../StyledCommonComponents';
 import type { ProductProps } from '.';
+
 const ProductCardLarge = ({
   socialButton,
   defaultButton,

diff --git a/packages/UI/src/components/organisms/cards/StyledCommonComponents.tsx b/packages/UI/src/components/organisms/cards/StyledCommonComponents.tsx
@@ -1,5 +1,5 @@
 import { motion, LazyMotion, domAnimation } from 'framer-motion';
-import { useState, useRef, useLayoutEffect } from 'react';
+import React, { useState, useRef, useLayoutEffect } from 'react';
 import Box from '../../atoms/Box';
 import Tags from '../../atoms/Tags';
 import Typography from '../../atoms/Typography';

diff --git a/packages/UI/src/components/organisms/index.ts b/packages/UI/src/components/organisms/index.ts
@@ -2,3 +2,10 @@ export { default as FormField } from './FormField';
 export { default as OpenResponse } from './OpenResponse';
 export { default as Footer } from './Footer';
 export { default as Navigation } from './Navigation';
+export { default as PositionCard } from './cards/PositionCard';
+export { default as ProductCardLarge } from './cards/ProductCardLarge';
+export { default as ProductCardLong } from './cards/ProductCardLong';
+export { default as UserCard } from './cards/UserCard';
+export { TagsContainer } from './cards/StyledCommonComponents';
+export { CardDescription } from './cards/StyledCommonComponents';
+export { ExpandableBlurb } from './cards/StyledCommonComponents';