Merging master

powerhome · Jul 19, 2024 · f2d5b35 · f2d5b35
2 parents 3b578ae + a07c7f8
commit f2d5b35
Show file tree

Hide file tree

Showing 98 changed files with 1,592 additions and 697 deletions.
diff --git a/Dockerfile b/Dockerfile
@@ -90,3 +90,7 @@ COPY --link --from=release /home/app/src/playbook-website/public /home/app/src/p
 COPY --link --from=release /home/app/src/node_modules/@powerhome/playbook-icons/icons /home/app/src/temp-icons
 RUN cp -r /home/app/src/temp-icons/* /home/app/src/playbook-website/app/javascript/images/
 RUN rm -rf /home/app/src/temp-icons
+
+COPY --link --from=release /home/app/src/node_modules/@powerhome/playbook-icons/aliases.json /home/app/src/aliases.json
+RUN cp /home/app/src/aliases.json /home/app/src/playbook-website/app/javascript/aliases.json
+RUN rm /home/app/src/aliases.json
diff --git a/playbook-website/app/controllers/pages_controller.rb b/playbook-website/app/controllers/pages_controller.rb
@@ -240,7 +240,12 @@ def set_category
 
   def kit_categories
     @category = params[:category]
-    aggregate_kits.find { |item| item["category"] == @category }["components"].map { |component| component["name"] }
+    components = aggregate_kits.find { |item| item["category"] == @category }["components"]
+    filter_kits_by_status(components, status: "beta").map { |component| component["name"] }
+  end
+
+  def filter_kits_by_status(components, status: nil)
+    components.reject { |component| status && component["status"] == status }
   end
 
   def set_kit

diff --git a/playbook-website/app/javascript/components/Website/src/components/CategoryTitle/index.tsx b/playbook-website/app/javascript/components/Website/src/components/CategoryTitle/index.tsx
@@ -6,13 +6,14 @@ import { linkFormat } from "../../../../../utilities/website_sidebar_helper";
 import "./styles.scss";
 
 type CategoryTitleProps = {
-  name: string;
+  category: string;
 };
 
-export const CategoryTitle = ({ name }: CategoryTitleProps): React.ReactElement => {
+export const CategoryTitle = ({ category }: CategoryTitleProps): React.ReactElement => {
+
   return (
     <Flex align="center" className="category-title" gap="xs" marginBottom="md">
-      <Title size={{ xs: 3, sm: 2, md: 2, lg: 2, xl: 2 }} tag="h1" text={linkFormat(name)} />
+      <Title size={{ xs: 3, sm: 2, md: 2, lg: 2, xl: 2 }} tag="h1" text={linkFormat(category)} />
       <Icon className="icon mobile" icon="circle-arrow-right" size="sm" />
       <Icon className="icon desktop" icon="circle-arrow-right" size="xl" />
     </Flex>

diff --git a/playbook-website/app/javascript/components/Website/src/hooks/loaders.ts b/playbook-website/app/javascript/components/Website/src/hooks/loaders.ts
@@ -7,13 +7,14 @@ interface ComponentTypes {
 }
 
 interface CategoryTypes {
-  name: string;
+  category: string;
   description: string;
   components: ComponentTypes[];
 }
 
-const sortByName = (a: ComponentTypes, b: ComponentTypes) =>
-  a.name.localeCompare(b.name);
+const sortByName = (a: ComponentTypes, b: ComponentTypes): number => {
+  return a.name.localeCompare(b.name);
+}
 
 const sortComponentsByName = (kitCategory: CategoryTypes) => {
   kitCategory.components.sort(sortByName);
@@ -22,8 +23,8 @@ const sortComponentsByName = (kitCategory: CategoryTypes) => {
 export const ComponentsLoader: () => Promise<CategoryTypes[]> = async () => {
   const response = await fetch("/beta/kits.json");
   const data = await response.json();
- 
-  data.kits.sort(sortByName).forEach(sortComponentsByName);
+
+  data.kits.forEach(sortComponentsByName);
 
   return data;
 };
@@ -40,9 +41,9 @@ export const CategoryLoader: (
   const response = await fetch("/beta/kits.json");
   const { kits } = await response.json();
 
-  const filteredData = kits.filter(
-    (kit: ComponentTypes) => kit.name === params.name
-  )[0];
+  const filteredData = kits.find(
+    (kit: CategoryTypes) => kit.category === params.category
+  );
 
   filteredData.components.sort(sortByName);
 

diff --git a/playbook-website/app/javascript/components/Website/src/pages/CategoryShow/index.tsx b/playbook-website/app/javascript/components/Website/src/pages/CategoryShow/index.tsx
@@ -13,13 +13,13 @@ import { Kit } from "../ComponentList"
 import "./styles.scss"
 
 export default function CategoryShow() {
-  const { components, name, description } = useLoaderData()
+  const { components, category, description } = useLoaderData()
   const [kitsToShow, setKitsToShow] = useState(components)
   const [platform, setPlatform] = useState('react')
 
   return (
     <>
-      <Hero description={description} title={linkFormat(name)} />
+      <Hero description={description} title={linkFormat(category)} />
 
       <Flex
         align="center"
@@ -39,7 +39,7 @@ export default function CategoryShow() {
             <Body className="previous-route" color="light">Components</Body>
           </NavLink>
           <Icon className="category-breadcrumb-icon" icon="angle-right" />
-          <Body text={linkFormat(name)} />
+          <Body text={linkFormat(category)} />
         </Flex>
 
         {!kitsToShow.length && (
@@ -54,14 +54,17 @@ export default function CategoryShow() {
           )}
 
         <KitGrid>
-          {kitsToShow.map(({ description, name }: Kit, index: number) => (
-            <KitCard
-              description={description}
-              name={name}
-              key={`category-${name}-${index}`}
-              platform={platform}
-            />
-          ))}
+          {kitsToShow.filter(component => component.status === "stable")
+          .map(({ description, name }: Kit, index: number) => {
+            return(
+              <KitCard
+                description={description}
+                name={name}
+                key={`category-${name}-${index}`}
+                platform={platform}
+              />
+            )
+          })}
         </KitGrid>
       </PageContainer>
     </>

diff --git a/playbook-website/app/javascript/components/Website/src/pages/ComponentList.tsx b/playbook-website/app/javascript/components/Website/src/pages/ComponentList.tsx
@@ -10,7 +10,7 @@ import { PageContainer } from "../components/PageContainer"
 import { CategoryTitle } from "../components/CategoryTitle"
 
 export type Kit = {
-  name: string;
+  category: string;
   components: {
     name: string;
     description: string;
@@ -65,14 +65,14 @@ export default function ComponentList() {
                 />
               </Flex>
             ) : (
-              kitsToShow.map(({ name, components }: Kit, index: number) => (
+              kitsToShow.map(({ category, components }: Kit, index: number) => (
                 <section
                   className="category mb_xl"
-                  key={`${name}-${index}`}
-                  id={name}
+                  key={`${category}-${index}`}
+                  id={category}
                 >
-                  <NavLink to={`/beta/kit_category/${name}`}>
-                    <CategoryTitle name={name} />
+                  <NavLink to={`/beta/kit_category/${category}`}>
+                    <CategoryTitle category={category} />
                   </NavLink>
                   <KitGrid>
                     {components

diff --git a/playbook-website/app/javascript/components/Website/src/pages/IconList/index.tsx b/playbook-website/app/javascript/components/Website/src/pages/IconList/index.tsx
@@ -237,12 +237,54 @@ export default function IconList() {
       </Flex>
 
 
+      <Flex
+        justify='center'
+        marginX={{ lg: "sm", xl: "sm" }}
+        paddingLeft="xs"
+        paddingTop="sm"
+      >
+        <FlexItem alignSelf='stretch' maxWidth='xxl' flexGrow={1}>
+          <Title paddingBottom="sm" size={3} tag='h3' text='Other Props' />
+        </FlexItem>
+      </Flex>
+      <Flex
+        justify='center'
+        marginX={{ lg: "sm", xl: "sm" }}
+        paddingLeft="xs"
+      >
+        <FlexItem alignSelf='stretch' maxWidth='xxl' flexGrow={1}>
+          <Flex>
+            <Card
+              marginRight='sm'
+              hover={{ shadow: "deeper" }}
+              cursor='pointer'
+            >
+              <Icon icon="roofing" size="2x" pull="left"  />
+            </Card>
+            <Card
+              marginRight='sm'
+              hover={{ shadow: "deeper" }}
+              cursor='pointer'
+            >
+              <Icon icon="roofing" size="2x" pull="right"  />
+            </Card>
+            <Card
+              marginRight='sm'
+              hover={{ shadow: "deeper" }}
+              cursor='pointer'
+            >
+              <Icon icon="roofing" size="2x" fixedWidth  />
+            </Card>
+          </Flex>
+        </FlexItem>
+      </Flex>
 
 
       <Flex
         justify='center'
         marginX={{ lg: "sm", xl: "sm" }}
         paddingLeft="xs"
+        paddingTop="sm"
       >
         <FlexItem alignSelf='stretch' maxWidth='xxl' flexGrow={1}>
           <Title paddingBottom="sm" size={3} tag='h3' text='Color' />

diff --git a/playbook-website/app/javascript/packs/app.js b/playbook-website/app/javascript/packs/app.js
@@ -40,7 +40,7 @@ const router = createBrowserRouter(
       <Route
           element={<CategoryShow />}
           loader={CategoryLoader}
-          path="kit_category/:name"
+          path="kit_category/:category"
       />
       <Route
           element={<IconList />}

diff --git a/playbook-website/app/views/samples/icons.html.erb b/playbook-website/app/views/samples/icons.html.erb
@@ -28,7 +28,7 @@
   <% end %>
   <%= pb_rails("card", props: { padding: "none", header: true, margin_bottom: "sm"}) do %>
     <%= pb_rails("card/card_body", props: { padding: "md",  }) do %>
-      <%= pb_rails("icon", props: { icon: "nitro" }) %>
+      <%= pb_rails("icon", props: { icon: "nitro-n" }) %>
     <% end %>
   <% end %>
 <% end %>
@@ -92,6 +92,39 @@
   <% end %>
 <% end %>
 
+<%= pb_rails("flex", props: { padding_left: "md"} ) do %>
+  <%= pb_rails("flex/flex_item") do %>
+    <%= pb_rails("title", props: {size: 3, text: "Pull/Width", padding_bottom: "sm"})%>
+  <% end %>
+<% end %>
+<%= pb_rails("flex", props: { padding_left: "md" }) do %>
+  <%= pb_rails("card", props: { padding: "none", header: true, margin_bottom: "sm"}) do %>
+    <%= pb_rails("card/card_body", props: { padding: "md" }) do %>
+      <%= pb_rails("icon", props: { icon: "powergon-p", size: "2x", pull: "right" }) %>
+    <% end %>
+  <% end %>
+  <%= pb_rails("card", props: { padding: "none", header: true, margin_bottom: "sm"}) do %>
+    <%= pb_rails("card/card_body", props: { padding: "md" }) do %>
+      <%= pb_rails("icon", props: { icon: "powergon-p", size: "2x", pull: "left" }) %>
+    <% end %>
+  <% end %>
+  <%= pb_rails("card", props: { padding: "none", header: true, margin_bottom: "sm"}) do %>
+    <%= pb_rails("card/card_body", props: { padding: "md" }) do %>
+      <%= pb_rails("icon", props: { icon: "powergon-p", size: "2x", fixed_width: true }) %>
+    <% end %>
+  <% end %>
+  <%= pb_rails("card", props: { padding: "none", header: true, margin_bottom: "sm"}) do %>
+    <%= pb_rails("card/card_body", props: { padding: "md" }) do %>
+      <%= pb_rails("icon", props: { icon: "powergon-p", size: "2x", fixed_width: false }) %>
+    <% end %>
+  <% end %>
+  <%= pb_rails("card", props: { padding: "none", header: true, margin_bottom: "sm"}) do %>
+    <%= pb_rails("card/card_body", props: { padding: "md" }) do %>
+      <%= pb_rails("icon", props: { icon: "powergon-p", size: "2x", border: true }) %>
+    <% end %>
+  <% end %>
+<% end %>
+
 <%= pb_rails("flex", props: { padding_left: "md"} ) do %>
   <%= pb_rails("flex/flex_item") do %>
     <%= pb_rails("title", props: {size: 3, text: "Color", padding_bottom: "sm"})%>
@@ -161,3 +194,33 @@
     <% end %>
   <% end %>
 <% end %>
+
+
+<%= pb_rails("flex", props: { padding_left: "md"} ) do %>
+  <%= pb_rails("flex/flex_item") do %>
+    <%= pb_rails("title", props: {size: 3, text: "Aliases", padding_bottom: "sm"})%>
+  <% end %>
+<% end %>
+
+<%= pb_rails("flex", props: { padding_left: "md" }) do %>
+  <%= pb_rails("card", props: { padding: "none", header: true, margin_bottom: "sm"}) do %>
+    <%= pb_rails("card/card_body", props: { padding: "md" }) do %>
+      <%= pb_rails("icon", props: { icon: "house", size: "2x", spin: true }) %>
+    <% end %>
+  <% end %>
+  <%= pb_rails("card", props: { padding: "none", header: true, margin_bottom: "sm"}) do %>
+    <%= pb_rails("card/card_body", props: { padding: "md" }) do %>
+      <%= pb_rails("icon", props: { icon: "home", size: "2x", pulse: true }) %>
+    <% end %>
+  <% end %>
+  <%= pb_rails("card", props: { padding: "none", header: true, margin_bottom: "sm"}) do %>
+    <%= pb_rails("card/card_body", props: { padding: "md" }) do %>
+      <%= pb_rails("icon", props: { icon: "gear", size: "2x", spin: true }) %>
+    <% end %>
+  <% end %>
+  <%= pb_rails("card", props: { padding: "none", header: true, margin_bottom: "sm"}) do %>
+    <%= pb_rails("card/card_body", props: { padding: "md" }) do %>
+      <%= pb_rails("icon", props: { icon: "cog", size: "2x", pulse: true }) %>
+    <% end %>
+  <% end %>
+<% end %>
diff --git a/playbook-website/config/application.rb b/playbook-website/config/application.rb
@@ -28,6 +28,7 @@ class Application < Rails::Application
     config.load_defaults 7.0
 
     config.icon_path = Rails.env.production? ? "app/javascript/images/" : "../node_modules/@powerhome/playbook-icons/icons"
+    config.icon_alias_path = Rails.env.production? ? "app/javascript/aliases.json" : "../node_modules/@powerhome/playbook-icons/aliases.json"
     # Configuration for the application, engines, and railties goes here.
     #
     # These settings can be overridden in specific environments using the files

diff --git a/playbook-website/package.json b/playbook-website/package.json
@@ -10,8 +10,8 @@
   "dependencies": {
     "@fortawesome/fontawesome-pro": "6.2.1",
     "@mapbox/mapbox-gl-draw": "^1.4.1",
-    "@powerhome/playbook-icons": "0.0.1-alpha.25",
-    "@powerhome/playbook-icons-react": "0.0.1-alpha.25",
+    "@powerhome/playbook-icons": "0.0.1-alpha.29",
+    "@powerhome/playbook-icons-react": "0.0.1-alpha.29",
     "@powerhome/power-fonts": "0.0.1-alpha.6",
     "@rails/webpacker": "5.4.3",
     "@svgr/webpack": "5.5.0",

diff --git a/playbook-website/test/menu_yml_spec.rb b/playbook-website/test/menu_yml_spec.rb
@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+require "yaml"
+
+yaml_file_path = File.expand_path("../../../playbook/playbook-website/config/menu.yml", __dir__)
+
+RSpec.describe "Menu YAML File" do
+  let(:data) { YAML.safe_load(File.read(yaml_file_path), aliases: true) }
+
+  it "should load YAML file without errors" do
+    expect(data).to_not be_nil
+  end
+
+  it "should have categories defined" do
+    expect(data).to have_key("kits")
+    expect(data["kits"]).to be_an(Array)
+    expect(data["kits"]).to_not be_empty
+  end
+
+  it "should have components defined for each category" do
+    data["kits"].each do |kit|
+      expect(kit).to have_key("category")
+      expect(kit["category"]).to be_a(String)
+      expect(kit).to have_key("components")
+      expect(kit["components"]).to be_an(Array)
+      expect(kit["components"]).to_not be_empty
+
+      kit["components"].each do |component|
+        expect(component).to have_key("name")
+        expect(component["name"]).to be_a(String)
+        expect(component).to have_key("platforms")
+        expect(component["platforms"]).to be_an(Array)
+        expect(component["platforms"]).to_not be_empty
+      end
+    end
+  end
+end