Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Refactoring & documentation updates #4

Merged
merged 1 commit into from
Sep 10, 2020
Merged

Refactoring & documentation updates #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions .github/workflows/ci.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,10 @@ jobs:
target: wasm32-unknown-unknown
default: true
components: clippy
- uses: actions-rs/cargo@v1
with:
command: clippy
args: -- -D warnings
- uses: actions-rs/cargo@v1
with:
command: build
6 changes: 3 additions & 3 deletions Cargo.toml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,9 @@ anyhow = "1"
derive_more = "0.99.9"
mixin = "0.2.0"
web-sys = { version="0.3", features=["Element", "File", "HtmlCollection", "HtmlSelectElement"] }
yew = { git="https://github.com/siku2/yew.git", branch="optional-attribute", features=["web_sys"] }
yewtil = { git="https://github.com/siku2/yew.git", branch="optional-attribute", features=["neq"] }
yew-router = { git="https://github.com/siku2/yew.git", branch="optional-attribute", features=["web_sys"], optional=true }
yew = { git="https://github.com/yewstack/yew.git", branch="master", features=["web_sys"] }
yewtil = { git="https://github.com/yewstack/yew.git", branch="master", features=["neq"] }
yew-router = { git="https://github.com/yewstack/yew.git", branch="master", features=["web_sys"], optional=true }

[features]
default = ["router"]
Expand Down
6 changes: 4 additions & 2 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,14 +13,16 @@
</div>
<br/>

**NOTE WELL:** this library is based on the [Yew branch for optional parameters here](https://github.com/yewstack/yew/pull/1537). As such, it is probably best to wait until that branch has landed before using this crate for production apps ... but that's up to you 🛑.
YBC encapsulates all of the structure, style and functionality of the Bulma CSS framework as a set of Yew components. YBC also ships with support for the Yew Router, adding Bulma-styled components which wrap the Yew Router components for clean integration.

As a guiding principal, YBC does not attempt to encapsulate every single Bulma style as a Rust type, let alone the many valid style combinations. That would be far too complex, and probably limiting to the user in many ways. Instead, YBC handles strucutre, required classes, functionality, sane defaults and every component can be customized with any additional classes for an exact look and feel.

## getting started
First, add this library to your Yew project's `Cargo.toml`.

```toml
[dependencies]
ybc = "*"
ybc = "0.1" # NOTE: this release is coming soon.
```

Next, you've got a few options. This project will work perfectly well if you just include the Bulma CSS in your HTML, [as described here](https://bulma.io/documentation/overview/start/). The following link in your HTML head should do the trick: `<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.0/css/bulma.min.css"/>`.
Expand Down
66 changes: 0 additions & 66 deletions src/agent.rs
View file
Open in desktop

This file was deleted.

227 changes: 12 additions & 215 deletions src/columns/mod.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,9 @@ pub struct ColumnsProps {
pub classes: Option<String>,
}

/// The container for a set of responsive columns.
///
/// [https://bulma.io/documentation/columns/](https://bulma.io/documentation/columns/)
pub struct Columns {
props: ColumnsProps,
}
Expand All @@ -17,7 +20,7 @@ impl Component for Columns {
type Message = ();
type Properties = ColumnsProps;

fn create(props: Self::Properties, _link: ComponentLink<Self>) -> Self {
fn create(props: Self::Properties, _: ComponentLink<Self>) -> Self {
Self{props}
}

Expand Down Expand Up @@ -53,6 +56,13 @@ pub struct ColumnProps {
pub classes: Option<String>,
}

/// A flexbox-based responsive column.
///
/// [https://bulma.io/documentation/columns/](https://bulma.io/documentation/columns/)
///
/// This component has a very large number of valid class combinations which users may want.
/// Modelling all of these is particularly for this component, so for now you are encouraged to
/// add classes to this Component manually via the `classes` prop.
pub struct Column {
props: ColumnProps,
}
Expand All @@ -61,7 +71,7 @@ impl Component for Column {
type Message = ();
type Properties = ColumnProps;

fn create(props: Self::Properties, _link: ComponentLink<Self>) -> Self {
fn create(props: Self::Properties, _: ComponentLink<Self>) -> Self {
Self{props}
}

Expand All @@ -85,216 +95,3 @@ impl Component for Column {
}
}
}

// //////////////////////////////////////////////////////////////////////////////
// //////////////////////////////////////////////////////////////////////////////

// /// One of the column sizing options.
// #[derive(Clone, Debug, Display, PartialEq)]
// #[display(fmt="is-{}")]
// pub enum ColumnSize {
// Is(ColumnIs),
// Narrow(ColumnNarrow),
// }

// /// A column size offset.
// ///
// /// https://bulma.io/documentation/columns/sizes/#offset
// #[derive(Clone, Debug, Display, PartialEq)]
// #[display(fmt="is-offset-{}")]
// pub enum ColumnOffset {
// Is(ColumnIs),
// }

// /// An enum controlling Bulma's column sizes.
// ///
// /// https://bulma.io/documentation/columns/sizes/
// #[derive(Clone, Debug, Display, PartialEq)]
// pub enum ColumnIs {
// /// Corresponds to bulma's `is-three-quarters` class.
// #[display(fmt="three-quarters")]
// ThreeQuarters,
// /// Corresponds to bulma's `is-two-thirds` class.
// #[display(fmt="two-thirds")]
// TwoThirds,
// /// Corresponds to bulma's `is-half` class.
// #[display(fmt="half")]
// Half,
// /// Corresponds to bulma's `is-one-third` class.
// #[display(fmt="one-third")]
// OneThird,
// /// Corresponds to bulma's `is-one-quarter` class.
// #[display(fmt="one-quarter")]
// OneQuarter,
// /// Corresponds to bulma's `is-full` class.
// #[display(fmt="full")]
// Full,

// /// Corresponds to bulma's `is-four-fifths` class.
// #[display(fmt="four-fifths")]
// FourFifths,
// /// Corresponds to bulma's `is-three-fifths` class.
// #[display(fmt="three-fifths")]
// ThreeFifths,
// /// Corresponds to bulma's `is-two-fifths` class.
// #[display(fmt="two-fifths")]
// TwoFifths,
// /// Corresponds to bulma's `is-one-fifth` class.
// #[display(fmt="one-fifth")]
// OneFifth,

// /// Corresponds to bulma's `is-1` class.
// #[display(fmt="1")]
// One,
// /// Corresponds to bulma's `is-2` class.
// #[display(fmt="2")]
// Two,
// /// Corresponds to bulma's `is-3` class.
// #[display(fmt="3")]
// Three,
// /// Corresponds to bulma's `is-4` class.
// #[display(fmt="4")]
// Four,
// /// Corresponds to bulma's `is-5` class.
// #[display(fmt="5")]
// Five,
// /// Corresponds to bulma's `is-6` class.
// #[display(fmt="6")]
// Six,
// /// Corresponds to bulma's `is-7` class.
// #[display(fmt="7")]
// Seven,
// /// Corresponds to bulma's `is-8` class.
// #[display(fmt="8")]
// Eight,
// /// Corresponds to bulma's `is-9` class.
// #[display(fmt="9")]
// Nine,
// /// Corresponds to bulma's `is-10` class.
// #[display(fmt="10")]
// Ten,
// /// Corresponds to bulma's `is-11` class.
// #[display(fmt="11")]
// Eleven,
// /// Corresponds to bulma's `is-12` class.
// #[display(fmt="12")]
// Twelve,
// }

// /// An enum controlling Bulma's column sizes.
// ///
// /// https://bulma.io/documentation/columns/sizes/
// #[derive(Clone, Debug, Display, PartialEq)]
// pub enum ColumnNarrow {
// /// Corresponds to bulma's `is-narrow` class.
// #[display(fmt="narrow")]
// Narrow,
// /// Corresponds to bulma's `is-narrow-mobile` class.
// #[display(fmt="narrow-mobile")]
// Mobile,
// /// Corresponds to bulma's `is-narrow-tablet` class.
// #[display(fmt="narrow-tablet")]
// Tablet,
// /// Corresponds to bulma's `is-narrow-touch` class.
// #[display(fmt="narrow-touch")]
// Touch,
// /// Corresponds to bulma's `is-narrow-desktop` class.
// #[display(fmt="narrow-desktop")]
// Desktop,
// /// Corresponds to bulma's `is-narrow-widescreen` class.
// #[display(fmt="narrow-widescreen")]
// Widescreen,
// /// Corresponds to bulma's `is-narrow-fullhd` class.
// #[display(fmt="narrow-fullhd")]
// Fullhd,
// }

// #[cfg(test)]
// mod test {
// use super::*;

// macro_rules! test_column_is_display {
// ({test=>$name:ident, val=>$val:expr, expected=>$exp:literal}) => {
// #[test]
// fn $name() {
// let value = format!("{}", ColumnSize::Is($val));
// assert_eq!(value.as_str(), $exp);
// }
// }
// }

// macro_rules! test_column_is_narrow_display {
// ({test=>$name:ident, val=>$val:expr, expected=>$exp:literal}) => {
// #[test]
// fn $name() {
// let value = format!("{}", ColumnSize::Narrow($val));
// assert_eq!(value.as_str(), $exp);
// }
// }
// }

// macro_rules! test_column_is_offset_display {
// ({test=>$name:ident, val=>$val:expr, expected=>$exp:literal}) => {
// #[test]
// fn $name() {
// let value = format!("{}", ColumnOffset::Is($val));
// assert_eq!(value.as_str(), $exp);
// }
// }
// }

// test_column_is_display!({test=>class_three_quarters, val=>ColumnIs::ThreeQuarters, expected=>"is-three-quarters"});
// test_column_is_display!({test=>class_two_thirds, val=>ColumnIs::TwoThirds, expected=>"is-two-thirds"});
// test_column_is_display!({test=>class_half, val=>ColumnIs::Half, expected=>"is-half"});
// test_column_is_display!({test=>class_one_third, val=>ColumnIs::OneThird, expected=>"is-one-third"});
// test_column_is_display!({test=>class_one_quarter, val=>ColumnIs::OneQuarter, expected=>"is-one-quarter"});
// test_column_is_display!({test=>class_full, val=>ColumnIs::Full, expected=>"is-full"});
// test_column_is_display!({test=>class_four_fifths, val=>ColumnIs::FourFifths, expected=>"is-four-fifths"});
// test_column_is_display!({test=>class_three_fifths, val=>ColumnIs::ThreeFifths, expected=>"is-three-fifths"});
// test_column_is_display!({test=>class_two_fifths, val=>ColumnIs::TwoFifths, expected=>"is-two-fifths"});
// test_column_is_display!({test=>class_one_fifth, val=>ColumnIs::OneFifth, expected=>"is-one-fifth"});
// test_column_is_display!({test=>class_one, val=>ColumnIs::One, expected=>"is-1"});
// test_column_is_display!({test=>class_two, val=>ColumnIs::Two, expected=>"is-2"});
// test_column_is_display!({test=>class_three, val=>ColumnIs::Three, expected=>"is-3"});
// test_column_is_display!({test=>class_four, val=>ColumnIs::Four, expected=>"is-4"});
// test_column_is_display!({test=>class_five, val=>ColumnIs::Five, expected=>"is-5"});
// test_column_is_display!({test=>class_six, val=>ColumnIs::Six, expected=>"is-6"});
// test_column_is_display!({test=>class_seven, val=>ColumnIs::Seven, expected=>"is-7"});
// test_column_is_display!({test=>class_eight, val=>ColumnIs::Eight, expected=>"is-8"});
// test_column_is_display!({test=>class_nine, val=>ColumnIs::Nine, expected=>"is-9"});
// test_column_is_display!({test=>class_ten, val=>ColumnIs::Ten, expected=>"is-10"});
// test_column_is_display!({test=>class_eleven, val=>ColumnIs::Eleven, expected=>"is-11"});
// test_column_is_display!({test=>class_twelve, val=>ColumnIs::Twelve, expected=>"is-12"});

// test_column_is_narrow_display!({test=>class_narrow, val=>ColumnNarrow::Narrow, expected=>"is-narrow"});
// test_column_is_narrow_display!({test=>class_mobile, val=>ColumnNarrow::Mobile, expected=>"is-narrow-mobile"});
// test_column_is_narrow_display!({test=>class_tablet, val=>ColumnNarrow::Tablet, expected=>"is-narrow-tablet"});
// test_column_is_narrow_display!({test=>class_touch, val=>ColumnNarrow::Touch, expected=>"is-narrow-touch"});
// test_column_is_narrow_display!({test=>class_desktop, val=>ColumnNarrow::Desktop, expected=>"is-narrow-desktop"});
// test_column_is_narrow_display!({test=>class_widescreen, val=>ColumnNarrow::Widescreen, expected=>"is-narrow-widescreen"});
// test_column_is_narrow_display!({test=>class_fullhd, val=>ColumnNarrow::Fullhd, expected=>"is-narrow-fullhd"});

// test_column_is_offset_display!({test=>class_offset_three_quarters, val=>ColumnIs::ThreeQuarters, expected=>"is-offset-three-quarters"});
// test_column_is_offset_display!({test=>class_offset_two_thirds, val=>ColumnIs::TwoThirds, expected=>"is-offset-two-thirds"});
// test_column_is_offset_display!({test=>class_offset_half, val=>ColumnIs::Half, expected=>"is-offset-half"});
// test_column_is_offset_display!({test=>class_offset_one_third, val=>ColumnIs::OneThird, expected=>"is-offset-one-third"});
// test_column_is_offset_display!({test=>class_offset_one_quarter, val=>ColumnIs::OneQuarter, expected=>"is-offset-one-quarter"});
// test_column_is_offset_display!({test=>class_offset_full, val=>ColumnIs::Full, expected=>"is-offset-full"});
// test_column_is_offset_display!({test=>class_offset_four_fifths, val=>ColumnIs::FourFifths, expected=>"is-offset-four-fifths"});
// test_column_is_offset_display!({test=>class_offset_three_fifths, val=>ColumnIs::ThreeFifths, expected=>"is-offset-three-fifths"});
// test_column_is_offset_display!({test=>class_offset_two_fifths, val=>ColumnIs::TwoFifths, expected=>"is-offset-two-fifths"});
// test_column_is_offset_display!({test=>class_offset_one_fifth, val=>ColumnIs::OneFifth, expected=>"is-offset-one-fifth"});
// test_column_is_offset_display!({test=>class_offset_one, val=>ColumnIs::One, expected=>"is-offset-1"});
// test_column_is_offset_display!({test=>class_offset_two, val=>ColumnIs::Two, expected=>"is-offset-2"});
// test_column_is_offset_display!({test=>class_offset_three, val=>ColumnIs::Three, expected=>"is-offset-3"});
// test_column_is_offset_display!({test=>class_offset_four, val=>ColumnIs::Four, expected=>"is-offset-4"});
// test_column_is_offset_display!({test=>class_offset_five, val=>ColumnIs::Five, expected=>"is-offset-5"});
// test_column_is_offset_display!({test=>class_offset_six, val=>ColumnIs::Six, expected=>"is-offset-6"});
// test_column_is_offset_display!({test=>class_offset_seven, val=>ColumnIs::Seven, expected=>"is-offset-7"});
// test_column_is_offset_display!({test=>class_offset_eight, val=>ColumnIs::Eight, expected=>"is-offset-8"});
// test_column_is_offset_display!({test=>class_offset_nine, val=>ColumnIs::Nine, expected=>"is-offset-9"});
// test_column_is_offset_display!({test=>class_offset_ten, val=>ColumnIs::Ten, expected=>"is-offset-10"});
// test_column_is_offset_display!({test=>class_offset_eleven, val=>ColumnIs::Eleven, expected=>"is-offset-11"});
// test_column_is_offset_display!({test=>class_offset_twelve, val=>ColumnIs::Twelve, expected=>"is-offset-12"});

// }
27 changes: 27 additions & 0 deletions src/common.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
use derive_more::Display;

/// Common alignment classes.
#[derive(Clone, Debug, Display, PartialEq)]
#[display(fmt="is-{}")]
pub enum Alignment {
#[display(fmt="left")]
Left,
#[display(fmt="centered")]
Centered,
#[display(fmt="right")]
Right,
}

/// Common size classes.
#[derive(Clone, Debug, Display, PartialEq)]
#[display(fmt="is-{}")]
pub enum Size {
#[display(fmt="small")]
Small,
#[display(fmt="normal")]
Normal,
#[display(fmt="medium")]
Medium,
#[display(fmt="large")]
Large,
}
Loading