CTI Design is a Components Library made for creating consistent, usable and accessible communication platforms in the browser.
- Based on: Tailwind
- Figma design file: CTI Design Figma
- Built on Storybook: Storybook
- Repo: Github
ANALYSIS STEPS
- Apply the Atomic Design concepts
- Start from Atoms
- Analize the old UI and get screens of the elments
- Create boards categorize elements and merge them
- Repeat for Molecules -> Organisms -> Templates -> Pages
DESIGN STEPS
- Create the design inside the Figma design file
- Validate the design with the team members
- Implement the designed component
- The components already made can be very usefull as inspiration
REPO STRUCTURE
- The components are in src/components each one inside a specific directory
- Files can have .jsx or .tsx extensions for JS/React files
- The same rules are applied to templates but they are in src/templates
- In conclusion components, stories and tests are in the same directory
- The other files and directories in the repository are for configuration an build steps
DEVELOPMENT STEPS
- Start development with Storybook:
npm run storybook
- After the analisys steps it’s time to merge elements creating components and templates
- Components are base components and templates are more complex components
- All components logic is implemented using React
- The components development follows the CDD approach driven by Storybook
CREATING A COMPONENT
- Add a new directory named Component in src/components
- Create a Component.tsx/.jsx file for the logic with React
- Create a Component.stories.tsx/.jsx file for Storybook stories
- Create a Component.test.tsx/.jsx file for Unit Tests with Jest and React Testing Library
- Do the same things in templates for a new template
- Add examples and code snippets to the CTI Design Site
TESTING A COMPONENT
- Test that the component renders without crash
- Test that the component renders correctly the props
COMPONENT DOCS
- Document how the component can be used
- Document the properties of the component with types
BUILD & RELEASE STEPS
- Build the library:
npm run build
- Publish the library on npm using the np command and cli
- Ensure that you are logged in on npm and your account is inside collaborators
To see all the npm scripts available check the package.json.