Feature/typography (#1)

* feat(foundation): added colors and updated folder structure.

* feat(icons): Added icons

* feat(icons): updated icons from figma

* chore: moved dependencies around

* feat: remove buttons and update icon story

* added mdx file for icon

* feat: updated styleguide and structure

* hopefully this fixes the build issue.

* fixed issue with filename

* moved fontawesome to dev dependencies

* updated turbo.json

* added a font importer

.gitignore

@@ -144,3 +144,6 @@ server/dist
 public/dist
 storybook-static/
 
+.vscode
+
+.vercel

.npmrc

@@ -1,2 +1,5 @@
 auto-install-peers = true
 public-hoist-pattern[]=*storybook*
+@fortawesome:registry=https://npm.fontawesome.com/
+@awesome.me:registry=https://npm.fontawesome.com/
+//npm.fontawesome.com/:_authToken=FAF67CC1-9AE7-4FAC-A815-304EDF6AC435

apps/docs/.storybook/main.js

@@ -5,7 +5,12 @@ function getAbsolutePath(value) {
 }
 
 const config = {
-  stories: ["../stories/*.stories.tsx", "../stories/**/*.stories.tsx"],
+  stories: [
+    "../stories/*.stories.tsx",
+    "../stories/**/*.stories.tsx",
+    "../stories/**/*.mdx",
+    "../stories/*.mdx",
+  ],
   addons: [
     getAbsolutePath("@storybook/addon-links"),
     getAbsolutePath("@storybook/addon-essentials"),

apps/docs/.storybook/manager.ts

@@ -0,0 +1,20 @@
+import {addons} from '@storybook/manager-api'
+import {themes} from '@storybook/theming'
+import {create} from '@storybook/theming'
+
+addons.setConfig({
+  theme: create({
+    base: 'light',
+    brandTitle: 'Murrieta Design System',
+    brandUrl: 'https://murrieta.natelubeck.com/',
+    // brandImage: '/logo.png',
+    colorPrimary: "#333",
+    colorSecondary: "#ffcc00",
+    appBg: "#f0f0f0",
+    appBorderColor: "#ccc",
+    appBorderRadius: 0,
+    textColor: "#333",
+    barTextColor: "#666",
+    barSelectedColor: "pink",
+  })
+})

apps/docs/stories/FontImporter.stories.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import type { Meta, StoryFn } from '@storybook/react';
+import FontImporter from '@murrieta/ui/foundation/fonts';
+import type { FontImporterProps } from '@murrieta/ui/foundation/fonts'
+
+export default {
+  title: 'Design System/Foundation/FontImporter',
+  component: FontImporter,
+  argTypes: {
+    fontUrl: {
+      control: 'text',
+      description: 'The URL of the custom font file.',
+    },
+    fontFamily: {
+      control: 'text',
+      description: 'The name of the font family.',
+    },
+    target: {
+      control: 'text',
+      description: 'The CSS selector where the font should be applied.',
+    },
+  },
+} as Meta;
+
+const Template: StoryFn = (args:FontImporterProps) => (
+  <>
+    <FontImporter {...args} />
+    <div>
+      <h1>Font Demo</h1>
+      <p>
+        This is a demonstration of the <strong>{args.fontFamily}</strong> font.
+      </p>
+      <div className="scoped-section">
+        <h2>Scoped Section</h2>
+        <p>
+          If the <code>target</code> is set to <code>.scoped-section</code>, this section uses the custom font.
+        </p>
+      </div>
+    </div>
+  </>
+);
+
+export const GlobalFont = Template.bind({});
+GlobalFont.args = {
+  fontUrl: 'https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu72xKOzY.woff2',
+  fontFamily: 'Roboto',
+  target: 'body',
+};
+
+export const ScopedFont = Template.bind({});
+ScopedFont.args = {
+  fontUrl: 'https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu72xKOzY.woff2',
+  fontFamily: 'Roboto',
+  target: '.scoped-section',
+};

apps/docs/stories/Icon.mdx

@@ -0,0 +1,40 @@
+import { Canvas, Meta } from '@storybook/blocks';
+
+import * as IconStories from './Icon.stories';
+
+<Meta of={IconStories} title="Design System/Foundation/Icons" />
+
+# Nate Lubeck
+
+<Canvas of={IconStories.Primary} />
+
+
+# Professional Icons
+The following icons will be used for any content related  to professionalism.
+
+<Canvas of={IconStories.Briefcase} />
+<Canvas of={IconStories.Chart} />
+<Canvas of={IconStories.Clipboard}  />
+<Canvas of={IconStories.Code} />
+<Canvas of={IconStories.Handshake} />
+
+# Personal Icons
+The following icons will be used for creativity and personal projects.
+
+<Canvas of={IconStories.Graffiti} />
+<Canvas of={IconStories.Painting} />
+<Canvas of={IconStories.City}  />
+<Canvas of={IconStories.Warehouse} />
+<Canvas of={IconStories.CarBuilding} />
+<Canvas of={IconStories.Building} />
+
+
+# Off Road Icons
+The following icons will be used for any content related to off road activities.
+
+{/* <Canvas of={IconStories.Offroad} /> */}
+<Canvas of={IconStories.Boot} />
+<Canvas of={IconStories.Backpack}  />
+<Canvas of={IconStories.Campfire} />
+<Canvas of={IconStories.Compass} />
+

apps/docs/stories/Icon.stories.tsx

@@ -0,0 +1,101 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import OffRoadIcon, {NLLogo,
+  BriefcaseIcon, ChartIcon,
+  ClipboardIcon, CodeIcon, HandshakeIcon,
+  GraffitiIcon, PaintingIcon, CityIcon,
+  WarehouseIcon, CarBuildingIcon, BuildingIcon,
+  BootIcon, BackpackIcon, CampfireIcon, CompassIcon } from "@murrieta/ui/foundation/icons";
+
+const meta: Meta<typeof OffRoadIcon> = {
+  component: OffRoadIcon,
+  title: "Design System/Foundation/Icons"
+};
+
+export default meta;
+
+type Story = StoryObj<typeof OffRoadIcon>;
+
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/react/api/csf
+ * to learn how to use render functions.
+ */
+
+
+export const Primary: Story = {
+  render: () => (<NLLogo size="xl" />),
+  name: "Nate Lubeck Logo",
+};
+
+export const Briefcase: Story = {
+  render: () => (<BriefcaseIcon />),
+  name: "BriefcaseIcon",
+};
+
+export const Chart: Story = {
+  render: () => <ChartIcon />,
+  name: "ChartIcon",
+};
+
+export const Clipboard: Story = {
+  render: () => <ClipboardIcon />,
+  name: "ClipboardIcon",
+};
+
+export const Code: Story = {
+		render: () => <CodeIcon />,
+		name: "CodeIcon",
+};
+
+export const Handshake: Story = {
+		render: () => <HandshakeIcon />,
+		name: "HandshakeIcon",
+};
+
+export const Graffiti: Story = {
+  render: () => <GraffitiIcon />,
+  name: "GraffitiIcon"
+}
+
+export const Painting: Story = {
+		render: () => <PaintingIcon />,
+		name: "PaintingIcon",
+};
+
+export const City: Story = {
+  render: () => <CityIcon />,
+  name:"CityIcon"
+}
+export const Warehouse: Story = {
+  render: () => <WarehouseIcon />,
+  name:"WarehouseIcon"
+}
+
+export const CarBuilding: Story = {
+  render: () => <CarBuildingIcon />,
+  name:"CarBuildingIcon"
+}
+export const Building: Story = {
+  render: () => <BuildingIcon />,
+  name:"BuildingIcon"
+}
+
+export const Boot: Story = {
+  render: () => <BootIcon />,
+  name: "BootIcon",
+};
+
+export const Backpack: Story = {
+  render: () => <BackpackIcon />,
+  name:"BackpackIcon"
+}
+
+export const Campfire: Story = {
+  render: () => <CampfireIcon />,
+  name:"CampfireIcon",
+};
+
+export const Compass: Story = {
+  render: () => <CompassIcon />,
+  name:"CompassIcon"
+}

apps/docs/stories/IntroductionDocumentation.mdx

@@ -0,0 +1,8 @@
+import { Meta } from '@storybook/blocks';
+
+<Meta title="Start Here" />
+
+# Introduction
+
+An atomic design system for communicating professionalism, creativity and the outdoors.
+

package.json

@@ -12,10 +12,11 @@
   },
   "devDependencies": {
     "@changesets/cli": "^2.27.1",
+    "@awesome.me/kit-a2bfc4dc7b": "^1.0.5",
     "prettier": "^3.2.5",
     "turbo": "^2.3.3"
   },
-  "name": "design-system",
+  "name": "murrieta-design-system",
   "packageManager": "bun@1.1.24",
   "workspaces": [
     "apps/*",