{"id":15726726,"url":"https://github.com/usulpro/lorem-material","last_synced_at":"2025-03-31T01:48:38.846Z","repository":{"id":82554277,"uuid":"77365752","full_name":"usulpro/lorem-material","owner":"usulpro","description":"lorem ipsum for material-ui","archived":false,"fork":false,"pushed_at":"2016-12-26T14:51:56.000Z","size":1216,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-06T07:11:44.272Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/usulpro.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-12-26T07:13:18.000Z","updated_at":"2021-12-22T05:27:25.000Z","dependencies_parsed_at":"2023-03-12T16:10:01.567Z","dependency_job_id":null,"html_url":"https://github.com/usulpro/lorem-material","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/usulpro%2Florem-material","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/usulpro%2Florem-material/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/usulpro%2Florem-material/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/usulpro%2Florem-material/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/usulpro","download_url":"https://codeload.github.com/usulpro/lorem-material/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246403895,"owners_count":20771526,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-03T22:40:26.182Z","updated_at":"2025-03-31T01:48:38.813Z","avatar_url":"https://github.com/usulpro.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Lorem Material [![Live demo](https://img.shields.io/badge/Live%20Demo-%20Storybook-brightgreen.svg)](https://usulpro.github.io/lorem-material/)\n\nSet of _Lorem ipsum_ Material-UI forms for quick themes creating. You can use this project to try your hands in React development.\n\ninstall:\n```shell\nnpm i git+https://github.com/UsulPro/lorem-material.git --save\n```\n\nusage:\n```shell\nimport MaterialStepper from 'lorem-material/dist/MaterialStepper';\n// or any other Component from dist folder\n```\n\nlist of avalible components [see](https://usulpro.github.io/lorem-material/) in demo page\n\n## Material content filling\n![Material](doc/icons/ic_account_balance_black.png)\nFor easy themes design we required a realistic-looking content. It will be possible to try out different themes and immediately see how they look. For this we feel the need of help by designers and front-end developers in material design. Therefore, we are opening this trend and attract **#hacktoberfest** participants. We welcome all who wish to contribute.\n\nWe propose to fill this library by adding small pages or applications - each in a separate [story](https://sm-react.github.io/storybook-addon-material-ui/?theme-ind=0\u0026theme-sidebar=false\u0026theme-full=false\u0026selectedKind=Material%20App\u0026selectedStory=Hactoberfest%20issues%3A\u0026full=0\u0026down=1\u0026left=1\u0026panelRight=0\u0026downPanel=sm%2Fstorybook-addon-material-ui%2Fmaterial-panel). They should be made in the material design style and look like a real application (no need to use real data). We are pleased to see various interesting applications, but you can try your hand at creating something simple.\n\nWe do not impose special restrictions to create pages, but please keep the following:\n- It should be in the [Material Design](https://material.google.com/) style\n- It should be based on the [Material-UI](http://www.material-ui.com/#/) library\n- Should look good with different themes\n- The appearance should rely on themes settings\n- Should not copy an already existing [story](https://sm-react.github.io/storybook-addon-material-ui)\n- Each story in a separate file (or a folder)\n\n### to initiate the participation [fork this project](https://github.com/UsulPro/lorem-material/fork).\n\n![Material](doc/icons/ic_flight_takeoff.png)\nTake `src/blankMaterialAppExampleProgress.jsx` as a starting point of development.\n\nThis project is built on the [React Storybook](https://getstorybook.io/docs) platform. It's a great basis for creating React components and applications. We create each `Lorem Material Page` as a separate `React Component` and add them as a story into storybook automatically.\n\nWe use material-ui components from [Material-UI](http://www.material-ui.com/#/) set  - The most popular and complete library for React that Implement Google's Material Design.\n\nThe aim of our [project (storybook-addon-material-ui)](https://github.com/sm-react/storybook-addon-material-ui) is to create a comfortable environment for designers and developers allows them to work with React components based on the use of the [theming](https://facebook.github.io/react/docs/context.html#passing-info-automatically-through-a-tree) approach. This approach allows us to decouple the functionality and appearance of components. Teming can transmit various data and properties in components: color, size, styles, and the like. We are working to expand the available options.\n\nWe support [Material-UI Themes](http://www.material-ui.com/#/customization/themes) now.\n\n###### Creating Themed Components\n\nIt's possible to create theme related components in two ways. Firstly, you can combine ready-made `Material-UI` elements into your component. They themselves support themes, so you don't need to do anything more. \n\nThe second case occurs when you want to add own non `Material-UI` element and set its appearance based on the theme settings. You can do it manually by fetching theme data from the content and applying it to your elements. Look at this brief example:\n\n```\nconst contextTypes = {\n    muiTheme: React.PropTypes.object.isRequired,\n};\n\nfunction HelloLabel(props, context) {\n    const { palette } = context.muiTheme;\n    const textStyle = {\n        color: palette.textColor,\n        backgroundColor: palette.canvasColor,\n    };\n    \n    return (\n      \u003cdiv style={textStyle}\u003eHello, @{props.name}!\u003c/div\u003e\n      );\n}\nHelloLabel.propTypes = {\n    name: React.PropTypes.string.isRequired,\n};\nHelloLabel.contextTypes = contextTypes;\n\n```\nHere we created a component which appearance is depended on current theme setting.\n\nYou can achieve the same result with `react-theme-provider`. You just need to wrap you non-material components:\n\n```\n\u003cThemeProvider\u003e\n  \u003cYourThemedComponentOrPlainHTML /\u003e\n\u003c/ThemeProvider\u003e\n```\n\nSee details in the [docs](https://github.com/sm-react/react-theme-provider) of React Theme Provider\n\nYou can edit theme data directly in the down-panel as a JSON structure. You can also edit the settings in the right panel using convenient tools. In any case, all changes will be immediately displayed in the selected story. Creating a new theme you need to specify only the parameters you want to override. All others will be taken from the base theme automatically. Please note that the settings specified in the pallete object will automatically be propagated to other objects. But you can set them directly. This is provided by the Material-UI library.\n\u003e When you finished editing your theme via this Storybook addon save it to your project folder. So you could continue working from this point later or use it in your app.\n\n```\nimport greyTheme from './greyTheme.json';\naddDecorator(muiTheme(greyTheme));\n```\n\nTo learn more about material design follow the [link](https://material.google.com/)\n\nWe always welcome your questions, suggestions and ideas.\n\n### For more details about the process of developing\n\n- [make a fork](https://github.com/sm-react/storybook-addon-material-ui/fork).\n\n- clone your repo to local machine and install\n\n```\ngit clone https://github.com/YOUR-NAME/lorem-material.git\ncd lorem-material\nnpm i\n```\n\n- Find `src/blankMaterialAppExampleProgress.jsx` and use it as a blank to start developing.\n\n\n- Start storybook and check how it looks. Due to the [HMR] you will immediately see all the changes made to the file. Try different themes.\n```\nnpm start\n```\n\n- Check codestyle.\n```\nnpm run lint\n```\n\n- You can try to fix some erorrs automatically\n\n```\nnpm run lintfix\n```\n\n- Make commit and push it to github: \n\n```\ngit commit -m «my ready to PR story»\ngit push\n\n```\n\n- Make  Pull request from your Github repo. \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fusulpro%2Florem-material","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fusulpro%2Florem-material","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fusulpro%2Florem-material/lists"}