Develop

.github/workflows/publish-release-candidate.yml

@@ -3,7 +3,9 @@ name: Publish release candidate
 on:
   push:
     tags:
-      - "v[0-9]+.[0-9]+.[0-9]+-rc[0-9]+"
+      # To bump, and push tagged commit:
+      #   yarn version --prerelease # git push <your remote> --tag
+      - "v[0-9]+.[0-9]+.[0-9]+-rc.[0-9]+"
   workflow_dispatch:
 
 jobs:
@@ -21,7 +23,18 @@ jobs:
       - name: Get tag name
         id: tag-name
         run: echo "tag=${GITHUB_REF#refs/*/}" >> $GITHUB_OUTPUT
-
+      - name: Get version without prefix
+        id: extract-version
+        run: |
+          # Extract version without prefix
+          version=$(echo "${{ steps.tag-name.outputs.tag }}" | sed 's/^v//' )
+          echo "version=$version" >> $GITHUB_ENV # Set the output variable using environment file
+      - name: Get dist tag without version suffix
+        id: extract-dist-tag
+        run: |
+          # Extract the dist tag without version suffix e.g. 0.0.0-alpha.1 = alpha, 0.0.0-beta = beta
+          dist_tag=$(echo "${{ steps.tag-name.outputs.tag }}" | sed 's/\.[0-9]\+$//' | cut -d'-' -f2)
+          echo "dist_tag=$dist_tag" >> $GITHUB_ENV # Set the output variable using environment file
       - name: configure-node
         uses: actions/setup-node@v4
         with:
@@ -44,8 +57,7 @@ jobs:
           key: ${{ runner.os }}-node_modules-${{ hashFiles('**/yarn.lock') }}-${{ steps.node.outputs.version }}
           restore-keys: |
             ${{ runner.os }}-node_modules-
-
-      - name: Install dependencies
-        run: yarn install --frozen-lockfile
+      - run: yarn install --frozen-lockfile
       - run: yarn build
-      - run: npm publish --tag ${{ steps.tag-name.outputs.tag }} --access public --provenance
+      - run: echo ${{ env.dist_tag }}
+      - run: npm publish --tag ${{ env.dist_tag }} --access public --provenance

package.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/telicent-oss/telicent-ds.git"
   },
   "type": "module",
-  "version": "0.0.3-rc3",
+  "version": "0.0.4-rc.12",
   "private": false,
   "dependencies": {
     "@emotion/react": "^11.10.6",
@@ -16,7 +16,10 @@
     "@fortawesome/free-regular-svg-icons": "^6.5.1",
     "@fortawesome/free-solid-svg-icons": "^6.5.1",
     "@fortawesome/react-fontawesome": "^0.2.0",
+    "@mui/lab": "5.0.0-alpha.170",
     "@mui/material": "^5.15.14",
+    "@mui/x-tree-view": "7.3.1",
+    "@react-spring/web": "9.7.3",
     "@tanstack/react-query": "^5.18.0",
     "@telicent-oss/ontologyservice": "^0.0.1",
     "classnames": "^2.3.1",
@@ -30,7 +33,7 @@
     "zod": "^3.21.4"
   },
   "resolutions": {
-    "jackspeak": "2.1.1"
+    "jackspeak": "2.3.5"
   },
   "scripts": {
     "lint": "eslint --resolve-plugins-relative-to src",
@@ -48,7 +51,9 @@
     "chromatic": "chromatic --exit-zero-on-changes",
     "css": "npx tailwindcss -i ./src/index.css -o ./src/main.css",
     "prestart": "yarn run css",
-    "prebuild": "yarn clean"
+    "prebuild": "yarn clean",
+    "bump:prerelease": "yarn version --prerelease && git push && git push --tags",
+    "bump:pre": "yarn bump:prerelease"
   },
   "peerDependencies": {
     "@tanstack/react-query": "^5.18.0",
@@ -70,12 +75,12 @@
   },
   "devDependencies": {
     "@babel/core": "^7.20.12",
-    "@commitlint/cli": "^17.1.2",
+    "@commitlint/cli": "17.1.2",
     "@commitlint/config-conventional": "^17.1.0",
     "@storybook/addon-a11y": "^7.6.7",
     "@storybook/addon-actions": "^7.6.7",
     "@storybook/addon-docs": "^7.6.7",
-    "@storybook/addon-essentials": "^7.6.7",
+    "@storybook/addon-essentials": "7.6.7",
     "@storybook/addon-links": "^7.6.7",
     "@storybook/blocks": "^7.6.7",
     "@storybook/react": "^7.6.7",
@@ -95,7 +100,7 @@
     "autoprefixer": "^10.4.13",
     "babel-loader": "^9.1.2",
     "chromatic": "^6.15.0",
-    "commitizen": "^4.2.5",
+    "commitizen": "4.2.5",
     "cross-env": "^7.0.3",
     "cssnano": "^5.0.14",
     "cz-conventional-changelog": "^3.3.0",
@@ -119,8 +124,8 @@
     "postcss": "^8.4.29",
     "postcss-cli": "^10.1.0",
     "postcss-import": "^15.1.0",
-    "react-scripts": "^5.0.0",
-    "release-please": "^15.6.0",
+    "react-scripts": "5.0.0",
+    "release-please": "15.6.0",
     "remark-gfm": "^3.0.1",
     "rollup": "^4.5.0",
     "rollup-plugin-copy": "^3.5.0",

src/export.ts

@@ -8,3 +8,31 @@ export type { IconStyle } from "./contexts/OntologyStyles";
 export * from "./components";
 export { default as useDebounce } from "./hooks/useDebounce";
 
+// Components
+export * from './v2/components/Input/Input';
+export { default as ButtonBase } from './v2/components/ButtonBase/ButtonBase';
+export { default as Divider } from './v2/components/Divider/Divider';
+export { default as Text, H1, H2, H3, H4, H5, H6 } from './v2/components/Text/Text';
+export * from './v2/components/TreeView/TreeView';
+export * from './v2/components/Button/Button';
+export * from './v2/components/Skeleton/Skeleton';
+export * from './v2/components/LinearProgress/LinearProgress';
+export * from './v2/components/Chip/Chip';
+
+// Layout
+export { default as Grid } from './v2/layout/Grid/Grid';
+export { default as Card } from './v2/layout/Card/Card';
+export { default as Container } from './v2/layout/Container/Container';
+export { default as Box } from './v2/layout/Box/Box';
+export { default as Stack } from './v2/layout/Stack/Stack';
+export { default as StandardAppChrome } from './v2/layout/StandardAppChrome/StandardAppChrome';
+export * from './v2/layout/Paper/Paper';
+
+// Utils
+export { default as Popover } from './v2/utils/Popover/Popover';
+
+// Icons
+export { default as AccountIcon } from './v2/icons/AccountIcon/AccountIcon';
+export { default as SearchIcon } from './v2/icons/SearchIcon/SearchIcon';
+
+

src/v2/components/Button/Button.stories.tsx

@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Button } from "./Button";
+
+const meta = {
+  component: Button,
+} satisfies Meta<typeof Button>;
+
+export default meta;
+
+export type ButtonStory = StoryObj<typeof meta>;
+
+export const Basic: ButtonStory = {
+  args: {
+
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: `Basic button`,
+      },
+    },
+  },
+};

src/v2/components/Button/Button.tsx

@@ -0,0 +1,24 @@
+import { LoadingButton, LoadingButtonProps } from '@mui/lab';
+/* 
+Hm.
+
+// import ButtonBase from "../../../components/TeliButton/TeliButtonBase";
+!CRITICAL TODO onboard with MUI's createTheme & Tailwind
+WHY 
+    TeliButtonBase has `teliButton.css`. Ash is not sure if this vibes with MUI. 
+    Ash needs confidence that these can be combined without interfering
+    with theme controls.
+    Can we make them play nice.
+
+    Alecs says:
+    - wait until we get design tokens
+    - Then we can ignore tailwind's opinion
+    - We will need to decide; Do we override MUI or do we bend/control/parametize MUI
+*/
+
+
+type NewButtonProps = Omit<LoadingButtonProps, 'color'> & { 
+    purpose?: LoadingButtonProps['color'] // Risky alias.
+};
+
+export const Button:React.FC<NewButtonProps> = ({ purpose, ...props }) => <LoadingButton {...props} color={purpose} />

src/v2/components/ButtonBase/ButtonBase.stories.tsx

@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import ButtonBase from "./ButtonBase";
+
+const meta = {
+  component: ButtonBase,
+} satisfies Meta<typeof ButtonBase>;
+
+export default meta;
+
+export type ButtonBaseStory = StoryObj<typeof meta>;
+
+export const Basic: ButtonBaseStory = {
+  args: {
+    id: "example-id",
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: `<code>fullWidth</code> can be used to make the ButtonBase take up the
+        full width of its parent container.`,
+      },
+    },
+  },
+};

src/v2/components/ButtonBase/ButtonBase.tsx

@@ -0,0 +1,3 @@
+import ButtonBase from "../../../components/TeliButton/TeliButtonBase";
+
+export default ButtonBase;

src/v2/components/Chip/Chip.stories.tsx

@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Chip } from "./Chip";
+
+const meta = {
+  component: Chip,
+} satisfies Meta<typeof Chip>;
+
+export default meta;
+
+export type ChipStory = StoryObj<typeof meta>;
+
+export const Basic: ChipStory = {
+  args: {
+    label: '### label',
+    color: 'primary'
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: `Chips are compact elements that represent an input, attribute, or action.`,
+      },
+    },
+  },
+};

src/v2/components/Chip/Chip.tsx

@@ -0,0 +1,3 @@
+import ChipDefault from '@mui/material/Chip';
+
+export const Chip = ChipDefault;

src/v2/components/Divider/Divider.stories.tsx

@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import Divider from "./Divider";
+
+const meta = {
+  component: Divider,
+} satisfies Meta<typeof Divider>;
+
+export default meta;
+
+export type DividerStory = StoryObj<typeof meta>;
+
+export const Basic: DividerStory = {
+  args: {
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: `A line`,
+      },
+    },
+  },
+};

src/v2/components/Divider/Divider.tsx

@@ -0,0 +1,4 @@
+
+import Divider from '@mui/material/Divider';
+
+export default Divider;

src/v2/components/Input/Input.stories.tsx

@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Input } from "./Input";
+export { Simple } from "./stories"; // Must be named
+
+const meta = {
+  component: Input,
+} satisfies Meta<typeof Input>;
+
+export default meta;
+
+export type InputStory = StoryObj<typeof meta>;
+
+export const Basic: InputStory = {
+  args: {
+    id: "example-id",
+    fullWidth: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: `Completely unadorned input field`,
+      },
+    },
+  },
+};

src/v2/components/Input/Input.tsx

@@ -0,0 +1,3 @@
+import TextField from '@mui/material/TextField';
+
+export const Input = TextField;

src/v2/components/Input/stories/Simple.tsx

@@ -0,0 +1,71 @@
+import { useState } from "react";
+import { Input } from "../Input";
+import { InputStory } from "../Input.stories";
+import { Box, Button, TextField } from "@mui/material";
+
+export const Simple: InputStory = {
+  render: () => {
+    const [value, setValue] = useState("I'm batman!");
+
+    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+      setValue(event.target.value);
+    };
+
+    return (
+      <div className="grid grid-cols-3 gap-3">
+        <Input />
+        <span color="red" style={{color:'red'}}>Hello</span>
+        <Box sx={{ display: "flex", alignItems: "center", gap: 0.5 }}>
+          <TextField
+            variant="outlined"
+            label="Input"
+            sx={{ borderTopRightRadius: 0, borderBottomRightRadius: 0 }}
+          />
+          <Button
+            variant="contained"
+            sx={{
+              borderRadius: 0,
+              borderTopLeftRadius: 0,
+              borderBottomLeftRadius: 0,
+            }}
+          >
+            Go
+          </Button>
+        </Box>
+      </div>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Test.",
+      },
+      source: {
+        code: `
+        <div className="grid grid-cols-3 gap-3">
+          <Box sx={{ display: "flex", alignItems: "center", gap: 0.5 }}>
+            <TextField
+              variant="outlined"
+              label="Input"
+              sx={{ borderTopRightRadius: 0, borderBottomRightRadius: 0 }}
+            />
+            <Button
+              variant="contained"
+              sx={{
+                borderRadius: 0,
+                borderTopLeftRadius: 0,
+                borderBottomLeftRadius: 0,
+              }}
+            >
+              Go
+            </Button>
+          </Box>
+        </div>
+
+      `,
+      },
+    },
+  },
+};
+
+export default Simple;

src/v2/components/Input/stories/index.tsx

@@ -0,0 +1 @@
+export * from './Simple';