Merge pull request #63 from pureblazor/icon-and-theme-refactor

Icon and theme refactor

.nvmrc

@@ -0,0 +1 @@
+v20.12.1

Directory.Packages.props

@@ -38,6 +38,7 @@
     <PackageVersion Include="Microsoft.ApplicationInsights.AspNetCore" Version="2.22.0" />
     <PackageVersion Include="Microsoft.AspNetCore.Authentication.OpenIdConnect" Version="8.0.4" />
     <PackageVersion Include="Microsoft.AspNetCore.Authorization" Version="8.0.4" />
+    <PackageVersion Include="Microsoft.AspNetCore.Components" Version="8.0.4" />
     <PackageVersion Include="Microsoft.AspNetCore.Components.Authorization" Version="8.0.4" />
     <PackageVersion Include="Microsoft.AspNetCore.Components.Web" Version="8.0.4" />
     <PackageVersion Include="Microsoft.AspNetCore.Components.WebAssembly" Version="8.0.4" />

css.sh

@@ -1,4 +1,6 @@
 #!/bin/bash
 # file: css.sh
-
-./tailwindcss-macos-arm64 -c src/Pure.Blazor.Components/tailwind.config.js -i src/Pure.Blazor.Components/wwwroot/app.css -o src/Pure.Blazor.Components/wwwroot/pureblazor.css
+source ~/.zshrc
+nvm use
+npm install tailwindcss@next @tailwindcss/vite@next
+npx @tailwindcss/cli@next -i src/Pure.Blazor.Components/tailwind.css -o src/Pure.Blazor.Components/wwwroot/pureblazor.css --watch

src/Pure.Blazor.Components.AspNetCore/HostApplicationBuilderExtensions.cs

@@ -1,14 +1,18 @@
-using Microsoft.Extensions.DependencyInjection;
+using Microsoft.AspNetCore.Components;
+using Microsoft.Extensions.DependencyInjection;
 using Microsoft.Extensions.Hosting;
+using Pure.Blazor.Components.Buttons;
 using Pure.Blazor.Components.Common;
 using Pure.Blazor.Components.Dialogs;
 using Pure.Blazor.Components.Feedback;
+using Pure.Blazor.Components.Primitives;
 
 namespace Pure.Blazor.Components.AspNetCore;
 
 public static class HostApplicationBuilderExtensions
 {
-    public static IHostApplicationBuilder AddPureBlazorComponents(this IHostApplicationBuilder builder)
+    public static IHostApplicationBuilder AddPureBlazorComponents(this IHostApplicationBuilder builder,
+        IPureTheme? theme = null)
     {
         // javascript
         builder.Services.AddScoped<IElementUtils, ElementUtils>();
@@ -17,6 +21,13 @@ public static IHostApplicationBuilder AddPureBlazorComponents(this IHostApplicat
         builder.Services.AddScoped<AlertService>();
         builder.Services.AddScoped<DialogService>();
 
+        builder.Services.AddCascadingValue(sp =>
+        {
+            theme ??= new DefaultTheme();
+            var source = new CascadingValueSource<IPureTheme>(theme, isFixed: true);
+            return source;
+        });
+
         return builder;
     }
 }

src/Pure.Blazor.Components.Icons/Pure.Blazor.Components.Icons.csproj

@@ -0,0 +1,30 @@
+<Project Sdk="Microsoft.NET.Sdk">
+
+  <PropertyGroup>
+    <TargetFramework>net8.0</TargetFramework>
+    <LangVersion>preview</LangVersion>
+    <ImplicitUsings>enable</ImplicitUsings>
+    <Nullable>enable</Nullable>
+    <WarningsAsErrors>Nullable</WarningsAsErrors>
+    <GeneratePackageOnBuild>True</GeneratePackageOnBuild>
+    <Title>PureBlazor Icons</Title>
+    <Version>0.21</Version>
+    <PackageId>PureBlazor.Components.Icons</PackageId>
+    <Description>Blazor Icons</Description>
+    <PackageProjectUrl>https://pureblazor.com</PackageProjectUrl>
+    <RepositoryUrl>https://github.com/pureblazor/components</RepositoryUrl>
+    <PackageTags>blazor, icons, maui, ssr, wasm, tailwind, tailwindcss, heroicons, pureblazor</PackageTags>
+    <IncludeSymbols>True</IncludeSymbols>
+    <SymbolPackageFormat>snupkg</SymbolPackageFormat>
+    <PackageReleaseNotes>Component Library Updates</PackageReleaseNotes>
+    <PackageLicenseExpression>MIT</PackageLicenseExpression>
+    <Company>PureBlazor</Company>
+    <Authors>codymullins</Authors>
+    <Copyright>Copyright 2024 PureBlazor</Copyright>
+  </PropertyGroup>
+
+  <ItemGroup>
+    <ProjectReference Include="..\Pure.Blazor.Components.Primitives\Pure.Blazor.Components.Primitives.csproj"/>
+  </ItemGroup>
+
+</Project>

src/Pure.Blazor.Components/Icons/PureIcon.cs → src/Pure.Blazor.Components.Icons/PureIcon.cs

@@ -1,6 +1,6 @@
-using Microsoft.AspNetCore.Components;
+using Microsoft.AspNetCore.Components;
 using Microsoft.AspNetCore.Components.Rendering;
-using Pure.Blazor.Components.Common;
+using Pure.Blazor.Components.Primitives;
 
 namespace Pure.Blazor.Components.Icons;
 

src/Pure.Blazor.Components/Icons/PureIcons.cs → src/Pure.Blazor.Components.Icons/PureIcons.cs

@@ -2,7 +2,7 @@ namespace Pure.Blazor.Components.Icons;
 
 public enum PureIcons
 {
-    IconCheck,
+    IconNone,
     IconSpin,
     IconOpenCircle,
     IconChevronDoubleLeft,
@@ -39,5 +39,6 @@ public enum PureIcons
     IconCheckCircle,
     IconFile,
     IconFolder,
-    IconFolderOpen
+    IconFolderOpen,
+    IconCheck
 }

src/Pure.Blazor.Components/Common/Accent.cs → src/Pure.Blazor.Components.Primitives/Accent.cs

@@ -1,4 +1,4 @@
-namespace Pure.Blazor.Components.Common;
+namespace Pure.Blazor.Components.Primitives;
 
 public enum Accent
 {
@@ -7,4 +7,4 @@ public enum Accent
     Success,
     Danger,
     Warning,
-}
+}

src/Pure.Blazor.Components.Primitives/ButtonDefaults.cs

@@ -0,0 +1,7 @@
+namespace Pure.Blazor.Components.Primitives;
+
+public class ButtonDefaults
+{
+    public Effect PressEffect { get; set; }
+    public Effect HoverEffect { get; set; }
+}

src/Pure.Blazor.Components.Primitives/ComponentStyle.cs

@@ -0,0 +1,56 @@
+namespace Pure.Blazor.Components.Primitives;
+
+public class ComponentStyle
+{
+    private readonly IReadOnlyDictionary<Accent, string> accents;
+    private readonly IReadOnlyDictionary<PureVariant, Dictionary<Accent, string>> variants;
+    private readonly IReadOnlyDictionary<PureSize, string> sizes;
+
+    public ComponentStyle(string baseStyle,
+        IReadOnlyDictionary<Accent, string>? accents,
+        IReadOnlyDictionary<PureVariant, Dictionary<Accent, string>>? variants,
+        IReadOnlyDictionary<PureSize, string>? sizes)
+    {
+        this.accents = accents ?? new Dictionary<Accent, string>();
+        this.variants = variants ?? new Dictionary<PureVariant, Dictionary<Accent, string>>();
+        this.sizes = sizes ?? new Dictionary<PureSize, string>();
+        Base = baseStyle;
+    }
+
+    /// <summary>
+    /// Basic style applied to the outer container of the component.
+    /// </summary>
+    public string Base { get; set; }
+
+    /// <summary>
+    /// Optional advanced style for the outer container of the component.
+    /// Not all components with an outer container have this, only if the outer container requires Accent or Variant
+    /// modifications.
+    /// </summary>
+    public ComponentStyle? OuterContainer { get; set; }
+
+    /// <summary>
+    /// Optional advanced style for the inner container of the component. Not all components have an inner container.
+    /// </summary>
+    public ComponentStyle? InnerContainer { get; set; }
+
+    public string Accent(Accent accent)
+    {
+        return accents.TryGetValue(accent, out var value) ? value : string.Empty;
+    }
+
+    public string Variant(PureVariant variant, Accent accent)
+    {
+        if (variants.TryGetValue(variant, out var value) && value.TryGetValue(accent, out var style))
+        {
+            return style;
+        }
+
+        return string.Empty; // or return a default style
+    }
+
+    public string Size(PureSize size)
+    {
+        return sizes.TryGetValue(size, out var value) ? value : string.Empty;
+    }
+}

src/Pure.Blazor.Components.Primitives/Effect.cs

@@ -0,0 +1,33 @@
+namespace Pure.Blazor.Components.Primitives;
+
+/// <summary>
+/// Animation effects that can be applied to any component that supports it.
+/// </summary>
+public enum Effect
+{
+    /// <summary>
+    /// Unset effect. Default values will be inherited from ancestors.
+    /// </summary>
+    Unset,
+
+    /// <summary>
+    /// Explicitly indicates no effect.
+    /// </summary>
+    None,
+
+    // what's the best name here?
+    Jiggle,
+
+    /// <summary>
+    /// Fade in and out effect.
+    /// </summary>
+    Pulse,
+
+    /// <summary>
+    ///
+    /// </summary>
+    Ping
+
+    // TODO: https://github.com/pureblazor/components/issues/57
+    //Ripple,
+}

src/Pure.Blazor.Components.Primitives/IPureTheme.cs

@@ -0,0 +1,19 @@
+namespace Pure.Blazor.Components.Primitives;
+
+public interface IPureTheme
+{
+    public ButtonDefaults ButtonDefaults { get; set; }
+    public IStylePrioritizer StylePrioritizer { get; set; }
+    public Dictionary<string, ComponentStyle> Styles { get; set; }
+
+    public ComponentStyle GetStyle(Type type)
+    {
+        return GetStyleByName(type.Name);
+    }
+
+    public ComponentStyle GetStyleByName(string name)
+    {
+        // TODO: decide if we want this to be an exceptional event
+        return Styles.GetValueOrDefault(name) ?? new ComponentStyle("", null, null, null);
+    }
+}

src/Pure.Blazor.Components.Primitives/IStylePrioritizer.cs

@@ -0,0 +1,6 @@
+namespace Pure.Blazor.Components.Primitives;
+
+public interface IStylePrioritizer
+{
+    public string PrioritizeStyles(string style1, string style2);
+}

src/Pure.Blazor.Components.Primitives/Pure.Blazor.Components.Primitives.csproj

@@ -0,0 +1,30 @@
+<Project Sdk="Microsoft.NET.Sdk">
+
+  <PropertyGroup>
+    <TargetFramework>net8.0</TargetFramework>
+    <LangVersion>preview</LangVersion>
+    <ImplicitUsings>enable</ImplicitUsings>
+    <Nullable>enable</Nullable>
+    <WarningsAsErrors>Nullable</WarningsAsErrors>
+    <GeneratePackageOnBuild>True</GeneratePackageOnBuild>
+    <Title>PureBlazor Icons</Title>
+    <Version>0.21</Version>
+    <PackageId>PureBlazor.Components.Primitives</PackageId>
+    <Description>PureBlazor.Components.Primitives</Description>
+    <PackageProjectUrl>https://pureblazor.com</PackageProjectUrl>
+    <RepositoryUrl>https://github.com/pureblazor/components</RepositoryUrl>
+    <PackageTags>blazor, icons, maui, ssr, wasm, tailwind, tailwindcss, heroicons, pureblazor</PackageTags>
+    <IncludeSymbols>True</IncludeSymbols>
+    <SymbolPackageFormat>snupkg</SymbolPackageFormat>
+    <PackageReleaseNotes>Component Library Updates</PackageReleaseNotes>
+    <PackageLicenseExpression>MIT</PackageLicenseExpression>
+    <Company>PureBlazor</Company>
+    <Authors>codymullins</Authors>
+    <Copyright>Copyright 2024 PureBlazor</Copyright>
+  </PropertyGroup>
+
+  <ItemGroup>
+    <PackageReference Include="Microsoft.AspNetCore.Components"/>
+  </ItemGroup>
+
+</Project>

src/Pure.Blazor.Components.Primitives/PureAlign.cs

@@ -0,0 +1,8 @@
+namespace Pure.Blazor.Components.Primitives;
+
+public enum PureAlign
+{
+    Start,
+    Center,
+    End
+}

src/Pure.Blazor.Components/Common/PureAnimate.cs → src/Pure.Blazor.Components.Primitives/PureAnimate.cs

@@ -1,8 +1,8 @@
-namespace Pure.Blazor.Components.Common;
+namespace Pure.Blazor.Components.Primitives;
 
 public enum PureAnimate
 {
     None,
     Default,
     Spin
-}
+}

src/Pure.Blazor.Components/Common/PureComponent.cs → src/Pure.Blazor.Components.Primitives/PureComponent.cs

@@ -1,7 +1,6 @@
-using Microsoft.AspNetCore.Components;
-using Pure.Blazor.Components.Buttons;
+using Microsoft.AspNetCore.Components;
 
-namespace Pure.Blazor.Components.Common;
+namespace Pure.Blazor.Components.Primitives;
 
 public class PureComponent : ComponentBase
 {
@@ -11,8 +10,6 @@ protected override void OnParametersSet()
         BuildCss();
     }
 
-    [CascadingParameter] public ThemeProvider? ThemeProvider { get; set; } = new();
-
     /// <summary>
     ///     Add additional css classes to this component
     /// </summary>
@@ -29,7 +26,7 @@ protected override void OnParametersSet()
     ///     The current theme styles
     /// </summary>
     [CascadingParameter]
-    public PureTheme PureTheme { get; set; } = new();
+    public required IPureTheme PureTheme { get; set; }
 
     [Parameter] public RenderFragment? ChildContent { get; set; }
 
@@ -45,6 +42,13 @@ protected virtual void BuildCss()
     {
     }
 
+    /// <summary>
+    /// Gets the component style from the theme for the specific type of component.
+    /// </summary>
+    protected ComponentStyle Css => PureTheme.GetStyle(GetType());
+
+    protected ComponentStyle CssStyle(string name) => PureTheme.GetStyleByName(name);
+
     /// <summary>
     /// Applies the style based on the theme settings.
     ///
@@ -65,9 +69,9 @@ protected virtual string ApplyStyle(string? style)
             return Styles ?? "";
         }
 
-        if (ThemeProvider?.StylePrioritizer != null && Styles != null)
+        if (PureTheme?.StylePrioritizer != null && Styles != null)
         {
-            return ThemeProvider.StylePrioritizer.PrioritizeStyles(style, Styles);
+            return PureTheme.StylePrioritizer.PrioritizeStyles(style, Styles);
         }
 
         return $"{style} {Styles}";

src/Pure.Blazor.Components.Primitives/PureSize.cs

@@ -0,0 +1,10 @@
+namespace Pure.Blazor.Components.Primitives;
+
+public enum PureSize
+{
+    ExtraSmall,
+    Small,
+    Medium,
+    Large,
+    ExtraLarge
+}

src/Pure.Blazor.Components/Display/BadgeVariant.cs → src/Pure.Blazor.Components.Primitives/PureVariant.cs

@@ -1,8 +1,8 @@
-namespace Pure.Blazor.Components.Display;
+namespace Pure.Blazor.Components.Primitives;
 
 public enum PureVariant
 {
     Default,
     Outline,
     Subtle
-}
+}