Skip to content

init app with component sandbox #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
chrisolsen merged 1 commit into from
Jun 29, 2023
Merged

init app with component sandbox #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 25 additions & 0 deletions .scripts/make_route.sh
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
#!/bin/bash

if [ $# -ne 1 ]
then
echo "Missing the name param"
echo "ex. npm run make:route [Name]"
exit 0
fi

name=${1,}
Name=${1^}

cp .templates/route.tmpl src/routes/$1.tsx
sed -i "s/{{Name}}/$Name/g" src/routes/$1.tsx
sed -i "s/{{name}}/$name/g" src/routes/$1.tsx

echo "Route created!"
echo "=============="
echo ""

echo "Add the route to the App.tsx file"
echo " <Route path=\"$name\" element={<${Name}Page />} />"
echo ""
echo "Add the link to the Components.tsx file"
echo " <Link to=\"$name\">$Name</Link>"
53 changes: 53 additions & 0 deletions .templates/route.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
import { useState } from "react";
import { GoA{{Name}}, GoACallout } from "@abgov/react-components";
import { Sandbox, ComponentBinding } from "@components/sandbox";
import { CodeSnippet } from "@components/code-snippet/CodeSnippet";

export default function {{Name}}Page() {

const [{{name}}Props, set{{Name}}Props] = useState({});
const [{{name}}Bindings, set{{Name}}Bindings] = useState<ComponentBinding[]>([
{ label: "SomeProp", type: "list", name: "type", options: ["", "foo", "bar"], value: "", defaultValue: "foo"},
{ label: "AnotherProp", type: "boolean", name: "disabled", value: false },
])

const noop = () => {}

function onChange(bindings: ComponentBinding[], props: Record<string, unknown>) {
set{{Name}}Bindings(bindings)
set{{Name}}Props(props)
}

return (
<>
<h1>{{Name}}</h1>
<p>
{{Name}} allows users to ...
</p>
<Sandbox
name="{{name}}"
properties={{{name}}Bindings}
onChange={onChange}
note=""
>
<CodeSnippet lang="typescript" tags="angular" allowCopy={true} code={`
export class SomeOtherComponent {
// angular event handling code
}
`}>
</CodeSnippet>

<CodeSnippet lang="tsx" tags="react" allowCopy={true} code={`
// react code
`}>
</CodeSnippet>

<GoA{{Name}} {...{{name}}Props} onClick={noop}></GoA{{Name}}>
</Sandbox>

<GoACallout type="information" mt="2xl">
<a href="#">View installation instructions</a>
</GoACallout>
</>
)
}
22 changes: 1 addition & 21 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,2 @@
# React product template
# UI component library documentation

To help get teams up and running sooner, this product template to DDD product teams to showcase the ui-components and provide a starting point for teams building DDD products.

### Usage
To use the templates, follow these steps:

1. Click the green **Use this template** button
2. Select **Create a new repository**
3. Select an owner and give the repo a suitable name for your project
4. Select either Public or Private
5. Click the button **Create repository from template**
6. Clone the repo onto your machine
7. Using a terminal of some kind, go into the directory you created and run the following commands (in order):
1. `npm i`
2. `npm run build`
3. `npm run dev`
8. Go to the listed port number of your localhost

---

[Visit Design System](https://ui-components.alberta.ca)
35 changes: 16 additions & 19 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,18 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>DDI Design System</title>
<script
type="module"
src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"
></script>
<script
nomodule
src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"
></script>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/index.tsx"></script>
</body>
</html>

<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
<title>Vite + React + TS</title>
</head>

<body>
<div id="root"></div>
<script type="module" src="/src/App.tsx"></script>
</body>

</html>
Loading