React Implementation of SomaCSS
راه حل های خالس سی اس اس ۳ برای وب
Soma CSS is a small, functional and pure CSS3 library which offers CSS components that are:
- Immutable like Pure Functions in FP approach
- Reusable like Objects in OOP approach
- Nestable like Components in React approach
And this is the React implementation of it, which
- has more fetures
- and much easier to use
This is just an example of how much scalable it is.
سوما یک کتابخانه کوچک و کاربردی است فقط با استفاده از سی اس اس 3 برای وب که کامپوننت های آن
- داده را تغییر نمی دهند مانند تابع خالص در برنامه نوسیی تابعی
- قایلیت استفاده مجدد دارن مانند آبجکت ها در شی گرایی
- قابلیت ترکیب دارن مانند کامپوننت ها در ریاکت
و این پیاده سازی ریاکت آن است که
- ویژگی های بیشتری دارد
- و نحوه ی استفاده ش ساده تر است
و این فقط یک مثال ساده است از اینکه چقدر مقیاس پذیر است.
Take Up This Challenge:
- Our E-commerce supports 10 Brands: [Brand-1, Brand-2, Brand-3, ...rest ]
- Each Brand has 10 Categories: [Category-1, Category-2, Category-3, ...rest ]
- Each Category has 10 sections: [Section-1, Section-2, Section-3, ...rest]
- Each Section has 4 Products or more: [Product-1, Product-2, Product-3, Product-4]
- Each Product has 10 types: [type-1, type-2, type-3, ..rest]
- And each year - for 10 years - we will add this amount of items again: [Year-2019, Year-2020, Year-2021, ..rest]
So our E-commerce has ( 10 ^ 4 ) x 4 types of products (= 40,000), up to (= 400,000) after 10 years!
Your task will be to show this 40,000 types on our limited homepage:
- the homepage should NOT become too messy
- only stable and well defined libraries are allowed
- user can interact and navigate easily
- User Experience Design rules should be followed
And please do not forget about:
- page responsiveness
- cross-web-browsers compatibilities
- code refactoring / updating / maintenance, should NOT frustrate us
Okay. Assuming flexible repetition of two to five (= 2,3,4,5), instead of 10;
It can be solved / done by the following steps.
این چالش رو حل کنید:
- فروشگاه اینترنتی داریم که 10 تا برند را پشتیبانی می کند : [Brand-1, Brand-2, Brand-3, ...rest ]
- هر برند 10 دسته بندی دارد: [Category-1, Category-2, Category-3, ...rest ]
- هر دسته بندی 10 بخش دارد: [Section-1, Section-2, Section-3, ...rest]
- هر بخش 4 محصول و یا بیشتر دارد: [Product-1, Product-2, Product-3, Product-4]
- هر محصول 10 نوع مختلف دارد: [type-1, type-2, type-3, ..rest]
- و هر سال - برای 10 سال - ما این حجم محصول را دوباره اضافه می کنیم: [Year-2019, Year-2020, Year-2021, ..rest]
بنابراین فروشگاه ما 10 به توان 4 ضرب در 4 تا نوع محصول دارد (000و40) و بعد از 10 سال تا مقدار (000و400) هم می رسد
وظیفه شما این است که این 000و40 نوع محصول را در صفحه اصلی ماه نشان دهید:
- صفحه اصلی نباید شلوغ و بهم ریخته شود
- فقط کتابخانه های پایدار مجاز به استفاده هستند
- کاربر باید بتواند به راحتی از آن استفاده کند
- قواعد بهبود تجربه ی کاربری باید دنبال شود
و لطفا این موارد را فراموش نکنید:
- صفحه باید واکنشگرا باشد
- در تمام مرورگرها به درستی کار کند
- آبدیت و نگاهداری کد ها نباید ما را اذیت کند
باشد. برای انعطاف پذیری فرض می کنیم ورودی هایمان بین 2 تا 5 هستند بجای 10 ثابت;
این چالش با انجام این مراحل می تواند حل شود.
First dealing with Brands ( n ^ 1 ) x 1:
-
using carousel-z
اول برند ها رو حل کنیم ( عدد بتوان 1 ) ضرب در 1:
-
با استفاده carousel-z
Code
const keys = Object.keys;
const brands = keys( eCommerce );
const first =
<CarouselZ titles={ brands } >
{
brands.map(( brand ) => { return <h1>{ brand }</h1> })
}
</CarouselZ>;
render( first, document.getElementById( "step-1" ));
const keys = Object.keys;
const brands = keys( eCommerce );
const first =
<CarouselZ titles={ brands } >
{
brands.map(( brand ) => { return <h1>{ brand }</h1> })
}
</CarouselZ>;
render( first, document.getElementById( "step-1" ));
Second dealing with Categories ( n ^ 2 ) x 1:
-
using carousel-z
-
then nesting carousel-y
دوم دسته بندی ها ( عدد بتوان 2 ) ضرب در 1:
-
با استفاده carousel-z
-
بعد داخل کردن carousel-y
code
const second =
<CarouselZ titles={ brands } >
{
brands.map(( brand ) => {
const categories = keys( eCommerce[ brand ] );
return <CarouselY titles={ categories } >
{
categories.map(( category ) => { return <h1>{ category }</h1> })
}
</CarouselY>
})
}
</CarouselZ>;
render( second, document.getElementById( "step-2" ));
const second =
<CarouselZ titles={ brands } >
{
brands.map(( brand ) => {
const categories = keys( eCommerce[ brand ] );
return <CarouselY titles={ categories } >
{
categories.map(( category ) => { return <h1>{ category }</h1> })
}
</CarouselY>
})
}
</CarouselZ>;
render( second, document.getElementById( "step-2" ));
Third Sections ( n ^ 3 ) x 1:
- using carousel-z
- nesting carousel-y
- nesting carousel-x
- arrow: true
- form: "compact-arrow"
- position: "center"
سوم بخش ها ( عدد بتوان 3 ) ضرب در 1:
- با استقاده carousel-z
- داخل کردن carousel-y
- داخل کردن carousel-x
Code
const third =
<CarouselZ titles={ brands } >
{
brands.map(( brand ) => {
const categories = keys( eCommerce[ brand ] );
return <CarouselY titles={ categories }>
{
categories.map(( category ) => {
const sectoins = keys( eCommerce[ brand ][ category ] );
return <CarouselX titles={ sectoins } animation={ false }>
{
sectoins.map(( section ) => { return >h1>{ section }>/h1> })
}
</CarouselX>
})
}
</CarouselY>
})
}
</CarouselZ>;
render( third, document.getElementById( "step-3" ));
const third =
<CarouselZ titles={ brands } >
{
brands.map(( brand ) => {
const categories = keys( eCommerce[ brand ] );
return <CarouselY titles={ categories }>
{
categories.map(( category ) => {
const sectoins = keys( eCommerce[ brand ][ category ] );
return <CarouselX titles={ sectoins } animation={ false }>
{
sectoins.map(( section ) => { return >h1>{ section }>/h1> })
}
</CarouselX>
})
}
</CarouselY>
})
}
</CarouselZ>;
render( third, document.getElementById( "step-3" ));
Forth Products ( n ^ 3 ) x 4:
- using carousel-z
- nesting carousel-y
- nesting carousel-x
- nesting slick-x
چهارم محصول ها ( عدد بتوان 3 ) ضرب در 4:
- با استفاده carousel-z
- داخل کردن carousel-y
- داخل کردن carousel-x
- داخل کردن slick-x
Code
const fourth =
<CarouselZ titles={ brands } >
{
brands.map(( brand ) => {
const categories = keys( eCommerce[ brand ] );
return <CarouselY titles={ categories }>
{
categories.map(( category ) => {
const sectoins = keys( eCommerce[ brand ][ category ] );
return <CarouselX titles={ sectoins } animation={ false }>
{
sectoins.map(( section ) => {
const products = keys( eCommerce[ brand ][ category ][ section ] );
return <SlickX >
{
products.map(( product ) => { return <h1>{ product }</h1> })
}
</SlickX>
})
}
</CarouselX>
})
}
</CarouselY>
})
}
</CarouselZ>;
render( fourth, document.getElementById( "step-4" ));
const fourth =
<CarouselZ titles={ brands } >
{
brands.map(( brand ) => {
const categories = keys( eCommerce[ brand ] );
return <CarouselY titles={ categories }>
{
categories.map(( category ) => {
const sectoins = keys( eCommerce[ brand ][ category ] );
return <CarouselX titles={ sectoins } animation={ false }>
{
sectoins.map(( section ) => {
const products = keys( eCommerce[ brand ][ category ][ section ] );
return <SlickX >
{
products.map(( product ) => { return <h1>{ product }</h1> })
}
</SlickX>
})
}
</CarouselX>
})
}
</CarouselY>
})
}
</CarouselZ>;
render( fourth, document.getElementById( "step-4" ));
Finally Types ( n ^ 4 ) x 4:
- using carousel-z
- nesting carousel-y
- nesting carousel-x
- nesting slick-x
- nesting carousel-z again. ( Could be carousel-y or carousel-x)
Tada! Three Brands with nested Categories and Sections, etc.
- As compact as possible
- As stable as CSS3 is
- Interactive Asynchronously (NOT blocking JS's single thread)
Disable JS in your browser and try it.
در نهایت نوع ها ( عدد بتوان 4 ) ضرب در 4:
- با استفاده carousel-z
- داخل کردن carousel-y
- داخل کردن carousel-x
- داخل کردن slick-x
- داخل کردن carousel-z دوباره. ( می توانست carousel-y یا carousel-x) هم باشد
- تا ممکن است فشرده هستند
- به همان اندازه سی اس اس ۳ پایدار هستند
- به صورت غیر همزمان کار می کند (جاواسکریپت که یک نخ دارد را مسدود نمی کند)
جاواسکرپت مرورگر خود را غیر فعال و آزمایش کنید.
Code
const fifth =
<CarouselZ titles={ brands } >
{
brands.map(( brand ) => {
const categories = keys( eCommerce[ brand ] );
return <CarouselY titles={ categories }>
{
categories.map(( category ) => {
const sectoins = keys( eCommerce[ brand ][ category ] );
return <CarouselX titles={ sectoins } animation={ false }>
{
sectoins.map(( section ) => {
const products = keys( eCommerce[ brand ][ category ][ section ] );
return <SlickX >
{
products.map(( product, index ) => {
const types = keys( eCommerce[ brand ][ category ][ section ][ product ] );
return index === 0
? <CarouselX titles={ types } animation={ false }>
{
types.map(( type ) => { return <h1>{ type }</h1> })
}
</CarouselX>
: <CarouselZ titles={ types } >
{
types.map(( type ) => { return <h1>{ type }</h1> })
}
</CarouselZ>
})
}
</SlickX>
})
}
</CarouselX>
})
}
</CarouselY>
})
}
</CarouselZ>;
render( fifth, document.getElementById( "step-5" ));
const fifth =
<CarouselZ titles={ brands } >
{
brands.map(( brand ) => {
const categories = keys( eCommerce[ brand ] );
return <CarouselY titles={ categories }>
{
categories.map(( category ) => {
const sectoins = keys( eCommerce[ brand ][ category ] );
return <CarouselX titles={ sectoins } animation={ false }>
{
sectoins.map(( section ) => {
const products = keys( eCommerce[ brand ][ category ][ section ] );
return <SlickX >
{
products.map(( product, index ) => {
const types = keys( eCommerce[ brand ][ category ][ section ][ product ] );
return index === 0
? <CarouselX titles={ types } animation={ false }>
{
types.map(( type ) => { return <h1>{ type }</h1> })
}
</CarouselX>
: <CarouselZ titles={ types } >
{
types.map(( type ) => { return <h1>{ type }</h1> })
}
</CarouselZ>
})
}
</SlickX>
})
}
</CarouselX>
})
}
</CarouselY>
})
}
</CarouselZ>;
render( fifth, document.getElementById( "step-5" ));
Okay. But what about each year. You just solved one-tenth of the Challenge.
We have 10 years. That was only for one year!
No problem. Just nest everything:
- in another carousel-x component,
- or use a step-switch component,
- or use a progress-x component,
- or in a tab-x or tab-y component, like so
باشد. اما درباره هر سال. شما فقط یک چهارم چالش را حل کردید.
ماه ۱۰ سال داریم. ان فقط برای یک سال بود!!
هیچ مشکلی نیست. فقط هر چیزی هست را قرار بده در:
- یک carousel-x کامپوننت دیگز,
- و یا یک step-switch کامپوننت,
- و یا یک progress-x کامپوننت مانند همین:
- و یا یک tab-x یا tab-yکامپوننت,
JSON: eCommerce
const eCommerce = {
// first brand
// using carousel-z
"Brand-1": {
// using carousel-y
"Category-1:new": {
// using carousel-x
"Section-1": {
// Products (= slick-x step-ponent) has no title
product1: {
// we can use any of them again
"Type-1" : "",
"Type-2" : "",
"Type-3" : "",
"Type-4" : ""
},
product2: {
"Type-2" : "",
"Type-3" : "",
"Type-4" : ""
},
product3: {
"Type-1" : "",
"Type-2" : "",
},
product4: {
"Type-1" : "",
"Type-2" : "",
"Type-3" : "",
"Type-4" : ""
},
},
"Section-2": {
product1: {
"Type-1" : "",
"Type-2" : "",
"Type-3" : "",
"Type-4" : ""
},
product2: {
},
product3: {
"Type-1" : "",
"Type-2" : "",
"Type-3" : "",
"Type-4" : ""
}
},
"Section-3": {
product1: {},
product2: {}
}
},
"Category-2:2019": {
"Section-1": {
product1: {
"Type-1" : "",
"Type-2" : "",
"Type-3" : "",
"Type-4" : ""
},
product2: {
"Type-1" : "",
"Type-2" : "",
"Type-3" : "",
"Type-4" : ""
},
product3: {
"Type-1" : "",
"Type-2" : "",
"Type-3" : "",
"Type-4" : ""
},
product4: {
"Type-1" : "",
"Type-2" : "",
"Type-3" : "",
"Type-4" : ""
}
},
"Section-2": {}
}
},
// second brand
"Brand-2": {
"Category-1:used": {
"Section-1": {},
"Section-2": {},
"Section-3": {},
"Section-4": {}
},
"Category-2:new": {
"Section-1": {},
"Section-2": {},
"Section-3": {},
"Section-4": {}
},
"Category-3:used": {
"Section-1": {},
"Section-2": {},
"Section-3": {},
"Section-4": {}
}
},
// third brand
"Brand-3" : {
"Category-1:new": {
"Section-1": {},
"Section-2": {}
},
"Category-2:10%": {
"Section-1": {},
"Section-2": {}
},
"Category-3:15%": {
"Section-1": {},
"Section-2": {},
"Section-3": {},
"Section-4": {}
},
"Category-4:20%": {
"Section-1": {},
"Section-2": {},
"Section-3": {},
"Section-4": {}
}
},
}
const eCommerce = {
// first brand
// using carousel-z
"Brand-1": {
// using carousel-y
"Category-1:new": {
// using carousel-x
"Section-1": {
// Products (= slick-x step-ponent) has no title
product1: {
// we can use any of them again
"Type-1" : "",
"Type-2" : "",
"Type-3" : "",
"Type-4" : ""
},
product2: {
"Type-2" : "",
"Type-3" : "",
"Type-4" : ""
},
product3: {
"Type-1" : "",
"Type-2" : "",
},
product4: {
"Type-1" : "",
"Type-2" : "",
"Type-3" : "",
"Type-4" : ""
},
},
"Section-2": {
product1: {
"Type-1" : "",
"Type-2" : "",
"Type-3" : "",
"Type-4" : ""
},
product2: {
},
product3: {
"Type-1" : "",
"Type-2" : "",
"Type-3" : "",
"Type-4" : ""
}
},
"Section-3": {
product1: {},
product2: {}
}
},
"Category-2:2019": {
"Section-1": {
product1: {
"Type-1" : "",
"Type-2" : "",
"Type-3" : "",
"Type-4" : ""
},
product2: {
"Type-1" : "",
"Type-2" : "",
"Type-3" : "",
"Type-4" : ""
},
product3: {
"Type-1" : "",
"Type-2" : "",
"Type-3" : "",
"Type-4" : ""
},
product4: {
"Type-1" : "",
"Type-2" : "",
"Type-3" : "",
"Type-4" : ""
}
},
"Section-2": {}
}
},
// second brand
"Brand-2": {
"Category-1:used": {
"Section-1": {},
"Section-2": {},
"Section-3": {},
"Section-4": {}
},
"Category-2:new": {
"Section-1": {},
"Section-2": {},
"Section-3": {},
"Section-4": {}
},
"Category-3:used": {
"Section-1": {},
"Section-2": {},
"Section-3": {},
"Section-4": {}
}
},
// third brand
"Brand-3" : {
"Category-1:new": {
"Section-1": {},
"Section-2": {}
},
"Category-2:10%": {
"Section-1": {},
"Section-2": {}
},
"Category-3:15%": {
"Section-1": {},
"Section-2": {},
"Section-3": {},
"Section-4": {}
},
"Category-4:20%": {
"Section-1": {},
"Section-2": {},
"Section-3": {},
"Section-4": {}
}
},
}
More Via Your Browser
بیشتر از طریق مرورگر
More Via Your Terminal
بیشتر از طریق ترمینال
- # Home Page Is:
- curl -sL somareact.ir
- # Create Page
- curl -sL somareact.ir/create/
- # Document Page
- curl -sL somareact.ir/document/
- # Examples Page
- curl -sL somareact.ir/example/