Skip to content

Commit

Permalink
fix: Export main.css instead of inline styles
Browse files Browse the repository at this point in the history
  • Loading branch information
mucahit committed Oct 8, 2020
1 parent 3399cc8 commit 6de8884
Show file tree
Hide file tree
Showing 17 changed files with 18 additions and 44 deletions.
15 changes: 5 additions & 10 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,10 @@ Hipo's React based UI Toolkit / [Demo](https://react-ui-toolkit.now.sh/)
After installing the `@hipo/react-ui-toolkit` package you can start with simple example

```javascript
import FormField from "@hipo/react-ui-toolkit/dist/Input";
import Input from "@hipo/react-ui-toolkit/dist/Input";
import {FormField, Input} from "@hipo/react-ui-toolkit/dist/Input";

// or you can directly import the index
// import {FormField, Input} from "@hipo/react-ui-toolkit"
// This is required to gather the initial styles of the components
import "@hipo/react-ui-toolkit/dist/main.css";

function LoginForm() {
return (
Expand All @@ -23,6 +22,8 @@ function LoginForm() {
<FormField label="Password">
<Input name="password" type="password" />
</FormField>

<Button>Login</Button>
</div>
);
}
Expand Down Expand Up @@ -53,9 +54,3 @@ Or you can run `npm run storybook` to see the components live. Storybook has own
ESLint and Prettier will handle the linting task. You can set a watcher for `npm run prettier:fix` command in your IDE otherwise you need to run prettier manually or right before the production build it'll automatically runs.

The ruleset can be found in [@hipo/eslint-config-base](https://github.com/Hipo/eslint-config-hipo-base), [@hipo/eslint-config-react](https://github.com/Hipo/eslint-config-hipo-base)

### TODO

- [ ] Add tests
- [ ] Add source info of components to Storybook
- [x] Components should have basic CSS styles
2 changes: 1 addition & 1 deletion package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@hipo/react-ui-toolkit",
"version": "0.2.7",
"version": "0.3.0",
"description": "React based UI toolkit.",
"main": "dist/index.js",
"scripts": {
Expand Down
6 changes: 5 additions & 1 deletion rollup.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@ import postcss from "rollup-plugin-postcss";
import stylelint from "rollup-plugin-stylelint";
import reactSvg from "rollup-plugin-react-svg";

const path = require("path");

export default [
{
external: ["react", "classnames"],
Expand Down Expand Up @@ -39,7 +41,9 @@ export default [
stylelint({
ignoreFiles: ["**/*.ts", "**/*.js"]
}),
postcss(),
postcss({
extract: path.resolve("dist/main.css")
}),
typescript({
rollupCommonJSResolveHack: true,
exclude: "**/__tests__/**",
Expand Down
3 changes: 0 additions & 3 deletions src/button/_button.scss
Original file line number Diff line number Diff line change
@@ -1,6 +1,3 @@
@import "../ui/reference/_measurement.scss";
@import "../ui/reference/_colors.scss";

.button {
display: block;

Expand Down
4 changes: 1 addition & 3 deletions src/dropdown/_dropdown.scss
Original file line number Diff line number Diff line change
@@ -1,6 +1,4 @@
@import "../ui/reference/_colors.scss";
@import "../ui/reference/_measurement.scss";
@import "../ui/reference/util/_truncate.scss";
@import "../ui/reference/util/truncate";

$dropdown-header-horizontal-padding: 8px;

Expand Down
3 changes: 0 additions & 3 deletions src/dropdown/list/_dropdown-list.scss
Original file line number Diff line number Diff line change
@@ -1,6 +1,3 @@
@import "../../ui/reference/_colors.scss";
@import "../../ui/reference/_measurement.scss";

.dropdown-list {
position: absolute;
z-index: 1;
Expand Down
1 change: 0 additions & 1 deletion src/dropdown/list/item/_dropdown-list-item.scss
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
@import "../../../ui/reference/util/truncate";
@import "../../../ui/reference/colors";
@import "../../../ui/reference/animation";

.dropdown-list-item {
Expand Down
2 changes: 0 additions & 2 deletions src/form/field/_form-field.scss
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
@import "../../ui/reference/colors";

.form-field {
margin-bottom: 25px;

Expand Down
2 changes: 0 additions & 2 deletions src/form/field/message-row/_form-field-message-row.scss
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
@import "../../../ui/reference/_colors.scss";

.form-field-message-row {
margin: 8px 0;

Expand Down
3 changes: 0 additions & 3 deletions src/form/input/_input.scss
Original file line number Diff line number Diff line change
@@ -1,6 +1,3 @@
@import "../../ui/reference/_colors.scss";
@import "../../ui/reference/_measurement.scss";

.input-container {
display: flex;
align-items: center;
Expand Down
4 changes: 1 addition & 3 deletions src/form/input/checkbox/_checkbox.scss
Original file line number Diff line number Diff line change
@@ -1,6 +1,4 @@
@import "../../../ui/reference/_colors.scss";
@import "../../../ui/reference/_measurement.scss";
@import "../../../ui/reference/_animation.scss";
@import "../../../ui/reference/animation";

.checkbox-input-label {
position: relative;
Expand Down
3 changes: 0 additions & 3 deletions src/form/input/file/_file-input.scss
Original file line number Diff line number Diff line change
@@ -1,6 +1,3 @@
@import "../../../ui/reference/colors";
@import "../../../ui/reference/measurement";

.file-input {
position: absolute;
z-index: -1;
Expand Down
4 changes: 1 addition & 3 deletions src/form/input/radio/_radio.scss
Original file line number Diff line number Diff line change
@@ -1,6 +1,4 @@
@import "../../../ui/reference/_colors.scss";
@import "../../../ui/reference/_measurement.scss";
@import "../../../ui/reference/_animation.scss";
@import "../../../ui/reference/animation";

.radio-input-label {
position: relative;
Expand Down
3 changes: 3 additions & 0 deletions src/index.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
import "./ui/reference/_colors.scss";
import "./ui/reference/_measurement.scss";

import FormField, {FormFieldProps} from "./form/field/FormField";
import Input, {InputProps} from "./form/input/Input";
import FileInput, {FileInputProps} from "./form/input/file/FileInput";
Expand Down
3 changes: 0 additions & 3 deletions src/select/typeahead/_typeahead-select.scss
Original file line number Diff line number Diff line change
@@ -1,6 +1,3 @@
@import "../../ui/reference/colors";
@import "../../ui/reference/measurement";

.typeahead-select-container {
.typeahead-select-dropdown .dropdown-header-button {
height: auto;
Expand Down
2 changes: 0 additions & 2 deletions src/tag/_tag.scss
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
@import "../ui/reference/colors";
@import "../ui/reference/measurement";
@import "../ui/reference/animation";
@import "../ui/reference/util/truncate";

Expand Down

0 comments on commit 6de8884

Please sign in to comment.