alanpcurrie

alanpcurrie

Lead UI Developer at Sopra Steria. Partial to Design Systems & Typography

Member Since 8 years ago

Sopra Steria UK Design Team, United Kingdom

Experience Points
4
follower
Lessons Completed
19
follow
Lessons Completed
244
stars
Best Reply Awards
32
repos

58 contributions in the last year

Pinned
⚡ Testing out React VR 3D and animation
⚡ a Monster stats App built with ReactJS, Meteor.js, Chart.js & Sass
⚡ A dashboard built in Vue and CSS Grid
⚡ :elephant: :movie_camera: A cinema ticket booking system using Laravel
Activity
Dec
6
2 days ago
Activity icon
issue

alanpcurrie issue comment Developer-DAO/developerdao.com

alanpcurrie
alanpcurrie

init storybook | ts config path alias to match sb path alias config

What does it do?

integrate Storybook and it's associated plugins into the exisiting testing strategy

  • include plugin for A11y testing
  • Incude config for Chakra compatability
  • include config for Next router compatability
  • include config for react-i18next compatability
  • include an example component/story: Nav
  • Publish storybook to Chromatic

Added tsconfig path aliases to match the storybook path alias eg:

import Nav from '../../components/Nav';  becomes  import Nav from '@components/Nav';

example usage for consideration accross the whole site on:

 src/layout/Page/index.tsx 

Any helpful background information?

Thinking about the future UI maintainability and testability. Storybook is a potential solution for documentation components and implementing accessibility testing

Storybooks visual regression tool Chromatic can be used along with the unit and e2e tests to maintain quality.

Any new dependencies? Why were they added?

The below are required to setup Storybook and it's asscoiated plugins:

dependencies

 "i18next-browser-languagedetector": "^6.1.2",
 "storybook-addon-i18n": "^5.1.13",
 "storybook-addon-next-router": "^3.0.8",
 "storybook-react-i18next": "^1.0.12",

dev dependencies

"@babel/core": "^7.16.0",
"@storybook/addon-a11y": "^6.3.12",
"@storybook/addon-actions": "^6.3.12",
"@storybook/addon-essentials": "^6.3.12",
"@storybook/addon-links": "^6.3.12",
"@storybook/react": "^6.3.12",
"babel-loader": "^8.2.3",
"chromatic": "^6.0.6",

Relevant screenshots/gifs

Developer-DAO-00-components-Nav-Navigation-Links-⋅-Storybook

Does it close any issues?

No - to complete issue chromatic should be linked to the Developer-DAO github account and intructions to deploy

https://www.chromatic.com/docs/setup

  • Issue with locales switching due to chakra ui decorator incompatibility - disabled locale options from storybook dropdown until a resolution can be found.

Developer-DAO-00-components-Nav-Navigation-Links-⋅-Storybook-err

suggest waiting for a future stoybook release for fix to remove chakra decorator workaround

Closes #173

alanpcurrie
alanpcurrie

Hey @with-heart I've updated the branch from main - the Storybook infra should be ready to rock. Digging the site refresh btw, that gradient accent is 🔥!

Dec
5
3 days ago
Activity icon
fork

alanpcurrie forked buildspace/nft-drop-starter-project

fork time in 2 days ago
Dec
3
5 days ago
Activity icon
issue

alanpcurrie issue comment Developer-DAO/web3-ui

alanpcurrie
alanpcurrie

Add storybook deployments with chromatic

This PR adds automatic Storybook deployments and closes #49

A Preview can be found here

Some things to consider

The free plan includes 5000 snapshots / month. From the docs:

Everytime you run a build, we take one snapshot for each story.
If you have 50 stories, Chromatic will take 50 snapshots.
In addition, testing multiple viewports and browsers are also considered snapshots.

Currently thats the only limitation we might encounter, the free plan allow unlimited seats and collaborator. So we could assign reviewer if there are major UI changes that need approval.

image

Preview Fork deployments

It would be possible to have a deployment deployments for each fork if we want.

TODOs

@with-heart @Dhaiwat10 or someone with access to the Developer-DAO github account has to link the project to chromatic. https://www.chromatic.com/docs/setup

Add chromatics token as secret https://www.chromatic.com/docs/github-actions#forked-repositories

alanpcurrie
alanpcurrie

@etr2460 woohoo! great find! here's the Chromatic opensource request link - https://www.chromatic.com/docs/open-source

Activity icon
issue

alanpcurrie issue comment Developer-DAO/web3-ui

alanpcurrie
alanpcurrie

Add storybook deployments with chromatic

This PR adds automatic Storybook deployments and closes #49

A Preview can be found here

Some things to consider

The free plan includes 5000 snapshots / month. From the docs:

Everytime you run a build, we take one snapshot for each story.
If you have 50 stories, Chromatic will take 50 snapshots.
In addition, testing multiple viewports and browsers are also considered snapshots.

Currently thats the only limitation we might encounter, the free plan allow unlimited seats and collaborator. So we could assign reviewer if there are major UI changes that need approval.

image

Preview Fork deployments

It would be possible to have a deployment deployments for each fork if we want.

TODOs

@with-heart @Dhaiwat10 or someone with access to the Developer-DAO github account has to link the project to chromatic. https://www.chromatic.com/docs/setup

Add chromatics token as secret https://www.chromatic.com/docs/github-actions#forked-repositories

alanpcurrie
alanpcurrie

Hey @Dhaiwat10 & @christiananese the only alternative I'm familiar with is https://percy.io/pricing - It has the same cap and I don't know if the Storybook integration would as slick as Chromatic. imho 5k could let us prove the concept, then try to justify funding, or sponsorship if 5K+ is needed to maintain the quality of the app?

push

alanpcurrie push alanpcurrie/developerdao.com

alanpcurrie
alanpcurrie
alanpcurrie
alanpcurrie
alanpcurrie
alanpcurrie

feat: add breakout and footer

alanpcurrie
alanpcurrie
alanpcurrie
alanpcurrie

style: remove vertical centering on page content

alanpcurrie
alanpcurrie

style: reduce space between headings+paragraphs

alanpcurrie
alanpcurrie
alanpcurrie
alanpcurrie

refactor: make social buttons actual links

alanpcurrie
alanpcurrie

feat: add vercel "powered by" to footer

alanpcurrie
alanpcurrie

style: adjust callout fontsizes

alanpcurrie
alanpcurrie

style: make callout button border solid

alanpcurrie
alanpcurrie
alanpcurrie
alanpcurrie

style: adjust page spacing and padding

alanpcurrie
alanpcurrie
alanpcurrie
alanpcurrie

refactor: move page padding to theme

alanpcurrie
alanpcurrie

style: hide callout icon on sm screens

alanpcurrie
alanpcurrie

style: add responsive spacing

alanpcurrie
alanpcurrie
alanpcurrie
alanpcurrie

refactor: remove unnecessary props

alanpcurrie
alanpcurrie

style: import css for 600-weight "Source Code Pro"

commit sha: 1f9eb207d68c1074db73dbc44d56ba678ce603ec

push time in 5 days ago
push

alanpcurrie push alanpcurrie/developerdao.com

alanpcurrie
alanpcurrie
alanpcurrie
alanpcurrie
alanpcurrie
alanpcurrie

feat: add breakout and footer

alanpcurrie
alanpcurrie
alanpcurrie
alanpcurrie

style: remove vertical centering on page content

alanpcurrie
alanpcurrie

style: reduce space between headings+paragraphs

alanpcurrie
alanpcurrie
alanpcurrie
alanpcurrie

refactor: make social buttons actual links

alanpcurrie
alanpcurrie

feat: add vercel "powered by" to footer

alanpcurrie
alanpcurrie

style: adjust callout fontsizes

alanpcurrie
alanpcurrie

style: make callout button border solid

alanpcurrie
alanpcurrie
alanpcurrie
alanpcurrie

style: adjust page spacing and padding

alanpcurrie
alanpcurrie
alanpcurrie
alanpcurrie

refactor: move page padding to theme

alanpcurrie
alanpcurrie

style: hide callout icon on sm screens

alanpcurrie
alanpcurrie

style: add responsive spacing

alanpcurrie
alanpcurrie
alanpcurrie
alanpcurrie

refactor: remove unnecessary props

alanpcurrie
alanpcurrie

style: import css for 600-weight "Source Code Pro"

commit sha: 7ab8c177431d9bc3100af18f6f4160e5c8524071

push time in 5 days ago
Nov
30
1 week ago
Activity icon
issue

alanpcurrie issue comment codebar/privacy-agreement

alanpcurrie
alanpcurrie

Confidentiality Agreement

Confidentiality Agreement

The short version

  • Do not share our member emails, never!
  • Do not copy member information outside the codebar app unless the third party app is GDPR compliant and provides sufficient privacy policies to ensure that information will never be misused. If in doubt, speak with one of the Directors.
  • You should only distribute the event's members names to hosts when required for building access but never the emails.
  • Any accounts created for your event should be created against the relevant mailing list e.g. [email protected] for London and password information should be distributed through the 1Password account. This is to ensure that at all times only the active organisers and company Directors can access or reset the details of any account.

Background

  • The recipient (you) is currently or will be acting as behalf of codebar in the volunteer position of Organiser.
  • The recipient will receive from codebar, or develop on behalf of codebar, Confidential information as a result of their volunteer work (the ‘Permitted Purpose’).

It is understood and agreed to that the below identified discloser of confidential information may provide certain information that is and must be kept confidential. To ensure the protection of such information, and to preserve any confidentiality necessary under patent and/or trade secret laws, it is agreed that

  1. Confidential information means all data and information relating to the business and management of codebar, including but not limited to, the following:

    1. Customer Information which includes names of members of codebar, all their contact information, contracts and their contents and parties, customer services, data provided by customers and the type, quantity and specifications of products and services purchased, leased, licensed or received by members of codebar.
    2. Confidential information will also include any information that has been disclosed by a third party to codebar and is protected by a non-disclosure agreement entered into between the third party and codebar
  2. The Recipient agrees not to disclose the confidential information obtained from the discloser to anyone unless required to do so by law.

  3. This Agreement states the entire agreement between the parties concerning the disclosure of Confidential Information. Any addition or modification to this Agreement must be made in writing and signed by the parties.

  4. If any of the provisions of this Agreement are found to be unenforceable, the remainder shall be enforced as fully as possible and the unenforceable provision(s) shall be deemed modified to the limited extent required to permit enforcement of the Agreement as a whole.

WHEREFORE, the parties acknowledge that they have read and understand this Agreement and voluntarily accept the duties and obligations set forth herein.

Discloser of Confidential Information:

Name Kimberley Cook, Director Kara De La Marck, Director Krisztina Matyi, Director Priya Patil, Director Despo Pentara, Director Jarkyn Soltobaeva, Director Charlotte Zhao, Director

Signature

Date 25/07/2018

Recipient of Confidential Information:

Please comment with your full name and state I AGREE in the comments to sign this document

Activity icon
issue

alanpcurrie issue comment Developer-DAO/developerdao.com

alanpcurrie
alanpcurrie

init storybook | ts config path alias to match sb path alias config

What does it do?

integrate Storybook and it's associated plugins into the exisiting testing strategy

  • include plugin for A11y testing
  • Incude config for Chakra compatability
  • include config for Next router compatability
  • include config for react-i18next compatability
  • include an example component/story: Nav
  • Publish storybook to Chromatic

Added tsconfig path aliases to match the storybook path alias eg:

import Nav from '../../components/Nav';  becomes  import Nav from '@components/Nav';

example usage for consideration accross the whole site on:

 src/layout/Page/index.tsx 

Any helpful background information?

Thinking about the future UI maintainability and testability. Storybook is a potential solution for documentation components and implementing accessibility testing

Storybooks visual regression tool Chromatic can be used along with the unit and e2e tests to maintain quality.

Any new dependencies? Why were they added?

The below are required to setup Storybook and it's asscoiated plugins:

dependencies

 "i18next-browser-languagedetector": "^6.1.2",
 "storybook-addon-i18n": "^5.1.13",
 "storybook-addon-next-router": "^3.0.8",
 "storybook-react-i18next": "^1.0.12",

dev dependencies

"@babel/core": "^7.16.0",
"@storybook/addon-a11y": "^6.3.12",
"@storybook/addon-actions": "^6.3.12",
"@storybook/addon-essentials": "^6.3.12",
"@storybook/addon-links": "^6.3.12",
"@storybook/react": "^6.3.12",
"babel-loader": "^8.2.3",
"chromatic": "^6.0.6",

Relevant screenshots/gifs

Developer-DAO-00-components-Nav-Navigation-Links-⋅-Storybook

Does it close any issues?

No - to complete issue chromatic should be linked to the Developer-DAO github account and intructions to deploy

https://www.chromatic.com/docs/setup

  • Issue with locales switching due to chakra ui decorator incompatibility - disabled locale options from storybook dropdown until a resolution can be found.

Developer-DAO-00-components-Nav-Navigation-Links-⋅-Storybook-err

suggest waiting for a future stoybook release for fix to remove chakra decorator workaround

Closes #173

alanpcurrie
alanpcurrie

hey @with-heart I've updated the feature branch from the latest main, what are you thinking about getting this on? I know there's a hold on the website, but this one feels like it's a bit in limbo as it's not dependant on new UI work, and useful to have in place for the shiny new UI. I'm thinking I could do the same for the job board as it's pretty much the same config? I held off raising the issues for the path alias and chromatic stuff pending the hold removal - are these worth getting on for visibility?

Nov
29
1 week ago
push

alanpcurrie push alanpcurrie/developerdao.com

alanpcurrie
alanpcurrie

added pixel avatars to project list

alanpcurrie
alanpcurrie

Developer DAO Pixel Avatars added

alanpcurrie
alanpcurrie

chore: install react-icons

Co-authored-by: Orlundo Hubbard [email protected] Co-authored-by: Josh Stein [email protected]

alanpcurrie
alanpcurrie

refactor: remove unnecessary Fragment

Co-authored-by: Orlundo Hubbard [email protected] Co-authored-by: Josh Stein [email protected]

alanpcurrie
alanpcurrie

fix: restored old logo link

Co-authored-by: Orlundo Hubbard [email protected] Co-authored-by: Josh Stein [email protected]

alanpcurrie
alanpcurrie

fix: fix desktop github icon link

Co-authored-by: Orlundo Hubbard [email protected] Co-authored-by: Josh Stein [email protected]

alanpcurrie
alanpcurrie

refactor: add a elements to Links

Co-authored-by: Orlundo Hubbard [email protected] Co-authored-by: Josh Stein [email protected]

alanpcurrie
alanpcurrie

style: restore desktop navbar link spacing

Co-authored-by: Orlundo Hubbard [email protected] Co-authored-by: Josh Stein [email protected]

alanpcurrie
alanpcurrie

style: restore previous navbar look

Co-authored-by: Orlundo Hubbard [email protected] Co-authored-by: Josh Stein [email protected]

alanpcurrie
alanpcurrie

refactor: use sensible component name

alanpcurrie
alanpcurrie

style: remove top gap on mobile nav

alanpcurrie
alanpcurrie

docs: update README.md [skip ci]

alanpcurrie
alanpcurrie

docs: update .all-contributorsrc [skip ci]

alanpcurrie
alanpcurrie

Merge pull request #191 from mbuxmann/add-pixel-avatars-project

Add pixel avatars project

alanpcurrie
alanpcurrie

Merge pull request #192 from Developer-DAO/all-contributors/add-mbuxmann

docs: add mbuxmann as a contributor for code

alanpcurrie
alanpcurrie
alanpcurrie
alanpcurrie
alanpcurrie
alanpcurrie

Merge pull request #169 from theprojectcode/orlundos-branch

responsive navbar

alanpcurrie
alanpcurrie

[i18n/pt] add pt-br strings to default pt

commit sha: 30433acccfb61613cf0c3ca258c53206c5a7a33c

push time in 1 week ago
push

alanpcurrie push alanpcurrie/developerdao.com

alanpcurrie
alanpcurrie

added pixel avatars to project list

alanpcurrie
alanpcurrie

Developer DAO Pixel Avatars added

alanpcurrie
alanpcurrie

chore: install react-icons

Co-authored-by: Orlundo Hubbard [email protected] Co-authored-by: Josh Stein [email protected]

alanpcurrie
alanpcurrie

refactor: remove unnecessary Fragment

Co-authored-by: Orlundo Hubbard [email protected] Co-authored-by: Josh Stein [email protected]

alanpcurrie
alanpcurrie

fix: restored old logo link

Co-authored-by: Orlundo Hubbard [email protected] Co-authored-by: Josh Stein [email protected]

alanpcurrie
alanpcurrie

fix: fix desktop github icon link

Co-authored-by: Orlundo Hubbard [email protected] Co-authored-by: Josh Stein [email protected]

alanpcurrie
alanpcurrie

refactor: add a elements to Links

Co-authored-by: Orlundo Hubbard [email protected] Co-authored-by: Josh Stein [email protected]

alanpcurrie
alanpcurrie

style: restore desktop navbar link spacing

Co-authored-by: Orlundo Hubbard [email protected] Co-authored-by: Josh Stein [email protected]

alanpcurrie
alanpcurrie

style: restore previous navbar look

Co-authored-by: Orlundo Hubbard [email protected] Co-authored-by: Josh Stein [email protected]

alanpcurrie
alanpcurrie

refactor: use sensible component name

alanpcurrie
alanpcurrie

style: remove top gap on mobile nav

alanpcurrie
alanpcurrie

docs: update README.md [skip ci]

alanpcurrie
alanpcurrie

docs: update .all-contributorsrc [skip ci]

alanpcurrie
alanpcurrie

Merge pull request #191 from mbuxmann/add-pixel-avatars-project

Add pixel avatars project

alanpcurrie
alanpcurrie

Merge pull request #192 from Developer-DAO/all-contributors/add-mbuxmann

docs: add mbuxmann as a contributor for code

alanpcurrie
alanpcurrie
alanpcurrie
alanpcurrie
alanpcurrie
alanpcurrie

Merge pull request #169 from theprojectcode/orlundos-branch

responsive navbar

alanpcurrie
alanpcurrie

[i18n/pt] add pt-br strings to default pt

commit sha: cd7f78b8309f941573ce93a82fa6796766977384

push time in 1 week ago
Nov
27
1 week ago
Nov
26
1 week ago
Activity icon
issue

alanpcurrie issue comment Developer-DAO/developerdao.com

alanpcurrie
alanpcurrie

[Feature]: Storybook for UI Component testing

Context / Background / How This Idea Came To Fruition

Thinking about the future UI maintainability and testability. Storybook is a potential solution for documentation components and implementing accessibility testing

Storybooks visual regression tool Chromatic can be used along with the unit and e2e tests to maintain quality.

Problem / Opportunity

As the system grows, a source of truth documenting component styles and use will be useful for visual consistency code style, accessibility, and re-use.

Storybook can be used in conjunction with Figma to maintain a brand style guide and create a collaborative experience between Designers and Developers on the team, creating a shared design language

It will help to keep the site maintainable as we scale

Proposed Solution / How It Can Be Improved

integrate Storybook and it's associated plugins into the exisiting testing strategy

  • include plugin for A11y testing
  • Incude config for Chakra compatability
  • include config for Next router compatability
  • include config for react-i18next compatability
  • include an example component/story: Nav
  • Publish storybook to Chromatic

Developer-DAO-Nav-Navigation-Links-⋅-Storybook(1)

Testing the changes

As a developer DAO website contributor, I expect to be able to view React components on a dedicated Storybook Chromatic URL, so that I can view component documentation, styles, A11y test output, and regression test output.

Local testing can be carried out on http://localhost:6006/ by running yarn storybook

Additional Information

Useful storybook links:

https://storybook.js.org/ https://storybook.js.org/addons/@storybook/addon-a11y https://storybook.js.org/addons/storybook-figma https://www.chromatic.com/ https://www.chromatic.com/compare/vercel

alanpcurrie
alanpcurrie

Hey folks, it's in no way coupled to the previous ui. It's the config that's valuable here. @with-heart I've pushed changes addressing your comments

Nov
16
3 weeks ago
push

alanpcurrie push alanpcurrie/developerdao.com

alanpcurrie
alanpcurrie

fix(chore): fix some characters for zh-CN

alanpcurrie
alanpcurrie

feat: add tokens sold out celebration

alanpcurrie
alanpcurrie

Merge pull request #179 from Developer-DAO/mint-sell-out-celebration

feat: add tokens sold out celebration

alanpcurrie
alanpcurrie

feat(gitingore): ignore .idea

alanpcurrie
alanpcurrie

fix(locales): change 请 to 請

alanpcurrie
alanpcurrie

fix(locales): add space between

alanpcurrie
alanpcurrie

refactor(locales): update description for zh-TW

alanpcurrie
alanpcurrie

refactor(locales): update unclaimed for zh-TW

alanpcurrie
alanpcurrie

refactor(locales): update copyLinkToNFT for zh-TW

alanpcurrie
alanpcurrie

refactor(locales): update linkCopied for zh-TW

alanpcurrie
alanpcurrie

refactor(locales): update by for zh-TW

alanpcurrie
alanpcurrie

fix(locales): update noOtherTokens for zh-TW

alanpcurrie
alanpcurrie

fix(locales): update otherTokensOwnedByThisAddress for zh-TW

alanpcurrie
alanpcurrie

fix(locals): update madeBy for zh-TW

alanpcurrie
alanpcurrie

refactor(locales): update loading for tw-TW

alanpcurrie
alanpcurrie

fix(locals): update projects for zh-TW

alanpcurrie
alanpcurrie

refactor(locales): update noOtherTokens for zh-TW

alanpcurrie
alanpcurrie

chore: run prettier after generating types

alanpcurrie
alanpcurrie

chore: add plausible.io analytics

alanpcurrie
alanpcurrie

fix: call withPlausibleProxy to initialize

commit sha: 5a66a9a20b6220e359567d61bc47abba8177d874

push time in 3 weeks ago
push

alanpcurrie push alanpcurrie/developerdao.com

alanpcurrie
alanpcurrie

chore: add plausible.io analytics

alanpcurrie
alanpcurrie

fix: call withPlausibleProxy to initialize

alanpcurrie
alanpcurrie

refactor: check Vercel env for rendering plausible

alanpcurrie
alanpcurrie

docs(README): add deployment and NEXT_PUBLIC_VERCEL_ENV note

alanpcurrie
alanpcurrie

docs: update README.md [skip ci]

alanpcurrie
alanpcurrie

docs: update .all-contributorsrc [skip ci]

alanpcurrie
alanpcurrie
alanpcurrie
alanpcurrie

Merge pull request #190 from Developer-DAO/all-contributors/add-G3root

alanpcurrie
alanpcurrie

Merge pull request #183 from Developer-DAO/add-plausible-analytics

commit sha: 97445333f546bd6f28d1abfc65d6c83a5b95ddea

push time in 3 weeks ago
Nov
15
3 weeks ago
push

alanpcurrie push alanpcurrie/developerdao.com

alanpcurrie
alanpcurrie

fix(chore): fix some characters for zh-CN

alanpcurrie
alanpcurrie

feat(gitingore): ignore .idea

alanpcurrie
alanpcurrie

fix(locales): change 请 to 請

alanpcurrie
alanpcurrie

fix(locales): add space between

alanpcurrie
alanpcurrie

refactor(locales): update description for zh-TW

alanpcurrie
alanpcurrie

refactor(locales): update unclaimed for zh-TW

alanpcurrie
alanpcurrie

refactor(locales): update copyLinkToNFT for zh-TW

alanpcurrie
alanpcurrie

refactor(locales): update linkCopied for zh-TW

alanpcurrie
alanpcurrie

refactor(locales): update by for zh-TW

alanpcurrie
alanpcurrie

fix(locales): update noOtherTokens for zh-TW

alanpcurrie
alanpcurrie

fix(locales): update otherTokensOwnedByThisAddress for zh-TW

alanpcurrie
alanpcurrie

fix(locals): update madeBy for zh-TW

alanpcurrie
alanpcurrie

refactor(locales): update loading for tw-TW

alanpcurrie
alanpcurrie

fix(locals): update projects for zh-TW

alanpcurrie
alanpcurrie

refactor(locales): update noOtherTokens for zh-TW

alanpcurrie
alanpcurrie

chore: run prettier after generating types

alanpcurrie
alanpcurrie

Merge pull request #182 from Developer-DAO/run-prettier-on-generate-types

alanpcurrie
alanpcurrie

Merge pull request #181 from amazingandyyy/fix-zh-tw

alanpcurrie
alanpcurrie

docs: update README.md [skip ci]

alanpcurrie
alanpcurrie

docs: update .all-contributorsrc [skip ci]

commit sha: c4f28e89b02d50440e43a64ec6d36540906723bd

push time in 3 weeks ago
Activity icon
issue

alanpcurrie issue comment Developer-DAO/developerdao.com

alanpcurrie
alanpcurrie

init storybook | ts config path alias to match sb path alias config

What does it do?

integrate Storybook and it's associated plugins into the exisiting testing strategy

  • include plugin for A11y testing
  • Incude config for Chakra compatability
  • include config for Next router compatability
  • include config for react-i18next compatability
  • include an example component/story: Nav
  • Publish storybook to Chromatic

Added tsconfig path aliases to match the storybook path alias eg:

import Nav from '../../components/Nav';  becomes  import Nav from '@components/Nav';

example usage for consideration accross the whole site on:

 src/layout/Page/index.tsx 

Any helpful background information?

Thinking about the future UI maintainability and testability. Storybook is a potential solution for documentation components and implementing accessibility testing

Storybooks visual regression tool Chromatic can be used along with the unit and e2e tests to maintain quality.

Any new dependencies? Why were they added?

The below are required to setup Storybook and it's asscoiated plugins:

dependencies

 "i18next-browser-languagedetector": "^6.1.2",
 "storybook-addon-i18n": "^5.1.13",
 "storybook-addon-next-router": "^3.0.8",
 "storybook-react-i18next": "^1.0.12",

dev dependencies

"@babel/core": "^7.16.0",
"@storybook/addon-a11y": "^6.3.12",
"@storybook/addon-actions": "^6.3.12",
"@storybook/addon-essentials": "^6.3.12",
"@storybook/addon-links": "^6.3.12",
"@storybook/react": "^6.3.12",
"babel-loader": "^8.2.3",
"chromatic": "^6.0.6",

Relevant screenshots/gifs

Developer-DAO-00-components-Nav-Navigation-Links-⋅-Storybook

Does it close any issues?

No - to complete issue chromatic should be linked to the Developer-DAO github account and intructions to deploy

https://www.chromatic.com/docs/setup

  • Issue with locales switching due to chakra ui decorator incompatibility - disabled locale options from storybook dropdown until a resolution can be found.

Developer-DAO-00-components-Nav-Navigation-Links-⋅-Storybook-err

suggest waiting for a future stoybook release for fix to remove chakra decorator workaround

Closes #173

alanpcurrie
alanpcurrie

Appreciate the feedback, thanks @with-heart. I'll take care of all the above, and create separate issues for path aliases, and Chromatic integration. 100% agree - let's get Storybook up and running, for the Readme.md edit, apologies it was indeed unintentional 🤦

Nov
14
3 weeks ago
push

alanpcurrie push alanpcurrie/developerdao.com

alanpcurrie
alanpcurrie

feat: add tokens sold out celebration

alanpcurrie
alanpcurrie

Merge pull request #179 from Developer-DAO/mint-sell-out-celebration

feat: add tokens sold out celebration

commit sha: d5a5ef67d65c76ec4c3c6d8ce98ec5eeb8ba0334

push time in 3 weeks ago
Nov
11
3 weeks ago
Activity icon
issue

alanpcurrie issue comment Developer-DAO/developerdao.com

alanpcurrie
alanpcurrie

[Feature]: Storybook for UI Component testing

Context / Background / How This Idea Came To Fruition

Thinking about the future UI maintainability and testability. Storybook is a potential solution for documentation components and implementing accessibility testing

Storybooks visual regression tool Chromatic can be used along with the unit and e2e tests to maintain quality.

Problem / Opportunity

As the system grows, a source of truth documenting component styles and use will be useful for visual consistency code style, accessibility, and re-use.

Storybook can be used in conjunction with Figma to maintain a brand style guide and create a collaborative experience between Designers and Developers on the team, creating a shared design language

It will help to keep the site maintainable as we scale

Proposed Solution / How It Can Be Improved

integrate Storybook and it's associated plugins into the exisiting testing strategy

  • include plugin for A11y testing
  • Incude config for Chakra compatability
  • include config for Next router compatability
  • include config for react-i18next compatability
  • include an example component/story: Nav
  • Publish storybook to Chromatic

Developer-DAO-Nav-Navigation-Links-⋅-Storybook(1)

Testing the changes

As a developer DAO website contributor, I expect to be able to view React components on a dedicated Storybook Chromatic URL, so that I can view component documentation, styles, A11y test output, and regression test output.

Local testing can be carried out on http://localhost:6006/ by running yarn storybook

Additional Information

Useful storybook links:

https://storybook.js.org/ https://storybook.js.org/addons/@storybook/addon-a11y https://storybook.js.org/addons/storybook-figma https://www.chromatic.com/ https://www.chromatic.com/compare/vercel

alanpcurrie
alanpcurrie

Hey folks, I've put a draft PR. Thought it was worth discussing the locale switching / Chakra issue that I ran into, to see if we can get it merged prior to a fix.

Essentially - ee can have locale switching, or chakra styling with the current config, styling felt more important for now. worth a conversation though

I have also added typescript path aliases to match the Storybook path aliases - they make components imports nice and clean, again, worth a chat to see if other folks agree, if there is a preferred path alias format than @components/ maybe just components/ for example

@with-heartchromatic Chromatic would be linked to the Developer-DAO github account and intructions to deploy are below

https://www.chromatic.com/docs/setup,

happy to work with you, and the team to set it up

pull request

alanpcurrie pull request Developer-DAO/developerdao.com

alanpcurrie
alanpcurrie

init storybook | ts config path alias to match sb path alias config

What does it do?

integrate Storybook and it's associated plugins into the exisiting testing strategy

  • include plugin for A11y testing
  • Incude config for Chakra compatability
  • include config for Next router compatability
  • include config for react-i18next compatability
  • include an example component/story: Nav
  • Publish storybook to Chromatic

Added tsconfig path aliases to match the storybook path alias eg:

import Nav from '../../components/Nav';  becomes  import Nav from '@components/Nav';

example usage for consideration accross the whole site on:

 src/layout/Page/index.tsx 

Any helpful background information?

Thinking about the future UI maintainability and testability. Storybook is a potential solution for documentation components and implementing accessibility testing

Storybooks visual regression tool Chromatic can be used along with the unit and e2e tests to maintain quality.

Any new dependencies? Why were they added?

The below are required to setup Storybook and it's asscoiated plugins:

dependencies

 "i18next-browser-languagedetector": "^6.1.2",
 "storybook-addon-i18n": "^5.1.13",
 "storybook-addon-next-router": "^3.0.8",
 "storybook-react-i18next": "^1.0.12",

dev dependencies

"@babel/core": "^7.16.0",
"@storybook/addon-a11y": "^6.3.12",
"@storybook/addon-actions": "^6.3.12",
"@storybook/addon-essentials": "^6.3.12",
"@storybook/addon-links": "^6.3.12",
"@storybook/react": "^6.3.12",
"babel-loader": "^8.2.3",
"chromatic": "^6.0.6",

Relevant screenshots/gifs

Developer-DAO-00-components-Nav-Navigation-Links-⋅-Storybook

Does it close any issues?

No - to complete issue chromatic should be linked to the Developer-DAO github account and intructions to deploy

https://www.chromatic.com/docs/setup

  • Issue with locales switching due to chakra ui decorator incompatibility - disabled locale options from storybook dropdown until a resolution can be found.

Developer-DAO-00-components-Nav-Navigation-Links-⋅-Storybook-err

suggest waiting for a future stoybook release for fix to remove chakra decorator workaround

Closes #173

Activity icon
created branch
createdAt 3 weeks ago
Activity icon
fork

alanpcurrie forked Developer-DAO/developerdao.com

⚡ A community of builders who believe in collective ownership of the internet
alanpcurrie MIT License Updated
fork time in 3 weeks ago
Nov
8
1 month ago
Activity icon
issue

alanpcurrie issue comment Developer-DAO/developerdao.com

alanpcurrie
alanpcurrie

[Feature]: Storybook for UI Component testing

Context / Background / How This Idea Came To Fruition

Thinking about the future UI maintainability and testability. Storybook is a potential solution for documentation components and implementing accessibility testing

Storybooks visual regression tool Chromatic can be used along with the unit and e2e tests to maintain quality.

Problem / Opportunity

As the system grows, a source of truth documenting component styles and use will be useful for visual consistency code style, accessibility, and re-use.

Storybook can be used in conjunction with Figma to maintain a brand style guide and create a collaborative experience between Designers and Developers on the team, creating a shared design language

It will help to keep the site maintainable as we scale

Proposed Solution / How It Can Be Improved

integrate Storybook and it's associated plugins into the exisiting testing strategy

  • include plugin for A11y testing
  • Incude config for Chakra compatability
  • include config for Next router compatability
  • include config for react-i18next compatability
  • include an example component/story: Nav
  • Publish storybook to Chromatic

Developer-DAO-Nav-Navigation-Links-⋅-Storybook(1)

Testing the changes

As a developer DAO website contributor, I expect to be able to view React components on a dedicated Storybook Chromatic URL, so that I can view component documentation, styles, A11y test output, and regression test output.

Local testing can be carried out on http://localhost:6006/ by running yarn storybook

Additional Information

Useful storybook links:

https://storybook.js.org/ https://storybook.js.org/addons/@storybook/addon-a11y https://storybook.js.org/addons/storybook-figma https://www.chromatic.com/ https://www.chromatic.com/compare/vercel

alanpcurrie
alanpcurrie

Hey @with-heart can you review, if you're happy with the request, assign it to me please? Please add anything that I might have missed

Activity icon
issue

alanpcurrie issue Developer-DAO/developerdao.com

alanpcurrie
alanpcurrie

[Feature]: Storybook for UI Component testing

Context / Background / How This Idea Came To Fruition

Thinking about the future UI maintainability and testability. Storybook is a potential solution for documentation components and implementing accessibility testing

Storybooks visual regression tool Chromatic can be used along with the unit and e2e tests to maintain quality.

Problem / Opportunity

As the system grows, a source of truth documenting component styles and use will be useful for visual consistency code style, accessibility, and re-use.

Storybook can be used in conjunction with Figma to maintain a brand style guide and create a collaborative experience between Designers and Developers on the team, creating a shared design language

It will help to keep the site maintainable as we scale

Proposed Solution / How It Can Be Improved

integrate Storybook and it's associated plugins into the exisiting testing strategy

  • include plugin for A11y testing
  • Incude config for Chakra compatability
  • include config for Next router compatability
  • include config for react-i18next compatability
  • include an example component/story: Nav
  • Publish storybook to Chromatic

Developer-DAO-Nav-Navigation-Links-⋅-Storybook(1)

Testing the changes

As a developer DAO website contributor, I expect to be able to view React components on a dedicated Storybook Chromatic URL, so that I can view component documentation, styles, A11y test output, and regression test output.

Local testing can be carried out on http://localhost:6006/ by running yarn storybook

Additional Information

Useful storybook links:

https://storybook.js.org/ https://storybook.js.org/addons/@storybook/addon-a11y https://storybook.js.org/addons/storybook-figma https://www.chromatic.com/ https://www.chromatic.com/compare/vercel

Previous