132 | );
133 | };
134 |
135 | Onboarding.defaultProps = {
136 | showOnboarding: true,
137 | };
138 |
139 | Onboarding.propTypes = {
140 | pages: PropTypes.array.isRequired,
141 | showOnboarding: PropTypes.bool,
142 | };
143 |
144 | export default Onboarding;
145 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | 
2 |
3 | # Flexo
4 |
5 | ## An Exclusive playground to learn CSS Flexbox
6 |
7 | **FLEXO** is a web app, made to simplify the learning path of CSS Flexbox. One can learn flexbox in an interactive way and also can teach other easily, just using this app. Developers can make a rough sketch here and also can know what properties they have to use before diving into the code. It'll make their coding path smooth.
8 | Are you ready???
9 | **Let's play with Flexbox 🥳 🥳 🥳**
22 | 
23 |
24 | ### Supported Features
25 |
26 | Currently Flexo app supported the following features:
27 |
28 | - **Unlimited flex-child creation**
29 | - **Interation of main and cross flex axis with the flex direction**
30 | - **Real-time effect of changing one or more property of Flex-container or a flex-child**
31 | - **View sharing over the hyperlink** (One can make a layout, generate sharing link, send it to other and taping this link, that person can see the same view with its properties)
32 | - **Two positions of sidebar.** Users can switch between them according to their comfort.
33 | - One from left side of the screen
34 | - One comes from bottom side of the screen
35 |
36 |
37 |
38 | > **It takes lots of work (typing flex properties one after one) while teaching other.**
39 |
40 | > **Here is FLEXO. A mighty tool to solve this problem. Flexo app can be used for teaching and learning purpose.**
41 |
42 | > **With the help of Flexo, one can easily know what properties he/she has to use before diving into the code.**
43 |
44 |
45 |
46 | ### Supported Flexbox Properties
47 |
48 | | **Flex-Container** | **Flex-Child** |
49 | | ------------------ | -------------- |
50 | | display | order |
51 | | flex-direction | flex-basis |
52 | | flex-wrap | flex-grow |
53 | | justify-content | flex-shrink |
54 | | align-items | align-self |
55 | | align-content | |
56 |
57 | ## Want to contribute?
58 |
59 | ### Setup Project
60 |
61 | It just requires some simple steps to setup this project on your local machine. Simply,
62 |
63 | - Clone the repo
64 | - Run `yarn install`
65 | - Then run `yarn start`
66 | - Yahooo! You are ready to contribute 🎉 🎉 🎉
67 |
68 | ### How to give PR (Pull Request)
69 |
70 | To submit your code for review, follow these steps :
71 |
72 | - Create a brunch from **master branch**
73 | - Commit your changes in this branch
74 | - Push your branch to remote
75 | - Give this PR for review
76 | - If your changes get approval then author will merge this into the master
77 |
78 | ### How to test your changes on Flexo Test Domain
79 |
80 | **Flexo has a test domain. This domain is used for testing purpose.** When a new feature has been developed or new enhancements or fixes have been made, they are **deployed to the test domain first. Here all the functionalities, design issues, bug fixes, etc. have been checked.** When the changes pass all the test, then they are ready to be merged in the **production branch (master)**.
81 |
82 | You can also check your changes in the test branch. All you have to do is:
83 |
84 | - Create a branch named **'test'** on your local machine by running **`git checkout -b test`**
85 | - Pull from **'test'** branch from the origin by running **`git pull origin test`**
86 | - Then merge your branch(which containing your changes) into the test branch by running **`git merge `**
87 | - Then push the test branch to the origin's test branch by running **`git push origin test`**
88 | - Wait for few minutes and go to **[https://test.flexo.icu](https://test.flexo.icu)**
89 | - You should see your changes here
90 | - If there is any problem, simply leave a message for admin
91 |
--------------------------------------------------------------------------------
/src/Flexo/components/Sidebar.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import classNames from 'classnames';
3 | import Consumer from '../../contextSetup';
4 | import { ReactComponent as CloseIcon } from '../assets/close.svg';
5 | import { ReactComponent as BottomRotate } from '../assets/bottomRotate.svg';
6 | import { ReactComponent as RightRotate } from '../assets/rightRotate.svg';
7 | import styledOptions from './styleOptions';
8 | import Button from './Button';
9 |
10 | const Sidebar = () => {
11 | const convertPropertyNameFromJsxToCss = (propertyName) => {
12 | return propertyName
13 | .split('')
14 | .map((character) =>
15 | character >= 'A' && character <= 'Z'
16 | ? `-${character.toLowerCase()}`
17 | : character
18 | )
19 | .join('');
20 | };
21 |
22 | return (
23 |
24 | {(context) => {
25 | const {
26 | selectedElement,
27 | showSidebar,
28 | sidebarPosition,
29 | containerStyles,
30 | children,
31 | } = context.appState;
32 | const {
33 | closeSidebar,
34 | handleCssPropertyChange,
35 | changeSidebarPosition,
36 | } = context;
37 |
38 | return (
39 |