ഫ്രണ്ട്എൻഡ് സ്റ്റോറിബുക്ക്: കമ്പോണൻ്റ് ഡെവലപ്മെൻ്റ് എൻവയോൺമെൻ്റുകൾക്കുള്ള ഒരു സമഗ്ര ഗൈഡ്

എല്ലായ്‌പ്പോഴും മാറിക്കൊണ്ടിരിക്കുന്ന ഫ്രണ്ട്എൻഡ് ഡെവലപ്മെൻ്റ് രംഗത്ത്, കരുത്തുറ്റതും പരിപാലിക്കാൻ എളുപ്പമുള്ളതുമായ യൂസർ ഇൻ്റർഫേസുകൾ (UIs) നിർമ്മിക്കുന്നത് വളരെ പ്രധാനമാണ്. ഈ വെല്ലുവിളി നേരിടാൻ സഹായിക്കുന്ന ഒരു പ്രമുഖ ടൂളായി സ്റ്റോറിബുക്ക് ഉയർന്നുവന്നിരിക്കുന്നു. യുഐ കമ്പോണൻ്റുകൾ ഒറ്റക്ക് വികസിപ്പിക്കുന്നതിന് ഇത് ശക്തമായ ഒരു സാഹചര്യം ഒരുക്കുന്നു. ഈ ഗൈഡ് സ്റ്റോറിബുക്കിനെക്കുറിച്ച് സമഗ്രമായ ഒരു പര്യവേക്ഷണം വാഗ്ദാനം ചെയ്യുന്നു, അതിൻ്റെ പ്രധാന ആശയങ്ങൾ, പ്രയോജനങ്ങൾ, പ്രായോഗികമായ നടപ്പാക്കൽ, നിങ്ങളുടെ ഫ്രണ്ട്എൻഡ് ഡെവലപ്മെൻ്റ് വർക്ക്ഫ്ലോ മെച്ചപ്പെടുത്തുന്നതിനുള്ള നൂതന വിദ്യകൾ എന്നിവ ഇതിൽ ഉൾപ്പെടുന്നു.

എന്താണ് സ്റ്റോറിബുക്ക്?

യുഐ കമ്പോണൻ്റുകൾ ഒറ്റക്ക് വികസിപ്പിക്കുന്നതിനുള്ള ഒരു ഓപ്പൺ സോഴ്‌സ് ടൂളാണ് സ്റ്റോറിബുക്ക്. നിങ്ങളുടെ പ്രധാന ആപ്ലിക്കേഷനിൽ നിന്ന് സ്വതന്ത്രമായി കമ്പോണൻ്റുകൾ നിർമ്മിക്കാനും പരീക്ഷിക്കാനും ഡോക്യുമെൻ്റ് ചെയ്യാനും കഴിയുന്ന ഒരു പ്രത്യേക സാഹചര്യം ഇത് നൽകുന്നു. ഈ ഒറ്റപ്പെടൽ, സങ്കീർണ്ണമായ ആപ്ലിക്കേഷൻ ലോജിക്കുകളോ ഡിപെൻഡൻസികളോ തടസ്സപ്പെടുത്താതെ, കമ്പോണൻ്റിൻ്റെ പ്രവർത്തനത്തിലും രൂപത്തിലും ശ്രദ്ധ കേന്ദ്രീകരിക്കാൻ നിങ്ങളെ സഹായിക്കുന്നു.

നിങ്ങളുടെ യുഐ കമ്പോണൻ്റുകൾ ദൃശ്യപരമായി പ്രദർശിപ്പിക്കുന്ന ഒരു ലൈവ് സ്റ്റൈൽ ഗൈഡ് അല്ലെങ്കിൽ കമ്പോണൻ്റ് ലൈബ്രറിയായി സ്റ്റോറിബുക്കിനെ കണക്കാക്കാം. ഇത് ഡെവലപ്പർമാർക്കും ഡിസൈനർമാർക്കും മറ്റ് പങ്കാളികൾക്കും സ്ഥിരതയുള്ളതും ചിട്ടയുള്ളതുമായ രീതിയിൽ കമ്പോണൻ്റുകൾ ബ്രൗസ് ചെയ്യാനും അവയുമായി സംവദിക്കാനും അനുവദിക്കുന്നു, ഇത് സഹകരണത്തെ പ്രോത്സാഹിപ്പിക്കുകയും യുഐയെക്കുറിച്ച് പൊതുവായ ഒരു ധാരണ ഉറപ്പാക്കുകയും ചെയ്യുന്നു.

എന്തിന് സ്റ്റോറിബുക്ക് ഉപയോഗിക്കണം? പ്രയോജനങ്ങൾ

നിങ്ങളുടെ ഫ്രണ്ട്എൻഡ് ഡെവലപ്മെൻ്റ് വർക്ക്ഫ്ലോയിൽ സ്റ്റോറിബുക്ക് സംയോജിപ്പിക്കുന്നത് നിരവധി പ്രയോജനങ്ങൾ നൽകുന്നു:

• മെച്ചപ്പെട്ട കമ്പോണൻ്റ് പുനരുപയോഗം: കമ്പോണൻ്റുകൾ ഒറ്റക്ക് വികസിപ്പിക്കുന്നത് ഒരു മോഡുലാർ സമീപനത്തെ പ്രോത്സാഹിപ്പിക്കുന്നു, ഇത് നിങ്ങളുടെ ആപ്ലിക്കേഷൻ്റെ വിവിധ ഭാഗങ്ങളിലോ ഒന്നിലധികം പ്രോജക്റ്റുകളിലോ അവയെ കൂടുതൽ പുനരുപയോഗിക്കാൻ സഹായിക്കുന്നു.
• വർധിച്ച വികസന വേഗത: മുഴുവൻ ആപ്ലിക്കേഷനും പ്രവർത്തിപ്പിക്കുന്നതിൻ്റെ ഭാരമില്ലാതെ വ്യക്തിഗത കമ്പോണൻ്റുകളിൽ ശ്രദ്ധ കേന്ദ്രീകരിക്കാൻ നിങ്ങളെ അനുവദിക്കുന്നതിലൂടെ സ്റ്റോറിബുക്ക് വികസനത്തിന് വേഗത കൂട്ടുന്നു. കമ്പോണൻ്റ് ഡിസൈനുകളിലും പ്രവർത്തനങ്ങളിലും നിങ്ങൾക്ക് വേഗത്തിൽ മാറ്റങ്ങൾ വരുത്താൻ കഴിയും.
• ലളിതമായ ടെസ്റ്റിംഗ്: വിവിധ അവസ്ഥകളിലും സാഹചര്യങ്ങളിലും കമ്പോണൻ്റുകൾ പരീക്ഷിക്കുന്നത് സ്റ്റോറിബുക്ക് എളുപ്പമാക്കുന്നു. വ്യത്യസ്ത ഉപയോഗങ്ങളെ പ്രതിനിധീകരിക്കുന്ന സ്റ്റോറികൾ ഉണ്ടാക്കാനും കമ്പോണൻ്റ് പ്രതീക്ഷിച്ചപോലെ പ്രവർത്തിക്കുന്നുണ്ടോയെന്ന് ദൃശ്യപരമായി പരിശോധിക്കാനും നിങ്ങൾക്ക് കഴിയും.
• സമഗ്രമായ ഡോക്യുമെൻ്റേഷൻ: നിങ്ങളുടെ യുഐ കമ്പോണൻ്റുകൾക്ക് ഒരു ലൈവ് ഡോക്യുമെൻ്റേഷനായി സ്റ്റോറിബുക്ക് പ്രവർത്തിക്കുന്നു. ഇത് നിങ്ങളുടെ കമ്പോണൻ്റ് കോഡിൽ നിന്നും സ്റ്റോറികളിൽ നിന്നും സ്വയമേവ ഡോക്യുമെൻ്റേഷൻ ഉണ്ടാക്കുന്നു, ഇത് മറ്റുള്ളവർക്ക് അവ എങ്ങനെ ഉപയോഗിക്കാമെന്നും ഇഷ്ടാനുസൃതമാക്കാമെന്നും മനസ്സിലാക്കുന്നത് എളുപ്പമാക്കുന്നു.
• മെച്ചപ്പെട്ട സഹകരണം: ഡെവലപ്പർമാർക്കും ഡിസൈനർമാർക്കും മറ്റ് പങ്കാളികൾക്കും യുഐ കമ്പോണൻ്റുകളിൽ സഹകരിക്കുന്നതിന് സ്റ്റോറിബുക്ക് ഒരു കേന്ദ്രീകൃത ഇടം നൽകുന്നു. ഇത് ദൃശ്യപരമായ അവലോകനങ്ങൾക്കും ഫീഡ്‌ബെക്കിനും യുഐ ലൈബ്രറിയെക്കുറിച്ച് പൊതുവായ ധാരണയ്ക്കും വഴിയൊരുക്കുന്നു.
• പ്രശ്നങ്ങൾ നേരത്തെ കണ്ടെത്തൽ: കമ്പോണൻ്റുകൾ ഒറ്റക്ക് വികസിപ്പിക്കുന്നതിലൂടെ, വികസന ചക്രത്തിൻ്റെ തുടക്കത്തിൽ തന്നെ പ്രശ്നങ്ങൾ കണ്ടെത്താനും പരിഹരിക്കാനും കഴിയും, അവ കൂടുതൽ സങ്കീർണ്ണവും പരിഹരിക്കാൻ ചെലവേറിയതുമാകുന്നതിന് മുമ്പ്.
• ഡിസൈൻ സിസ്റ്റം സ്ഥിരത: എല്ലാ യുഐ കമ്പോണൻ്റുകൾക്കും ഒരു വിഷ്വൽ റഫറൻസ് നൽകിക്കൊണ്ട് സ്റ്റോറിബുക്ക് ഡിസൈൻ സിസ്റ്റം സ്ഥിരതയെ പ്രോത്സാഹിപ്പിക്കുന്നു. കമ്പോണൻ്റുകൾ ഡിസൈൻ മാർഗ്ഗനിർദ്ദേശങ്ങൾ പാലിക്കുന്നുണ്ടെന്നും ആപ്ലിക്കേഷനിലുടനീളം ഒരേ രൂപവും ഭാവവും നിലനിർത്തുന്നുവെന്നും ഇത് ഉറപ്പാക്കുന്നു.

സ്റ്റോറിബുക്ക് ഉപയോഗിച്ച് തുടങ്ങാം

സ്റ്റോറിബുക്ക് സജ്ജീകരിക്കുന്നത് വളരെ എളുപ്പമാണ്, ഇത് റിയാക്റ്റ്, വ്യൂ, ആംഗുലർ പോലുള്ള പ്രശസ്തമായ ഫ്രണ്ട്എൻഡ് ഫ്രെയിംവർക്കുകളുമായി പരിധികളില്ലാതെ സംയോജിക്കുന്നു.

ഇൻസ്റ്റാളേഷൻ

കമാൻഡ്-ലൈൻ ഇൻ്റർഫേസ് (CLI) ഉപയോഗിക്കുന്നതാണ് സ്റ്റോറിബുക്ക് ഇൻസ്റ്റാൾ ചെയ്യാനുള്ള ഏറ്റവും എളുപ്പ മാർഗം. നിങ്ങളുടെ ടെർമിനൽ തുറന്ന് പ്രോജക്റ്റ് ഡയറക്ടറിയിലേക്ക് പോകുക. തുടർന്ന്, താഴെ പറയുന്ന കമാൻഡ് പ്രവർത്തിപ്പിക്കുക:

            npx storybook init
            

              
                Copy
              
            
          

ഈ കമാൻഡ് നിങ്ങളുടെ പ്രോജക്റ്റിൻ്റെ ഫ്രെയിംവർക്ക് സ്വയമേവ കണ്ടെത്തുകയും ആവശ്യമായ ഡിപെൻഡൻസികൾ ഇൻസ്റ്റാൾ ചെയ്യുകയും ചെയ്യും. ഇത് നിങ്ങളുടെ പ്രോജക്റ്റിൽ ഒരു .storybook ഡയറക്ടറിയും ഉണ്ടാക്കും, അതിൽ സ്റ്റോറിബുക്കിൻ്റെ കോൺഫിഗറേഷൻ ഫയലുകൾ അടങ്ങിയിരിക്കും.

നിങ്ങളുടെ ആദ്യ സ്റ്റോറി ഉണ്ടാക്കുന്നു

സ്റ്റോറിബുക്കിലെ ഒരു "സ്റ്റോറി" ഒരു കമ്പോണൻ്റിൻ്റെ ഒരു പ്രത്യേക അവസ്ഥയെയോ ഉപയോഗത്തെയോ പ്രതിനിധീകരിക്കുന്നു. ഒരു സ്റ്റോറി ഉണ്ടാക്കാൻ, നിങ്ങൾ സാധാരണയായി നിങ്ങളുടെ പ്രോജക്റ്റിൻ്റെ src/stories ഡയറക്ടറിയിൽ (അല്ലെങ്കിൽ നിങ്ങളുടെ പ്രോജക്റ്റ് ഘടനയെ ആശ്രയിച്ച് സമാനമായ ഒരു സ്ഥലത്ത്) ഒരു പുതിയ ഫയൽ ഉണ്ടാക്കും. ഫയലിന് .stories.js അല്ലെങ്കിൽ .stories.jsx എക്സ്റ്റൻഷൻ (റിയാക്റ്റിനായി) അല്ലെങ്കിൽ വ്യൂ അല്ലെങ്കിൽ ആംഗുലറിന് തത്തുല്യമായ എക്സ്റ്റൻഷൻ ഉണ്ടായിരിക്കണം.

ഒരു റിയാക്റ്റ് ബട്ടൺ കമ്പോണൻ്റിനായുള്ള ഒരു ലളിതമായ സ്റ്റോറിയുടെ ഉദാഹരണം ഇതാ:

            // src/stories/Button.stories.jsx
import React from 'react';

import { Button } from './Button'; // Assuming your Button component is in Button.jsx

export default {
  title: 'Example/Button',
  component: Button,
};

const Template = (args) => <Button {...args} />;

export const Primary = Template.bind({});
Primary.args = {
  primary: true,
  label: 'Primary Button',
};

export const Secondary = Template.bind({});
Secondary.args = {
  label: 'Secondary Button',
};

export const Large = Template.bind({});
Large.args = {
  size: 'large',
  label: 'Large Button',
};

export const Small = Template.bind({});
Small.args = {
  size: 'small',
  label: 'Small Button',
};

            

              
                Copy
              
            
          

ഈ ഉദാഹരണത്തിൽ, നമ്മൾ Button എന്ന പേരിൽ ഒരു കമ്പോണൻ്റ് നിർവചിക്കുകയും നാല് സ്റ്റോറികൾ ഉണ്ടാക്കുകയും ചെയ്യുന്നു: Primary, Secondary, Large, and Small. ഓരോ സ്റ്റോറിയും വ്യത്യസ്ത പ്രോപ്പുകളുള്ള ബട്ടൺ കമ്പോണൻ്റിൻ്റെ ഓരോ വകഭേദത്തെ പ്രതിനിധീകരിക്കുന്നു.

സ്റ്റോറിബുക്ക് പ്രവർത്തിപ്പിക്കുന്നു

സ്റ്റോറിബുക്ക് പ്രവർത്തിപ്പിക്കാൻ, താഴെ പറയുന്ന കമാൻഡ് ഉപയോഗിക്കുക:

            npm run storybook
            

              
                Copy
              
            
          

ഇത് ഒരു ലോക്കൽ ഡെവലപ്മെൻ്റ് സെർവർ ആരംഭിച്ച് നിങ്ങളുടെ ബ്രൗസറിൽ സ്റ്റോറിബുക്ക് തുറക്കും. സ്റ്റോറിബുക്ക് യുഐയിൽ നിങ്ങളുടെ സ്റ്റോറികൾ പ്രദർശിപ്പിക്കുന്നത് നിങ്ങൾക്ക് കാണാൻ കഴിയും.

സ്റ്റോറിബുക്കിന്റെ പ്രധാന ആശയങ്ങൾ

സ്റ്റോറിബുക്ക് ഫലപ്രദമായി ഉപയോഗിക്കുന്നതിന്, അതിൻ്റെ പ്രധാന ആശയങ്ങൾ മനസ്സിലാക്കേണ്ടത് പ്രധാനമാണ്:

• കമ്പോണൻ്റുകൾ: നിങ്ങളുടെ യുഐയുടെ അടിസ്ഥാന നിർമ്മാണ ഘടകങ്ങൾ. സ്റ്റോറിബുക്ക് രൂപകൽപ്പന ചെയ്തിരിക്കുന്നത് വ്യക്തിഗത കമ്പോണൻ്റുകൾ ഒറ്റക്ക് പ്രദർശിപ്പിക്കാനും വികസിപ്പിക്കാനുമാണ്.
• സ്റ്റോറികൾ: ഒരു കമ്പോണൻ്റിൻ്റെ പ്രത്യേക അവസ്ഥകളെയും ഉപയോഗങ്ങളെയും പ്രതിനിധീകരിക്കുന്നു. അവ കമ്പോണൻ്റിലേക്ക് കൈമാറുന്ന പ്രോപ്പുകളും ഡാറ്റയും നിർവചിക്കുന്നു, ഇത് വ്യത്യസ്ത സാഹചര്യങ്ങൾ ദൃശ്യവൽക്കരിക്കാനും പരീക്ഷിക്കാനും നിങ്ങളെ അനുവദിക്കുന്നു.
• ആഡ്ഓണുകൾ: തീമിംഗ്, പ്രവേശനക്ഷമത പരിശോധന, ഡോക്യുമെൻ്റേഷൻ ജനറേഷൻ തുടങ്ങിയ വിവിധ ഫീച്ചറുകൾ ഉപയോഗിച്ച് സ്റ്റോറിബുക്കിൻ്റെ പ്രവർത്തനം വികസിപ്പിക്കുന്നു.
• ഡെക്കറേറ്ററുകൾ: കമ്പോണൻ്റുകളെ അധിക പ്രവർത്തനക്ഷമതയോടെ പൊതിയുന്നു, ഉദാഹരണത്തിന് സന്ദർഭം അല്ലെങ്കിൽ സ്റ്റൈലിംഗ് നൽകുന്നതിന്.
• ആർഗ്സ് (Args): (മുമ്പ് നോബ്സ് എന്നറിയപ്പെട്ടിരുന്നു) സ്റ്റോറിബുക്ക് യുഐയിൽ ഒരു കമ്പോണൻ്റിൻ്റെ പ്രോപ്പുകൾ ഇൻ്ററാക്ടീവായി മാറ്റാൻ നിങ്ങളെ അനുവദിക്കുന്നു. വ്യത്യസ്ത വകഭേദങ്ങളും കോൺഫിഗറേഷനുകളും പരീക്ഷിക്കാൻ ഇത് ഉപയോഗപ്രദമാണ്.
• കൺട്രോളുകൾ: ആർഗ്സുകൾ മാറ്റുന്നതിനുള്ള യുഐ ഘടകങ്ങൾ, ബ്രൗസറിൽ കമ്പോണൻ്റ് പ്രോപ്പർട്ടികൾ ക്രമീകരിക്കുന്നത് എളുപ്പമാക്കുന്നു.

സ്റ്റോറിബുക്കിലെ നൂതന വിദ്യകൾ

സ്റ്റോറിബുക്കിൻ്റെ അടിസ്ഥാനകാര്യങ്ങൾ മനസ്സിലാക്കിക്കഴിഞ്ഞാൽ, നിങ്ങളുടെ വർക്ക്ഫ്ലോ കൂടുതൽ മെച്ചപ്പെടുത്തുന്നതിന് നൂതനമായ വിദ്യകൾ പരീക്ഷിക്കാവുന്നതാണ്:

ആഡ്ഓണുകൾ ഉപയോഗിക്കുന്നു

സ്റ്റോറിബുക്ക് അതിൻ്റെ പ്രവർത്തനക്ഷമത വികസിപ്പിക്കാൻ കഴിയുന്ന നിരവധി ആഡ്ഓണുകൾ വാഗ്ദാനം ചെയ്യുന്നു. ചില പ്രശസ്തമായ ആഡ്ഓണുകൾ ഇവയാണ്:

• @storybook/addon-knobs: (Args/Controls-ന് വേണ്ടി ഒഴിവാക്കപ്പെട്ടു) സ്റ്റോറിബുക്ക് യുഐയിൽ ഒരു കമ്പോണൻ്റിൻ്റെ പ്രോപ്പുകൾ ഇൻ്ററാക്ടീവായി മാറ്റാൻ നിങ്ങളെ അനുവദിക്കുന്നു.
• @storybook/addon-actions: കമ്പോണൻ്റ് ഇൻ്ററാക്ഷനുകൾ വഴി ട്രിഗർ ചെയ്യപ്പെടുന്ന ഇവൻ്റ് ഹാൻഡ്‌ലറുകൾ പ്രദർശിപ്പിക്കുന്നു.
• @storybook/addon-links: സ്റ്റോറികൾക്കിടയിൽ ലിങ്കുകൾ ഉണ്ടാക്കുന്നു, ഇത് വിവിധ കമ്പോണൻ്റ് അവസ്ഥകൾക്കിടയിൽ നാവിഗേറ്റ് ചെയ്യാൻ നിങ്ങളെ അനുവദിക്കുന്നു.
• @storybook/addon-docs: നിങ്ങളുടെ കോഡിൽ നിന്നും സ്റ്റോറികളിൽ നിന്നും കമ്പോണൻ്റുകൾക്കായി ഡോക്യുമെൻ്റേഷൻ ഉണ്ടാക്കുന്നു.
• @storybook/addon-a11y: ഭിന്നശേഷിയുള്ളവർക്ക് ഉപയോഗിക്കാനാവുമെന്ന് ഉറപ്പാക്കാൻ നിങ്ങളുടെ കമ്പോണൻ്റുകളിൽ പ്രവേശനക്ഷമതാ പരിശോധനകൾ നടത്തുന്നു.
• @storybook/addon-viewport: വ്യത്യസ്ത സ്ക്രീൻ വലുപ്പങ്ങളിലും ഉപകരണങ്ങളിലും നിങ്ങളുടെ കമ്പോണൻ്റുകൾ കാണാൻ നിങ്ങളെ അനുവദിക്കുന്നു.
• @storybook/addon-backgrounds: കമ്പോണൻ്റ് കോൺട്രാസ്റ്റ് പരീക്ഷിക്കുന്നതിനായി നിങ്ങളുടെ സ്റ്റോറികളുടെ പശ്ചാത്തല നിറം മാറ്റാൻ നിങ്ങളെ സഹായിക്കുന്നു.
• @storybook/addon-themes: നിങ്ങളുടെ സ്റ്റോറിബുക്കിൽ വ്യത്യസ്ത തീമുകൾക്കിടയിൽ മാറാൻ നിങ്ങളെ അനുവദിക്കുന്നു.

ഒരു ആഡ്ഓൺ ഇൻസ്റ്റാൾ ചെയ്യാൻ, താഴെ പറയുന്ന കമാൻഡ് ഉപയോഗിക്കുക:

            npm install @storybook/addon-name --save-dev
            

              
                Copy
              
            
          

തുടർന്ന്, നിങ്ങളുടെ .storybook/main.js ഫയലിലേക്ക് ആഡ്ഓൺ ചേർക്കുക:

            module.exports = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
    '@storybook/addon-a11y',
  ],
  framework: '@storybook/react',
  core: {
    builder: '@storybook/builder-webpack5',
  },
  features: {
    interactionsDebugger: true,
  },
};

            

              
                Copy
              
            
          

ഡെക്കറേറ്ററുകൾ ഉപയോഗിക്കുന്നു

നിങ്ങളുടെ കമ്പോണൻ്റുകളെ അധിക പ്രവർത്തനക്ഷമതയോടെ പൊതിയുന്ന ഫംഗ്ഷനുകളാണ് ഡെക്കറേറ്ററുകൾ. സന്ദർഭം, സ്റ്റൈലിംഗ് അല്ലെങ്കിൽ മറ്റ് ആഗോള കോൺഫിഗറേഷനുകൾ നൽകാൻ അവ ഉപയോഗിക്കാം.

നിങ്ങളുടെ കമ്പോണൻ്റുകൾക്ക് ഒരു തീം സന്ദർഭം നൽകുന്ന ഒരു ഡെക്കറേറ്ററിൻ്റെ ഉദാഹരണം ഇതാ:

            // src/stories/decorators/ThemeProvider.jsx
import React from 'react';
import { ThemeProvider } from 'styled-components';
import { theme } from './theme'; // Your theme object

export const ThemeDecorator = (Story) => (
  <ThemeProvider theme={theme}>
    <Story />
  </ThemeProvider>
);

            

              
                Copy
              
            
          

ഡെക്കറേറ്റർ ഉപയോഗിക്കുന്നതിന്, അത് നിങ്ങളുടെ സ്റ്റോറിയുടെ കോൺഫിഗറേഷനിൽ ചേർക്കുക:

            // src/stories/Button.stories.jsx
import React from 'react';
import { Button } from './Button';
import { ThemeDecorator } from './decorators/ThemeProvider';

export default {
  title: 'Example/Button',
  component: Button,
  decorators: [ThemeDecorator],
};

            

              
                Copy
              
            
          

സ്റ്റോറിബുക്ക് ഉപയോഗിച്ചുള്ള ഓട്ടോമേറ്റഡ് ടെസ്റ്റിംഗ്

നിങ്ങളുടെ യുഐ കമ്പോണൻ്റുകളുടെ ടെസ്റ്റിംഗ് ഓട്ടോമേറ്റ് ചെയ്യുന്നതിന് സ്റ്റോറിബുക്കിനെ വിവിധ ടെസ്റ്റിംഗ് ടൂളുകളുമായി സംയോജിപ്പിക്കാൻ കഴിയും. ചില പ്രശസ്തമായ ടെസ്റ്റിംഗ് ഫ്രെയിംവർക്കുകൾ ഇവയാണ്:

• Jest: നിങ്ങളുടെ കമ്പോണൻ്റുകൾക്കായി യൂണിറ്റ് ടെസ്റ്റുകൾ എഴുതാൻ ഉപയോഗിക്കാവുന്ന ഒരു JavaScript ടെസ്റ്റിംഗ് ഫ്രെയിംവർക്ക്.
• React Testing Library: ഉപയോക്താവിൻ്റെ കാഴ്ചപ്പാടിൽ നിന്ന് കമ്പോണൻ്റുകൾ പരീക്ഷിക്കുന്നതിൽ ശ്രദ്ധ കേന്ദ്രീകരിക്കുന്ന ഒരു ടെസ്റ്റിംഗ് ലൈബ്രറി.
• Cypress: യുഐ കമ്പോണൻ്റുകൾ ഉൾപ്പെടെ മുഴുവൻ ആപ്ലിക്കേഷനും പരീക്ഷിക്കാൻ ഉപയോഗിക്കാവുന്ന ഒരു എൻഡ്-ടു-എൻഡ് ടെസ്റ്റിംഗ് ഫ്രെയിംവർക്ക്.
• Playwright: സൈപ്രസിന് സമാനമായി, വിവിധ ബ്രൗസറുകളിലും പ്ലാറ്റ്‌ഫോമുകളിലും എൻഡ്-ടു-എൻഡ് ടെസ്റ്റിംഗിനായി പ്ലേറൈറ്റ് ഉപയോഗിക്കുന്നു.

സ്റ്റോറിബുക്ക് ടീം @storybook/testing-react (അല്ലെങ്കിൽ വ്യൂ/ആംഗുലറിന് സമാനമായത്) എന്ന പേരിൽ ഒരു ലൈബ്രറിയും പരിപാലിക്കുന്നുണ്ട്, ഇത് സ്റ്റോറിബുക്കിൽ നിങ്ങളുടെ കമ്പോണൻ്റുകൾ പരീക്ഷിക്കുന്നതിനുള്ള യൂട്ടിലിറ്റികൾ നൽകുന്നു.

നിങ്ങളുടെ സ്റ്റോറിബുക്ക് പ്രസിദ്ധീകരിക്കുന്നു

നിങ്ങളുടെ ടീമുമായോ വിശാലമായ കമ്മ്യൂണിറ്റിയുമായോ പങ്കിടുന്നതിന് നിങ്ങളുടെ സ്റ്റോറിബുക്ക് എളുപ്പത്തിൽ പ്രസിദ്ധീകരിക്കാൻ കഴിയും. നിരവധി ഓപ്ഷനുകൾ ലഭ്യമാണ്:

• Netlify: സ്റ്റോറിബുക്കുകൾ ഉൾപ്പെടെയുള്ള സ്റ്റാറ്റിക് വെബ്സൈറ്റുകൾ വിന്യസിക്കുന്നതിനുള്ള ഒരു പ്രശസ്തമായ പ്ലാറ്റ്ഫോം.
• GitHub Pages: നിങ്ങളുടെ സ്റ്റോറിബുക്ക് ഹോസ്റ്റ് ചെയ്യാൻ ഉപയോഗിക്കാവുന്ന GitHub നൽകുന്ന ഒരു സൗജന്യ ഹോസ്റ്റിംഗ് സേവനം.
• Chromatic: സ്റ്റോറിബുക്കുകൾ ഹോസ്റ്റ് ചെയ്യുന്നതിനും കൈകാര്യം ചെയ്യുന്നതിനും വേണ്ടി പ്രത്യേകം രൂപകൽപ്പന ചെയ്ത ഒരു ക്ലൗഡ് അധിഷ്ഠിത പ്ലാറ്റ്ഫോം. വിഷ്വൽ റിഗ്രഷൻ ടെസ്റ്റിംഗ്, സഹകരണ ടൂളുകൾ തുടങ്ങിയ ഫീച്ചറുകൾ ക്രോമാറ്റിക് നൽകുന്നു.
• AWS S3: നിങ്ങളുടെ സ്റ്റാറ്റിക് സ്റ്റോറിബുക്ക് ഫയലുകൾ ഒരു ആമസോൺ S3 ബക്കറ്റിൽ ഹോസ്റ്റ് ചെയ്യാം.

നിങ്ങളുടെ സ്റ്റോറിബുക്ക് പ്രസിദ്ധീകരിക്കുന്നതിന്, സാധാരണയായി താഴെ പറയുന്ന കമാൻഡ് ഉപയോഗിച്ച് നിങ്ങളുടെ സ്റ്റോറിബുക്കിൻ്റെ ഒരു സ്റ്റാറ്റിക് പതിപ്പ് നിർമ്മിക്കേണ്ടതുണ്ട്:

            npm run build-storybook
            

              
                Copy
              
            
          

ഇത് നിങ്ങൾ തിരഞ്ഞെടുത്ത ഹോസ്റ്റിംഗ് പ്ലാറ്റ്‌ഫോമിൽ വിന്യസിക്കാൻ കഴിയുന്ന സ്റ്റാറ്റിക് ഫയലുകൾ അടങ്ങുന്ന ഒരു storybook-static ഡയറക്ടറി (അല്ലെങ്കിൽ സമാനമായത്) ഉണ്ടാക്കും.

സ്റ്റോറിബുക്ക് ഉപയോഗിക്കുന്നതിനുള്ള മികച്ച രീതികൾ

സ്റ്റോറിബുക്കിൻ്റെ പ്രയോജനങ്ങൾ പരമാവധിയാക്കാൻ, ഈ മികച്ച രീതികൾ പിന്തുടരുക:

• നിങ്ങളുടെ കമ്പോണൻ്റുകൾ ചെറുതും കേന്ദ്രീകൃതവുമാക്കുക: നിങ്ങളുടെ കമ്പോണൻ്റുകൾ കഴിയുന്നത്ര ചെറുതും കേന്ദ്രീകൃതവുമാക്കാൻ രൂപകൽപ്പന ചെയ്യുക. ഇത് അവയെ പരീക്ഷിക്കാനും പുനരുപയോഗിക്കാനും ഡോക്യുമെൻ്റ് ചെയ്യാനും എളുപ്പമാക്കും.
• സമഗ്രമായ സ്റ്റോറികൾ എഴുതുക: നിങ്ങളുടെ കമ്പോണൻ്റുകളുടെ എല്ലാ വ്യത്യസ്ത അവസ്ഥകളെയും ഉപയോഗങ്ങളെയും ഉൾക്കൊള്ളുന്ന സ്റ്റോറികൾ ഉണ്ടാക്കുക. ഇത് നിങ്ങളുടെ കമ്പോണൻ്റുകൾ സമഗ്രമായി പരീക്ഷിക്കപ്പെടുകയും ഡോക്യുമെൻ്റ് ചെയ്യപ്പെടുകയും ചെയ്തുവെന്ന് ഉറപ്പാക്കും.
• ആഡ്ഓണുകൾ വിവേകപൂർവ്വം ഉപയോഗിക്കുക: നിങ്ങളുടെ പ്രോജക്റ്റിൻ്റെ ആവശ്യങ്ങൾക്ക് പ്രസക്തമായ ആഡ്ഓണുകൾ തിരഞ്ഞെടുക്കുക, ധാരാളം ആഡ്ഓണുകൾ ചേർക്കുന്നത് ഒഴിവാക്കുക, കാരണം ഇത് പ്രകടനത്തെ ബാധിക്കും.
• നിങ്ങളുടെ കമ്പോണൻ്റുകൾ സമഗ്രമായി ഡോക്യുമെൻ്റ് ചെയ്യുക: നിങ്ങളുടെ കമ്പോണൻ്റുകൾക്കായി ഡോക്യുമെൻ്റേഷൻ ഉണ്ടാക്കാൻ @storybook/addon-docs ആഡ്ഓൺ ഉപയോഗിക്കുക. ഇത് മറ്റുള്ളവർക്ക് അവ എങ്ങനെ ഉപയോഗിക്കാമെന്നും ഇഷ്ടാനുസൃതമാക്കാമെന്നും മനസ്സിലാക്കുന്നത് എളുപ്പമാക്കും.
• നിങ്ങളുടെ ഡെവലപ്മെൻ്റ് വർക്ക്ഫ്ലോയിൽ സ്റ്റോറിബുക്ക് സംയോജിപ്പിക്കുക: നിങ്ങളുടെ ഡെവലപ്മെൻ്റ് വർക്ക്ഫ്ലോയുടെ അവിഭാജ്യ ഘടകമായി സ്റ്റോറിബുക്കിനെ മാറ്റുക. പ്രോജക്റ്റിൻ്റെ തുടക്കം മുതൽ നിങ്ങളുടെ യുഐ കമ്പോണൻ്റുകൾ വികസിപ്പിക്കാനും പരീക്ഷിക്കാനും ഡോക്യുമെൻ്റ് ചെയ്യാനും ഇത് ഉപയോഗിക്കുക.
• വ്യക്തമായ ഒരു കമ്പോണൻ്റ് ലൈബ്രറി ഘടന സ്ഥാപിക്കുക: നിങ്ങളുടെ കമ്പോണൻ്റ് ലൈബ്രറി യുക്തിസഹവും സ്ഥിരതയുള്ളതുമായ രീതിയിൽ ക്രമീകരിക്കുക. ഇത് മറ്റുള്ളവർക്ക് കമ്പോണൻ്റുകൾ കണ്ടെത്താനും പുനരുപയോഗിക്കാനും എളുപ്പമാക്കും.
• നിങ്ങളുടെ സ്റ്റോറിബുക്ക് പതിവായി പരിപാലിക്കുക: നിങ്ങളുടെ യുഐ കമ്പോണൻ്റുകളിലെ ഏറ്റവും പുതിയ മാറ്റങ്ങൾക്കൊപ്പം നിങ്ങളുടെ സ്റ്റോറിബുക്ക് അപ്ഡേറ്റ് ചെയ്യുക. ഇത് നിങ്ങളുടെ ഡോക്യുമെൻ്റേഷൻ കൃത്യമാണെന്നും നിങ്ങളുടെ കമ്പോണൻ്റുകൾ ഏറ്റവും പുതിയ കോഡിനെതിരെ എപ്പോഴും പരീക്ഷിക്കപ്പെടുന്നുവെന്നും ഉറപ്പാക്കും.
• വേർഷൻ കൺട്രോൾ ഉപയോഗിക്കുക: മാറ്റങ്ങൾ ട്രാക്ക് ചെയ്യാനും മറ്റുള്ളവരുമായി സഹകരിക്കാനും നിങ്ങളുടെ സ്റ്റോറിബുക്ക് കോൺഫിഗറേഷനും സ്റ്റോറികളും വേർഷൻ കൺട്രോളിൽ (ഉദാഹരണത്തിന്, Git) സൂക്ഷിക്കുക.

വിവിധ ഫ്രെയിംവർക്കുകളിലുടനീളമുള്ള സ്റ്റോറിബുക്ക്

പ്രധാന ആശയങ്ങൾ സമാനമായിരിക്കുമെങ്കിലും, നിങ്ങൾ ഉപയോഗിക്കുന്ന ഫ്രണ്ട്എൻഡ് ഫ്രെയിംവർക്കിനെ ആശ്രയിച്ച് സ്റ്റോറിബുക്കിൻ്റെ നടപ്പാക്കൽ വിശദാംശങ്ങൾ അല്പം വ്യത്യാസപ്പെട്ടിരിക്കും.

റിയാക്റ്റിനുള്ള സ്റ്റോറിബുക്ക്

സ്റ്റോറിബുക്ക് ഉപയോഗിക്കുന്നതിനുള്ള ഏറ്റവും പ്രശസ്തമായ ഫ്രെയിംവർക്കുകളിൽ ഒന്നാണ് റിയാക്റ്റ്. ഔദ്യോഗിക സ്റ്റോറിബുക്ക് ഡോക്യുമെൻ്റേഷൻ റിയാക്റ്റ് ഡെവലപ്പർമാർക്ക് മികച്ച ഉറവിടങ്ങളും ഉദാഹരണങ്ങളും നൽകുന്നു.

വ്യൂവിനുള്ള സ്റ്റോറിബുക്ക്

സ്റ്റോറിബുക്ക് Vue.js-മായും പരിധികളില്ലാതെ സംയോജിക്കുന്നു. റിയാക്റ്റിന് സമാനമായ ഒരു സമീപനം ഉപയോഗിച്ച് വ്യൂ കമ്പോണൻ്റുകൾ എളുപ്പത്തിൽ സ്റ്റോറിബുക്കിലേക്ക് ചേർക്കാൻ കഴിയും.

ആംഗുലറിനുള്ള സ്റ്റോറിബുക്ക്

ആംഗുലർ ഡെവലപ്പർമാർക്ക് അവരുടെ ആംഗുലർ ആപ്ലിക്കേഷനുകൾക്കായി ഒരു വിഷ്വൽ കമ്പോണൻ്റ് ലൈബ്രറി ഉണ്ടാക്കാൻ സ്റ്റോറിബുക്ക് പ്രയോജനപ്പെടുത്താം. ആംഗുലർ CLI സംയോജനം സജ്ജീകരണ പ്രക്രിയ ലളിതമാക്കുന്നു.

ആഗോള കാഴ്ചപ്പാടുകളും ഉദാഹരണങ്ങളും

ആഗോള പ്രോജക്റ്റുകളിൽ സ്റ്റോറിബുക്ക് ഉപയോഗിക്കുമ്പോൾ, നിങ്ങളുടെ യുഐ കമ്പോണൻ്റുകളുടെ പ്രാദേശികവൽക്കരണവും അന്താരാഷ്ട്രവൽക്കരണവും പരിഗണിക്കേണ്ടത് പ്രധാനമാണ്. ഉദാഹരണത്തിന്:

• ടെക്സ്റ്റ് ദിശ (RTL/LTR): നിങ്ങളുടെ കമ്പോണൻ്റുകൾ ഇടത്തുനിന്ന്-വലത്തോട്ടും (LTR) വലത്തുനിന്ന്-ഇടത്തോട്ടും (RTL) ടെക്സ്റ്റ് ദിശകളെ പിന്തുണയ്ക്കുന്നുണ്ടെന്ന് ഉറപ്പാക്കുക. രണ്ട് ദിശകളിലും കമ്പോണൻ്റുകൾ പ്രദർശിപ്പിക്കുന്ന സ്റ്റോറികൾ ഉണ്ടാക്കാൻ നിങ്ങൾക്ക് സ്റ്റോറിബുക്ക് ഉപയോഗിക്കാം. സ്റ്റൈൽ പരിവർത്തനങ്ങൾ സ്വയമേവ കൈകാര്യം ചെയ്യാൻ `rtlcss` പ്ലഗിൻ ഉപയോഗിച്ച് `styled-components` പോലുള്ള ലൈബ്രറികൾ ഉപയോഗിക്കുന്നത് പരിഗണിക്കുക.
• തീയതി, സമയ ഫോർമാറ്റുകൾ: ഉപയോക്താവിൻ്റെ പ്രാദേശികതയെ അടിസ്ഥാനമാക്കി ഉചിതമായ തീയതി, സമയ ഫോർമാറ്റിംഗ് ഉപയോഗിക്കുക. തീയതികളും സമയങ്ങളും ശരിയായി ഫോർമാറ്റ് ചെയ്യാൻ നിങ്ങൾക്ക് `moment.js` അല്ലെങ്കിൽ `date-fns` പോലുള്ള ലൈബ്രറികൾ ഉപയോഗിക്കാം. വ്യത്യസ്ത തീയതി, സമയ ഫോർമാറ്റുകളുള്ള കമ്പോണൻ്റുകൾ പ്രദർശിപ്പിക്കുന്ന സ്റ്റോറികൾ ഉണ്ടാക്കുക.
• കറൻസി ഫോർമാറ്റുകൾ: ഉപയോക്താവിൻ്റെ പ്രാദേശികതയ്ക്കായി ശരിയായ ഫോർമാറ്റിൽ കറൻസി മൂല്യങ്ങൾ പ്രദർശിപ്പിക്കുക. കറൻസി മൂല്യങ്ങൾ ഫോർമാറ്റ് ചെയ്യാൻ നിങ്ങൾക്ക് `numeral.js` അല്ലെങ്കിൽ `Intl.NumberFormat` പോലുള്ള ലൈബ്രറികൾ ഉപയോഗിക്കാം. വ്യത്യസ്ത കറൻസി ഫോർമാറ്റുകളും ചിഹ്നങ്ങളുമുള്ള കമ്പോണൻ്റുകൾ പ്രദർശിപ്പിക്കുന്ന സ്റ്റോറികൾ ഉണ്ടാക്കുക.
• വിവർത്തനം: നിങ്ങളുടെ യുഐ കമ്പോണൻ്റുകൾ വിവിധ ഭാഷകളിലേക്ക് വിവർത്തനം ചെയ്യാൻ അന്താരാഷ്ട്രവൽക്കരണ (i18n) ലൈബ്രറികൾ ഉപയോഗിക്കുക. വ്യത്യസ്ത വിവർത്തനങ്ങളുള്ള കമ്പോണൻ്റുകൾ ദൃശ്യവൽക്കരിക്കാൻ സ്റ്റോറിബുക്ക് ഉപയോഗിക്കാം. `i18next` പോലുള്ള ലൈബ്രറികൾ സാധാരണയായി ഉപയോഗിക്കുന്നു.
• പ്രവേശനക്ഷമത: നിങ്ങളുടെ യുഐ കമ്പോണൻ്റുകൾ ഭിന്നശേഷിയുള്ള ആളുകൾക്ക് അവരുടെ സ്ഥാനം പരിഗണിക്കാതെ ഉപയോഗിക്കാൻ കഴിയുമെന്ന് ഉറപ്പാക്കാൻ വെബ് പ്രവേശനക്ഷമതാ മാർഗ്ഗനിർദ്ദേശങ്ങൾ പാലിക്കുക.

ഉദാഹരണം: ആഗോളതലത്തിൽ ഉപയോഗിക്കുന്ന ഒരു ഫോം കമ്പോണൻ്റ് സങ്കൽപ്പിക്കുക. ഒരു സ്റ്റോറിബുക്ക് സ്റ്റോറിയിൽ, നിങ്ങൾക്ക് ഇവ പ്രദർശിപ്പിക്കാൻ കഴിയും:

• സ്പാനിഷിലേക്ക് വിവർത്തനം ചെയ്ത ലേബലുകളും നിർദ്ദേശങ്ങളുമുള്ള ഫോം.
• അറബി സംസാരിക്കുന്ന ഉപയോക്താക്കൾക്കായി RTL ലേഔട്ടിൽ പ്രദർശിപ്പിച്ച അതേ ഫോം.
• അമേരിക്കയ്ക്കായി MM/DD/YYYY ഫോർമാറ്റിലും യൂറോപ്പിനായി DD/MM/YYYY ഫോർമാറ്റിലും തീയതി ഫീൽഡ് പ്രദർശിപ്പിക്കുന്ന ഫോം.

ഉപസംഹാരം

നിങ്ങളുടെ ഫ്രണ്ട്എൻഡ് ഡെവലപ്മെൻ്റ് വർക്ക്ഫ്ലോ ഗണ്യമായി മെച്ചപ്പെടുത്താൻ കഴിയുന്ന ഒരു ശക്തമായ ടൂളാണ് സ്റ്റോറിബുക്ക്. യുഐ കമ്പോണൻ്റുകൾ വികസിപ്പിക്കുന്നതിന് ഒരു ഒറ്റപ്പെട്ട സാഹചര്യം നൽകുന്നതിലൂടെ, ഇത് പുനരുപയോഗം പ്രോത്സാഹിപ്പിക്കുകയും വികസന വേഗത വർദ്ധിപ്പിക്കുകയും ടെസ്റ്റിംഗ് ലളിതമാക്കുകയും സഹകരണത്തിന് സൗകര്യമൊരുക്കുകയും ചെയ്യുന്നു. നിങ്ങൾ ഒരു ചെറിയ വെബ്സൈറ്റോ വലിയ തോതിലുള്ള ആപ്ലിക്കേഷനോ നിർമ്മിക്കുകയാണെങ്കിലും, കരുത്തുറ്റതും പരിപാലിക്കാൻ എളുപ്പമുള്ളതും സ്ഥിരതയുള്ളതുമായ യൂസർ ഇൻ്റർഫേസുകൾ ഉണ്ടാക്കാൻ സ്റ്റോറിബുക്ക് നിങ്ങളെ സഹായിക്കും.

ഈ ഗൈഡിൽ പറഞ്ഞിരിക്കുന്ന ആശയങ്ങളും സാങ്കേതികതകളും സ്വീകരിക്കുന്നതിലൂടെ, നിങ്ങൾക്ക് സ്റ്റോറിബുക്കിൻ്റെ മുഴുവൻ സാധ്യതകളും പ്രയോജനപ്പെടുത്താനും നിങ്ങളുടെ ആഗോള പ്രേക്ഷകർക്കായി അസാധാരണമായ ഉപയോക്തൃ അനുഭവങ്ങൾ നിർമ്മിക്കാനും കഴിയും.