Merge pull request #202 from cosmology-tech/feat/timeline-support-new…

…-design feat: timeline support secondary content, new design update
cosmology-tech · Sep 29, 2024 · 09e47a0 · 09e47a0
2 parents c707fde + 826c78b
commit 09e47a0
Show file tree

Hide file tree

Showing 10 changed files with 12,254 additions and 20,601 deletions.
diff --git a/packages/compiler/package.json b/packages/compiler/package.json
@@ -37,7 +37,7 @@
     "@babel/types": "^7.25.6",
     "@builder.io/mitosis": "0.4.3",
     "@builder.io/mitosis-cli": "0.4.3",
-    "@interchain-ui/vue-codemod": "^0.0.0",
+    "@interchain-ui/vue-codemod": "link:../vue-codemod",
     "@parcel/watcher": "^2.4.1",
     "cli-color": "^2.0.4",
     "command-line-args": "^5.2.1",

diff --git a/packages/compiler/src/base.ts b/packages/compiler/src/base.ts
@@ -122,7 +122,7 @@ export async function compile(rawOptions: CompileParams): Promise<void> {
       })
     : files;
 
-  console.log("[base.ts] filteredGlobbedFiles", filteredGlobbedFiles);
+  // console.log("[base.ts] filteredGlobbedFiles", filteredGlobbedFiles);
 
   const outPath = `${options.dest}/${options.target}`;
 

diff --git a/packages/react/package.json b/packages/react/package.json
@@ -147,7 +147,7 @@
     "match-sorter": "^6.3.4",
     "mkdirp": "^3.0.1",
     "parcel": "^2.12.0",
-    "parcel-optimizer-unlink-css": "^1.1.0",
+    "parcel-optimizer-unlink-css": "link:../optimizer-unlink-css",
     "parcel-resolver-ts-base-url": "^1.3.1",
     "prop-types": "^15.8.1",
     "storybook": "^8.3.0",

diff --git a/packages/react/stories/marketing/Timeline.stories.tsx b/packages/react/stories/marketing/Timeline.stories.tsx
@@ -16,22 +16,56 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
+const dimensions = {
+  one: {
+    width: 320,
+    height: 180,
+  },
+  two: {
+    width: 240,
+    height: 120,
+  },
+};
+
+const SecondaryContent = () => {
+  const randomDimension = Math.random() < 0.5 ? dimensions.one : dimensions.two;
+
+  return (
+    <Box
+      as="img"
+      width={randomDimension.width}
+      height={randomDimension.height}
+      borderRadius="$md"
+      display="flex"
+      justifyContent="center"
+      alignItems="center"
+      attributes={{
+        src: `https://picsum.photos/${randomDimension.width}/${randomDimension.height}`,
+        alt: "Random image",
+        "data-testid": "secondary-content",
+      }}
+    />
+  );
+};
+
 export const Default: Story = {
   render() {
     return (
-      <Box height="1200px">
+      <Box height="4000px" paddingBottom="$24">
         <Timeline
           events={[
             {
               timestamp: "2017-2018",
               title: "Cosmology project initiated",
               description:
                 "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae diam eget risus varius blandit sit amet non magna.",
+              secondaryContent: <SecondaryContent />,
             },
             {
               timestamp: "July - Sept, 2019",
               title:
                 "Cosmology participates in Based Chads Accelerator Of The Century",
+              secondaryContent: <SecondaryContent />,
             },
             {
               timestamp: "Nov 2019 - Mar 2021",
@@ -44,9 +78,11 @@ export const Default: Story = {
               timestamp: "Jan 2021",
               title:
                 "Cosmology created the first ever NFT based on the CHAD token",
+              secondaryContent: <SecondaryContent />,
             },
             {
               timestamp: "June 2022",
+              secondaryContent: <SecondaryContent />,
               title: "Launch of $CHAD token on the Osmosis swap platform",
             },
             {
@@ -67,6 +103,21 @@ export const Default: Story = {
                 </Box>
               ),
             },
+            {
+              timestamp: "Sept 2023",
+              title: "Cosmology introduces AI-powered trading algorithms",
+              description:
+                "Revolutionary machine learning models optimize trading strategies for $CHAD token holders.",
+              secondaryContent: <SecondaryContent />,
+            },
+            {
+              timestamp: "Feb 2024",
+              title:
+                "Launch of Cosmology DEX: The first interplanetary decentralized exchange",
+              description:
+                "Enabling seamless crypto transactions across Earth, Mars, and beyond.",
+              secondaryContent: <SecondaryContent />,
+            },
           ]}
         />
       </Box>